tagu-tagu 3.4.3 → 3.5.1
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 +19 -0
- package/dist/bundle.min.js +1 -1
- package/package.json +1 -1
- package/src/Modify.ts +9 -0
package/README.md
CHANGED
|
@@ -312,6 +312,25 @@ $$Example();
|
|
|
312
312
|
```
|
|
313
313
|
[JSFiddle](https://jsfiddle.net/do_the_simplest/gqe5378t/1/)
|
|
314
314
|
|
|
315
|
+
or you can use `ModifyAll`
|
|
316
|
+
|
|
317
|
+
```typescript
|
|
318
|
+
import { ModifyAll } from "tagu-tagu";
|
|
319
|
+
|
|
320
|
+
function ModifyAllExample() {
|
|
321
|
+
ModifyAll("#fertilized button", {
|
|
322
|
+
on: {
|
|
323
|
+
click: (e) => {
|
|
324
|
+
(e.target as HTMLButtonElement).textContent = "🐣";
|
|
325
|
+
},
|
|
326
|
+
},
|
|
327
|
+
});
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
ModifyAllExample();
|
|
331
|
+
```
|
|
332
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/fn10gzp4/6/)
|
|
333
|
+
|
|
315
334
|
#### Callback initializer
|
|
316
335
|
```typescript
|
|
317
336
|
import { button, div } from "tagu-tagu";
|
package/dist/bundle.min.js
CHANGED
|
@@ -1 +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=(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
|
|
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=(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 h(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=V(e);K(n);for(let o of n)q(t,o)}function q(t,e){e instanceof c?e.run(t):(s.resolveCallbacks(t,e),t.appendChild(e))}function V(t){return t.map(e=>{if(typeof e=="string"||e instanceof d){let n=document.createTextNode("");return v(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 v(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?h(t,{[e.key]:o=>{let l=o instanceof d?z([o],()=>e.map(o.get())):e.map(o);v(l,n)}}):v(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?h(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 y(t,...e){let n=typeof t=="string"?document.querySelector(t):t;for(let o of e)w(n,o);return n}function Tt(t,...e){for(let n of document.querySelectorAll(t))y(n,...e)}function ht(t,...e){let n=document.createElementNS("http://www.w3.org/2000/svg",t);return y(n,...e)}function r(t,...e){let n=document.createElement(t);return y(n,...e),n}function vt(t,...e){let n=L({html:t}).children[0];return y(n,...e)}function Ct(...t){return r("h1",...t)}function wt(...t){return r("h2",...t)}function Lt(...t){return r("h3",...t)}function Mt(...t){return r("h4",...t)}function Nt(...t){return r("h5",...t)}function It(...t){return r("h6",...t)}function kt(...t){return r("p",...t)}function Dt(...t){return r("section",...t)}function Ht(...t){return r("button",...t)}function Rt(...t){return r("span",...t)}function zt(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 Bt(...t){return L({css:{display:"flex"}},...t)}function Ft(...t){return r("input",...t)}function At(...t){return r("textarea",...t)}function $t(...t){return r("select",...t)}function Ot(...t){return r("option",...t)}function Pt(...t){return r("br",...t)}function jt(...t){return r("th",...t)}function qt(...t){return r("tr",...t)}function Vt(...t){return r("td",...t)}function Kt(...t){return r("b",...t)}function Gt(...t){return r("label",...t)}function Ut(...t){return r("a",...t)}function Wt(...t){return r("blockquote",...t)}function Qt(...t){return r("li",...t)}function _t(...t){return r("ol",...t)}function Jt(...t){return r("ul",...t)}function Xt(...t){return r("audio",...t)}function Yt(...t){return r("video",...t)}function Zt(...t){return r("img",...t)}function te(...t){return r("canvas",...t)}function ee(...t){return r("iframe",...t)}function ne(...t){return r("form",...t)}function oe(...t){return r("table",...t)}function ie(...t){return r("tbody",...t)}function re(...t){return r("hr",...t)}function ae(...t){return r("main",...t)}function Y(t,e){return new M(t,e)}var M=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 N(t,e,n)}var N=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,Bt as FlexDiv,Y as For,r as Html,Z as If,y as Modify,Tt as ModifyAll,d as State,ht as Svg,$ as Switch,vt as Tag,Ut as a,v as applyStringOrState,Xt as audio,Kt as b,Wt as blockquote,Pt as br,Ht as button,te as canvas,L as div,C as findData,ne as form,Ct as h1,wt as h2,Lt as h3,Mt as h4,Nt as h5,It as h6,re as hr,ee as iframe,Zt as img,Ft as input,Gt as label,Qt as li,ae as main,_t as ol,Ot as option,kt as p,Dt as section,$t as select,Rt as span,zt as style,oe as table,ie as tbody,Vt as td,At as textarea,jt as th,qt as tr,Jt as ul,j as useBinding,z as useState,Yt as video,h as waitForData};
|
package/package.json
CHANGED
package/src/Modify.ts
CHANGED
|
@@ -227,3 +227,12 @@ export function Modify<T extends Element>(
|
|
|
227
227
|
}
|
|
228
228
|
return element;
|
|
229
229
|
}
|
|
230
|
+
|
|
231
|
+
export function ModifyAll(
|
|
232
|
+
selector: string,
|
|
233
|
+
...initializers: ElementInitializer<Element>[]
|
|
234
|
+
) {
|
|
235
|
+
for (const element of document.querySelectorAll(selector)) {
|
|
236
|
+
Modify<Element>(element, ...initializers);
|
|
237
|
+
}
|
|
238
|
+
}
|