🎉 ⚡

examples/components/3rd-party.js

@@ -21,7 +21,8 @@ export function thirdParty(){
 	});
 	// Array.from((new URL(location)).searchParams.entries())
 	// 	.forEach(([ key, value ])=> S.action(store, "set", key, value));
-	// S.on(store, data=> history.replaceState("", "", "?"+(new URLSearchParams(JSON.parse(JSON.stringify(data)))).toString()));
+	// S.on(store, data=> history.replaceState("", "",
+	// "?"+(new URLSearchParams(JSON.parse(JSON.stringify(data)))).toString()));
 	useStore(store_adapter, {
 		onread(data){
 			Array.from(data.entries())

examples/components/fullNameComponent.js

@@ -15,6 +15,7 @@ export function fullNameComponent(){
 		on.disconnected(()=> console.log(fullNameComponent))
 	);
 
+	const style= { height: "80px", display: "block", fill: "currentColor" };
 	const elSVG= elNS("http://www.w3.org/2000/svg");
 	return el("div", { className }).append(
 		el("h2", "Simple form:"),
@@ -29,7 +30,7 @@ export function fullNameComponent(){
 			": ",
 			el("#text", full_name)
 		),
-		elSVG("svg", { viewBox: "0 0 240 80", style: { height: "80px", display: "block" } }).append(
+		elSVG("svg", { viewBox: "0 0 240 80", style }).append(
 			//elSVG("style", {  })
 			elSVG("text", { x: 20, y: 35, textContent: "Text" }),
 		)

examples/components/todosComponent.js

@@ -17,22 +17,25 @@ const className= style.host(todosComponent).css`
 /** @param {{ todos: string[] }} */
 export function todosComponent({ todos= [ "Task A" ] }= {}){
 	let key= 0;
-	const todosO= S(new Map(), {
+	const todosO= S( /** @type {Map<number, ddeSignal<string>>} */ (new Map()), {
+		/** @param {string} v */
 		add(v){ this.value.set(key++, S(v)); },
+		/** @param {number} key */
 		remove(key){ S.clear(this.value.get(key)); this.value.delete(key); }
 	});
 	todos.forEach(text=> S.action(todosO, "add", text));
 
 	const name= "todoName";
 	const onsubmitAdd= on("submit", event=> {
-		const el= event.target.elements[name];
+		const el_form= /** @type {HTMLFormElement} */ (event.target);
+		const el= /** @type {HTMLInputElement} */ (el_form.elements[name]);
 		event.preventDefault();
 		S.action(todosO, "add", el.value);
 		el.value= "";
 	});
-	const onremove= on("remove", event=>
-		S.action(todosO, "remove", event.detail));
-	
+	const onremove= on("remove", /** @param {CustomEvent<number>} event */
+		event=> S.action(todosO, "remove", event.detail));
+
 	return el("div", { className }).append(
 		el("div").append(
 			el("h2", "Todos:"),
@@ -60,19 +63,24 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 	)
 }
 /**
+ * @param {{ textContent: ddeSignal<string>, value: ddeSignal<number> }} attrs
  * @dispatchs {number} remove
  * */
 function todoComponent({ textContent, value }){
 	const { host }= scope;
+	const dispatchRemove= /** @type {(data: number) => void} */
+		(dispatchEvent("remove", null, host));
 	const onclick= on("click", event=> {
-		const value= Number(event.target.value);
+		const el= /** @type {HTMLButtonElement} */ (event.target);
+		const value= Number(el.value);
 		event.preventDefault();
 		event.stopPropagation();
-		dispatchEvent("remove")(host(), value);
+		dispatchRemove(value);
 	});
 	const is_editable= S(false);
 	const onedited= on("change", ev=> {
-		textContent(ev.target.value);
+		const el= /** @type {HTMLInputElement} */ (ev.target);
+		textContent(el.value);
 		is_editable(false);
 	});
 	return el("li").append(

examples/components/webComponent.js

@@ -38,7 +38,7 @@ export class CustomHTMLTestElement extends HTMLElement{
 		);
 	}
 	test= "A";
-	
+
 	get name(){ return this.getAttribute("name"); }
 	set name(value){ this.setAttribute("name", value); }
 	/** @attr pre-name */

examples/index.js

@@ -1,4 +1,9 @@
 import { style, el, S } from './exports.js';
+style.css`
+:root{
+	color-scheme: dark light;
+}
+`;
 document.head.append(style.element);
 import { fullNameComponent } from './components/fullNameComponent.js';
 import { todosComponent } from './components/todosComponent.js';