tagu-tagu 1.0.0

package/README.md

@@ -0,0 +1,35 @@
+# tag-tag
+
+A lightweight helper for vanilla `HTMLElement`. No config, no jsx — only clean javascript.
+
+## `tag-tag` is
+
+just a helper for `HTMLElement`:
+
+```javascript
+import {button} from "tag-tag";
+
+const myButton = button("Click Me!"); // `HTMLButtonElement`
+document.body.appendChild(myButton);
+```
+
+with reactivity!
+
+```javascript
+import {button, span, Modify, useState} from "tag-tag";
+
+const count = useState(4);
+
+function decrementCount() {
+    count.set(count.get() - 1);
+}
+function incrementCount() {
+    count.set(count.get() + 1);
+}
+
+Modify(document.body, [
+    button("-", { on: { click: decrementCount } }),// `HTMLButtonElement`
+    span(count),// `HTMLSpanElement`
+    button("+", { on: { click: incrementCount } }),// `HTMLButtonElement`
+]);
+```

package/dist/bundle.min.js

@@ -0,0 +1 @@
+var S=class{node2Data=new WeakMap;addCallbacks(t,n){if(!n)return;this.node2DescendantCallbacks.has(t)||this.node2DescendantCallbacks.set(t,{});let o=this.node2DescendantCallbacks.get(t);k(o,n);let i=this.node2Data.get(t);w(o,i)}setDataRecord(t,n){n&&this.node2Data.set(t,n)}resolveCallbacks(t,n){let o=(l,u)=>{if(w(u,this.node2Data.get(l)),!!Object.keys(u).length){if(!l.parentElement){this.node2DescendantCallbacks.has(l)||this.node2DescendantCallbacks.set(l,{});let m=this.node2DescendantCallbacks.get(l);m&&k(m,u);return}o(l.parentElement,u)}},i=this.node2DescendantCallbacks.get(n);i&&o(t,i)}node2DescendantCallbacks=new WeakMap};function w(e,t){for(let n in t)if(n in e){for(let o of e[n])o(t[n]);delete e[n]}}var c=new S;function b(e,t){c.addCallbacks(e,$(t)),c.setDataRecord(e,A(t))}function $(e){return H(e,t=>typeof t=="function",t=>[t])}function A(e){return H(e,t=>typeof t!="function")}function H(e,t,n=o=>o){if(!e)return;let o={};for(let i in e){let l=e[i];t(l)&&(o[i]=n(l))}if(Object.keys(o).length)return o}function k(e,t){for(let n in t)e[n]||(e[n]=[]),e[n].push(...t[n])}var x=class{constructor(t,n){this.key=t;this.map=n}};var d=class{next=null;firstNode=null};var p=class{#e;constructor(t){this.#e=t}get=()=>this.#e;set(t){this.#e=t,this.#n("change")}#n(t){this.#t.dispatchEvent(new Event(t))}#t=new EventTarget;on(t,n){this.#t.addEventListener(t,n)}};function D(e){return new p(e)}function R(e,t){let n=new p(t()),o=()=>{n.set(t())};for(let i of e)i.on("change",o);return n}function z(e,t){let n=V(t);j(n);for(let o of n)O(e,o)}function O(e,t){t instanceof d?t.run(e):(c.resolveCallbacks(e,t),e.appendChild(t))}function V(e){return e.map(t=>{if(typeof t=="string"||t instanceof p){let n=document.createTextNode("");return y(t,o=>{n.textContent=o}),n}return t})}function j(e){for(let t=0;t<e.length;t++){let n=e[t];n instanceof d&&(n.next=e[t+1]??null)}}function B(e){let t=e.next;return t===null?null:t instanceof Node?t:t.firstNode?t.firstNode:B(t)}function T(e){let t=B(e);return t?.parentElement?t:null}function y(e,t){if(typeof e=="string")t(e);else{let n=()=>{t(e.get())};n(),e.on("change",n)}}function g(e,t,n){t instanceof x?b(e,{[t.key]:o=>{let l=o instanceof p?R([o],()=>t.map(o.get())):t.map(o);y(l,n)}}):y(t,n)}function K(e,t){t!==void 0&&g(e,t,n=>{e.innerHTML=n})}function F(e,t){t!==void 0&&g(e,t,n=>{e.textContent=n})}function q(e,t){let n=e.style;if(n instanceof CSSStyleDeclaration)for(let o in t){let i=t[o];g(e,i,l=>n.setProperty(o,l))}}function P(e,t){for(let n in t){let o=t[n];g(e,o,i=>{i?e.setAttribute(n,i):e.removeAttribute(n)})}}function G(e,t){for(let n in t){let o=t[n];g(e,o,i=>{e[n]=i})}}function U(e,t){for(let n in t){let o=e.querySelector(n);o&&C(o,t[n])}}function W(e,t){for(let n in t){let o=e.querySelectorAll(n);for(let i of o)C(i,t[n])}}function Q(e,t){for(let n in t){let i=t[n];i&&(typeof i=="function"?e.addEventListener(n,i):e.addEventListener(n,i.listener,i.options))}}function C(e,t){e&&(typeof t=="string"||t instanceof p?F(e,t):Array.isArray(t)?z(e,t):typeof t=="function"?t(e):(K(e,t.html),F(e,t.text),P(e,t.attr),G(e,t.prop),q(e,t.css),U(e,t.$),W(e,t.$$),Q(e,t.on),b(e,t.data)))}function h(e,...t){let n=typeof e=="string"?document.querySelector(e):e;for(let o of t)C(n,o);return n}function ue(e,...t){let n=document.createElementNS("http://www.w3.org/2000/svg",e);return h(n,...t)}function r(e,...t){let n=document.createElement(e);return h(n,...t),n}function fe(e,...t){let n=L({html:e}).children[0];return h(n,...t)}function Ee(...e){return r("h1",...e)}function Te(...e){return r("h2",...e)}function ge(...e){return r("h3",...e)}function xe(...e){return r("h4",...e)}function ye(...e){return r("h5",...e)}function he(...e){return r("h6",...e)}function ve(...e){return r("p",...e)}function Se(...e){return r("section",...e)}function be(...e){return r("button",...e)}function Ce(...e){return r("span",...e)}function Le(e){function t(n,o){return`${n} {${Object.keys(o).map(i=>`${i}: ${o[i]};`).join("")}}`}return r("style",[Object.keys(e).map(n=>t(n,e[n])).join("")])}function L(...e){return r("div",...e)}function Me(...e){return L({css:{display:"flex"}},...e)}function Ne(...e){return r("input",...e)}function Ie(...e){return r("textarea",...e)}function we(...e){return r("select",...e)}function ke(...e){return r("option",...e)}function He(...e){return r("br",...e)}function De(...e){return r("tr",...e)}function Re(...e){return r("td",...e)}function ze(...e){return r("b",...e)}function Be(...e){return r("label",...e)}function Fe(...e){return r("a",...e)}function $e(...e){return r("blockquote",...e)}function Ae(...e){return r("li",...e)}function Oe(...e){return r("ol",...e)}function Ve(...e){return r("ul",...e)}function je(...e){return r("audio",...e)}function Ke(...e){return r("video",...e)}function qe(...e){return r("img",...e)}function Pe(...e){return r("canvas",...e)}function Ge(...e){return r("iframe",...e)}function Ue(...e){return r("form",...e)}function We(...e){return r("table",...e)}function Qe(...e){return r("tbody",...e)}function Je(...e){return r("hr",...e)}function et(e,t){return new M(e,t)}var M=class extends d{constructor(n,o){super();this.list=n;this.map=o}run(n){let o=new Map,i=new Map,l=()=>{let u=[];for(let a of this.list.get())o.has(a)||u.push(a);let m=[],s=new Set(this.list.get());for(let a of i.keys()){let f=i.get(a);f&&!s.has(f)&&m.push(a)}for(let a of u){let f=this.map(a),v=typeof f=="string"?document.createTextNode(f):f;c.resolveCallbacks(n,v),i.set(v,a),o.set(a,v)}for(let a of m){a.parentNode?.removeChild(a);let f=i.get(a);i.delete(a),f&&o.delete(f)}for(let a of[...i.keys()])a.parentElement?.removeChild(a);let E=T(this);for(let a of this.list.get())n.insertBefore(o.get(a),E);this.firstNode=o.get(this.list.get()[0])??null};l(),this.list.on("change",()=>{l()})}};function rt(e,t,n){return new N(e,t,n)}var N=class extends d{#e;#n;#t;constructor(t,n,o){super(),this.#e=t,this.#n=n,this.#t=o}run(t){let n,o,i=()=>{let l=T(this);this.#e.get()?(n||(n=this.#n()),c.resolveCallbacks(t,n),this.firstNode=n,o?.remove(),t.insertBefore(n,l)):(o||(o=this.#t?.()),o&&c.resolveCallbacks(t,o),this.firstNode=o??null,n?.remove(),o&&t.insertBefore(o,l))};i(),this.#e.on("change",i)}};function dt(e,t,n){return new I(e,t,n)}var I=class extends d{#e;#n;#t;constructor(t,n,o){super(),this.#e=t,this.#n=n,this.#t=o}run(t){let n=new Map,o=new Map;for(let s of this.#n)o.set(s.case,s);let i,l,u=s=>{let E=o.get(s);if(E){if(!n.has(s)){let a=E.show();n.set(s,a)}return n.get(s)}return this.#t&&!l&&(l=this.#t()),l},m=()=>{let s=this.#e.get(),E=T(this),a=u(s);a&&c.resolveCallbacks(t,a),i?.remove(),a&&t.insertBefore(a,E),i=a};m(),this.#e.on("change",m)}};function pt(e,t){let n=D(void 0),o=()=>{let i;for(let l of t)e.get()===l.case&&(i=l);n.set(i)};return e.on("change",o),o(),n}export{Me as FlexDiv,et as For,M as ForMap,R as FromStates,r as Html,rt as If,N as IfFlow,h as Modify,p as State,ue as Svg,dt as Switch,pt as SwitchBlockState,I as SwitchFlow,fe as Tag,Fe as a,y as applyStringOrState,je as audio,ze as b,$e as blockquote,He as br,be as button,Pe as canvas,L as div,Ue as form,Ee as h1,Te as h2,ge as h3,xe as h4,ye as h5,he as h6,Je as hr,Ge as iframe,qe as img,Ne as input,Be as label,Ae as li,Oe as ol,ke as option,ve as p,Se as section,we as select,Ce as span,Le as style,We as table,Qe as tbody,Re as td,Ie as textarea,De as tr,Ve as ul,D as useState,Ke as video};

package/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "tagu-tagu",
+	"version": "1.0.0",
+	"description": "A lightweight helper for vanilla `HTMLElement`.",
+	"keywords": [
+		"vanilla"
+	],
+	"homepage": "https://github.com/DoTheSimplest/tag-tag#readme",
+	"bugs": {
+		"url": "https://github.com/DoTheSimplest/tag-tag/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/DoTheSimplest/tag-tag.git"
+	},
+	"author": "DoTheSimmplest",
+	"type": "module",
+	"main": "src/index.ts",
+	"files": [
+		"src",
+		"dist"
+	],
+	"scripts": {
+		"test:browser": "vitest",
+		"build": "tsx scripts/build.ts"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.3.8",
+		"@vitest/browser-playwright": "^4.0.15",
+		"esbuild": "^0.27.2",
+		"tsx": "^4.21.0",
+		"typescript": "^5.9.3",
+		"vitest": "^4.0.15"
+	}
+}

