cx 26.0.12 → 26.0.14

package/build/ui/Restate.spec.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Restate } from "./Restate";
+import { Store } from "../data/Store";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { Controller } from "./Controller";
+import { bind } from "./bind";
+import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
+describe("Restate", () => {
+    it("provides a blank slate", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsxs(Restate, { data: {
+                        value: "good",
+                    }, children: [_jsx("span", { text: bind("value") }), _jsx("span", { text: bind("value2") })] }) }) }));
+        let store = new Store({
+            data: {
+                value: "bad",
+                value2: "also bad",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "span",
+                    props: {},
+                    children: ["good"],
+                },
+                {
+                    type: "span",
+                    props: {},
+                    children: null,
+                },
+            ],
+        });
+    });
+    it("wires declared data", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(Restate, { data: {
+                        name: { bind: "person.name" },
+                    }, children: _jsx("div", { controller: {
+                            onInit() {
+                                this.store.init("name", "Sasa");
+                                this.store.init("nickname", "Sale");
+                            },
+                        } }) }) }) }));
+        let changed = false;
+        let store = new Store();
+        store.subscribe(() => {
+            //console.log(store.getData());
+            changed = true;
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.equal(store.get("person.name"), "Sasa");
+        assert(store.get("person.nickname") === undefined);
+        assert(changed);
+    });
+    it("causes a global update if internal data changes", () => {
+        let controller;
+        class TestController extends Controller {
+            onInit() {
+                controller = this;
+            }
+            setNickname(nname) {
+                this.store.set("nickname", nname);
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(Restate, { data: {
+                        name: { bind: "person.name" },
+                    }, children: _jsx("div", { controller: TestController, text: bind("nickname") }) }) }) }));
+        let changed = false;
+        let store = new Store();
+        store.subscribe(() => {
+            changed = true;
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "div",
+                    props: {},
+                    children: null,
+                },
+            ],
+        });
+        controller.setNickname("Sale");
+        let tree2 = component.toJSON();
+        assert.deepEqual(tree2, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "div",
+                    props: {},
+                    children: ["Sale"],
+                },
+            ],
+        });
+    });
+    it("doesn't notify parent if not necessary in detached mode", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.init("nickname", "Sale");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(Restate, { detached: true, data: {
+                        name: { bind: "person.name" },
+                    }, children: _jsx("div", { controller: TestController }) }) }) }));
+        let changed = false;
+        let store = new Store();
+        store.subscribe(() => {
+            changed = true;
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(!changed);
+    });
+    it("shared state can be used across components inside and outside Restate", () => {
+        let widget = (_jsx("cx", { children: _jsxs("div", { children: [_jsx("div", { text: bind("person.gender", "Male") }), _jsxs(Restate, { detached: true, data: {
+                            person: { bind: "person" },
+                        }, children: [_jsx("div", { text: bind("person.firstName", "John") }), _jsx("div", { text: bind("person.lastName", "Doe") })] }), _jsx("div", { text: bind("person.address", "Unknown") })] }) }));
+        let changed = false;
+        let store = new Store();
+        store.subscribe(() => {
+            changed = true;
+            //console.log(store.getData());
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(store.getData(), {
+            person: {
+                firstName: "John",
+                lastName: "Doe",
+                address: "Unknown",
+                gender: "Male",
+            },
+        });
+    });
+    it("updates if shared state is changed from outside", () => {
+        [true, false].forEach((detached) => {
+            let widget = (_jsx("cx", { children: _jsxs("div", { children: [_jsx(Restate, { detached: detached, data: {
+                                person: { bind: "person" },
+                            }, children: _jsx("div", { text: bind("person.firstName") }) }), _jsx("div", { text: bind("person.firstName", "John") })] }) }));
+            let store = new Store();
+            const component = createTestRenderer(store, widget);
+            let tree = component.toJSON();
+            assert.deepEqual(tree, {
+                type: "div",
+                props: {},
+                children: [
+                    {
+                        type: "div",
+                        props: {},
+                        children: ["John"],
+                    },
+                    {
+                        type: "div",
+                        props: {},
+                        children: ["John"],
+                    },
+                ],
+            });
+            store.set("person.firstName", "Jack");
+            tree = component.toJSON();
+            assert.deepEqual(tree, {
+                type: "div",
+                props: {},
+                children: [
+                    {
+                        type: "div",
+                        props: {},
+                        children: ["Jack"],
+                    },
+                    {
+                        type: "div",
+                        props: {},
+                        children: ["Jack"],
+                    },
+                ],
+            });
+        });
+    });
+    it("allows field initialization in data declaration", () => {
+        [true, false].forEach((detached) => {
+            let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(Restate, { detached: detached, data: {
+                            name: bind("name", "Cx"),
+                        }, children: _jsx("div", { text: bind("name") }) }) }) }));
+            let store = new Store();
+            const component = createTestRenderer(store, widget);
+            let tree = component.toJSON();
+            assert.deepEqual(tree, {
+                type: "div",
+                props: {},
+                children: [
+                    {
+                        type: "div",
+                        props: {},
+                        children: ["Cx"],
+                    },
+                ],
+            });
+        });
+    });
+    it("updates if internal data changes", () => {
+        class TestController extends Controller {
+            onInit() {
+                this.store.init("nickname", "Sale");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(Restate, { children: _jsx(Restate, { children: _jsx("div", { controller: TestController, text: bind("nickname") }) }) }) }) }));
+        let changed = false;
+        let store = new Store();
+        store.subscribe(() => {
+            changed = true;
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "div",
+                    props: {},
+                    children: ["Sale"],
+                },
+            ],
+        });
+    });
+    it("works with FirstVisibleChildLayout", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsxs(FirstVisibleChildLayout, { children: [_jsx(Restate, { children: _jsx("div", { children: "First" }) }), _jsx("div", { children: "Second" })] }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [{ type: "div", props: {}, children: ["First"] }],
+        });
+    });
+    it("is transparent to FirstVisibleChildLayout", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsxs(FirstVisibleChildLayout, { children: [_jsx(Restate, { children: _jsx("div", { visible: false, children: "First" }) }), _jsx("div", { children: "Second" })] }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [{ type: "div", props: {}, children: ["Second"] }],
+        });
+    });
+});

