@ryupold/vode 0.13.1 → 0.13.2

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.
Files changed (9) hide show
  1. package/.github/workflows/npm-publish.yml +2 -1
  2. package/README.md +8 -77
  3. package/dist/vode.js +932 -0
  4. package/dist/vode.min.js +1 -0
  5. package/dist/vode.min.mjs +1 -0
  6. package/logo.svg +50 -0
  7. package/package.json +7 -4
  8. package/src/vode.ts +11 -11
  9. /package/{vode.mjs → dist/vode.mjs} +0 -0
package/.github/workflows/npm-publish.yml CHANGED
@@ -15,7 +15,8 @@ jobs:
15
15
  steps:
16
16
  - uses: actions/checkout@v4
17
17
  - uses: oven-sh/setup-bun@v2
18
- - run: bun run build
18
+ - run: bun install
19
+ - run: bun run release
19
20
  - run: |
20
21
  echo "releasing to npm..."
21
22
  bun publish --provenance --access public | grep "+ @ryupold/vode@" > version.txt
package/README.md CHANGED
@@ -1,8 +1,14 @@
1
- # vode
1
+ ![vode](./logo.svg)
2
2
 
3
3
  Small web framework for minimal websites.
4
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 is supplied. Nesting vode-apps is undefined behavior for now.
5
+ The state is a singleton object that can be updated, and the UI will re-render when a patch object is supplied.
6
+
7
+ A `vode` is a representation of a virtual DOM node, which is a tree structure of HTML elements. It is written as tuple:
8
+
9
+ ```
10
+ [TAG, PROPS?, CHILDREN...]
11
+ ```
6
12
 
7
13
  ## Install
8
14
 
@@ -17,14 +23,9 @@ yarn add @ryupold/vode
17
23
  bun add @ryupold/vode
18
24
  ```
19
25
 
20
- ## Patch
21
-
22
- The `patch` function returned by `app(...)` is a function that can be passed an object called `Patch` this object is used to update the state and re-render the UI. It takes a `Patch` object that describes the changes to be made to the state in a "trickle down manner". The `Patch` can be a simple object or a function that returns a new `Patch` to the current state. It can also be an async and/or genrator function that yields `Patch`es. Events also can return a `Patch`. When a number | boolean | string | null | undefined is applied as a `Patch`, it will be ignored.
23
-
24
26
  ## Usage
25
27
 
26
28
  index.html
27
-
28
29
  ```html
29
30
  <html>
30
31
  <head>
@@ -39,8 +40,6 @@ index.html
39
40
 
40
41
  main.ts
41
42
  ```ts
42
- // import { app, createState} from 'vode.js';
43
- // import { BR, DIV, INPUT, SPAN } from 'vode-tags.js';
44
43
  import { app, createState, BR, DIV, INPUT, SPAN } from '@ryupold/vode';
45
44
 
46
45
 
@@ -64,71 +63,3 @@ app<State>(appNode, init,
64
63
  ]
65
64
  );
66
65
  ```
