deka-dom-el/test/index.js

import { S, empty, watch, el, namespace, assign, on, dispatch } from "../index.js";
Object.assign(globalThis, { S, watch, el, namespace, assign, on, dispatch });

const style= createStyle();
const app= el(todosComponent);
dispatch("change", "Peter")(app);
console.log(app, app instanceof HTMLDivElement);

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:"),
			elR(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 elR(signal, map){
	const mark= document.createComment("reactive");
	const out= el("<>").append(mark);
	let cache;
	const toEls= v=> {
		let els= map(v);
		if(!Array.isArray(els))
			els= [ els ];
		if(cache) cache.forEach(el=> el.remove());
		cache= els;
		mark.before(...els);
	};
	on(signal, toEls);
	toEls(signal());
	return out;
}
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) }));
		}
	};
}