@ryupold/vode 1.8.6 → 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-mount-unmount.ts

@@ -1,4 +1,4 @@
-import { app, createState } from "../src/vode"
+import { app, createState, memo } from "../src/vode"
 import { ARTICLE, ASIDE, DIV, INPUT, MAIN, NAV, P, SECTION, SPAN } from "../src/vode-tags";
 import { expect } from "./helper";
 
@@ -1081,6 +1081,82 @@ export default {
         expect(unmounts).toEqual(["unmount p-inner"]);
     },
 
+    "onUnmount(): memo hit + earlier sibling growth corrupts unmount indices": () => {
+        const container = setup();
+        const fired: string[] = [];
+        const state = createState({ expanded: false, showB: true });
+        const patch = app<typeof state>(container, state, (s) =>
+            [DIV,
+                [SPAN,
+                    {
+                        onUnmount: (s: unknown, ele: HTMLElement) => {
+                            fired.push("unmount A");
+                        }
+                    },
+                    s.expanded && [ASIDE,
+                        {
+                            onUnmount: (s: unknown, ele: HTMLElement) => {
+                                fired.push("unmount A-child");
+                            }
+                        },
+                        "x"
+                    ],
+                ],
+                s.showB && memo([], () => [SECTION,
+                    {
+                        onUnmount: (s: unknown, ele: HTMLElement) => {
+                            fired.push("unmount B");
+                        }
+                    },
+                ])
+            ]
+        );
+
+        expect(fired).toEqual([]);
+
+        patch({ expanded: true });
+        expect(fired).toEqual([]);
+
+        patch({ showB: false });
+        expect(fired).toEqual(["unmount B"]);
+    },
+
+    "onUnmount(): excess child removal + same-render sibling growth": () => {
+        const container = setup();
+        const fired: string[] = [];
+        const state = createState({ expanded: false, showB: true });
+        const patch = app<typeof state>(container, state, (s) =>
+            [DIV,
+                [SPAN,
+                    {
+                        onUnmount: (s: unknown, ele: HTMLElement) => {
+                            fired.push("unmount A");
+                        }
+                    },
+                    s.expanded && [ASIDE,
+                        {
+                            onUnmount: (s: unknown, ele: HTMLElement) => {
+                                fired.push("unmount A-child");
+                            }
+                        },
+                        "x"
+                    ],
+                ],
+                s.showB && [P,
+                    {
+                        onUnmount: (s: unknown, ele: HTMLElement) => {
+                            fired.push("unmount B");
+                        }
+                    },
+                ]
+            ]
+        );
+
+        expect(fired).toEqual([]);
+        patch({ expanded: true, showB: false });
+        expect(fired).toEqual(["unmount B"]);
+    },
+
     "onMount() + onUnmount: symmetry of calls": () => {
         const container = setup();
         const state = createState({
@@ -1137,4 +1213,192 @@ export default {
             'Timer removed'
         ]);
     },
+
+    "onMount(): with catched component, replacement vode's onMount fires when error occurs": () => {
+        const container = setup();
+        const mounts: string[] = [];
+        const broken: any = () => { throw new Error("boom"); };
+        app(container, {}, () =>
+            [DIV,
+                {
+                    catch: [SECTION,
+                        {
+                            onMount: (s: unknown, ele: HTMLElement) => {
+                                mounts.push("mount fallback");
+                            }
+                        },
+                        "fallback"
+                    ]
+                },
+                broken
+            ]
+        );
+
+        expect(mounts).toEqual(["mount fallback"]);
+    },
+
+    "onMount(): with catched component, returned vode's onMount fires and receives error": () => {
+        const container = setup();
+        const mounts: string[] = [];
+        const caughtErrors: string[] = [];
+        const broken: any = () => { throw new Error("boom"); };
+        app(container, {}, () =>
+            [DIV,
+                {
+                    catch: (s: unknown, err: Error) => {
+                        caughtErrors.push(err.message);
+                        return [SECTION,
+                            {
+                                onMount: (s: unknown, ele: HTMLElement) => {
+                                    mounts.push("mount fallback");
+                                }
+                            },
+                            "fallback"
+                        ];
+                    }
+                },
+                broken
+            ]
+        );
+
+        expect(mounts).toEqual(["mount fallback"]);
+        expect(caughtErrors).toEqual(["boom"]);
+    },
+
+    "onUnmount(): with catched component, replacement vode's onUnmount fires when removed": () => {
+        const container = setup();
+        const unmounts: string[] = [];
+        const state = createState({ show: true });
+        const broken: any = () => { throw new Error("boom"); };
+        const patch = app<typeof state>(container, state, (s) =>
+            [DIV,
+                s.show && [SECTION,
+                    {
+                        catch: [ARTICLE,
+                            {
+                                onUnmount: (s: unknown, ele: HTMLElement) => {
+                                    unmounts.push("unmount fallback");
+                                }
+                            },
+                            "fallback"
+                        ]
+                    },
+                    broken
+                ]
+            ]
+        );
+
+        expect(unmounts).toEqual([]);
+        patch({ show: false });
+        expect(unmounts).toEqual(["unmount fallback"]);
+    },
+
+    "onUnmount(): with catched component, deep replacement tree fires in post-order": () => {
+        const container = setup();
+        const unmounts: string[] = [];
+        const state = createState({ show: true });
+        const broken: any = () => { throw new Error("boom"); };
+        const patch = app<typeof state>(container, state, (s) =>
+            [DIV,
+                s.show && [SECTION,
+                    {
+                        catch: [ARTICLE,
+                            {
+                                onUnmount: (s: unknown, ele: HTMLElement) => {
+                                    unmounts.push("unmount article");
+                                }
+                            },
+                            [P,
+                                {
+                                    onUnmount: (s: unknown, ele: HTMLElement) => {
+                                        unmounts.push("unmount p");
+                                    }
+                                },
+                                "x"
+                            ],
+                            [SPAN,
+                                {
+                                    onUnmount: (s: unknown, ele: HTMLElement) => {
+                                        unmounts.push("unmount span");
+                                    }
+                                },
+                                "y"
+                            ]
+                        ]
+                    },
+                    broken
+                ]
+            ]
+        );
+
+        expect(unmounts).toEqual([]);
+        patch({ show: false });
+        expect(unmounts).toEqual(["unmount span", "unmount p", "unmount article"]);
+    },
+
+    "onMount()/onUnmount(): with catched component, full lifecycle symmetry of catch replacement": () => {
+        const container = setup();
+        const logs: string[] = [];
+        const state = createState({ show: true });
+        const broken: any = () => { throw new Error("boom"); };
+        const patch = app<typeof state>(container, state, (s) =>
+            [DIV,
+                s.show && [SECTION,
+                    {
+                        catch: [ARTICLE,
+                            {
+                                onMount: (s: unknown, ele: HTMLElement) => {
+                                    logs.push("mount article");
+                                },
+                                onUnmount: (s: unknown, ele: HTMLElement) => {
+                                    logs.push("unmount article");
+                                }
+                            },
+                            "fallback"
+                        ]
+                    },
+                    broken
+                ]
+            ]
+        );
+
+        expect(logs).toEqual(["mount article"]);
+        patch({ show: false });
+        expect(logs).toEqual(["mount article", "unmount article"]);
+    },
+
+    "onMount(): with catched component, original element's onMount does NOT fire when error caused replacement": () => {
+        const container = setup();
+        const logs: string[] = [];
+        const broken: any = () => { throw new Error("boom"); };
+        app(container, {}, () =>
+            [DIV,
+                {
+                    catch: [ARTICLE,
+                        {
+                            onMount: (s: unknown, ele: HTMLElement) => {
+                                logs.push("mount fallback");
+                            }
+                        },
+                        "fallback"
+                    ]
+                },
+                [SECTION,
+                    {
+                        onMount: (s: unknown, ele: HTMLElement) => {
+                            logs.push("mount original section");
+                        },
+                        onUnmount: (s: unknown, ele: HTMLElement) => {
+                            logs.push("unmount original section");
+                        }
+                    },
+                    broken
+                ]
+            ]
+        );
+
+        // SECTION never finishes mounting (its child broke), so its onMount must not fire.
+        // The catch on DIV replaces the broken subtree with ARTICLE whose onMount must fire.
+        expect(logs).toEqual(["mount fallback"]);
+    },
 }

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);
+    },
+};