67
-
68
- ## Claude
69
-
70
- > Prompt: "what can you tell me about the overall design philosophy of the vode library based on what you see in `src/vode.ts`"
71
-
72
-
73
- Based on my analysis of `src/vode.ts`, here's the overall design philosophy of the vode library:
74
-
75
- ### Core Design Philosophy
76
-
77
- **Functional Virtual DOM with Minimal Abstractions**
78
- - Uses array-based virtual nodes (`[tag, props?, ...children]`) instead of object-based structures
79
- - Prioritizes simplicity and performance over complex abstractions
80
-
81
- **State-Centric Architecture**
82
- - Central state object with patch-based updates
83
- - Immutable-style state management with deep merging
84
- - Single source of truth pattern
85
-
86
- **Zero-Dependency Minimalism**
87
- - Pure TypeScript/JavaScript implementation
88
- - No external dependencies or build tools required
89
- - Direct DOM manipulation without heavy runtime
90
-
91
- ### Key Architectural Decisions
92
-
93
- #### Virtual DOM Structure
94
- ```typescript
95
- // Simple array-based nodes
96
- ["div", { class: "container" }, "Hello", ["span", "World"]]
97
- ```
98
- - Minimal memory footprint
99
- - Easy serialization/debugging
100
- - Type-safe with TypeScript generics
101
-
102
- #### Reactive State Management
103
- ```typescript
104
- state.patch(newData) // Direct updates
105
- state.patch([effect, payload]) // Function-based effects
106
- state.patch(promise) // Async support
107
- ```
108
- - Unified patch system for all state changes
109
- - Built-in async/generator support
110
- - Functional effects pattern
111
-
112
- #### Performance Optimizations
113
- - **Memoization**: `memo()` for component caching
114
- - **Reconciliation**: Intelligent DOM diffing
115
- - **Batched Updates**: RequestAnimationFrame-based rendering
116
- - **Memory Management**: Proper cleanup with mount/unmount hooks
117
-
118
- #### Developer Experience
119
- - **Type Safety**: Full TypeScript support with generics
120
- - **Debugging**: Built-in performance statistics
121
- - **Flexibility**: Support for HTML, SVG, and MathML
122
- - **Composability**: Functional component model
123
-
124
- ### Philosophy Summary
125
-
126
- Vode follows a **"less is more"** philosophy, providing a lightweight alternative to heavyweight frameworks while maintaining modern reactive patterns. It emphasizes:
127
-
128
- 1. **Explicitness over magic** - Clear, predictable behavior
129
- 2. **Performance by design** - Minimal overhead, efficient updates
130
- 3. **Developer control** - Direct state manipulation without hidden abstractions
131
- 4. **Functional paradigms** - Immutable updates, pure components
132
- 5. **Modern web standards** - Leverages native browser APIs effectively
133
-
134
- The library appears designed for developers who want React-like reactivity without the complexity and bundle size of modern frameworks.
package/dist/vode.js ADDED
@@ -0,0 +1,932 @@
1
+ "use strict";
2
+ var V = (() => {
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+
21
+ // index.ts
22
+ var index_exports = {};
23
+ __export(index_exports, {
24
+ A: () => A,
25
+ ABBR: () => ABBR,
26
+ ADDRESS: () => ADDRESS,
27
+ ANIMATE: () => ANIMATE,
28
+ ANIMATEMOTION: () => ANIMATEMOTION,
29
+ ANIMATETRANSFORM: () => ANIMATETRANSFORM,
30
+ ANNOTATION: () => ANNOTATION,
31
+ ANNOTATION_XML: () => ANNOTATION_XML,
32
+ AREA: () => AREA,
33
+ ARTICLE: () => ARTICLE,
34
+ ASIDE: () => ASIDE,
35
+ AUDIO: () => AUDIO,
36
+ B: () => B,
37
+ BASE: () => BASE,
38
+ BDI: () => BDI,
39
+ BDO: () => BDO,
40
+ BLOCKQUOTE: () => BLOCKQUOTE,
41
+ BODY: () => BODY,
42
+ BR: () => BR,
43
+ BUTTON: () => BUTTON,
44
+ CANVAS: () => CANVAS,
45
+ CAPTION: () => CAPTION,
46
+ CIRCLE: () => CIRCLE,
47
+ CITE: () => CITE,
48
+ CLIPPATH: () => CLIPPATH,
49
+ CODE: () => CODE,
50
+ COL: () => COL,
51
+ COLGROUP: () => COLGROUP,
52
+ DATA: () => DATA,
53
+ DATALIST: () => DATALIST,
54
+ DD: () => DD,
55
+ DEFS: () => DEFS,
56
+ DEL: () => DEL,
57
+ DESC: () => DESC,
58
+ DETAILS: () => DETAILS,
59
+ DFN: () => DFN,
60
+ DIALOG: () => DIALOG,
61
+ DIV: () => DIV,
62
+ DL: () => DL,
63
+ DT: () => DT,
64
+ ELLIPSE: () => ELLIPSE,
65
+ EM: () => EM,
66
+ EMBED: () => EMBED,
67
+ FEBLEND: () => FEBLEND,
68
+ FECOLORMATRIX: () => FECOLORMATRIX,
69
+ FECOMPONENTTRANSFER: () => FECOMPONENTTRANSFER,
70
+ FECOMPOSITE: () => FECOMPOSITE,
71
+ FECONVOLVEMATRIX: () => FECONVOLVEMATRIX,
72
+ FEDIFFUSELIGHTING: () => FEDIFFUSELIGHTING,
73
+ FEDISPLACEMENTMAP: () => FEDISPLACEMENTMAP,
74
+ FEDISTANTLIGHT: () => FEDISTANTLIGHT,
75
+ FEDROPSHADOW: () => FEDROPSHADOW,
76
+ FEFLOOD: () => FEFLOOD,
77
+ FEFUNCA: () => FEFUNCA,
78
+ FEFUNCB: () => FEFUNCB,
79
+ FEFUNCG: () => FEFUNCG,
80
+ FEFUNCR: () => FEFUNCR,
81
+ FEGAUSSIANBLUR: () => FEGAUSSIANBLUR,
82
+ FEIMAGE: () => FEIMAGE,
83
+ FEMERGE: () => FEMERGE,
84
+ FEMERGENODE: () => FEMERGENODE,
85
+ FEMORPHOLOGY: () => FEMORPHOLOGY,
86
+ FEOFFSET: () => FEOFFSET,
87
+ FEPOINTLIGHT: () => FEPOINTLIGHT,
88
+ FESPECULARLIGHTING: () => FESPECULARLIGHTING,
89
+ FESPOTLIGHT: () => FESPOTLIGHT,
90
+ FETILE: () => FETILE,
91
+ FETURBULENCE: () => FETURBULENCE,
92
+ FIELDSET: () => FIELDSET,
93
+ FIGCAPTION: () => FIGCAPTION,
94
+ FIGURE: () => FIGURE,
95
+ FILTER: () => FILTER,
96
+ FOOTER: () => FOOTER,
97
+ FOREIGNOBJECT: () => FOREIGNOBJECT,
98
+ FORM: () => FORM,
99
+ G: () => G,
100
+ H1: () => H1,
101
+ H2: () => H2,
102
+ H3: () => H3,
103
+ H4: () => H4,
104
+ H5: () => H5,
105
+ H6: () => H6,
106
+ HEAD: () => HEAD,
107
+ HEADER: () => HEADER,
108
+ HGROUP: () => HGROUP,
109
+ HR: () => HR,
110
+ HTML: () => HTML,
111
+ I: () => I,
112
+ IFRAME: () => IFRAME,
113
+ IMAGE: () => IMAGE,
114
+ IMG: () => IMG,
115
+ INPUT: () => INPUT,
116
+ INS: () => INS,
117
+ KBD: () => KBD,
118
+ LABEL: () => LABEL,
119
+ LEGEND: () => LEGEND,
120
+ LI: () => LI,
121
+ LINE: () => LINE,
122
+ LINEARGRADIENT: () => LINEARGRADIENT,
123
+ LINK: () => LINK,
124
+ MACTION: () => MACTION,
125
+ MAIN: () => MAIN,
126
+ MAP: () => MAP,
127
+ MARK: () => MARK,
128
+ MARKER: () => MARKER,
129
+ MASK: () => MASK,
130
+ MATH: () => MATH,
131
+ MENU: () => MENU,
132
+ MERROR: () => MERROR,
133
+ META: () => META,
134
+ METADATA: () => METADATA,
135
+ METER: () => METER,
136
+ MFRAC: () => MFRAC,
137
+ MI: () => MI,
138
+ MMULTISCRIPTS: () => MMULTISCRIPTS,
139
+ MN: () => MN,
140
+ MO: () => MO,
141
+ MOVER: () => MOVER,
142
+ MPADDED: () => MPADDED,
143
+ MPATH: () => MPATH,
144
+ MPHANTOM: () => MPHANTOM,
145
+ MPRESCRIPTS: () => MPRESCRIPTS,
146
+ MROOT: () => MROOT,
147
+ MROW: () => MROW,
148
+ MS: () => MS,
149
+ MSPACE: () => MSPACE,
150
+ MSQRT: () => MSQRT,
151
+ MSTYLE: () => MSTYLE,
152
+ MSUB: () => MSUB,
153
+ MSUBSUP: () => MSUBSUP,
154
+ MSUP: () => MSUP,
155
+ MTABLE: () => MTABLE,
156
+ MTD: () => MTD,
157
+ MTEXT: () => MTEXT,
158
+ MTR: () => MTR,
159
+ MUNDER: () => MUNDER,
160
+ MUNDEROVER: () => MUNDEROVER,
161
+ NAV: () => NAV,
162
+ NOSCRIPT: () => NOSCRIPT,
163
+ OBJECT: () => OBJECT,
164
+ OL: () => OL,
165
+ OPTGROUP: () => OPTGROUP,
166
+ OPTION: () => OPTION,
167
+ OUTPUT: () => OUTPUT,
168
+ P: () => P,
169
+ PATH: () => PATH,
170
+ PATTERN: () => PATTERN,
171
+ PICTURE: () => PICTURE,
172
+ POLYGON: () => POLYGON,
173
+ POLYLINE: () => POLYLINE,
174
+ PRE: () => PRE,
175
+ PROGRESS: () => PROGRESS,
176
+ Q: () => Q,
177
+ RADIALGRADIENT: () => RADIALGRADIENT,
178
+ RECT: () => RECT,
179
+ RP: () => RP,
180
+ RT: () => RT,
181
+ RUBY: () => RUBY,
182
+ S: () => S,
183
+ SAMP: () => SAMP,
184
+ SCRIPT: () => SCRIPT,
185
+ SECTION: () => SECTION,
186
+ SELECT: () => SELECT,
187
+ SEMANTICS: () => SEMANTICS,
188
+ SET: () => SET,
189
+ SLOT: () => SLOT,
190
+ SMALL: () => SMALL,
191
+ SOURCE: () => SOURCE,
192
+ SPAN: () => SPAN,
193
+ STOP: () => STOP,
194
+ STRONG: () => STRONG,
195
+ STYLE: () => STYLE,
196
+ SUB: () => SUB,
197
+ SUMMARY: () => SUMMARY,
198
+ SUP: () => SUP,
199
+ SVG: () => SVG,
200
+ SWITCH: () => SWITCH,
201
+ SYMBOL: () => SYMBOL,
202
+ TABLE: () => TABLE,
203
+ TBODY: () => TBODY,
204
+ TD: () => TD,
205
+ TEMPLATE: () => TEMPLATE,
206
+ TEXT: () => TEXT,
207
+ TEXTAREA: () => TEXTAREA,
208
+ TEXTPATH: () => TEXTPATH,
209
+ TFOOT: () => TFOOT,
210
+ TH: () => TH,
211
+ THEAD: () => THEAD,
212
+ TIME: () => TIME,
213
+ TITLE: () => TITLE,
214
+ TR: () => TR,
215
+ TRACK: () => TRACK,
216
+ TSPAN: () => TSPAN,
217
+ U: () => U,
218
+ UL: () => UL,
219
+ USE: () => USE,
220
+ VIDEO: () => VIDEO,
221
+ VIEW: () => VIEW,
222
+ WBR: () => WBR,
223
+ app: () => app,
224
+ child: () => child,
225
+ childCount: () => childCount,
226
+ children: () => children,
227
+ childrenStart: () => childrenStart,
228
+ createPatch: () => createPatch,
229
+ createState: () => createState,
230
+ htmlToVode: () => htmlToVode,
231
+ memo: () => memo,
232
+ mergeClass: () => mergeClass,
233
+ props: () => props,
234
+ tag: () => tag,
235
+ vode: () => vode
236
+ });
237
+
238
+ // src/vode.ts
239
+ function createState(state) {
240
+ return state;
241
+ }
242
+ function createPatch(p) {
243
+ return p;
244
+ }
245
+ function vode(tag2, props2, ...children2) {
246
+ if (!tag2) throw new Error("tag must be a string or vode");
247
+ if (Array.isArray(tag2)) return tag2;
248
+ else if (props2) return [tag2, props2, ...children2];
249
+ else return [tag2, ...children2];
250
+ }
251
+ function app(container, initialState, dom, ...initialPatches) {
252
+ if (!container) throw new Error("container must be a valid HTMLElement");
253
+ if (!initialState || typeof initialState !== "object") throw new Error("initialState must be an object");
254
+ if (typeof dom !== "function") throw new Error("dom must be a function that returns a vode");
255
+ const _vode = {};
256
+ _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
257
+ Object.defineProperty(initialState, "patch", {
258
+ enumerable: false,
259
+ configurable: true,
260
+ writable: false,
261
+ value: async (action) => {
262
+ if (!action || typeof action !== "function" && typeof action !== "object") return;
263
+ _vode.stats.patchCount++;
264
+ if (action?.next) {
265
+ const generator = action;
266
+ _vode.stats.liveEffectCount++;
267
+ try {
268
+ let v = await generator.next();
269
+ while (v.done === false) {
270
+ _vode.stats.liveEffectCount++;
271
+ try {
272
+ _vode.patch(v.value);
273
+ v = await generator.next();
274
+ } finally {
275
+ _vode.stats.liveEffectCount--;
276
+ }
277
+ }
278
+ _vode.patch(v.value);
279
+ } finally {
280
+ _vode.stats.liveEffectCount--;
281
+ }
282
+ } else if (action.then) {
283
+ _vode.stats.liveEffectCount++;
284
+ try {
285
+ const nextState = await action;
286
+ _vode.patch(nextState);
287
+ } finally {
288
+ _vode.stats.liveEffectCount--;
289
+ }
290
+ } else if (Array.isArray(action)) {
291
+ if (typeof action[0] === "function") {
292
+ if (action.length > 1)
293
+ _vode.patch(action[0](_vode.state, ...action.slice(1)));
294
+ else _vode.patch(action[0](_vode.state));
295
+ } else {
296
+ _vode.stats.patchCount--;
297
+ }
298
+ } else if (typeof action === "function") {
299
+ _vode.patch(action(_vode.state));
300
+ } else {
301
+ _vode.stats.renderPatchCount++;
302
+ _vode.q = mergeState(_vode.q || {}, action);
303
+ if (!_vode.isRendering) _vode.render();
304
+ }
305
+ }
306
+ });
307
+ Object.defineProperty(_vode, "render", {
308
+ enumerable: false,
309
+ configurable: true,
310
+ writable: false,
311
+ value: () => requestAnimationFrame(() => {
312
+ if (_vode.isRendering || !_vode.q) return;
313
+ _vode.isRendering = true;
314
+ const sw = Date.now();
315
+ try {
316
+ _vode.state = mergeState(_vode.state, _vode.q);
317
+ _vode.q = null;
318
+ _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state));
319
+ } finally {
320
+ _vode.isRendering = false;
321
+ _vode.stats.renderCount++;
322
+ _vode.stats.lastRenderTime = Date.now() - sw;
323
+ if (_vode.q) {
324
+ _vode.render();
325
+ }
326
+ }
327
+ })
328
+ });
329
+ _vode.patch = initialState.patch;
330
+ _vode.state = initialState;
331
+ _vode.q = null;
332
+ const root = container;
333
+ root._vode = _vode;
334
+ const initialVode = dom(initialState);
335
+ _vode.vode = initialVode;
336
+ _vode.vode = render(initialState, _vode.patch, container, 0, void 0, initialVode);
337
+ for (const effect of initialPatches) {
338
+ _vode.patch(effect);
339
+ }
340
+ return _vode.patch;
341
+ }
342
+ function memo(compare, componentOrProps) {
343
+ componentOrProps.__memo = compare;
344
+ return componentOrProps;
345
+ }
346
+ function tag(v) {
347
+ return !!v ? Array.isArray(v) ? v[0] : typeof v === "string" || v.nodeType === Node.TEXT_NODE ? "#text" : void 0 : void 0;
348
+ }
349
+ function props(vode2) {
350
+ if (Array.isArray(vode2) && vode2.length > 1 && vode2[1] && !Array.isArray(vode2[1])) {
351
+ if (typeof vode2[1] === "object" && vode2[1].nodeType !== Node.TEXT_NODE) {
352
+ return vode2[1];
353
+ }
354
+ }
355
+ return void 0;
356
+ }
357
+ function mergeClass(a, b) {
358
+ if (!a) return b;
359
+ if (!b) return a;
360
+ if (typeof a === "string" && typeof b === "string") {
361
+ const aSplit = a.split(" ");
362
+ const bSplit = b.split(" ");
363
+ const classSet = /* @__PURE__ */ new Set([...aSplit, ...bSplit]);
364
+ return Array.from(classSet).join(" ").trim();
365
+ } else if (typeof a === "string" && Array.isArray(b)) {
366
+ const classSet = /* @__PURE__ */ new Set([...b, ...a.split(" ")]);
367
+ return Array.from(classSet).join(" ").trim();
368
+ } else if (Array.isArray(a) && typeof b === "string") {
369
+ const classSet = /* @__PURE__ */ new Set([...a, ...b.split(" ")]);
370
+ return Array.from(classSet).join(" ").trim();
371
+ } else if (Array.isArray(a) && Array.isArray(b)) {
372
+ const classSet = /* @__PURE__ */ new Set([...a, ...b]);
373
+ return Array.from(classSet).join(" ").trim();
374
+ } else if (typeof a === "string" && typeof b === "object") {
375
+ return { [a]: true, ...b };
376
+ } else if (typeof a === "object" && typeof b === "string") {
377
+ return { ...a, [b]: true };
378
+ } else if (typeof a === "object" && typeof b === "object") {
379
+ return { ...a, ...b };
380
+ } else if (typeof a === "object" && Array.isArray(b)) {
381
+ const aa = { ...a };
382
+ for (const item of b) {
383
+ aa[item] = true;
384
+ }
385
+ return aa;
386
+ } else if (Array.isArray(a) && typeof b === "object") {
387
+ const aa = {};
388
+ for (const item of a) {
389
+ aa[item] = true;
390
+ }
391
+ for (const bKey of Object.keys(b)) {
392
+ aa[bKey] = b[bKey];
393
+ }
394
+ return aa;
395
+ }
396
+ throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
397
+ }
398
+ function children(vode2) {
399
+ const start = childrenStart(vode2);
400
+ if (start > 0) {
401
+ return vode2.slice(start);
402
+ }
403
+ return null;
404
+ }
405
+ function childCount(vode2) {
406
+ return vode2.length - childrenStart(vode2);
407
+ }
408
+ function child(vode2, index) {
409
+ return vode2[index + childrenStart(vode2)];
410
+ }
411
+ function childrenStart(vode2) {
412
+ return props(vode2) ? 2 : 1;
413
+ }
414
+ function mergeState(target, source) {
415
+ if (!source) return target;
416
+ for (const key in source) {
417
+ const value = source[key];
418
+ if (value && typeof value === "object") {
419
+ const targetValue = target[key];
420
+ if (targetValue) {
421
+ if (Array.isArray(value)) {
422
+ target[key] = [...value];
423
+ } else if (value instanceof Date && targetValue !== value) {
424
+ target[key] = new Date(value);
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);
429
+ }
430
+ } else if (Array.isArray(value)) {
431
+ target[key] = [...value];
432
+ } else if (value instanceof Date) {
433
+ target[key] = new Date(value);
434
+ } else {
435
+ target[key] = mergeState({}, value);
436
+ }
437
+ } else if (value === void 0) {
438
+ delete target[key];
439
+ } else {
440
+ target[key] = value;
441
+ }
442
+ }
443
+ return target;
444
+ }
445
+ function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
446
+ newVode = remember(state, newVode, oldVode);
447
+ const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
448
+ if (newVode === oldVode || !oldVode && isNoVode) {
449
+ return oldVode;
450
+ }
451
+ const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
452
+ const oldNode = oldIsText ? oldVode : oldVode?.node;
453
+ if (isNoVode) {
454
+ oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
455
+ oldNode?.remove();
456
+ return void 0;
457
+ }
458
+ const isText = !isNoVode && isTextVode(newVode);
459
+ const isNode = !isNoVode && isNaturalVode(newVode);
460
+ const alreadyAttached = !!newVode && typeof newVode !== "string" && !!(newVode?.node || newVode?.nodeType === Node.TEXT_NODE);
461
+ if (!isText && !isNode && !alreadyAttached && !oldVode) {
462
+ throw new Error("Invalid vode: " + typeof newVode + " " + JSON.stringify(newVode));
463
+ } else if (alreadyAttached && isText) {
464
+ newVode = newVode.wholeText;
465
+ } else if (alreadyAttached && isNode) {
466
+ newVode = [...newVode];
467
+ }
468
+ if (oldIsText && isText) {
469
+ if (oldNode.nodeValue !== newVode) {
470
+ oldNode.nodeValue = newVode;
471
+ }
472
+ return oldVode;
473
+ }
474
+ if (isText && (!oldNode || !oldIsText)) {
475
+ const text = document.createTextNode(newVode);
476
+ if (oldNode) {
477
+ oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
478
+ oldNode.replaceWith(text);
479
+ } else {
480
+ if (parent.childNodes[childIndex]) {
481
+ parent.insertBefore(text, parent.childNodes[childIndex]);
482
+ } else {
483
+ parent.appendChild(text);
484
+ }
485
+ }
486
+ return text;
487
+ }
488
+ if (isNode && (!oldNode || oldIsText || oldVode[0] !== newVode[0])) {
489
+ svg = svg || newVode[0] === "svg";
490
+ const newNode = svg ? document.createElementNS("http://www.w3.org/2000/svg", newVode[0]) : document.createElement(newVode[0]);
491
+ newVode.node = newNode;
492
+ const newvode = newVode;
493
+ if (1 in newvode) {
494
+ newvode[1] = remember(state, newvode[1], void 0);
495
+ }
496
+ const properties = props(newVode);
497
+ patchProperties(patch, newNode, void 0, properties, svg);
498
+ if (oldNode) {
499
+ oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
500
+ oldNode.replaceWith(newNode);
501
+ } else {
502
+ if (parent.childNodes[childIndex]) {
503
+ parent.insertBefore(newNode, parent.childNodes[childIndex]);
504
+ } else {
505
+ parent.appendChild(newNode);
506
+ }
507
+ }
508
+ const newChildren = children(newVode);
509
+ if (newChildren) {
510
+ for (let i = 0; i < newChildren.length; i++) {
511
+ const child2 = newChildren[i];
512
+ const attached = render(state, patch, newNode, i, void 0, child2, svg);
513
+ newVode[properties ? i + 2 : i + 1] = attached;
514
+ }
515
+ }
516
+ newNode.onMount && patch(newNode.onMount(newNode));
517
+ return newVode;
518
+ }
519
+ if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
520
+ svg = svg || newVode[0] === "svg";
521
+ newVode.node = oldNode;
522
+ const newvode = newVode;
523
+ const oldvode = oldVode;
524
+ let hasProps = false;
525
+ if (newvode[1]?.__memo) {
526
+ const prev = newvode[1];
527
+ newvode[1] = remember(state, newvode[1], oldvode[1]);
528
+ if (prev !== newvode[1]) {
529
+ const properties = props(newVode);
530
+ patchProperties(patch, oldNode, props(oldVode), properties, svg);
531
+ hasProps = !!properties;
532
+ }
533
+ } else {
534
+ const properties = props(newVode);
535
+ patchProperties(patch, oldNode, props(oldVode), properties, svg);
536
+ hasProps = !!properties;
537
+ }
538
+ const newKids = children(newVode);
539
+ const oldKids = children(oldVode);
540
+ if (newKids) {
541
+ for (let i = 0; i < newKids.length; i++) {
542
+ const child2 = newKids[i];
543
+ const oldChild = oldKids && oldKids[i];
544
+ const attached = render(state, patch, oldNode, i, oldChild, child2, svg);
545
+ if (attached) {
546
+ newVode[hasProps ? i + 2 : i + 1] = attached;
547
+ }
548
+ }
549
+ for (let i = newKids.length; oldKids && i < oldKids.length; i++) {
550
+ if (oldKids[i]?.node)
551
+ oldKids[i].node.remove();
552
+ else if (oldKids[i]?.nodeType === Node.TEXT_NODE)
553
+ oldKids[i].remove();
554
+ }
555
+ }
556
+ for (let i = newKids?.length || 0; i < oldKids?.length || 0; i++) {
557
+ if (oldKids[i]?.node)
558
+ oldKids[i].node.remove();
559
+ else if (oldKids[i]?.nodeType === Node.TEXT_NODE)
560
+ oldKids[i].remove();
561
+ }
562
+ return newVode;
563
+ }
564
+ return void 0;
565
+ }
566
+ function isNaturalVode(x) {
567
+ return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
568
+ }
569
+ function isTextVode(x) {
570
+ return typeof x === "string" || x?.nodeType === Node.TEXT_NODE;
571
+ }
572
+ function remember(state, present, past) {
573
+ if (typeof present !== "function")
574
+ return present;
575
+ const presentMemo = present?.__memo;
576
+ const pastMemo = past?.__memo;
577
+ if (Array.isArray(presentMemo) && Array.isArray(pastMemo) && presentMemo.length === pastMemo.length) {
578
+ let same = true;
579
+ for (let i = 0; i < presentMemo.length; i++) {
580
+ if (presentMemo[i] !== pastMemo[i]) {
581
+ same = false;
582
+ break;
583
+ }
584
+ }
585
+ if (same) return past;
586
+ }
587
+ const newRender = unwrap(present, state);
588
+ if (typeof newRender === "object") {
589
+ newRender.__memo = present?.__memo;
590
+ }
591
+ return newRender;
592
+ }
593
+ function unwrap(c, s) {
594
+ if (typeof c === "function") {
595
+ return unwrap(c(s), s);
596
+ } else {
597
+ return c;
598
+ }
599
+ }
600
+ function patchProperties(patch, node, oldProps, newProps, isSvg) {
601
+ if (!newProps && !oldProps) return;
602
+ if (oldProps) {
603
+ for (const key in oldProps) {
604
+ const oldValue = oldProps[key];
605
+ const newValue = newProps?.[key];
606
+ if (oldValue !== newValue) {
607
+ if (newProps) newProps[key] = patchProperty(patch, node, key, oldValue, newValue, isSvg);
608
+ else patchProperty(patch, node, key, oldValue, void 0, isSvg);
609
+ }
610
+ }
611
+ }
612
+ if (newProps && oldProps) {
613
+ for (const key in newProps) {
614
+ if (!(key in oldProps)) {
615
+ const newValue = newProps[key];
616
+ newProps[key] = patchProperty(patch, node, key, void 0, newValue, isSvg);
617
+ }
618
+ }
619
+ } else if (newProps) {
620
+ for (const key in newProps) {
621
+ const newValue = newProps[key];
622
+ newProps[key] = patchProperty(patch, node, key, void 0, newValue, isSvg);
623
+ }
624
+ }
625
+ }
626
+ function patchProperty(patch, node, key, oldValue, newValue, isSvg) {
627
+ if (key === "style") {
628
+ if (!newValue) {
629
+ node.style.cssText = "";
630
+ } else if (oldValue) {
631
+ for (let k in { ...oldValue, ...newValue }) {
632
+ if (!oldValue || newValue[k] !== oldValue[k]) {
633
+ node.style[k] = newValue[k];
634
+ } else if (oldValue[k] && !newValue[k]) {
635
+ node.style[k] = void 0;
636
+ }
637
+ }
638
+ } else {
639
+ for (let k in newValue) {
640
+ node.style[k] = newValue[k];
641
+ }
642
+ }
643
+ } else if (key === "class") {
644
+ if (isSvg) {
645
+ if (newValue) {
646
+ const newClass = classString(newValue);
647
+ node.classList.value = newClass;
648
+ } else {
649
+ node.classList.value = "";
650
+ }
651
+ } else {
652
+ if (newValue) {
653
+ const newClass = classString(newValue);
654
+ node.className = newClass;
655
+ } else {
656
+ node.className = "";
657
+ }
658
+ }
659
+ } else if (key[0] === "o" && key[1] === "n") {
660
+ if (newValue) {
661
+ let eventHandler = null;
662
+ if (typeof newValue === "function") {
663
+ const action = newValue;
664
+ eventHandler = (evt) => patch([action, evt]);
665
+ } else if (Array.isArray(newValue)) {
666
+ const arr = newValue;
667
+ const action = newValue[0];
668
+ if (arr.length > 1) {
669
+ eventHandler = () => patch([action, ...arr.slice(1)]);
670
+ } else {
671
+ eventHandler = (evt) => patch([action, evt]);
672
+ }
673
+ } else if (typeof newValue === "object") {
674
+ eventHandler = () => patch(newValue);
675
+ }
676
+ node[key] = eventHandler;
677
+ } else {
678
+ node[key] = null;
679
+ }
680
+ } else if (newValue !== null && newValue !== void 0 && newValue !== false) {
681
+ node.setAttribute(key, newValue);
682
+ } else {
683
+ node.removeAttribute(key);
684
+ }
685
+ return newValue;
686
+ }
687
+ function classString(classProp) {
688
+ if (typeof classProp === "string")
689
+ return classProp;
690
+ else if (Array.isArray(classProp))
691
+ return classProp.map(classString).join(" ");
692
+ else if (typeof classProp === "object")
693
+ return Object.keys(classProp).filter((k) => classProp[k]).join(" ");
694
+ else
695
+ return "";
696
+ }
697
+
698
+ // src/vode-tags.ts
699
+ var A = "a";
700
+ var ABBR = "abbr";
701
+ var ADDRESS = "address";
702
+ var AREA = "area";
703
+ var ARTICLE = "article";
704
+ var ASIDE = "aside";
705
+ var AUDIO = "audio";
706
+ var B = "b";
707
+ var BASE = "base";
708
+ var BDI = "bdi";
709
+ var BDO = "bdo";
710
+ var BLOCKQUOTE = "blockquote";
711
+ var BODY = "body";
712
+ var BR = "br";
713
+ var BUTTON = "button";
714
+ var CANVAS = "canvas";
715
+ var CAPTION = "caption";
716
+ var CITE = "cite";
717
+ var CODE = "code";
718
+ var COL = "col";
719
+ var COLGROUP = "colgroup";
720
+ var DATA = "data";
721
+ var DATALIST = "datalist";
722
+ var DD = "dd";
723
+ var DEL = "del";
724
+ var DETAILS = "details";
725
+ var DFN = "dfn";
726
+ var DIALOG = "dialog";
727
+ var DIV = "div";
728
+ var DL = "dl";
729
+ var DT = "dt";
730
+ var EM = "em";
731
+ var EMBED = "embed";
732
+ var FIELDSET = "fieldset";
733
+ var FIGCAPTION = "figcaption";
734
+ var FIGURE = "figure";
735
+ var FOOTER = "footer";
736
+ var FORM = "form";
737
+ var H1 = "h1";
738
+ var H2 = "h2";
739
+ var H3 = "h3";
740
+ var H4 = "h4";
741
+ var H5 = "h5";
742
+ var H6 = "h6";
743
+ var HEAD = "head";
744
+ var HEADER = "header";
745
+ var HGROUP = "hgroup";
746
+ var HR = "hr";
747
+ var HTML = "html";
748
+ var I = "i";
749
+ var IFRAME = "iframe";
750
+ var IMG = "img";
751
+ var INPUT = "input";
752
+ var INS = "ins";
753
+ var KBD = "kbd";
754
+ var LABEL = "label";
755
+ var LEGEND = "legend";
756
+ var LI = "li";
757
+ var LINK = "link";
758
+ var MAIN = "main";
759
+ var MAP = "map";
760
+ var MARK = "mark";
761
+ var MENU = "menu";
762
+ var META = "meta";
763
+ var METER = "meter";
764
+ var NAV = "nav";
765
+ var NOSCRIPT = "noscript";
766
+ var OBJECT = "object";
767
+ var OL = "ol";
768
+ var OPTGROUP = "optgroup";
769
+ var OPTION = "option";
770
+ var OUTPUT = "output";
771
+ var P = "p";
772
+ var PICTURE = "picture";
773
+ var PRE = "pre";
774
+ var PROGRESS = "progress";
775
+ var Q = "q";
776
+ var RP = "rp";
777
+ var RT = "rt";
778
+ var RUBY = "ruby";
779
+ var S = "s";
780
+ var SAMP = "samp";
781
+ var SCRIPT = "script";
782
+ var SECTION = "section";
783
+ var SELECT = "select";
784
+ var SLOT = "slot";
785
+ var SMALL = "small";
786
+ var SOURCE = "source";
787
+ var SPAN = "span";
788
+ var STRONG = "strong";
789
+ var STYLE = "style";
790
+ var SUB = "sub";
791
+ var SUMMARY = "summary";
792
+ var SUP = "sup";
793
+ var TABLE = "table";
794
+ var TBODY = "tbody";
795
+ var TD = "td";
796
+ var TEMPLATE = "template";
797
+ var TEXTAREA = "textarea";
798
+ var TFOOT = "tfoot";
799
+ var TH = "th";
800
+ var THEAD = "thead";
801
+ var TIME = "time";
802
+ var TITLE = "title";
803
+ var TR = "tr";
804
+ var TRACK = "track";
805
+ var U = "u";
806
+ var UL = "ul";
807
+ var VIDEO = "video";
808
+ var WBR = "wbr";
809
+ var ANIMATE = "animate";
810
+ var ANIMATEMOTION = "animateMotion";
811
+ var ANIMATETRANSFORM = "animateTransform";
812
+ var CIRCLE = "circle";
813
+ var CLIPPATH = "clipPath";
814
+ var DEFS = "defs";
815
+ var DESC = "desc";
816
+ var ELLIPSE = "ellipse";
817
+ var FEBLEND = "feBlend";
818
+ var FECOLORMATRIX = "feColorMatrix";
819
+ var FECOMPONENTTRANSFER = "feComponentTransfer";
820
+ var FECOMPOSITE = "feComposite";
821
+ var FECONVOLVEMATRIX = "feConvolveMatrix";
822
+ var FEDIFFUSELIGHTING = "feDiffuseLighting";
823
+ var FEDISPLACEMENTMAP = "feDisplacementMap";
824
+ var FEDISTANTLIGHT = "feDistantLight";
825
+ var FEDROPSHADOW = "feDropShadow";
826
+ var FEFLOOD = "feFlood";
827
+ var FEFUNCA = "feFuncA";
828
+ var FEFUNCB = "feFuncB";
829
+ var FEFUNCG = "feFuncG";
830
+ var FEFUNCR = "feFuncR";
831
+ var FEGAUSSIANBLUR = "feGaussianBlur";
832
+ var FEIMAGE = "feImage";
833
+ var FEMERGE = "feMerge";
834
+ var FEMERGENODE = "feMergeNode";
835
+ var FEMORPHOLOGY = "feMorphology";
836
+ var FEOFFSET = "feOffset";
837
+ var FEPOINTLIGHT = "fePointLight";
838
+ var FESPECULARLIGHTING = "feSpecularLighting";
839
+ var FESPOTLIGHT = "feSpotLight";
840
+ var FETILE = "feTile";
841
+ var FETURBULENCE = "feTurbulence";
842
+ var FILTER = "filter";
843
+ var FOREIGNOBJECT = "foreignObject";
844
+ var G = "g";
845
+ var IMAGE = "image";
846
+ var LINE = "line";
847
+ var LINEARGRADIENT = "linearGradient";
848
+ var MARKER = "marker";
849
+ var MASK = "mask";
850
+ var METADATA = "metadata";
851
+ var MPATH = "mpath";
852
+ var PATH = "path";
853
+ var PATTERN = "pattern";
854
+ var POLYGON = "polygon";
855
+ var POLYLINE = "polyline";
856
+ var RADIALGRADIENT = "radialGradient";
857
+ var RECT = "rect";
858
+ var SET = "set";
859
+ var STOP = "stop";
860
+ var SVG = "svg";
861
+ var SWITCH = "switch";
862
+ var SYMBOL = "symbol";
863
+ var TEXT = "text";
864
+ var TEXTPATH = "textPath";
865
+ var TSPAN = "tspan";
866
+ var USE = "use";
867
+ var VIEW = "view";
868
+ var ANNOTATION = "annotation";
869
+ var ANNOTATION_XML = "annotation-xml";
870
+ var MACTION = "maction";
871
+ var MATH = "math";
872
+ var MERROR = "merror";
873
+ var MFRAC = "mfrac";
874
+ var MI = "mi";
875
+ var MMULTISCRIPTS = "mmultiscripts";
876
+ var MN = "mn";
877
+ var MO = "mo";
878
+ var MOVER = "mover";
879
+ var MPADDED = "mpadded";
880
+ var MPHANTOM = "mphantom";
881
+ var MPRESCRIPTS = "mprescripts";
882
+ var MROOT = "mroot";
883
+ var MROW = "mrow";
884
+ var MS = "ms";
885
+ var MSPACE = "mspace";
886
+ var MSQRT = "msqrt";
887
+ var MSTYLE = "mstyle";
888
+ var MSUB = "msub";
889
+ var MSUBSUP = "msubsup";
890
+ var MSUP = "msup";
891
+ var MTABLE = "mtable";
892
+ var MTD = "mtd";
893
+ var MTEXT = "mtext";
894
+ var MTR = "mtr";
895
+ var MUNDER = "munder";
896
+ var MUNDEROVER = "munderover";
897
+ var SEMANTICS = "semantics";
898
+
899
+ // src/html.ts
900
+ function htmlToVode(html) {
901
+ const div = document.createElement("div");
902
+ div.innerHTML = html.trim();
903
+ const vodes = [];
904
+ for (const child2 of div.childNodes) {
905
+ const v = elementToVode(child2);
906
+ if (v != null) vodes.push(v);
907
+ }
908
+ return vodes;
909
+ }
910
+ function elementToVode(element) {
911
+ if (element.nodeType === Node.TEXT_NODE) {
912
+ return element.textContent;
913
+ }
914
+ if (element.nodeType !== Node.ELEMENT_NODE) {
915
+ return void 0;
916
+ }
917
+ const vode2 = [element.tagName.toLowerCase()];
918
+ if (element.hasAttributes()) {
919
+ const props2 = {};
920
+ for (const att of element.attributes) {
921
+ props2[att.name] = att.value;
922
+ }
923
+ vode2.push(props2);
924
+ }
925
+ for (const child2 of element.childNodes) {
926
+ const v = elementToVode(child2);
927
+ if (v && (typeof v !== "string" || v.length > 0)) vode2.push(v);
928
+ }
929
+ return vode2;
930
+ }
931
+ return __toCommonJS(index_exports);
932
+ })();
package/dist/vode.min.js ADDED
@@ -0,0 +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);})();
package/dist/vode.min.mjs ADDED
@@ -0,0 +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};
package/logo.svg ADDED
@@ -0,0 +1,50 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40">
2
+ <style>
3
+ text {
4
+ font-weight: bold;
5
+ font-family: "Monaco", monospace;
6
+ color: #2d3748;
7
+ fill: #2d3748;
8
+ }
9
+
10
+ .braces-text {
11
+ font-size: 40px;
12
+ opacity: 0.666;
13
+ stroke: #aaa;
14
+ stroke-width: 1px;
15
+ }
16
+
17
+ .item-text {
18
+ paint-order: stroke;
19
+ stroke: #aaa;
20
+ stroke-width: 1px;
21
+ }
22
+
23
+ .comma-text {
24
+ font-size: 14px;
25
+ paint-order: stroke;
26
+ stroke: #fff;
27
+ stroke-width: 0.5px;
28
+ stroke-linecap: butt;
29
+ stroke-linejoin: miter;
30
+ opacity: 0.333;
31
+ }
32
+ </style>
33
+ <text x="-5%" y="76%" class="braces-text">[</text>
34
+
35
+ <text x="13%" y="76%" font-size="32" class="item-text">V</text>
36
+ <text x="24%" y="76%" class="comma-text">,</text>
37
+
38
+ <g transform="translate(32, -3)">
39
+ <text x="0" y="76%" font-size="20" class="item-text" >{</text>
40
+ <text x="12" y="76%" font-size="20" class="item-text">}</text>
41
+ </g>
42
+ <text x="50" y="76%" class="comma-text">,</text>
43
+
44
+ <text x="58" y="76%" font-size="24" class="item-text">d</text>
45
+ <text x="69" y="76%" class="comma-text">,</text>
46
+
47
+ <text x="76" y="76%" font-size="24" class="item-text">e</text>
48
+
49
+ <text x="83%" y="76%" class="braces-text">]</text>
50
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ryupold/vode",
3
- "version": "0.13.1",
3
+ "version": "0.13.2",
4
4
  "description": "Small web framework for minimal websites",
