tagu-tagu 3.2.5 → 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 +45 -23
- package/dist/bundle.min.js +1 -1
- package/package.json +1 -1
- package/src/data/index.ts +1 -1
package/README.md
CHANGED
|
@@ -41,36 +41,37 @@ document.body.appendChild(CounterExample());
|
|
|
41
41
|
No need to compile. But typescript is supported.
|
|
42
42
|
|
|
43
43
|
## Examples
|
|
44
|
-
See examples [here](https://dothesimplest.github.io/tagu-tagu/).
|
|
45
|
-
|
|
46
|
-
## Features
|
|
47
44
|
|
|
48
45
|
### Initializers
|
|
49
|
-
|
|
46
|
+
Initializers are rest parameters. Arguments can be any order.
|
|
50
47
|
```typescript
|
|
51
48
|
button("Hello!", {css: {background: "blue"}});
|
|
52
49
|
button({css: {background: "blue"}}, "Hello!");
|
|
53
50
|
```
|
|
54
51
|
|
|
55
|
-
####
|
|
56
|
-
|
|
57
|
-
|
|
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
|
+
```
|
|
58
65
|
|
|
66
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/q4kzphbr/1/)
|
|
59
67
|
```typescript
|
|
60
|
-
import {
|
|
68
|
+
import { div } from "tagu-tagu";
|
|
61
69
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
background: "skyblue",
|
|
66
|
-
},
|
|
67
|
-
on: {
|
|
68
|
-
click: () => {
|
|
69
|
-
document.body.textContent = "💥";
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
});
|
|
70
|
+
function ChildExample() {
|
|
71
|
+
return div("Hello");
|
|
72
|
+
}
|
|
73
73
|
|
|
74
|
+
document.body.appendChild(ChildExample());
|
|
74
75
|
```
|
|
75
76
|
|
|
76
77
|
#### `html` initializer
|
|
@@ -120,19 +121,19 @@ document.body.appendChild(AttrExample());
|
|
|
120
121
|
```
|
|
121
122
|
|
|
122
123
|
#### `prop` initializer
|
|
123
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/mc38ksqw/
|
|
124
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/mc38ksqw/2/)
|
|
124
125
|
|
|
125
126
|
```typescript
|
|
126
127
|
import { option, select } from "tagu-tagu";
|
|
127
128
|
|
|
128
|
-
//
|
|
129
|
-
function
|
|
129
|
+
// Javascript properties
|
|
130
|
+
function PropExample() {
|
|
130
131
|
return select([option("One"), option("Two"), option("Three")], {
|
|
131
132
|
prop: { selectedIndex: 1 },
|
|
132
133
|
});
|
|
133
134
|
}
|
|
134
135
|
|
|
135
|
-
document.body.appendChild(
|
|
136
|
+
document.body.appendChild(PropExample());
|
|
136
137
|
```
|
|
137
138
|
|
|
138
139
|
#### `on` initializer
|
|
@@ -148,6 +149,27 @@ function OnExample() {
|
|
|
148
149
|
document.body.appendChild(OnExample());
|
|
149
150
|
```
|
|
150
151
|
|
|
152
|
+
#### Modify existing element
|
|
153
|
+
You can use initializers for existing element.
|
|
154
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/o87nw6zL/15/)
|
|
155
|
+
|
|
156
|
+
```typescript
|
|
157
|
+
import { Modify } from "tagu-tagu";
|
|
158
|
+
|
|
159
|
+
Modify(document.body, {
|
|
160
|
+
text: "💣",
|
|
161
|
+
css: {
|
|
162
|
+
background: "skyblue",
|
|
163
|
+
},
|
|
164
|
+
on: {
|
|
165
|
+
click: () => {
|
|
166
|
+
document.body.textContent = "💥";
|
|
167
|
+
},
|
|
168
|
+
},
|
|
169
|
+
});
|
|
170
|
+
|
|
171
|
+
```
|
|
172
|
+
|
|
151
173
|
#### `$` initializer
|
|
152
174
|
[JSFiddle](https://jsfiddle.net/do_the_simplest/b8roj7wx/1/)
|
|
153
175
|
```html
|
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";
|