cx 26.0.12 → 26.0.14

package/build/ui/Controller.spec.js

@@ -0,0 +1,247 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import { Controller } from "./Controller";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { Widget } from "./Widget";
+import { bind } from "./bind";
+import assert from "assert";
+describe("Controller", () => {
+    it("invokes lifetime methods", () => {
+        let init = 0, prepare = 0, explore = 0, cleanup = 0;
+        class TestController extends Controller {
+            onInit() {
+                init++;
+            }
+            onExplore() {
+                explore++;
+            }
+            onPrepare() {
+                prepare++;
+            }
+            onCleanup() {
+                cleanup++;
+            }
+        }
+        let store = new Store();
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: TestController }) }));
+        let tree = component.toJSON();
+        assert.equal(init, 1);
+        assert.equal(explore, 1);
+        assert.equal(prepare, 1);
+        assert.equal(cleanup, 1);
+    });
+    it("widgets invoke controller methods specified as strings", () => {
+        let callback = 0;
+        class TestController extends Controller {
+            callback() {
+                ++callback;
+            }
+        }
+        class Cmp extends Widget {
+            render(context, instance, key) {
+                instance.invoke("onTest");
+                return null;
+            }
+        }
+        let store = new Store();
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx(Cmp, { controller: TestController, onTest: "callback" }) }));
+        let tree = component.toJSON();
+        assert.equal(callback, 1);
+    });
+    it("widgets can access controller methods specified in ancestor controllers", () => {
+        let callback1 = 0;
+        let callback2 = 0;
+        class TestController1 extends Controller {
+            callback1() {
+                ++callback1;
+            }
+        }
+        class TestController2 extends Controller {
+            callback2() {
+                ++callback2;
+            }
+        }
+        class Cmp extends Widget {
+            render(context, instance, key) {
+                instance.invoke("onTest");
+                return null;
+            }
+        }
+        let store = new Store();
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: TestController1, children: _jsx(Cmp, { controller: TestController2, onTest: "callback1" }) }) }));
+        let tree = component.toJSON();
+        assert.equal(callback1, 1);
+        assert.equal(callback2, 0);
+    });
+    it("ancestor controllers are initialized first", () => {
+        let order = [];
+        class TestController1 extends Controller {
+            onInit() {
+                order.push("1");
+            }
+        }
+        class TestController2 extends Controller {
+            onInit() {
+                order.push("2");
+            }
+        }
+        let store = new Store();
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: TestController1, children: _jsx("div", { controller: TestController2 }) }) }));
+        let tree = component.toJSON();
+        assert.deepEqual(order, ["1", "2"]);
+    });
+    it("controllers on invisible elements are not initialized", () => {
+        let order = [];
+        class TestController1 extends Controller {
+            onInit() {
+                order.push("1");
+            }
+        }
+        class TestController2 extends Controller {
+            onInit() {
+                order.push("2");
+            }
+        }
+        let store = new Store();
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: TestController1, children: _jsx("div", { visible: false, controller: TestController2 }) }) }));
+        let tree = component.toJSON();
+        assert.deepEqual(order, ["1"]);
+    });
+    it("invokes triggers and computables in order of definition", () => {
+        let log = [];
+        class TestController extends Controller {
+            onInit() {
+                this.addTrigger("t1", [], () => {
+                    log.push("t1");
+                }, true);
+                this.addComputable("c1", [], () => {
+                    log.push("c1");
+                    return null;
+                });
+                this.addTrigger("t2", [], () => {
+                    log.push("t2");
+                }, true);
+            }
+        }
+        let store = new Store();
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: TestController }) }));
+        let tree = component.toJSON();
+        assert.deepEqual(log, ["t1", "c1", "t2"]);
+    });
+    it("is recreated if a component is hidden and shown", () => {
+        let initCount = 0;
+        class TestController extends Controller {
+            onInit() {
+                initCount++;
+            }
+        }
+        let store = new Store();
+        store.set("visible", true);
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { visible: bind("visible"), controller: TestController }) }));
+        let tree1 = component.toJSON();
+        assert.equal(initCount, 1);
+        store.set("visible", false);
+        let tree2 = component.toJSON();
+        assert.equal(tree2, null);
+        store.set("visible", true);
+        let tree3 = component.toJSON();
+        assert.equal(initCount, 2);
+    });
+    it("allows creation through a factory", () => {
+        let store = new Store({ data: { x: 0 } });
+        const controllerFactory = ({ store }) => {
+            return {
+                increment() {
+                    store.update("x", (x) => x + 1);
+                },
+            };
+        };
+        let c = Controller.create(controllerFactory, { store });
+        c.increment();
+        assert.equal(store.get("x"), 1);
+    });
+    it("lifetime methods of a functional controller are properly invoked", () => {
+        let initCount = 0, destroyCount = 0;
+        const testController = () => ({
+            onInit() {
+                initCount++;
+            },
+            onDestroy() {
+                destroyCount++;
+            },
+        });
+        let store = new Store();
+        store.set("visible", true);
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { visible: bind("visible"), controller: testController }) }));
+        let tree1 = component.toJSON();
+        assert.equal(initCount, 1);
+        store.set("visible", false);
+        let tree2 = component.toJSON();
+        assert.equal(destroyCount, 1);
+        store.set("visible", true);
+        let tree3 = component.toJSON();
+        assert.equal(initCount, 2);
+    });
+    it("widgets can easily define controller methods", () => {
+        let store = new Store({ data: { x: 0 } });
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: {
+                    increment(count) {
+                        this.store.update("x", (x) => x + count);
+                    },
+                }, children: _jsx("div", { controller: {
+                        onInit() {
+                            this.invokeParentMethod("increment", 1);
+                        },
+                    } }) }) }));
+        let tree1 = component.toJSON();
+        assert.equal(store.get("x"), 1);
+    });
+    it("functional controllers get store methods through configuration", () => {
+        let store = new Store({ data: { x: 0 } });
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: ({ update }) => ({
+                    increment(count) {
+                        update("x", (x) => x + count);
+                    },
+                }), children: _jsx("div", { controller: {
+                        onInit() {
+                            this.invokeParentMethod("increment", 1);
+                        },
+                    } }) }) }));
+        let tree1 = component.toJSON();
+        assert.equal(store.get("x"), 1);
+    });
+    it("addComputable accepts refs", () => {
+        let store = new Store({ data: { x: 0 } });
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: ({ ref }) => {
+                    let x = ref("x");
+                    return {
+                        onInit() {
+                            this.addComputable("y", [x], (x) => x + 1);
+                        },
+                    };
+                } }) }));
+        let tree1 = component.toJSON();
+        assert.equal(store.get("y"), 1);
+    });
+    it("invokeParentMethod is invoked on parent instance", () => {
+        let testValid = [];
+        class TestController1 extends Controller {
+            onInit() {
+                this.test();
+            }
+            test() {
+                testValid.push(1);
+                this.invokeParentMethod("test", 2);
+            }
+        }
+        class TestController2 extends Controller {
+            test(val) {
+                testValid.push(val);
+            }
+        }
+        let store = new Store();
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: TestController2, children: _jsx("div", { controller: TestController1 }) }) }));
+        // let tree = component.toJSON();
+        assert.deepStrictEqual(testValid, [1, 2]);
+    });
+});

