@ryupold/vode 1.8.4 → 1.8.6

package/test/helper.ts

@@ -0,0 +1,168 @@
+import { children, ChildVode, PatchableState, tag, Vode } from "../src/vode";
+import { MockElement, MockText } from "./mocks";
+
+export class Expectation {
+    constructor(public readonly what: any) { }
+
+    toBeA(type: "undefined" | "object" | "function" | "bigint" | "boolean" | "number" | "string" | "symbol") {
+        if (typeof this.what !== type) {
+            throw new ExpectationError(this, `expected \n\ntypeof ${this.what}\n\nto be \n\n${type}`);
+        }
+    }
+
+    toEqual(other: any) {
+        function deepCompare(a: any, b: any, path: string[]): string[] | null {
+            if (typeof a !== typeof b) {
+                if (path.length === 0) path.push(``);
+                path[path.length - 1] += ` (type: ${typeof a} != ${typeof b})`;
+                return path;
+            }
+
+            if (typeof a !== "object" || a === null) {
+                if (path.length === 0) path.push(``);
+                path[path.length - 1] += ` (value: ${a} != ${b})`;
+                return a !== b ? path : null;
+            }
+
+            for (const prop of Object.entries(a)) {
+                const [k, v] = prop;
+                const result = deepCompare(v, b[k], [...path, k]);
+                if (result) {
+                    return result;
+                }
+            }
+
+            for (const prop of Object.entries(b)) {
+                const [k, v] = prop;
+                const result = deepCompare(a[k], v, [...path, k]);
+                if (result) {
+                    return result;
+                }
+            }
+
+            return null;
+        }
+
+        if (typeof this.what === "object" && typeof other === "object" && this.what !== null && other !== null) {
+            const unequal = deepCompare(this.what, other, []);
+            if (unequal) {
+                throw new ExpectationError(this, `expected \n\n${JSON.stringify(this.what, null, 2)}\n\n to equal \n\n${JSON.stringify(other, null, 2)}\n\nThey differ in: ${unequal.join(".")}`);
+            }
+        }
+        else {
+            if (this.what !== other) {
+                throw new ExpectationError(this, `expected (${typeof this.what})\n\n${this.what}\n\nto equal (${typeof other})\n\n${other}`);
+            }
+        }
+    }
+
+    toSucceed<Result>(...args: any): Result {
+        if (typeof this.what !== "function") {
+            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}`);
+        }
+        return this.what(...args);
+    }
+
+    toFail(...args: any): Error {
+        if (typeof this.what !== "function") {
+            throw new ExpectationError(this, `expected a function\n\nbut it is a ${typeof this.what}`);
+        }
+
+        let r: any;
+        try {
+            r = this.what(...args);
+        } catch (err: any) {
+            return err;
+        }
+        throw new ExpectationError(this, `expected function to fail\n\nbut it succeeded with a result of type ${typeof r}\n\n${r}`);
+    }
+
+    toMatch(v: ChildVode, state?: PatchableState) {
+        if (this.what instanceof MockElement || this.what instanceof MockText || typeof this.what === "string" || Array.isArray(this.what) || typeof this.what === "function") {
+            const that = this;
+            function deepCompare(e: MockElement | MockText | ChildVode, cv: ChildVode, path: string[]): string[] | null {
+
+                // unwrap component
+                while (typeof cv === "function") {
+                    if (!state) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na Component\n\nbut got no state passed in [toMatch]`);
+                    }
+                    cv = cv(state);
+                }
+                while (typeof e === "function") {
+                    if (!state) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na Component\n\nbut got no state passed in [toMatch]`);
+                    }
+                    e = e(state);
+                }
+
+                if (typeof cv === "string" && e instanceof MockText) {
+                    if (cv !== e.wholeText) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node with\n${cv}\n\nbut text was\n${e.wholeText}`);
+                    }
+                }
+                else if (typeof cv === "string" && typeof e === "string") {
+                    if (cv !== e) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node with\n${cv}\n\nbut text was\n${e}`);
+                    }
+                }
+
+                else if (Array.isArray(cv) && e instanceof MockElement) {
+                    if (tag(cv)?.toLocaleUpperCase() !== e.tagName.toUpperCase()) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)}>\n\nbut got <${e.tagName}>`);
+                    }
+                    const kids = children(cv) || [];
+                    for (let i = 0; i < kids.length; i++) {
+                        deepCompare(e.children[i], kids[i], [...path, `${tag(kids[i] as Vode) || "#text"}`]);
+                    }
+                    if (kids.length !== e.children.length) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\n${kids.length} children\n\nbut <${e.tagName}> has ${e.children.length} children`);
+                    }
+                }
+                else if (Array.isArray(cv) && Array.isArray(e)) {
+                    if (tag(cv)?.toLocaleUpperCase() !== tag(e)?.toUpperCase()) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element [${tag(cv)}]\n\nbut got [${tag(e)}]`);
+                    }
+                    const kids = children(cv) || [];
+                    const otherKids = children(e) || [];
+                    for (let i = 0; i < kids.length; i++) {
+                        deepCompare(otherKids[i], kids[i], [...path, `${tag(kids[i] as Vode) || "#text"}`]);
+                    }
+                    if (kids.length !== otherKids.length) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\n${kids.length} children\n\nbut [${tag(e)}] has ${otherKids.length} children`);
+                    }
+                }
+
+                else if (typeof cv === "string" && e instanceof MockElement) {
+                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node\n\nbut got <${e.tagName}>`);
+                }
+                else if (typeof cv === "string" && Array.isArray(e)) {
+                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node\n\nbut got [${tag(e)}]`);
+                }
+
+                else if (Array.isArray(cv) && e instanceof MockText) {
+                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)}>\n\nbut got #text (${e.wholeText})`);
+                }
+                else if (Array.isArray(cv) && typeof e === "string") {
+                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)}>\n\nbut got #text (${e})`);
+                }
+
+                return null;
+            }
+
+            deepCompare(this.what, v, [tag(v as Vode) || "#text"]);
+        } else {
+            throw new ExpectationError(this, `expected an element or text node\n\nbut it is a ${typeof this.what}\n${this.what}`);
+        }
+    }
+};
+
+export class ExpectationError extends Error {
+    constructor(public readonly expectation: Expectation, message?: string) {
+        super(message)
+    }
+}
+
+export function expect(what: any) {
+    return new Expectation(what);
+}

