dev-package (#15)

Reviewed-on: #15

test/components/fullNameComponent.js

@@ -0,0 +1,28 @@
+import { style, el, on, S } from '../exports.js';
+const className= style.host(fullNameComponent).css`
+	:host form{
+		display: flex;
+		flex-flow: column nowrap;
+	}
+`;
+export function fullNameComponent(){
+	const labels= [ "Name", "Surname" ];
+	const name= labels.map(_=> S(""));
+	const full_name= S(()=>
+		name.map(l=> l()).filter(Boolean).join(" ") || "-");
+
+	return el("div", { className }).append(
+		el("h2", "Simple form:"),
+		el("form", { onsubmit: ev=> ev.preventDefault() }).append(
+			...name.map((v, i)=>
+				el("label", labels[i]).append(
+					el("input", { type: "text", name: labels[i], value: v() }, on("change", ev=> v(ev.target.value)))
+				))
+		),
+		el("p").append(
+			el("strong", "Full name"),
+			el("#text", ": "),
+			el("#text", full_name)
+		)
+	);
+}

test/components/todosComponent.js

@@ -0,0 +1,75 @@
+import { style, el, on, S } from '../exports.js';
+const className= style.host(todosComponent).css`
+	:host{
+		display: flex;
+		flex-flow: column nowrap;
+	}
+	:host input{
+		margin-inline-start: .5em;
+	}
+	:host button{
+		margin-inline-start: 1em;
+	}
+`;
+/** @param {{ todos: string[] }} */
+export function todosComponent({ todos= [] }= {}){
+	const todosS= S(todos.map(v=> S(v)), {
+		/** @param {string} v */
+		add(v){ this.value.push(S(v)); },
+		/** @param {number} i */
+		remove(i){ this.value.splice(i, 1); }
+	});
+	console.log(todosS); //TODO
+	const name= "todoName";
+	const onsubmitAdd= on("submit", event=> {
+		const value= event.target.elements[name].value;
+		if(!value) return;
+		
+		event.preventDefault();
+		S.action(todosS, "add", value);
+		event.target.elements[name].value= "";
+	});
+	const onremove= on("remove", event=>
+		S.action(todosS, "remove", event.detail));
+	
+	const ul_todos= el("ul").append(
+		el("<>", todosS,
+			ts=> ts.map((t, i)=> el(todoComponent, { textContent: t, value: i, className }, onremove))
+	));
+	return el("div", { className }).append(
+		el("div").append(
+			el("h2", "Todos:"),
+			el("h3", "List of todos:"),
+			el("<>", todosS, ts=> !ts.length
+				? el("p", "No todos yet")
+				: ul_todos)
+		),
+		el("form", null, onsubmitAdd).append(
+			el("h3", "Add a todo:"),
+			el("label", "New todo: ").append(
+				el("input", { name, type: "text", required: true }),
+			),
+			el("button", "+")
+		)
+	)
+}
+/**
+ * @type {ddeFires<[ "click" ]>}
+ * @param {{
+ *	textContent: string | ddeSignal<string, any>
+ *	value: number
+ * }}
+ * */
+function todoComponent({ textContent, value }){
+	const ref= S();
+	const onclick= on("click", event=> {
+		const value= Number(event.target.value);
+		event.preventDefault();
+		event.stopPropagation();
+		ref().dispatchEvent(new CustomEvent("remove", { detail: value }));
+	});
+	return el("li", null, ref).append(
+		el("#text", textContent),
+		el("button", { type: "button", value, textContent: "-" }, onclick)
+	);
+}

test/exports.js

@@ -0,0 +1,30 @@
+import { namespace, el, on, registerReactivity } from "../index.js";
+import { S } from "../src/signals.js";
+// import { empty, namespace, on, dispatch } from "../index.js";
+// import "../dist/dde-with-signals.js";
+// Object.assign(globalThis, dde);
+// import { el, on, off, S } from "../dist/esm-with-signals.js";
+const style= createStyle();
+Object.assign(globalThis, { S, el, namespace, on, registerReactivity, style });
+export { S, el, on, registerReactivity, style };
+
+function createStyle(){
+	const element= el("style");
+	const store= new WeakSet();
+	let host;
+	return {
+		element,
+		host(k, h= k.name){
+			if(store.has(k)) return { css: ()=> {} };
+			store.add(k);
+			host= h;
+			return this;
+		},
+		css(...args){
+			const textContent= String.raw(...args).replaceAll(":host", "."+host);
+			const className= host;
+			element.appendChild(el("#text", { textContent }));
+			return className;
+		}
+	};
+}

test/index.js

@@ -1,81 +1,9 @@
-import { el, on, off } from "../index.js";
-import { S } from "../src/signals.js";
-//import { empty, namespace, on, dispatch } from "../index.js";
-Object.assign(globalThis, { S, el, on, off });
-
-const style= createStyle();
-const app= el(todosComponent);
+import { style, el } from './exports.js';
 document.head.append(style.element);
-document.body.append(app);
-
-function todosComponent({ todos= [] }= {}){
-	const className= "basicTodoForm";
-	style.css`
-		.${className}{
-			display: flex;
-			flex-flow: column nowrap;
-		}
-		.${className} input{
-			margin-inline-start: .5em;
-		}
-	`;
-	todos= S.reactive(todos);
-	globalThis.__todos__= todos; //TODO
-	const name= "todoName";
-	const onsubmit= on("submit", event=> {
-		const value= event.target.elements[name].value;
-		if(!value) return;
-		
-		event.preventDefault();
-		todos.push(value)
-		event.target.elements[name].value= "";
-	});
-	const onremove= on("click", event=> {
-		const value= Number(event.target.value);
-		if(Number.isNaN(value)) return;
-		event.preventDefault();
-		todos.splice(value, 1);
-	});
-	
-	return el("div", { className }).append(
-		el("div").append(
-			el("h1", "Todos:"),
-			el("<>", todos, ts=> !ts.length
-				? el("p", "No todos yet")
-				: ts.map((t, i)=> el(todoComponent, { textContent: t, value: i, className }, onremove)))
-		),
-		el("form", null, onsubmit).append(
-			el("h2", "Add:"),
-			el("label", "New todo: ").append(
-				el("input", { name, type: "text", required: true }),
-			),
-			el("button", "+")
-		)
-	)
-}
-function todoComponent({ textContent, className, value }){
-	style.key(todoComponent).css`
-		.${className} button{
-			margin-inline-start: 1em;
-		}
-	`;
-	return el("p").append(
-		el("#text", textContent),
-		el("button", { type: "button", value, textContent: "-" })
-	);
-}
-function createStyle(){
-	const element= el("style");
-	const store= new WeakSet();
-	return {
-		element,
-		key(k){
-			if(store.has(k)) return { css: ()=> {} };
-			store.add(k);
-			return this;
-		},
-		css(...args){
-			element.appendChild(el("#text", { textContent: String.raw(...args) }));
-		}
-	};
-}
+import { fullNameComponent } from './components/fullNameComponent.js';
+import { todosComponent } from './components/todosComponent.js';
+document.body.append(
+	el("h1", "Experiments:"),
+	el(fullNameComponent),
+	el(todosComponent),
+);