@ryupold/vode 0.13.2 → 1.0.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 +251 -13
- package/dist/vode.js +8 -8
- package/dist/vode.min.js +1 -1
- package/dist/vode.min.mjs +1 -1
- package/dist/vode.mjs +8 -8
- package/package.json +1 -1
- package/src/vode.ts +12 -12
package/README.md
CHANGED
|
@@ -1,16 +1,75 @@
|
|
|
1
|
-
|
|
1
|
+
# 
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
Each vode app has its own state and renders a tree of HTML elements.
|
|
5
|
-
The state is a singleton object that can be updated, and the UI will re-render when a patch object is supplied.
|
|
3
|
+
A small web framework for a minimalistic development flow. Zero dependencies, no build step except for typescript compilation, and a simple virtual DOM implementation that is easy to understand and use. Autocompletion out of the box due to binding to `lib.dom.d.ts`.
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
### ESM
|
|
8
|
+
```html
|
|
9
|
+
<!DOCTYPE html>
|
|
10
|
+
<html>
|
|
11
|
+
<head>
|
|
12
|
+
<title>ESM Example</title>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<div id="app"></div>
|
|
16
|
+
<script type="module">
|
|
17
|
+
import { app, createState, BR, DIV, INPUT, SPAN } from 'https://unpkg.com/@ryupold/vode/dist/vode.min.mjs';
|
|
18
|
+
|
|
19
|
+
const appNode = document.getElementById('app');
|
|
8
20
|
|
|
21
|
+
const state = { counter: 0 };
|
|
22
|
+
|
|
23
|
+
app(appNode, state,
|
|
24
|
+
(s) => [DIV,
|
|
25
|
+
[INPUT, {
|
|
26
|
+
type: 'button',
|
|
27
|
+
onclick: { counter: s.counter + 1 },
|
|
28
|
+
value: 'Click me',
|
|
29
|
+
}],
|
|
30
|
+
[BR],
|
|
31
|
+
[SPAN, { style: { color: 'red' } }, `${s.counter}`],
|
|
32
|
+
]
|
|
33
|
+
);
|
|
34
|
+
</script>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
9
37
|
```
|
|
10
|
-
|
|
38
|
+
|
|
39
|
+
### Classic
|
|
40
|
+
Binds the library to the global `V` variable.
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<!DOCTYPE html>
|
|
44
|
+
<html>
|
|
45
|
+
<head>
|
|
46
|
+
<title>Classic Script Example</title>
|
|
47
|
+
<script src="https://unpkg.com/@ryupold/vode/dist/vode.min.js"></script>
|
|
48
|
+
</head>
|
|
49
|
+
<body>
|
|
50
|
+
<div id="app"></div>
|
|
51
|
+
<script>
|
|
52
|
+
var appNode = document.getElementById('app');
|
|
53
|
+
|
|
54
|
+
var state = { counter: 0 };
|
|
55
|
+
|
|
56
|
+
V.app(appNode, state,
|
|
57
|
+
(s) => ["DIV",
|
|
58
|
+
["INPUT", {
|
|
59
|
+
type: 'button',
|
|
60
|
+
onclick: { counter: s.counter + 1 },
|
|
61
|
+
value: 'Click me',
|
|
62
|
+
}
|
|
63
|
+
],
|
|
64
|
+
["BR"],
|
|
65
|
+
["SPAN", { style: { color: 'red' } }, `${s.counter}`],
|
|
66
|
+
]);
|
|
67
|
+
</script>
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
11
70
|
```
|
|
12
71
|
|
|
13
|
-
|
|
72
|
+
### NPM
|
|
14
73
|
|
|
15
74
|
```bash
|
|
16
75
|
# npm
|
|
@@ -23,8 +82,6 @@ yarn add @ryupold/vode
|
|
|
23
82
|
bun add @ryupold/vode
|
|
24
83
|
```
|
|
25
84
|
|
|
26
|
-
## Usage
|
|
27
|
-
|
|
28
85
|
index.html
|
|
29
86
|
```html
|
|
30
87
|
<html>
|
|
@@ -42,16 +99,15 @@ main.ts
|
|
|
42
99
|
```ts
|
|
43
100
|
import { app, createState, BR, DIV, INPUT, SPAN } from '@ryupold/vode';
|
|
44
101
|
|
|
45
|
-
|
|
46
|
-
const init = createState({
|
|
102
|
+
const state = createState({
|
|
47
103
|
counter: 0,
|
|
48
104
|
});
|
|
49
105
|
|
|
50
|
-
type State = typeof
|
|
106
|
+
type State = typeof state;
|
|
51
107
|
|
|
52
108
|
const appNode = document.getElementById('app');
|
|
53
109
|
|
|
54
|
-
app<State>(appNode,
|
|
110
|
+
app<State>(appNode, state,
|
|
55
111
|
(s: State) => [DIV,
|
|
56
112
|
[INPUT, {
|
|
57
113
|
type: 'button',
|
|
@@ -63,3 +119,185 @@ app<State>(appNode, init,
|
|
|
63
119
|
]
|
|
64
120
|
);
|
|
65
121
|
```
|
|
122
|
+
|
|
123
|
+
## vode
|
|
124
|
+
|
|
125
|
+
A `vode` is a representation of a virtual DOM node, which is a tree structure of HTML elements. It is written as tuple:
|
|
126
|
+
|
|
127
|
+
```
|
|
128
|
+
[TAG, PROPS?, CHILDREN...]
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
As you can see, it is a simple array with the first element being the tag name, the second element being an optional properties object, and the rest being child-vodes.
|
|
132
|
+
|
|
133
|
+
### Component
|
|
134
|
+
```ts
|
|
135
|
+
type Component<S> = (s: S) => ChildVode<S>;
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
A `Component<State>` is a function that takes a state object and returns a `Vode<State>`. It is used to render the UI based on the current state.
|
|
139
|
+
|
|
140
|
+
```ts
|
|
141
|
+
// A full vode has a tag, properties, and children. props and children are optional.
|
|
142
|
+
const CompFooBar = (s) => [DIV, { class: "container" },
|
|
143
|
+
|
|
144
|
+
// a child vode can be a string, which results in a text node
|
|
145
|
+
[H1, "Hello World"],
|
|
146
|
+
|
|
147
|
+
// a vode can also be a self-closing tag
|
|
148
|
+
[BR],
|
|
149
|
+
|
|
150
|
+
// style object maps directly to the HTML style attribute
|
|
151
|
+
[P, { style: { color: "red", fontWeight: "bold" } }, "This is a paragraph."],
|
|
152
|
+
|
|
153
|
+
// class property has multiple forms
|
|
154
|
+
[UL,
|
|
155
|
+
[LI, {class: "class1 class2"}, "as string"],
|
|
156
|
+
[LI, {class: ["class1", "class2"]}, "as array"],
|
|
157
|
+
[LI, {class: {class1: true, class2: false}}, "as Record<string, boolean>"],
|
|
158
|
+
],
|
|
159
|
+
|
|
160
|
+
// events get the state object as first argument
|
|
161
|
+
// and the HTML event object as second argument
|
|
162
|
+
[BUTTON, {
|
|
163
|
+
// all on* events accept `Patch<State>`
|
|
164
|
+
onclick: (state, evt) => {
|
|
165
|
+
// objects returned by events are patched automatically
|
|
166
|
+
return { counter: state.counter + 1 };
|
|
167
|
+
},
|
|
168
|
+
|
|
169
|
+
// you can set the patch object directly for events
|
|
170
|
+
onmouseenter: { pointing: true },
|
|
171
|
+
onmouseleave: { pointing: false },
|
|
172
|
+
|
|
173
|
+
// a patch can be an async function
|
|
174
|
+
onmouseup: async (state, evt) => {
|
|
175
|
+
state.patch({ loading: true });
|
|
176
|
+
const result = await apiCall();
|
|
177
|
+
return { title: result.data.title, loading: false };
|
|
178
|
+
},
|
|
179
|
+
|
|
180
|
+
// you can also use a generator function that yields patches
|
|
181
|
+
onmousedown: async function* (state, evt) {
|
|
182
|
+
yield { loading: true };
|
|
183
|
+
const result = await apiCall();
|
|
184
|
+
yield {
|
|
185
|
+
body: result.data.body,
|
|
186
|
+
};
|
|
187
|
+
return { loading: false };
|
|
188
|
+
},
|
|
189
|
+
|
|
190
|
+
class: { bar: s.pointing }
|
|
191
|
+
}, "Click me!"],
|
|
192
|
+
];
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### app
|
|
196
|
+
|
|
197
|
+
`app` is a function that takes a HTML node, an initial state object, and a render function (`Component<State>`).
|
|
198
|
+
```ts
|
|
199
|
+
const appNode = document.getElementById('APP-ID');
|
|
200
|
+
const state = {
|
|
201
|
+
counter: 0,
|
|
202
|
+
pointing: false,
|
|
203
|
+
loading: false,
|
|
204
|
+
title: '',
|
|
205
|
+
body: '',
|
|
206
|
+
};
|
|
207
|
+
const patch = app<State>(appNode, state, (s) => CompFooBar(s));
|
|
208
|
+
```
|
|
209
|
+
It will render the initial state and update the DOM when patches are applied to the patch function or via events. All elements returned by the render function are placed under `appNode`.
|
|
210
|
+
|
|
211
|
+
You can have multiple isolated `app` instances on a page, each with its own state and render function. The returned patch function from `app` can be used to synchronize the state between them.
|
|
212
|
+
|
|
213
|
+
### state
|
|
214
|
+
The state is a singleton object that can be updated. A re-render happens when a patch object is supplied to the patch function or via event.
|
|
215
|
+
|
|
216
|
+
```js
|
|
217
|
+
// type safe way to create the state object
|
|
218
|
+
const s = {
|
|
219
|
+
counter: 0,
|
|
220
|
+
pointing: false,
|
|
221
|
+
loading: false,
|
|
222
|
+
title: 'foo',
|
|
223
|
+
body: '',
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
app(appNode, s, s => AppView(s));
|
|
227
|
+
// after calling app(), the state object is bound to the appNode
|
|
228
|
+
|
|
229
|
+
// update state directly as it is a singleton (silent patch)
|
|
230
|
+
s.title = 'Hello World';
|
|
231
|
+
|
|
232
|
+
// render patch
|
|
233
|
+
s.patch({});
|
|
234
|
+
|
|
235
|
+
// render patch with a change that is applied to the state
|
|
236
|
+
s.patch({ title: 'bar' });
|
|
237
|
+
|
|
238
|
+
// patch with a function that receives the state
|
|
239
|
+
s.patch((s) => ({body: s.body + ' baz'}));
|
|
240
|
+
|
|
241
|
+
// patch with an async function that receives the state
|
|
242
|
+
s.patch(async (s) => {
|
|
243
|
+
s.loading = true; // sometimes it is easier to combine a silent patch
|
|
244
|
+
s.patch({}); // with an empty render patch
|
|
245
|
+
const result = await apiCall();
|
|
246
|
+
return { title: result.title, body: result.body, loading: false };
|
|
247
|
+
});
|
|
248
|
+
|
|
249
|
+
// patch with a generator function that yields patches
|
|
250
|
+
s.patch(async function*(s){
|
|
251
|
+
yield { loading: true };
|
|
252
|
+
const result = await apiCall();
|
|
253
|
+
yield { title: result.title, body: result.body };
|
|
254
|
+
return { loading: false };
|
|
255
|
+
});
|
|
256
|
+
|
|
257
|
+
// ignored, also: undefined, number, string, boolean, void
|
|
258
|
+
s.patch(null);
|
|
259
|
+
|
|
260
|
+
// setting a property in a patch to undefined deletes it from the state object
|
|
261
|
+
s.patch({ pointing: undefined });
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
### memoization
|
|
265
|
+
To optimize performance, you can use `memo(Array, Component | PropsFactory)` to cache the result of a component function. This is useful when the component does not depend on the state or when the creation of the vode is expensive. You can also pass a function that returns the Props object to memoize the attributes.
|
|
266
|
+
|
|
267
|
+
```ts
|
|
268
|
+
const CompMemoFooBar = (s) => [DIV, { class: "container" },
|
|
269
|
+
[H1, "Hello World"],
|
|
270
|
+
[BR],
|
|
271
|
+
[P, "This is a paragraph."],
|
|
272
|
+
|
|
273
|
+
// expensive component to render
|
|
274
|
+
memo(
|
|
275
|
+
// this array is shallow compared to the previous render
|
|
276
|
+
[s.title, s.body],
|
|
277
|
+
// this is the component function that will be
|
|
278
|
+
// called only when the array changes
|
|
279
|
+
(s) => {
|
|
280
|
+
const list = [UL];
|
|
281
|
+
for (let i = 0; i < 1000; i++) {
|
|
282
|
+
list.push([LI, `Item ${i}`]);
|
|
283
|
+
}
|
|
284
|
+
return list;
|
|
285
|
+
},
|
|
286
|
+
)
|
|
287
|
+
];
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
### Direct access to DOM elements
|
|
291
|
+
|
|
292
|
+
Additionally to the standard HTML attributes, you can define 2 special event attributes: `onMount(State, Element)` and `onUnmount(State, Element)` in the vode props. These are called when the element is created or removed during rendering. They receive the `State` as the first argument and the DOM element as the second argument. Like the other events they can be patches too.
|
|
293
|
+
|
|
294
|
+
## Contributing
|
|
295
|
+
|
|
296
|
+
I was delighted by the simplicity of [hyperapp](https://github.com/jorgebucaran/hyperapp), which inspired me to create this library.
|
|
297
|
+
|
|
298
|
+
Not planning to add more features, just keeping it simple and easy.
|
|
299
|
+
|
|
300
|
+
But if you find bugs or have suggestions, feel free to open an [issue](https://github.com/ryupold/vode/issues) or a pull request.
|
|
301
|
+
|
|
302
|
+
## License
|
|
303
|
+
[MIT](./LICENSE)
|
package/dist/vode.js
CHANGED
|
@@ -299,7 +299,7 @@ var V = (() => {
|
|
|
299
299
|
_vode.patch(action(_vode.state));
|
|
300
300
|
} else {
|
|
301
301
|
_vode.stats.renderPatchCount++;
|
|
302
|
-
_vode.q = mergeState(_vode.q || {}, action);
|
|
302
|
+
_vode.q = mergeState(_vode.q || {}, action, false);
|
|
303
303
|
if (!_vode.isRendering) _vode.render();
|
|
304
304
|
}
|
|
305
305
|
}
|
|
@@ -313,7 +313,7 @@ var V = (() => {
|
|
|
313
313
|
_vode.isRendering = true;
|
|
314
314
|
const sw = Date.now();
|
|
315
315
|
try {
|
|
316
|
-
_vode.state = mergeState(_vode.state, _vode.q);
|
|
316
|
+
_vode.state = mergeState(_vode.state, _vode.q, true);
|
|
317
317
|
_vode.q = null;
|
|
318
318
|
_vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state));
|
|
319
319
|
} finally {
|
|
@@ -411,7 +411,7 @@ var V = (() => {
|
|
|
411
411
|
function childrenStart(vode2) {
|
|
412
412
|
return props(vode2) ? 2 : 1;
|
|
413
413
|
}
|
|
414
|
-
function mergeState(target, source) {
|
|
414
|
+
function mergeState(target, source, allowDeletion) {
|
|
415
415
|
if (!source) return target;
|
|
416
416
|
for (const key in source) {
|
|
417
417
|
const value = source[key];
|
|
@@ -423,18 +423,18 @@ var V = (() => {
|
|
|
423
423
|
} else if (value instanceof Date && targetValue !== value) {
|
|
424
424
|
target[key] = new Date(value);
|
|
425
425
|
} else {
|
|
426
|
-
if (Array.isArray(targetValue)) target[key] = mergeState({}, value);
|
|
427
|
-
else if (typeof targetValue === "object") mergeState(target[key], value);
|
|
428
|
-
else target[key] = mergeState({}, value);
|
|
426
|
+
if (Array.isArray(targetValue)) target[key] = mergeState({}, value, allowDeletion);
|
|
427
|
+
else if (typeof targetValue === "object") mergeState(target[key], value, allowDeletion);
|
|
428
|
+
else target[key] = mergeState({}, value, allowDeletion);
|
|
429
429
|
}
|
|
430
430
|
} else if (Array.isArray(value)) {
|
|
431
431
|
target[key] = [...value];
|
|
432
432
|
} else if (value instanceof Date) {
|
|
433
433
|
target[key] = new Date(value);
|
|
434
434
|
} else {
|
|
435
|
-
target[key] = mergeState({}, value);
|
|
435
|
+
target[key] = mergeState({}, value, allowDeletion);
|
|
436
436
|
}
|
|
437
|
-
} else if (value === void 0) {
|
|
437
|
+
} else if (value === void 0 && allowDeletion) {
|
|
438
438
|
delete target[key];
|
|
439
439
|
} else {
|
|
440
440
|
target[key] = value;
|
package/dist/vode.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var V=(()=>{var N=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var k=(t,o)=>{for(var n in o)N(t,n,{get:o[n],enumerable:!0})},H=(t,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of G(o))!V.call(t,e)&&e!==n&&N(t,e,{get:()=>o[e],enumerable:!(r=v(o,e))||r.enumerable});return t};var U=t=>H(N({},"__esModule",{value:!0}),t);var kn={};k(kn,{A:()=>z,ABBR:()=>Z,ADDRESS:()=>w,ANIMATE:()=>we,ANIMATEMOTION:()=>to,ANIMATETRANSFORM:()=>eo,ANNOTATION:()=>sn,ANNOTATION_XML:()=>an,AREA:()=>tt,ARTICLE:()=>et,ASIDE:()=>ot,AUDIO:()=>nt,B:()=>rt,BASE:()=>st,BDI:()=>at,BDO:()=>ct,BLOCKQUOTE:()=>it,BODY:()=>pt,BR:()=>Tt,BUTTON:()=>ft,CANVAS:()=>lt,CAPTION:()=>St,CIRCLE:()=>oo,CITE:()=>dt,CLIPPATH:()=>no,CODE:()=>gt,COL:()=>xt,COLGROUP:()=>ut,DATA:()=>yt,DATALIST:()=>Et,DD:()=>mt,DEFS:()=>ro,DEL:()=>ht,DESC:()=>so,DETAILS:()=>At,DFN:()=>Pt,DIALOG:()=>Ct,DIV:()=>Mt,DL:()=>Nt,DT:()=>Ot,ELLIPSE:()=>ao,EM:()=>Rt,EMBED:()=>Lt,FEBLEND:()=>co,FECOLORMATRIX:()=>io,FECOMPONENTTRANSFER:()=>po,FECOMPOSITE:()=>To,FECONVOLVEMATRIX:()=>fo,FEDIFFUSELIGHTING:()=>lo,FEDISPLACEMENTMAP:()=>So,FEDISTANTLIGHT:()=>go,FEDROPSHADOW:()=>xo,FEFLOOD:()=>uo,FEFUNCA:()=>yo,FEFUNCB:()=>Eo,FEFUNCG:()=>mo,FEFUNCR:()=>ho,FEGAUSSIANBLUR:()=>Ao,FEIMAGE:()=>Po,FEMERGE:()=>Co,FEMERGENODE:()=>Mo,FEMORPHOLOGY:()=>No,FEOFFSET:()=>Oo,FEPOINTLIGHT:()=>Ro,FESPECULARLIGHTING:()=>Lo,FESPOTLIGHT:()=>Do,FETILE:()=>bo,FETURBULENCE:()=>Io,FIELDSET:()=>Dt,FIGCAPTION:()=>bt,FIGURE:()=>It,FILTER:()=>Fo,FOOTER:()=>Ft,FOREIGNOBJECT:()=>vo,FORM:()=>vt,G:()=>Go,H1:()=>Gt,H2:()=>Vt,H3:()=>kt,H4:()=>Ht,H5:()=>Ut,H6:()=>jt,HEAD:()=>Bt,HEADER:()=>_t,HGROUP:()=>Kt,HR:()=>Xt,HTML:()=>qt,I:()=>Yt,IFRAME:()=>Wt,IMAGE:()=>Vo,IMG:()=>$t,INPUT:()=>Jt,INS:()=>Qt,KBD:()=>zt,LABEL:()=>Zt,LEGEND:()=>wt,LI:()=>te,LINE:()=>ko,LINEARGRADIENT:()=>Ho,LINK:()=>ee,MACTION:()=>cn,MAIN:()=>oe,MAP:()=>ne,MARK:()=>re,MARKER:()=>Uo,MASK:()=>jo,MATH:()=>pn,MENU:()=>se,MERROR:()=>Tn,META:()=>ae,METADATA:()=>Bo,METER:()=>ce,MFRAC:()=>fn,MI:()=>ln,MMULTISCRIPTS:()=>Sn,MN:()=>dn,MO:()=>gn,MOVER:()=>xn,MPADDED:()=>un,MPATH:()=>_o,MPHANTOM:()=>yn,MPRESCRIPTS:()=>En,MROOT:()=>mn,MROW:()=>hn,MS:()=>An,MSPACE:()=>Pn,MSQRT:()=>Cn,MSTYLE:()=>Mn,MSUB:()=>Nn,MSUBSUP:()=>On,MSUP:()=>Rn,MTABLE:()=>Ln,MTD:()=>Dn,MTEXT:()=>bn,MTR:()=>In,MUNDER:()=>Fn,MUNDEROVER:()=>vn,NAV:()=>ie,NOSCRIPT:()=>pe,OBJECT:()=>Te,OL:()=>fe,OPTGROUP:()=>le,OPTION:()=>Se,OUTPUT:()=>de,P:()=>ge,PATH:()=>Ko,PATTERN:()=>Xo,PICTURE:()=>xe,POLYGON:()=>qo,POLYLINE:()=>Yo,PRE:()=>ue,PROGRESS:()=>ye,Q:()=>Ee,RADIALGRADIENT:()=>Wo,RECT:()=>$o,RP:()=>me,RT:()=>he,RUBY:()=>Ae,S:()=>Pe,SAMP:()=>Ce,SCRIPT:()=>Me,SECTION:()=>Ne,SELECT:()=>Oe,SEMANTICS:()=>Gn,SET:()=>Jo,SLOT:()=>Re,SMALL:()=>Le,SOURCE:()=>De,SPAN:()=>be,STOP:()=>Qo,STRONG:()=>Ie,STYLE:()=>Fe,SUB:()=>ve,SUMMARY:()=>Ge,SUP:()=>Ve,SVG:()=>zo,SWITCH:()=>Zo,SYMBOL:()=>wo,TABLE:()=>ke,TBODY:()=>He,TD:()=>Ue,TEMPLATE:()=>je,TEXT:()=>tn,TEXTAREA:()=>Be,TEXTPATH:()=>en,TFOOT:()=>_e,TH:()=>Ke,THEAD:()=>Xe,TIME:()=>qe,TITLE:()=>Ye,TR:()=>We,TRACK:()=>$e,TSPAN:()=>on,U:()=>Je,UL:()=>Qe,USE:()=>nn,VIDEO:()=>ze,VIEW:()=>rn,WBR:()=>Ze,app:()=>K,child:()=>$,childCount:()=>W,children:()=>A,childrenStart:()=>C,createPatch:()=>B,createState:()=>j,htmlToVode:()=>Vn,memo:()=>X,mergeClass:()=>Y,props:()=>d,tag:()=>q,vode:()=>_});function j(t){return t}function B(t){return t}function _(t,o,...n){if(!t)throw new Error("tag must be a string or vode");return Array.isArray(t)?t:o?[t,o,...n]:[t,...n]}function K(t,o,n,...r){if(!t)throw new Error("container must be a valid HTMLElement");if(!o||typeof o!="object")throw new Error("initialState must be an object");if(typeof n!="function")throw new Error("dom must be a function that returns a vode");let e={};e.stats={lastRenderTime:0,renderCount:0,liveEffectCount:0,patchCount:0,renderPatchCount:0},Object.defineProperty(o,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async c=>{if(!(!c||typeof c!="function"&&typeof c!="object"))if(e.stats.patchCount++,c?.next){let l=c;e.stats.liveEffectCount++;try{let i=await l.next();for(;i.done===!1;){e.stats.liveEffectCount++;try{e.patch(i.value),i=await l.next()}finally{e.stats.liveEffectCount--}}e.patch(i.value)}finally{e.stats.liveEffectCount--}}else if(c.then){e.stats.liveEffectCount++;try{let l=await c;e.patch(l)}finally{e.stats.liveEffectCount--}}else Array.isArray(c)?typeof c[0]=="function"?c.length>1?e.patch(c[0](e.state,...c.slice(1))):e.patch(c[0](e.state)):e.stats.patchCount--:typeof c=="function"?e.patch(c(e.state)):(e.stats.renderPatchCount++,e.q=u(e.q||{},c),e.isRendering||e.render())}}),Object.defineProperty(e,"render",{enumerable:!1,configurable:!0,writable:!1,value:()=>requestAnimationFrame(()=>{if(e.isRendering||!e.q)return;e.isRendering=!0;let c=Date.now();try{e.state=u(e.state,e.q),e.q=null,e.vode=P(e.state,e.patch,t,0,e.vode,n(e.state))}finally{e.isRendering=!1,e.stats.renderCount++,e.stats.lastRenderTime=Date.now()-c,e.q&&e.render()}})}),e.patch=o.patch,e.state=o,e.q=null;let s=t;s._vode=e;let a=n(o);e.vode=a,e.vode=P(o,e.patch,t,0,void 0,a);for(let c of r)e.patch(c);return e.patch}function X(t,o){return o.__memo=t,o}function q(t){return t?Array.isArray(t)?t[0]:typeof t=="string"||t.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function d(t){if(Array.isArray(t)&&t.length>1&&t[1]&&!Array.isArray(t[1])&&typeof t[1]=="object"&&t[1].nodeType!==Node.TEXT_NODE)return t[1]}function Y(t,o){if(!t)return o;if(!o)return t;if(typeof t=="string"&&typeof o=="string"){let n=t.split(" "),r=o.split(" "),e=new Set([...n,...r]);return Array.from(e).join(" ").trim()}else if(typeof t=="string"&&Array.isArray(o)){let n=new Set([...o,...t.split(" ")]);return Array.from(n).join(" ").trim()}else if(Array.isArray(t)&&typeof o=="string"){let n=new Set([...t,...o.split(" ")]);return Array.from(n).join(" ").trim()}else if(Array.isArray(t)&&Array.isArray(o)){let n=new Set([...t,...o]);return Array.from(n).join(" ").trim()}else{if(typeof t=="string"&&typeof o=="object")return{[t]:!0,...o};if(typeof t=="object"&&typeof o=="string")return{...t,[o]:!0};if(typeof t=="object"&&typeof o=="object")return{...t,...o};if(typeof t=="object"&&Array.isArray(o)){let n={...t};for(let r of o)n[r]=!0;return n}else if(Array.isArray(t)&&typeof o=="object"){let n={};for(let r of t)n[r]=!0;for(let r of Object.keys(o))n[r]=o[r];return n}}throw new Error(`cannot merge classes of ${t} (${typeof t}) and ${o} (${typeof o})`)}function A(t){let o=C(t);return o>0?t.slice(o):null}function W(t){return t.length-C(t)}function $(t,o){return t[o+C(t)]}function C(t){return d(t)?2:1}function u(t,o){if(!o)return t;for(let n in o){let r=o[n];if(r&&typeof r=="object"){let e=t[n];e?Array.isArray(r)?t[n]=[...r]:r instanceof Date&&e!==r?t[n]=new Date(r):Array.isArray(e)?t[n]=u({},r):typeof e=="object"?u(t[n],r):t[n]=u({},r):Array.isArray(r)?t[n]=[...r]:r instanceof Date?t[n]=new Date(r):t[n]=u({},r)}else r===void 0?delete t[n]:t[n]=r}return t}function P(t,o,n,r,e,s,a){s=O(t,s,e);let c=!s||typeof s=="number"||typeof s=="boolean";if(s===e||!e&&c)return e;let l=e?.nodeType===Node.TEXT_NODE,i=l?e:e?.node;if(c){i?.onUnmount&&o(i.onUnmount(i)),i?.remove();return}let E=!c&&Q(s),m=!c&&J(s),M=!!s&&typeof s!="string"&&!!(s?.node||s?.nodeType===Node.TEXT_NODE);if(!E&&!m&&!M&&!e)throw new Error("Invalid vode: "+typeof s+" "+JSON.stringify(s));if(M&&E?s=s.wholeText:M&&m&&(s=[...s]),l&&E)return i.nodeValue!==s&&(i.nodeValue=s),e;if(E&&(!i||!l)){let T=document.createTextNode(s);return i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(T)):n.childNodes[r]?n.insertBefore(T,n.childNodes[r]):n.appendChild(T),T}if(m&&(!i||l||e[0]!==s[0])){a=a||s[0]==="svg";let T=a?document.createElementNS("http://www.w3.org/2000/svg",s[0]):document.createElement(s[0]);s.node=T;let y=s;1 in y&&(y[1]=O(t,y[1],void 0));let g=d(s);R(o,T,void 0,g,a),i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(T)):n.childNodes[r]?n.insertBefore(T,n.childNodes[r]):n.appendChild(T);let S=A(s);if(S)for(let f=0;f<S.length;f++){let p=S[f],x=P(t,o,T,f,void 0,p,a);s[g?f+2:f+1]=x}return T.onMount&&o(T.onMount(T)),s}if(!l&&m&&e[0]===s[0]){a=a||s[0]==="svg",s.node=i;let T=s,y=e,g=!1;if(T[1]?.__memo){let p=T[1];if(T[1]=O(t,T[1],y[1]),p!==T[1]){let x=d(s);R(o,i,d(e),x,a),g=!!x}}else{let p=d(s);R(o,i,d(e),p,a),g=!!p}let S=A(s),f=A(e);if(S){for(let p=0;p<S.length;p++){let x=S[p],F=f&&f[p],D=P(t,o,i,p,F,x,a);D&&(s[g?p+2:p+1]=D)}for(let p=S.length;f&&p<f.length;p++)f[p]?.node?f[p].node.remove():f[p]?.nodeType===Node.TEXT_NODE&&f[p].remove()}for(let p=S?.length||0;p<f?.length;p++)f[p]?.node?f[p].node.remove():f[p]?.nodeType===Node.TEXT_NODE&&f[p].remove();return s}}function J(t){return Array.isArray(t)&&t.length>0&&typeof t[0]=="string"}function Q(t){return typeof t=="string"||t?.nodeType===Node.TEXT_NODE}function O(t,o,n){if(typeof o!="function")return o;let r=o?.__memo,e=n?.__memo;if(Array.isArray(r)&&Array.isArray(e)&&r.length===e.length){let a=!0;for(let c=0;c<r.length;c++)if(r[c]!==e[c]){a=!1;break}if(a)return n}let s=b(o,t);return typeof s=="object"&&(s.__memo=o?.__memo),s}function b(t,o){return typeof t=="function"?b(t(o),o):t}function R(t,o,n,r,e){if(!(!r&&!n)){if(n)for(let s in n){let a=n[s],c=r?.[s];a!==c&&(r?r[s]=h(t,o,s,a,c,e):h(t,o,s,a,void 0,e))}if(r&&n){for(let s in r)if(!(s in n)){let a=r[s];r[s]=h(t,o,s,void 0,a,e)}}else if(r)for(let s in r){let a=r[s];r[s]=h(t,o,s,void 0,a,e)}}}function h(t,o,n,r,e,s){if(n==="style")if(!e)o.style.cssText="";else if(r)for(let a in{...r,...e})!r||e[a]!==r[a]?o.style[a]=e[a]:r[a]&&!e[a]&&(o.style[a]=void 0);else for(let a in e)o.style[a]=e[a];else if(n==="class")if(s)if(e){let a=L(e);o.classList.value=a}else o.classList.value="";else if(e){let a=L(e);o.className=a}else o.className="";else if(n[0]==="o"&&n[1]==="n")if(e){let a=null;if(typeof e=="function"){let c=e;a=l=>t([c,l])}else if(Array.isArray(e)){let c=e,l=e[0];c.length>1?a=()=>t([l,...c.slice(1)]):a=i=>t([l,i])}else typeof e=="object"&&(a=()=>t(e));o[n]=a}else o[n]=null;else e!=null&&e!==!1?o.setAttribute(n,e):o.removeAttribute(n);return e}function L(t){return typeof t=="string"?t:Array.isArray(t)?t.map(L).join(" "):typeof t=="object"?Object.keys(t).filter(o=>t[o]).join(" "):""}var z="a",Z="abbr",w="address",tt="area",et="article",ot="aside",nt="audio",rt="b",st="base",at="bdi",ct="bdo",it="blockquote",pt="body",Tt="br",ft="button",lt="canvas",St="caption",dt="cite",gt="code",xt="col",ut="colgroup",yt="data",Et="datalist",mt="dd",ht="del",At="details",Pt="dfn",Ct="dialog",Mt="div",Nt="dl",Ot="dt",Rt="em",Lt="embed",Dt="fieldset",bt="figcaption",It="figure",Ft="footer",vt="form",Gt="h1",Vt="h2",kt="h3",Ht="h4",Ut="h5",jt="h6",Bt="head",_t="header",Kt="hgroup",Xt="hr",qt="html",Yt="i",Wt="iframe",$t="img",Jt="input",Qt="ins",zt="kbd",Zt="label",wt="legend",te="li",ee="link",oe="main",ne="map",re="mark",se="menu",ae="meta",ce="meter",ie="nav",pe="noscript",Te="object",fe="ol",le="optgroup",Se="option",de="output",ge="p",xe="picture",ue="pre",ye="progress",Ee="q",me="rp",he="rt",Ae="ruby",Pe="s",Ce="samp",Me="script",Ne="section",Oe="select",Re="slot",Le="small",De="source",be="span",Ie="strong",Fe="style",ve="sub",Ge="summary",Ve="sup",ke="table",He="tbody",Ue="td",je="template",Be="textarea",_e="tfoot",Ke="th",Xe="thead",qe="time",Ye="title",We="tr",$e="track",Je="u",Qe="ul",ze="video",Ze="wbr",we="animate",to="animateMotion",eo="animateTransform",oo="circle",no="clipPath",ro="defs",so="desc",ao="ellipse",co="feBlend",io="feColorMatrix",po="feComponentTransfer",To="feComposite",fo="feConvolveMatrix",lo="feDiffuseLighting",So="feDisplacementMap",go="feDistantLight",xo="feDropShadow",uo="feFlood",yo="feFuncA",Eo="feFuncB",mo="feFuncG",ho="feFuncR",Ao="feGaussianBlur",Po="feImage",Co="feMerge",Mo="feMergeNode",No="feMorphology",Oo="feOffset",Ro="fePointLight",Lo="feSpecularLighting",Do="feSpotLight",bo="feTile",Io="feTurbulence",Fo="filter",vo="foreignObject",Go="g",Vo="image",ko="line",Ho="linearGradient",Uo="marker",jo="mask",Bo="metadata",_o="mpath",Ko="path",Xo="pattern",qo="polygon",Yo="polyline",Wo="radialGradient",$o="rect",Jo="set",Qo="stop",zo="svg",Zo="switch",wo="symbol",tn="text",en="textPath",on="tspan",nn="use",rn="view",sn="annotation",an="annotation-xml",cn="maction",pn="math",Tn="merror",fn="mfrac",ln="mi",Sn="mmultiscripts",dn="mn",gn="mo",xn="mover",un="mpadded",yn="mphantom",En="mprescripts",mn="mroot",hn="mrow",An="ms",Pn="mspace",Cn="msqrt",Mn="mstyle",Nn="msub",On="msubsup",Rn="msup",Ln="mtable",Dn="mtd",bn="mtext",In="mtr",Fn="munder",vn="munderover",Gn="semantics";function Vn(t){let o=document.createElement("div");o.innerHTML=t.trim();let n=[];for(let r of o.childNodes){let e=I(r);e!=null&&n.push(e)}return n}function I(t){if(t.nodeType===Node.TEXT_NODE)return t.textContent;if(t.nodeType!==Node.ELEMENT_NODE)return;let o=[t.tagName.toLowerCase()];if(t.hasAttributes()){let n={};for(let r of t.attributes)n[r.name]=r.value;o.push(n)}for(let n of t.childNodes){let r=I(n);r&&(typeof r!="string"||r.length>0)&&o.push(r)}return o}return U(kn);})();
|
|
1
|
+
"use strict";var V=(()=>{var N=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var k=(t,o)=>{for(var n in o)N(t,n,{get:o[n],enumerable:!0})},H=(t,o,n,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of G(o))!V.call(t,e)&&e!==n&&N(t,e,{get:()=>o[e],enumerable:!(s=v(o,e))||s.enumerable});return t};var U=t=>H(N({},"__esModule",{value:!0}),t);var kn={};k(kn,{A:()=>z,ABBR:()=>Z,ADDRESS:()=>w,ANIMATE:()=>we,ANIMATEMOTION:()=>to,ANIMATETRANSFORM:()=>eo,ANNOTATION:()=>sn,ANNOTATION_XML:()=>an,AREA:()=>tt,ARTICLE:()=>et,ASIDE:()=>ot,AUDIO:()=>nt,B:()=>rt,BASE:()=>st,BDI:()=>at,BDO:()=>ct,BLOCKQUOTE:()=>pt,BODY:()=>it,BR:()=>Tt,BUTTON:()=>ft,CANVAS:()=>lt,CAPTION:()=>St,CIRCLE:()=>oo,CITE:()=>dt,CLIPPATH:()=>no,CODE:()=>gt,COL:()=>xt,COLGROUP:()=>ut,DATA:()=>yt,DATALIST:()=>Et,DD:()=>mt,DEFS:()=>ro,DEL:()=>ht,DESC:()=>so,DETAILS:()=>At,DFN:()=>Pt,DIALOG:()=>Ct,DIV:()=>Mt,DL:()=>Nt,DT:()=>Ot,ELLIPSE:()=>ao,EM:()=>Rt,EMBED:()=>Lt,FEBLEND:()=>co,FECOLORMATRIX:()=>po,FECOMPONENTTRANSFER:()=>io,FECOMPOSITE:()=>To,FECONVOLVEMATRIX:()=>fo,FEDIFFUSELIGHTING:()=>lo,FEDISPLACEMENTMAP:()=>So,FEDISTANTLIGHT:()=>go,FEDROPSHADOW:()=>xo,FEFLOOD:()=>uo,FEFUNCA:()=>yo,FEFUNCB:()=>Eo,FEFUNCG:()=>mo,FEFUNCR:()=>ho,FEGAUSSIANBLUR:()=>Ao,FEIMAGE:()=>Po,FEMERGE:()=>Co,FEMERGENODE:()=>Mo,FEMORPHOLOGY:()=>No,FEOFFSET:()=>Oo,FEPOINTLIGHT:()=>Ro,FESPECULARLIGHTING:()=>Lo,FESPOTLIGHT:()=>bo,FETILE:()=>Io,FETURBULENCE:()=>Do,FIELDSET:()=>bt,FIGCAPTION:()=>It,FIGURE:()=>Dt,FILTER:()=>Fo,FOOTER:()=>Ft,FOREIGNOBJECT:()=>vo,FORM:()=>vt,G:()=>Go,H1:()=>Gt,H2:()=>Vt,H3:()=>kt,H4:()=>Ht,H5:()=>Ut,H6:()=>jt,HEAD:()=>Bt,HEADER:()=>_t,HGROUP:()=>Kt,HR:()=>Xt,HTML:()=>qt,I:()=>Yt,IFRAME:()=>Wt,IMAGE:()=>Vo,IMG:()=>$t,INPUT:()=>Jt,INS:()=>Qt,KBD:()=>zt,LABEL:()=>Zt,LEGEND:()=>wt,LI:()=>te,LINE:()=>ko,LINEARGRADIENT:()=>Ho,LINK:()=>ee,MACTION:()=>cn,MAIN:()=>oe,MAP:()=>ne,MARK:()=>re,MARKER:()=>Uo,MASK:()=>jo,MATH:()=>pn,MENU:()=>se,MERROR:()=>Tn,META:()=>ae,METADATA:()=>Bo,METER:()=>ce,MFRAC:()=>fn,MI:()=>ln,MMULTISCRIPTS:()=>Sn,MN:()=>dn,MO:()=>gn,MOVER:()=>xn,MPADDED:()=>un,MPATH:()=>_o,MPHANTOM:()=>yn,MPRESCRIPTS:()=>En,MROOT:()=>mn,MROW:()=>hn,MS:()=>An,MSPACE:()=>Pn,MSQRT:()=>Cn,MSTYLE:()=>Mn,MSUB:()=>Nn,MSUBSUP:()=>On,MSUP:()=>Rn,MTABLE:()=>Ln,MTD:()=>bn,MTEXT:()=>In,MTR:()=>Dn,MUNDER:()=>Fn,MUNDEROVER:()=>vn,NAV:()=>pe,NOSCRIPT:()=>ie,OBJECT:()=>Te,OL:()=>fe,OPTGROUP:()=>le,OPTION:()=>Se,OUTPUT:()=>de,P:()=>ge,PATH:()=>Ko,PATTERN:()=>Xo,PICTURE:()=>xe,POLYGON:()=>qo,POLYLINE:()=>Yo,PRE:()=>ue,PROGRESS:()=>ye,Q:()=>Ee,RADIALGRADIENT:()=>Wo,RECT:()=>$o,RP:()=>me,RT:()=>he,RUBY:()=>Ae,S:()=>Pe,SAMP:()=>Ce,SCRIPT:()=>Me,SECTION:()=>Ne,SELECT:()=>Oe,SEMANTICS:()=>Gn,SET:()=>Jo,SLOT:()=>Re,SMALL:()=>Le,SOURCE:()=>be,SPAN:()=>Ie,STOP:()=>Qo,STRONG:()=>De,STYLE:()=>Fe,SUB:()=>ve,SUMMARY:()=>Ge,SUP:()=>Ve,SVG:()=>zo,SWITCH:()=>Zo,SYMBOL:()=>wo,TABLE:()=>ke,TBODY:()=>He,TD:()=>Ue,TEMPLATE:()=>je,TEXT:()=>tn,TEXTAREA:()=>Be,TEXTPATH:()=>en,TFOOT:()=>_e,TH:()=>Ke,THEAD:()=>Xe,TIME:()=>qe,TITLE:()=>Ye,TR:()=>We,TRACK:()=>$e,TSPAN:()=>on,U:()=>Je,UL:()=>Qe,USE:()=>nn,VIDEO:()=>ze,VIEW:()=>rn,WBR:()=>Ze,app:()=>K,child:()=>$,childCount:()=>W,children:()=>A,childrenStart:()=>C,createPatch:()=>B,createState:()=>j,htmlToVode:()=>Vn,memo:()=>X,mergeClass:()=>Y,props:()=>d,tag:()=>q,vode:()=>_});function j(t){return t}function B(t){return t}function _(t,o,...n){if(!t)throw new Error("tag must be a string or vode");return Array.isArray(t)?t:o?[t,o,...n]:[t,...n]}function K(t,o,n,...s){if(!t)throw new Error("container must be a valid HTMLElement");if(!o||typeof o!="object")throw new Error("initialState must be an object");if(typeof n!="function")throw new Error("dom must be a function that returns a vode");let e={};e.stats={lastRenderTime:0,renderCount:0,liveEffectCount:0,patchCount:0,renderPatchCount:0},Object.defineProperty(o,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async c=>{if(!(!c||typeof c!="function"&&typeof c!="object"))if(e.stats.patchCount++,c?.next){let l=c;e.stats.liveEffectCount++;try{let p=await l.next();for(;p.done===!1;){e.stats.liveEffectCount++;try{e.patch(p.value),p=await l.next()}finally{e.stats.liveEffectCount--}}e.patch(p.value)}finally{e.stats.liveEffectCount--}}else if(c.then){e.stats.liveEffectCount++;try{let l=await c;e.patch(l)}finally{e.stats.liveEffectCount--}}else Array.isArray(c)?typeof c[0]=="function"?c.length>1?e.patch(c[0](e.state,...c.slice(1))):e.patch(c[0](e.state)):e.stats.patchCount--:typeof c=="function"?e.patch(c(e.state)):(e.stats.renderPatchCount++,e.q=u(e.q||{},c,!1),e.isRendering||e.render())}}),Object.defineProperty(e,"render",{enumerable:!1,configurable:!0,writable:!1,value:()=>requestAnimationFrame(()=>{if(e.isRendering||!e.q)return;e.isRendering=!0;let c=Date.now();try{e.state=u(e.state,e.q,!0),e.q=null,e.vode=P(e.state,e.patch,t,0,e.vode,n(e.state))}finally{e.isRendering=!1,e.stats.renderCount++,e.stats.lastRenderTime=Date.now()-c,e.q&&e.render()}})}),e.patch=o.patch,e.state=o,e.q=null;let r=t;r._vode=e;let a=n(o);e.vode=a,e.vode=P(o,e.patch,t,0,void 0,a);for(let c of s)e.patch(c);return e.patch}function X(t,o){return o.__memo=t,o}function q(t){return t?Array.isArray(t)?t[0]:typeof t=="string"||t.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function d(t){if(Array.isArray(t)&&t.length>1&&t[1]&&!Array.isArray(t[1])&&typeof t[1]=="object"&&t[1].nodeType!==Node.TEXT_NODE)return t[1]}function Y(t,o){if(!t)return o;if(!o)return t;if(typeof t=="string"&&typeof o=="string"){let n=t.split(" "),s=o.split(" "),e=new Set([...n,...s]);return Array.from(e).join(" ").trim()}else if(typeof t=="string"&&Array.isArray(o)){let n=new Set([...o,...t.split(" ")]);return Array.from(n).join(" ").trim()}else if(Array.isArray(t)&&typeof o=="string"){let n=new Set([...t,...o.split(" ")]);return Array.from(n).join(" ").trim()}else if(Array.isArray(t)&&Array.isArray(o)){let n=new Set([...t,...o]);return Array.from(n).join(" ").trim()}else{if(typeof t=="string"&&typeof o=="object")return{[t]:!0,...o};if(typeof t=="object"&&typeof o=="string")return{...t,[o]:!0};if(typeof t=="object"&&typeof o=="object")return{...t,...o};if(typeof t=="object"&&Array.isArray(o)){let n={...t};for(let s of o)n[s]=!0;return n}else if(Array.isArray(t)&&typeof o=="object"){let n={};for(let s of t)n[s]=!0;for(let s of Object.keys(o))n[s]=o[s];return n}}throw new Error(`cannot merge classes of ${t} (${typeof t}) and ${o} (${typeof o})`)}function A(t){let o=C(t);return o>0?t.slice(o):null}function W(t){return t.length-C(t)}function $(t,o){return t[o+C(t)]}function C(t){return d(t)?2:1}function u(t,o,n){if(!o)return t;for(let s in o){let e=o[s];if(e&&typeof e=="object"){let r=t[s];r?Array.isArray(e)?t[s]=[...e]:e instanceof Date&&r!==e?t[s]=new Date(e):Array.isArray(r)?t[s]=u({},e,n):typeof r=="object"?u(t[s],e,n):t[s]=u({},e,n):Array.isArray(e)?t[s]=[...e]:e instanceof Date?t[s]=new Date(e):t[s]=u({},e,n)}else e===void 0&&n?delete t[s]:t[s]=e}return t}function P(t,o,n,s,e,r,a){r=O(t,r,e);let c=!r||typeof r=="number"||typeof r=="boolean";if(r===e||!e&&c)return e;let l=e?.nodeType===Node.TEXT_NODE,p=l?e:e?.node;if(c){p?.onUnmount&&o(p.onUnmount(p)),p?.remove();return}let E=!c&&Q(r),m=!c&&J(r),M=!!r&&typeof r!="string"&&!!(r?.node||r?.nodeType===Node.TEXT_NODE);if(!E&&!m&&!M&&!e)throw new Error("Invalid vode: "+typeof r+" "+JSON.stringify(r));if(M&&E?r=r.wholeText:M&&m&&(r=[...r]),l&&E)return p.nodeValue!==r&&(p.nodeValue=r),e;if(E&&(!p||!l)){let T=document.createTextNode(r);return p?(p.onUnmount&&o(p.onUnmount(p)),p.replaceWith(T)):n.childNodes[s]?n.insertBefore(T,n.childNodes[s]):n.appendChild(T),T}if(m&&(!p||l||e[0]!==r[0])){a=a||r[0]==="svg";let T=a?document.createElementNS("http://www.w3.org/2000/svg",r[0]):document.createElement(r[0]);r.node=T;let y=r;1 in y&&(y[1]=O(t,y[1],void 0));let g=d(r);R(o,T,void 0,g,a),p?(p.onUnmount&&o(p.onUnmount(p)),p.replaceWith(T)):n.childNodes[s]?n.insertBefore(T,n.childNodes[s]):n.appendChild(T);let S=A(r);if(S)for(let f=0;f<S.length;f++){let i=S[f],x=P(t,o,T,f,void 0,i,a);r[g?f+2:f+1]=x}return T.onMount&&o(T.onMount(T)),r}if(!l&&m&&e[0]===r[0]){a=a||r[0]==="svg",r.node=p;let T=r,y=e,g=!1;if(T[1]?.__memo){let i=T[1];if(T[1]=O(t,T[1],y[1]),i!==T[1]){let x=d(r);R(o,p,d(e),x,a),g=!!x}}else{let i=d(r);R(o,p,d(e),i,a),g=!!i}let S=A(r),f=A(e);if(S){for(let i=0;i<S.length;i++){let x=S[i],F=f&&f[i],b=P(t,o,p,i,F,x,a);b&&(r[g?i+2:i+1]=b)}for(let i=S.length;f&&i<f.length;i++)f[i]?.node?f[i].node.remove():f[i]?.nodeType===Node.TEXT_NODE&&f[i].remove()}for(let i=S?.length||0;i<f?.length;i++)f[i]?.node?f[i].node.remove():f[i]?.nodeType===Node.TEXT_NODE&&f[i].remove();return r}}function J(t){return Array.isArray(t)&&t.length>0&&typeof t[0]=="string"}function Q(t){return typeof t=="string"||t?.nodeType===Node.TEXT_NODE}function O(t,o,n){if(typeof o!="function")return o;let s=o?.__memo,e=n?.__memo;if(Array.isArray(s)&&Array.isArray(e)&&s.length===e.length){let a=!0;for(let c=0;c<s.length;c++)if(s[c]!==e[c]){a=!1;break}if(a)return n}let r=I(o,t);return typeof r=="object"&&(r.__memo=o?.__memo),r}function I(t,o){return typeof t=="function"?I(t(o),o):t}function R(t,o,n,s,e){if(!(!s&&!n)){if(n)for(let r in n){let a=n[r],c=s?.[r];a!==c&&(s?s[r]=h(t,o,r,a,c,e):h(t,o,r,a,void 0,e))}if(s&&n){for(let r in s)if(!(r in n)){let a=s[r];s[r]=h(t,o,r,void 0,a,e)}}else if(s)for(let r in s){let a=s[r];s[r]=h(t,o,r,void 0,a,e)}}}function h(t,o,n,s,e,r){if(n==="style")if(!e)o.style.cssText="";else if(s)for(let a in{...s,...e})!s||e[a]!==s[a]?o.style[a]=e[a]:s[a]&&!e[a]&&(o.style[a]=void 0);else for(let a in e)o.style[a]=e[a];else if(n==="class")if(r)if(e){let a=L(e);o.classList.value=a}else o.classList.value="";else if(e){let a=L(e);o.className=a}else o.className="";else if(n[0]==="o"&&n[1]==="n")if(e){let a=null;if(typeof e=="function"){let c=e;a=l=>t([c,l])}else if(Array.isArray(e)){let c=e,l=e[0];c.length>1?a=()=>t([l,...c.slice(1)]):a=p=>t([l,p])}else typeof e=="object"&&(a=()=>t(e));o[n]=a}else o[n]=null;else e!=null&&e!==!1?o.setAttribute(n,e):o.removeAttribute(n);return e}function L(t){return typeof t=="string"?t:Array.isArray(t)?t.map(L).join(" "):typeof t=="object"?Object.keys(t).filter(o=>t[o]).join(" "):""}var z="a",Z="abbr",w="address",tt="area",et="article",ot="aside",nt="audio",rt="b",st="base",at="bdi",ct="bdo",pt="blockquote",it="body",Tt="br",ft="button",lt="canvas",St="caption",dt="cite",gt="code",xt="col",ut="colgroup",yt="data",Et="datalist",mt="dd",ht="del",At="details",Pt="dfn",Ct="dialog",Mt="div",Nt="dl",Ot="dt",Rt="em",Lt="embed",bt="fieldset",It="figcaption",Dt="figure",Ft="footer",vt="form",Gt="h1",Vt="h2",kt="h3",Ht="h4",Ut="h5",jt="h6",Bt="head",_t="header",Kt="hgroup",Xt="hr",qt="html",Yt="i",Wt="iframe",$t="img",Jt="input",Qt="ins",zt="kbd",Zt="label",wt="legend",te="li",ee="link",oe="main",ne="map",re="mark",se="menu",ae="meta",ce="meter",pe="nav",ie="noscript",Te="object",fe="ol",le="optgroup",Se="option",de="output",ge="p",xe="picture",ue="pre",ye="progress",Ee="q",me="rp",he="rt",Ae="ruby",Pe="s",Ce="samp",Me="script",Ne="section",Oe="select",Re="slot",Le="small",be="source",Ie="span",De="strong",Fe="style",ve="sub",Ge="summary",Ve="sup",ke="table",He="tbody",Ue="td",je="template",Be="textarea",_e="tfoot",Ke="th",Xe="thead",qe="time",Ye="title",We="tr",$e="track",Je="u",Qe="ul",ze="video",Ze="wbr",we="animate",to="animateMotion",eo="animateTransform",oo="circle",no="clipPath",ro="defs",so="desc",ao="ellipse",co="feBlend",po="feColorMatrix",io="feComponentTransfer",To="feComposite",fo="feConvolveMatrix",lo="feDiffuseLighting",So="feDisplacementMap",go="feDistantLight",xo="feDropShadow",uo="feFlood",yo="feFuncA",Eo="feFuncB",mo="feFuncG",ho="feFuncR",Ao="feGaussianBlur",Po="feImage",Co="feMerge",Mo="feMergeNode",No="feMorphology",Oo="feOffset",Ro="fePointLight",Lo="feSpecularLighting",bo="feSpotLight",Io="feTile",Do="feTurbulence",Fo="filter",vo="foreignObject",Go="g",Vo="image",ko="line",Ho="linearGradient",Uo="marker",jo="mask",Bo="metadata",_o="mpath",Ko="path",Xo="pattern",qo="polygon",Yo="polyline",Wo="radialGradient",$o="rect",Jo="set",Qo="stop",zo="svg",Zo="switch",wo="symbol",tn="text",en="textPath",on="tspan",nn="use",rn="view",sn="annotation",an="annotation-xml",cn="maction",pn="math",Tn="merror",fn="mfrac",ln="mi",Sn="mmultiscripts",dn="mn",gn="mo",xn="mover",un="mpadded",yn="mphantom",En="mprescripts",mn="mroot",hn="mrow",An="ms",Pn="mspace",Cn="msqrt",Mn="mstyle",Nn="msub",On="msubsup",Rn="msup",Ln="mtable",bn="mtd",In="mtext",Dn="mtr",Fn="munder",vn="munderover",Gn="semantics";function Vn(t){let o=document.createElement("div");o.innerHTML=t.trim();let n=[];for(let s of o.childNodes){let e=D(s);e!=null&&n.push(e)}return n}function D(t){if(t.nodeType===Node.TEXT_NODE)return t.textContent;if(t.nodeType!==Node.ELEMENT_NODE)return;let o=[t.tagName.toLowerCase()];if(t.hasAttributes()){let n={};for(let s of t.attributes)n[s.name]=s.value;o.push(n)}for(let n of t.childNodes){let s=D(n);s&&(typeof s!="string"||s.length>0)&&o.push(s)}return o}return U(kn);})();
|
package/dist/vode.min.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function P(f){return f}function h(f){return f}function g(f,D,...L){if(!f)throw new Error("tag must be a string or vode");if(Array.isArray(f))return f;else if(D)return[f,D,...L];else return[f,...L]}function u(f,D,L,...X){if(!f)throw new Error("container must be a valid HTMLElement");if(!D||typeof D!=="object")throw new Error("initialState must be an object");if(typeof L!=="function")throw new Error("dom must be a function that returns a vode");let E={};E.stats={lastRenderTime:0,renderCount:0,liveEffectCount:0,patchCount:0,renderPatchCount:0},Object.defineProperty(D,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(z)=>{if(!z||typeof z!=="function"&&typeof z!=="object")return;if(E.stats.patchCount++,z?.next){let Q=z;E.stats.liveEffectCount++;try{let B=await Q.next();while(B.done===!1){E.stats.liveEffectCount++;try{E.patch(B.value),B=await Q.next()}finally{E.stats.liveEffectCount--}}E.patch(B.value)}finally{E.stats.liveEffectCount--}}else if(z.then){E.stats.liveEffectCount++;try{let Q=await z;E.patch(Q)}finally{E.stats.liveEffectCount--}}else if(Array.isArray(z))if(typeof z[0]==="function")if(z.length>1)E.patch(z[0](E.state,...z.slice(1)));else E.patch(z[0](E.state));else E.stats.patchCount--;else if(typeof z==="function")E.patch(z(E.state));else if(E.stats.renderPatchCount++,E.q=$(E.q||{},z),!E.isRendering)E.render()}}),Object.defineProperty(E,"render",{enumerable:!1,configurable:!0,writable:!1,value:()=>requestAnimationFrame(()=>{if(E.isRendering||!E.q)return;E.isRendering=!0;let z=Date.now();try{E.state=$(E.state,E.q),E.q=null,E.vode=C(E.state,E.patch,f,0,E.vode,L(E.state))}finally{if(E.isRendering=!1,E.stats.renderCount++,E.stats.lastRenderTime=Date.now()-z,E.q)E.render()}})}),E.patch=D.patch,E.state=D,E.q=null;let j=f;j._vode=E;let q=L(D);E.vode=q,E.vode=C(D,E.patch,f,0,void 0,q);for(let z of X)E.patch(z);return E.patch}function c(f,D){return D.__memo=f,D}function v(f){return f?Array.isArray(f)?f[0]:typeof f==="string"||f.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function Z(f){if(Array.isArray(f)&&f.length>1&&f[1]&&!Array.isArray(f[1])){if(typeof f[1]==="object"&&f[1].nodeType!==Node.TEXT_NODE)return f[1]}return}function p(f,D){if(!f)return D;if(!D)return f;if(typeof f==="string"&&typeof D==="string"){let L=f.split(" "),X=D.split(" "),E=new Set([...L,...X]);return Array.from(E).join(" ").trim()}else if(typeof f==="string"&&Array.isArray(D)){let L=new Set([...D,...f.split(" ")]);return Array.from(L).join(" ").trim()}else if(Array.isArray(f)&&typeof D==="string"){let L=new Set([...f,...D.split(" ")]);return Array.from(L).join(" ").trim()}else if(Array.isArray(f)&&Array.isArray(D)){let L=new Set([...f,...D]);return Array.from(L).join(" ").trim()}else if(typeof f==="string"&&typeof D==="object")return{[f]:!0,...D};else if(typeof f==="object"&&typeof D==="string")return{...f,[D]:!0};else if(typeof f==="object"&&typeof D==="object")return{...f,...D};else if(typeof f==="object"&&Array.isArray(D)){let L={...f};for(let X of D)L[X]=!0;return L}else if(Array.isArray(f)&&typeof D==="object"){let L={};for(let X of f)L[X]=!0;for(let X of Object.keys(D))L[X]=D[X];return L}throw new Error(`cannot merge classes of ${f} (${typeof f}) and ${D} (${typeof D})`)}function M(f){let D=x(f);if(D>0)return f.slice(D);return null}function V(f){return f.length-x(f)}function i(f,D){return f[D+x(f)]}function x(f){return Z(f)?2:1}function $(f,D){if(!D)return f;for(let L in D){let X=D[L];if(X&&typeof X==="object"){let E=f[L];if(E)if(Array.isArray(X))f[L]=[...X];else if(X instanceof Date&&E!==X)f[L]=new Date(X);else if(Array.isArray(E))f[L]=$({},X);else if(typeof E==="object")$(f[L],X);else f[L]=$({},X);else if(Array.isArray(X))f[L]=[...X];else if(X instanceof Date)f[L]=new Date(X);else f[L]=$({},X)}else if(X===void 0)delete f[L];else f[L]=X}return f}function C(f,D,L,X,E,j,q){j=I(f,j,E);let z=!j||typeof j==="number"||typeof j==="boolean";if(j===E||!E&&z)return E;let Q=E?.nodeType===Node.TEXT_NODE,B=Q?E:E?.node;if(z){B?.onUnmount&&D(B.onUnmount(B)),B?.remove();return}let O=!z&&k(j),T=!z&&b(j),H=!!j&&typeof j!=="string"&&!!(j?.node||j?.nodeType===Node.TEXT_NODE);if(!O&&!T&&!H&&!E)throw new Error("Invalid vode: "+typeof j+" "+JSON.stringify(j));else if(H&&O)j=j.wholeText;else if(H&&T)j=[...j];if(Q&&O){if(B.nodeValue!==j)B.nodeValue=j;return E}if(O&&(!B||!Q)){let G=document.createTextNode(j);if(B)B.onUnmount&&D(B.onUnmount(B)),B.replaceWith(G);else if(L.childNodes[X])L.insertBefore(G,L.childNodes[X]);else L.appendChild(G);return G}if(T&&(!B||Q||E[0]!==j[0])){q=q||j[0]==="svg";let G=q?document.createElementNS("http://www.w3.org/2000/svg",j[0]):document.createElement(j[0]);j.node=G;let A=j;if(1 in A)A[1]=I(f,A[1],void 0);let W=Z(j);if(K(D,G,void 0,W,q),B)B.onUnmount&&D(B.onUnmount(B)),B.replaceWith(G);else if(L.childNodes[X])L.insertBefore(G,L.childNodes[X]);else L.appendChild(G);let U=M(j);if(U)for(let J=0;J<U.length;J++){let F=U[J],Y=C(f,D,G,J,void 0,F,q);j[W?J+2:J+1]=Y}return G.onMount&&D(G.onMount(G)),j}if(!Q&&T&&E[0]===j[0]){q=q||j[0]==="svg",j.node=B;let G=j,A=E,W=!1;if(G[1]?.__memo){let F=G[1];if(G[1]=I(f,G[1],A[1]),F!==G[1]){let Y=Z(j);K(D,B,Z(E),Y,q),W=!!Y}}else{let F=Z(j);K(D,B,Z(E),F,q),W=!!F}let U=M(j),J=M(E);if(U){for(let F=0;F<U.length;F++){let Y=U[F],_=J&&J[F],N=C(f,D,B,F,_,Y,q);if(N)j[W?F+2:F+1]=N}for(let F=U.length;J&&F<J.length;F++)if(J[F]?.node)J[F].node.remove();else if(J[F]?.nodeType===Node.TEXT_NODE)J[F].remove()}for(let F=U?.length||0;F<J?.length;F++)if(J[F]?.node)J[F].node.remove();else if(J[F]?.nodeType===Node.TEXT_NODE)J[F].remove();return j}return}function b(f){return Array.isArray(f)&&f.length>0&&typeof f[0]==="string"}function k(f){return typeof f==="string"||f?.nodeType===Node.TEXT_NODE}function I(f,D,L){if(typeof D!=="function")return D;let X=D?.__memo,E=L?.__memo;if(Array.isArray(X)&&Array.isArray(E)&&X.length===E.length){let q=!0;for(let z=0;z<X.length;z++)if(X[z]!==E[z]){q=!1;break}if(q)return L}let j=S(D,f);if(typeof j==="object")j.__memo=D?.__memo;return j}function S(f,D){if(typeof f==="function")return S(f(D),D);else return f}function K(f,D,L,X,E){if(!X&&!L)return;if(L)for(let j in L){let q=L[j],z=X?.[j];if(q!==z)if(X)X[j]=R(f,D,j,q,z,E);else R(f,D,j,q,void 0,E)}if(X&&L){for(let j in X)if(!(j in L)){let q=X[j];X[j]=R(f,D,j,void 0,q,E)}}else if(X)for(let j in X){let q=X[j];X[j]=R(f,D,j,void 0,q,E)}}function R(f,D,L,X,E,j){if(L==="style")if(!E)D.style.cssText="";else if(X){for(let q in{...X,...E})if(!X||E[q]!==X[q])D.style[q]=E[q];else if(X[q]&&!E[q])D.style[q]=void 0}else for(let q in E)D.style[q]=E[q];else if(L==="class")if(j)if(E){let q=m(E);D.classList.value=q}else D.classList.value="";else if(E){let q=m(E);D.className=q}else D.className="";else if(L[0]==="o"&&L[1]==="n")if(E){let q=null;if(typeof E==="function"){let z=E;q=(Q)=>f([z,Q])}else if(Array.isArray(E)){let z=E,Q=E[0];if(z.length>1)q=()=>f([Q,...z.slice(1)]);else q=(B)=>f([Q,B])}else if(typeof E==="object")q=()=>f(E);D[L]=q}else D[L]=null;else if(E!==null&&E!==void 0&&E!==!1)D.setAttribute(L,E);else D.removeAttribute(L);return E}function m(f){if(typeof f==="string")return f;else if(Array.isArray(f))return f.map(m).join(" ");else if(typeof f==="object")return Object.keys(f).filter((D)=>f[D]).join(" ");else return""}var s="a",r="abbr",l="address",t="area",n="article",a="aside",d="audio",o="b",e="base",ff="bdi",Ef="bdo",Df="blockquote",Lf="body",Xf="br",jf="button",qf="canvas",zf="caption",Bf="cite",Ff="code",Gf="col",Jf="colgroup",Qf="data",Uf="datalist",Wf="dd",Yf="del",Zf="details",$f="dfn",Af="dialog",Of="div",Tf="dl",Rf="dt",Cf="em",Hf="embed",Mf="fieldset",If="figcaption",Kf="figure",mf="footer",xf="form",Nf="h1",Sf="h2",yf="h3",_f="h4",bf="h5",kf="h6",Pf="head",hf="header",gf="hgroup",uf="hr",cf="html",vf="i",pf="iframe",Vf="img",wf="input",sf="ins",rf="kbd",lf="label",tf="legend",nf="li",af="link",df="main",of="map",ef="mark",fE="menu",EE="meta",DE="meter",LE="nav",XE="noscript",jE="object",qE="ol",zE="optgroup",BE="option",FE="output",GE="p",JE="picture",QE="pre",UE="progress",WE="q",YE="rp",ZE="rt",$E="ruby",AE="s",OE="samp",TE="script",RE="section",CE="select",HE="slot",ME="small",IE="source",KE="span",mE="strong",xE="style",NE="sub",SE="summary",yE="sup",_E="table",bE="tbody",kE="td",PE="template",hE="textarea",gE="tfoot",uE="th",cE="thead",vE="time",pE="title",VE="tr",iE="track",wE="u",sE="ul",rE="video",lE="wbr",tE="animate",nE="animateMotion",aE="animateTransform",dE="circle",oE="clipPath",eE="defs",fD="desc",ED="ellipse",DD="feBlend",LD="feColorMatrix",XD="feComponentTransfer",jD="feComposite",qD="feConvolveMatrix",zD="feDiffuseLighting",BD="feDisplacementMap",FD="feDistantLight",GD="feDropShadow",JD="feFlood",QD="feFuncA",UD="feFuncB",WD="feFuncG",YD="feFuncR",ZD="feGaussianBlur",$D="feImage",AD="feMerge",OD="feMergeNode",TD="feMorphology",RD="feOffset",CD="fePointLight",HD="feSpecularLighting",MD="feSpotLight",ID="feTile",KD="feTurbulence",mD="filter",xD="foreignObject",ND="g",SD="image",yD="line",_D="linearGradient",bD="marker",kD="mask",PD="metadata",hD="mpath",gD="path",uD="pattern",cD="polygon",vD="polyline",pD="radialGradient",VD="rect",iD="set",wD="stop",sD="svg",rD="switch",lD="symbol",tD="text",nD="textPath",aD="tspan",dD="use",oD="view",eD="annotation",fL="annotation-xml",EL="maction",DL="math",LL="merror",XL="mfrac",jL="mi",qL="mmultiscripts",zL="mn",BL="mo",FL="mover",GL="mpadded",JL="mphantom",QL="mprescripts",UL="mroot",WL="mrow",YL="ms",ZL="mspace",$L="msqrt",AL="mstyle",OL="msub",TL="msubsup",RL="msup",CL="mtable",HL="mtd",ML="mtext",IL="mtr",KL="munder",mL="munderover",xL="semantics";function SL(f){let D=document.createElement("div");D.innerHTML=f.trim();let L=[];for(let X of D.childNodes){let E=y(X);if(E!=null)L.push(E)}return L}function y(f){if(f.nodeType===Node.TEXT_NODE)return f.textContent;if(f.nodeType!==Node.ELEMENT_NODE)return;let D=[f.tagName.toLowerCase()];if(f.hasAttributes()){let L={};for(let X of f.attributes)L[X.name]=X.value;D.push(L)}for(let L of f.childNodes){let X=y(L);if(X&&(typeof X!=="string"||X.length>0))D.push(X)}return D}export{g as vode,v as tag,Z as props,p as mergeClass,c as memo,SL as htmlToVode,P as createState,h as createPatch,x as childrenStart,M as children,V as childCount,i as child,u as app,lE as WBR,oD as VIEW,rE as VIDEO,dD as USE,sE as UL,wE as U,aD as TSPAN,iE as TRACK,VE as TR,pE as TITLE,vE as TIME,cE as THEAD,uE as TH,gE as TFOOT,nD as TEXTPATH,hE as TEXTAREA,tD as TEXT,PE as TEMPLATE,kE as TD,bE as TBODY,_E as TABLE,lD as SYMBOL,rD as SWITCH,sD as SVG,yE as SUP,SE as SUMMARY,NE as SUB,xE as STYLE,mE as STRONG,wD as STOP,KE as SPAN,IE as SOURCE,ME as SMALL,HE as SLOT,iD as SET,xL as SEMANTICS,CE as SELECT,RE as SECTION,TE as SCRIPT,OE as SAMP,AE as S,$E as RUBY,ZE as RT,YE as RP,VD as RECT,pD as RADIALGRADIENT,WE as Q,UE as PROGRESS,QE as PRE,vD as POLYLINE,cD as POLYGON,JE as PICTURE,uD as PATTERN,gD as PATH,GE as P,FE as OUTPUT,BE as OPTION,zE as OPTGROUP,qE as OL,jE as OBJECT,XE as NOSCRIPT,LE as NAV,mL as MUNDEROVER,KL as MUNDER,IL as MTR,ML as MTEXT,HL as MTD,CL as MTABLE,RL as MSUP,TL as MSUBSUP,OL as MSUB,AL as MSTYLE,$L as MSQRT,ZL as MSPACE,YL as MS,WL as MROW,UL as MROOT,QL as MPRESCRIPTS,JL as MPHANTOM,hD as MPATH,GL as MPADDED,FL as MOVER,BL as MO,zL as MN,qL as MMULTISCRIPTS,jL as MI,XL as MFRAC,DE as METER,PD as METADATA,EE as META,LL as MERROR,fE as MENU,DL as MATH,kD as MASK,bD as MARKER,ef as MARK,of as MAP,df as MAIN,EL as MACTION,af as LINK,_D as LINEARGRADIENT,yD as LINE,nf as LI,tf as LEGEND,lf as LABEL,rf as KBD,sf as INS,wf as INPUT,Vf as IMG,SD as IMAGE,pf as IFRAME,vf as I,cf as HTML,uf as HR,gf as HGROUP,hf as HEADER,Pf as HEAD,kf as H6,bf as H5,_f as H4,yf as H3,Sf as H2,Nf as H1,ND as G,xf as FORM,xD as FOREIGNOBJECT,mf as FOOTER,mD as FILTER,Kf as FIGURE,If as FIGCAPTION,Mf as FIELDSET,KD as FETURBULENCE,ID as FETILE,MD as FESPOTLIGHT,HD as FESPECULARLIGHTING,CD as FEPOINTLIGHT,RD as FEOFFSET,TD as FEMORPHOLOGY,OD as FEMERGENODE,AD as FEMERGE,$D as FEIMAGE,ZD as FEGAUSSIANBLUR,YD as FEFUNCR,WD as FEFUNCG,UD as FEFUNCB,QD as FEFUNCA,JD as FEFLOOD,GD as FEDROPSHADOW,FD as FEDISTANTLIGHT,BD as FEDISPLACEMENTMAP,zD as FEDIFFUSELIGHTING,qD as FECONVOLVEMATRIX,jD as FECOMPOSITE,XD as FECOMPONENTTRANSFER,LD as FECOLORMATRIX,DD as FEBLEND,Hf as EMBED,Cf as EM,ED as ELLIPSE,Rf as DT,Tf as DL,Of as DIV,Af as DIALOG,$f as DFN,Zf as DETAILS,fD as DESC,Yf as DEL,eE as DEFS,Wf as DD,Uf as DATALIST,Qf as DATA,Jf as COLGROUP,Gf as COL,Ff as CODE,oE as CLIPPATH,Bf as CITE,dE as CIRCLE,zf as CAPTION,qf as CANVAS,jf as BUTTON,Xf as BR,Lf as BODY,Df as BLOCKQUOTE,Ef as BDO,ff as BDI,e as BASE,o as B,d as AUDIO,a as ASIDE,n as ARTICLE,t as AREA,fL as ANNOTATION_XML,eD as ANNOTATION,aE as ANIMATETRANSFORM,nE as ANIMATEMOTION,tE as ANIMATE,l as ADDRESS,r as ABBR,s as A};
|
|
1
|
+
function P(f){return f}function h(f){return f}function g(f,L,...j){if(!f)throw new Error("tag must be a string or vode");if(Array.isArray(f))return f;else if(L)return[f,L,...j];else return[f,...j]}function u(f,L,j,...q){if(!f)throw new Error("container must be a valid HTMLElement");if(!L||typeof L!=="object")throw new Error("initialState must be an object");if(typeof j!=="function")throw new Error("dom must be a function that returns a vode");let E={};E.stats={lastRenderTime:0,renderCount:0,liveEffectCount:0,patchCount:0,renderPatchCount:0},Object.defineProperty(L,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(B)=>{if(!B||typeof B!=="function"&&typeof B!=="object")return;if(E.stats.patchCount++,B?.next){let U=B;E.stats.liveEffectCount++;try{let F=await U.next();while(F.done===!1){E.stats.liveEffectCount++;try{E.patch(F.value),F=await U.next()}finally{E.stats.liveEffectCount--}}E.patch(F.value)}finally{E.stats.liveEffectCount--}}else if(B.then){E.stats.liveEffectCount++;try{let U=await B;E.patch(U)}finally{E.stats.liveEffectCount--}}else if(Array.isArray(B))if(typeof B[0]==="function")if(B.length>1)E.patch(B[0](E.state,...B.slice(1)));else E.patch(B[0](E.state));else E.stats.patchCount--;else if(typeof B==="function")E.patch(B(E.state));else if(E.stats.renderPatchCount++,E.q=A(E.q||{},B,!1),!E.isRendering)E.render()}}),Object.defineProperty(E,"render",{enumerable:!1,configurable:!0,writable:!1,value:()=>requestAnimationFrame(()=>{if(E.isRendering||!E.q)return;E.isRendering=!0;let B=Date.now();try{E.state=A(E.state,E.q,!0),E.q=null,E.vode=H(E.state,E.patch,f,0,E.vode,j(E.state))}finally{if(E.isRendering=!1,E.stats.renderCount++,E.stats.lastRenderTime=Date.now()-B,E.q)E.render()}})}),E.patch=L.patch,E.state=L,E.q=null;let X=f;X._vode=E;let z=j(L);E.vode=z,E.vode=H(L,E.patch,f,0,void 0,z);for(let B of q)E.patch(B);return E.patch}function c(f,L){return L.__memo=f,L}function v(f){return f?Array.isArray(f)?f[0]:typeof f==="string"||f.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function $(f){if(Array.isArray(f)&&f.length>1&&f[1]&&!Array.isArray(f[1])){if(typeof f[1]==="object"&&f[1].nodeType!==Node.TEXT_NODE)return f[1]}return}function p(f,L){if(!f)return L;if(!L)return f;if(typeof f==="string"&&typeof L==="string"){let j=f.split(" "),q=L.split(" "),E=new Set([...j,...q]);return Array.from(E).join(" ").trim()}else if(typeof f==="string"&&Array.isArray(L)){let j=new Set([...L,...f.split(" ")]);return Array.from(j).join(" ").trim()}else if(Array.isArray(f)&&typeof L==="string"){let j=new Set([...f,...L.split(" ")]);return Array.from(j).join(" ").trim()}else if(Array.isArray(f)&&Array.isArray(L)){let j=new Set([...f,...L]);return Array.from(j).join(" ").trim()}else if(typeof f==="string"&&typeof L==="object")return{[f]:!0,...L};else if(typeof f==="object"&&typeof L==="string")return{...f,[L]:!0};else if(typeof f==="object"&&typeof L==="object")return{...f,...L};else if(typeof f==="object"&&Array.isArray(L)){let j={...f};for(let q of L)j[q]=!0;return j}else if(Array.isArray(f)&&typeof L==="object"){let j={};for(let q of f)j[q]=!0;for(let q of Object.keys(L))j[q]=L[q];return j}throw new Error(`cannot merge classes of ${f} (${typeof f}) and ${L} (${typeof L})`)}function D(f){let L=x(f);if(L>0)return f.slice(L);return null}function V(f){return f.length-x(f)}function i(f,L){return f[L+x(f)]}function x(f){return $(f)?2:1}function A(f,L,j){if(!L)return f;for(let q in L){let E=L[q];if(E&&typeof E==="object"){let X=f[q];if(X)if(Array.isArray(E))f[q]=[...E];else if(E instanceof Date&&X!==E)f[q]=new Date(E);else if(Array.isArray(X))f[q]=A({},E,j);else if(typeof X==="object")A(f[q],E,j);else f[q]=A({},E,j);else if(Array.isArray(E))f[q]=[...E];else if(E instanceof Date)f[q]=new Date(E);else f[q]=A({},E,j)}else if(E===void 0&&j)delete f[q];else f[q]=E}return f}function H(f,L,j,q,E,X,z){X=I(f,X,E);let B=!X||typeof X==="number"||typeof X==="boolean";if(X===E||!E&&B)return E;let U=E?.nodeType===Node.TEXT_NODE,F=U?E:E?.node;if(B){F?.onUnmount&&L(F.onUnmount(F)),F?.remove();return}let T=!B&&k(X),R=!B&&b(X),M=!!X&&typeof X!=="string"&&!!(X?.node||X?.nodeType===Node.TEXT_NODE);if(!T&&!R&&!M&&!E)throw new Error("Invalid vode: "+typeof X+" "+JSON.stringify(X));else if(M&&T)X=X.wholeText;else if(M&&R)X=[...X];if(U&&T){if(F.nodeValue!==X)F.nodeValue=X;return E}if(T&&(!F||!U)){let J=document.createTextNode(X);if(F)F.onUnmount&&L(F.onUnmount(F)),F.replaceWith(J);else if(j.childNodes[q])j.insertBefore(J,j.childNodes[q]);else j.appendChild(J);return J}if(R&&(!F||U||E[0]!==X[0])){z=z||X[0]==="svg";let J=z?document.createElementNS("http://www.w3.org/2000/svg",X[0]):document.createElement(X[0]);X.node=J;let O=X;if(1 in O)O[1]=I(f,O[1],void 0);let Y=$(X);if(K(L,J,void 0,Y,z),F)F.onUnmount&&L(F.onUnmount(F)),F.replaceWith(J);else if(j.childNodes[q])j.insertBefore(J,j.childNodes[q]);else j.appendChild(J);let W=D(X);if(W)for(let Q=0;Q<W.length;Q++){let G=W[Q],Z=H(f,L,J,Q,void 0,G,z);X[Y?Q+2:Q+1]=Z}return J.onMount&&L(J.onMount(J)),X}if(!U&&R&&E[0]===X[0]){z=z||X[0]==="svg",X.node=F;let J=X,O=E,Y=!1;if(J[1]?.__memo){let G=J[1];if(J[1]=I(f,J[1],O[1]),G!==J[1]){let Z=$(X);K(L,F,$(E),Z,z),Y=!!Z}}else{let G=$(X);K(L,F,$(E),G,z),Y=!!G}let W=D(X),Q=D(E);if(W){for(let G=0;G<W.length;G++){let Z=W[G],_=Q&&Q[G],N=H(f,L,F,G,_,Z,z);if(N)X[Y?G+2:G+1]=N}for(let G=W.length;Q&&G<Q.length;G++)if(Q[G]?.node)Q[G].node.remove();else if(Q[G]?.nodeType===Node.TEXT_NODE)Q[G].remove()}for(let G=W?.length||0;G<Q?.length;G++)if(Q[G]?.node)Q[G].node.remove();else if(Q[G]?.nodeType===Node.TEXT_NODE)Q[G].remove();return X}return}function b(f){return Array.isArray(f)&&f.length>0&&typeof f[0]==="string"}function k(f){return typeof f==="string"||f?.nodeType===Node.TEXT_NODE}function I(f,L,j){if(typeof L!=="function")return L;let q=L?.__memo,E=j?.__memo;if(Array.isArray(q)&&Array.isArray(E)&&q.length===E.length){let z=!0;for(let B=0;B<q.length;B++)if(q[B]!==E[B]){z=!1;break}if(z)return j}let X=S(L,f);if(typeof X==="object")X.__memo=L?.__memo;return X}function S(f,L){if(typeof f==="function")return S(f(L),L);else return f}function K(f,L,j,q,E){if(!q&&!j)return;if(j)for(let X in j){let z=j[X],B=q?.[X];if(z!==B)if(q)q[X]=C(f,L,X,z,B,E);else C(f,L,X,z,void 0,E)}if(q&&j){for(let X in q)if(!(X in j)){let z=q[X];q[X]=C(f,L,X,void 0,z,E)}}else if(q)for(let X in q){let z=q[X];q[X]=C(f,L,X,void 0,z,E)}}function C(f,L,j,q,E,X){if(j==="style")if(!E)L.style.cssText="";else if(q){for(let z in{...q,...E})if(!q||E[z]!==q[z])L.style[z]=E[z];else if(q[z]&&!E[z])L.style[z]=void 0}else for(let z in E)L.style[z]=E[z];else if(j==="class")if(X)if(E){let z=m(E);L.classList.value=z}else L.classList.value="";else if(E){let z=m(E);L.className=z}else L.className="";else if(j[0]==="o"&&j[1]==="n")if(E){let z=null;if(typeof E==="function"){let B=E;z=(U)=>f([B,U])}else if(Array.isArray(E)){let B=E,U=E[0];if(B.length>1)z=()=>f([U,...B.slice(1)]);else z=(F)=>f([U,F])}else if(typeof E==="object")z=()=>f(E);L[j]=z}else L[j]=null;else if(E!==null&&E!==void 0&&E!==!1)L.setAttribute(j,E);else L.removeAttribute(j);return E}function m(f){if(typeof f==="string")return f;else if(Array.isArray(f))return f.map(m).join(" ");else if(typeof f==="object")return Object.keys(f).filter((L)=>f[L]).join(" ");else return""}var s="a",r="abbr",l="address",t="area",n="article",a="aside",d="audio",o="b",e="base",ff="bdi",Ef="bdo",Lf="blockquote",Xf="body",jf="br",qf="button",zf="canvas",Bf="caption",Ff="cite",Gf="code",Jf="col",Qf="colgroup",Uf="data",Wf="datalist",Yf="dd",Zf="del",$f="details",Af="dfn",Of="dialog",Tf="div",Rf="dl",Cf="dt",Hf="em",Mf="embed",Df="fieldset",If="figcaption",Kf="figure",mf="footer",xf="form",Nf="h1",Sf="h2",yf="h3",_f="h4",bf="h5",kf="h6",Pf="head",hf="header",gf="hgroup",uf="hr",cf="html",vf="i",pf="iframe",Vf="img",wf="input",sf="ins",rf="kbd",lf="label",tf="legend",nf="li",af="link",df="main",of="map",ef="mark",fE="menu",EE="meta",LE="meter",XE="nav",jE="noscript",qE="object",zE="ol",BE="optgroup",FE="option",GE="output",JE="p",QE="picture",UE="pre",WE="progress",YE="q",ZE="rp",$E="rt",AE="ruby",OE="s",TE="samp",RE="script",CE="section",HE="select",ME="slot",DE="small",IE="source",KE="span",mE="strong",xE="style",NE="sub",SE="summary",yE="sup",_E="table",bE="tbody",kE="td",PE="template",hE="textarea",gE="tfoot",uE="th",cE="thead",vE="time",pE="title",VE="tr",iE="track",wE="u",sE="ul",rE="video",lE="wbr",tE="animate",nE="animateMotion",aE="animateTransform",dE="circle",oE="clipPath",eE="defs",fL="desc",EL="ellipse",LL="feBlend",XL="feColorMatrix",jL="feComponentTransfer",qL="feComposite",zL="feConvolveMatrix",BL="feDiffuseLighting",FL="feDisplacementMap",GL="feDistantLight",JL="feDropShadow",QL="feFlood",UL="feFuncA",WL="feFuncB",YL="feFuncG",ZL="feFuncR",$L="feGaussianBlur",AL="feImage",OL="feMerge",TL="feMergeNode",RL="feMorphology",CL="feOffset",HL="fePointLight",ML="feSpecularLighting",DL="feSpotLight",IL="feTile",KL="feTurbulence",mL="filter",xL="foreignObject",NL="g",SL="image",yL="line",_L="linearGradient",bL="marker",kL="mask",PL="metadata",hL="mpath",gL="path",uL="pattern",cL="polygon",vL="polyline",pL="radialGradient",VL="rect",iL="set",wL="stop",sL="svg",rL="switch",lL="symbol",tL="text",nL="textPath",aL="tspan",dL="use",oL="view",eL="annotation",fX="annotation-xml",EX="maction",LX="math",XX="merror",jX="mfrac",qX="mi",zX="mmultiscripts",BX="mn",FX="mo",GX="mover",JX="mpadded",QX="mphantom",UX="mprescripts",WX="mroot",YX="mrow",ZX="ms",$X="mspace",AX="msqrt",OX="mstyle",TX="msub",RX="msubsup",CX="msup",HX="mtable",MX="mtd",DX="mtext",IX="mtr",KX="munder",mX="munderover",xX="semantics";function SX(f){let L=document.createElement("div");L.innerHTML=f.trim();let j=[];for(let q of L.childNodes){let E=y(q);if(E!=null)j.push(E)}return j}function y(f){if(f.nodeType===Node.TEXT_NODE)return f.textContent;if(f.nodeType!==Node.ELEMENT_NODE)return;let L=[f.tagName.toLowerCase()];if(f.hasAttributes()){let j={};for(let q of f.attributes)j[q.name]=q.value;L.push(j)}for(let j of f.childNodes){let q=y(j);if(q&&(typeof q!=="string"||q.length>0))L.push(q)}return L}export{g as vode,v as tag,$ as props,p as mergeClass,c as memo,SX as htmlToVode,P as createState,h as createPatch,x as childrenStart,D as children,V as childCount,i as child,u as app,lE as WBR,oL as VIEW,rE as VIDEO,dL as USE,sE as UL,wE as U,aL as TSPAN,iE as TRACK,VE as TR,pE as TITLE,vE as TIME,cE as THEAD,uE as TH,gE as TFOOT,nL as TEXTPATH,hE as TEXTAREA,tL as TEXT,PE as TEMPLATE,kE as TD,bE as TBODY,_E as TABLE,lL as SYMBOL,rL as SWITCH,sL as SVG,yE as SUP,SE as SUMMARY,NE as SUB,xE as STYLE,mE as STRONG,wL as STOP,KE as SPAN,IE as SOURCE,DE as SMALL,ME as SLOT,iL as SET,xX as SEMANTICS,HE as SELECT,CE as SECTION,RE as SCRIPT,TE as SAMP,OE as S,AE as RUBY,$E as RT,ZE as RP,VL as RECT,pL as RADIALGRADIENT,YE as Q,WE as PROGRESS,UE as PRE,vL as POLYLINE,cL as POLYGON,QE as PICTURE,uL as PATTERN,gL as PATH,JE as P,GE as OUTPUT,FE as OPTION,BE as OPTGROUP,zE as OL,qE as OBJECT,jE as NOSCRIPT,XE as NAV,mX as MUNDEROVER,KX as MUNDER,IX as MTR,DX as MTEXT,MX as MTD,HX as MTABLE,CX as MSUP,RX as MSUBSUP,TX as MSUB,OX as MSTYLE,AX as MSQRT,$X as MSPACE,ZX as MS,YX as MROW,WX as MROOT,UX as MPRESCRIPTS,QX as MPHANTOM,hL as MPATH,JX as MPADDED,GX as MOVER,FX as MO,BX as MN,zX as MMULTISCRIPTS,qX as MI,jX as MFRAC,LE as METER,PL as METADATA,EE as META,XX as MERROR,fE as MENU,LX as MATH,kL as MASK,bL as MARKER,ef as MARK,of as MAP,df as MAIN,EX as MACTION,af as LINK,_L as LINEARGRADIENT,yL as LINE,nf as LI,tf as LEGEND,lf as LABEL,rf as KBD,sf as INS,wf as INPUT,Vf as IMG,SL as IMAGE,pf as IFRAME,vf as I,cf as HTML,uf as HR,gf as HGROUP,hf as HEADER,Pf as HEAD,kf as H6,bf as H5,_f as H4,yf as H3,Sf as H2,Nf as H1,NL as G,xf as FORM,xL as FOREIGNOBJECT,mf as FOOTER,mL as FILTER,Kf as FIGURE,If as FIGCAPTION,Df as FIELDSET,KL as FETURBULENCE,IL as FETILE,DL as FESPOTLIGHT,ML as FESPECULARLIGHTING,HL as FEPOINTLIGHT,CL as FEOFFSET,RL as FEMORPHOLOGY,TL as FEMERGENODE,OL as FEMERGE,AL as FEIMAGE,$L as FEGAUSSIANBLUR,ZL as FEFUNCR,YL as FEFUNCG,WL as FEFUNCB,UL as FEFUNCA,QL as FEFLOOD,JL as FEDROPSHADOW,GL as FEDISTANTLIGHT,FL as FEDISPLACEMENTMAP,BL as FEDIFFUSELIGHTING,zL as FECONVOLVEMATRIX,qL as FECOMPOSITE,jL as FECOMPONENTTRANSFER,XL as FECOLORMATRIX,LL as FEBLEND,Mf as EMBED,Hf as EM,EL as ELLIPSE,Cf as DT,Rf as DL,Tf as DIV,Of as DIALOG,Af as DFN,$f as DETAILS,fL as DESC,Zf as DEL,eE as DEFS,Yf as DD,Wf as DATALIST,Uf as DATA,Qf as COLGROUP,Jf as COL,Gf as CODE,oE as CLIPPATH,Ff as CITE,dE as CIRCLE,Bf as CAPTION,zf as CANVAS,qf as BUTTON,jf as BR,Xf as BODY,Lf as BLOCKQUOTE,Ef as BDO,ff as BDI,e as BASE,o as B,d as AUDIO,a as ASIDE,n as ARTICLE,t as AREA,fX as ANNOTATION_XML,eL as ANNOTATION,aE as ANIMATETRANSFORM,nE as ANIMATEMOTION,tE as ANIMATE,l as ADDRESS,r as ABBR,s as A};
|
package/dist/vode.mjs
CHANGED
|
@@ -71,7 +71,7 @@ function app(container, initialState, dom, ...initialPatches) {
|
|
|
71
71
|
_vode.patch(action(_vode.state));
|
|
72
72
|
} else {
|
|
73
73
|
_vode.stats.renderPatchCount++;
|
|
74
|
-
_vode.q = mergeState(_vode.q || {}, action);
|
|
74
|
+
_vode.q = mergeState(_vode.q || {}, action, false);
|
|
75
75
|
if (!_vode.isRendering)
|
|
76
76
|
_vode.render();
|
|
77
77
|
}
|
|
@@ -87,7 +87,7 @@ function app(container, initialState, dom, ...initialPatches) {
|
|
|
87
87
|
_vode.isRendering = true;
|
|
88
88
|
const sw = Date.now();
|
|
89
89
|
try {
|
|
90
|
-
_vode.state = mergeState(_vode.state, _vode.q);
|
|
90
|
+
_vode.state = mergeState(_vode.state, _vode.q, true);
|
|
91
91
|
_vode.q = null;
|
|
92
92
|
_vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state));
|
|
93
93
|
} finally {
|
|
@@ -187,7 +187,7 @@ function child(vode2, index) {
|
|
|
187
187
|
function childrenStart(vode2) {
|
|
188
188
|
return props(vode2) ? 2 : 1;
|
|
189
189
|
}
|
|
190
|
-
function mergeState(target, source) {
|
|
190
|
+
function mergeState(target, source, allowDeletion) {
|
|
191
191
|
if (!source)
|
|
192
192
|
return target;
|
|
193
193
|
for (const key in source) {
|
|
@@ -201,20 +201,20 @@ function mergeState(target, source) {
|
|
|
201
201
|
target[key] = new Date(value);
|
|
202
202
|
} else {
|
|
203
203
|
if (Array.isArray(targetValue))
|
|
204
|
-
target[key] = mergeState({}, value);
|
|
204
|
+
target[key] = mergeState({}, value, allowDeletion);
|
|
205
205
|
else if (typeof targetValue === "object")
|
|
206
|
-
mergeState(target[key], value);
|
|
206
|
+
mergeState(target[key], value, allowDeletion);
|
|
207
207
|
else
|
|
208
|
-
target[key] = mergeState({}, value);
|
|
208
|
+
target[key] = mergeState({}, value, allowDeletion);
|
|
209
209
|
}
|
|
210
210
|
} else if (Array.isArray(value)) {
|
|
211
211
|
target[key] = [...value];
|
|
212
212
|
} else if (value instanceof Date) {
|
|
213
213
|
target[key] = new Date(value);
|
|
214
214
|
} else {
|
|
215
|
-
target[key] = mergeState({}, value);
|
|
215
|
+
target[key] = mergeState({}, value, allowDeletion);
|
|
216
216
|
}
|
|
217
|
-
} else if (value === undefined) {
|
|
217
|
+
} else if (value === undefined && allowDeletion) {
|
|
218
218
|
delete target[key];
|
|
219
219
|
} else {
|
|
220
220
|
target[key] = value;
|
package/package.json
CHANGED
package/src/vode.ts
CHANGED
|
@@ -75,10 +75,10 @@ export type ContainerNode<S> = HTMLElement & {
|
|
|
75
75
|
* it contains all necessary stuff for the vode app to function.
|
|
76
76
|
* delete it to clear all resources of the vode app, or remove the container itself */
|
|
77
77
|
_vode: {
|
|
78
|
-
state: PatchableState<S>,
|
|
79
|
-
vode: AttachedVode<S>,
|
|
80
|
-
patch: Dispatch<S>,
|
|
81
|
-
render: () => void,
|
|
78
|
+
state: PatchableState<S>,
|
|
79
|
+
vode: AttachedVode<S>,
|
|
80
|
+
patch: Dispatch<S>,
|
|
81
|
+
render: () => void,
|
|
82
82
|
q: object | null, // next patch aggregate to be applied
|
|
83
83
|
isRendering: boolean,
|
|
84
84
|
/** stats about the overall patches & last render time */
|
|
@@ -171,7 +171,7 @@ export function app<S extends object | unknown>(container: HTMLElement, initialS
|
|
|
171
171
|
_vode.patch!((<EffectFunction<S>>action)(_vode.state));
|
|
172
172
|
} else {
|
|
173
173
|
_vode.stats.renderPatchCount++;
|
|
174
|
-
_vode.q = mergeState(_vode.q || {}, action);
|
|
174
|
+
_vode.q = mergeState(_vode.q || {}, action, false);
|
|
175
175
|
if (!_vode.isRendering) _vode.render!();
|
|
176
176
|
}
|
|
177
177
|
}
|
|
@@ -184,7 +184,7 @@ export function app<S extends object | unknown>(container: HTMLElement, initialS
|
|
|
184
184
|
_vode.isRendering = true;
|
|
185
185
|
const sw = Date.now();
|
|
186
186
|
try {
|
|
187
|
-
_vode.state = mergeState(_vode.state, _vode.q);
|
|
187
|
+
_vode.state = mergeState(_vode.state, _vode.q, true);
|
|
188
188
|
_vode.q = null;
|
|
189
189
|
_vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state))!;
|
|
190
190
|
} finally {
|
|
@@ -321,7 +321,7 @@ export function childrenStart<S>(vode: ChildVode<S> | AttachedVode<S>): number {
|
|
|
321
321
|
return props(vode) ? 2 : 1;
|
|
322
322
|
}
|
|
323
323
|
|
|
324
|
-
function mergeState(target: any, source: any) {
|
|
324
|
+
function mergeState(target: any, source: any, allowDeletion: boolean) {
|
|
325
325
|
if (!source) return target;
|
|
326
326
|
|
|
327
327
|
for (const key in source) {
|
|
@@ -334,19 +334,19 @@ function mergeState(target: any, source: any) {
|
|
|
334
334
|
} else if (value instanceof Date && targetValue !== value) {
|
|
335
335
|
target[key] = new Date(value);
|
|
336
336
|
} else {
|
|
337
|
-
if (Array.isArray(targetValue)) target[key] = mergeState({}, value);
|
|
338
|
-
else if (typeof targetValue === "object") mergeState(target[key], value);
|
|
339
|
-
else target[key] = mergeState({}, value);
|
|
337
|
+
if (Array.isArray(targetValue)) target[key] = mergeState({}, value, allowDeletion);
|
|
338
|
+
else if (typeof targetValue === "object") mergeState(target[key], value, allowDeletion);
|
|
339
|
+
else target[key] = mergeState({}, value, allowDeletion);
|
|
340
340
|
}
|
|
341
341
|
} else if (Array.isArray(value)) {
|
|
342
342
|
target[key] = [...value];
|
|
343
343
|
} else if (value instanceof Date) {
|
|
344
344
|
target[key] = new Date(value);
|
|
345
345
|
} else {
|
|
346
|
-
target[key] = mergeState({}, value);
|
|
346
|
+
target[key] = mergeState({}, value, allowDeletion);
|
|
347
347
|
}
|
|
348
348
|
}
|
|
349
|
-
else if (value === undefined) {
|
|
349
|
+
else if (value === undefined && allowDeletion) {
|
|
350
350
|
delete target[key];
|
|
351
351
|
}
|
|
352
352
|
else {
|