package/test/index.ts

@@ -0,0 +1,82 @@
+import { resetMocks } from "./mocks";
+import { ExpectationError } from "./helper";
+
+//=== REGISTERED TESTS =========================================
+import vodeTests from "./tests-vode";
+import appTests from "./tests-app";
+import defuseTests from "./tests-defuse";
+import hydrateTests from "./tests-hydrate";
+import memoTests from "./tests-memo";
+import createStateTests from "./tests-createState";
+import createPatchTests from "./tests-createPatch";
+import tagTests from "./tests-tag";
+import childrenTests from "./tests-children";
+import propsTests from "./tests-props";
+import mergeClassTests from "./tests-mergeClass";
+import mergeStyleTests from "./tests-mergeStyle";
+import mergePropsTests from "./tests-mergeProps";
+import stateContextTests from "./tests-state-context";
+import mountUnmountTests from "./tests-mount-unmount";
+
+const tests = {
+    ...vodeTests,
+    ...appTests,
+    ...defuseTests,
+    ...hydrateTests,
+    ...memoTests,
+    ...mountUnmountTests,
+
+    ...createStateTests,
+    ...createPatchTests,
+
+    ...tagTests,
+    ...propsTests,
+    ...childrenTests,
+
+    ...mergeClassTests,
+    ...mergeStyleTests,
+    ...mergePropsTests,
+
+    ...stateContextTests,
+};
+//===================================================
+
+const count = {
+    total: 0,
+    passed: 0,
+    failed: <string[]>[],
+}
+const line = "----------------------------------";
+
+for (const test of Object.entries(tests)) {
+    count.total++;
+    resetMocks();
+    try {
+        test[1]()
+        count.passed++;
+        console.log(`#${count.total} ${test[0]}\n-> 🟢 passed\n${line}`);
+    } catch (err: any) {
+        console.error(`#${count.total} ${test[0]}\n-> 🔴 failed`);
+        if (err instanceof ExpectationError) {
+            count.failed.push(`#${count.total} ${test[0]}\n-> 🔴 failed:\n${err.message}\n${line}`);
+        }
+        else {
+            count.failed.push(`#${count.total} ${test[0]}\n-> 🔴 failed:\n${err.message}\n${err.stack}\n${line}`);
+        }
+    }
+}
+
+console.log(`
+    total: ${count.total}
+    passed: ${count.passed}
+    failed: ${count.failed.length}
+`);
+
+if (count.passed === count.total) {
+    console.log("\n\nall tests passed\n");
+}
+else {
+    console.error(`${line.replaceAll("-", "=")}\nError summary:\n\n${count.failed.join(`\n${line}\n`)}`);
+
+    throw "\n\nsome tests failed (see output)\n";
+}

