🧱 move components, exports, and index files to examples directory

examples/components/fullNameComponent.js

@@ -0,0 +1,34 @@
+import { style, el, on, S, namespace } 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", full_name)
+		),
+		namespace("svg").append(
+			el("svg", { viewBox: "0 0 240 80", style: { height: "80px", display: "block" } }).append(
+				//el("style", {  })
+				el("text", { x: 20, y: 35, textContent: "Text" })
+			)
+		)
+	);
+}

examples/components/todosComponent.js

@@ -0,0 +1,87 @@
+import { style, el, dispatchEvent, 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;
+	}
+	:host output{
+		white-space: pre;
+	}
+`;
+/** @param {{ todos: string[] }} */
+export function todosComponent({ todos= [ "Task A" ] }= {}){
+	const todosS= S(todos.map(t=> S(t)), {
+		add(v){ this.value.push(S(v)); },
+		remove(i){ this.value.splice(i, 1); },
+		[S.symbols.onclear](){ S.clear(...this.value); },
+	});
+	const name= "todoName";
+	const onsubmitAdd= on("submit", event=> {
+		const el= event.target.elements[name];
+		event.preventDefault();
+		S.action(todosS, "add", el.value);
+		el.value= "";
+	});
+	const onremove= on("remove", event=>
+		S.action(todosS, "remove", event.detail));
+	
+	const ul_todos= el("ul").append(
+		S.el(todosS, ts=> ts
+			.map((textContent, value)=>
+				el(todoComponent, { textContent, value, className }, onremove))
+	));
+	return el("div", { className }).append(
+		el("div").append(
+			el("h2", "Todos:"),
+			el("h3", "List of todos:"),
+			S.el(todosS, ts=> !ts.length
+				? el("p", "No todos yet")
+				: ul_todos),
+			el("p", "Click to the text to edit it.")
+		),
+		el("form", null, onsubmitAdd).append(
+			el("h3", "Add a todo:"),
+			el("label", "New todo: ").append(
+				el("input", { name, type: "text", required: true }),
+			),
+			el("button", "+")
+		),
+		el("div").append(
+			el("h3", "Output (JSON):"),
+			el("output", S(()=> JSON.stringify(todosS, null, "\t")))
+		)
+	)
+}
+/**
+ * @type {ddeComponent<
+ *	{ textContent: ddeSignal<string, any>, value: number },
+ *	HTMLLIElement,
+ *	[ "click" ]
+ * >}
+ * */
+function todoComponent({ textContent, value }, host){
+	const onclick= on("click", event=> {
+		const value= Number(event.target.value);
+		event.preventDefault();
+		event.stopPropagation();
+		dispatchEvent(host(), "remove", value);
+	});
+	const is_editable= S(false);
+	const onedited= on("change", ev=> {
+		textContent(ev.target.value);
+		is_editable(false);
+	});
+	return el("li").append(
+		S.el(is_editable, is=> is
+			? el("input", { value: textContent(), type: "text" }, onedited)
+			: el("span", { textContent, onclick: is_editable.bind(null, true) }),
+		),
+		el("button", { type: "button", value, textContent: "-" }, onclick)
+	);
+}

examples/components/webComponent.js

@@ -0,0 +1,122 @@
+import { el } from "../../index.js";
+import { S } from "../../signals.js";
+const { hasOwnProperty }= Object.prototype;
+
+const store= attrsPropsToSignals([ "test" ]);
+/**
+ * Compatible with `npx-wca test/components/webComponent.js`
+ * */
+export class CustomHTMLTestElement extends HTMLElement{
+	static get observedAttributes(){
+		return [ "name", "pre-name" ];
+	}
+	connectedCallback(){
+		this.attachShadow({ mode: "open" }).append(
+			customElementRender(this, store.toRender(this), this.render)
+		);
+	}
+
+	render({ name, test, preName }, host){
+		host(on.connected(console.log));
+		return el("p").append(
+			el("#text", { textContent: name }),
+			el("#text", { textContent: test }),
+			el("#text", { textContent: preName }),
+		);
+	}
+}
+// https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4
+customElementsAssign(
+	CustomHTMLTestElement,
+	reflectObservedAttributes,
+	lifecycleToEvents(false),
+	store.connect
+);
+customElements.define("custom-test", CustomHTMLTestElement);
+
+function customElementRender(_this, attrs, render){
+	const host= (...a)=> a.length ? a[0](_this) : _this;
+	return render(attrs, host);
+}
+/** @returns {HTMLElement} */
+function customElementsAssign(class_base, ...automatize){
+	automatize.forEach(a=> a(class_base));
+}
+function reflectObservedAttributes(c){
+	for(const name of c.observedAttributes){
+		const name_camel= name.replace(/([a-z])-([a-z])/g, (_, l, r)=> l+r.toUpperCase());
+		if(hasOwnProperty.call(c.prototype, name_camel))
+			continue;
+		Reflect.defineProperty(c.prototype, name_camel, {
+			get(){ return this.getAttribute(name); },
+			set(value){ this.setAttribute(name, value); }
+		});
+	}
+}
+function lifecycleToEvents(is_attrs){
+	return function(c){
+		wrapMethod(c.prototype, "connectedCallback", function(target, thisArg, detail){
+			target.apply(thisArg, detail);
+			thisArg.dispatchEvent(new Event("dde:connected"));
+		});
+		wrapMethod(c.prototype, "disconnectedCallback", function(target, thisArg, detail){
+			target.apply(thisArg, detail);
+			thisArg.dispatchEvent(new Event("dde:disconnected"));
+		});
+		if(is_attrs)
+			wrapMethod(c.prototype, "attributeChangedCallback", function(target, thisArg, detail){
+				thisArg.dispatchEvent(new CustomEvent("dde:attribute", { detail }));
+				target.apply(thisArg, detail);
+			});
+	};
+}
+function attrsPropsToSignals(props= []){
+	const store_attrs= new WeakMap();
+	const store_props= new WeakMap();
+	return {
+		toRender(target){
+			const out= {};
+			const sattrs= get(store_attrs, target);
+			target.constructor.observedAttributes.forEach(function(name){
+				const name_camel= name.replace(/([a-z])-([a-z])/g, (_, l, r)=> l+r.toUpperCase());
+				if(!hasOwnProperty.call(sattrs, name)) sattrs[name]= S(undefined);
+				out[name_camel]= sattrs[name];
+			});
+			const sprops= get(store_props, target);
+			props.forEach(p=> !hasOwnProperty.call(sprops, p) && (sprops[p]= S(undefined)));
+			return Object.assign(out, sprops);
+		},
+		connect(c){
+			wrapMethod(c.prototype, "attributeChangedCallback", function(target, thisArg, detail){
+				const [ name, _, value ]= detail;
+				const s= get(store_attrs, thisArg);
+				if(s[name]) s[name](value);
+				else s[name]= S(value);
+				
+				target.apply(thisArg, detail);
+			});
+			for(const name of props){
+				Reflect.defineProperty(c.prototype, name, {
+					get(){
+						const s= get(store_props, this);
+						if(s[name]) return s[name]();
+					},
+					set(value){
+						const s= get(store_props, this);
+						if(s[name]) s[name](value);
+						else s[name]= S(value);
+					}
+				});
+			}
+		}
+	};
+	function get(store, t){
+		if(store.has(t)) return store.get(t);
+		const s= {};
+		store.set(t, s);
+		return s;
+	}
+}
+function wrapMethod(obj, method, apply){
+	obj[method]= new Proxy(obj[method] || (()=> {}), { apply });
+}