tagu-tagu 2.1.1 → 3.2.0

package/README.md

@@ -97,11 +97,11 @@ function SwitchExample() {
 		button("Pentagon", { on: { click: () => state.set("pentagon") } }),
 		Switch(
 			state,
-			[
-				{ case: "triangle", show: () => div("▲") },
-				{ case: "rectangle", show: () => div("■") },
-				{ case: "circle", show: () => div("●") },
-			],
+			{
+				triangle: () => div("▲"),
+				rectangle: () => div("■"),
+				circle: () => div("●"),
+			},
 			() => div("?"),
 		),
 	]);

package/dist/bundle.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tagu-tagu",
-	"version": "2.1.1",
+	"version": "3.2.0",
 	"description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
 	"keywords": [
 		"vanilla",
@@ -24,7 +24,8 @@
 	"scripts": {
 		"test:browser": "vitest",
 		"build": "tsx scripts/build.ts",
-		"typecheck:watch": "tsc -p tsconfig.check.json --watch"
+		"typecheck:watch": "tsc -p tsconfig.check.json --watch",
+		"watch": "tsx --watch scripts/watch.ts"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.8",

package/src/Modify.ts

@@ -1,7 +1,7 @@
 import { type DataRecord, initializeData, waitForData } from "./data/data";
 import { Binding } from "./data/useBinding";
 import { type ChildType, initializeChildBlock } from "./initializeChildBlock";
-import { FromStates, State } from "./State";
+import { State, useState } from "./State";
 
 type EventListenerType<
 	TEventType2Event,
@@ -70,7 +70,7 @@ function applyStringOrStateOrBinding(
 			[value.key]: (data: any) => {
 				const isState = data instanceof State;
 				const stringOrState = isState
-					? FromStates([data], () => value.map(data.get()))
+					? useState([data], () => value.map(data.get()))
 					: value.map(data);
 
 				applyStringOrState(stringOrState, initialize);

package/src/State.ts

@@ -22,11 +22,17 @@ export class State<T = any> {
 
 type StateEventType = "change";
 
-export function useState<T>(value: T) {
-	return new State<T>(value);
+export function useState<T>(states: State[], map: () => T): State<T>;
+export function useState<T>(value: T): State<T>;
+export function useState<T>(value: any, map?: any) {
+	if (typeof map === "function") {
+		return fromStates(value, map);
+	} else {
+		return new State<T>(value);
+	}
 }
 
-export function FromStates<T>(states: State[], createValue: () => T) {
+function fromStates<T>(states: State[], createValue: () => T) {
 	const result = new State<T>(createValue());
 	const update = () => {
 		result.set(createValue());

package/src/data/data.ts

@@ -125,9 +125,23 @@ export function findData(node: Node | null, key: string) {
 	return findData(node.parentElement, key);
 }
 
+export function waitForData<T = any>(node: Node, key: string): Promise<T>;
 export function waitForData(
 	node: Node,
 	callbackRecord: Record<string, (data: any) => void>,
-) {
-	nodeData.addCallbacks(node, extractCallbackRecord(callbackRecord));
+): void;
+export function waitForData(node: Node, callbacksOrKey: any) {
+	if (typeof callbacksOrKey === "string") {
+		return waitForData_Promise(node, callbacksOrKey);
+	}
+
+	nodeData.addCallbacks(node, extractCallbackRecord(callbacksOrKey));
+}
+
+function waitForData_Promise<T = any>(node: Node, key: string): Promise<T> {
+	return new Promise<any>((resolve) => {
+		const found = findData(node, key);
+		if (found !== undefined) resolve(found);
+		else nodeData.addCallbacks(node, { [key]: [resolve] });
+	});
 }

package/src/flow/Switch.ts

@@ -8,9 +8,35 @@ export function Switch<T>(
 	value: State<T>,
 	sections: SwitchSection<T>[],
 	createDefault?: () => Element,
+): ControlFlow;
+export function Switch(
+	value: State<string>,
+	sections: Record<string, () => Element>,
+	createDefault?: () => Element,
+): ControlFlow;
+export function Switch<T>(
+	value: State,
+	sections: SwitchSection<T>[] | Record<string, () => Element>,
+	createDefault?: () => Element,
 ): ControlFlow {
-	return new SwitchFlow(value, sections, createDefault);
+	if (Array.isArray(sections)) {
+		return new SwitchFlow(value, sections, createDefault);
+	}
+
+	return Switch(
+		value,
+		getKeys(sections).map((key) => ({ case: key, show: sections[key] })),
+		createDefault,
+	);
+}
+function getKeys<K extends keyof any>(record: Record<K, any>) {
+	const result = [] as K[];
+	for (const key in record) {
+		result.push(key);
+	}
+	return result;
 }
+
 export class SwitchFlow<T> extends ControlFlow {
 	#value: State<T>;
 	#sections: SwitchSection<T>[];