cx 26.0.1 → 26.0.3

package/build/ui/Rescope.spec.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import { Rescope } from "./Rescope";
+import { bind } from "./bind";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { Controller } from "./Controller";
+import assert from "assert";
+import { PureContainer } from "./PureContainer";
+describe("Rescope", () => {
+    it("allows simple access to nested data", () => {
+        let store = new Store({
+            data: {
+                $page: {
+                    data: {
+                        name: "John",
+                    },
+                },
+            },
+        });
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page.data", children: _jsx("div", { text: bind("name") }) }) }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["John"],
+        });
+    });
+    it("allows parent access through $root", () => {
+        let store = new Store({
+            data: {
+                layout: {
+                    title: "Title",
+                },
+                $page: {
+                    data: {
+                        name: "John",
+                    },
+                },
+            },
+        });
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page.data", children: _jsx("div", { text: bind("$root.layout.title") }) }) }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["Title"],
+        });
+    });
+    it("allows nested data access through data", () => {
+        let store = new Store({
+            data: {
+                layout: {
+                    title: "Title",
+                },
+            },
+        });
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page", data: { $title: { bind: "layout.title" } }, children: _jsx("div", { text: bind("$title") }) }) }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["Title"],
+        });
+    });
+    it("nested data mutations are correctly propagated to the parent store", () => {
+        let store = new Store({
+            data: {
+                item: {
+                    value: 0,
+                },
+            },
+        });
+        let widget = (_jsxs("cx", { children: [_jsx(Rescope, { bind: "$page", data: { $value: { bind: "item.value" } }, children: _jsx(PureContainer, { controller: {
+                            onInit() {
+                                this.store.set("$value", 2);
+                            },
+                        } }) }), _jsx("div", { text: bind("item.value") })] }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["2"],
+        });
+    });
+    it("visible is calculated based on the inner scope", () => {
+        let store = new Store({
+            data: {
+                layout: {
+                    title: "Title",
+                },
+                $page: {
+                    data: {
+                        visible: true,
+                        name: "John",
+                    },
+                },
+            },
+        });
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page.data", visible: bind("visible"), children: _jsx("div", { text: bind("name") }) }) }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["John"],
+        });
+    });
+    it("controllers see inner scope", () => {
+        let store = new Store({
+            data: {
+                $page: {
+                    data: {
+                        visible: true,
+                        name: "John",
+                    },
+                },
+            },
+        });
+        let testName = null;
+        class TestController extends Controller {
+            onInit() {
+                testName = this.store.get("name");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page.data", controller: TestController, children: _jsx("div", { text: bind("name") }) }) }));
+        const component = createTestRenderer(store, widget);
+        component.toJSON();
+        assert.equal(testName, "John");
+    });
+});

package/build/ui/ResizeManager.d.ts

@@ -0,0 +1,5 @@
+export declare class ResizeManager {
+    static subscribe(callback: () => void): () => void;
+    static notify(): void;
+    static trackElement(el: any, callback: (entries: ResizeObserverEntry[]) => void): () => void;
+}

package/build/ui/ResizeManager.js

@@ -0,0 +1,24 @@
+import { SubscriberList } from '../util/SubscriberList';
+import { batchUpdates } from './batchUpdates';
+let subscribers = new SubscriberList();
+export class ResizeManager {
+    static subscribe(callback) {
+        return subscribers.subscribe(callback);
+    }
+    static notify() {
+        batchUpdates(() => {
+            subscribers.notify();
+        });
+    }
+    static trackElement(el, callback) {
+        if (typeof ResizeObserver !== 'function')
+            return this.subscribe(() => callback([]));
+        let obs = new ResizeObserver(callback);
+        obs.observe(el);
+        return () => {
+            obs.disconnect();
+        };
+    }
+}
+if (typeof window != 'undefined')
+    window.addEventListener('resize', () => ResizeManager.notify());

package/build/ui/Restate.d.ts