package/src/Elements.ts

@@ -0,0 +1,169 @@
+import type { ElementInitializer } from "./Modify";
+import { Html } from "./Tag";
+
+export function h1(...initializers: ElementInitializer<HTMLHeadingElement>[]) {
+	return Html("h1", ...initializers);
+}
+export function h2(...initializers: ElementInitializer<HTMLHeadingElement>[]) {
+	return Html("h2", ...initializers);
+}
+export function h3(...initializers: ElementInitializer<HTMLHeadingElement>[]) {
+	return Html("h3", ...initializers);
+}
+export function h4(...initializers: ElementInitializer<HTMLHeadingElement>[]) {
+	return Html("h4", ...initializers);
+}
+export function h5(...initializers: ElementInitializer<HTMLHeadingElement>[]) {
+	return Html("h5", ...initializers);
+}
+export function h6(...initializers: ElementInitializer<HTMLHeadingElement>[]) {
+	return Html("h6", ...initializers);
+}
+export function p(...initializers: ElementInitializer<HTMLParagraphElement>[]) {
+	return Html("p", ...initializers);
+}
+
+export function section(...initializers: ElementInitializer<HTMLElement>[]) {
+	return Html("section", ...initializers);
+}
+
+export function button(
+	...initializers: ElementInitializer<HTMLButtonElement>[]
+) {
+	return Html("button", ...initializers);
+}
+export function span(...initializers: ElementInitializer<HTMLSpanElement>[]) {
+	return Html("span", ...initializers);
+}
+
+export function style(styles: Record<string, Record<string, string>>) {
+	function createStyleText(
+		selector: string,
+		properties: Record<string, string>,
+	) {
+		return `${selector} {${Object.keys(properties)
+			.map((property) => `${property}: ${properties[property]};`)
+			.join("")}}`;
+	}
+
+	return Html("style", [
+		Object.keys(styles)
+			.map((selector) => createStyleText(selector, styles[selector]))
+			.join(""),
+	]);
+}
+
+export function div(...initializers: ElementInitializer<HTMLDivElement>[]) {
+	return Html("div", ...initializers);
+}
+export function FlexDiv(...initializers: ElementInitializer<HTMLDivElement>[]) {
+	return div({ css: { display: "flex" } }, ...initializers);
+}
+
+export function input(...initializers: ElementInitializer<HTMLInputElement>[]) {
+	return Html("input", ...initializers);
+}
+
+export function textarea(
+	...initializers: ElementInitializer<HTMLTextAreaElement>[]
+) {
+	return Html("textarea", ...initializers);
+}
+
+export function select(
+	...initializers: ElementInitializer<HTMLSelectElement>[]
+) {
+	return Html("select", ...initializers);
+}
+
+export function option(
+	...initializers: ElementInitializer<HTMLOptionElement>[]
+) {
+	return Html("option", ...initializers);
+}
+
+export function br(...initializers: ElementInitializer<HTMLBRElement>[]) {
+	return Html("br", ...initializers);
+}
+
+export function tr(...initializers: ElementInitializer<HTMLTableRowElement>[]) {
+	return Html("tr", ...initializers);
+}
+
+export function td(
+	...initializers: ElementInitializer<HTMLTableCellElement>[]
+) {
+	return Html("td", ...initializers);
+}
+
+export function b(...initializers: ElementInitializer<HTMLElement>[]) {
+	return Html("b", ...initializers);
+}
+
+export function label(...initializers: ElementInitializer<HTMLLabelElement>[]) {
+	return Html("label", ...initializers);
+}
+
+export function a(...initializers: ElementInitializer<HTMLAnchorElement>[]) {
+	return Html("a", ...initializers);
+}
+
+export function blockquote(
+	...initializers: ElementInitializer<HTMLQuoteElement>[]
+) {
+	return Html("blockquote", ...initializers);
+}
+
+export function li(...initializers: ElementInitializer<HTMLLIElement>[]) {
+	return Html("li", ...initializers);
+}
+
+export function ol(...initializers: ElementInitializer<HTMLOListElement>[]) {
+	return Html("ol", ...initializers);
+}
+
+export function ul(...initializers: ElementInitializer<HTMLUListElement>[]) {
+	return Html("ul", ...initializers);
+}
+
+export function audio(...initializers: ElementInitializer<HTMLAudioElement>[]) {
+	return Html("audio", ...initializers);
+}
+
+export function video(...initializers: ElementInitializer<HTMLVideoElement>[]) {
+	return Html("video", ...initializers);
+}
+
+export function img(...initializers: ElementInitializer<HTMLImageElement>[]) {
+	return Html("img", ...initializers);
+}
+
+export function canvas(
+	...initializers: ElementInitializer<HTMLCanvasElement>[]
+) {
+	return Html("canvas", ...initializers);
+}
+
+export function iframe(
+	...initializers: ElementInitializer<HTMLIFrameElement>[]
+) {
+	return Html("iframe", ...initializers);
+}
+
+export function form(...initializers: ElementInitializer<HTMLFormElement>[]) {
+	return Html("form", ...initializers);
+}
+
+export function table(...initializers: ElementInitializer<HTMLTableElement>[]) {
+	return Html("table", ...initializers);
+}
+
+export function tbody(
+	...initializers: ElementInitializer<HTMLTableSectionElement>[]
+) {
+	return Html("tbody", ...initializers);
+}
+
+export function hr(...initializers: ElementInitializer<HTMLHRElement>[]) {
+	return Html("hr", ...initializers);
+}

