⚡ Docs

docs/components/examples/elements/dekaAppend.js

@@ -0,0 +1,35 @@
+import { el } from "deka-dom-el";
+document.head.append(
+	el("style").append(
+		"tr, td{ border: 1px solid red; padding: 1em; }",
+		"table{ border-collapse: collapse; }"
+	)
+);
+document.body.append(
+	el("p", "Example of a complex template. Using for example nesting lists:"),
+	el("ul").append(
+		el("li", "List item 1"),
+		el("li").append(
+			el("ul").append(
+				el("li", "Nested list item 1"),
+			)
+		)
+	),
+	el("table").append(
+		el("tr").append(
+			el("td", "Row 1 – Col 1"),
+			el("td", "Row 1 – Col 2")
+		)
+	)
+);
+
+import { chainableAppend } from "deka-dom-el";
+/** @param {keyof HTMLElementTagNameMap} tag */
+const createElement= tag=> chainableAppend(document.createElement(tag));
+document.body.append(
+	createElement("p").append(
+		createElement("em").append(
+			"You can also use `chainableAppend`!"
+		)
+	)
+);

docs/components/examples/elements/dekaAssign.js

@@ -0,0 +1,33 @@
+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" });
+
+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,
+	classRemove: false,
+	classAdd1: 1,
+	classRemove1: 0,
+	classToggle: -1
+});
+
+console.log(paragraph.outerHTML);
+console.log("paragraph.something=", paragraph.something);
+document.body.append(
+	paragraph
+);

docs/components/examples/elements/dekaBasicComponent.js

@@ -0,0 +1,17 @@
+import { el } from "deka-dom-el";
+document.head.append(
+	el("style").append(
+		".class1{ font-weight: bold; }",
+		".class2{ color: purple; }"
+	)
+);
+document.body.append(
+	el(component, { className: "class2", textContent: "Hello World!" }),
+	component({ className: "class2", textContent: "Hello World!" })
+);
+
+function component({ className, textContent }){
+	return el("div", { className: [ "class1", className ] }).append(
+		el("p", textContent)
+	);
+}

docs/components/examples/elements/dekaCreateElement.js

@@ -0,0 +1,11 @@
+import { el, assign } from "deka-dom-el";
+const color= "lightcoral";
+document.body.append(
+	el("p", { textContent: "Hello (first time)", style: { color } })
+);
+document.body.append(
+	assign(
+		document.createElement("p"),
+		{ textContent: "Hello (second time)", style: { color } }
+	)
+);

docs/components/examples/elements/dekaElNS.js

@@ -0,0 +1,11 @@
+import { elNS, assign } from "deka-dom-el";
+const elSVG= elNS("http://www.w3.org/2000/svg");
+const elMath= elNS("http://www.w3.org/1998/Math/MathML");
+document.body.append(
+	elSVG("svg"), // see https://developer.mozilla.org/en-US/docs/Web/SVG and https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
+	elMath("math") // see https://developer.mozilla.org/en-US/docs/Web/MathML and https://developer.mozilla.org/en-US/docs/Web/MathML/Global_attributes
+);
+
+console.log(
+	document.body.innerHTML.includes("<svg></svg><math></math>")
+)

docs/components/examples/elements/intro.js

@@ -0,0 +1,14 @@
+// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+import {
+	assign,
+	el, createElement,
+	elNS, createElementNS
+} from "deka-dom-el";
+el===createElement
+elNS===createElementNS
+// “internal” utils
+import {
+	assignAttribute,
+	classListDeclarative,
+	chainableAppend
+} from "deka-dom-el";

docs/components/examples/elements/nativeAppend.js

@@ -0,0 +1,11 @@
+document.body.append(
+	document.createElement("div"),
+	document.createElement("span"),
+	document.createElement("main")
+);
+console.log(document.body.innerHTML.includes("<div></div><span></span><main></main>"));
+const template= document.createElement("main").append(
+	document.createElement("div"),
+	document.createElement("span"),
+);
+console.log(typeof template==="undefined");

docs/components/examples/elements/nativeCreateElement.js

@@ -0,0 +1,14 @@
+document.body.append(
+	document.createElement("div")
+);
+console.log(
+	"Emty div is generated inside <body>:",
+	document.body.innerHTML.includes("<div></div>")
+);
+
+document.body.append(
+	Object.assign(
+		document.createElement("p"),
+		{ textContent: "Element’s text content.", style: "color: coral;" }
+	)
+);