@@ -0,0 +1,44 @@
+/** @jsxImportSource react */
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { CultureInfo } from "./Culture";
+import { BooleanProp, NumberProp, StringProp, StructuredProp } from "./Prop";
+import { Instance } from "./Instance";
+export interface RestateConfig extends PureContainerConfig {
+    /** Data object to be exposed in the local store. */
+    data?: StructuredProp;
+    /** Set to `true` to render the content in a separate, detached rendering context. */
+    detached?: boolean;
+    /** Set to `true` to defer updates until the browser is idle. */
+    deferredUntilIdle?: BooleanProp;
+    /** Timeout in milliseconds for idle updates. */
+    idleTimeout?: NumberProp;
+    /** Key used to cache and persist the local store data. */
+    cacheKey?: StringProp;
+    /** Set to `true` to disable batching of updates. */
+    immediate?: boolean;
+    /** Error handler callback. */
+    onError?: (error: Error, instance: Instance) => void;
+    /** Culture info to be used for formatting. */
+    culture?: CultureInfo;
+}
+export interface RestateProps extends RestateConfig {
+}
+export declare class Restate<Config extends RestateConfig = RestateConfig> extends PureContainerBase<Config> {
+    container: any;
+    privateDataSelector: any;
+    detached: boolean;
+    data?: any;
+    culture?: any;
+    options?: any;
+    onError?: (error: Error, instance: Instance) => void;
+    waitForIdle: boolean;
+    immediate: boolean;
+    declareData(...args: any[]): void;
+    init(): void;
+    initSubStore(context: any, instance: any): void;
+    applyParentStore(instance: any): void;
+    explore(context: any, instance: any): void;
+    exploreItems(context: any, instance: any, items: any): void;
+    render(context: any, instance: any, key: string): any;
+}
+export declare const PrivateStore: typeof Restate;

package/build/ui/Restate.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { PureContainer, PureContainerBase } from "./PureContainer";
+import { Store } from "../data/Store";
+import { Cx } from "./Cx";
+import { isObject } from "../util/isObject";
+import { isUndefined } from "../util/isUndefined";
+import { Binding } from "../data/Binding";
+import { StructuredSelector } from "../data/StructuredSelector";
+import { getCurrentCulture } from "./Culture";
+let persistenceCache = {};
+export class Restate extends PureContainerBase {
+    declareData(...args) {
+        return super.declareData(...args, {
+            deferredUntilIdle: undefined,
+            idleTimeout: undefined,
+            cacheKey: undefined,
+        });
+    }
+    init() {
+        this.container = PureContainer.create({
+            items: this.children || this.items,
+            layout: this.layout,
+            controller: this.controller,
+            outerLayout: this.outerLayout,
+            useParentLayout: !this.detached,
+            ws: this.ws,
+        });
+        this.privateDataSelector = new StructuredSelector({
+            props: this.data || {},
+            values: this.data,
+        });
+        this.items = [];
+        delete this.children;
+        delete this.controller;
+        delete this.outerLayout;
+        delete this.layout;
+        if (this.useParentLayout == null)
+            this.useParentLayout = !this.detached;
+        super.init();
+    }
+    initSubStore(context, instance) {
+        let { cacheKey } = instance.data;
+        this.privateDataSelector.init(instance.store);
+        instance.subStore = new RestateStore({
+            store: instance.store,
+            detached: this.detached,
+            privateData: this.data || {},
+            data: cacheKey ? persistenceCache[cacheKey] || {} : {},
+            dataSelector: this.privateDataSelector.create(),
+            onSet: (path, value) => instance.nestedDataSet(path, value, this.data),
+        });
+        if (cacheKey) {
+            instance.subscribeOnDestroy(() => {
+                persistenceCache[cacheKey] = instance.subStore.getData();
+            });
+        }
+    }
+    applyParentStore(instance) {
+        if (instance.subStore)
+            instance.subStore.setStore(instance.parentStore);
+    }
+    explore(context, instance) {
+        if (!instance.subStore)
+            this.initSubStore(context, instance);
+        if (instance.subStore.parentDataCheck())
+            instance.markShouldUpdate();
+        instance.cultureInfo = this.culture ?? getCurrentCulture();
+        if (instance.cache("cultureInfo", instance.culture))
+            instance.markShouldUpdate();
+        super.explore(context, instance);
+    }
+    exploreItems(context, instance, items) {
+        if (!this.detached) {
+            instance.container = instance.getChild(context, this.container, "container", instance.subStore);
+            instance.container.scheduleExploreIfVisible(context);
+            instance.children = [instance.container];
+        }
+    }
+    render(context, instance, key) {
+        if (!this.detached)
+            return instance.container.render(context);
+        return (_jsx(Cx, { widget: this.container, parentInstance: instance, store: instance.subStore, subscribe: true, options: this.options, onError: this.onError, deferredUntilIdle: instance.data.deferredUntilIdle, idleTimeout: instance.data.idleTimeout, immediate: this.immediate, cultureInfo: instance.cultureInfo }, key));
+    }
+}
+Restate.prototype.detached = false;
+Restate.prototype.waitForIdle = false;
+Restate.prototype.immediate = false;
+Restate.prototype.culture = null;
+export const PrivateStore = Restate;
+class RestateStore extends Store {
+    constructor(config) {
+        super(config);
+        this.parentDataVersion = -1;
+    }
+    getData() {
+        this.silently(() => {
+            this.parentDataCheck();
+        });
+        return super.getData();
+    }
+    parentDataCheck() {
+        if (this.parentDataVersion == this.store.meta.version)
+            return false;
+        this.parentDataVersion = this.store.meta.version;
+        this.parentData = this.dataSelector(this.store.getData());
+        return this.batch(() => {
+            for (let key in this.parentData) {
+                super.setItem(key, this.parentData[key]);
+            }
+        });
+    }
+    setItem(path, value) {
+        let binding = Binding.get(path);
+        let bindingRoot = binding.parts[0];
+        if (!isObject(this.privateData) || !this.privateData.hasOwnProperty(bindingRoot)) {
+            let changed = isUndefined(value) ? super.deleteItem(path) : super.setItem(path, value);
+            return changed;
+        }
+        let newValue = value;
+        if (binding.parts.length > 1)
+            newValue = binding.set(this.getData(), value)[bindingRoot];
+        this.onSet(bindingRoot, newValue);
+        this.batch(() => {
+            super.setItem(bindingRoot, newValue);
+            this.parentDataCheck();
+        });
+        return true;
+    }
+    deleteItem(path) {
+        return this.setItem(path, undefined);
+    }
+    doNotify() {
+        if (!this.detached)
+            this.store.notify(undefined);
+        super.doNotify(undefined);
+    }
+    // override the default implementation to avoid meta overwrites
+    setStore(store) {
+        this.store = store;
+    }
+}

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

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

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/StaticText.d.ts

