tagu-tagu 3.2.6 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -1
- package/dist/bundle.min.js +1 -1
- package/package.json +1 -1
- package/src/data/index.ts +1 -1
package/README.md
CHANGED
|
@@ -43,12 +43,36 @@ No need to compile. But typescript is supported.
|
|
|
43
43
|
## Examples
|
|
44
44
|
|
|
45
45
|
### Initializers
|
|
46
|
-
|
|
46
|
+
Initializers are rest parameters. Arguments can be any order.
|
|
47
47
|
```typescript
|
|
48
48
|
button("Hello!", {css: {background: "blue"}});
|
|
49
49
|
button({css: {background: "blue"}}, "Hello!");
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
+
#### Children initializer
|
|
53
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/hx9mn4rg/1/)
|
|
54
|
+
```typescript
|
|
55
|
+
import { button, div, h1 } from "tagu-tagu";
|
|
56
|
+
|
|
57
|
+
// Element: append
|
|
58
|
+
function ChildrenExample() {
|
|
59
|
+
return div(["Hello", button("World!"), "HELLO", h1("WORLD!")]);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
document.body.appendChild(ChildrenExample());
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/q4kzphbr/1/)
|
|
67
|
+
```typescript
|
|
68
|
+
import { div } from "tagu-tagu";
|
|
69
|
+
|
|
70
|
+
function ChildExample() {
|
|
71
|
+
return div("Hello");
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
document.body.appendChild(ChildExample());
|
|
75
|
+
```
|
|
52
76
|
|
|
53
77
|
#### `html` initializer
|
|
54
78
|
[JSFiddle](https://jsfiddle.net/do_the_simplest/6p9jh45L/2/)
|
package/dist/bundle.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
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);H(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&&H(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 D(t,e){s.setDataRecord(t,e)}function A(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 H(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 O(t,e);s.addCallbacks(t,A(e))}function O(t,e){return new Promise(n=>{let o=C(t,e);o!==void 0?n(o):s.addCallbacks(t,{[e]:[n]})})}function P(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 R(t,e){return typeof e=="function"?j(t,e):new u(t)}function j(t,e){let n=new u(e()),o=()=>{n.set(e())};for(let i of t)i.on("change",o);return n}function z(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 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 B(t){let e=t.next;return e===null?null:e instanceof Node?e:e.firstNode?e.firstNode:B(e)}function g(t){let e=B(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 x(t,e,n){e instanceof T?y(t,{[e.key]:o=>{let l=o instanceof u?R([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 F(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 u?F(t,e):Array.isArray(e)?z(t,e):typeof e=="function"?e(t):(G(t,e.html),F(t,e.text),W(t,e.attr),Q(t,e.prop),U(t,e.css),_(t,e.$),J(t,e.$$),X(t,e.on),D(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 Ht(...t){return r("button",...t)}function Dt(...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 $t(...t){return r("select",...t)}function At(...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,l=()=>{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;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 d of this.#n)o.set(d.case,d);let i,l,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&&!l&&(l=this.#e()),l},m=()=>{let d=this.#t.get(),E=g(this),a=f(d);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,u as State,yt 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,Ht 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,At as option,It as p,kt as section,$t as select,Dt as span,Rt as style,ee as table,ne as tbody,jt as td,Ft as textarea,Pt as tr,Qt as ul,P as useBinding,R as useState,Jt as video,y as waitForData};
|
package/package.json
CHANGED
package/src/data/index.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { findData } from "./data";
|
|
1
|
+
export { findData, waitForData } from "./data";
|
|
2
2
|
export { useBinding } from "./useBinding";
|