5
5
  "author": "Michael Scherbakow (ryupold)",
6
6
  "license": "MIT",
@@ -22,15 +22,18 @@
22
22
  "homepage": "https://github.com/ryupold/vode#readme",
23
23
  "module": "index.ts",
24
24
  "scripts": {
25
- "build": "bun build index.ts --outfile vode.mjs",
26
- "build-min": "bun build index.ts --outfile vode.min.mjs --minify",
27
- "pack": "rm *.tgz && bun run build && bun pm pack",
25
+ "build": "bun build index.ts --outfile dist/vode.mjs",
26
+ "build-min": "bun build index.ts --outfile dist/vode.min.mjs --minify",
27
+ "build-classic": "esbuild index.ts --outfile=dist/vode.js --bundle --global-name=V",
28
+ "build-classic-min": "esbuild index.ts --outfile=dist/vode.min.js --bundle --global-name=V --minify",
29
+ "release": "bun run build && bun run build-min && bun run build-classic && bun run build-classic-min",
28
30
  "publish": "bun publish --provenance --access public",
29
31
  "clean": "tsc -b --clean",
30
32
  "watch": "tsc -b -w"
31
33
  },
32
34
  "devDependencies": {
33
35
  "bun": "^1.2.18",
36
+ "esbuild": "^0.25.8",
34
37
  "typescript": "^5.8.3"
35
38
  }
