tagu-tagu 3.3.1 → 3.4.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 +54 -27
- 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/)
|
|
@@ -149,6 +152,44 @@ function OnExample() {
|
|
|
149
152
|
document.body.appendChild(OnExample());
|
|
150
153
|
```
|
|
151
154
|
|
|
155
|
+
#### `data` initializer
|
|
156
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/9cLtyzkm/1/)
|
|
157
|
+
|
|
158
|
+
```typescript
|
|
159
|
+
import { div, waitForData } from "tagu-tagu";
|
|
160
|
+
|
|
161
|
+
function DataExample() {
|
|
162
|
+
return div({ data: { "my-data-key": "Hello World!" } });
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
const element = DataExample();
|
|
166
|
+
console.log(await waitForData(element, "my-data-key")); // Hello World!
|
|
167
|
+
```
|
|
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
|
+
|
|
152
193
|
#### Modify existing element
|
|
153
194
|
You can use initializers for existing element.
|
|
154
195
|
[JSFiddle](https://jsfiddle.net/do_the_simplest/o87nw6zL/15/)
|
|
@@ -170,6 +211,7 @@ Modify(document.body, {
|
|
|
170
211
|
|
|
171
212
|
```
|
|
172
213
|
|
|
214
|
+
|
|
173
215
|
#### `$` initializer
|
|
174
216
|
[JSFiddle](https://jsfiddle.net/do_the_simplest/b8roj7wx/1/)
|
|
175
217
|
```html
|
|
@@ -271,23 +313,8 @@ function InitializerCallbackExample() {
|
|
|
271
313
|
|
|
272
314
|
document.body.appendChild(InitializerCallbackExample());
|
|
273
315
|
```
|
|
274
|
-
|
|
275
|
-
#### Data initializer
|
|
276
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/9cLtyzkm/1/)
|
|
277
|
-
|
|
278
|
-
```typescript
|
|
279
|
-
import { div, waitForData } from "tagu-tagu";
|
|
280
|
-
|
|
281
|
-
function DataExample() {
|
|
282
|
-
return div({ data: { "my-data-key": "Hello World!" } });
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
const element = DataExample();
|
|
286
|
-
console.log(await waitForData(element, "my-data-key")); // Hello World!
|
|
287
|
-
```
|
|
288
|
-
|
|
289
316
|
### `If`
|
|
290
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/bxuqsh1d/
|
|
317
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/bxuqsh1d/20/)
|
|
291
318
|
|
|
292
319
|
```typescript
|
|
293
320
|
import { div, If, input, span, useState } from "tagu-tagu";
|
|
@@ -301,7 +328,7 @@ function IfExample() {
|
|
|
301
328
|
|
|
302
329
|
return div([
|
|
303
330
|
input({
|
|
304
|
-
attr: { type: "checkbox"
|
|
331
|
+
attr: { type: "checkbox" },
|
|
305
332
|
on: { click: toggle },
|
|
306
333
|
}),
|
|
307
334
|
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.0",
|
|
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
|
}
|