💥 Events and README idea presentation

test/index.js

@@ -1,17 +1,63 @@
-import { el, elNS, assign } from "../index.js";
-Object.assign(globalThis, { el, elNS, assign });
+import { el, elNS, assign, listen, dispatch } from "../index.js";
+Object.assign(globalThis, { el, elNS, assign, listen, dispatch });
 
-console.log(el("p", { className: "red", textContent: "Hello "}));
-console.log(el("p", { className: "red", textContent: "Hello "}) instanceof HTMLParagraphElement);
+const { style, css }= createStyle();
+globalThis.test= console.log;
+const app= el(component, null, listen("change", globalThis.test));
+dispatch("change", "Peter")(app);
+console.log(app, app instanceof HTMLDivElement);
 
-document.head.append(
-	el("style", { textContent: `
-		.red{ color: red; }
-	` })
-)
-document.body.append(
-	el("p", { className: "red" }).append(
-		el("", { textContent: "Hello " }),
-		el("strong", { textContent: "World" })
+document.head.append(style);
+document.body.append(app);
+
+function component({ value= "World" }= {}){
+	const name= "naiveForm";
+	css`
+		.${name}{
+			display: flex;
+			flex-flow: column nowrap;
+		}
+		.${name} input{
+			margin-inline-start: .5em;
+		}
+	`;
+	
+	const output= (function(){
+		const element= el("strong", { textContent: value });
+		return {
+			element,
+			onchange: listen("change", function(event){
+				assign(element, { textContent: event.target.value });
+			})
+		}
+	})();
+	const input= (function(){
+		const element= el("input", { type: "text", value }, output.onchange);
+		return {
+			element,
+			onchange: listen("change", function(event){
+				assign(element, { value: event.detail });
+				dispatch("change")(element);
+			})
+		};
+	})();
+	return el("div", { className: name }, input.onchange).append(
+		el("p").append(
+			el("#text", { textContent: "Hello " }),
+			output.element,
+		),
+		el("label").append(
+			el("#text", { textContent: "Set name:" }),
+			input.element
+		)
 	)
-);
+}
+function createStyle(){
+	const style= el("style");
+	return {
+		style,
+		css(...args){
+			style.appendChild(el("#text", { textContent: String.raw(...args) }));
+		}
+	};
+}