package/build/ui/Cx.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/ui/Cx.spec.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { VDOM } from "./VDOM";
+import { ContainerBase } from "./Container";
+import { Store } from "../data/Store";
+import { bind } from "./bind";
+import { createTestRenderer, createTestWidget } from "../util/test/createTestRenderer";
+import assert from "assert";
+describe("Cx", () => {
+    it("can render cx content", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { children: "Test" }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["Test"],
+        });
+    });
+    it("store changes preserve the instance", () => {
+        let instanceLog = [];
+        let storeLog = [];
+        let widget = (_jsx("cx", { children: _jsx("div", { text: bind("text"), onExplore: (context, instance) => {
+                    instanceLog.push(instance);
+                    storeLog.push(instance.store);
+                } }) }));
+        let store1 = new Store({ data: { text: "Test1" } });
+        let store2 = new Store({ data: { text: "Test2" } });
+        const component = createTestRenderer(store1, widget);
+        let tree1 = component.toJSON();
+        assert.deepEqual(tree1, {
+            type: "div",
+            props: {},
+            children: ["Test1"],
+        });
+        component.update(createTestWidget(store2, widget));
+        let tree2 = component.toJSON();
+        assert.deepEqual(tree2, {
+            type: "div",
+            props: {},
+            children: ["Test2"],
+        });
+        assert.equal(instanceLog.length, 2);
+        assert.equal(instanceLog[0], instanceLog[1]); //store changes should preserve the instance
+        assert(storeLog[0] === store1);
+        assert(storeLog[1] === store2);
+    });
+    it("invokes lifetime methods in the right order", () => {
+        let events = [];
+        class TestWidget extends ContainerBase {
+            explore(context, instance) {
+                super.explore(context, instance);
+                events.push(["explore", this.id]);
+            }
+            exploreCleanup(context, instance) {
+                //super.exploreCleanup(context, instance);
+                events.push(["exploreCleanup", this.id]);
+            }
+            prepare(context, instance) {
+                //super.prepare(context, instance);
+                events.push(["prepare", this.id]);
+            }
+            prepareCleanup(context, instance) {
+                //super.prepareCleanup(context, instance);
+                events.push(["prepareCleanup", this.id]);
+            }
+            render(context, instance, key) {
+                events.push(["render", this.id]);
+                return VDOM.createElement("div", { key }, this.renderChildren(context, instance));
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsxs(TestWidget, { id: "0", children: [_jsx(TestWidget, { id: "0.0" }), _jsxs(TestWidget, { id: "0.1", children: [_jsx(TestWidget, { id: "0.1.0" }), _jsx(TestWidget, { id: "0.1.1" })] }), _jsx(TestWidget, { id: "0.2", children: _jsx(TestWidget, { id: "0.2.0" }) })] }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "div",
+                    props: {},
+                    children: null,
+                },
+                {
+                    type: "div",
+                    props: {},
+                    children: [
+                        {
+                            type: "div",
+                            props: {},
+                            children: null,
+                        },
+                        {
+                            type: "div",
+                            props: {},
+                            children: null,
+                        },
+                    ],
+                },
+                {
+                    type: "div",
+                    props: {},
+                    children: [
+                        {
+                            type: "div",
+                            props: {},
+                            children: null,
+                        },
+                    ],
+                },
+            ],
+        });
+        //console.log(events);
+        assert.deepEqual(events, [
+            ["explore", "0"],
+            ["explore", "0.0"],
+            ["exploreCleanup", "0.0"],
+            ["explore", "0.1"],
+            ["explore", "0.1.0"],
+            ["exploreCleanup", "0.1.0"],
+            ["explore", "0.1.1"],
+            ["exploreCleanup", "0.1.1"],
+            ["exploreCleanup", "0.1"],
+            ["explore", "0.2"],
+            ["explore", "0.2.0"],
+            ["exploreCleanup", "0.2.0"],
+            ["exploreCleanup", "0.2"],
+            ["exploreCleanup", "0"],
+            ["prepare", "0"],
+            ["prepare", "0.0"],
+            ["prepareCleanup", "0.0"],
+            ["prepare", "0.1"],
+            ["prepare", "0.1.0"],
+            ["prepareCleanup", "0.1.0"],
+            ["prepare", "0.1.1"],
+            ["prepareCleanup", "0.1.1"],
+            ["prepareCleanup", "0.1"],
+            ["prepare", "0.2"],
+            ["prepare", "0.2.0"],
+            ["prepareCleanup", "0.2.0"],
+            ["prepareCleanup", "0.2"],
+            ["prepareCleanup", "0"],
+            ["render", "0.2.0"],
+            ["render", "0.2"],
+            ["render", "0.1.1"],
+            ["render", "0.1.0"],
+            ["render", "0.1"],
+            ["render", "0.0"],
+            ["render", "0"],
+        ]);
+    });
+});