package/src/Modify.ts

@@ -0,0 +1,219 @@
+import { type DataRecord, initializeData } from "./data/data";
+import { Binding } from "./data/useBinding";
+import { type ChildType, initializeChildBlock } from "./initializeChildBlock";
+import { FromStates, State } from "./State";
+
+type EventListenerType<
+	TEventType2Event,
+	TEventType extends keyof TEventType2Event,
+> = (event: TEventType2Event[TEventType]) => any;
+
+type EventListenerRecord<TEventType2Event> = {
+	[TEventType in keyof TEventType2Event]?:
+		| EventListenerType<TEventType2Event, TEventType>
+		| {
+				listener: EventListenerType<TEventType2Event, TEventType>;
+				options: boolean | AddEventListenerOptions;
+		  };
+};
+
+type $Record = Record<
+	string,
+	ElementInitializer<Element, HTMLElementEventMap | SVGElementEventMap>
+>;
+
+type ElementPropertyInitializer<TEventType2Event> = {
+	html?: string | State | Binding;
+	text?: string | State | Binding;
+	attr?: Record<string, string | State | Binding>;
+	prop?: Record<string, any | State | Binding>;
+	css?: Record<string, string | State | Binding>;
+	on?: EventListenerRecord<TEventType2Event>;
+	$?: $Record;
+	$$?: $Record;
+	data?: DataRecord;
+};
+
+export type ElementInitializer<
+	TElement,
+	TEventType2Event = HTMLElementEventMap,
+> =
+	| string
+	| State
+	| ElementPropertyInitializer<TEventType2Event>
+	| ChildType[]
+	| ((element: TElement) => void);
+
+export function applyStringOrState(
+	value: string | State,
+	initialize: (text: string) => void,
+) {
+	if (typeof value === "string") {
+		initialize(value);
+	} else {
+		const update = () => {
+			initialize(value.get());
+		};
+		update();
+		value.on("change", update);
+	}
+}
+
+function applyStringOrStateOrBinding(
+	element: Node,
+	value: string | State | Binding,
+	initialize: (text: string) => void,
+) {
+	if (value instanceof Binding) {
+		initializeData(element, {
+			[value.key]: (data: any) => {
+				const isState = data instanceof State;
+				const stringOrState = isState
+					? FromStates([data], () => value.map(data.get()))
+					: value.map(data);
+
+				applyStringOrState(stringOrState, initialize);
+			},
+		});
+	} else {
+		applyStringOrState(value, initialize);
+	}
+}
+
+function initializeHtml(
+	element: Element,
+	html: string | State | Binding | undefined,
+) {
+	if (html !== undefined) {
+		applyStringOrStateOrBinding(element, html, (text) => {
+			element.innerHTML = text;
+		});
+	}
+}
+
+function initializeText(
+	node: Node,
+	text: string | State | Binding | undefined,
+) {
+	if (text !== undefined) {
+		applyStringOrStateOrBinding(node, text, (text) => {
+			node.textContent = text;
+		});
+	}
+}
+
+function initializeStyle(
+	element: Element,
+	css: Record<string, string | State | Binding> | undefined,
+) {
+	const style = (element as any).style;
+	if (!(style instanceof CSSStyleDeclaration)) return;
+
+	for (const propName in css) {
+		const value = css[propName];
+		applyStringOrStateOrBinding(element, value, (text) =>
+			style.setProperty(propName, text),
+		);
+	}
+}
+
+function initializeAttributes(
+	element: Element,
+	attr: Record<string, string | State | Binding> | undefined,
+) {
+	for (const attrName in attr) {
+		const value = attr[attrName];
+		applyStringOrStateOrBinding(element, value, (text) => {
+			if (!text) element.removeAttribute(attrName);
+			else {
+				element.setAttribute(attrName, text);
+			}
+		});
+	}
+}
+
+function initializeProps(
+	element: Node,
+	prop: Record<string, any | State | Binding> | undefined,
+) {
+	for (const key in prop) {
+		const value = prop[key];
+		applyStringOrStateOrBinding(element, value, (resolvedValue) => {
+			(element as any)[key] = resolvedValue;
+		});
+	}
+}
+
+function initialize$(element: Element, $: $Record | undefined) {
+	for (const selector in $) {
+		const selected = element.querySelector(selector);
+		if (selected) initialize(selected, $[selector]);
+	}
+}
+
+function initialize$$(element: Element, $$: $Record | undefined) {
+	for (const selector in $$) {
+		const selectedItems = element.querySelectorAll(selector);
+		for (const selected of selectedItems) {
+			initialize(selected, $$[selector]);
+		}
+	}
+}
+
+function initializeEventListeners<TEventType2Event>(
+	element: Node,
+	on: EventListenerRecord<TEventType2Event> | undefined,
+) {
+	for (const eventName in on) {
+		const type = eventName as keyof TEventType2Event;
+		const listener = on[type];
+		if (!listener) continue;
+		if (typeof listener === "function") {
+			element.addEventListener(eventName, listener as EventListener);
+		} else {
+			element.addEventListener(
+				eventName,
+				listener.listener as EventListener,
+				listener.options,
+			);
+		}
+	}
+}
+
+function initialize<TElement extends Element, TEventType2Event>(
+	element: TElement | null,
+	initializer: ElementInitializer<TElement, TEventType2Event>,
+) {
+	if (!element) return;
+	if (typeof initializer === "string" || initializer instanceof State) {
+		initializeText(element, initializer);
+	} else if (Array.isArray(initializer)) {
+		initializeChildBlock(element, initializer);
+	} else if (typeof initializer === "function") {
+		initializer(element);
+	} else {
+		initializeHtml(element, initializer.html);
+		initializeText(element, initializer.text);
+		initializeAttributes(element, initializer.attr);
+		initializeProps(element, initializer.prop);
+		initializeStyle(element, initializer.css);
+		initialize$(element, initializer.$);
+		initialize$$(element, initializer.$$);
+		initializeEventListeners(element, initializer.on);
+		initializeData(element, initializer.data);
+	}
+}
+
+export function Modify<T extends Element>(
+	elementOrSelector: T | string,
+	...initializers: ElementInitializer<T>[]
+) {
+	const element =
+		typeof elementOrSelector === "string"
+			? (document.querySelector(elementOrSelector) as T)
+			: elementOrSelector;
+	for (const initializer of initializers) {
+		initialize(element, initializer);
+	}
+	return element;
+}