36
39
  }
package/src/vode.ts CHANGED
@@ -10,11 +10,11 @@ export type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap & MathMLEl
10
10
  export type Component<S> = (s: S) => ChildVode<S>;
11
11
 
12
12
  export type Patch<S> =
13
- | NoRenderPatch // ignored
14
- | RenderPatch<S>
15
- | Promise<Patch<S>> | Effect<S>; // effects resulting in patches
13
+ | IgnoredPatch // ignored
14
+ | RenderPatch<S> // updates state, causes render
15
+ | Promise<Patch<S>> | Effect<S>; // is executed, awaited, results in patches
16
16
 
17
- export type NoRenderPatch = undefined | null | number | boolean | bigint | string | symbol | void;
17
+ export type IgnoredPatch = undefined | null | number | boolean | bigint | string | symbol | void;
18
18
  export type RenderPatch<S> = {} | DeepPartial<S>;
19
19
  export type DeepPartial<S> = { [P in keyof S]?: S[P] extends Array<infer I> ? Array<DeepPartial<I>> : DeepPartial<S[P]> };
20
20
 
@@ -30,7 +30,7 @@ export type EffectFunction<S> = (state: S, ...args: any[]) => Patch<S>;
30
30
  export type Props<S> = Partial<
31
31
  Omit<HTMLElement,