package/build/ui/DataProxy.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/ui/DataProxy.spec.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { Controller } from "./Controller";
+import { DataProxy } from "./DataProxy";
+import { computable } from "../data/computable";
+import { useState } from "../hooks";
+import { createFunctionalComponent } from "./createFunctionalComponent";
+import { Widget } from "./Widget";
+import { bind } from "./bind";
+import { tpl } from "./tpl";
+describe("DataProxy", () => {
+    it("can calculate values", () => {
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: { bind: "value" },
+                }, children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["good"],
+        });
+    });
+    it("can write into values aliased with bind", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.set("$value", "excellent");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: { bind: "value" },
+                }, controller: TestController, children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(store.get("value"), "excellent");
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["excellent"],
+        });
+    });
+    it("can write into aliased values using provided setters", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.set("$value", "excellent");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: {
+                        expr: computable("value", (value) => value),
+                        set: (value, { store }) => {
+                            store.set("value", value);
+                        },
+                    },
+                }, controller: TestController, children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(store.get("value"), "excellent");
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["excellent"],
+        });
+    });
+    it("allows shorter syntax", () => {
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { alias: "$value", value: bind("value"), children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["good"],
+        });
+    });
+    it("correctly updates aliased data after write", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.set("$value", "excellent");
+                assert.equal(this.store.get("$value"), "excellent");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: { bind: "value" },
+                }, controller: TestController, children: _jsx("span", { text: bind("$value") }) }) }));
+        let store = new Store({
+            data: {
+                value: "good",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(store.get("value"), "excellent");
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["excellent"],
+        });
+    });
+    it("properly binds structures", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.set("$person.firstName", "Jim");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $person: { bind: "person" },
+                }, controller: TestController, children: _jsx("span", { text: tpl("{$person.firstName} {$person.lastName}") }) }) }));
+        let store = new Store({
+            data: {
+                person: { firstName: "John", lastName: "Smith" },
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(store.get("person.firstName"), "Jim");
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["Jim Smith"],
+        });
+    });
+    it("works with Store refs", () => {
+        let widget = createFunctionalComponent(() => {
+            let valueRef = useState("a");
+            return (_jsx("cx", { children: _jsx(DataProxy, { data: {
+                        $value: valueRef,
+                    }, children: _jsx("span", { text: bind("$value"), controller: {
+                            onInit() {
+                                valueRef.set("b");
+                            },
+                        } }) }) }));
+        });
+        let store = new Store({
+            data: {
+            //value: "good"
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["b"],
+        });
+    });
+    it("controllers set on the DataProxy can see calculated values", () => {
+        let value;
+        let widget = Widget.create(_jsx("cx", { children: _jsx(DataProxy, { data: {
+                    $value: 5,
+                }, controller: {
+                    onInit() {
+                        value = this.store.get("$value");
+                    },
+                } }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.equal(value, 5);
+    });
+    it("correctly propagates undefined values over a previous value (bug)", () => {
+        let widget = (_jsxs("cx", { children: [_jsx(DataProxy, { data: {
+                        $value: { bind: "value" },
+                    }, children: _jsx("span", { text: bind("$value") }) }), _jsx(DataProxy, { data: {
+                        $value: { bind: "dummy" },
+                    }, children: _jsx("span", { text: bind("$value") }) })] }));
+        let store = new Store({
+            data: {
+                value: "initial",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "span",
+                props: {},
+                children: ["initial"],
+            },
+            {
+                type: "span",
+                props: {},
+                children: null,
+            },
+        ]);
+    });
+});

package/build/ui/Instance.d.ts

@@ -1,7 +1,7 @@
+import { View } from "../data/View";
 import { Controller } from "./Controller";
 import { RenderingContext } from "./RenderingContext";
 import type { Widget } from "./Widget";
-import { View } from "../data/View";
 /**
  * Serializable value types that can be safely passed through the framework
  */

package/build/ui/Instance.js

@@ -1,17 +1,17 @@
-import { Controller } from "./Controller";
-import { debug, renderFlag, processDataFlag, destroyFlag } from "../util/Debug";
+import { isAccessorChain } from "../data/createAccessorModelProxy";
+import { debug, destroyFlag, processDataFlag, renderFlag } from "../util/Debug";
 import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
-import { throttle } from "../util/throttle";
-import { validatedDebounce } from "../util/validatedDebounce";
-import { batchUpdates } from "./batchUpdates";
-import { isString } from "../util/isString";
-import { isFunction } from "../util/isFunction";
-import { isDefined } from "../util/isDefined";
 import { isArray } from "../util/isArray";
-import { isObject } from "../util/isObject";
+import { isDefined } from "../util/isDefined";
+import { isFunction } from "../util/isFunction";
 import { isNonEmptyArray } from "../util/isNonEmptyArray";
+import { isObject } from "../util/isObject";
+import { isString } from "../util/isString";
 import { isUndefined } from "../util/isUndefined";
-import { isAccessorChain } from "../data/createAccessorModelProxy";
+import { throttle } from "../util/throttle";
+import { validatedDebounce } from "../util/validatedDebounce";
+import { batchUpdates } from "./batchUpdates";
+import { Controller } from "./Controller";
 let instanceId = 1000;
 /**
  * Base Instance class

package/build/ui/IsolatedScope.spec.d.ts

@@ -0,0 +1 @@
+export {};