package/src/State.ts

@@ -0,0 +1,38 @@
+export class State<T = any> {
+	#value: T;
+	constructor(value: T) {
+		this.#value = value;
+	}
+
+	get = () => this.#value;
+	set(value: T) {
+		this.#value = value;
+
+		this.#dispatch("change");
+	}
+	#dispatch(event: string) {
+		this.#listeners.dispatchEvent(new Event(event));
+	}
+
+	#listeners = new EventTarget();
+	on(event: StateEventType, listener: () => void) {
+		this.#listeners.addEventListener(event, listener);
+	}
+}
+
+type StateEventType = "change";
+
+export function useState<T>(value: T) {
+	return new State<T>(value);
+}
+
+export function FromStates<T>(states: State[], createValue: () => T) {
+	const result = new State<T>(createValue());
+	const update = () => {
+		result.set(createValue());
+	};
+	for (const state of states) {
+		state.on("change", update);
+	}
+	return result;
+}

package/src/Tag.ts

@@ -0,0 +1,34 @@
+import { div } from "./Elements";
+import { type ElementInitializer, Modify } from "./Modify";
+
+export type SvgElementInitializer =
+	| {
+			attr?: Record<string, string>;
+			css?: Record<string, string>;
+	  }
+	| Element[];
+
+export function Svg<K extends keyof SVGElementTagNameMap>(
+	name: K,
+	...initializers: SvgElementInitializer[]
+): SVGElementTagNameMap[K] {
+	const result = document.createElementNS("http://www.w3.org/2000/svg", name);
+	return Modify(result, ...initializers);
+}
+
+export function Html<K extends keyof HTMLElementTagNameMap>(
+	tagName: K,
+	...initializers: ElementInitializer<HTMLElementTagNameMap[K]>[]
+) {
+	const result = document.createElement(tagName);
+	Modify(result, ...initializers);
+	return result;
+}
+
+export function Tag(
+	html: string,
+	...initializers: ElementInitializer<Element>[]
+) {
+	const result = div({ html: html }).children[0];
+	return Modify(result, ...initializers);
+}

