@ryupold/vode 1.8.7 → 1.8.8

package/test/tests-hydrate.ts

@@ -1,17 +1,17 @@
 import { expect } from "./helper";
 import { hydrate, DIV, SPAN, P } from "../index";
-import { MockElement, MockText } from "./mocks";
+import { FakeElement, FakeTextNode } from "./mocks";
 
 export default {
     "hydrate(): text node returns its text content": () => {
-        const text = new MockText("hello world");
+        const text = new FakeTextNode("hello world");
 
         expect(hydrate(text as any))
             .toMatch("hello world");
     },
 
     "hydrate(): empty element returns a vode": () => {
-        const el = new MockElement("div");
+        const el = new FakeElement("div");
         const result = hydrate(el as any);
 
         expect(result)
@@ -19,8 +19,8 @@ export default {
     },
 
     "hydrate(): element with children returns full vode tree": () => {
-        const parent = new MockElement("div");
-        const child = new MockElement("span");
+        const parent = new FakeElement("div");
+        const child = new FakeElement("span");
         parent.appendChild(child);
 
         expect(hydrate(parent as any))
@@ -28,8 +28,8 @@ export default {
     },
 
     "hydrate(): element with text child": () => {
-        const parent = new MockElement("p");
-        const text = new MockText("hello");
+        const parent = new FakeElement("p");
+        const text = new FakeTextNode("hello");
         parent.appendChild(text);
 
         expect(hydrate(parent as any))
@@ -37,7 +37,7 @@ export default {
     },
 
     "hydrate(): element with attributes reads them into props": () => {
-        const el = new MockElement("div");
+        const el = new FakeElement("div");
         el.setAttribute("class", "foo");
         el.setAttribute("id", "bar");
 
@@ -53,7 +53,7 @@ export default {
     },
 
     "hydrate(): empty text node returns undefined": () => {
-        const text = new MockText("   ");
+        const text = new FakeTextNode("   ");
 
         expect(hydrate(text as any))
             .toEqual(undefined);
@@ -65,4 +65,38 @@ export default {
         expect(hydrate(comment))
             .toEqual(undefined);
     },
+
+    "hydrate(): prepareForRender returns text node for text input": () => {
+        const text = new FakeTextNode("hello");
+
+        const result = hydrate(text as any, true);
+
+        expect(result instanceof FakeTextNode).toEqual(true);
+        expect((result as any).nodeValue).toEqual("hello");
+    },
+
+    "hydrate(): prepareForRender attaches .node to element vode": () => {
+        const el = new FakeElement("div");
+
+        const result = hydrate(el as any, true) as any;
+
+        expect(Array.isArray(result)).toEqual(true);
+        expect(result[0]).toEqual("div");
+        expect(result.node instanceof FakeElement).toEqual(true);
+        expect(result.node.tagName).toEqual("DIV");
+    },
+
+    "hydrate(): prepareForRender removes whitespace text nodes": () => {
+        const el = new FakeElement("div");
+        el.appendChild(new FakeTextNode("   "));
+        el.appendChild(new FakeElement("span"));
+        el.appendChild(new FakeTextNode("  "));
+
+        expect(el.childNodes.length).toEqual(3);
+
+        const result = hydrate(el as any, true);
+
+        expect(el.childNodes.length).toEqual(1);
+        expect((el.childNodes[0] as any).tagName).toEqual("SPAN");
+    },
 };

package/test/tests-memo.ts

@@ -1,13 +1,7 @@
 import { expect } from "./helper";
-import { memo, DIV, app, createState, SPAN } from "../index";
+import { memo, DIV, app, createState, SPAN, H1, BR, P, UL, LI, Component } from "../index";
 
 export default {
-    "memo(): returns the given function": () => {
-        const fn = (s: any) => [DIV];
-        const result = memo([1, 2], fn);
-        expect(result === fn).toEqual(true);
-    },
-
     "memo(): throws when compare is not an array": () => {
         const err = expect(() => memo(null as any, (s: any) => [DIV]))
             .toFail();
@@ -19,7 +13,7 @@ export default {
         const err = expect(() => memo([1], null as any))
             .toFail();
         expect(err.message)
-            .toEqual("second argument to memo() must be a function that returns a vode or props object");
+            .toEqual("second argument to memo() must be a function that returns a child vode");
     },
 
     "memo(): integration with app prevents re-render when deps match": () => {
@@ -53,67 +47,114 @@ export default {
         );
     },
 
-    "memo(): works also with props factory": () => {
-        const state = createState({ count: 12, prefix: "Count is: " });
+    "memo(): can be used with a nested component function": () => {
+        const state = createState({ count: 12 });
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
 
         let callCount = 0;
         app<typeof state>(container, state, (s) => [DIV,
-            [DIV,
-                memo(
-                    [s.count],
-                    (s) => {
-                        callCount++;
-                        return {
-                            class: {
-                                low: s.count < 10,
-                                high: s.count >= 10,
-                            }
-                        };
-                    }
-                ),
-                [SPAN, `${s.prefix}${s.count}`]
-            ],
-        ]);
+            () => memo(
+                [s.count],
+                (s) => {
+                    callCount++;
+                    return [DIV, [SPAN, `${s.count}`]];
+                }
+            )]);
 
 
         expect(callCount).toEqual(1);
-        state.patch({ count: 12 });
-        expect(callCount).toEqual(1); // unchanged count should not cause re-render
-        state.patch({ count: 13 });
-        expect(callCount).toEqual(2);
-        state.patch({ prefix: "count: " });
-        expect(callCount).toEqual(3);
-        expect(container).toMatch(
-            [DIV,
-                [DIV, { class: { low: false, high: true } },
-                    [SPAN, "count: 13"]
-                ]
-            ]
-        );
+        state.patch({ count: 12 }); //same value, should not re-render
+        expect(callCount).toEqual(1);
     },
 
-    "memo(): can be a nested component function": () => {
-        const state = createState({ count: 12 });
+    "memo(): can be used with the same component function": () => {
+        const state = createState({ test: "foo" });
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
 
         let callCount = 0;
+        const Comp: Component<typeof state> = (s) => {
+            callCount++;
+            return [DIV, [SPAN, s.test]];
+        };
         app<typeof state>(container, state, (s) => [DIV,
-            () => memo(
-                [s.count],
-                (s) => {
-                    callCount++;
-                    return [DIV, [SPAN, `${s.count}`]];
-                }
-            )]);
+            memo(
+                [s.test],
+                Comp,
+            ),
+            memo(
+                [s.test],
+                Comp,
+            ),
+        ]);
 
 
+        expect(callCount).toEqual(2);
+        state.patch({ test: "foo" });
+        expect(callCount).toEqual(2);
+        state.patch({ test: "bar" });
+        expect(callCount).toEqual(4);
+    },
+
+    "memo(): memo with many item list": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const state = createState({ title: "hello", body: "world" });
+        type State = typeof state;
+
+        const CompMemoList: Component<State> = (s) =>
+            [DIV, { class: "container" },
+                [H1, "Hello World"],
+                [BR],
+                [P, "This is a paragraph."],
+                memo(
+                    [s.title, s.body],
+                    (s) => {
+                        const list = [UL];
+                        for (let i = 0; i < 10000; i++) {
+                            list.push(LI, `Item ${i}`);
+                        }
+                        return list;
+                    },
+                )
+            ];
+
+        app<State>(container, state, (s) => [DIV,
+            CompMemoList,
+        ]);
+    },
+
+    "memo(): double-wrapping ignores the inner memo dependencies, only the outer memo is checked": () => {
+        const state = createState({ outer: 1, inner: 1 });
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        let callCount = 0;
+        const comp = (s: typeof state) => {
+            callCount++;
+            return [DIV, `${s.outer}`];
+        };
+
+        const memoed = (s: typeof state) => memo([s.inner], comp);
+        const doubleMemoed = (s: typeof state) => memo([s.outer], memoed);
+
+        expect(() => app(container, state, () => [DIV, doubleMemoed]))
+            .toSucceed();
+
         expect(callCount).toEqual(1);
-        state.patch({ count: 12 }); //same value, should not re-render
-        expect(callCount).toEqual(1);
+        expect(container).toMatch([DIV, [DIV, "1"]]);
+
+        state.patch({ outer: 2 });
+        expect(callCount).toEqual(2);
+        state.patch({ inner: 2 });
+        expect(callCount).toEqual(2);
+        state.patch({ outer: 3 });
+        expect(callCount).toEqual(3);
     },
 };

package/test/tests-patch-advanced.ts

@@ -0,0 +1,84 @@
+import { expect } from "./helper";
+import { app, createState, DIV } from "../index";
+
+function setup() {
+    const root = document.createElement("div");
+    const container = document.createElement("div");
+    root.appendChild(container);
+    return container;
+}
+
+export default {
+    "patch(): generator function yields multiple state updates": async () => {
+        const container = setup();
+        const state: any = createState({ count: 0 });
+        app(container, state, (s: any) => [DIV, String(s.count)]);
+
+        expect(state.count).toEqual(0);
+
+        state.patch(function* () {
+            yield { count: 1 };
+            yield { count: 2 };
+            return { count: 3 };
+        });
+
+        await new Promise(r => setTimeout(r, 0));
+
+        expect(state.count).toEqual(3);
+        expect(container).toMatch([DIV, "3"]);
+    },
+
+    "patch(): async generator yields over time": async () => {
+        const container = setup();
+        const state: any = createState({ phase: "start", value: 0 });
+        app(container, state, (s: any) => [DIV, s.phase, String(s.value)]);
+
+        expect(state.phase).toEqual("start");
+
+        state.patch(async function* () {
+            yield { phase: "working", value: 10 };
+            yield { phase: "almost", value: 20 };
+            return { phase: "done", value: 30 };
+        }());
+
+        await new Promise(r => setTimeout(r, 0));
+
+        expect(state.phase).toEqual("done");
+        expect(state.value).toEqual(30);
+        expect(container).toMatch([DIV, "done", "30"]);
+    },
+
+    "patch(): Promise resolves and applies patch": async () => {
+        const container = setup();
+        const state: any = createState({ msg: "before" });
+        app(container, state, (s: any) => [DIV, s.msg]);
+
+        state.patch(Promise.resolve({ msg: "after" }));
+
+        await new Promise(r => setTimeout(r, 0));
+
+        expect(state.msg).toEqual("after");
+        expect(container).toMatch([DIV, "after"]);
+    },
+
+    "patch(): array with empty patches applies nothing": () => {
+        const container = setup();
+        const state: any = createState({ x: 1, y: 2 });
+        app(container, state, (s: any) => [DIV]);
+
+        state.patch([{}, {}]);
+        expect(state.x).toEqual(1);
+        expect(state.y).toEqual(2);
+    },
+
+    "patch(): array with null/undefined items skips them": () => {
+        const container = setup();
+        const state: any = createState({ x: 0, y: 0 });
+        app(container, state, (s: any) => [DIV, String(s.x), String(s.y)]);
+
+        state.patch([null, { x: 10 }, undefined, { y: 20 }]);
+
+        expect(state.x).toEqual(10);
+        expect(state.y).toEqual(20);
+    },
+};

package/test/tests-patch-merge.ts

@@ -0,0 +1,66 @@
+import { expect } from "./helper";
+import { app, createState, DIV } from "../index";
+
+function setup() {
+    const root = document.createElement("div");
+    const container = document.createElement("div");
+    root.appendChild(container);
+    return container;
+}
+
+export default {
+    "patch-merge: array property replaces existing array": () => {
+        const container = setup();
+        const state: any = createState({ items: [1, 2, 3] });
+        app(container, state, () => [DIV]);
+
+        state.patch({ items: [4, 5, 6] });
+
+        expect(state.items).toEqual([4, 5, 6]);
+    },
+
+    "patch-merge: Date property stores correctly": () => {
+        const container = setup();
+        const state: any = createState({ date: new Date("2024-01-01") });
+        app(container, state, () => [DIV]);
+
+        state.patch({ date: new Date("2025-06-15") });
+
+        expect(state.date instanceof Date).toEqual(true);
+        expect(state.date.getFullYear()).toEqual(2025);
+        expect(state.date.getMonth()).toEqual(5);
+        expect(state.date.getDate()).toEqual(15);
+    },
+
+    "patch-merge: object replaces existing array property": () => {
+        const container = setup();
+        const state: any = createState({ data: [1, 2, 3] });
+        app(container, state, () => [DIV]);
+
+        state.patch({ data: { key: "value" } });
+
+        expect(Array.isArray(state.data)).toEqual(false);
+        expect(state.data.key).toEqual("value");
+    },
+
+    "patch-merge: object replaces existing primitive property": () => {
+        const container = setup();
+        const state: any = createState({ value: 42 });
+        app(container, state, () => [DIV]);
+
+        state.patch({ value: { nested: true } });
+
+        expect(state.value.nested).toEqual(true);
+    },
+
+    "patch-merge: new array property via patch": () => {
+        const container = setup();
+        const state: any = createState({ name: "test" });
+        app(container, state, () => [DIV]);
+
+        state.patch({ tags: ["a", "b", "c"] });
+
+        expect(Array.isArray(state.tags)).toEqual(true);
+        expect(state.tags).toEqual(["a", "b", "c"]);
+    },
+};

package/test/tests-state-context.ts

@@ -1,5 +1,5 @@
 import { expect } from "./helper";
-import { context } from "../src/state-context";
+import { context, ProxySubContext } from "../src/state-context";
 import { createState } from "../src/vode";
 
 export default {
@@ -103,4 +103,35 @@ export default {
         expect(patches[0])
             .toEqual({ x: { y: { z: 100 } } });
     },
+
+    "StateContext.put() with intermediate null creates objects along the path": () => {
+        const state = createState({ a: null as { b: number } | null });
+        const ctx = context(state);
+
+        ctx.a.b.put(42);
+        expect(state.a?.b).toEqual(42);
+
+        ctx.a.put(null);
+        expect(state.a).toEqual(null);
+        expect(state.a?.b).toEqual(undefined);
+    },
+
+    "StateContext.put() with three-level intermediate null": () => {
+        const state = createState({ a: null as { b: { c: number } } | null });
+        const ctx = context(state);
+
+        ctx.a.b.c.put(99);
+
+        expect(state.a?.b.c).toEqual(99);
+    },
+
+    "StateContext.put() with multiple intermediate nulls": () => {
+        const state = createState({ a: { x: null as { z: string } | null, y: 1 } });
+        const ctx = context(state);
+
+        ctx.a.x.z.put("deep");
+
+        expect(state.a.x?.z).toEqual("deep");
+        expect(state.a.y).toEqual(1);
+    },
 };