@ryupold/vode 1.5.0 → 1.5.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 (8) hide show
  1. package/.github/workflows/npm-publish.yml +1 -2
  2. package/README.md +7 -18
  3. package/dist/vode.js +14 -7
  4. package/dist/vode.min.js +1 -1
  5. package/dist/vode.min.mjs +1 -1
  6. package/dist/vode.mjs +356 -356
  7. package/package.json +6 -7
  8. package/src/vode.ts +17 -7
package/dist/vode.mjs CHANGED
@@ -1,26 +1,19 @@
1
1
  // src/vode.ts
2
2
  var globals = {
3
- currentViewTransition: undefined,
4
- requestAnimationFrame: window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : (cb) => cb(),
5
- startViewTransition: document.startViewTransition ? document.startViewTransition.bind(document) : null
3
+ currentViewTransition: void 0,
4
+ requestAnimationFrame: !!window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : ((cb) => cb()),
5
+ startViewTransition: !!document.startViewTransition ? document.startViewTransition.bind(document) : null
6
6
  };
7
- function vode(tag, props, ...children) {
8
- if (!tag)
9
- throw new Error("first argument to vode() must be a tag name or a vode");
10
- if (Array.isArray(tag))
11
- return tag;
12
- else if (props)
13
- return [tag, props, ...children];
14
- else
15
- return [tag, ...children];
7
+ function vode(tag2, props2, ...children2) {
8
+ if (!tag2) throw new Error("first argument to vode() must be a tag name or a vode");
9
+ if (Array.isArray(tag2)) return tag2;
10
+ else if (props2) return [tag2, props2, ...children2];
11
+ else return [tag2, ...children2];
16
12
  }
17
13
  function app(container, state, dom, ...initialPatches) {
18
- if (!container?.parentElement)
19
- throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");
20
- if (!state || typeof state !== "object")
21
- throw new Error("second argument to app() must be a state object");
22
- if (typeof dom !== "function")
23
- throw new Error("third argument to app() must be a function that returns a vode");
14
+ if (!container?.parentElement) throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");
15
+ if (!state || typeof state !== "object") throw new Error("second argument to app() must be a state object");
16
+ if (typeof dom !== "function") throw new Error("third argument to app() must be a function that returns a vode");
24
17
  const _vode = {};
25
18
  _vode.syncRenderer = globals.requestAnimationFrame;
26
19
  _vode.asyncRenderer = globals.startViewTransition;
@@ -32,8 +25,7 @@ function app(container, state, dom, ...initialPatches) {
32
25
  configurable: true,
33
26
  writable: false,
34
27
  value: async (action, isAsync) => {
35
- if (!action || typeof action !== "function" && typeof action !== "object")
36
- return;
28
+ if (!action || typeof action !== "function" && typeof action !== "object") return;
37
29
  _vode.stats.patchCount++;
38
30
  if (action?.next) {
39
31
  const generator = action;
@@ -71,7 +63,8 @@ function app(container, state, dom, ...initialPatches) {
71
63
  _vode.qAsync = null;
72
64
  try {
73
65
  globals.currentViewTransition?.skipTransition();
74
- } catch {}
66
+ } catch {
67
+ }
75
68
  _vode.stats.syncRenderPatchCount++;
76
69
  _vode.renderSync();
77
70
  }
@@ -102,8 +95,7 @@ function app(container, state, dom, ...initialPatches) {
102
95
  _vode.stats.lastSyncRenderTime = Date.now() - sw;
103
96
  _vode.stats.syncRenderCount++;
104
97
  _vode.isRendering = false;
105
- if (_vode.qSync)
106
- _vode.renderSync();
98
+ if (_vode.qSync) _vode.renderSync();
107
99
  }
108
100
  }
109
101
  const sr = renderDom.bind(null, false);
@@ -113,8 +105,7 @@ function app(container, state, dom, ...initialPatches) {
113
105
  configurable: true,
114
106
  writable: false,
115
107
  value: () => {
116
- if (_vode.isRendering || !_vode.qSync)
117
- return;
108
+ if (_vode.isRendering || !_vode.qSync) return;
118
109
  _vode.isRendering = true;
119
110
  _vode.state = mergeState(_vode.state, _vode.qSync, true);
120
111
  _vode.qSync = null;
@@ -126,11 +117,9 @@ function app(container, state, dom, ...initialPatches) {
126
117
  configurable: true,
127
118
  writable: false,
128
119
  value: async () => {
129
- if (_vode.isAnimating || !_vode.qAsync)
130
- return;
120
+ if (_vode.isAnimating || !_vode.qAsync) return;
131
121
  await globals.currentViewTransition?.updateCallbackDone;
132
- if (_vode.isAnimating || !_vode.qAsync || document.hidden)
133
- return;
122
+ if (_vode.isAnimating || !_vode.qAsync || document.hidden) return;
134
123
  _vode.isAnimating = true;
135
124
  const sw = Date.now();
136
125
  try {
@@ -143,15 +132,21 @@ function app(container, state, dom, ...initialPatches) {
143
132
  _vode.stats.asyncRenderCount++;
144
133
  _vode.isAnimating = false;
145
134
  }
146
- if (_vode.qAsync)
147
- _vode.renderAsync();
135
+ if (_vode.qAsync) _vode.renderAsync();
148
136
  }
149
137
  });
150
138
  _vode.patch = state.patch;
151
139
  _vode.state = state;
152
140
  const root = container;
153
141
  root._vode = _vode;
154
- _vode.vode = render(state, _vode.patch, container.parentElement, Array.from(container.parentElement.children).indexOf(container), hydrate(container, true), dom(state));
142
+ _vode.vode = render(
143
+ state,
144
+ _vode.patch,
145
+ container.parentElement,
146
+ Array.from(container.parentElement.children).indexOf(container),
147
+ hydrate(container, true),
148
+ dom(state)
149
+ );
155
150
  for (const effect of initialPatches) {
156
151
  _vode.patch(effect);
157
152
  }
@@ -159,9 +154,8 @@ function app(container, state, dom, ...initialPatches) {
159
154
  }
160
155
  function defuse(container) {
161
156
  if (container?._vode) {
162
- let clearEvents = function(av) {
163
- if (!av?.node)
164
- return;
157
+ let clearEvents2 = function(av) {
158
+ if (!av?.node) return;
165
159
  const p = props(av);
166
160
  if (p) {
167
161
  for (const key in p) {
@@ -169,78 +163,76 @@ function defuse(container) {
169
163
  av.node[key] = null;
170
164
  }
171
165
  }
166
+ av.node["catch"] = null;
172
167
  }
173
168
  const kids = children(av);
174
169
  if (kids) {
175
- for (let child of kids) {
176
- clearEvents(child);
170
+ for (let child2 of kids) {
171
+ clearEvents2(child2);
177
172
  }
178
173
  }
179
174
  };
175
+ var clearEvents = clearEvents2;
180
176
  const v = container._vode;
181
177
  delete container["_vode"];
182
- Object.defineProperty(v.state, "patch", { value: undefined });
183
- Object.defineProperty(v, "renderSync", { value: () => {} });
184
- Object.defineProperty(v, "renderAsync", { value: () => {} });
185
- clearEvents(v.vode);
178
+ Object.defineProperty(v.state, "patch", { value: void 0 });
179
+ Object.defineProperty(v, "renderSync", { value: () => {
180
+ } });
181
+ Object.defineProperty(v, "renderAsync", { value: () => {
182
+ } });
183
+ clearEvents2(v.vode);
186
184
  }
187
185
  }
188
186
  function hydrate(element, prepareForRender) {
189
187
  if (element?.nodeType === Node.TEXT_NODE) {
190
188
  if (element.nodeValue?.trim() !== "")
191
189
  return prepareForRender ? element : element.nodeValue;
192
- return;
190
+ return void 0;
193
191
  } else if (element.nodeType === Node.COMMENT_NODE) {
194
- return;
192
+ return void 0;
195
193
  } else if (element.nodeType === Node.ELEMENT_NODE) {
196
- const tag = element.tagName.toLowerCase();
197
- const root = [tag];
198
- if (prepareForRender)
199
- root.node = element;
194
+ const tag2 = element.tagName.toLowerCase();
195
+ const root = [tag2];
196
+ if (prepareForRender) root.node = element;
200
197
  if (element?.hasAttributes()) {
201
- const props = {};
198
+ const props2 = {};
202
199
  const attr = element.attributes;
203
200
  for (let a of attr) {
204
- props[a.name] = a.value;
201
+ props2[a.name] = a.value;
205
202
  }
206
- root.push(props);
203
+ root.push(props2);
207
204
  }
208
205
  if (element.hasChildNodes()) {
209
206
  const remove = [];
210
- for (let child of element.childNodes) {
211
- const wet = child && hydrate(child, prepareForRender);
212
- if (wet)
213
- root.push(wet);
214
- else if (child && prepareForRender)
215
- remove.push(child);
207
+ for (let child2 of element.childNodes) {
208
+ const wet = child2 && hydrate(child2, prepareForRender);
209
+ if (wet) root.push(wet);
210
+ else if (child2 && prepareForRender) remove.push(child2);
216
211
  }
217
- for (let child of remove) {
218
- child.remove();
212
+ for (let child2 of remove) {
213
+ child2.remove();
219
214
  }
220
215
  }
221
216
  return root;
222
217
  } else {
223
- return;
218
+ return void 0;
224
219
  }
225
220
  }
226
221
  function memo(compare, componentOrProps) {
227
- if (!compare || !Array.isArray(compare))
228
- throw new Error("first argument to memo() must be an array of values to compare");
229
- if (typeof componentOrProps !== "function")
230
- throw new Error("second argument to memo() must be a function that returns a vode or props object");
222
+ if (!compare || !Array.isArray(compare)) throw new Error("first argument to memo() must be an array of values to compare");
223
+ if (typeof componentOrProps !== "function") throw new Error("second argument to memo() must be a function that returns a vode or props object");
231
224
  componentOrProps.__memo = compare;
232
225
  return componentOrProps;
233
226
  }
234
227
  function createState(state) {
235
- if (!state || typeof state !== "object")
236
- throw new Error("createState() must be called with a state object");
228
+ if (!state || typeof state !== "object") throw new Error("createState() must be called with a state object");
237
229
  return state;
238
230
  }
239
231
  function createPatch(p) {
240
232
  return p;
241
233
  }
242
234
  function tag(v) {
243
- return v ? Array.isArray(v) ? v[0] : typeof v === "string" || v.nodeType === Node.TEXT_NODE ? "#text" : undefined : undefined;
235
+ return !!v ? Array.isArray(v) ? v[0] : typeof v === "string" || v.nodeType === Node.TEXT_NODE ? "#text" : void 0 : void 0;
244
236
  }
245
237
  function props(vode2) {
246
238
  if (Array.isArray(vode2) && vode2.length > 1 && vode2[1] && !Array.isArray(vode2[1])) {
@@ -248,7 +240,7 @@ function props(vode2) {
248
240
  return vode2[1];
249
241
  }
250
242
  }
251
- return;
243
+ return void 0;
252
244
  }
253
245
  function children(vode2) {
254
246
  const start = childrenStart(vode2);
@@ -259,23 +251,19 @@ function children(vode2) {
259
251
  }
260
252
  function childCount(vode2) {
261
253
  const start = childrenStart(vode2);
262
- if (start < 0)
263
- return 0;
254
+ if (start < 0) return 0;
264
255
  return vode2.length - start;
265
256
  }
266
257
  function child(vode2, index) {
267
258
  const start = childrenStart(vode2);
268
- if (start > 0)
269
- return vode2[index + start];
270
- else
271
- return;
259
+ if (start > 0) return vode2[index + start];
260
+ else return void 0;
272
261
  }
273
262
  function childrenStart(vode2) {
274
263
  return props(vode2) ? vode2.length > 2 ? 2 : -1 : Array.isArray(vode2) && vode2.length > 1 ? 1 : -1;
275
264
  }
276
265
  function mergeState(target, source, allowDeletion) {
277
- if (!source)
278
- return target;
266
+ if (!source) return target;
279
267
  for (const key in source) {
280
268
  const value = source[key];
281
269
  if (value && typeof value === "object") {
@@ -286,12 +274,9 @@ function mergeState(target, source, allowDeletion) {
286
274
  } else if (value instanceof Date && targetValue !== value) {
287
275
  target[key] = new Date(value);
288
276
  } else {
289
- if (Array.isArray(targetValue))
290
- target[key] = mergeState({}, value, allowDeletion);
291
- else if (typeof targetValue === "object")
292
- mergeState(target[key], value, allowDeletion);
293
- else
294
- target[key] = mergeState({}, value, allowDeletion);
277
+ if (Array.isArray(targetValue)) target[key] = mergeState({}, value, allowDeletion);
278
+ else if (typeof targetValue === "object") mergeState(target[key], value, allowDeletion);
279
+ else target[key] = mergeState({}, value, allowDeletion);
295
280
  }
296
281
  } else if (Array.isArray(value)) {
297
282
  target[key] = [...value];
@@ -300,7 +285,7 @@ function mergeState(target, source, allowDeletion) {
300
285
  } else {
301
286
  target[key] = mergeState({}, value, allowDeletion);
302
287
  }
303
- } else if (value === undefined && allowDeletion) {
288
+ } else if (value === void 0 && allowDeletion) {
304
289
  delete target[key];
305
290
  } else {
306
291
  target[key] = value;
@@ -320,7 +305,7 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
320
305
  if (isNoVode) {
321
306
  oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
322
307
  oldNode?.remove();
323
- return;
308
+ return void 0;
324
309
  }
325
310
  const isText = !isNoVode && isTextVode(newVode);
326
311
  const isNode = !isNoVode && isNaturalVode(newVode);
@@ -355,13 +340,17 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
355
340
  if (isNode && (!oldNode || oldIsText || oldVode[0] !== newVode[0])) {
356
341
  const newvode = newVode;
357
342
  if (1 in newvode) {
358
- newvode[1] = remember(state, newvode[1], undefined);
343
+ newvode[1] = remember(state, newvode[1], void 0);
359
344
  }
360
345
  const properties = props(newVode);
361
346
  xmlns = properties?.xmlns || xmlns;
362
347
  const newNode = xmlns ? document.createElementNS(xmlns, newVode[0]) : document.createElement(newVode[0]);
363
348
  newVode.node = newNode;
364
- patchProperties(state, patch, newNode, undefined, properties);
349
+ patchProperties(state, patch, newNode, void 0, properties);
350
+ if (!!properties && "catch" in properties) {
351
+ newVode.node["catch"] = null;
352
+ newVode.node.removeAttribute("catch");
353
+ }
365
354
  if (oldNode) {
366
355
  oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
367
356
  oldNode.replaceWith(newNode);
@@ -374,9 +363,9 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
374
363
  }
375
364
  const newChildren = children(newVode);
376
365
  if (newChildren) {
377
- for (let i = 0;i < newChildren.length; i++) {
366
+ for (let i = 0; i < newChildren.length; i++) {
378
367
  const child2 = newChildren[i];
379
- const attached = render(state, patch, newNode, i, undefined, child2, xmlns);
368
+ const attached = render(state, patch, newNode, i, void 0, child2, xmlns);
380
369
  newVode[properties ? i + 2 : i + 1] = attached;
381
370
  }
382
371
  }
@@ -387,24 +376,26 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
387
376
  newVode.node = oldNode;
388
377
  const newvode = newVode;
389
378
  const oldvode = oldVode;
390
- let hasProps = false;
379
+ const properties = props(newVode);
380
+ let hasProps = !!properties;
381
+ const oldProps = props(oldVode);
391
382
  if (newvode[1]?.__memo) {
392
383
  const prev = newvode[1];
393
384
  newvode[1] = remember(state, newvode[1], oldvode[1]);
394
385
  if (prev !== newvode[1]) {
395
- const properties = props(newVode);
396
- patchProperties(state, patch, oldNode, props(oldVode), properties);
397
- hasProps = !!properties;
386
+ patchProperties(state, patch, oldNode, oldProps, properties);
398
387
  }
399
388
  } else {
400
- const properties = props(newVode);
401
- patchProperties(state, patch, oldNode, props(oldVode), properties);
402
- hasProps = !!properties;
389
+ patchProperties(state, patch, oldNode, oldProps, properties);
390
+ }
391
+ if (!!properties?.catch && oldProps?.catch !== properties.catch) {
392
+ newVode.node["catch"] = null;
393
+ newVode.node.removeAttribute("catch");
403
394
  }
404
395
  const newKids = children(newVode);
405
396
  const oldKids = children(oldVode);
406
397
  if (newKids) {
407
- for (let i = 0;i < newKids.length; i++) {
398
+ for (let i = 0; i < newKids.length; i++) {
408
399
  const child2 = newKids[i];
409
400
  const oldChild = oldKids && oldKids[i];
410
401
  const attached = render(state, patch, oldNode, i, oldChild, child2, xmlns);
@@ -415,8 +406,8 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
415
406
  }
416
407
  if (oldKids) {
417
408
  const newKidsCount = newKids ? newKids.length : 0;
418
- for (let i = oldKids.length - 1;i >= newKidsCount; i--) {
419
- render(state, patch, oldNode, i, oldKids[i], undefined, xmlns);
409
+ for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
410
+ render(state, patch, oldNode, i, oldKids[i], void 0, xmlns);
420
411
  }
421
412
  }
422
413
  return newVode;
@@ -425,12 +416,20 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
425
416
  const catchVode = props(newVode)?.catch;
426
417
  if (catchVode) {
427
418
  const handledVode = typeof catchVode === "function" ? catchVode(state, error) : catchVode;
428
- return render(state, patch, parent, childIndex, hydrate(newVode?.node || oldVode?.node, true), handledVode, xmlns);
419
+ return render(
420
+ state,
421
+ patch,
422
+ parent,
423
+ childIndex,
424
+ hydrate(newVode?.node || oldVode?.node, true),
425
+ handledVode,
426
+ xmlns
427
+ );
429
428
  } else {
430
429
  throw error;
431
430
  }
432
431
  }
433
- return;
432
+ return void 0;
434
433
  }
435
434
  function isNaturalVode(x) {
436
435
  return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
@@ -445,14 +444,13 @@ function remember(state, present, past) {
445
444
  const pastMemo = past?.__memo;
446
445
  if (Array.isArray(presentMemo) && Array.isArray(pastMemo) && presentMemo.length === pastMemo.length) {
447
446
  let same = true;
448
- for (let i = 0;i < presentMemo.length; i++) {
447
+ for (let i = 0; i < presentMemo.length; i++) {
449
448
  if (presentMemo[i] !== pastMemo[i]) {
450
449
  same = false;
451
450
  break;
452
451
  }
453
452
  }
454
- if (same)
455
- return past;
453
+ if (same) return past;
456
454
  }
457
455
  const newRender = unwrap(present, state);
458
456
  if (typeof newRender === "object") {
@@ -468,17 +466,14 @@ function unwrap(c, s) {
468
466
  }
469
467
  }
470
468
  function patchProperties(s, patch, node, oldProps, newProps) {
471
- if (!newProps && !oldProps)
472
- return;
469
+ if (!newProps && !oldProps) return;
473
470
  if (oldProps) {
474
471
  for (const key in oldProps) {
475
472
  const oldValue = oldProps[key];
476
473
  const newValue = newProps?.[key];
477
474
  if (oldValue !== newValue) {
478
- if (newProps)
479
- newProps[key] = patchProperty(s, patch, node, key, oldValue, newValue);
480
- else
481
- patchProperty(s, patch, node, key, oldValue, undefined);
475
+ if (newProps) newProps[key] = patchProperty(s, patch, node, key, oldValue, newValue);
476
+ else patchProperty(s, patch, node, key, oldValue, void 0);
482
477
  }
483
478
  }
484
479
  }
@@ -486,13 +481,13 @@ function patchProperties(s, patch, node, oldProps, newProps) {
486
481
  for (const key in newProps) {
487
482
  if (!(key in oldProps)) {
488
483
  const newValue = newProps[key];
489
- newProps[key] = patchProperty(s, patch, node, key, undefined, newValue);
484
+ newProps[key] = patchProperty(s, patch, node, key, void 0, newValue);
490
485
  }
491
486
  }
492
487
  } else if (newProps) {
493
488
  for (const key in newProps) {
494
489
  const newValue = newProps[key];
495
- newProps[key] = patchProperty(s, patch, node, key, undefined, newValue);
490
+ newProps[key] = patchProperty(s, patch, node, key, void 0, newValue);
496
491
  }
497
492
  }
498
493
  }
@@ -501,8 +496,7 @@ function patchProperty(s, patch, node, key, oldValue, newValue) {
501
496
  if (!newValue) {
502
497
  node.style.cssText = "";
503
498
  } else if (typeof newValue === "string") {
504
- if (oldValue !== newValue)
505
- node.style.cssText = newValue;
499
+ if (oldValue !== newValue) node.style.cssText = newValue;
506
500
  } else if (oldValue && typeof oldValue === "object") {
507
501
  for (let k in oldValue) {
508
502
  const nv = newValue[k];
@@ -543,7 +537,7 @@ function patchProperty(s, patch, node, key, oldValue, newValue) {
543
537
  }
544
538
  } else {
545
539
  node[key] = newValue;
546
- if (newValue === undefined || newValue === null || newValue === false)
540
+ if (newValue === void 0 || newValue === null || newValue === false)
547
541
  node.removeAttribute(key);
548
542
  else
549
543
  node.setAttribute(key, newValue);
@@ -560,6 +554,7 @@ function classString(classProp) {
560
554
  else
561
555
  return "";
562
556
  }
557
+
563
558
  // src/vode-tags.ts
564
559
  var A = "a";
565
560
  var ABBR = "abbr";
@@ -762,14 +757,13 @@ var MTR = "mtr";
762
757
  var MUNDER = "munder";
763
758
  var MUNDEROVER = "munderover";
764
759
  var SEMANTICS = "semantics";
760
+
765
761
  // src/merge-class.ts
766
762
  function mergeClass(...classes) {
767
- if (!classes || classes.length === 0)
768
- return null;
769
- if (classes.length === 1)
770
- return classes[0];
763
+ if (!classes || classes.length === 0) return null;
764
+ if (classes.length === 1) return classes[0];
771
765
  let finalClass = classes[0];
772
- for (let index = 1;index < classes.length; index++) {
766
+ for (let index = 1; index < classes.length; index++) {
773
767
  const a = finalClass, b = classes[index];
774
768
  if (!a) {
775
769
  finalClass = b;
@@ -778,16 +772,16 @@ function mergeClass(...classes) {
778
772
  } else if (typeof a === "string" && typeof b === "string") {
779
773
  const aSplit = a.split(" ");
780
774
  const bSplit = b.split(" ");
781
- const classSet = new Set([...aSplit, ...bSplit]);
775
+ const classSet = /* @__PURE__ */ new Set([...aSplit, ...bSplit]);
782
776
  finalClass = Array.from(classSet).join(" ").trim();
783
777
  } else if (typeof a === "string" && Array.isArray(b)) {
784
- const classSet = new Set([...b, ...a.split(" ")]);
778
+ const classSet = /* @__PURE__ */ new Set([...b, ...a.split(" ")]);
785
779
  finalClass = Array.from(classSet).join(" ").trim();
786
780
  } else if (Array.isArray(a) && typeof b === "string") {
787
- const classSet = new Set([...a, ...b.split(" ")]);
781
+ const classSet = /* @__PURE__ */ new Set([...a, ...b.split(" ")]);
788
782
  finalClass = Array.from(classSet).join(" ").trim();
789
783
  } else if (Array.isArray(a) && Array.isArray(b)) {
790
- const classSet = new Set([...a, ...b]);
784
+ const classSet = /* @__PURE__ */ new Set([...a, ...b]);
791
785
  finalClass = Array.from(classSet).join(" ").trim();
792
786
  } else if (typeof a === "string" && typeof b === "object") {
793
787
  finalClass = { [a]: true, ...b };
@@ -810,25 +804,23 @@ function mergeClass(...classes) {
810
804
  aa[bKey] = b[bKey];
811
805
  }
812
806
  finalClass = aa;
813
- } else
814
- throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
807
+ } else throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
815
808
  }
816
809
  return finalClass;
817
810
  }
811
+
818
812
  // src/state-context.ts
819
- class KeyStateContext {
820
- state;
821
- path;
822
- keys;
813
+ var KeyStateContext = class {
823
814
  constructor(state, path) {
824
815
  this.state = state;
825
816
  this.path = path;
826
817
  this.keys = path.split(".");
827
818
  }
819
+ keys;
828
820
  get() {
829
821
  const keys = this.keys;
830
- let raw = this.state ? this.state[keys[0]] : undefined;
831
- for (let i = 1;i < keys.length && !!raw; i++) {
822
+ let raw = this.state ? this.state[keys[0]] : void 0;
823
+ for (let i = 1; i < keys.length && !!raw; i++) {
832
824
  raw = raw[keys[i]];
833
825
  }
834
826
  return raw;
@@ -847,6 +839,19 @@ class KeyStateContext {
847
839
  this.state.patch(this.createPatch(value));
848
840
  }
849
841
  }
842
+ /**
843
+ * Creates a render-patch for the parent state by setting a nested sub-state value while creating necessary structure.
844
+ *
845
+ * @example
846
+ * ```typescript
847
+ * const ctx = new KeyStateContext(state, 'user.profile.settings');
848
+ * const patch = ctx.createPatch({ theme: 'light' });
849
+ * // patch is { user: { profile: { settings: { theme: 'light' } } } }
850
+ * ```
851
+ *
852
+ * @param value
853
+ * @returns {{key-path}:{...: value}} render-patch for the parent state
854
+ */
850
855
  createPatch(value) {
851
856
  const renderPatch = {};
852
857
  this.putDeep(value, renderPatch);
@@ -860,7 +865,7 @@ class KeyStateContext {
860
865
  if (typeof raw !== "object" || raw === null) {
861
866
  target[keys[i]] = raw = {};
862
867
  }
863
- for (i = 1;i < keys.length - 1; i++) {
868
+ for (i = 1; i < keys.length - 1; i++) {
864
869
  const p = raw;
865
870
  raw = raw[keys[i]];
866
871
  if (typeof raw !== "object" || raw === null) {
@@ -875,237 +880,232 @@ class KeyStateContext {
875
880
  target[keys[0]] = value;
876
881
  }
877
882
  }
878
- }
879
-
880
- class DelegateStateContext {
881
- state;
882
- get;
883
- put;
884
- patch;
883
+ };
884
+ var DelegateStateContext = class {
885
885
  constructor(state, get, put, patch) {
886
886
  this.state = state;
887
887
  this.get = get;
888
888
  this.put = put;
889
889
  this.patch = patch;
890
890
  }
891
- }
891
+ };
892
892
  export {
893
- vode,
894
- tag,
895
- props,
896
- mergeClass,
897
- memo,
898
- hydrate,
899
- globals,
900
- defuse,
901
- createState,
902
- createPatch,
903
- childrenStart,
904
- children,
905
- childCount,
906
- child,
907
- app,
908
- WBR,
909
- VIEW,
910
- VIDEO,
911
- VAR,
912
- USE,
913
- UL,
914
- U,
915
- TSPAN,
916
- TRACK,
917
- TR,
918
- TITLE,
919
- TIME,
920
- THEAD,
921
- TH,
922
- TFOOT,
923
- TEXTPATH,
924
- TEXTAREA,
925
- TEXT,
926
- TEMPLATE,
927
- TD,
928
- TBODY,
929
- TABLE,
930
- SYMBOL,
931
- SWITCH,
932
- SVG,
933
- SUP,
934
- SUMMARY,
935
- SUB,
936
- STYLE,
937
- STRONG,
938
- STOP,
939
- SPAN,
940
- SOURCE,
941
- SMALL,
942
- SLOT,
943
- SET,
944
- SEMANTICS,
945
- SELECT,
946
- SECTION,
947
- SEARCH,
948
- SCRIPT,
949
- SAMP,
950
- S,
951
- RUBY,
952
- RT,
953
- RP,
954
- RECT,
955
- RADIALGRADIENT,
956
- Q,
957
- PROGRESS,
958
- PRE,
959
- POLYLINE,
960
- POLYGON,
961
- PICTURE,
962
- PATTERN,
963
- PATH,
964
- P,
965
- OUTPUT,
966
- OPTION,
967
- OPTGROUP,
968
- OL,
969
- OBJECT,
970
- NOSCRIPT,
971
- NAV,
972
- MUNDEROVER,
973
- MUNDER,
974
- MTR,
975
- MTEXT,
976
- MTD,
977
- MTABLE,
978
- MSUP,
979
- MSUBSUP,
980
- MSUB,
981
- MSTYLE,
982
- MSQRT,
983
- MSPACE,
984
- MS,
985
- MROW,
986
- MROOT,
987
- MPRESCRIPTS,
988
- MPHANTOM,
989
- MPATH,
990
- MPADDED,
991
- MOVER,
992
- MO,
993
- MN,
994
- MMULTISCRIPTS,
995
- MI,
996
- MFRAC,
997
- METER,
998
- METADATA,
999
- META,
1000
- MERROR,
1001
- MENU,
1002
- MATH,
1003
- MASK,
1004
- MARKER,
1005
- MARK,
1006
- MAP,
1007
- MAIN,
1008
- MACTION,
1009
- LINK,
1010
- LINEARGRADIENT,
1011
- LINE,
1012
- LI,
1013
- LEGEND,
1014
- LABEL,
1015
- KeyStateContext,
1016
- KBD,
1017
- INS,
1018
- INPUT,
1019
- IMG,
1020
- IMAGE,
1021
- IFRAME,
1022
- I,
1023
- HTML,
1024
- HR,
1025
- HGROUP,
1026
- HEADER,
1027
- HEAD,
1028
- H6,
1029
- H5,
1030
- H4,
1031
- H3,
1032
- H2,
1033
- H1,
1034
- G,
1035
- FORM,
1036
- FOREIGNOBJECT,
1037
- FOOTER,
1038
- FILTER,
1039
- FIGURE,
1040
- FIGCAPTION,
1041
- FIELDSET,
1042
- FETURBULENCE,
1043
- FETILE,
1044
- FESPOTLIGHT,
1045
- FESPECULARLIGHTING,
1046
- FEPOINTLIGHT,
1047
- FEOFFSET,
1048
- FEMORPHOLOGY,
1049
- FEMERGENODE,
1050
- FEMERGE,
1051
- FEIMAGE,
1052
- FEGAUSSIANBLUR,
1053
- FEFUNCR,
1054
- FEFUNCG,
1055
- FEFUNCB,
1056
- FEFUNCA,
1057
- FEFLOOD,
1058
- FEDROPSHADOW,
1059
- FEDISTANTLIGHT,
1060
- FEDISPLACEMENTMAP,
1061
- FEDIFFUSELIGHTING,
1062
- FECONVOLVEMATRIX,
1063
- FECOMPOSITE,
1064
- FECOMPONENTTRANSFER,
1065
- FECOLORMATRIX,
1066
- FEBLEND,
1067
- EMBED,
1068
- EM,
1069
- ELLIPSE,
1070
- DelegateStateContext,
1071
- DT,
1072
- DL,
1073
- DIV,
1074
- DIALOG,
1075
- DFN,
1076
- DETAILS,
1077
- DESC,
1078
- DEL,
1079
- DEFS,
1080
- DD,
1081
- DATALIST,
1082
- DATA,
1083
- COLGROUP,
1084
- COL,
1085
- CODE,
1086
- CLIPPATH,
1087
- CITE,
1088
- CIRCLE,
1089
- CAPTION,
1090
- CANVAS,
1091
- BUTTON,
1092
- BR,
1093
- BODY,
1094
- BLOCKQUOTE,
1095
- BDO,
1096
- BDI,
1097
- BASE,
1098
- B,
1099
- AUDIO,
1100
- ASIDE,
1101
- ARTICLE,
1102
- AREA,
1103
- ANNOTATION_XML,
1104
- ANNOTATION,
1105
- ANIMATETRANSFORM,
1106
- ANIMATEMOTION,
1107
- ANIMATE,
1108
- ADDRESS,
893
+ A,
1109
894
  ABBR,
1110
- A
895
+ ADDRESS,
896
+ ANIMATE,
897
+ ANIMATEMOTION,
898
+ ANIMATETRANSFORM,
899
+ ANNOTATION,
900
+ ANNOTATION_XML,
901
+ AREA,
902
+ ARTICLE,
903
+ ASIDE,
904
+ AUDIO,
905
+ B,
906
+ BASE,
907
+ BDI,
908
+ BDO,
909
+ BLOCKQUOTE,
910
+ BODY,
911
+ BR,
912
+ BUTTON,
913
+ CANVAS,
914
+ CAPTION,
915
+ CIRCLE,
916
+ CITE,
917
+ CLIPPATH,
918
+ CODE,
919
+ COL,
920
+ COLGROUP,
921
+ DATA,
922
+ DATALIST,
923
+ DD,
924
+ DEFS,
925
+ DEL,
926
+ DESC,
927
+ DETAILS,
928
+ DFN,
929
+ DIALOG,
930
+ DIV,
931
+ DL,
932
+ DT,
933
+ DelegateStateContext,
934
+ ELLIPSE,
935
+ EM,
936
+ EMBED,
937
+ FEBLEND,
938
+ FECOLORMATRIX,
939
+ FECOMPONENTTRANSFER,
940
+ FECOMPOSITE,
941
+ FECONVOLVEMATRIX,
942
+ FEDIFFUSELIGHTING,
943
+ FEDISPLACEMENTMAP,
944
+ FEDISTANTLIGHT,
945
+ FEDROPSHADOW,
946
+ FEFLOOD,
947
+ FEFUNCA,
948
+ FEFUNCB,
949
+ FEFUNCG,
950
+ FEFUNCR,
951
+ FEGAUSSIANBLUR,
952
+ FEIMAGE,
953
+ FEMERGE,
954
+ FEMERGENODE,
955
+ FEMORPHOLOGY,
956
+ FEOFFSET,
957
+ FEPOINTLIGHT,
958
+ FESPECULARLIGHTING,
959
+ FESPOTLIGHT,
960
+ FETILE,
961
+ FETURBULENCE,
962
+ FIELDSET,
963
+ FIGCAPTION,
964
+ FIGURE,
965
+ FILTER,
966
+ FOOTER,
967
+ FOREIGNOBJECT,
968
+ FORM,
969
+ G,
970
+ H1,
971
+ H2,
972
+ H3,
973
+ H4,
974
+ H5,
975
+ H6,
976
+ HEAD,
977
+ HEADER,
978
+ HGROUP,
979
+ HR,
980
+ HTML,
981
+ I,
982
+ IFRAME,
983
+ IMAGE,
984
+ IMG,
985
+ INPUT,
986
+ INS,
987
+ KBD,
988
+ KeyStateContext,
989
+ LABEL,
990
+ LEGEND,
991
+ LI,
992
+ LINE,
993
+ LINEARGRADIENT,
994
+ LINK,
995
+ MACTION,
996
+ MAIN,
997
+ MAP,
998
+ MARK,
999
+ MARKER,
1000
+ MASK,
1001
+ MATH,
1002
+ MENU,
1003
+ MERROR,
1004
+ META,
1005
+ METADATA,
1006
+ METER,
1007
+ MFRAC,
1008
+ MI,
1009
+ MMULTISCRIPTS,
1010
+ MN,
1011
+ MO,
1012
+ MOVER,
1013
+ MPADDED,
1014
+ MPATH,
1015
+ MPHANTOM,
1016
+ MPRESCRIPTS,
1017
+ MROOT,
1018
+ MROW,
1019
+ MS,
1020
+ MSPACE,
1021
+ MSQRT,
1022
+ MSTYLE,
1023
+ MSUB,
1024
+ MSUBSUP,
1025
+ MSUP,
1026
+ MTABLE,
1027
+ MTD,
1028
+ MTEXT,
1029
+ MTR,
1030
+ MUNDER,
1031
+ MUNDEROVER,
1032
+ NAV,
1033
+ NOSCRIPT,
1034
+ OBJECT,
1035
+ OL,
1036
+ OPTGROUP,
1037
+ OPTION,
1038
+ OUTPUT,
1039
+ P,
1040
+ PATH,
1041
+ PATTERN,
1042
+ PICTURE,
1043
+ POLYGON,
1044
+ POLYLINE,
1045
+ PRE,
1046
+ PROGRESS,
1047
+ Q,
1048
+ RADIALGRADIENT,
1049
+ RECT,
1050
+ RP,
1051
+ RT,
1052
+ RUBY,
1053
+ S,
1054
+ SAMP,
1055
+ SCRIPT,
1056
+ SEARCH,
1057
+ SECTION,
1058
+ SELECT,
1059
+ SEMANTICS,
1060
+ SET,
1061
+ SLOT,
1062
+ SMALL,
1063
+ SOURCE,
1064
+ SPAN,
1065
+ STOP,
1066
+ STRONG,
1067
+ STYLE,
1068
+ SUB,
1069
+ SUMMARY,
1070
+ SUP,
1071
+ SVG,
1072
+ SWITCH,
1073
+ SYMBOL,
1074
+ TABLE,
1075
+ TBODY,
1076
+ TD,
1077
+ TEMPLATE,
1078
+ TEXT,
1079
+ TEXTAREA,
1080
+ TEXTPATH,
1081
+ TFOOT,
1082
+ TH,
1083
+ THEAD,
1084
+ TIME,
1085
+ TITLE,
1086
+ TR,
1087
+ TRACK,
1088
+ TSPAN,
1089
+ U,
1090
+ UL,
1091
+ USE,
1092
+ VAR,
1093
+ VIDEO,
1094
+ VIEW,
1095
+ WBR,
1096
+ app,
1097
+ child,
1098
+ childCount,
1099
+ children,
1100
+ childrenStart,
1101
+ createPatch,
1102
+ createState,
1103
+ defuse,
1104
+ globals,
1105
+ hydrate,
1106
+ memo,
1107
+ mergeClass,
1108
+ props,
1109
+ tag,
1110
+ vode
1111
1111
  };