package/src/data/data.ts

@@ -0,0 +1,160 @@
+export type DataCallback = (data: any) => void;
+
+export class NodeData {
+	node2Data = new WeakMap<Node, Record<string, any>>();
+
+	addCallbacks(
+		element: Node,
+		callbackRecord: Record<string, DataCallback[]> | undefined,
+	) {
+		if (!callbackRecord) return;
+		if (!this.node2DescendantCallbacks.has(element)) {
+			this.node2DescendantCallbacks.set(element, {});
+		}
+		const originalCallbackRecord = this.node2DescendantCallbacks.get(element)!;
+		appendCallbacksRecord(originalCallbackRecord, callbackRecord);
+		const dataRecord = this.node2Data.get(element);
+		resolveCallbacksByData(originalCallbackRecord, dataRecord);
+	}
+
+	setDataRecord(element: Node, dataRecord: Record<string, any> | undefined) {
+		dataRecord && this.node2Data.set(element, dataRecord);
+	}
+
+	resolveCallbacks(element: Node, child: Node) {
+		/**
+		 * Bubble up callbacks record until it reaches root.
+		 * if it finds data, call callbacks and remove them.
+		 * if it reaches root, append root callbacks
+		 */
+		const bubbleUp = (
+			ancestor: Node,
+			callbacksRecord: Record<string, DataCallback[]>,
+		) => {
+			resolveCallbacksByData(callbacksRecord, this.node2Data.get(ancestor));
+
+			// If callbacks are empty (resolved), finish bubbling up
+			if (!Object.keys(callbacksRecord).length) return;
+
+			// If it is root,
+			// append callbacks
+			if (!ancestor.parentElement) {
+				if (!this.node2DescendantCallbacks.has(ancestor)) {
+					this.node2DescendantCallbacks.set(ancestor, {});
+				}
+				const rootCallbacks = this.node2DescendantCallbacks.get(ancestor);
+				rootCallbacks && appendCallbacksRecord(rootCallbacks, callbacksRecord);
+				return;
+			}
+
+			bubbleUp(ancestor.parentElement, callbacksRecord);
+		};
+
+		const callbacks = this.node2DescendantCallbacks.get(child);
+		if (callbacks) {
+			bubbleUp(element, callbacks);
+		}
+	}
+
+	node2DescendantCallbacks = new WeakMap<
+		Node,
+		Record<string, DataCallback[]>
+	>();
+}
+
+/**
+ * Resolve callbacks.
+ * Resolved keys are deleted
+ */
+function resolveCallbacksByData(
+	callbacksRecord: Record<string, DataCallback[]>,
+	dataRecord: Record<string, any> | undefined,
+) {
+	for (const key in dataRecord) {
+		if (key in callbacksRecord) {
+			for (const callback of callbacksRecord[key]) {
+				callback(dataRecord[key]);
+			}
+
+			delete callbacksRecord[key];
+		}
+	}
+}
+
+export type DataRecord = Record<string, DataCallback | any>;
+export const nodeData = new NodeData();
+export function initializeData(element: Node, data: DataRecord | undefined) {
+	nodeData.addCallbacks(element, extractCallbackRecord(data));
+	nodeData.setDataRecord(element, extractDataValueRecord(data));
+}
+
+export function extractCallbackRecord(
+	record: DataRecord | undefined,
+): Record<string, DataCallback[]> | undefined {
+	return extractRecordFromDataRecord(
+		record,
+		(value) => typeof value === "function",
+		(callback) => [callback],
+	);
+}
+
+export function extractDataValueRecord(
+	record: DataRecord | undefined,
+): Record<string, any> | undefined {
+	return extractRecordFromDataRecord(
+		record,
+		(value) => typeof value !== "function",
+	);
+}
+
+function extractRecordFromDataRecord(
+	record: DataRecord | undefined,
+	predicate: (value: any) => boolean,
+	map = (value: any) => value,
+) {
+	if (!record) return;
+
+	const result = {} as Record<string, any>;
+	for (const key in record) {
+		const value = record[key];
+		if (predicate(value)) {
+			result[key] = map(value);
+		}
+	}
+
+	if (!Object.keys(result).length) return;
+
+	return result;
+}
+
+export function createDescendantCallbacks(
+	record: Record<string, DataCallback> | undefined,
+) {
+	return extractRecordFromDataRecord(
+		record,
+		() => true,
+		(value) => [value],
+	);
+}
+
+export function appendCallbacksRecord(
+	record1: Record<string, DataCallback[]>,
+	record2: Record<string, DataCallback[]> | undefined,
+) {
+	for (const key in record2) {
+		if (!record1[key]) {
+			record1[key] = [];
+		}
+		record1[key].push(...record2[key]);
+	}
+}
+
+export function findData(node: Node | null, key: string) {
+	if (!node) return;
+
+	const record = nodeData.node2Data.get(node);
+	if (record && key in record) {
+		return record[key];
+	}
+	return findData(node.parentElement, key);
+}

