@ryupold/vode 1.8.7 → 1.8.10

package/test/tests-hydrate.ts

@@ -1,68 +1,102 @@
 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");
+    "hydrate(): text node returns its text content": async () => {
+        const text = new FakeTextNode("hello world");
 
-        expect(hydrate(text as any))
+        await expect(hydrate(text as any))
             .toMatch("hello world");
     },
 
-    "hydrate(): empty element returns a vode": () => {
-        const el = new MockElement("div");
+    "hydrate(): empty element returns a vode": async () => {
+        const el = new FakeElement("div");
         const result = hydrate(el as any);
 
-        expect(result)
+        await expect(result)
             .toMatch([DIV]);
     },
 
-    "hydrate(): element with children returns full vode tree": () => {
-        const parent = new MockElement("div");
-        const child = new MockElement("span");
+    "hydrate(): element with children returns full vode tree": async () => {
+        const parent = new FakeElement("div");
+        const child = new FakeElement("span");
         parent.appendChild(child);
 
-        expect(hydrate(parent as any))
+        await expect(hydrate(parent as any))
             .toMatch([DIV, [SPAN]]);
     },
 
-    "hydrate(): element with text child": () => {
-        const parent = new MockElement("p");
-        const text = new MockText("hello");
+    "hydrate(): element with text child": async () => {
+        const parent = new FakeElement("p");
+        const text = new FakeTextNode("hello");
         parent.appendChild(text);
 
-        expect(hydrate(parent as any))
+        await expect(hydrate(parent as any))
             .toMatch([P, "hello"]);
     },
 
-    "hydrate(): element with attributes reads them into props": () => {
-        const el = new MockElement("div");
+    "hydrate(): element with attributes reads them into props": async () => {
+        const el = new FakeElement("div");
         el.setAttribute("class", "foo");
         el.setAttribute("id", "bar");
 
-        expect(hydrate(el as any))
+        await expect(hydrate(el as any))
             .toMatch([DIV, { class: "foo", id: "bar" }]);
     },
 
-    "hydrate(): unknown node type returns undefined": () => {
+    "hydrate(): unknown node type returns undefined": async () => {
         const frag = { nodeType: 999 } as any;
 
-        expect(hydrate(frag))
+        await expect(hydrate(frag))
             .toEqual(undefined);
     },
 
-    "hydrate(): empty text node returns undefined": () => {
-        const text = new MockText("   ");
+    "hydrate(): empty text node returns undefined": async () => {
+        const text = new FakeTextNode("   ");
 
-        expect(hydrate(text as any))
+        await expect(hydrate(text as any))
             .toEqual(undefined);
     },
 
-    "hydrate(): only element and text nodes are supported": () => {
+    "hydrate(): only element and text nodes are supported": async () => {
         const comment = { nodeType: Node.COMMENT_NODE } as any;
 
-        expect(hydrate(comment))
+        await expect(hydrate(comment))
             .toEqual(undefined);
     },
+
+    "hydrate(): prepareForRender returns text node for text input": async () => {
+        const text = new FakeTextNode("hello");
+
+        const result = hydrate(text as any, true);
+
+        await expect(result instanceof FakeTextNode).toEqual(true);
+        await expect((result as any).nodeValue).toEqual("hello");
+    },
+
+    "hydrate(): prepareForRender attaches .node to element vode": async () => {
+        const el = new FakeElement("div");
+
+        const result = hydrate(el as any, true) as any;
+
+        await expect(Array.isArray(result)).toEqual(true);
+        await expect(result[0]).toEqual("div");
+        await expect(result.node instanceof FakeElement).toEqual(true);
+        await expect(result.node.tagName).toEqual("DIV");
+    },
+
+    "hydrate(): prepareForRender removes whitespace text nodes": async () => {
+        const el = new FakeElement("div");
+        el.appendChild(new FakeTextNode("   "));
+        el.appendChild(new FakeElement("span"));
+        el.appendChild(new FakeTextNode("  "));
+
+        await expect(el.childNodes.length).toEqual(3);
+
+        const result = hydrate(el as any, true);
+
+        await expect(el.childNodes.length).toEqual(1);
+        await expect((el.childNodes[0] as any).tagName).toEqual("SPAN");
+    },
 };

package/test/tests-memo.ts

@@ -1,50 +1,45 @@
 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": () => {
+    "memo(): throws when compare is not an array": async () => {
         const err = expect(() => memo(null as any, (s: any) => [DIV]))
             .toFail();
-        expect(err.message)
+        await expect(err.message)
             .toEqual("first argument to memo() must be an array of values to compare");
     },
 
-    "memo(): throws when componentOrProps is not a function": () => {
+    "memo(): throws when componentOrProps is not a function": async () => {
         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");
+        await expect(err.message)
+            .toEqual("second argument to memo() must be a function that returns a child vode");
     },
 
-    "memo(): integration with app prevents re-render when deps match": () => {
+    "memo(): integration with app prevents re-render when deps match": async () => {
         const state = createState({ count: 12 });
         const root = document.createElement("div");
         const container = document.createElement("div");
         root.appendChild(container);
 
-        let callCount = 0;
+        let box: { callCount: number } = { callCount: 0 };
         app<typeof state>(container, state, (s) => [DIV, memo(
             [s.count],
             (s) => {
-                callCount++;
+                box.callCount++;
                 return [DIV, [SPAN, `${s.count}`]];
             }
         )]);
 
 
-        expect(callCount).toEqual(1);
+        await expect(box).toEqual({ callCount: 1 });
 
         state.patch({ count: 12 }); //same value, should not re-render
-        expect(callCount).toEqual(1);
+        await expect(box).toEqual({ callCount: 1 });
         state.patch({ count: 13 }); //different value, should re-render
-        expect(callCount).toEqual(2);
-        expect(container).toMatch(
+
+        await expect(box).toEqual({ callCount: 2 });
+        await expect(container).toMatch(
             [DIV,
                 [DIV,
                     [SPAN, "13"]
@@ -53,49 +48,7 @@ export default {
         );
     },
 
-    "memo(): works also with props factory": () => {
-        const state = createState({ count: 12, prefix: "Count is: " });
-        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}`]
-            ],
-        ]);
-
-
-        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"]
-                ]
-            ]
-        );
-    },
-
-    "memo(): can be a nested component function": () => {
+    "memo(): can be used with a nested component function": async () => {
         const state = createState({ count: 12 });
         const root = document.createElement("div");
         const container = document.createElement("div");
@@ -112,8 +65,97 @@ export default {
             )]);
 
 
-        expect(callCount).toEqual(1);
+        await expect(callCount).toEqual(1);
         state.patch({ count: 12 }); //same value, should not re-render
-        expect(callCount).toEqual(1);
+        await expect(callCount).toEqual(1);
+    },
+
+    "memo(): can be used with the same component function": async () => {
+        const state = createState({ test: "foo" });
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        let box: { callCount: number } = { callCount: 0 };
+        const Comp: Component<typeof state> = (s) => {
+            box.callCount++;
+            return [DIV, [SPAN, s.test]];
+        };
+        app<typeof state>(container, state, (s) => [DIV,
+            memo(
+                [s.test],
+                Comp,
+            ),
+            memo(
+                [s.test],
+                Comp,
+            ),
+        ]);
+
+
+        await expect(box).toEqual({ callCount: 2 }, "Each memo should call the component function once on initial render, even if they are the same function");
+        state.patch({ test: "foo" });
+        await expect(box).toEqual({ callCount: 2 }, "Patching with the same value should not cause a re-render");
+        state.patch({ test: "bar" });
+        await expect(box).toEqual({ callCount: 4 }, "Patching with a different value should cause both memos to re-render, even if they use the same component function");
+    },
+
+    "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": async () => {
+        const state = createState({ outer: 1, inner: 1 });
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        let box: { callCount: number } = { callCount: 0 };
+        const comp = (s: typeof state) => {
+            box.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();
+
+        await expect(box).toEqual({ callCount: 1 });
+        await expect(container).toMatch([DIV, [DIV, "1"]]);
+
+        state.patch({ outer: 2 });
+        await expect(box).toEqual({ callCount: 2 });
+        state.patch({ inner: 2 });
+        await expect(box).toEqual({ callCount: 2 });
+        state.patch({ outer: 3 });
+        await expect(box).toEqual({ callCount: 3 });
     },
 };

package/test/tests-mergeClass.ts

@@ -2,62 +2,62 @@ import { mergeClass } from "../index";
 import { expect } from "./helper";
 
 export default {
-    "mergeClass(): no args returns null": () => {
-        expect(mergeClass()).toEqual(null);
+    "mergeClass(): no args returns null": async () => {
+        await expect(mergeClass()).toEqual(null);
     },
 
-    "mergeClass(): single string returns it": () => {
-        expect(mergeClass("foo")).toEqual("foo");
+    "mergeClass(): single string returns it": async () => {
+        await expect(mergeClass("foo")).toEqual("foo");
     },
 
-    "mergeClass(): two strings are joined and deduplicated": () => {
-        expect(mergeClass("foo", "bar")).toEqual("foo bar");
-        expect(mergeClass("foo bar", "bar baz")).toEqual("foo bar baz");
+    "mergeClass(): two strings are joined and deduplicated": async () => {
+        await expect(mergeClass("foo", "bar")).toEqual("foo bar");
+        await expect(mergeClass("foo bar", "bar baz")).toEqual("foo bar baz");
     },
 
-    "mergeClass(): string and array": () => {
-        expect(mergeClass("foo", ["bar", "baz"])).toEqual("bar baz foo");
+    "mergeClass(): string and array": async () => {
+        await expect(mergeClass("foo", ["bar", "baz"])).toEqual("bar baz foo");
     },
 
-    "mergeClass(): array and string": () => {
-        expect(mergeClass(["foo", "bar"], "baz")).toEqual("foo bar baz");
+    "mergeClass(): array and string": async () => {
+        await expect(mergeClass(["foo", "bar"], "baz")).toEqual("foo bar baz");
     },
 
-    "mergeClass(): two arrays": () => {
-        expect(mergeClass(["foo", "bar"], ["baz", "qux"])).toEqual("foo bar baz qux");
+    "mergeClass(): two arrays": async () => {
+        await expect(mergeClass(["foo", "bar"], ["baz", "qux"])).toEqual("foo bar baz qux");
     },
 
-    "mergeClass(): two string arrays with duplicates": () => {
-        expect(mergeClass(["foo", "bar"], ["bar", "baz"])).toEqual("foo bar baz");
+    "mergeClass(): two string arrays with duplicates": async () => {
+        await expect(mergeClass(["foo", "bar"], ["bar", "baz"])).toEqual("foo bar baz");
     },
 
-    "mergeClass(): string and object": () => {
-        expect(mergeClass("foo", { bar: true, baz: false })).toEqual({ foo: true, bar: true, baz: false });
+    "mergeClass(): string and object": async () => {
+        await expect(mergeClass("foo", { bar: true, baz: false })).toEqual({ foo: true, bar: true, baz: false });
     },
 
-    "mergeClass(): object and string": () => {
-        expect(mergeClass({ foo: true, bar: false }, "baz")).toEqual({ foo: true, bar: false, baz: true });
+    "mergeClass(): object and string": async () => {
+        await expect(mergeClass({ foo: true, bar: false }, "baz")).toEqual({ foo: true, bar: false, baz: true });
     },
 
-    "mergeClass(): two objects": () => {
-        expect(mergeClass({ foo: true, bar: true }, { bar: false, baz: true })).toEqual({ foo: true, bar: false, baz: true });
+    "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": () => {
-        expect(mergeClass({ foo: true }, ["bar", "baz"])).toEqual({ foo: true, 0: "bar", 1: "baz" });
+    "mergeClass(): object and array": async () => {
+        await expect(mergeClass({ foo: true }, ["bar", "baz"])).toEqual({ foo: true, 0: "bar", 1: "baz" });
     },
 
-    "mergeClass(): array and object": () => {
-        expect(mergeClass(["foo", "bar"], { baz: true, qux: false })).toEqual({ 0: "foo", 1: "bar", baz: true, qux: false });
+    "mergeClass(): array and object": async () => {
+        await expect(mergeClass(["foo", "bar"], { baz: true, qux: false })).toEqual({ 0: "foo", 1: "bar", baz: true, qux: false });
     },
 
-    "mergeClass(): falsy entries are skipped": () => {
-        expect(mergeClass("foo", null, "bar")).toEqual("foo bar");
-        expect(mergeClass(null, "foo", undefined, "bar")).toEqual("foo bar");
+    "mergeClass(): falsy entries are skipped": async () => {
+        await expect(mergeClass("foo", null, "bar")).toEqual("foo bar");
+        await expect(mergeClass(null, "foo", undefined, "bar")).toEqual("foo bar");
     },
 
-    "mergeClass(): multiple args (3+)": () => {
-        expect(mergeClass("a", "b", "c")).toEqual("a b c");
-        expect(mergeClass("x", null, ["y", "z"], "w")).toEqual("y z x w");
+    "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");
     }
 };

package/test/tests-mergeProps.ts

@@ -2,42 +2,42 @@ import { mergeProps, Props } from "../index";
 import { expect } from "./helper";
 
 export default {
-    "mergeProps(): no args returns undefined": () => {
-        expect(mergeProps()).toEqual(undefined);
+    "mergeProps(): no args returns undefined": async () => {
+        await expect(mergeProps()).toEqual(undefined);
     },
 
-    "mergeProps(): single arg returned as-is": () => {
+    "mergeProps(): single arg returned as-is": async () => {
         const p = { class: "foo" };
-        expect(mergeProps(p) === p).toEqual(true);
+        await expect(mergeProps(p) === p).toEqual(true);
     },
 
-    "mergeProps(): two plain objects merged": () => {
-        expect(mergeProps({ a: 1 }, { b: 2 })).toEqual({ a: 1, b: 2 });
+    "mergeProps(): two plain objects merged": async () => {
+        await expect(mergeProps({ a: 1 }, { b: 2 })).toEqual({ a: 1, b: 2 });
     },
 
-    "mergeProps(): right overwrites left for simple keys": () => {
-        expect(mergeProps({ a: 1, b: "x" }, { b: 2 })).toEqual({ a: 1, b: 2 });
+    "mergeProps(): right overwrites left for simple keys": async () => {
+        await expect(mergeProps({ a: 1, b: "x" }, { b: 2 })).toEqual({ a: 1, b: 2 });
     },
 
-    "mergeProps(): class merged via mergeClass": () => {
-        expect(mergeProps({ class: "foo" }, { class: "bar" })).toEqual({ class: "foo bar" });
+    "mergeProps(): class merged via mergeClass": async () => {
+        await expect(mergeProps({ class: "foo" }, { class: "bar" })).toEqual({ class: "foo bar" });
     },
 
-    "mergeProps(): style merged via mergeStyle (strings)": () => {
+    "mergeProps(): style merged via mergeStyle (strings)": async () => {
         const result = mergeProps({ style: "color: red" }, { style: "font-size: 14px" }) as Props;
-        expect((<string>result.style!).includes("color: red")).toEqual(true);
-        expect((<string>result.style!).includes("font-size: 14px")).toEqual(true);
+        await expect((<string>result.style!).includes("color: red")).toEqual(true);
+        await expect((<string>result.style!).includes("font-size: 14px")).toEqual(true);
     },
 
-    "mergeProps(): null and undefined entries skipped": () => {
-        expect(mergeProps({ a: 1 }, null, { b: 2 }, undefined)).toEqual({ a: 1, b: 2 });
+    "mergeProps(): null and undefined entries skipped": async () => {
+        await expect(mergeProps({ a: 1 }, null, { b: 2 }, undefined)).toEqual({ a: 1, b: 2 });
     },
 
-    "mergeProps(): multiple args (3+)": () => {
-        expect(mergeProps({ a: 1 }, { b: 2 }, { c: 3 })).toEqual({ a: 1, b: 2, c: 3 });
+    "mergeProps(): multiple args (3+)": async () => {
+        await expect(mergeProps({ a: 1 }, { b: 2 }, { c: 3 })).toEqual({ a: 1, b: 2, c: 3 });
     },
 
-    "mergeProps(): first arg null returns defined from later args": () => {
-        expect(mergeProps(null, { a: 1 })).toEqual({ a: 1 });
+    "mergeProps(): first arg null returns defined from later args": async () => {
+        await expect(mergeProps(null, { a: 1 })).toEqual({ a: 1 });
     }
 };

package/test/tests-mergeStyle.ts

@@ -1,39 +1,53 @@
 import { mergeStyle } from "../index";
 import { expect } from "./helper";
 
+// Helper to normalize style strings for comparison (browser normalizes CSS differently)
+function normalizeStyle(s: string): string {
+    return s.replace(/;\s*/g, ';').replace(/:\s*/g, ':').replace(/^;/, '').replace(/;$/, '').toLowerCase();
+}
+
+function hasStyle(result: string, prop: string, value: string): boolean {
+    const normalized = normalizeStyle(result);
+    return normalized.includes(`${prop}:${value}`.toLowerCase());
+}
+
 export default {
-    "mergeStyle(): no args returns empty string": () => {
-        expect(mergeStyle()).toEqual("");
+    "mergeStyle(): no args returns empty string": async () => {
+        await expect(mergeStyle()).toEqual("");
     },
 
-    "mergeStyle(): object style sets properties, returns cssText": () => {
+    "mergeStyle(): object style sets properties, returns cssText": async () => {
         const result = mergeStyle({ color: "red", fontSize: "14px" });
-        expect(typeof result).toEqual("string");
+        await expect(typeof result).toEqual("string");
     },
 
-    "mergeStyle(): single string starts with semicolon": () => {
-        expect(mergeStyle("color: red")).toEqual(";color: red");
+    "mergeStyle(): single string includes the style": async () => {
+        const result = mergeStyle("color: red") as string;
+        await expect(hasStyle(result, "color", "red")).toEqual(true);
     },
 
-    "mergeStyle(): two strings are concatenated": () => {
-        expect(mergeStyle("color: red", "font-size: 14px")).toEqual(";color: red;font-size: 14px");
+    "mergeStyle(): two strings are concatenated": async () => {
+        const result = mergeStyle("color: red", "font-size: 14px") as string;
+        await expect(hasStyle(result, "color", "red")).toEqual(true);
+        await expect(hasStyle(result, "font-size", "14px")).toEqual(true);
     },
 
-    "mergeStyle(): object then string": () => {
+    "mergeStyle(): object then string": async () => {
         const result = mergeStyle({ color: "red" }, "font-size: 14px") as string;
-        expect(result.indexOf("font-size: 14px") > 0).toEqual(true);
+        await expect(hasStyle(result, "font-size", "14px")).toEqual(true);
     },
 
-    "mergeStyle(): null and undefined entries are skipped": () => {
-        expect(mergeStyle(null, "color: red", undefined)).toEqual(";color: red");
+    "mergeStyle(): null and undefined entries are skipped": async () => {
+        const result = mergeStyle(null, "color: red", undefined) as string;
+        await expect(hasStyle(result, "color", "red")).toEqual(true);
     },
 
-    "mergeStyle(): multiple objects and strings alternate": () => {
+    "mergeStyle(): multiple objects and strings alternate": async () => {
         const result = mergeStyle(
             { color: "red" },
             "font-size: 14px",
             { background: "blue" }
         ) as string;
-        expect(result.includes("font-size: 14px")).toEqual(true);
+        await expect(hasStyle(result, "font-size", "14px")).toEqual(true);
     }
 };