npm - @ryupold/vode - Versions diffs - 1.8.4 → 1.8.5 - Mend

@ryupold/vode 1.8.4 → 1.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/.github/workflows/publish.yml +13 -0
package/.github/workflows/tests.yml +17 -0
package/dist/vode.cjs.min.js +2 -2
package/dist/vode.es5.min.js +4 -4
package/dist/vode.js +28 -8
package/dist/vode.min.js +1 -1
package/dist/vode.min.mjs +1 -1
package/dist/vode.mjs +28 -8
package/package.json +4 -3
package/src/merge-style.ts +4 -1
package/src/vode.ts +27 -8
package/test/helper.ts +168 -0
package/test/index.ts +80 -0
package/test/mocks.ts +111 -0
package/test/tests-app.ts +226 -0
package/test/tests-children.ts +69 -0
package/test/tests-createPatch.ts +28 -0
package/test/tests-createState.ts +43 -0
package/test/tests-defuse.ts +74 -0
package/test/tests-hydrate.ts +68 -0
package/test/tests-memo.ts +119 -0
package/test/tests-mergeClass.ts +63 -0
package/test/tests-mergeProps.ts +43 -0
package/test/tests-mergeStyle.ts +39 -0
package/test/tests-props.ts +34 -0
package/test/tests-state-context.ts +106 -0
package/test/tests-tag.ts +33 -0
package/test/tests-vode.ts +27 -0
package/tsconfig.test.json +18 -0

package/test/tests-app.ts ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/test/tests-createState.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { expect } from "./helper";
+import { createState, app, DIV } from "../index";
+export default {
+    "createState(): throws when state is not an object": () => {
+        const err = expect(() => createState(null as any)).toFail();
+        expect(err.message)
+            .toEqual("createState() must be called with a state object");
+    },
+    "createState(): adds patch function to state": () => {
+        const state = createState({ x: 1 });
+        expect(typeof (state as any).patch).toEqual("function");
+        expect((state)).toEqual({ x: 1, patch: (state as any).patch });
+    },
+    "createState(): patch is non-enumerable": () => {
+        const state = createState({ x: 1 });
+        expect(Object.keys(state)).toEqual(["x"]);
+    },
+    "createState(): app picks up queued patches": () => {
+        const state: any = createState({ count: 0 });
+        state.patch({ count: 1 });
+        state.patch({ count: 2 });
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        app(container, state, () => [DIV]);
+        expect(state.count)
+            .toEqual(2);
+    },
+    "createState(): already-patchable state is kept as-is": () => {
+        const existingPatch = (action: any) => { };
+        const state: any = { value: 5, patch: existingPatch };
+        const result = createState(state);
+        expect(result.patch === existingPatch)
+            .toEqual(true);
+    },
+};

package/test/tests-defuse.ts ADDED Viewed

@@ -0,0 +1,74 @@
+import { expect } from "./helper";
+import { app, DIV, defuse } from "../index";
+export default {
+    "defuse(): on a container without _vode is a no-op": () => {
+        const container = document.createElement("div");
+        expect(() => defuse(container as any))
+            .toSucceed();
+    },
+    "defuse(): removes _vode from container": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        app(container, {}, () => [DIV]);
+        expect(typeof (container as any)._vode).toEqual("object");
+        defuse(container as any);
+        expect((container as any)._vode)
+            .toEqual(undefined);
+    },
+    "defuse(): removes patch function from state": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        const state: any = {};
+        app(container, state, () => [DIV]);
+        expect(typeof state.patch).toEqual("function");
+        defuse(container as any);
+        expect(state.patch)
+            .toEqual(undefined);
+    },
+    "defuse(): disables renderSync and renderAsync": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        app(container, {}, () => [DIV]);
+        defuse(container as any);
+        expect((container as any)._vode)
+            .toEqual(undefined);
+    },
+    "defuse(): clears event listeners from rendered elements": () => {
+        const root = document.createElement("div");
+        const container = document.createElement("div");
+        root.appendChild(container);
+        app(container, {}, () => [DIV, { onclick: () => ({}) }] as any);
+        const node = (container as any)._vode.vode.node;
+        expect(typeof node.onclick).toEqual("function");
+        defuse(container as any);
+        expect(node.onclick)
+            .toEqual(null);
+    },
+    "defuse(): recurses into child containers": () => {
+        const root = document.createElement("div");
+        const outer = document.createElement("div");
+        const inner = document.createElement("div");
+        root.appendChild(outer);
+        outer.appendChild(inner);
+        const state: any = {};
+        app(inner, state, () => [DIV]);
+        defuse(outer as any);
+        expect(state.patch)
+            .toEqual(undefined);
+    }
+};