package/src/data/useBinding.ts

@@ -0,0 +1,10 @@
+export function useBinding<T>(key: string, map: (value: T) => string) {
+	return new Binding(key, map);
+}
+
+export class Binding<T = any> {
+	constructor(
+		public key: string,
+		public map: (value: T) => string,
+	) {}
+}

package/src/flow/ControlFlow.ts

@@ -0,0 +1,6 @@
+export abstract class ControlFlow {
+	next: ControlFlow | Node | null = null;
+	firstNode: Node | null = null;
+
+	abstract run(element: Element): void;
+}

package/src/flow/For.ts

@@ -0,0 +1,82 @@
+import { nodeData } from "../data/data";
+import { getNextNodeSibling } from "../initializeChildBlock";
+import type { State } from "../State";
+import { ControlFlow } from "./ControlFlow";
+
+export function For<T>(
+	array: State<readonly T[]>,
+	map: (value: T) => Node | string,
+): ControlFlow {
+	return new ForMap(array, map);
+}
+
+export class ForMap<T> extends ControlFlow {
+	constructor(
+		private list: State<readonly T[]>,
+		private map: (value: T) => Node | string,
+	) {
+		super();
+	}
+
+	run(element: Element) {
+		const model2View = new Map<T, Node>();
+		const view2Model = new Map<Node, T>();
+
+		// When list is updated, check diffs.
+		// Create UIs for added models and delete UIs for deleted models.
+		const updateListUI = () => {
+			// Added models
+			const itemsAdded = [] as T[];
+			for (const item of this.list.get()) {
+				if (!model2View.has(item)) itemsAdded.push(item);
+			}
+
+			// UIs to remove
+			const viewsToRemove = [] as Node[];
+			const listSet = new Set<T>(this.list.get());
+			for (const view of view2Model.keys()) {
+				const oldItem = view2Model.get(view);
+				if (oldItem && !listSet.has(oldItem)) viewsToRemove.push(view);
+			}
+
+			// Add UIs for added models
+			for (const item of itemsAdded) {
+				const mapped = this.map(item);
+				const resolved =
+					typeof mapped === "string" ? document.createTextNode(mapped) : mapped;
+
+				// data
+				nodeData.resolveCallbacks(element, resolved);
+
+				// To insert `item`
+				view2Model.set(resolved, item);
+				model2View.set(item, resolved);
+			}
+
+			// Remove UIs
+			for (const view of viewsToRemove) {
+				view.parentNode?.removeChild(view);
+				const model = view2Model.get(view);
+				view2Model.delete(view);
+				model && model2View.delete(model);
+			}
+
+			// Sort
+			for (const child of [...view2Model.keys()]) {
+				// child might not be appended yet. (so we need `?`)
+				child.parentElement?.removeChild(child);
+			}
+
+			const next = getNextNodeSibling(this);
+			for (const model of this.list.get()) {
+				element.insertBefore(model2View.get(model)!, next);
+			}
+			this.firstNode = model2View.get(this.list.get()[0]) ?? null;
+		};
+
+		updateListUI();
+		this.list.on("change", () => {
+			updateListUI();
+		});
+	}
+}

