⚡ Docs

docs/components/examples/scopes/class-component.js

@@ -0,0 +1,44 @@
+import { el } from "deka-dom-el";
+class Test {
+	constructor(params){
+		this._params= params;
+	}
+	render(){
+		return el("div").append(
+			this._params.textContent
+		);
+	}
+}
+document.body.append(
+	elClass(Test, { textContent: "Hello World" })
+);
+
+import { chainableAppend, scope } from "deka-dom-el";
+function elClass(_class, attributes, ...addons){
+	let element, element_host;
+	scope.push({
+		scope: _class, //just informative purposes
+		host: (...addons_append)=> addons_append.length
+			? (
+				!element
+				? addons.unshift(...addons_append)
+				: addons_append.forEach(c=> c(element_host))
+			, undefined)
+			: element_host
+	});
+	const instance= new _class(attributes);
+	element= instance.render();
+	const is_fragment= element instanceof DocumentFragment;
+	const el_mark= el.mark({ //this creates html comment `<dde:mark …/>`
+		type: "class-component",
+		name: _class.name,
+		host: is_fragment ? "this" : "parentElement",
+	});
+	element.prepend(el_mark);
+	if(is_fragment) element_host= el_mark;
+	
+	chainableAppend(element);
+	addons.forEach(c=> c(element_host));
+	scope.pop();
+	return element;
+}

docs/components/examples/scopes/cleaning.js

@@ -0,0 +1,18 @@
+import { el, empty, on } from "deka-dom-el";
+document.body.append(
+	el(component),
+	el("button", {
+		textContent: "Remove",
+		onclick: ()=> empty(document.body),
+		type: "button"
+	})
+);
+import { S } from "deka-dom-el/signals";
+function component(){
+	const textContent= S("Click to change text.");
+
+	const onclickChange= on("click", function redispatch(){
+		textContent("Text changed! "+(new Date()).toString())
+	});
+	return el("p", textContent, onclickChange);
+}

docs/components/examples/scopes/declarative.js

@@ -0,0 +1,35 @@
+/* PSEUDO-CODE!!! */
+import { el } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+function component(){
+	/* prepare changeable data */
+	const dataA= S("data");
+	const dataB= S("data");
+	/* define data flow (can be asynchronous) */
+	fetchAPI().then(data_new=> dataA(data_new));
+	setTimeout(()=> dataB("DATA"));
+	/* declarative UI */
+	return el().append(
+		el("h1", {
+			textContent: "Example",
+			/* declarative attribute(s) */
+			classList: { declarative: dataB }
+		}),
+		el("ul").append(
+			/* declarative element(s) */
+			S.el(dataA, data=> data.map(d=> el("li", d)))
+		),
+		el("ul").append(
+			/* declarative component(s) */
+			S.el(dataA, data=> data.map(d=> el(subcomponent, d)))
+		)
+	);
+}
+function subcomponent({ id }){
+	/* prepare changeable data */
+	const textContent= S("…");
+	/* define data flow (can be asynchronous) */
+	fetchAPI(id).then(text=> textContent(text));
+	/* declarative UI */
+	return el("li", { textContent, dataId: id });
+}

docs/components/examples/scopes/good-practise.js

@@ -0,0 +1,18 @@
+import { el, scope, on, dispatchEvent } from "deka-dom-el";
+document.body.append(
+	el(component)
+);
+function component(){
+	const { host }= scope; // good practise!
+
+	host(
+		console.log,
+		on("click", function redispatch(){
+			// this `host` ↘ still corresponds to the host ↖ of the component
+			dispatchEvent("redispatch")(host());
+		})
+	);
+	// this `host` ↘ still corresponds to the host ↖ of the component
+	setTimeout(()=> dispatchEvent("timeout")(host()), 750)
+	return el("p", "Clickable paragraph!");
+}

docs/components/examples/scopes/imperative.js

@@ -0,0 +1,31 @@
+/* PSEUDO-CODE!!! */
+import { el, on, scope } from "deka-dom-el";
+function component(){
+	const { host }= scope;
+	const ul= el("ul");
+	const ac= new AbortController();
+	fetchAPI({ signal: ac.signal }).then(data=> {
+		data.forEach(d=> ul.append(el("li", d)));
+	});
+	host(
+		/* element was remove before data fetched */
+		on.disconnected(()=> ac.abort())
+	);
+	return ul;
+	/**
+	 * NEVER EVER!!
+	 * let data;
+	 * fetchAPI().then(d=> data= O(d));
+	 *
+	 * OR NEVER EVER!!
+	 * const ul= el("ul");
+	 * fetchAPI().then(d=> {
+	 *	const data= O("data");
+	 *	ul.append(el("li", data));
+	 * });
+	 * 
+	 * // THE HOST IS PROBABLY DIFFERENT THAN
+	 * // YOU EXPECT AND OBSERVABLES MAY BE
+	 * // UNEXPECTEDLY REMOVED!!!
+	 * */
+}

docs/components/examples/scopes/intro.js

@@ -0,0 +1,3 @@
+// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
+import { scope, el } from "deka-dom-el";
+/** @type {ddeElementAddon} */

docs/components/examples/scopes/scopes-and-hosts.js

@@ -0,0 +1,33 @@
+import { el, on, scope } from "deka-dom-el";
+const { host }= scope;
+host(
+	element=> console.log(
+		"This represents Addon/oninit for root",
+		element.outerHTML
+	)
+);
+console.log(
+	"This represents the reference to the host element of root",
+	host().outerHTML
+);
+document.body.append(
+	el(component)
+);
+function component(){
+	const { host }= scope;
+	host(
+		element=> console.log(
+			"This represents Addon/oninit for the component",
+			element.outerHTML
+		)
+	);
+	const onclick= on("click", function(ev){
+		console.log(
+			"This represents the reference to the host element of the component",
+			host().outerHTML
+		);
+	})
+	return el("div", null, onclick).append(
+		el("strong", "Component")
+	);
+}