@ryupold/vode 1.8.11 → 1.9.0

package/dist/vode.tests.mjs

@@ -96,9 +96,8 @@ function app(container, state, dom, ...initialPatches) {
   });
   function renderDom(isAnimated) {
     const sw = performance.now();
-    const vom = dom(_vode.state);
-    _vode.vode = render(_vode.state, container.parentElement, 0, 0, _vode.vode, vom);
-    if (container.tagName.toUpperCase() !== vom[0].toUpperCase()) {
+    _vode.vode = render(_vode.state, container.parentElement, 0, 0, _vode.vode, dom(_vode.state));
+    if (container.tagName.toLowerCase() !== _vode.vode[0].toLowerCase()) {
       container = _vode.vode.node;
       container._vode = _vode;
     }
@@ -160,6 +159,10 @@ function app(container, state, dom, ...initialPatches) {
     hydrate(container, true),
     dom(state)
   );
+  if (container.tagName.toLowerCase() !== _vode.vode[0].toLowerCase()) {
+    container = _vode.vode.node;
+    container._vode = _vode;
+  }
   const continueRendering = _vode.stats.syncRenderPatchCount !== patchCountBefore;
   _vode.isRendering = 0;
   _vode.stats.syncRenderCount++;
@@ -688,8 +691,6 @@ function mergeClass(...classes) {
       finalClass = { [a]: true, ...b };
     } else if (typeof a === "object" && typeof b === "string") {
       finalClass = { ...a, [b]: true };
-    } else if (typeof a === "object" && typeof b === "object") {
-      finalClass = { ...a, ...b };
     } else if (typeof a === "object" && Array.isArray(b)) {
       const aa = { ...a };
       for (const item of b) {
@@ -705,6 +706,8 @@ function mergeClass(...classes) {
         aa[bKey] = b[bKey];
       }
       finalClass = aa;
+    } else if (typeof a === "object" && typeof b === "object") {
+      finalClass = { ...a, ...b };
     } else throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
   }
   return finalClass;
@@ -755,7 +758,12 @@ function mergeProps(...props2) {
 }
 
 // src/state-context.ts
-function context(state) {
+function context(state, producePath) {
+  if (producePath) {
+    const proxy = producePath(proxyState(state, []));
+    const keys = proxy["___KeYs___"];
+    return new ProxyStateContextImpl(state, keys);
+  }
   return new ProxyStateContextImpl(state, []);
 }
 var ProxyStateContextImpl = class _ProxyStateContextImpl {
@@ -813,16 +821,17 @@ var ProxyStateContextImpl = class _ProxyStateContextImpl {
     }
     return new Proxy(this, {
       get: (target, prop, receiver) => {
-        if (prop === "state")
-          return state;
         if (prop === "get")
           return get;
         if (prop === "put")
           return put;
         if (prop === "patch")
           return patch;
-        const newKeys = [...target.keys, String(prop)];
+        const newKeys = [...keys, String(prop)];
         return new _ProxyStateContextImpl(target.state, newKeys);
+      },
+      set: (target, p, newValue, receiver) => {
+        throw new Error("ProxyStateContext is not meant to be directly mutated. Use put() or patch() methods on the StateContext instead");
       }
     });
   }
@@ -836,6 +845,20 @@ var ProxyStateContextImpl = class _ProxyStateContextImpl {
   patch(value) {
   }
 };
+function proxyState(state, keys) {
+  return new Proxy(state, {
+    get: (target, prop, receiver) => {
+      if (prop === "___KeYs___") {
+        return keys;
+      }
+      const newKeys = [...keys, String(prop)];
+      return proxyState(state, newKeys);
+    },
+    set: (target, p, newValue, receiver) => {
+      throw new Error("ProxyState is not meant to be directly mutated");
+    }
+  });
+}
 
 // test/mocks.ts
 var NodeConstants = {
@@ -1345,7 +1368,7 @@ but got <${tagName.toUpperCase()}>${failSuffix}`);
                   } else {
                     attributeValue = e.getAttribute(k);
                   }
-                  if (!attributeValue) {
+                  if (attributeValue === null) {
                     throw new ExpectationError(that, `expected at
 ${path.join(" > ")}
 
@@ -1627,8 +1650,7 @@ var tests_app_default = {
     const state = { a: 1, b: 2 };
     app(container, state, () => [DIV]);
     await state.patch([{ a: 10 }, { b: 20 }]);
-    await expect(state.a).toEqual(10);
-    await expect(state.b).toEqual(20);
+    await expect(state).toEqual({ a: 10, b: 20 });
   },
   "app(): multiple sequential patches both apply": async () => {
     const root = document.createElement("div");
@@ -1814,6 +1836,42 @@ var tests_app_default = {
     );
     const el = container._vode.vode.node;
     expect(el.onclick).toBeA("function");
+  },
+  "app(): class as array renders correctly": async () => {
+    const root = document.createElement("div");
+    const container = document.createElement("div");
+    root.appendChild(container);
+    app(
+      container,
+      {},
+      () => [DIV, { class: ["foo", "bar", "baz"] }, "text"]
+    );
+    await expect(container).toMatch([DIV, { class: "foo bar baz" }, "text"]);
+  },
+  "app(): class as number becomes empty string": async () => {
+    const root = document.createElement("div");
+    const container = document.createElement("div");
+    root.appendChild(container);
+    app(
+      container,
+      {},
+      () => [DIV, { class: 123 }, "text"]
+    );
+    await expect(container).toMatch([DIV, { class: "" }, "text"]);
+  },
+  "app(): style object to string transition": async () => {
+    const root = document.createElement("div");
+    const container = document.createElement("div");
+    root.appendChild(container);
+    const state = { useObject: true };
+    app(
+      container,
+      state,
+      (s) => [DIV, { style: s.useObject ? { color: "red" } : "color: blue" }, "text"]
+    );
+    await expect(container).toMatch([DIV, "text"]);
+    state.patch({ useObject: false });
+    await expect(container).toMatch([DIV, "text"]);
   }
 };
 
@@ -2288,11 +2346,13 @@ var tests_mergeClass_default = {
   "mergeClass(): two objects": async () => {
     await expect(mergeClass({ foo: true, bar: true }, { bar: false, baz: true })).toEqual({ foo: true, bar: false, baz: true });
   },
-  "mergeClass(): object and array": async () => {
-    await expect(mergeClass({ foo: true }, ["bar", "baz"])).toEqual({ foo: true, 0: "bar", 1: "baz" });
+  "mergeClass(): object and array (array items become class names with true)": async () => {
+    await expect(mergeClass({ foo: true }, ["bar", "baz"])).toEqual({ foo: true, bar: true, baz: true });
+    await expect(mergeClass({ active: true }, ["btn", "primary"])).toEqual({ active: true, btn: true, primary: true });
   },
-  "mergeClass(): array and object": async () => {
-    await expect(mergeClass(["foo", "bar"], { baz: true, qux: false })).toEqual({ 0: "foo", 1: "bar", baz: true, qux: false });
+  "mergeClass(): array and object (object keys become class names)": async () => {
+    await expect(mergeClass(["foo", "bar"], { baz: true, qux: false })).toEqual({ foo: true, bar: true, baz: true, qux: false });
+    await expect(mergeClass(["a", "b"], { c: true, d: false })).toEqual({ a: true, b: true, c: true, d: false });
   },
   "mergeClass(): falsy entries are skipped": async () => {
     await expect(mergeClass("foo", null, "bar")).toEqual("foo bar");
@@ -2301,6 +2361,10 @@ var tests_mergeClass_default = {
   "mergeClass(): multiple args (3+)": async () => {
     await expect(mergeClass("a", "b", "c")).toEqual("a b c");
     await expect(mergeClass("x", null, ["y", "z"], "w")).toEqual("y z x w");
+  },
+  "mergeClass(): incompatible types throw": async () => {
+    await expect(() => mergeClass(123, "foo")).toFail();
+    await expect(() => mergeClass("foo", 456)).toFail();
   }
 };
 
@@ -2356,6 +2420,10 @@ var tests_mergeProps_default = {
     const p = { class: "foo" };
     await expect(mergeProps(p) === p).toEqual(true);
   },
+  "mergeProps(): single falsy arg returns undefined": async () => {
+    await expect(mergeProps(null)).toEqual(void 0);
+    await expect(mergeProps(void 0)).toEqual(void 0);
+  },
   "mergeProps(): two plain objects merged": async () => {
     await expect(mergeProps({ a: 1 }, { b: 2 })).toEqual({ a: 1, b: 2 });
   },
@@ -2383,45 +2451,40 @@ var tests_mergeProps_default = {
 
 // test/tests-state-context.ts
 var tests_state_context_default = {
-  "StateContext.state: returns the state reference": async () => {
-    const state = createState({ x: 10 });
-    const ctx = context(state);
-    await expect(ctx.state === state).toEqual(true);
-  },
-  "StateContext.get() returns whole state": async () => {
+  "context(s)...get(): returns whole state": async () => {
     const state = createState({ a: 1, b: 2 });
     const ctx = context(state);
     await expect(ctx.get()).toEqual({ a: 1, b: 2 });
   },
-  "StateContext.get(): deep nested": async () => {
+  "context(s)...get(): deep nested": async () => {
     const state = createState({ a: { b: { c: 42 } } });
     const ctx = context(state);
     await expect(ctx.a.b.c.get()).toEqual(42);
   },
-  "StateContext.get(): missing nested path returns undefined": async () => {
+  "context(s)...get(): missing nested path returns undefined": async () => {
     const state = createState({ a: {} });
     const ctx = context(state);
     await expect(ctx.a.b.get()).toEqual(void 0);
   },
-  "StateContext.put(): silently mutates state": async () => {
+  "context(s)...put(): silently mutates state": async () => {
     const state = createState({ a: { b: 1 } });
     const ctx = context(state);
     ctx.a.b.put(2);
     await expect(state.a.b).toEqual(2);
   },
-  "StateContext.put() on nested object replaces the sub-object": async () => {
+  "context(s)...put(): on nested object replaces the sub-object": async () => {
     const state = createState({ a: { b: { x: 1, y: 2 } } });
     const ctx = context(state);
     ctx.a.b.put({ y: 99 });
     await expect(state.a.b).toEqual({ y: 99 });
   },
-  "StateContext.put() at root level with empty keys": async () => {
+  "context(s)...put(): at root level with empty keys": async () => {
     const state = createState({ a: 1, b: 2 });
     const ctx = context(state);
     ctx.put({ b: void 0 });
     await expect(state).toEqual({ a: 1 });
   },
-  "StateContext.patch(): calls state.patch with proper deep partial": async () => {
+  "context(s)...patch(): calls state.patch with proper deep partial": async () => {
     const state = createState({ a: { b: 1 } });
     const ctx = context(state);
     ctx.a.b.patch(2);
@@ -2429,7 +2492,7 @@ var tests_state_context_default = {
     await expect(patches.length).toEqual(1);
     await expect(patches[0]).toEqual({ a: { b: 2 } });
   },
-  "StateContext.patch(): async wraps in array": async () => {
+  "context(s)...patch(): async wraps in array": async () => {
     const state = createState({ a: { b: 1 } });
     const ctx = context(state);
     ctx.a.b.patch(2, true);
@@ -2438,7 +2501,7 @@ var tests_state_context_default = {
     await expect(Array.isArray(patches[0])).toEqual(true);
     await expect(patches[0][0]).toEqual({ a: { b: 2 } });
   },
-  "StateContext.patch() on nested deep path three levels": async () => {
+  "context(s)...patch(): on nested deep path three levels": async () => {
     const state = createState({ x: { y: { z: 0 } } });
     const ctx = context(state);
     ctx.x.y.z.patch(100);
@@ -2446,7 +2509,7 @@ var tests_state_context_default = {
     await expect(patches.length).toEqual(1);
     await expect(patches[0]).toEqual({ x: { y: { z: 100 } } });
   },
-  "StateContext.put() with intermediate null creates objects along the path": async () => {
+  "context(s)...put(): with intermediate null creates objects along the path": async () => {
     const state = createState({ a: null });
     const ctx = context(state);
     ctx.a.b.put(42);
@@ -2455,18 +2518,133 @@ var tests_state_context_default = {
     await expect(state.a).toEqual(null);
     await expect(state.a?.b).toEqual(void 0);
   },
-  "StateContext.put() with three-level intermediate null": async () => {
+  "context(s)...put(): with three-level intermediate null": async () => {
     const state = createState({ a: null });
     const ctx = context(state);
     ctx.a.b.c.put(99);
     await expect(state.a?.b.c).toEqual(99);
   },
-  "StateContext.put() with multiple intermediate nulls": async () => {
+  "context(s)...put(): with multiple intermediate nulls": async () => {
     const state = createState({ a: { x: null, y: 1 } });
     const ctx = context(state);
     ctx.a.x.z.put("deep");
     await expect(state.a.x?.z).toEqual("deep");
     await expect(state.a.y).toEqual(1);
+  },
+  "context(s)...put(): merges into existing object properties via Object.assign": async () => {
+    const state = createState({ items: { count: 0, name: "test", hidden: false } });
+    const ctx = context(state);
+    ctx.items.put({ count: 5 });
+    await expect(state.items).toEqual({ count: 5, name: "test", hidden: false });
+  },
+  "context(state, s => s).get(): returns whole state": async () => {
+    const state = createState({ a: 1, b: 2 });
+    const ctx = context(state, (s) => s);
+    await expect(ctx.get()).toEqual({ a: 1, b: 2 });
+  },
+  "context(state, s => s.a.b.c).get(): deep nested": async () => {
+    const state = createState({ a: { b: { c: 42 } } });
+    const ctx = context(state, (s) => s.a.b.c);
+    await expect(ctx.get()).toEqual(42);
+  },
+  "context(state, s => s.a.b).get(): missing nested path returns undefined": async () => {
+    const state = createState({ a: {} });
+    const ctx = context(state, (s) => s.a.b);
+    await expect(ctx.get()).toEqual(void 0);
+  },
+  "context(state, s => s.a.b).put(): silently mutates state": async () => {
+    const state = createState({ a: { b: 1 } });
+    const ctx = context(state, (s) => s.a.b);
+    ctx.put(2);
+    await expect(state.a.b).toEqual(2);
+  },
+  "context(state, s => s.a.b).put(): on nested object replaces the sub-object": async () => {
+    const state = createState({ a: { b: { x: 1, y: 2 } } });
+    const ctx = context(state, (s) => s.a.b);
+    ctx.put({ y: 99 });
+    await expect(state.a.b).toEqual({ y: 99 });
+  },
+  "context(state, s => s).put(): at root level with empty keys": async () => {
+    const state = createState({ a: 1, b: 2 });
+    const ctx = context(state, (s) => s);
+    ctx.put({ b: void 0 });
+    await expect(state).toEqual({ a: 1 });
+  },
+  "context(state, s => s.a.b).patch(): calls state.patch with proper deep partial": async () => {
+    const state = createState({ a: { b: 1 } });
+    const ctx = context(state, (s) => s.a.b);
+    ctx.patch(2);
+    const patches = state.patch.initialPatches;
+    await expect(patches.length).toEqual(1);
+    await expect(patches[0]).toEqual({ a: { b: 2 } });
+  },
+  "context(state, s => s.a.b).patch(): async wraps in array": async () => {
+    const state = createState({ a: { b: 1 } });
+    const ctx = context(state, (s) => s.a.b);
+    ctx.patch(2, true);
+    const patches = state.patch.initialPatches;
+    await expect(patches.length).toEqual(1);
+    await expect(Array.isArray(patches[0])).toEqual(true);
+    await expect(patches[0][0]).toEqual({ a: { b: 2 } });
+  },
+  "context(state, s => s.x.y.z).patch(): on nested deep path three levels": async () => {
+    const state = createState({ x: { y: { z: 0 } } });
+    const ctx = context(state, (s) => s.x.y.z);
+    ctx.patch(100);
+    const patches = state.patch.initialPatches;
+    await expect(patches.length).toEqual(1);
+    await expect(patches[0]).toEqual({ x: { y: { z: 100 } } });
+  },
+  "context(state, s => s.x).y.z: continue proxy sub-state targeting": async () => {
+    const state = createState({ x: { y: { z: 0 } } });
+    const ctx = context(state, (s) => s.x).y.z;
+    ctx.patch(100);
+    const patches = state.patch.initialPatches;
+    await expect(patches.length).toEqual(1);
+    await expect(patches[0]).toEqual({ x: { y: { z: 100 } } });
+  },
+  "context(state, s => s.a.b).put(): with intermediate null creates objects": async () => {
+    const state = createState({ a: null });
+    const ctx = context(state, (s) => s.a.b);
+    ctx.put(42);
+    await expect(state.a?.b).toEqual(42);
+  },
+  "context(state, s => s.a.b.c).put(): with three-level intermediate null": async () => {
+    const state = createState({ a: null });
+    const ctx = context(state, (s) => s.a.b.c);
+    ctx.put(99);
+    await expect(state.a?.b.c).toEqual(99);
+  },
+  "context(state, s => s.a.x.z).put(): with multiple intermediate nulls": async () => {
+    const state = createState({ a: { x: null, y: 1 } });
+    const ctx = context(state, (s) => s.a.x.z);
+    ctx.put("deep");
+    await expect(state.a.x?.z).toEqual("deep");
+    await expect(state.a.y).toEqual(1);
+  },
+  "context(state, s => s.items).put(): merges into existing object properties via Object.assign": async () => {
+    const state = createState({ items: { count: 0, name: "test", hidden: false } });
+    const ctx = context(state, (s) => s.items);
+    ctx.put({ count: 5 });
+    await expect(state.items).toEqual({ count: 5, name: "test", hidden: false });
+  },
+  "context(state, s => s.get|put|patch...): 'get','put','patch' as intermediate properties without conflict": async () => {
+    const state = createState({
+      endpoints: {
+        get: { count: 1 },
+        put: { count: 2 },
+        patch: { count: 3 }
+      }
+    });
+    const getCtx = context(state, (s) => s.endpoints.get);
+    await expect(getCtx.get()).toEqual({ count: 1 });
+    const putCtx = context(state, (s) => s.endpoints.put);
+    putCtx.put({ count: 99 });
+    await expect(state.endpoints.put).toEqual({ count: 99 });
+    const patchCtx = context(state, (s) => s.endpoints.patch);
+    patchCtx.patch({ count: 42 });
+    const patches = state.patch.initialPatches;
+    await expect(patches[0]).toEqual({ endpoints: { patch: { count: 42 } } });
   }
 };
 
@@ -4176,7 +4354,7 @@ var tests_examples_default = {
         [BUTTON, "Add"],
         [
           NAV,
-          [BUTTON, "All"],
+          [BUTTON, { class: "active" }, "All"],
           [BUTTON, "Active"],
           [BUTTON, "Done"]
         ],
@@ -4200,7 +4378,7 @@ var tests_examples_default = {
         [
           NAV,
           [BUTTON, "All"],
-          [BUTTON, "Active"],
+          [BUTTON, { class: "active" }, "Active"],
           [BUTTON, "Done"]
         ],
         [
@@ -4221,7 +4399,7 @@ var tests_examples_default = {
           NAV,
           [BUTTON, "All"],
           [BUTTON, "Active"],
-          [BUTTON, "Done"]
+          [BUTTON, { class: "active" }, "Done"]
         ],
         [
           UL,
@@ -5246,6 +5424,66 @@ var tests_catch_default = {
         [ARTICLE, "i am fine"]
       ]
     );
+  },
+  "catch: bubbles up to the root component if deeply nested vodes dont catch it earlier": async () => {
+    const root = document.createElement("div");
+    const container = document.createElement("div");
+    root.appendChild(container);
+    app(
+      container,
+      {},
+      () => [
+        DIV,
+        {
+          catch: (s, err) => [DIV, `caught: ${err.message}`]
+        },
+        [
+          MAIN,
+          [
+            SECTION,
+            [ARTICLE, {
+              onMount: () => {
+                throw new Error("boom");
+              }
+            }]
+          ]
+        ]
+      ]
+    );
+    await expect(container).toMatch(
+      [DIV, "caught: boom"]
+    );
+  },
+  "catch: if catching in root vode with different Tag -> container will be replaced": async () => {
+    const root = document.createElement("div");
+    const container = document.createElement("div");
+    root.appendChild(container);
+    await expect(root.firstChild === container).toEqual(true);
+    app(
+      container,
+      {},
+      () => [
+        DIV,
+        {
+          catch: (s, err) => [P, `caught: ${err.message}`]
+        },
+        [
+          MAIN,
+          [
+            SECTION,
+            [ARTICLE, {
+              onMount: () => {
+                throw new Error("boom");
+              }
+            }]
+          ]
+        ]
+      ]
+    );
+    await expect(root.firstChild === container).toEqual(false);
+    await expect(root.firstChild).toMatch(
+      [P, "caught: boom"]
+    );
   }
 };
 
@@ -5293,27 +5531,25 @@ var tests_patch_advanced_default = {
     const container = setup4();
     const state = createState({ msg: "before" });
     app(container, state, (s) => [DIV, s.msg]);
-    state.patch(Promise.resolve({ msg: "after" }));
-    await delay(10);
-    await expect(state.msg).toEqual("after");
+    await state.patch(Promise.resolve({ msg: "after" }));
+    await expect(state).toEqual({ msg: "after" });
     await expect(container).toMatch([DIV, "after"]);
   },
   "patch(): array with empty patches applies nothing": async () => {
     const container = setup4();
     const state = createState({ x: 1, y: 2 });
     app(container, state, (s) => [DIV]);
-    state.patch([{}, {}]);
-    await expect(state.x).toEqual(1);
-    await expect(state.y).toEqual(2);
+    await state.patch([{}, {}]);
+    await delay(10);
+    await expect(state).toEqual({ x: 1, y: 2 });
   },
   "patch(): array with null/undefined items skips them": async () => {
     const container = setup4();
     const state = createState({ x: 0, y: 0 });
     app(container, state, (s) => [DIV, String(s.x), String(s.y)]);
     state.patch([null, { x: 10 }, void 0, { y: 20 }]);
-    await delay(10);
-    await expect(state.x).toEqual(10);
-    await expect(state.y).toEqual(20);
+    await expect(() => expect(state.x).toEqual(10)).toSucceedAsync();
+    await expect(() => expect(state.y).toEqual(20)).toSucceedAsync();
   },
   "patch(): returns Promise for generator functions, can be awaited": async () => {
     const container = setup4();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.8.11",
+    "version": "1.9.0",
     "description": "a minimalist web framework",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",
@@ -50,9 +50,9 @@
         "build-tests": "esbuild test/index.ts --bundle --format=esm --outfile=dist/vode.tests.mjs"
     },
     "devDependencies": {
-        "@babel/cli": "7.28.6",
-        "@babel/core": "7.29.0",
-        "@babel/preset-env": "7.29.5",
+        "@babel/cli": "7.29.7",
+        "@babel/core": "7.29.7",
+        "@babel/preset-env": "7.29.7",
         "babel-preset-minify": "0.5.2",
         "dts-bundle-generator": "9.5.1",
         "esbuild": "0.28.0",

package/src/merge-class.ts

@@ -38,9 +38,7 @@ export function mergeClass(...classes: ClassProp[]): ClassProp {
         else if (typeof a === "object" && typeof b === "string") {
             finalClass = { ...a, [b]: true };
         }
-        else if (typeof a === "object" && typeof b === "object") {
-            finalClass = { ...a, ...b };
-        } else if (typeof a === "object" && Array.isArray(b)) {
+        else if (typeof a === "object" && Array.isArray(b)) {
             const aa = { ...a };
             for (const item of b as string[]) {
                 (<Record<string, boolean | null | undefined>>aa)[item] = true;
@@ -55,6 +53,8 @@ export function mergeClass(...classes: ClassProp[]): ClassProp {
                 aa[bKey] = (<Record<string, boolean | null | undefined>>b)[bKey];
             }
             finalClass = aa;
+        } else if (typeof a === "object" && typeof b === "object") {
+            finalClass = { ...a, ...b };
         }
         else throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
     }