package/src/flow/If.ts

@@ -0,0 +1,61 @@
+import { nodeData } from "../data/data";
+import { getNextNodeSibling } from "../initializeChildBlock";
+import type { State } from "../State";
+import { ControlFlow } from "./ControlFlow";
+
+export function If(
+	condition: State<boolean>,
+	show: () => Element,
+	showElse?: () => Element,
+): ControlFlow {
+	return new IfFlow(condition, show, showElse);
+}
+export class IfFlow extends ControlFlow {
+	#condition: State<boolean>;
+	#createThen: () => Element;
+	#createElse?: () => Element;
+
+	constructor(
+		condition: State<boolean>,
+		create: () => Element,
+		createElse?: () => Element,
+	) {
+		super();
+		this.#condition = condition;
+		this.#createThen = create;
+		this.#createElse = createElse;
+	}
+
+	run(element: Element) {
+		let child: Element;
+		let elseChild: Element | undefined;
+
+		const update = () => {
+			const next = getNextNodeSibling(this);
+
+			if (this.#condition.get()) {
+				if (!child) child = this.#createThen();
+
+				// data
+				nodeData.resolveCallbacks(element, child);
+				// insert `child`
+				this.firstNode = child;
+				elseChild?.remove();
+				element.insertBefore(child, next);
+			} else {
+				if (!elseChild) elseChild = this.#createElse?.();
+
+				// data
+				elseChild && nodeData.resolveCallbacks(element, elseChild);
+				// insert `elseChild`
+				this.firstNode = elseChild ?? null;
+				child?.remove();
+				elseChild && element.insertBefore(elseChild, next);
+			}
+		};
+
+		update();
+
+		this.#condition.on("change", update);
+	}
+}

package/src/flow/Switch.ts

