tagu-tagu 3.4.2 → 3.4.3

package/README.md

@@ -44,26 +44,43 @@ No need to compile. But typescript is supported.
 ## Examples
 
 ### Initializers
-Initializers are rest parameters. Arguments can be any order.
+Elements are initialized by rest parameters. Arguments can be any order.
+
 ```typescript
 button("Hello!", {css: {background: "blue"}});
 button({css: {background: "blue"}}, "Hello!");
 ```
 
-#### Children initializer
+#### text initializer
 
-[JSFiddle](https://jsfiddle.net/do_the_simplest/q4kzphbr/1/)
 ```typescript
 import { div } from "tagu-tagu";
 
-function ChildExample() {
+function SimpleTextExample() {
 	return div("Hello");
 }
 
-document.body.appendChild(ChildExample());
+document.body.appendChild(SimpleTextExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/q4kzphbr/2/)
+
+or
+
+```typescript
+import { div } from "tagu-tagu";
+
+// Element: textContent
+function TextExample() {
+	return div({ text: "Hello" });
+}
+
+document.body.appendChild(TextExample());
+```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/yqda3rhp/9/)
+
+#### Children initializer
+
 
-[JSFiddle](https://jsfiddle.net/do_the_simplest/hx9mn4rg/1/)
 ```typescript
 import { button, div, h1 } from "tagu-tagu";
 
@@ -75,10 +92,10 @@ function ChildrenExample() {
 document.body.appendChild(ChildrenExample());
 
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/hx9mn4rg/1/)
 
 
 #### `html` initializer
-[JSFiddle](https://jsfiddle.net/do_the_simplest/6p9jh45L/2/)
 ```typescript
 import { div } from "tagu-tagu";
 
@@ -90,9 +107,9 @@ function HtmlExample() {
 document.body.appendChild(HtmlExample());
 
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/6p9jh45L/2/)
 
 #### `css` initializer
-[JSFiddle](https://jsfiddle.net/do_the_simplest/mfLutvnc/1/)
 
 ```typescript
 import { button } from "tagu-tagu";
@@ -106,9 +123,9 @@ function CssExample() {
 
 document.body.appendChild(CssExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/mfLutvnc/1/)
 
 #### `attr` initializer
-[JSFiddle](https://jsfiddle.net/do_the_simplest/r8a423pw/1/)
 
 ```typescript
 import { input } from "tagu-tagu";
@@ -122,9 +139,9 @@ function AttrExample() {
 
 document.body.appendChild(AttrExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/r8a423pw/1/)
 
 #### `prop` initializer
-[JSFiddle](https://jsfiddle.net/do_the_simplest/mc38ksqw/2/)
 
 ```typescript
 import { option, select } from "tagu-tagu";
@@ -138,9 +155,9 @@ function PropExample() {
 
 document.body.appendChild(PropExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/mc38ksqw/2/)
 
 #### `on` initializer
-[JSFiddle](https://jsfiddle.net/do_the_simplest/Lsjmw263/)
 ```typescript
 import { button } from "tagu-tagu";
 
@@ -151,9 +168,9 @@ function OnExample() {
 
 document.body.appendChild(OnExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/Lsjmw263/)
 
 #### `data` initializer
-[JSFiddle](https://jsfiddle.net/do_the_simplest/9cLtyzkm/1/)
 
 ```typescript
 import { div, waitForData } from "tagu-tagu";
@@ -165,8 +182,8 @@ function DataExample() {
 const element = DataExample();
 console.log(await waitForData(element, "my-data-key")); // Hello World!
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/9cLtyzkm/1/)
 
-[JSFiddle](https://jsfiddle.net/do_the_simplest/eh7bdrvL/3/)
 ```typescript
 import { div, Modify, waitForData } from "tagu-tagu";
 
@@ -189,10 +206,10 @@ function DataFromParentExample() {
 
 document.body.appendChild(DataFromParentExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/eh7bdrvL/3/)
 
 #### Modify existing element
 You can use initializers for existing element.
-[JSFiddle](https://jsfiddle.net/do_the_simplest/o87nw6zL/15/)
 
 ```typescript
 import { Modify } from "tagu-tagu";
@@ -210,10 +227,10 @@ Modify(document.body, {
 });
 
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/o87nw6zL/15/)
 
 
 #### `$` initializer
-[JSFiddle](https://jsfiddle.net/do_the_simplest/b8roj7wx/1/)
 ```html
 <form>
     <div>Name: <input id="name"></div>
@@ -250,9 +267,9 @@ function $Example() {
 
 $Example();
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/b8roj7wx/1/)
 
 #### `$$` initializer
-[JSFiddle](https://jsfiddle.net/do_the_simplest/gqe5378t/1/)
 ```html
 <meta charset="utf-8">
 <div>
@@ -293,9 +310,9 @@ function $$Example() {
 
 $$Example();
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/gqe5378t/1/)
 
 #### Callback initializer
-[JSFiddle](https://jsfiddle.net/do_the_simplest/tfj8uqa7/3/)
 ```typescript
 import { button, div } from "tagu-tagu";
 
@@ -313,9 +330,9 @@ function InitializerCallbackExample() {
 
 document.body.appendChild(InitializerCallbackExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/tfj8uqa7/3/)
 
 ### `State`
-[JSFiddle](https://jsfiddle.net/do_the_simplest/j3948zpo/1/)
 ```typescript
 import { button, div, useState } from "tagu-tagu";
 
@@ -331,8 +348,8 @@ function SimpleStateExample() {
 
 document.body.appendChild(SimpleStateExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/j3948zpo/1/)
 
-[JSFiddle](https://jsfiddle.net/do_the_simplest/by934m81/2/)
 ```typescript
 import { button, div, useState } from "tagu-tagu";
 
@@ -351,8 +368,8 @@ function StateFromStateExample() {
 
 document.body.appendChild(StateFromStateExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/by934m81/2/)
 
-[JSFiddle](https://jsfiddle.net/do_the_simplest/8hsuc5pn/1/)
 ```typescript
 import { button, div, useState } from "tagu-tagu";
 
@@ -376,9 +393,9 @@ function TwoStatesFromStateExample() {
 
 document.body.appendChild(TwoStatesFromStateExample());
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/8hsuc5pn/1/)
 
 ### `If`
-[JSFiddle](https://jsfiddle.net/do_the_simplest/bxuqsh1d/21/)
 
 ```typescript
 import { div, If, input, span, useState } from "tagu-tagu";
@@ -408,9 +425,9 @@ function IfExample() {
 document.body.appendChild(IfExample());
 
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/bxuqsh1d/21/)
 
 ### `Switch`
-[JSFiddle](https://jsfiddle.net/do_the_simplest/vw8hrz1t/14/)
 
 ```typescript
 import { button, div, Switch, useState } from "tagu-tagu";
@@ -438,9 +455,9 @@ function SwitchExample() {
 document.body.appendChild(SwitchExample());
 
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/vw8hrz1t/14/)
 
 ### `For`
-[JSFiddle](https://jsfiddle.net/do_the_simplest/soLa9v6t/12/)
 
 ```typescript
 import { button, div, For, useState } from "tagu-tagu";
@@ -472,10 +489,10 @@ function ForExample() {
 document.body.appendChild(ForExample());
 
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/soLa9v6t/12/)
 
 ### Data binding
 You can use data of ancestors.
-[JSFiddle](https://jsfiddle.net/do_the_simplest/9u6oz2bc/6/)
 
 ```typescript
 import { button, div, useBinding, useState } from "tagu-tagu";
@@ -503,6 +520,7 @@ function DataBindingExample() {
 document.body.appendChild(DataBindingExample());
 
 ```
+[JSFiddle](https://jsfiddle.net/do_the_simplest/9u6oz2bc/6/)
 
 ## Seamless migration
 Since `tagu-tagu` is just a helper, you can migrate from anywhere.

package/dist/bundle.min.js

@@ -1 +1 @@
-var b=class{node2Data=new WeakMap;addCallbacks(e,n){if(!n)return;this.node2DescendantCallbacks.has(e)||this.node2DescendantCallbacks.set(e,{});let o=this.node2DescendantCallbacks.get(e);D(o,n);let i=this.node2Data.get(e);k(o,i)}setDataRecord(e,n){n&&this.node2Data.set(e,n)}resolveCallbacks(e,n){let o=(s,f)=>{if(k(f,this.node2Data.get(s)),!!Object.keys(f).length){if(!s.parentElement){this.node2DescendantCallbacks.has(s)||this.node2DescendantCallbacks.set(s,{});let m=this.node2DescendantCallbacks.get(s);m&&D(m,f);return}o(s.parentElement,f)}},i=this.node2DescendantCallbacks.get(n);i&&o(e,i)}node2DescendantCallbacks=new WeakMap};function k(t,e){for(let n in e)if(n in t){for(let o of t[n])o(e[n]);delete t[n]}}var l=new b;function H(t,e){l.setDataRecord(t,e)}function O(t){if(!t)return;let e={};for(let n in t){let o=t[n];e[n]=[o]}if(Object.keys(e).length)return e}function D(t,e){for(let n in e)t[n]||(t[n]=[]),t[n].push(...e[n])}function C(t,e){if(!t)return;let n=l.node2Data.get(t);return n&&e in n?n[e]:C(t.parentElement,e)}function x(t,e){if(typeof e=="string")return P(t,e);l.addCallbacks(t,O(e))}function P(t,e){return new Promise(n=>{let o=C(t,e);o!==void 0?n(o):l.addCallbacks(t,{[e]:[n]})})}function j(t,e=n=>n){return new T(t,e)}var T=class{constructor(e,n){this.key=e;this.map=n}};var c=class{next=null;firstNode=null};var u=class{#t;constructor(e){this.#t=e}get=()=>this.#t;set(e){this.#t=e,this.#n("change")}#n(e){this.#e.dispatchEvent(new Event(e))}#e=new EventTarget;on(e,n){this.#e.addEventListener(e,n)}};function z(t,e){return typeof e=="function"?Array.isArray(t)?R(t,e):R([t],()=>e(t.get())):new u(t)}function R(t,e){let n=new u(e()),o=()=>{n.set(e())};for(let i of t)i.on("change",o);return n}function B(t,e){let n=q(e);K(n);for(let o of n)V(t,o)}function V(t,e){e instanceof c?e.run(t):(l.resolveCallbacks(t,e),t.appendChild(e))}function q(t){return t.map(e=>{if(typeof e=="string"||e instanceof u){let n=document.createTextNode("");return h(e,o=>{n.textContent=o}),n}return e})}function K(t){for(let e=0;e<t.length;e++){let n=t[e];n instanceof c&&(n.next=t[e+1]??null)}}function F(t){let e=t.next;return e===null?null:e instanceof Node?e:e.firstNode?e.firstNode:F(e)}function g(t){let e=F(t);return e?.parentElement?e:null}function h(t,e){if(typeof t=="string")e(t);else if(t instanceof u){let n=()=>{e(t.get())};n(),t.on("change",n)}else e(t)}function y(t,e,n){e instanceof T?x(t,{[e.key]:o=>{let s=o instanceof u?z([o],()=>e.map(o.get())):e.map(o);h(s,n)}}):h(e,n)}function G(t,e){e!==void 0&&y(t,e,n=>{t.innerHTML=n})}function A(t,e){e!==void 0&&y(t,e,n=>{t.textContent=n})}function U(t,e){let n=t.style;if(n instanceof CSSStyleDeclaration)for(let o in e){let i=e[o];y(t,i,s=>n.setProperty(o,s))}}function W(t,e){for(let n in e){let o=e[n];y(t,o,i=>{i?t.setAttribute(n,i):t.removeAttribute(n)})}}function Q(t,e){for(let n in e){let o=e[n];y(t,o,i=>{t[n]=i})}}function _(t,e){for(let n in e){let o=t.querySelector(n);o&&w(o,e[n])}}function J(t,e){for(let n in e){let o=t.querySelectorAll(n);for(let i of o)w(i,e[n])}}function X(t,e){for(let n in e){let i=e[n];i&&(typeof i=="function"?t.addEventListener(n,i):i instanceof T?x(t,{[i.key]:s=>{let f=i.map(s);t.addEventListener(n,f)}}):t.addEventListener(n,i.listener,i.options))}}function w(t,e){t&&(typeof e=="string"||e instanceof u?A(t,e):Array.isArray(e)?B(t,e):typeof e=="function"?e(t):(G(t,e.html),A(t,e.text),W(t,e.attr),Q(t,e.prop),U(t,e.css),_(t,e.$),J(t,e.$$),X(t,e.on),H(t,e.data)))}function v(t,...e){let n=typeof t=="string"?document.querySelector(t):t;for(let o of e)w(n,o);return n}function xt(t,...e){let n=document.createElementNS("http://www.w3.org/2000/svg",t);return v(n,...e)}function r(t,...e){let n=document.createElement(t);return v(n,...e),n}function ht(t,...e){let n=L({html:t}).children[0];return v(n,...e)}function bt(...t){return r("h1",...t)}function Ct(...t){return r("h2",...t)}function wt(...t){return r("h3",...t)}function Lt(...t){return r("h4",...t)}function Nt(...t){return r("h5",...t)}function Mt(...t){return r("h6",...t)}function It(...t){return r("p",...t)}function kt(...t){return r("section",...t)}function Dt(...t){return r("button",...t)}function Ht(...t){return r("span",...t)}function Rt(t){function e(n,o){return`${n} {${Object.keys(o).map(i=>`${i}: ${o[i]};`).join("")}}`}return r("style",[Object.keys(t).map(n=>e(n,t[n])).join("")])}function L(...t){return r("div",...t)}function zt(...t){return L({css:{display:"flex"}},...t)}function Bt(...t){return r("input",...t)}function Ft(...t){return r("textarea",...t)}function At(...t){return r("select",...t)}function $t(...t){return r("option",...t)}function Ot(...t){return r("br",...t)}function Pt(...t){return r("tr",...t)}function jt(...t){return r("td",...t)}function Vt(...t){return r("b",...t)}function qt(...t){return r("label",...t)}function Kt(...t){return r("a",...t)}function Gt(...t){return r("blockquote",...t)}function Ut(...t){return r("li",...t)}function Wt(...t){return r("ol",...t)}function Qt(...t){return r("ul",...t)}function _t(...t){return r("audio",...t)}function Jt(...t){return r("video",...t)}function Xt(...t){return r("img",...t)}function Yt(...t){return r("canvas",...t)}function Zt(...t){return r("iframe",...t)}function te(...t){return r("form",...t)}function ee(...t){return r("table",...t)}function ne(...t){return r("tbody",...t)}function oe(...t){return r("hr",...t)}function Y(t,e){return new N(t,e)}var N=class extends c{constructor(n,o){super();this.list=n;this.map=o}run(n){let o=new Map,i=new Map,s=()=>{let f=[];for(let a of this.list.get())o.has(a)||f.push(a);let m=[],d=new Set(this.list.get());for(let a of i.keys()){let p=i.get(a);p&&!d.has(p)&&m.push(a)}for(let a of f){let p=this.map(a),S=typeof p=="string"?document.createTextNode(p):p;l.resolveCallbacks(n,S),i.set(S,a),o.set(a,S)}for(let a of m){a.parentNode?.removeChild(a);let p=i.get(a);i.delete(a),p&&o.delete(p)}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};s(),this.list.on("change",()=>{s()})}};function Z(t,e,n){return new M(t,e,n)}var M=class extends c{#t;#n;#e;constructor(e,n,o){super(),this.#t=e,this.#n=n,this.#e=o}run(e){let n,o,i=()=>{let s=g(this);this.#t.get()?(n||(n=this.#n()),l.resolveCallbacks(e,n),this.firstNode=n,o?.remove(),e.insertBefore(n,s)):(o||(o=this.#e?.()),o&&l.resolveCallbacks(e,o),this.firstNode=o??null,n?.remove(),o&&e.insertBefore(o,s))};i(),this.#t.on("change",i)}};function $(t,e,n){return Array.isArray(e)?new I(t,e,n):$(t,Object.keys(e).map(o=>({case:o,show:e[o]})),n)}var I=class extends c{#t;#n;#e;constructor(e,n,o){super(),this.#t=e,this.#n=n,this.#e=o}run(e){let n=new Map,o=new Map;for(let d of this.#n)o.set(d.case,d);let i,s,f=d=>{let E=o.get(d);if(E){if(!n.has(d)){let a=E.show();n.set(d,a)}return n.get(d)}return this.#e&&!s&&(s=this.#e()),s},m=()=>{let d=this.#t.get(),E=g(this),a=f(d);a&&l.resolveCallbacks(e,a),i?.remove(),a&&e.insertBefore(a,E),i=a};m(),this.#t.on("change",m)}};export{c as ControlFlow,zt as FlexDiv,Y as For,r as Html,Z as If,v as Modify,u as State,xt as Svg,$ as Switch,ht as Tag,Kt as a,h as applyStringOrState,_t as audio,Vt as b,Gt as blockquote,Ot as br,Dt as button,Yt as canvas,L as div,C as findData,te as form,bt as h1,Ct as h2,wt as h3,Lt as h4,Nt as h5,Mt as h6,oe as hr,Zt as iframe,Xt as img,Bt as input,qt as label,Ut as li,Wt as ol,$t as option,It as p,kt as section,At as select,Ht as span,Rt as style,ee as table,ne as tbody,jt as td,Ft as textarea,Pt as tr,Qt as ul,j as useBinding,z as useState,Jt as video,x as waitForData};
+var b=class{node2Data=new WeakMap;addCallbacks(e,n){if(!n)return;this.node2DescendantCallbacks.has(e)||this.node2DescendantCallbacks.set(e,{});let o=this.node2DescendantCallbacks.get(e);D(o,n);let i=this.node2Data.get(e);k(o,i)}setDataRecord(e,n){n&&this.node2Data.set(e,n)}resolveCallbacks(e,n){let o=(l,f)=>{if(k(f,this.node2Data.get(l)),!!Object.keys(f).length){if(!l.parentElement){this.node2DescendantCallbacks.has(l)||this.node2DescendantCallbacks.set(l,{});let m=this.node2DescendantCallbacks.get(l);m&&D(m,f);return}o(l.parentElement,f)}},i=this.node2DescendantCallbacks.get(n);i&&o(e,i)}node2DescendantCallbacks=new WeakMap};function k(t,e){for(let n in e)if(n in t){for(let o of t[n])o(e[n]);delete t[n]}}var s=new b;function H(t,e){s.setDataRecord(t,e)}function O(t){if(!t)return;let e={};for(let n in t){let o=t[n];e[n]=[o]}if(Object.keys(e).length)return e}function D(t,e){for(let n in e)t[n]||(t[n]=[]),t[n].push(...e[n])}function C(t,e){if(!t)return;let n=s.node2Data.get(t);return n&&e in n?n[e]:C(t.parentElement,e)}function y(t,e){if(typeof e=="string")return P(t,e);s.addCallbacks(t,O(e))}function P(t,e){return new Promise(n=>{let o=C(t,e);o!==void 0?n(o):s.addCallbacks(t,{[e]:[n]})})}function j(t,e=n=>n){return new T(t,e)}var T=class{constructor(e,n){this.key=e;this.map=n}};var c=class{next=null;firstNode=null};var d=class{#t;constructor(e){this.#t=e}get=()=>this.#t;set(e){this.#t=e,this.#n("change")}#n(e){this.#e.dispatchEvent(new Event(e))}#e=new EventTarget;on(e,n){this.#e.addEventListener(e,n)}};function z(t,e){return typeof e=="function"?Array.isArray(t)?R(t,e):R([t],()=>e(t.get())):new d(t)}function R(t,e){let n=new d(e()),o=()=>{n.set(e())};for(let i of t)i.on("change",o);return n}function B(t,e){let n=q(e);K(n);for(let o of n)V(t,o)}function V(t,e){e instanceof c?e.run(t):(s.resolveCallbacks(t,e),t.appendChild(e))}function q(t){return t.map(e=>{if(typeof e=="string"||e instanceof d){let n=document.createTextNode("");return h(e,o=>{n.textContent=o}),n}return e})}function K(t){for(let e=0;e<t.length;e++){let n=t[e];n instanceof c&&(n.next=t[e+1]??null)}}function F(t){let e=t.next;return e===null?null:e instanceof Node?e:e.firstNode?e.firstNode:F(e)}function g(t){let e=F(t);return e?.parentElement?e:null}function h(t,e){if(typeof t=="string")e(t);else if(t instanceof d){let n=()=>{e(t.get())};n(),t.on("change",n)}else e(t)}function x(t,e,n){e instanceof T?y(t,{[e.key]:o=>{let l=o instanceof d?z([o],()=>e.map(o.get())):e.map(o);h(l,n)}}):h(e,n)}function G(t,e){e!==void 0&&x(t,e,n=>{t.innerHTML=n})}function A(t,e){e!==void 0&&x(t,e,n=>{t.textContent=n})}function U(t,e){let n=t.style;if(n instanceof CSSStyleDeclaration)for(let o in e){let i=e[o];x(t,i,l=>n.setProperty(o,l))}}function W(t,e){for(let n in e){let o=e[n];x(t,o,i=>{i?t.setAttribute(n,i):t.removeAttribute(n)})}}function Q(t,e){for(let n in e){let o=e[n];x(t,o,i=>{t[n]=i})}}function _(t,e){for(let n in e){let o=t.querySelector(n);o&&w(o,e[n])}}function J(t,e){for(let n in e){let o=t.querySelectorAll(n);for(let i of o)w(i,e[n])}}function X(t,e){for(let n in e){let i=e[n];i&&(typeof i=="function"?t.addEventListener(n,i):i instanceof T?y(t,{[i.key]:l=>{let f=i.map(l);t.addEventListener(n,f)}}):t.addEventListener(n,i.listener,i.options))}}function w(t,e){t&&(typeof e=="string"||e instanceof d?A(t,e):Array.isArray(e)?B(t,e):typeof e=="function"?e(t):(G(t,e.html),A(t,e.text),W(t,e.attr),Q(t,e.prop),U(t,e.css),_(t,e.$),J(t,e.$$),X(t,e.on),H(t,e.data)))}function v(t,...e){let n=typeof t=="string"?document.querySelector(t):t;for(let o of e)w(n,o);return n}function yt(t,...e){let n=document.createElementNS("http://www.w3.org/2000/svg",t);return v(n,...e)}function r(t,...e){let n=document.createElement(t);return v(n,...e),n}function ht(t,...e){let n=L({html:t}).children[0];return v(n,...e)}function bt(...t){return r("h1",...t)}function Ct(...t){return r("h2",...t)}function wt(...t){return r("h3",...t)}function Lt(...t){return r("h4",...t)}function Nt(...t){return r("h5",...t)}function Mt(...t){return r("h6",...t)}function It(...t){return r("p",...t)}function kt(...t){return r("section",...t)}function Dt(...t){return r("button",...t)}function Ht(...t){return r("span",...t)}function Rt(t){function e(n,o){return`${n} {${Object.keys(o).map(i=>`${i}: ${o[i]};`).join("")}}`}return r("style",[Object.keys(t).map(n=>e(n,t[n])).join("")])}function L(...t){return r("div",...t)}function zt(...t){return L({css:{display:"flex"}},...t)}function Bt(...t){return r("input",...t)}function Ft(...t){return r("textarea",...t)}function At(...t){return r("select",...t)}function $t(...t){return r("option",...t)}function Ot(...t){return r("br",...t)}function Pt(...t){return r("th",...t)}function jt(...t){return r("tr",...t)}function Vt(...t){return r("td",...t)}function qt(...t){return r("b",...t)}function Kt(...t){return r("label",...t)}function Gt(...t){return r("a",...t)}function Ut(...t){return r("blockquote",...t)}function Wt(...t){return r("li",...t)}function Qt(...t){return r("ol",...t)}function _t(...t){return r("ul",...t)}function Jt(...t){return r("audio",...t)}function Xt(...t){return r("video",...t)}function Yt(...t){return r("img",...t)}function Zt(...t){return r("canvas",...t)}function te(...t){return r("iframe",...t)}function ee(...t){return r("form",...t)}function ne(...t){return r("table",...t)}function oe(...t){return r("tbody",...t)}function ie(...t){return r("hr",...t)}function re(...t){return r("main",...t)}function Y(t,e){return new N(t,e)}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 f=[];for(let a of this.list.get())o.has(a)||f.push(a);let m=[],u=new Set(this.list.get());for(let a of i.keys()){let p=i.get(a);p&&!u.has(p)&&m.push(a)}for(let a of f){let p=this.map(a),S=typeof p=="string"?document.createTextNode(p):p;s.resolveCallbacks(n,S),i.set(S,a),o.set(a,S)}for(let a of m){a.parentNode?.removeChild(a);let p=i.get(a);i.delete(a),p&&o.delete(p)}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(t,e,n){return new M(t,e,n)}var M=class extends c{#t;#n;#e;constructor(e,n,o){super(),this.#t=e,this.#n=n,this.#e=o}run(e){let n,o,i=()=>{let l=g(this);this.#t.get()?(n||(n=this.#n()),s.resolveCallbacks(e,n),this.firstNode=n,o?.remove(),e.insertBefore(n,l)):(o||(o=this.#e?.()),o&&s.resolveCallbacks(e,o),this.firstNode=o??null,n?.remove(),o&&e.insertBefore(o,l))};i(),this.#t.on("change",i)}};function $(t,e,n){return Array.isArray(e)?new I(t,e,n):$(t,Object.keys(e).map(o=>({case:o,show:e[o]})),n)}var I=class extends c{#t;#n;#e;constructor(e,n,o){super(),this.#t=e,this.#n=n,this.#e=o}run(e){let n=new Map,o=new Map;for(let u of this.#n)o.set(u.case,u);let i,l,f=u=>{let E=o.get(u);if(E){if(!n.has(u)){let a=E.show();n.set(u,a)}return n.get(u)}return this.#e&&!l&&(l=this.#e()),l},m=()=>{let u=this.#t.get(),E=g(this),a=f(u);a&&s.resolveCallbacks(e,a),i?.remove(),a&&e.insertBefore(a,E),i=a};m(),this.#t.on("change",m)}};export{c as ControlFlow,zt as FlexDiv,Y as For,r as Html,Z as If,v as Modify,d as State,yt as Svg,$ as Switch,ht as Tag,Gt as a,h as applyStringOrState,Jt as audio,qt as b,Ut as blockquote,Ot as br,Dt as button,Zt as canvas,L as div,C as findData,ee as form,bt as h1,Ct as h2,wt as h3,Lt as h4,Nt as h5,Mt as h6,ie as hr,te as iframe,Yt as img,Bt as input,Kt as label,Wt as li,re as main,Qt as ol,$t as option,It as p,kt as section,At as select,Ht as span,Rt as style,ne as table,oe as tbody,Vt as td,Ft as textarea,Pt as th,jt as tr,_t as ul,j as useBinding,z as useState,Xt as video,y as waitForData};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tagu-tagu",
-	"version": "3.4.2",
+	"version": "3.4.3",
 	"description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
 	"keywords": [
 		"front-end",

package/src/Elements.ts

@@ -86,6 +86,12 @@ export function br(...initializers: ElementInitializer<HTMLBRElement>[]) {
 	return Html("br", ...initializers);
 }
 
+export function th(
+	...initializers: ElementInitializer<HTMLTableCellElement>[]
+) {
+	return Html("th", ...initializers);
+}
+
 export function tr(...initializers: ElementInitializer<HTMLTableRowElement>[]) {
 	return Html("tr", ...initializers);
 }
@@ -167,3 +173,7 @@ export function tbody(
 export function hr(...initializers: ElementInitializer<HTMLHRElement>[]) {
 	return Html("hr", ...initializers);
 }
+
+export function main(...initializers: ElementInitializer<HTMLElement>[]) {
+	return Html("main", ...initializers);
+}