32
32
  keyof (DocumentFragment & ElementCSSInlineStyle & GlobalEventHandlers)> &
33
- { [K in keyof EventsMap]: Patch<S> } // all on* events
33
+ { [K in keyof EventsMap]: ((state: S, evt: Event) => Patch<S>) | Patch<S> } // all on* events
34
34
  > & {
35
35
  [_: string]: unknown,
36
36
  class?: ClassProp,
@@ -75,12 +75,12 @@ 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>, // can touch this, but let it be an object
79
- vode: AttachedVode<S>, //don't touch this
80
- patch: Dispatch<S>, // can't touch this
81
- render: () => void, // can't touch this
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
- isRendering: boolean, // under no circumstances touch this
83
+ isRendering: boolean,
84
84
  /** stats about the overall patches & last render time */
85
85
  stats: {
86
86
  patchCount: number,
@@ -96,7 +96,7 @@ export type ContainerNode<S> = HTMLElement & {
96
96
  export function createState<S extends object | unknown>(state: S): PatchableState<S> { return state as PatchableState<S>; }
97
97
 
98
98
  /** type safe way to create a patch. useful for type inference and autocompletion. */
99
- export function createPatch<S extends object | unknown>(p: DeepPartial<S> | Effect<S> | NoRenderPatch): typeof p { return p; }
99
+ export function createPatch<S extends object | unknown>(p: DeepPartial<S> | Effect<S> | IgnoredPatch): typeof p { return p; }
100
100
 
101
101
  /** type-safe way to create a vode. useful for type inference and autocompletion.
102
102
  *
/package/{vode.mjs → dist/vode.mjs} RENAMED
File without changes