@@ -0,0 +1,76 @@
+import { nodeData } from "../data/data";
+import { getNextNodeSibling } from "../initializeChildBlock";
+import type { State } from "../State";
+import { ControlFlow } from "./ControlFlow";
+import type { SwitchSection } from "./SwitchBlockState";
+
+export function Switch<T>(
+	value: State<T>,
+	sections: SwitchSection<T>[],
+	createDefault?: () => Element,
+): ControlFlow {
+	return new SwitchFlow(value, sections, createDefault);
+}
+export class SwitchFlow<T> extends ControlFlow {
+	#value: State<T>;
+	#sections: SwitchSection<T>[];
+	#createDefault?: () => Element;
+
+	constructor(
+		value: State<T>,
+		sections: SwitchSection<T>[],
+		createDefault?: () => Element,
+	) {
+		super();
+		this.#value = value;
+		this.#sections = sections;
+		this.#createDefault = createDefault;
+	}
+
+	run(element: Element) {
+		const value2Element = new Map<T, Element>();
+		const value2Section = new Map<T, SwitchSection<T>>();
+
+		for (const section of this.#sections) {
+			value2Section.set(section.case, section);
+		}
+
+		let currentElement: Element | undefined;
+		let defaultElement: Element | undefined;
+
+		const getElementFromValue = (value: T) => {
+			const section = value2Section.get(value);
+			if (section) {
+				// If element is not created yet, create and cache
+				if (!value2Element.has(value)) {
+					const newElement = section.show();
+					value2Element.set(value, newElement);
+				}
+				return value2Element.get(value)!;
+			}
+
+			// ensure default
+			if (this.#createDefault && !defaultElement) {
+				defaultElement = this.#createDefault();
+			}
+			return defaultElement;
+		};
+
+		const update = () => {
+			const value = this.#value.get();
+			const nextNode = getNextNodeSibling(this);
+
+			const newElement = getElementFromValue(value);
+			// data
+			newElement && nodeData.resolveCallbacks(element, newElement);
+			// insert `newElement`
+			currentElement?.remove();
+			newElement && element.insertBefore(newElement, nextNode);
+			currentElement = newElement;
+		};
+
+		update();
+
+		this.#value.on("change", update);
+	}
+}

package/src/flow/SwitchBlockState.ts

@@ -0,0 +1,31 @@
+import { type State, useState } from '../State';
+
+export type SwitchSection<TCase, TElement = Element> = {
+	case: TCase;
+	show: () => TElement;
+};
+
+export function SwitchBlockState<TCase, TElement = Element>(
+	value: State<TCase>,
+	sections: SwitchSection<TCase, TElement>[],
+) {
+	const result = useState<SwitchSection<TCase, TElement> | undefined>(
+		undefined,
+	);
+
+	const update = () => {
+		let activated: SwitchSection<TCase, TElement> | undefined;
+
+		for (const section of sections) {
+			if (value.get() === section.case) {
+				activated = section;
+			}
+		}
+		result.set(activated);
+	};
+
+	value.on('change', update);
+
+	update();
+	return result;
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './Elements';
+export * from './flow/For';
+export * from './flow/If';
+export * from './flow/Switch';
+export * from './flow/SwitchBlockState';
+export * from './Modify';
+export * from './State';
+export * from './Tag';

package/src/initializeChildBlock.ts

@@ -0,0 +1,59 @@
+import { nodeData } from "./data/data";
+import { ControlFlow } from "./flow/ControlFlow";
+import { applyStringOrState } from "./Modify";
+import { State } from "./State";
+
+export type ChildType = Node | string | State | ControlFlow;
+export function initializeChildBlock(element: Element, children: ChildType[]) {
+	const resolvedChildren = resolveTextNode(children);
+	connectNeighbours(resolvedChildren);
+
+	for (const child of resolvedChildren) {
+		initializeChild(element, child);
+	}
+}
+
+function initializeChild(element: Element, child: ControlFlow | Node) {
+	if (child instanceof ControlFlow) {
+		child.run(element);
+	} else {
+		nodeData.resolveCallbacks(element, child);
+		element.appendChild(child);
+	}
+}
+
+export function resolveTextNode(children: ChildType[]): (Node | ControlFlow)[] {
+	return children.map((c) => {
+		if (typeof c === "string" || c instanceof State) {
+			const textNode = document.createTextNode("");
+			applyStringOrState(c, (text) => {
+				textNode.textContent = text;
+			});
+			return textNode;
+		}
+		return c;
+	});
+}
+
+export function connectNeighbours(children: (Node | ControlFlow)[]) {
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i];
+		if (child instanceof ControlFlow) {
+			child.next = children[i + 1] ?? null;
+		}
+	}
+}
+
+export function getNextNodeSiblingVirtual(flow: ControlFlow) {
+	const next = flow.next;
+	if (next === null) return null;
+	if (next instanceof Node) return next;
+
+	if (next.firstNode) return next.firstNode;
+	return getNextNodeSiblingVirtual(next);
+}
+
+export function getNextNodeSibling(flow: ControlFlow) {
+	const virtual = getNextNodeSiblingVirtual(flow);
+	return virtual?.parentElement ? virtual : null;
+}