tagu-tagu 3.3.2 → 3.4.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 +40 -12
- package/dist/bundle.min.js +1 -1
- package/package.json +2 -3
- package/src/State.ts +8 -1
package/README.md
CHANGED
|
@@ -37,6 +37,7 @@ function CounterExample(){
|
|
|
37
37
|
|
|
38
38
|
document.body.appendChild(CounterExample());
|
|
39
39
|
```
|
|
40
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/3bysqr7t/14/)
|
|
40
41
|
|
|
41
42
|
No need to compile. But typescript is supported.
|
|
42
43
|
|
|
@@ -50,6 +51,18 @@ button({css: {background: "blue"}}, "Hello!");
|
|
|
50
51
|
```
|
|
51
52
|
|
|
52
53
|
#### Children initializer
|
|
54
|
+
|
|
55
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/q4kzphbr/1/)
|
|
56
|
+
```typescript
|
|
57
|
+
import { div } from "tagu-tagu";
|
|
58
|
+
|
|
59
|
+
function ChildExample() {
|
|
60
|
+
return div("Hello");
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
document.body.appendChild(ChildExample());
|
|
64
|
+
```
|
|
65
|
+
|
|
53
66
|
[JSFiddle](https://jsfiddle.net/do_the_simplest/hx9mn4rg/1/)
|
|
54
67
|
```typescript
|
|
55
68
|
import { button, div, h1 } from "tagu-tagu";
|
|
@@ -63,16 +76,6 @@ document.body.appendChild(ChildrenExample());
|
|
|
63
76
|
|
|
64
77
|
```
|
|
65
78
|
|
|
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
|
-
```
|
|
76
79
|
|
|
77
80
|
#### `html` initializer
|
|
78
81
|
[JSFiddle](https://jsfiddle.net/do_the_simplest/6p9jh45L/2/)
|
|
@@ -163,6 +166,30 @@ const element = DataExample();
|
|
|
163
166
|
console.log(await waitForData(element, "my-data-key")); // Hello World!
|
|
164
167
|
```
|
|
165
168
|
|
|
169
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/eh7bdrvL/3/)
|
|
170
|
+
```typescript
|
|
171
|
+
import { div, Modify, waitForData } from "tagu-tagu";
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* Node can get data from ancestors.
|
|
175
|
+
* Node can't get data from descendants.
|
|
176
|
+
* */
|
|
177
|
+
function DataFromParentExample() {
|
|
178
|
+
const parent = div();
|
|
179
|
+
const element = div({ data: { "my-data-key": "Hello World!" } });
|
|
180
|
+
const child = div();
|
|
181
|
+
waitForData(parent, "my-data-key").then(() => {
|
|
182
|
+
parent.textContent = "Parent"; // never
|
|
183
|
+
});
|
|
184
|
+
waitForData(child, "my-data-key").then(() => {
|
|
185
|
+
child.textContent = "Child"; // displayed
|
|
186
|
+
});
|
|
187
|
+
return Modify(parent, [Modify(element, [child])]);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
document.body.appendChild(DataFromParentExample());
|
|
191
|
+
```
|
|
192
|
+
|
|
166
193
|
#### Modify existing element
|
|
167
194
|
You can use initializers for existing element.
|
|
168
195
|
[JSFiddle](https://jsfiddle.net/do_the_simplest/o87nw6zL/15/)
|
|
@@ -287,7 +314,7 @@ function InitializerCallbackExample() {
|
|
|
287
314
|
document.body.appendChild(InitializerCallbackExample());
|
|
288
315
|
```
|
|
289
316
|
### `If`
|
|
290
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/bxuqsh1d/
|
|
317
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/bxuqsh1d/21/)
|
|
291
318
|
|
|
292
319
|
```typescript
|
|
293
320
|
import { div, If, input, span, useState } from "tagu-tagu";
|
|
@@ -301,7 +328,8 @@ function IfExample() {
|
|
|
301
328
|
|
|
302
329
|
return div([
|
|
303
330
|
input({
|
|
304
|
-
attr: { type: "checkbox"
|
|
331
|
+
attr: { type: "checkbox" },
|
|
332
|
+
prop: { checked: isVisible },
|
|
305
333
|
on: { click: toggle },
|
|
306
334
|
}),
|
|
307
335
|
If(isVisible, () =>
|
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);
|
|
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};
|
package/package.json
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tagu-tagu",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.1",
|
|
4
4
|
"description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"front-end",
|
|
7
7
|
"reactive",
|
|
8
8
|
"vanilla",
|
|
9
|
-
"element"
|
|
10
|
-
"framework"
|
|
9
|
+
"element"
|
|
11
10
|
],
|
|
12
11
|
"homepage": "https://github.com/DoTheSimplest/tagu-tagu#readme",
|
|
13
12
|
"bugs": {
|
package/src/State.ts
CHANGED
|
@@ -23,10 +23,17 @@ export class State<T = any> {
|
|
|
23
23
|
type StateEventType = "change";
|
|
24
24
|
|
|
25
25
|
export function useState<T>(states: State[], map: () => T): State<T>;
|
|
26
|
+
export function useState<TSrc, TDest>(
|
|
27
|
+
state: State<TSrc>,
|
|
28
|
+
map: (value: TSrc) => TDest,
|
|
29
|
+
): State<TDest>;
|
|
26
30
|
export function useState<T>(value: T): State<T>;
|
|
27
31
|
export function useState<T>(value: any, map?: any) {
|
|
28
32
|
if (typeof map === "function") {
|
|
29
|
-
|
|
33
|
+
if (Array.isArray(value)) {
|
|
34
|
+
return fromStates(value, map);
|
|
35
|
+
}
|
|
36
|
+
return fromStates([value], () => map(value.get()));
|
|
30
37
|
} else {
|
|
31
38
|
return new State<T>(value);
|
|
32
39
|
}
|