package/test/tests-hydrate.ts ADDED Viewed

@@ -0,0 +1,68 @@
+import { expect } from "./helper";
+import { hydrate, DIV, SPAN, P } from "../index";
+import { MockElement, MockText } from "./mocks";
+export default {
+    "hydrate(): text node returns its text content": () => {
+        const text = new MockText("hello world");
+        expect(hydrate(text as any))
+            .toMatch("hello world");
+    },
+    "hydrate(): empty element returns a vode": () => {
+        const el = new MockElement("div");
+        const result = hydrate(el as any);
+        expect(result)
+            .toMatch([DIV]);
+    },
+    "hydrate(): element with children returns full vode tree": () => {
+        const parent = new MockElement("div");
+        const child = new MockElement("span");
+        parent.appendChild(child);
+        expect(hydrate(parent as any))
+            .toMatch([DIV, [SPAN]]);
+    },
+    "hydrate(): element with text child": () => {
+        const parent = new MockElement("p");
+        const text = new MockText("hello");
+        parent.appendChild(text);
+        expect(hydrate(parent as any))
+            .toMatch([P, "hello"]);
+    },
+    "hydrate(): element with attributes reads them into props": () => {
+        const el = new MockElement("div");
+        el.setAttribute("class", "foo");
+        el.setAttribute("id", "bar");
+        expect(hydrate(el as any))
+            .toMatch([DIV, { class: "foo", id: "bar" }]);
+    },
+    "hydrate(): unknown node type returns undefined": () => {
+        const frag = { nodeType: 999 } as any;
+        expect(hydrate(frag))
+            .toEqual(undefined);
+    },
+    "hydrate(): empty text node returns undefined": () => {
+        const text = new MockText("   ");
+        expect(hydrate(text as any))
+            .toEqual(undefined);
+    },
+    "hydrate(): only element and text nodes are supported": () => {
+        const comment = { nodeType: Node.COMMENT_NODE } as any;
+        expect(hydrate(comment))
+            .toEqual(undefined);
+    },
+};

package/test/tests-memo.ts ADDED Viewed

@@ -0,0 +1,119 @@
+import { expect } from "./helper";
+import { memo, DIV, app, createState, SPAN } 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();
+        expect(err.message)
+            .toEqual("first argument to memo() must be an array of values to compare");
+    },
+    "memo(): throws when componentOrProps is not a function": () => {
+        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");
+    },
+    "memo(): integration with app prevents re-render when deps match": () => {
+        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, memo(
+            [s.count],
+            (s) => {
+                callCount++;
+                return [DIV, [SPAN, `${s.count}`]];
+            }
+        )]);
+        expect(callCount).toEqual(1);
+        state.patch({ count: 12 }); //same value, should not re-render
+        expect(callCount).toEqual(1);
+        state.patch({ count: 13 }); //different value, should re-render
+        expect(callCount).toEqual(2);
+        expect(container).toMatch(
+            [DIV,
+                [DIV,
+                    [SPAN, "13"]
+                ]
+            ]
+        );
+    },
+    "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": () => {
+        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,
+            () => memo(
+                [s.count],
+                (s) => {
+                    callCount++;
+                    return [DIV, [SPAN, `${s.count}`]];
+                }
+            )]);
+        expect(callCount).toEqual(1);
+        state.patch({ count: 12 }); //same value, should not re-render
+        expect(callCount).toEqual(1);
+    },
+};

package/test/tests-mergeClass.ts ADDED Viewed

@@ -0,0 +1,63 @@
+import { mergeClass } from "../index";
+import { expect } from "./helper";
+export default {
+    "mergeClass(): no args returns null": () => {
+        expect(mergeClass()).toEqual(null);
+    },
+    "mergeClass(): single string returns it": () => {
+        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(): string and array": () => {
+        expect(mergeClass("foo", ["bar", "baz"])).toEqual("bar baz foo");
+    },
+    "mergeClass(): array and string": () => {
+        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 string arrays with duplicates": () => {
+        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(): object and string": () => {
+        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(): object and array": () => {
+        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(): falsy entries are skipped": () => {
+        expect(mergeClass("foo", null, "bar")).toEqual("foo bar");
+        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");
+    }
+};