@ryupold/vode 1.8.7 → 1.8.8

package/test/mocks.ts

@@ -13,84 +13,178 @@ const NodeConstants = {
     NOTATION_NODE: 12,
 };
 
-export class MockElement {
+class FakeNodeList implements NodeListOf<ChildNode> {
+    [index: number]: ChildNode;
+    public readonly data: ChildNode[] = [];
+
+    constructor() {
+        let self = this;
+
+        return new Proxy(this, {
+            get(target, prop) {
+                const key: string = typeof prop === "symbol" ? String(prop) : prop;
+
+                if (<any>Number(key) == key && !(prop in target)) {
+                    return self.data[parseInt(key)];
+                }
+                return target[prop as any];
+            }
+        });
+    }
+
+
+    item(index: number): ChildNode {
+        return this.data[index] ?? null;
+    }
+    forEach(callbackfn: (value: ChildNode, key: number, parent: NodeListOf<ChildNode>) => void, thisArg?: any): void {
+        for (let i = 0; i < this.length; i++) {
+            callbackfn.bind(thisArg)(this.data[i], i, this);
+        }
+    }
+    entries(): ArrayIterator<[number, ChildNode]> {
+        return new Array(this.length).fill(0).map((_, i) => [i, this[i]] as [number, ChildNode])[Symbol.iterator]();
+    }
+    keys(): ArrayIterator<number> {
+        return new Array(this.data.length).fill(0).map((_, i) => i)[Symbol.iterator]();
+    }
+    values(): ArrayIterator<ChildNode> {
+        return new Array(this.data.length).fill(0).map((_, i) => this[i])[Symbol.iterator]();
+    }
+    [Symbol.iterator](): ArrayIterator<ChildNode> {
+        return new Array(this.data.length).fill(0).map((_, i) => this[i])[Symbol.iterator]();
+    }
+    get length() {
+        return this.data.length;
+    }
+}
+
+export class FakeElement {
+    public fakeAttributes: Record<string, string> = {};
+
     nodeType = NodeConstants.ELEMENT_NODE;
-    childNodes: (MockElement | MockText)[] = [];
-    children: (MockElement | MockText)[] = [];
-    parentElement: MockElement | null = null;
-    get attributes() {
-        return Object.entries(this._attrs).map(([name, value]) => ({ name, value }));
+    parentElement: HTMLElement | null = null;
+    childNodes: NodeListOf<ChildNode> = new FakeNodeList();
+    get children(): HTMLCollection {
+        return this.childNodes as unknown as HTMLCollection;
     }
     style: { cssText: string } = { cssText: "" };
-    tagName = "UNKNOWN";
-    private _attrs: Record<string, string> = {};
+
+    readonly tagName: string;
 
     constructor(public tag?: string) {
-        if (tag) this.tagName = tag.toUpperCase();
+        this.tagName = tag?.toUpperCase() || "???";
     }
 
     get firstChild() { return this.childNodes[0] ?? null; }
     get lastChild() { return this.childNodes[this.childNodes.length - 1] ?? null; }
     get nextSibling() { return null; }
+    get attributes() {
+        return Object.entries(this.fakeAttributes).map(([name, value]) => ({ name, value })) as any;
+    }
 
-    hasAttributes() { return Object.keys(this._attrs).length > 0; }
+    hasAttributes() { return Object.keys(this.fakeAttributes).length > 0; }
     hasChildNodes() { return this.childNodes.length > 0; }
-    setAttribute(name: string, value: string) { this._attrs[name] = value; }
-    removeAttribute(name: string) { delete this._attrs[name]; }
-    appendChild(child: MockElement | MockText) {
-        this.childNodes.push(child); this.children.push(child); if (child.parentElement !== undefined) child.parentElement = this; return child;
+    setAttribute(name: string, value: string) { this.fakeAttributes[name] = value; }
+    removeAttribute(name: string) { delete this.fakeAttributes[name]; }
+
+    appendChild(child: FakeElement | FakeTextNode): FakeElement | FakeTextNode {
+        (this.childNodes as FakeNodeList).data.push(child as any);
+        (child as any).parentElement = this;
+        return child;
     }
     remove() {
-        if (this.parentElement) { const i = this.parentElement.childNodes.indexOf(this); if (i >= 0) this.parentElement.childNodes.splice(i, 1); }
+        if (this.parentElement) {
+            const i = (this.parentElement.childNodes as FakeNodeList).data.indexOf(this as any);
+            if (i >= 0)
+                (this.parentElement.childNodes as FakeNodeList).data.splice(i, 1);
+        }
     }
-    replaceWith(...nodes: (MockElement | MockText)[]) {
+    replaceWith(...nodes: (FakeElement | FakeTextNode)[]) {
         const parent = this.parentElement;
         if (parent) {
-            const i = parent.childNodes.indexOf(this);
-            if (i >= 0) { parent.childNodes.splice(i, 1, ...nodes); }
-            for (const n of nodes) n.parentElement = parent;
+            const i = (<FakeNodeList>parent.childNodes).data.indexOf(this as any);
+            if (i >= 0) {
+                (<FakeNodeList>parent.childNodes).data.splice(i, 1, ...nodes as any);
+            }
+            for (const n of nodes) {
+                n.parentElement = parent;
+            }
         }
     }
-    before(...nodes: (MockElement | MockText)[]) {
+    before(...nodes: (FakeElement | FakeTextNode)[]) {
         const parent = this.parentElement;
         if (parent) {
-            const i = parent.childNodes.indexOf(this);
-            if (i >= 0) { parent.childNodes.splice(i, 0, ...nodes); }
-            for (const n of nodes) n.parentElement = parent;
+            const i = (<FakeNodeList>parent.childNodes).data.indexOf(this as any);
+            if (i >= 0) {
+                for (const n of nodes) {
+                    if (n === this) continue;
+                    if (n.parentElement) {
+                        const ni = (<FakeNodeList>n.parentElement.childNodes).data.indexOf(n as any);
+                        if (ni >= 0) (<FakeNodeList>n.parentElement.childNodes).data.splice(ni, 1);
+                    }
+                }
+                const filtered = nodes.filter(n => n !== this);
+                (<FakeNodeList>parent.childNodes).data.splice(i, 0, ...filtered as any);
+                for (const n of filtered) {
+                    n.parentElement = parent;
+                }
+            }
         }
     }
-    get [Symbol.iterator]() { return Array.prototype[Symbol.iterator].bind(this.children); }
+    get [Symbol.iterator]() {
+        return Array.prototype[Symbol.iterator].bind(this.children);
+    }
 }
 
-export class MockText {
+export class FakeTextNode {
     nodeType = NodeConstants.TEXT_NODE;
-    parentElement: MockElement | null = null;
+    parentElement: HTMLElement | null = null;
     constructor(public nodeValue: string) { }
     get wholeText() { return this.nodeValue; }
-    remove() { if (this.parentElement) { const i = this.parentElement.childNodes.indexOf(this); if (i >= 0) this.parentElement.childNodes.splice(i, 1); } }
-    replaceWith(...nodes: (MockElement | MockText)[]) {
+    remove() {
+        if (this.parentElement) {
+            const i = (<FakeNodeList>this.parentElement.childNodes).data.indexOf(this as any);
+            if (i >= 0)
+                (<FakeNodeList>this.parentElement.childNodes).data.splice(i, 1);
+        }
+    }
+    replaceWith(...nodes: (FakeElement | FakeTextNode)[]) {
         const parent = this.parentElement;
         if (parent) {
-            const i = parent.childNodes.indexOf(this);
-            if (i >= 0) { parent.childNodes.splice(i, 1, ...nodes); }
-            for (const n of nodes) n.parentElement = parent;
+            const i = (<FakeNodeList>parent.childNodes).data.indexOf(this as any);
+            if (i >= 0) { (<FakeNodeList>parent.childNodes).data.splice(i, 1, ...nodes as any); }
+            for (const n of nodes) {
+                n.parentElement = parent;
+            }
         }
     }
-    before(...nodes: (MockElement | MockText)[]) {
+    before(...nodes: (FakeElement | FakeTextNode)[]) {
         const parent = this.parentElement;
         if (parent) {
-            const i = parent.childNodes.indexOf(this);
-            if (i >= 0) { parent.childNodes.splice(i, 0, ...nodes); }
-            for (const n of nodes) n.parentElement = parent;
+            const i = (<FakeNodeList>parent.childNodes).data.indexOf(this as any);
+            if (i >= 0) {
+                for (const n of nodes) {
+                    if (n === this) continue;
+                    if (n.parentElement) {
+                        const ni = (<FakeNodeList>n.parentElement.childNodes).data.indexOf(n as any);
+                        if (ni >= 0) (<FakeNodeList>n.parentElement.childNodes).data.splice(ni, 1);
+                    }
+                }
+                const filtered = nodes.filter(n => n !== this);
+                (<FakeNodeList>parent.childNodes).data.splice(i, 0, ...filtered as any);
+                for (const n of filtered) {
+                    n.parentElement = parent;
+                }
+            }
         }
     }
 }
 
 export function resetMocks() {
     const mockDoc: any = {
-        createElement: (tag: string) => new MockElement(tag),
-        createTextNode: (text: string) => new MockText(text),
-        createElementNS: (ns: string, tag: string) => new MockElement(tag),
+        createElement: (tag: string) => new FakeElement(tag),
+        createTextNode: (text: string) => new FakeTextNode(text),
+        createElementNS: (ns: string, tag: string) => new FakeElement(tag),
         hidden: false,
     };
     const mockWin: any = {

package/test/tests-app.ts

@@ -1,5 +1,5 @@
 import { expect } from "./helper";
-import { app, ARTICLE, DIV, P, SPAN } from "../index";
+import { app, ARTICLE, BUTTON, createState, DIV, P, SPAN, SECTION } from "../index";
 
 export default {
     "app(): successful initialization": () => {
@@ -223,4 +223,120 @@ export default {
 
         expect(state.x).toEqual(1);
     },
+
+    "app(): isolated state of multiple independent vode app instances": () => {
+        const root = document.createElement("div");
+
+        // APP 1 (foo) //
+        const containerFoo = document.createElement("div");
+        root.appendChild(containerFoo);
+        const stateFoo = createState({ count: 0 });
+        const patchFoo = app<typeof stateFoo>(containerFoo, stateFoo, (s) => [
+            DIV,
+            [P, `App 1 count: ${s.count}`],
+            [BUTTON, {
+                onclick: () => {
+                    // sync state2 from app1 via the returned patch function
+                    patchBar({ count: stateBar.count + 1 });
+                    return { count: s.count + 1 };
+                }
+            }, "Sync +1"],
+        ]);
+        /////////////////
+
+        // APP 2 (bar) //
+        const containerBar = document.createElement("div");
+        root.appendChild(containerBar);
+        const stateBar = createState({ count: 0 });
+        const patchBar = app<typeof stateBar>(containerBar, stateBar, (s) => [
+            DIV,
+            [P, `App 2 count: ${s.count}`],
+        ]);
+        /////////////////
+
+        expect(containerFoo).toMatch(
+            [DIV,
+                [P, "App 1 count: 0"],
+                [BUTTON, "Sync +1"],
+            ]
+        );
+
+        expect(containerBar).toMatch(
+            [DIV,
+                [P, "App 2 count: 0"],
+            ]
+        );
+
+        // Patch state1 independently: no effect on state2
+        patchFoo({ count: 5 });
+
+        expect(containerFoo).toMatch(
+            [DIV,
+                [P, "App 1 count: 5"],
+                [BUTTON, "Sync +1"],
+            ]
+        );
+
+        expect(containerBar).toMatch(
+            [DIV,
+                [P, "App 2 count: 0"],
+            ]
+        );
+
+        // Patch state2 independently: no effect on state1
+        patchBar({ count: 3 });
+
+        expect(containerFoo).toMatch(
+            [DIV,
+                [P, "App 1 count: 5"],
+                [BUTTON, "Sync +1"],
+            ]
+        );
+
+        expect(containerBar).toMatch(
+            [DIV,
+                [P, "App 2 count: 3"],
+            ]
+        );
+
+        // Sync state2 via the returned patch function
+        patchBar({ count: 10 });
+
+        expect(containerBar).toMatch(
+            [DIV,
+                [P, "App 2 count: 10"],
+            ]
+        );
+    },
+
+    "app(): root tag changes between renders": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        const state = createState({ useSection: false });
+
+        const patch = app<typeof state>(container, state, (s) =>
+            s.useSection ? [SECTION, "section mode"] : [DIV, "div mode"]
+        );
+
+        expect(container).toMatch([DIV, "div mode"]);
+
+        patch({ useSection: true });
+
+        expect(root).toMatch([DIV, [SECTION, "section mode"]]);
+    },
+
+    "app(): event handler with object patch": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        const state: any = { count: 0 };
+
+        app(container, state, (s: any) =>
+            [DIV, { onclick: { count: 42 } }, "click me"]
+        );
+
+        const el = (container as any)._vode.vode.node;
+        expect(el.onclick).toBeA("function");
+    },
 };

package/test/tests-catch.ts

@@ -0,0 +1,160 @@
+import { expect } from "./helper";
+import { app, createState, DIV, ARTICLE, SECTION, P } from "../index";
+
+function setup() {
+    const root = document.createElement("div");
+    const container = document.createElement("div");
+    root.appendChild(container);
+    return container;
+}
+
+export default {
+    "catch: function fallback renders instead of broken component": () => {
+        const container = setup();
+        const broken = () => { throw new Error("boom"); };
+
+        app(container, {}, () =>
+            [DIV,
+                [SECTION,
+                    { catch: (s: unknown, err: Error) => [P, `caught: ${err.message}`] },
+                    broken
+                ]
+            ]
+        );
+
+        expect(container).toMatch(
+            [DIV,
+                [P, "caught: boom"]
+            ]
+        );
+    },
+
+    "catch: static vode fallback renders instead of broken component": () => {
+        const container = setup();
+        const broken = () => { throw new Error("boom"); };
+
+        app(container, {}, () =>
+            [DIV,
+                [SECTION,
+                    { catch: [ARTICLE, "error occurred"] },
+                    broken
+                ]
+            ]
+        );
+
+        expect(container).toMatch(
+            [DIV,
+                [ARTICLE, "error occurred"]
+            ]
+        );
+    },
+
+    "catch: nested error boundaries — inner catch handles inner error": () => {
+        const container = setup();
+        const broken = () => { throw new Error("inner boom"); };
+
+        app(container, {}, () =>
+            [DIV,
+                [SECTION,
+                    [P,
+                        {
+                            catch: [ARTICLE, "inner fallback"]
+                        },
+                        broken
+                    ]
+                ]
+            ]
+        );
+
+        expect(container).toMatch(
+            [DIV,
+                [SECTION,
+                    [ARTICLE, "inner fallback"]
+                ]
+            ]
+        );
+    },
+
+    "catch: nested error boundaries — outer catches when inner has no handler": () => {
+        const container = setup();
+        const broken = () => { throw new Error("boom"); };
+
+        app(container, {}, () =>
+            [DIV,
+                [SECTION,
+                    { catch: [P, "outer caught it"] },
+                    [ARTICLE, broken]
+                ]
+            ]
+        );
+
+        expect(container).toMatch(
+            [DIV,
+                [P, "outer caught it"]
+            ]
+        );
+    },
+
+    "catch: error propagates when no handler exists on entire tree": () => {
+        const container = setup();
+        const broken = () => { throw new Error("crash"); };
+        let threw = false;
+
+        try {
+            app(container, {}, () =>
+                [DIV, [P, broken]]
+            );
+        } catch {
+            threw = true;
+        }
+
+        expect(threw).toEqual(true);
+    },
+
+    "catch: catch handler changed on A→A path": () => {
+        const container = setup();
+        const state = createState({ catchValue: "v1", showBroken: false });
+        const broken = () => { throw new Error("boom"); };
+
+        const patch = app<typeof state>(container, state, (s) =>
+            [DIV,
+                [SECTION,
+                    { catch: [P, s.catchValue] },
+                    s.showBroken ? broken : "ok"
+                ]
+            ]
+        );
+
+        expect(container).toMatch(
+            [DIV, [SECTION, "ok"]]
+        );
+
+        patch({ catchValue: "v2", showBroken: true });
+
+        expect(container).toMatch(
+            [DIV, [P, "v2"]]
+        );
+    },
+
+    "catch: error in one sibling doesn't affect the other": () => {
+        const container = setup();
+        const broken = () => { throw new Error("boom"); };
+
+        app(container, {}, () =>
+            [DIV,
+                [SECTION,
+                    { catch: [P, "whoops"] },
+                    broken
+                ],
+                [ARTICLE, "i am fine"]
+            ]
+        );
+
+        expect(container).toMatch(
+            [DIV,
+                [P, "whoops"],
+                [ARTICLE, "i am fine"]
+            ]
+        );
+    },
+};

package/test/tests-defuse.ts

@@ -70,5 +70,26 @@ export default {
 
         expect(state.patch)
             .toEqual(undefined);
-    }
+    },
+
+    "defuse(): clears event listeners from child vodes without _vode": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        app(container, {}, () => [DIV, { onclick: () => ({}) },
+            [DIV, { onclick: () => ({}) }]
+        ] as any);
+        const v = (container as any)._vode.vode;
+        const child1 = (v as any).node;
+        const child1onclick = child1.onclick;
+        const child2 = (v as any)[2].node;
+        expect(typeof child1onclick).toEqual("function");
+        expect(typeof child2.onclick).toEqual("function");
+        defuse(container as any);
+
+        expect(child1.onclick)
+            .toEqual(null);
+        expect(child2.onclick)
+            .toEqual(null);
+    },
 };