package/test/mocks.ts

@@ -0,0 +1,111 @@
+const NodeConstants = {
+    ELEMENT_NODE: 1,
+    ATTRIBUTE_NODE: 2,
+    TEXT_NODE: 3,
+    CDATA_SECTION_NODE: 4,
+    ENTITY_REFERENCE_NODE: 5,
+    ENTITY_NODE: 6,
+    PROCESSING_INSTRUCTION_NODE: 7,
+    COMMENT_NODE: 8,
+    DOCUMENT_NODE: 9,
+    DOCUMENT_TYPE_NODE: 10,
+    DOCUMENT_FRAGMENT_NODE: 11,
+    NOTATION_NODE: 12,
+};
+
+export class MockElement {
+    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 }));
+    }
+    style: { cssText: string } = { cssText: "" };
+    tagName = "UNKNOWN";
+    private _attrs: Record<string, string> = {};
+
+    constructor(public tag?: string) {
+        if (tag) 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; }
+
+    hasAttributes() { return Object.keys(this._attrs).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;
+    }
+    remove() {
+        if (this.parentElement) { const i = this.parentElement.childNodes.indexOf(this); if (i >= 0) this.parentElement.childNodes.splice(i, 1); }
+    }
+    replaceWith(...nodes: (MockElement | MockText)[]) {
+        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;
+        }
+    }
+    before(...nodes: (MockElement | MockText)[]) {
+        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;
+        }
+    }
+    get [Symbol.iterator]() { return Array.prototype[Symbol.iterator].bind(this.children); }
+}
+
+export class MockText {
+    nodeType = NodeConstants.TEXT_NODE;
+    parentElement: MockElement | 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)[]) {
+        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;
+        }
+    }
+    before(...nodes: (MockElement | MockText)[]) {
+        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;
+        }
+    }
+}
+
+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),
+        hidden: false,
+    };
+    const mockWin: any = {
+        requestAnimationFrame: (cb: any) => cb(Date.now()),
+        startViewTransition: (callbackOptions: any) => {
+            return {
+                finished: Promise.resolve(),
+                ready: Promise.resolve(),
+                updateCallbackDone: Promise.resolve(),
+                skipTransition() { },
+            };
+        }
+    };
+
+    globalThis.document ??= mockDoc as Document;
+    globalThis.window ??= mockWin as (Window & typeof globalThis);
+    globalThis.Node ??= NodeConstants as any;
+}

package/test/tests-app.ts