@@ -0,0 +1,5 @@
+import { Widget } from './Widget';
+export declare class StaticText extends Widget {
+    text?: string;
+    render(): string | undefined;
+}

package/build/ui/StaticText.js

@@ -0,0 +1,7 @@
+import { Widget } from './Widget';
+export class StaticText extends Widget {
+    render() {
+        return this.text;
+    }
+}
+Widget.alias('static-text', StaticText);

package/build/ui/StructuredInstanceDataAccessor.d.ts

@@ -0,0 +1,13 @@
+import { StructuredDataAccessor } from "../data/NestedDataView";
+export declare class StructuredInstanceDataAccessor implements StructuredDataAccessor {
+    instance: any;
+    dataConfig: any;
+    useParentStore: any;
+    dataSelector: any;
+    constructor(config: any);
+    getSelector(): any;
+    get(): any;
+    setItem(key: string, value: any): boolean;
+    containsKey(key: string): any;
+    getKeys(): string[];
+}

package/build/ui/StructuredInstanceDataAccessor.js

@@ -0,0 +1,30 @@
+import { getSelector } from "../data/getSelector";
+export class StructuredInstanceDataAccessor {
+    instance;
+    dataConfig;
+    useParentStore;
+    dataSelector;
+    constructor(config) {
+        this.instance = config.instance;
+        this.dataConfig = config.data;
+        this.useParentStore = config.useParentStore;
+        this.dataSelector = getSelector(config.data);
+        if (this.dataSelector.memoize)
+            this.dataSelector = this.dataSelector.memoize();
+    }
+    getSelector() {
+        return this.dataSelector;
+    }
+    get() {
+        return this.dataSelector.get(this.instance.store.getData());
+    }
+    setItem(key, value) {
+        return this.instance.nestedDataSet(key, value, this.dataConfig, this.useParentStore);
+    }
+    containsKey(key) {
+        return this.dataConfig.hasOwnProperty(key);
+    }
+    getKeys() {
+        return Object.keys(this.dataConfig);
+    }
+}

package/build/ui/Text.d.ts

@@ -0,0 +1,10 @@
+import { Widget } from './Widget';
+export declare class Text extends Widget {
+    value?: any;
+    tpl?: string;
+    expr?: any;
+    bind?: string;
+    init(): void;
+    declareData(...args: any[]): void;
+    render(context: any, { data }: any, key: string): any;
+}