tagu-tagu 3.2.2 → 3.2.4
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 +177 -0
- package/dist/bundle.min.js +1 -1
- package/package.json +1 -1
- package/src/Modify.ts +3 -1
package/README.md
CHANGED
|
@@ -72,6 +72,183 @@ Modify(document.body, {
|
|
|
72
72
|
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
+
#### `html` initializer
|
|
76
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/6p9jh45L/2/)
|
|
77
|
+
```typescript
|
|
78
|
+
import { div } from "tagu-tagu";
|
|
79
|
+
|
|
80
|
+
// Element: innerHTML
|
|
81
|
+
function HtmlExample() {
|
|
82
|
+
return div({ html: `<button>Hello World!</button>` });
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
document.body.appendChild(HtmlExample());
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
#### `css` initializer
|
|
90
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/mfLutvnc/1/)
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
import { button } from "tagu-tagu";
|
|
94
|
+
|
|
95
|
+
// element.style.setProperty
|
|
96
|
+
function CssExample() {
|
|
97
|
+
return button({
|
|
98
|
+
css: { width: "300px", height: "300px" },
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
document.body.appendChild(CssExample());
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
#### `attr` initializer
|
|
106
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/r8a423pw/1/)
|
|
107
|
+
|
|
108
|
+
```typescript
|
|
109
|
+
import { input } from "tagu-tagu";
|
|
110
|
+
|
|
111
|
+
// Element: setAttribute
|
|
112
|
+
function AttrExample() {
|
|
113
|
+
return input({
|
|
114
|
+
attr: { type: "color" },
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
document.body.appendChild(AttrExample());
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
#### `prop` initializer
|
|
122
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/mc38ksqw/1/)
|
|
123
|
+
|
|
124
|
+
```typescript
|
|
125
|
+
import { option, select } from "tagu-tagu";
|
|
126
|
+
|
|
127
|
+
// Element: setAttribute
|
|
128
|
+
function AttrExample() {
|
|
129
|
+
return select([option("One"), option("Two"), option("Three")], {
|
|
130
|
+
prop: { selectedIndex: 1 },
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
document.body.appendChild(AttrExample());
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
#### `on` initializer
|
|
138
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/Lsjmw263/)
|
|
139
|
+
```typescript
|
|
140
|
+
import { button } from "tagu-tagu";
|
|
141
|
+
|
|
142
|
+
// Element: addEventListener
|
|
143
|
+
function OnExample() {
|
|
144
|
+
return button("Click Me", { on: { click: () => alert("Hello!") } });
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
document.body.appendChild(OnExample());
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
#### `$` initializer
|
|
151
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/b8roj7wx/1/)
|
|
152
|
+
```html
|
|
153
|
+
<form>
|
|
154
|
+
<div>Name: <input id="name"></div>
|
|
155
|
+
<div>Age: <input id="age"></div>
|
|
156
|
+
<button id="submit">Submit</button>
|
|
157
|
+
</form>
|
|
158
|
+
<script type="module" src="index.ts"></script>
|
|
159
|
+
```
|
|
160
|
+
```typescript
|
|
161
|
+
import { Modify, style } from "tagu-tagu";
|
|
162
|
+
|
|
163
|
+
// Element: querySelector
|
|
164
|
+
function $Example() {
|
|
165
|
+
Modify("form", {
|
|
166
|
+
$: {
|
|
167
|
+
"#name": { prop: { defaultValue: "Einstein" } },
|
|
168
|
+
"#age": { attr: { type: "number" }, prop: { defaultValue: 26 } },
|
|
169
|
+
"#submit": [
|
|
170
|
+
style({
|
|
171
|
+
"#submit": {
|
|
172
|
+
background: "blue",
|
|
173
|
+
color: "white",
|
|
174
|
+
border: "none",
|
|
175
|
+
"border-radius": "10px",
|
|
176
|
+
},
|
|
177
|
+
"#submit:hover": {
|
|
178
|
+
background: "skyblue",
|
|
179
|
+
},
|
|
180
|
+
}),
|
|
181
|
+
],
|
|
182
|
+
},
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
$Example();
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
#### `$$` initializer
|
|
190
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/gqe5378t/1/)
|
|
191
|
+
```html
|
|
192
|
+
<meta charset="utf-8">
|
|
193
|
+
<div>
|
|
194
|
+
<h1>Unfertilized Eggs</h1>
|
|
195
|
+
<button>🥚</button>
|
|
196
|
+
<button>🥚</button>
|
|
197
|
+
<button>🥚</button>
|
|
198
|
+
<button>🥚</button>
|
|
199
|
+
<button>🥚</button>
|
|
200
|
+
</div>
|
|
201
|
+
<div id="fertilized">
|
|
202
|
+
<h1>Click!</h1>
|
|
203
|
+
<button>🥚</button>
|
|
204
|
+
<button>🥚</button>
|
|
205
|
+
<button>🥚</button>
|
|
206
|
+
<button>🥚</button>
|
|
207
|
+
<button>🥚</button>
|
|
208
|
+
</div>
|
|
209
|
+
<script type="module" src="index.ts"></script>
|
|
210
|
+
```
|
|
211
|
+
```typescript
|
|
212
|
+
import { Modify } from "tagu-tagu";
|
|
213
|
+
|
|
214
|
+
// Element: querySelectorAll
|
|
215
|
+
function $$Example() {
|
|
216
|
+
Modify("#fertilized", {
|
|
217
|
+
$$: {
|
|
218
|
+
button: {
|
|
219
|
+
on: {
|
|
220
|
+
click: (e) => {
|
|
221
|
+
(e.target as HTMLButtonElement).textContent = "🐣";
|
|
222
|
+
},
|
|
223
|
+
},
|
|
224
|
+
},
|
|
225
|
+
},
|
|
226
|
+
});
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
$$Example();
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
#### Callback initializer
|
|
233
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/tfj8uqa7/3/)
|
|
234
|
+
```typescript
|
|
235
|
+
import { button, div } from "tagu-tagu";
|
|
236
|
+
|
|
237
|
+
function InitializerCallbackExample() {
|
|
238
|
+
return div([
|
|
239
|
+
div([
|
|
240
|
+
div([
|
|
241
|
+
button("Deep", (button) =>
|
|
242
|
+
console.log("debug:", button, "is created!"),
|
|
243
|
+
),
|
|
244
|
+
]),
|
|
245
|
+
]),
|
|
246
|
+
]);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
document.body.appendChild(InitializerCallbackExample());
|
|
250
|
+
```
|
|
251
|
+
|
|
75
252
|
### `If`
|
|
76
253
|
|
|
77
254
|
```typescript
|
package/dist/bundle.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var S=class{node2Data=new WeakMap;addCallbacks(t,n){if(!n)return;this.node2DescendantCallbacks.has(t)||this.node2DescendantCallbacks.set(t,{});let o=this.node2DescendantCallbacks.get(t);H(o,n);let i=this.node2Data.get(t);k(o,i)}setDataRecord(t,n){n&&this.node2Data.set(t,n)}resolveCallbacks(t,n){let o=(l,
|
|
1
|
+
var S=class{node2Data=new WeakMap;addCallbacks(t,n){if(!n)return;this.node2DescendantCallbacks.has(t)||this.node2DescendantCallbacks.set(t,{});let o=this.node2DescendantCallbacks.get(t);H(o,n);let i=this.node2Data.get(t);k(o,i)}setDataRecord(t,n){n&&this.node2Data.set(t,n)}resolveCallbacks(t,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(t,i)}node2DescendantCallbacks=new WeakMap};function k(e,t){for(let n in t)if(n in e){for(let o of e[n])o(t[n]);delete e[n]}}var s=new S;function D(e,t){s.setDataRecord(e,t)}function A(e){if(!e)return;let t={};for(let n in e){let o=e[n];t[n]=[o]}if(Object.keys(t).length)return t}function H(e,t){for(let n in t)e[n]||(e[n]=[]),e[n].push(...t[n])}function b(e,t){if(!e)return;let n=s.node2Data.get(e);return n&&t in n?n[t]:b(e.parentElement,t)}function C(e,t){if(typeof t=="string")return O(e,t);s.addCallbacks(e,A(t))}function O(e,t){return new Promise(n=>{let o=b(e,t);o!==void 0?n(o):s.addCallbacks(e,{[t]:[n]})})}function P(e,t=n=>n){return new T(e,t)}var T=class{constructor(t,n){this.key=t;this.map=n}};var c=class{next=null;firstNode=null};var u=class{#e;constructor(t){this.#e=t}get=()=>this.#e;set(t){this.#e=t,this.#n("change")}#n(t){this.#t.dispatchEvent(new Event(t))}#t=new EventTarget;on(t,n){this.#t.addEventListener(t,n)}};function R(e,t){return typeof t=="function"?j(e,t):new u(e)}function j(e,t){let n=new u(t()),o=()=>{n.set(t())};for(let i of e)i.on("change",o);return n}function z(e,t){let n=q(t);K(n);for(let o of n)V(e,o)}function V(e,t){t instanceof c?t.run(e):(s.resolveCallbacks(e,t),e.appendChild(t))}function q(e){return e.map(t=>{if(typeof t=="string"||t instanceof u){let n=document.createTextNode("");return y(t,o=>{n.textContent=o}),n}return t})}function K(e){for(let t=0;t<e.length;t++){let n=e[t];n instanceof c&&(n.next=e[t+1]??null)}}function B(e){let t=e.next;return t===null?null:t instanceof Node?t:t.firstNode?t.firstNode:B(t)}function g(e){let t=B(e);return t?.parentElement?t:null}function y(e,t){if(typeof e=="string")t(e);else if(e instanceof u){let n=()=>{t(e.get())};n(),e.on("change",n)}else t(e)}function x(e,t,n){t instanceof T?C(e,{[t.key]:o=>{let l=o instanceof u?R([o],()=>t.map(o.get())):t.map(o);y(l,n)}}):y(t,n)}function G(e,t){t!==void 0&&x(e,t,n=>{e.innerHTML=n})}function F(e,t){t!==void 0&&x(e,t,n=>{e.textContent=n})}function U(e,t){let n=e.style;if(n instanceof CSSStyleDeclaration)for(let o in t){let i=t[o];x(e,i,l=>n.setProperty(o,l))}}function W(e,t){for(let n in t){let o=t[n];x(e,o,i=>{i?e.setAttribute(n,i):e.removeAttribute(n)})}}function Q(e,t){for(let n in t){let o=t[n];x(e,o,i=>{e[n]=i})}}function _(e,t){for(let n in t){let o=e.querySelector(n);o&&w(o,t[n])}}function J(e,t){for(let n in t){let o=e.querySelectorAll(n);for(let i of o)w(i,t[n])}}function X(e,t){for(let n in t){let i=t[n];i&&(typeof i=="function"?e.addEventListener(n,i):i instanceof T?C(e,{[i.key]:l=>{let f=i.map(l);e.addEventListener(n,f)}}):e.addEventListener(n,i.listener,i.options))}}function w(e,t){e&&(typeof t=="string"||t instanceof u?F(e,t):Array.isArray(t)?z(e,t):typeof t=="function"?t(e):(G(e,t.html),F(e,t.text),W(e,t.attr),Q(e,t.prop),U(e,t.css),_(e,t.$),J(e,t.$$),X(e,t.on),D(e,t.data)))}function h(e,...t){let n=typeof e=="string"?document.querySelector(e):e;for(let o of t)w(n,o);return n}function ye(e,...t){let n=document.createElementNS("http://www.w3.org/2000/svg",e);return h(n,...t)}function r(e,...t){let n=document.createElement(e);return h(n,...t),n}function he(e,...t){let n=L({html:e}).children[0];return h(n,...t)}function be(...e){return r("h1",...e)}function Ce(...e){return r("h2",...e)}function we(...e){return r("h3",...e)}function Le(...e){return r("h4",...e)}function Ne(...e){return r("h5",...e)}function Me(...e){return r("h6",...e)}function Ie(...e){return r("p",...e)}function ke(...e){return r("section",...e)}function He(...e){return r("button",...e)}function De(...e){return r("span",...e)}function Re(e){function t(n,o){return`${n} {${Object.keys(o).map(i=>`${i}: ${o[i]};`).join("")}}`}return r("style",[Object.keys(e).map(n=>t(n,e[n])).join("")])}function L(...e){return r("div",...e)}function ze(...e){return L({css:{display:"flex"}},...e)}function Be(...e){return r("input",...e)}function Fe(...e){return r("textarea",...e)}function $e(...e){return r("select",...e)}function Ae(...e){return r("option",...e)}function Oe(...e){return r("br",...e)}function Pe(...e){return r("tr",...e)}function je(...e){return r("td",...e)}function Ve(...e){return r("b",...e)}function qe(...e){return r("label",...e)}function Ke(...e){return r("a",...e)}function Ge(...e){return r("blockquote",...e)}function Ue(...e){return r("li",...e)}function We(...e){return r("ol",...e)}function Qe(...e){return r("ul",...e)}function _e(...e){return r("audio",...e)}function Je(...e){return r("video",...e)}function Xe(...e){return r("img",...e)}function Ye(...e){return r("canvas",...e)}function Ze(...e){return r("iframe",...e)}function et(...e){return r("form",...e)}function tt(...e){return r("table",...e)}function nt(...e){return r("tbody",...e)}function ot(...e){return r("hr",...e)}function Y(e,t){return new N(e,t)}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),v=typeof p=="string"?document.createTextNode(p):p;s.resolveCallbacks(n,v),i.set(v,a),o.set(a,v)}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(e,t,n){return new M(e,t,n)}var M=class extends c{#e;#n;#t;constructor(t,n,o){super(),this.#e=t,this.#n=n,this.#t=o}run(t){let n,o,i=()=>{let l=g(this);this.#e.get()?(n||(n=this.#n()),s.resolveCallbacks(t,n),this.firstNode=n,o?.remove(),t.insertBefore(n,l)):(o||(o=this.#t?.()),o&&s.resolveCallbacks(t,o),this.firstNode=o??null,n?.remove(),o&&t.insertBefore(o,l))};i(),this.#e.on("change",i)}};function $(e,t,n){return Array.isArray(t)?new I(e,t,n):$(e,Object.keys(t).map(o=>({case:o,show:t[o]})),n)}var I=class extends c{#e;#n;#t;constructor(t,n,o){super(),this.#e=t,this.#n=n,this.#t=o}run(t){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.#t&&!l&&(l=this.#t()),l},m=()=>{let d=this.#e.get(),E=g(this),a=f(d);a&&s.resolveCallbacks(t,a),i?.remove(),a&&t.insertBefore(a,E),i=a};m(),this.#e.on("change",m)}};export{c as ControlFlow,ze as FlexDiv,Y as For,r as Html,Z as If,h as Modify,u as State,ye as Svg,$ as Switch,he as Tag,Ke as a,y as applyStringOrState,_e as audio,Ve as b,Ge as blockquote,Oe as br,He as button,Ye as canvas,L as div,b as findData,et as form,be as h1,Ce as h2,we as h3,Le as h4,Ne as h5,Me as h6,ot as hr,Ze as iframe,Xe as img,Be as input,qe as label,Ue as li,We as ol,Ae as option,Ie as p,ke as section,$e as select,De as span,Re as style,tt as table,nt as tbody,je as td,Fe as textarea,Pe as tr,Qe as ul,P as useBinding,R as useState,Je as video};
|
package/package.json
CHANGED
package/src/Modify.ts
CHANGED
|
@@ -51,12 +51,14 @@ export function applyStringOrState(
|
|
|
51
51
|
) {
|
|
52
52
|
if (typeof value === "string") {
|
|
53
53
|
initialize(value);
|
|
54
|
-
} else {
|
|
54
|
+
} else if (value instanceof State) {
|
|
55
55
|
const update = () => {
|
|
56
56
|
initialize(value.get());
|
|
57
57
|
};
|
|
58
58
|
update();
|
|
59
59
|
value.on("change", update);
|
|
60
|
+
} else {
|
|
61
|
+
initialize(value);
|
|
60
62
|
}
|
|
61
63
|
}
|
|
62
64
|
|