🔨 docs+addons

docs_src/components/examples/elements/dekaAssign.js

@@ -1,15 +1,22 @@
-import { assignAttribute, classListDeclarative } from "deka-dom-el";
+import { assign, assignAttribute, classListDeclarative } from "deka-dom-el";
 const paragraph= document.createElement("p");
 
 assignAttribute(paragraph, "textContent", "Hello, world!");
+
+assignAttribute(paragraph, "style", "color: red; font-weight: bold;");
 assignAttribute(paragraph, "style", { color: "navy" });
 
 assignAttribute(paragraph, "dataTest1", "v1");
 assignAttribute(paragraph, "dataset", { test2: "v2" });
 
-assignAttribute(paragraph, "ariaLabel", "v1");
-assignAttribute(paragraph, "ariaset", { role: "none" });
-
+assign(paragraph, { //textContent and style see above
+	ariaLabel: "v1", //data* see above
+	ariaset: { role: "none" }, // dataset see above
+	"=onclick": "console.log(event)",
+	onmouseout: console.info,
+	".something": "something",
+	classList: {} //see below
+});
 
 classListDeclarative(paragraph, {
 	classAdd: true,
@@ -20,6 +27,7 @@ classListDeclarative(paragraph, {
 });
 
 console.log(paragraph.outerHTML);
+console.log("paragraph.something=", paragraph.something);
 document.body.append(
 	paragraph
 );

docs_src/components/examples/events/templateWithListeners.js

@@ -1,7 +1,7 @@
 import { el, on } from "deka-dom-el";
 const abort_controller= new AbortController();
 const { signal }= abort_controller;
-/** @type {ddeElementModifier<HTMLButtonElement>} */
+/** @type {ddeElementAddon<HTMLButtonElement>} */
 const onclickOff= on("click", ()=> abort_controller.abort(), { signal });
 /** @type {(ref?: HTMLOutputElement)=> HTMLOutputElement | null} */
 const ref= (store=> ref=> ref ? (store= ref) : store)(null);

docs_src/elements.html.js

@@ -1,11 +1,13 @@
 import "./global.css.js";
 import { el } from "deka-dom-el";
+
+import { header } from "./layout/head.html.js";
 import { example } from "./components/example.html.js";
+import { prevNext } from "./components/prevNext.html.js";
 
 /** @param {string} url */
 const fileURL= url=> new URL(url, import.meta.url);
-import { header } from "./layout/head.html.js";
-import { prevNext } from "./components/prevNext.html.js";
+
 /** @param {import("./types.d.ts").PageAttrs} attrs */
 export function page({ pkg, info }){
 	const page_id= info.id;
@@ -71,6 +73,9 @@ export function page({ pkg, info }){
 					el("em").append(
 						"For example, natievly the element’s ", el("code", "id"), " is removed by setting the IDL to an empty string."
 					)
+				),
+				el("li").append(
+					"You can use ", el("code", "="), " or ", el("code", "."), " to force processing given key as attribute/property of the element."
 				)
 			),
 			el("p").append(

docs_src/events.html.js

@@ -1,22 +1,24 @@
 import "./global.css.js";
 import { el } from "deka-dom-el";
+
+import { header } from "./layout/head.html.js";
 import { example } from "./components/example.html.js";
+import { prevNext } from "./components/prevNext.html.js";
 
 /** @param {string} url */
 const fileURL= url=> new URL(url, import.meta.url);
-import { header } from "./layout/head.html.js";
-import { prevNext } from "./components/prevNext.html.js";
+
 /** @param {import("./types.d.ts").PageAttrs} attrs */
 export function page({ pkg, info }){
 	const page_id= info.id;
 	return el().append(
 		el(header, { info, pkg }),
 		el("main").append(
-			el("h2", "Listenning to the native DOM events and other Modifiers"),
+			el("h2", "Listenning to the native DOM events and other Addons"),
 			el("p").append(
 				"We quickly introduce helper to listening to the native DOM events.",
 				" ",
-				"And library syntax/pattern so-called ", el("em", "Modifier"), " to",
+				"And library syntax/pattern so-called ", el("em", "Addon"), " to",
 				" incorporate not only this in UI templates declaratively."
 			),
 			
@@ -43,23 +45,23 @@ export function page({ pkg, info }){
 			),
 			el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }),
 
-			el("h3", "Modifiers"),
+			el("h3", "Addons"),
 			el("p").append(
-				"From practical point of view, ", el("em", "Modifiers"), " are just functions that accept any html element",
+				"From practical point of view, ", el("em", "Addons"), " are just functions that accept any html element",
 				" as their first parameter. You can see that the ", el("code", "on(…)"), " fullfills this requirement."
 			),
 			el("p").append(
-				"You can use Modifiers as ≥3rd argument of ", el("code", "el"), " function. This way is possible to extends",
+				"You can use Addons as ≥3rd argument of ", el("code", "el"), " function. This way is possible to extends",
 				" you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:"
 			),
 			el(example, { src: fileURL("./components/examples/events/templateWithListeners.js"), page_id }),
 			el("p").append(
-				"As the example shows, you can also provide types in JSDoc+TypeScript by using global type ", el("code", "ddeElementModifier"), ".",
+				"As the example shows, you can also provide types in JSDoc+TypeScript by using global type ", el("code", "ddeElementAddon"), ".",
 				" ",
-				"Also notice, you can use Modifiers to get element reference.",
+				"Also notice, you can use Addons to get element reference.",
 			),
 			el("h3", "Life cycle events"),
-			el("p", "Modifiers are called immediately when the element is created, event it is not connected to live DOM yet."),
+			el("p", "Addons are called immediately when the element is created, event it is not connected to live DOM yet."),
 			// todo
 
 			// dispatchEvent

docs_src/index.html.js

@@ -1,9 +1,10 @@
-import { el } from "deka-dom-el";
 import "./global.css.js";
-import { example } from "./components/example.html.js";
+import { el } from "deka-dom-el";
 
 import { header } from "./layout/head.html.js";
+import { example } from "./components/example.html.js";
 import { prevNext } from "./components/prevNext.html.js";
+
 /** @param {import("./types.d.ts").PageAttrs} attrs */
 export function page({ pkg, info }){
 	const page_id= info.id;

docs_src/ssr.js

@@ -5,7 +5,7 @@ export const path_target= {
 export const pages= [
 	{ id: "index", href: "./", title: "Introduction", description: "Introducing a library." },
 	{ id: "elements", href: "elements", title: "Elements", description: "Basic concepts of elements modifications and creations." },
-	{ id: "events", href: "events", title: "Events and Modifiers", description: "Using not only events in UI declaratively." },
+	{ id: "events", href: "events", title: "Events and Addons", description: "Using not only events in UI declaratively." },
 ];
 /**
  * @typedef registerClientFile