@@ -0,0 +1,226 @@
+import { expect } from "./helper";
+import { app, ARTICLE, DIV, P, SPAN } from "../index";
+
+export default {
+    "app(): successful initialization": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const patch = expect(
+            () => app(container, {}, () =>
+                [DIV,
+                    [ARTICLE,
+                        [P, "foo", [SPAN, "bar"]]
+                    ]
+                ]
+            )
+        ).toSucceed();
+
+        expect(patch).toBeA("function");
+
+        expect(container).toMatch(
+            [DIV,
+                [ARTICLE,
+                    [P, "foo", [SPAN, "bar"]]
+                ]
+            ]
+        );
+    },
+
+    //=== FAILURE CASES ===
+
+    "app(): fails when the container has no parent": () => {
+        const container = document.createElement("div");
+        const err = expect(() => app(container, {}, () => [DIV]))
+            .toFail();
+
+        expect(err.message).toEqual("first argument to app() must be a valid HTMLElement inside the <html></html> document");
+    },
+
+    "app(): fails when the state is not an object": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const err = expect(() => app(container, "oops", () => [DIV]))
+            .toFail();
+
+        expect(err.message).toEqual("second argument to app() must be a state object");
+    },
+
+    "app(): fails when the dom factory is not a function": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const err = expect(() => app(container, {}, [DIV] as any))
+            .toFail();
+
+        expect(err.message).toEqual("third argument to app() must be a function that returns a vode");
+    },
+
+    //=== INITIAL PATCHES ===
+
+    "app(): executes initial patches after first render": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const state = { count: 6, start: 1 };
+
+        app(container, state, () => [DIV],
+            { count: 7 },
+            () => ({ start: 2 })
+        );
+
+        expect(state).toEqual({ count: 7, start: 2 });
+    },
+
+    //=== STATE PATCHING ===
+
+    "app(): patch with object updates state and re-renders DOM": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const state: any = { msg: "hello" };
+        app(container, state, (s: any) => [DIV, s.msg]);
+
+        expect(state.msg).toEqual("hello");
+        expect(container).toMatch([DIV, "hello"]);
+
+        state.patch({ msg: "world" });
+
+        expect(state.msg).toEqual("world");
+        expect(container).toMatch([DIV, "world"]);
+    },
+
+    "app(): patch with effect function executes and applies result": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const state: any = { count: 0 };
+        app(container, state, (s: any) => [DIV, String(s.count)]);
+
+        state.patch(() => ({ count: 5 }));
+
+        expect(state.count).toEqual(5);
+        expect(container).toMatch([DIV, "5"]);
+    },
+
+    "app(): patch with array applies multiple patches in sequence": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const state: any = { a: 1, b: 2 };
+        app(container, state, () => [DIV]);
+
+        state.patch([{ a: 10 }, { b: 20 }]);
+
+        expect(state.a).toEqual(10);
+        expect(state.b).toEqual(20);
+    },
+
+    "app(): multiple sequential patches both apply": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const state: any = { x: 0, y: 0 };
+        app(container, state, () => [DIV]);
+
+        state.patch({ x: 1 });
+        state.patch({ y: 2 });
+
+        expect(state).toEqual({ x: 1, y: 2 });
+    },
+
+    //=== LIFECYCLE ===
+
+    "app(): onMount callback is called on newly created child elements": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        let mountCalled = false;
+        app(container, {}, () =>
+            [DIV,
+                [SPAN, { onMount: () => { mountCalled = true; return {}; } }, "text"]
+            ] as any
+        );
+
+        expect(mountCalled).toEqual(true);
+    },
+
+    //=== COMPONENTS ===
+
+    "app(): component function as child renders correctly": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        app(container, {}, () =>
+            [DIV,
+                ((s: any) => [SPAN, "component rendered"]) as any
+            ]
+        );
+
+        expect(container).toMatch(
+            [DIV, [SPAN, "component rendered"]]
+        );
+    },
+
+    "app(): component accesses state and renders dynamic content": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const state: any = { label: "dynamic" };
+        app(container, state, (s) =>
+            [DIV,
+                ((st: any) => [SPAN, st.label]) as any
+            ]
+        );
+
+        expect(container).toMatch([DIV, [SPAN, "dynamic"]]);
+    },
+
+    //=== DEEP STATE ===
+
+    "app(): deep nested state merges correctly via patch": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const state: any = { nested: { value: 1, other: "keep" } };
+        app(container, state, (s: any) => [DIV, String(s.nested.value)]);
+
+        state.patch({ nested: { value: 2 } });
+
+        expect(state.nested.value).toEqual(2);
+        expect(state.nested.other).toEqual("keep");
+        expect(container).toMatch([DIV, "2"]);
+    },
+
+    //=== IGNORED PATCHES ===
+
+    "app(): patching with ignored types is a no-op": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+
+        const state: any = { x: 1 };
+        app(container, state, () => [DIV]);
+
+        state.patch(null);
+        state.patch(undefined);
+        state.patch(42);
+        state.patch("ignored");
+        state.patch(true);
+
+        expect(state.x).toEqual(1);
+    },
+};

