tagu-tagu 3.4.1 → 3.4.3
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 +103 -21
- package/dist/bundle.min.js +1 -1
- package/package.json +1 -1
- package/src/Elements.ts +10 -0
package/README.md
CHANGED
|
@@ -44,26 +44,43 @@ No need to compile. But typescript is supported.
|
|
|
44
44
|
## Examples
|
|
45
45
|
|
|
46
46
|
### Initializers
|
|
47
|
-
|
|
47
|
+
Elements are initialized by rest parameters. Arguments can be any order.
|
|
48
|
+
|
|
48
49
|
```typescript
|
|
49
50
|
button("Hello!", {css: {background: "blue"}});
|
|
50
51
|
button({css: {background: "blue"}}, "Hello!");
|
|
51
52
|
```
|
|
52
53
|
|
|
53
|
-
####
|
|
54
|
+
#### text initializer
|
|
54
55
|
|
|
55
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/q4kzphbr/1/)
|
|
56
56
|
```typescript
|
|
57
57
|
import { div } from "tagu-tagu";
|
|
58
58
|
|
|
59
|
-
function
|
|
59
|
+
function SimpleTextExample() {
|
|
60
60
|
return div("Hello");
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
document.body.appendChild(
|
|
63
|
+
document.body.appendChild(SimpleTextExample());
|
|
64
64
|
```
|
|
65
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/q4kzphbr/2/)
|
|
66
|
+
|
|
67
|
+
or
|
|
68
|
+
|
|
69
|
+
```typescript
|
|
70
|
+
import { div } from "tagu-tagu";
|
|
71
|
+
|
|
72
|
+
// Element: textContent
|
|
73
|
+
function TextExample() {
|
|
74
|
+
return div({ text: "Hello" });
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
document.body.appendChild(TextExample());
|
|
78
|
+
```
|
|
79
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/yqda3rhp/9/)
|
|
80
|
+
|
|
81
|
+
#### Children initializer
|
|
82
|
+
|
|
65
83
|
|
|
66
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/hx9mn4rg/1/)
|
|
67
84
|
```typescript
|
|
68
85
|
import { button, div, h1 } from "tagu-tagu";
|
|
69
86
|
|
|
@@ -75,10 +92,10 @@ function ChildrenExample() {
|
|
|
75
92
|
document.body.appendChild(ChildrenExample());
|
|
76
93
|
|
|
77
94
|
```
|
|
95
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/hx9mn4rg/1/)
|
|
78
96
|
|
|
79
97
|
|
|
80
98
|
#### `html` initializer
|
|
81
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/6p9jh45L/2/)
|
|
82
99
|
```typescript
|
|
83
100
|
import { div } from "tagu-tagu";
|
|
84
101
|
|
|
@@ -90,9 +107,9 @@ function HtmlExample() {
|
|
|
90
107
|
document.body.appendChild(HtmlExample());
|
|
91
108
|
|
|
92
109
|
```
|
|
110
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/6p9jh45L/2/)
|
|
93
111
|
|
|
94
112
|
#### `css` initializer
|
|
95
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/mfLutvnc/1/)
|
|
96
113
|
|
|
97
114
|
```typescript
|
|
98
115
|
import { button } from "tagu-tagu";
|
|
@@ -106,9 +123,9 @@ function CssExample() {
|
|
|
106
123
|
|
|
107
124
|
document.body.appendChild(CssExample());
|
|
108
125
|
```
|
|
126
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/mfLutvnc/1/)
|
|
109
127
|
|
|
110
128
|
#### `attr` initializer
|
|
111
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/r8a423pw/1/)
|
|
112
129
|
|
|
113
130
|
```typescript
|
|
114
131
|
import { input } from "tagu-tagu";
|
|
@@ -122,9 +139,9 @@ function AttrExample() {
|
|
|
122
139
|
|
|
123
140
|
document.body.appendChild(AttrExample());
|
|
124
141
|
```
|
|
142
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/r8a423pw/1/)
|
|
125
143
|
|
|
126
144
|
#### `prop` initializer
|
|
127
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/mc38ksqw/2/)
|
|
128
145
|
|
|
129
146
|
```typescript
|
|
130
147
|
import { option, select } from "tagu-tagu";
|
|
@@ -138,9 +155,9 @@ function PropExample() {
|
|
|
138
155
|
|
|
139
156
|
document.body.appendChild(PropExample());
|
|
140
157
|
```
|
|
158
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/mc38ksqw/2/)
|
|
141
159
|
|
|
142
160
|
#### `on` initializer
|
|
143
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/Lsjmw263/)
|
|
144
161
|
```typescript
|
|
145
162
|
import { button } from "tagu-tagu";
|
|
146
163
|
|
|
@@ -151,9 +168,9 @@ function OnExample() {
|
|
|
151
168
|
|
|
152
169
|
document.body.appendChild(OnExample());
|
|
153
170
|
```
|
|
171
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/Lsjmw263/)
|
|
154
172
|
|
|
155
173
|
#### `data` initializer
|
|
156
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/9cLtyzkm/1/)
|
|
157
174
|
|
|
158
175
|
```typescript
|
|
159
176
|
import { div, waitForData } from "tagu-tagu";
|
|
@@ -165,8 +182,8 @@ function DataExample() {
|
|
|
165
182
|
const element = DataExample();
|
|
166
183
|
console.log(await waitForData(element, "my-data-key")); // Hello World!
|
|
167
184
|
```
|
|
185
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/9cLtyzkm/1/)
|
|
168
186
|
|
|
169
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/eh7bdrvL/3/)
|
|
170
187
|
```typescript
|
|
171
188
|
import { div, Modify, waitForData } from "tagu-tagu";
|
|
172
189
|
|
|
@@ -189,10 +206,10 @@ function DataFromParentExample() {
|
|
|
189
206
|
|
|
190
207
|
document.body.appendChild(DataFromParentExample());
|
|
191
208
|
```
|
|
209
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/eh7bdrvL/3/)
|
|
192
210
|
|
|
193
211
|
#### Modify existing element
|
|
194
212
|
You can use initializers for existing element.
|
|
195
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/o87nw6zL/15/)
|
|
196
213
|
|
|
197
214
|
```typescript
|
|
198
215
|
import { Modify } from "tagu-tagu";
|
|
@@ -210,10 +227,10 @@ Modify(document.body, {
|
|
|
210
227
|
});
|
|
211
228
|
|
|
212
229
|
```
|
|
230
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/o87nw6zL/15/)
|
|
213
231
|
|
|
214
232
|
|
|
215
233
|
#### `$` initializer
|
|
216
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/b8roj7wx/1/)
|
|
217
234
|
```html
|
|
218
235
|
<form>
|
|
219
236
|
<div>Name: <input id="name"></div>
|
|
@@ -250,9 +267,9 @@ function $Example() {
|
|
|
250
267
|
|
|
251
268
|
$Example();
|
|
252
269
|
```
|
|
270
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/b8roj7wx/1/)
|
|
253
271
|
|
|
254
272
|
#### `$$` initializer
|
|
255
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/gqe5378t/1/)
|
|
256
273
|
```html
|
|
257
274
|
<meta charset="utf-8">
|
|
258
275
|
<div>
|
|
@@ -293,9 +310,9 @@ function $$Example() {
|
|
|
293
310
|
|
|
294
311
|
$$Example();
|
|
295
312
|
```
|
|
313
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/gqe5378t/1/)
|
|
296
314
|
|
|
297
315
|
#### Callback initializer
|
|
298
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/tfj8uqa7/3/)
|
|
299
316
|
```typescript
|
|
300
317
|
import { button, div } from "tagu-tagu";
|
|
301
318
|
|
|
@@ -313,8 +330,72 @@ function InitializerCallbackExample() {
|
|
|
313
330
|
|
|
314
331
|
document.body.appendChild(InitializerCallbackExample());
|
|
315
332
|
```
|
|
333
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/tfj8uqa7/3/)
|
|
334
|
+
|
|
335
|
+
### `State`
|
|
336
|
+
```typescript
|
|
337
|
+
import { button, div, useState } from "tagu-tagu";
|
|
338
|
+
|
|
339
|
+
function SimpleStateExample() {
|
|
340
|
+
const count = useState(0);
|
|
341
|
+
|
|
342
|
+
function incrementCount() {
|
|
343
|
+
count.set(count.get() + 1);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
return div([div(count), button("+", { on: { click: incrementCount } })]);
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
document.body.appendChild(SimpleStateExample());
|
|
350
|
+
```
|
|
351
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/j3948zpo/1/)
|
|
352
|
+
|
|
353
|
+
```typescript
|
|
354
|
+
import { button, div, useState } from "tagu-tagu";
|
|
355
|
+
|
|
356
|
+
function StateFromStateExample() {
|
|
357
|
+
const count = useState(0);
|
|
358
|
+
|
|
359
|
+
function incrementCount() {
|
|
360
|
+
count.set(count.get() + 1);
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
return div([
|
|
364
|
+
div(useState(count, (n) => (n ? n : "Zero"))),
|
|
365
|
+
button("+", { on: { click: incrementCount } }),
|
|
366
|
+
]);
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
document.body.appendChild(StateFromStateExample());
|
|
370
|
+
```
|
|
371
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/by934m81/2/)
|
|
372
|
+
|
|
373
|
+
```typescript
|
|
374
|
+
import { button, div, useState } from "tagu-tagu";
|
|
375
|
+
|
|
376
|
+
function TwoStatesFromStateExample() {
|
|
377
|
+
const count = useState(0);
|
|
378
|
+
|
|
379
|
+
function incrementCount() {
|
|
380
|
+
count.set(count.get() + 1);
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
return div([
|
|
384
|
+
div(
|
|
385
|
+
useState(count, (n) => (n ? n : "Zero")),
|
|
386
|
+
{
|
|
387
|
+
css: { color: useState(count, (n) => (n % 2 === 0 ? "blue" : "tan")) },
|
|
388
|
+
},
|
|
389
|
+
),
|
|
390
|
+
button("+", { on: { click: incrementCount } }),
|
|
391
|
+
]);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
document.body.appendChild(TwoStatesFromStateExample());
|
|
395
|
+
```
|
|
396
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/8hsuc5pn/1/)
|
|
397
|
+
|
|
316
398
|
### `If`
|
|
317
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/bxuqsh1d/21/)
|
|
318
399
|
|
|
319
400
|
```typescript
|
|
320
401
|
import { div, If, input, span, useState } from "tagu-tagu";
|
|
@@ -344,9 +425,9 @@ function IfExample() {
|
|
|
344
425
|
document.body.appendChild(IfExample());
|
|
345
426
|
|
|
346
427
|
```
|
|
428
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/bxuqsh1d/21/)
|
|
347
429
|
|
|
348
430
|
### `Switch`
|
|
349
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/vw8hrz1t/14/)
|
|
350
431
|
|
|
351
432
|
```typescript
|
|
352
433
|
import { button, div, Switch, useState } from "tagu-tagu";
|
|
@@ -374,9 +455,9 @@ function SwitchExample() {
|
|
|
374
455
|
document.body.appendChild(SwitchExample());
|
|
375
456
|
|
|
376
457
|
```
|
|
458
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/vw8hrz1t/14/)
|
|
377
459
|
|
|
378
460
|
### `For`
|
|
379
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/soLa9v6t/12/)
|
|
380
461
|
|
|
381
462
|
```typescript
|
|
382
463
|
import { button, div, For, useState } from "tagu-tagu";
|
|
@@ -408,10 +489,10 @@ function ForExample() {
|
|
|
408
489
|
document.body.appendChild(ForExample());
|
|
409
490
|
|
|
410
491
|
```
|
|
492
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/soLa9v6t/12/)
|
|
411
493
|
|
|
412
494
|
### Data binding
|
|
413
495
|
You can use data of ancestors.
|
|
414
|
-
[JSFiddle](https://jsfiddle.net/do_the_simplest/9u6oz2bc/6/)
|
|
415
496
|
|
|
416
497
|
```typescript
|
|
417
498
|
import { button, div, useBinding, useState } from "tagu-tagu";
|
|
@@ -439,6 +520,7 @@ function DataBindingExample() {
|
|
|
439
520
|
document.body.appendChild(DataBindingExample());
|
|
440
521
|
|
|
441
522
|
```
|
|
523
|
+
[JSFiddle](https://jsfiddle.net/do_the_simplest/9u6oz2bc/6/)
|
|
442
524
|
|
|
443
525
|
## Seamless migration
|
|
444
526
|
Since `tagu-tagu` is just a helper, you can migrate from anywhere.
|
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=(
|
|
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 y(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=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 d){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 d){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 d?z([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 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?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 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 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 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("th",...t)}function jt(...t){return r("tr",...t)}function Vt(...t){return r("td",...t)}function qt(...t){return r("b",...t)}function Kt(...t){return r("label",...t)}function Gt(...t){return r("a",...t)}function Ut(...t){return r("blockquote",...t)}function Wt(...t){return r("li",...t)}function Qt(...t){return r("ol",...t)}function _t(...t){return r("ul",...t)}function Jt(...t){return r("audio",...t)}function Xt(...t){return r("video",...t)}function Yt(...t){return r("img",...t)}function Zt(...t){return r("canvas",...t)}function te(...t){return r("iframe",...t)}function ee(...t){return r("form",...t)}function ne(...t){return r("table",...t)}function oe(...t){return r("tbody",...t)}function ie(...t){return r("hr",...t)}function re(...t){return r("main",...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=[],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 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 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,zt as FlexDiv,Y as For,r as Html,Z as If,v as Modify,d as State,yt as Svg,$ as Switch,ht as Tag,Gt as a,h as applyStringOrState,Jt as audio,qt as b,Ut as blockquote,Ot as br,Dt as button,Zt as canvas,L as div,C as findData,ee as form,bt as h1,Ct as h2,wt as h3,Lt as h4,Nt as h5,Mt as h6,ie as hr,te as iframe,Yt as img,Bt as input,Kt as label,Wt as li,re as main,Qt as ol,$t as option,It as p,kt as section,At as select,Ht as span,Rt as style,ne as table,oe as tbody,Vt as td,Ft as textarea,Pt as th,jt as tr,_t as ul,j as useBinding,z as useState,Xt as video,y as waitForData};
|
package/package.json
CHANGED
package/src/Elements.ts
CHANGED
|
@@ -86,6 +86,12 @@ export function br(...initializers: ElementInitializer<HTMLBRElement>[]) {
|
|
|
86
86
|
return Html("br", ...initializers);
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
+
export function th(
|
|
90
|
+
...initializers: ElementInitializer<HTMLTableCellElement>[]
|
|
91
|
+
) {
|
|
92
|
+
return Html("th", ...initializers);
|
|
93
|
+
}
|
|
94
|
+
|
|
89
95
|
export function tr(...initializers: ElementInitializer<HTMLTableRowElement>[]) {
|
|
90
96
|
return Html("tr", ...initializers);
|
|
91
97
|
}
|
|
@@ -167,3 +173,7 @@ export function tbody(
|
|
|
167
173
|
export function hr(...initializers: ElementInitializer<HTMLHRElement>[]) {
|
|
168
174
|
return Html("hr", ...initializers);
|
|
169
175
|
}
|
|
176
|
+
|
|
177
|
+
export function main(...initializers: ElementInitializer<HTMLElement>[]) {
|
|
178
|
+
return Html("main", ...initializers);
|
|
179
|
+
}
|