package/build/ui/Text.d.ts

@@ -1,9 +1,21 @@
-import { Widget } from './Widget';
-export declare class Text extends Widget {
+import { Widget, WidgetConfig } from './Widget';
+import { StringProp } from './Prop';
+export interface TextConfig extends WidgetConfig {
+    /** The value to be rendered as text. */
+    value?: StringProp;
+    /** Template string for the text value. */
+    tpl?: string;
+    /** Expression for the text value. */
+    expr?: string;
+    /** Binding path for the text value. */
+    bind?: string;
+}
+export declare class Text extends Widget<TextConfig> {
     value?: any;
     tpl?: string;
     expr?: any;
     bind?: string;
+    constructor(config?: TextConfig);
     init(): void;
     declareData(...args: any[]): void;
     render(context: any, { data }: any, key: string): any;

package/build/ui/Text.js

@@ -1,5 +1,8 @@
 import { Widget } from './Widget';
 export class Text extends Widget {
+    constructor(config) {
+        super(config);
+    }
     init() {
         if (!this.value && (this.tpl || this.expr || this.bind))
             this.value = {

package/build/ui/adapter/ArrayAdapter.js

@@ -84,7 +84,10 @@ export class ArrayAdapter extends DataAdapter {
             }
             else {
                 recordStore.setStore(parentStore);
-                recordStore.setData(data);
+                recordStore.setData({
+                    [this.recordName]: data,
+                    [this.indexName]: index,
+                });
             }
         }
         if (key != null) {

package/build/ui/adapter/ArrayAdapter.spec.d.ts

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

package/build/ui/adapter/ArrayAdapter.spec.js

@@ -0,0 +1,44 @@
+import { RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import assert from "assert";
+import { Store } from "../../data";
+import { ArrayAdapter } from "./ArrayAdapter";
+describe("ArrayAdapter", () => {
+    it("maps data into records", () => {
+        let adapter = new ArrayAdapter();
+        let data = [
+            {
+                id: 1,
+                text: "1",
+            },
+            {
+                id: 2,
+                text: "2",
+            },
+        ];
+        let store = new Store();
+        let records = adapter.mapRecords(new RenderingContext(), new Instance(null, "1", null, store), data, store);
+        assert.equal(records.length, 2);
+        assert.equal(records[0].data, records[0].store.get("$record"));
+        assert.equal(records[1].data, records[1].store.get("$record"));
+    });
+    it("can sort data", () => {
+        let adapter = new ArrayAdapter();
+        adapter.sort([{ field: "id", direction: "DESC" }]);
+        let data = [
+            {
+                id: 1,
+                text: "1",
+            },
+            {
+                id: 2,
+                text: "2",
+            },
+        ];
+        let store = new Store();
+        let records = adapter.mapRecords(new RenderingContext(), new Instance(null, "1", null, store), data, store);
+        assert.equal(records.length, 2);
+        assert.equal(data[1], records[0].store.get("$record"));
+        assert.equal(data[0], records[1].store.get("$record"));
+    });
+});

package/build/ui/adapter/TreeAdapter.spec.d.ts

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

package/build/ui/adapter/TreeAdapter.spec.js

@@ -0,0 +1,71 @@
+import { RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import { TreeAdapter } from "./TreeAdapter";
+import assert from "assert";
+import { Store } from "../../data";
+describe("TreeAdapter", () => {
+    it("properly expands records", () => {
+        let tree = new TreeAdapter({
+            childrenField: "children",
+            expandedField: "expanded",
+        });
+        let data = [
+            {
+                id: 1,
+                text: "1",
+                expanded: false,
+                children: [
+                    {
+                        id: 4,
+                        text: "4",
+                    },
+                ],
+            },
+            {
+                id: 2,
+                text: "2",
+                expanded: true,
+                children: [
+                    {
+                        id: 3,
+                        text: "3",
+                        expanded: true,
+                        children: [
+                            {
+                                id: 5,
+                                text: "5",
+                                expanded: true,
+                                children: [
+                                    {
+                                        id: 6,
+                                        text: "6",
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 7,
+                text: "7",
+                expanded: false,
+            },
+        ];
+        let store = new Store();
+        let records = tree.mapRecords(new RenderingContext(), new Instance(null, "1", null, store), data, store);
+        assert.equal(records.length, 6);
+        assert.equal(records[0].data.id, 1);
+        assert.equal(records[1].data.id, 2);
+        assert.equal(records[2].data.id, 3);
+        assert.equal(records[3].data.id, 5);
+        assert.equal(records[4].data.id, 6);
+        assert.equal(records[5].data.id, 7);
+        assert.equal(records[5].store.get("$record.id"), 7);
+        assert.equal(records[2].store.get("$record.id"), 3);
+        assert.equal(records[3].store.get("$record.id"), 5);
+        assert.equal(records[2].store.get("$record.id"), 3);
+        assert.equal(records[0].store.get("$record.id"), 1);
+        assert.equal(records[1].store.get("$record.id"), 2);
+    });
+});

package/build/ui/app/Url.spec.d.ts

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

package/build/ui/app/Url.spec.js

@@ -0,0 +1,43 @@
+import { Url } from "./Url";
+import Route from "route-parser";
+import assert from "assert";
+describe("Url", function () {
+    describe(".unresolve", function () {
+        it("preserves query parameters", function () {
+            Url.absoluteBase = "https://cxjs.io/docs/";
+            assert.equal("~/?state=1", Url.unresolve("https://cxjs.io/docs/?state=1"));
+        });
+        it("doesn't touch unresolved urls", function () {
+            assert.equal("~/test", Url.unresolve("~/test"));
+        });
+    });
+    describe(".getBaseFromScriptSrc", () => {
+        it("ignores query strings", function () {
+            assert.equal(Url.getBaseFromScriptSrc("/vendor.js?qs=1", "~/vendor.js"), "/");
+        });
+        it("allows wildcards", function () {
+            assert.equal(Url.getBaseFromScriptSrc("/vendor.123.js?qs=1", "~/vendor.*.js"), "/");
+        });
+        it("works for an application folder", function () {
+            assert.equal(Url.getBaseFromScriptSrc("/datasync/vendor.124c82.js", "~/vendor.*.js"), "/datasync/");
+        });
+    });
+});
+describe("Route", function () {
+    it("matches query param", function () {
+        let route = new Route("~/?state=:state");
+        let result = route.match("~/?state=1");
+        assert(result !== false);
+        assert.equal(result.state, "1");
+    });
+    it("matches routes with extra query params", function () {
+        let route = new Route("~/?state=:state");
+        let result = route.match("~/?state=1&more=2");
+        assert(result);
+    });
+    it.skip("matches query params in any order", function () {
+        let route = new Route("~/?a=:a&b=:b");
+        let result = route.match("~/?b=1&a=2");
+        assert(result);
+    });
+});

package/build/ui/app/startHotAppLoop.js

@@ -13,7 +13,7 @@ export function startHotAppLoop(appModule, element, store, widgets, options = {}
                 stop();
         });
         //apply data on hot replace
-        if (appModule.hot.data)
+        if (appModule.hot.data?.state)
             store.load(appModule.hot.data.state);
     }
     Widget.resetCounter();

package/build/ui/createFunctionalComponent.d.ts

@@ -1,2 +1,15 @@
-export declare function createFunctionalComponent(factory: any): any;
+import { ChildNode } from "./Container";
+import { PureContainerConfig } from "./PureContainer";
+export interface FunctionalComponentConfig extends PureContainerConfig {
+    /** Factory function that creates children based on props. */
+    childrenFactory?: (props: any) => ChildNode | ChildNode[];
+    /** Props passed to the children factory. */
+    props?: any;
+}
+/** Brand type to mark CxJS functional components */
+export interface CxFunctionalComponent<Props = any> {
+    (props: Props & PureContainerConfig): any;
+    __cxFunctionalComponent: true;
+}
+export declare function createFunctionalComponent<Props = any>(factory: (props: Props) => ChildNode | ChildNode[]): CxFunctionalComponent<Props>;
 export declare function getCurrentInstance(): any;

package/build/ui/createFunctionalComponent.js

@@ -1,10 +1,13 @@
-import { createComponentFactory, isComponentFactory } from "../util/Component";
 import { flattenProps } from "../ui/flattenProps";
-import { PureContainer } from "./PureContainer";
-import { UseParentLayout } from "./layout/UseParentLayout";
+import { createComponentFactory, isComponentFactory } from "../util/Component";
 import { isDefined } from "../util/isDefined";
+import { PureContainerBase } from "./PureContainer";
+import { UseParentLayout } from "./layout/UseParentLayout";
 let currentInstance = null;
-class FunctionalComponent extends PureContainer {
+class FunctionalComponent extends PureContainerBase {
+    constructor(config) {
+        super(config);
+    }
     initInstance(context, instance) {
         instance.store = instance.parentStore;
         this.clear();

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

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