package/test/tests-children.ts

@@ -0,0 +1,69 @@
+import { children, child, childCount, childrenStart, DIV, SPAN, P, Vode } from "../index";
+import { expect } from "./helper";
+
+export default {
+    "children(): tag+props+children returns children array": () => {
+        const v: Vode = [DIV, { class: "x" }, [SPAN, "a"], [P, "b"]];
+        const c = children(v);
+        expect(Array.isArray(c)).toEqual(true);
+        expect(c!.length).toEqual(2);
+    },
+
+    "children(): tag+children (no props) returns children array": () => {
+        const v: Vode = [DIV, [SPAN, "a"], [P, "b"]];
+        const c = children(v);
+        expect(Array.isArray(c)).toEqual(true);
+        expect(c!.length).toEqual(2);
+    },
+
+    "children(): just-tag vode returns null": () => {
+        expect(children([DIV])).toEqual(null);
+    },
+
+    "children(): text vode returns null": () => {
+        expect(children("hello")).toEqual(null);
+    },
+
+    "childrenStart(): with props+children returns 2": () => {
+        expect(childrenStart([DIV, { class: "x" }, [SPAN]])).toEqual(2);
+    },
+
+    "childrenStart(): without props but with children returns 1": () => {
+        expect(childrenStart([DIV, [SPAN]])).toEqual(1);
+    },
+
+    "childrenStart(): just-tag returns -1": () => {
+        expect(childrenStart([DIV])).toEqual(-1);
+    },
+
+    "childrenStart(): text vode returns -1": () => {
+        expect(childrenStart("hello")).toEqual(-1);
+    },
+
+    "childCount(): matches actual child count": () => {
+        expect(childCount([DIV, { class: "x" }, [SPAN, "a"], [P, "b"]])).toEqual(2);
+        expect(childCount([DIV, [SPAN]])).toEqual(1);
+    },
+
+    "childCount(): returns 0 for no-children vode": () => {
+        expect(childCount([DIV])).toEqual(0);
+        expect(childCount("hello" as any)).toEqual(0);
+    },
+
+    "child(): returns correct child at index": () => {
+        const v: Vode = [DIV, { class: "x" }, [SPAN, "a"], [P, "b"]];
+
+        expect(child(v, 0)).toEqual([SPAN, "a"]);
+        expect(child(v, 1)).toEqual([P, "b"]);
+    },
+
+    "child(): returns undefined for out-of-bounds": () => {
+        expect(child([DIV, { class: "x" }, [SPAN]], 5))
+            .toEqual(undefined);
+    },
+
+    "child(): returns undefined for text vode": () => {
+        expect(child("hello" as any, 0))
+            .toEqual(undefined);
+    }
+};

package/test/tests-createPatch.ts

@@ -0,0 +1,28 @@
+import { createPatch } from "../src/vode";
+import { expect } from "./helper";
+
+export default {
+    "createPatch(): just returns the input": () => {
+        const p = { a: 123 };
+        expect(createPatch(p) === p).toEqual(true);
+    },
+
+    "createPatch(): returns undefined as-is": () => {
+        expect(createPatch(undefined)).toEqual(undefined);
+    },
+
+    "createPatch(): returns null as-is": () => {
+        expect(createPatch(null)).toEqual(null);
+    },
+
+    "createPatch(): returns function as-is": () => {
+        const fn = () => ({});
+        expect(createPatch(fn) === fn).toEqual(true);
+    },
+
+    "createPatch(): returns primitive as-is": () => {
+        expect(createPatch(42)).toEqual(42);
+        expect(createPatch("ignored")).toEqual("ignored");
+        expect(createPatch(false)).toEqual(false);
+    }
+};