cx 25.11.1 → 26.0.2

package/build/ui/Cx.js

@@ -0,0 +1,277 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget, VDOM, getContent } from "./Widget";
+import { Instance } from "./Instance";
+import { RenderingContext } from "./RenderingContext";
+import { debug, appDataFlag } from "../util/Debug";
+import { Timing, now, appLoopFlag, vdomRenderFlag } from "../util/Timing";
+import { isBatchingUpdates, notifyBatchedUpdateStarting, notifyBatchedUpdateCompleted } from "./batchUpdates";
+import { shallowEquals } from "../util/shallowEquals";
+import { PureContainer } from "./PureContainer";
+import { onIdleCallback } from "../util/onIdleCallback";
+import { getCurrentCulture, pushCulture, popCulture } from "./Culture";
+export class Cx extends VDOM.Component {
+    widget;
+    store;
+    parentInstance;
+    instance;
+    flags;
+    renderCount;
+    unsubscribe;
+    componentDidCatch;
+    forceUpdateCallback;
+    deferCounter;
+    pendingUpdateTimer;
+    unsubscribeIdleRequest;
+    constructor(props) {
+        super(props);
+        if (props.instance) {
+            this.widget = props.instance.widget;
+            this.store = props.instance.store;
+        }
+        else {
+            this.widget = PureContainer.create({ items: props.widget || props.items });
+            if (props.parentInstance) {
+                this.parentInstance = props.parentInstance;
+                this.store = props.store || this.parentInstance.store;
+            }
+            else {
+                this.parentInstance = new Instance(this.widget, "0", undefined, props.store);
+                this.store = props.store;
+            }
+            if (!this.store)
+                throw new Error("Cx component requires a store.");
+        }
+        this.state = {
+            deferToken: 0,
+        };
+        if (props.subscribe) {
+            this.unsubscribe = this.store.subscribe(this.update.bind(this));
+            this.state.data = this.store.getData();
+        }
+        this.flags = {};
+        this.renderCount = 0;
+        if (props.onError)
+            this.componentDidCatch = this.componentDidCatchHandler.bind(this);
+        this.forceUpdateCallback = this.forceUpdate.bind(this);
+        this.deferCounter = 0;
+        this.waitForIdle();
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        let newStore = props.instance
+            ? props.instance.store
+            : props.store
+                ? props.store
+                : props.parentInstance.store;
+        if (newStore != this.store) {
+            this.store = newStore;
+            if (this.unsubscribe)
+                this.unsubscribe();
+            if (props.subscribe)
+                this.unsubscribe = this.store.subscribe(this.update.bind(this));
+        }
+        if (props.subscribe) {
+            let data = this.store.getData();
+            if (data !== this.state.data) {
+                this.waitForIdle();
+                this.setState({ data });
+            }
+        }
+    }
+    getInstance() {
+        if (this.props.instance)
+            return this.props.instance;
+        if (this.instance && this.instance.widget === this.widget) {
+            if (this.instance.parentStore != this.store)
+                this.instance.setParentStore(this.store);
+            return this.instance;
+        }
+        if (this.widget && this.parentInstance)
+            return (this.instance = this.parentInstance.getDetachedChild(this.widget, 0, this.store));
+        throw new Error("Could not resolve a widget instance in the Cx component.");
+    }
+    render() {
+        if (this.props.deferredUntilIdle && this.state.deferToken < this.deferCounter)
+            return null;
+        let cultureInfo = this.props.cultureInfo ?? getCurrentCulture();
+        return (_jsx(CxContext, { instance: this.getInstance(), flags: this.flags, options: this.props.options, buster: ++this.renderCount, contentFactory: this.props.contentFactory, forceUpdate: this.forceUpdateCallback, cultureInfo: cultureInfo }));
+    }
+    componentDidMount() {
+        this.componentDidUpdate();
+        if (this.props.options && this.props.options.onPipeUpdate)
+            this.props.options.onPipeUpdate(this.update.bind(this));
+    }
+    componentDidUpdate() {
+        if (this.flags.dirty) {
+            this.update();
+        }
+    }
+    update() {
+        let data = this.store.getData();
+        debug(appDataFlag, data);
+        if (this.flags.preparing)
+            this.flags.dirty = true;
+        else if (isBatchingUpdates() || this.props.immediate) {
+            notifyBatchedUpdateStarting();
+            this.setState({ data: data }, notifyBatchedUpdateCompleted);
+        }
+        else {
+            //in standard mode sequential store commands are batched
+            if (!this.pendingUpdateTimer) {
+                notifyBatchedUpdateStarting();
+                this.pendingUpdateTimer = setTimeout(() => {
+                    delete this.pendingUpdateTimer;
+                    this.setState({ data: data }, notifyBatchedUpdateCompleted);
+                }, 0);
+            }
+        }
+    }
+    waitForIdle() {
+        if (!this.props.deferredUntilIdle)
+            return;
+        if (this.unsubscribeIdleRequest)
+            this.unsubscribeIdleRequest();
+        let token = ++this.deferCounter;
+        this.unsubscribeIdleRequest = onIdleCallback(() => {
+            this.setState({ deferToken: token });
+        }, {
+            timeout: this.props.idleTimeout || 30000,
+        });
+    }
+    componentWillUnmount() {
+        if (this.pendingUpdateTimer)
+            clearTimeout(this.pendingUpdateTimer);
+        if (this.unsubscribeIdleRequest)
+            this.unsubscribeIdleRequest();
+        if (this.unsubscribe)
+            this.unsubscribe();
+        if (this.props.options && this.props.options.onPipeUpdate)
+            this.props.options.onPipeUpdate(null);
+    }
+    shouldComponentUpdate(props, state) {
+        if (props.deferredUntilIdle && state.deferToken != this.deferCounter)
+            return false;
+        return (state !== this.state ||
+            !props.params ||
+            !shallowEquals(props.params, this.props.params) ||
+            props.instance !== this.props.instance ||
+            props.widget !== this.props.widget ||
+            props.store !== this.props.store ||
+            props.parentInstance !== this.props.parentInstance ||
+            props.cultureInfo !== this.props.cultureInfo);
+    }
+    componentDidCatchHandler(error, info) {
+        this.flags.preparing = false;
+        this.props.onError(error, this.getInstance(), info);
+    }
+}
+class CxContext extends VDOM.Component {
+    renderCount;
+    timings;
+    content;
+    renderingContext;
+    constructor(props) {
+        super(props);
+        this.renderCount = 0;
+        this.UNSAFE_componentWillReceiveProps(props);
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        this.timings = {
+            start: now(),
+        };
+        let { instance, options, contentFactory } = props;
+        let count = 0, visible, context, forceContinue;
+        //should not be tracked by parents for destroy
+        if (!instance.detached)
+            throw new Error("The instance passed to a Cx component should be detached from its parent.");
+        if (this.props.instance !== instance && this.props.instance.destroyTracked)
+            this.props.instance.destroy();
+        this.props.flags.preparing = true;
+        if (this.props.cultureInfo)
+            pushCulture(this.props.cultureInfo);
+        try {
+            do {
+                count++;
+                forceContinue = false;
+                context = new RenderingContext(options);
+                context.forceUpdate = this.props.forceUpdate;
+                this.props.flags.dirty = false;
+                instance.assignedRenderList = context.getRootRenderList();
+                visible = instance.scheduleExploreIfVisible(context);
+                if (visible) {
+                    while (!context.exploreStack.empty()) {
+                        let inst = context.exploreStack.pop();
+                        //console.log("EXPLORE", inst.widget.constructor.name, inst.widget.tag, inst.widget.widgetId);
+                        inst.explore(context);
+                    }
+                }
+                else if (instance.destroyTracked) {
+                    instance.destroy();
+                }
+                if (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8) {
+                    forceContinue = true;
+                    continue;
+                }
+                if (visible) {
+                    this.timings.afterExplore = now();
+                    for (let i = 0; i < context.prepareList.length; i++)
+                        context.prepareList[i].prepare(context);
+                    this.timings.afterPrepare = now();
+                }
+            } while (forceContinue ||
+                (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8));
+            if (visible) {
+                //walk in reverse order so children get rendered first
+                let renderList = context.getRootRenderList();
+                while (renderList) {
+                    for (let i = renderList.data.length - 1; i >= 0; i--) {
+                        renderList.data[i].render(context);
+                    }
+                    renderList = renderList.right;
+                }
+                this.content = getContent(instance.vdom);
+                if (contentFactory)
+                    this.content = contentFactory({ children: this.content });
+                this.timings.afterRender = now();
+                for (let i = 0; i < context.cleanupList.length; i++)
+                    context.cleanupList[i].cleanup(context);
+            }
+            else {
+                this.content = null;
+                this.timings.afterExplore = this.timings.afterPrepare = this.timings.afterRender = now();
+            }
+        }
+        finally {
+            if (this.props.cultureInfo)
+                popCulture(this.props.cultureInfo);
+        }
+        this.timings.beforeVDOMRender = now();
+        this.props.flags.preparing = false;
+        this.props.flags.rendering = true;
+        this.renderingContext = context;
+    }
+    render() {
+        return this.content;
+    }
+    componentDidMount() {
+        this.componentDidUpdate();
+    }
+    componentDidUpdate() {
+        this.props.flags.rendering = false;
+        this.timings.afterVDOMRender = now();
+        //let {instance} = this.props;
+        //instance.cleanup(this.renderingContext);
+        this.timings.afterCleanup = now();
+        this.renderCount++;
+        if (process.env.NODE_ENV !== "production") {
+            let { start, beforeVDOMRender, afterVDOMRender, afterPrepare, afterExplore, afterRender, afterCleanup } = this.timings;
+            Timing.log(vdomRenderFlag, this.renderCount, "cx", (beforeVDOMRender - start + afterCleanup - afterVDOMRender).toFixed(2) + "ms", "vdom", (afterVDOMRender - beforeVDOMRender).toFixed(2) + "ms");
+            Timing.log(appLoopFlag, this.renderCount, this.renderingContext.options.name || "main", "total", (afterCleanup - start).toFixed(1) + "ms", "explore", (afterExplore - start).toFixed(1) + "ms", "prepare", (afterPrepare - afterExplore).toFixed(1), "render", (afterRender - afterPrepare).toFixed(1), "vdom", (afterVDOMRender - beforeVDOMRender).toFixed(1), "cleanup", (afterCleanup - afterVDOMRender).toFixed(1));
+        }
+    }
+    componentWillUnmount() {
+        let { instance } = this.props;
+        if (instance.destroyTracked)
+            instance.destroy();
+    }
+}

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

@@ -0,0 +1,24 @@
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { StructuredProp, Bind } from "./Prop";
+export interface DataProxyConfig extends PureContainerConfig {
+    /** Data object with computed values to be exposed in the local store. */
+    data?: StructuredProp;
+    /** Binding to a value to be exposed under the `alias` name. */
+    value?: Bind;
+    /** Alias name under which `value` is exposed in the local store. */
+    alias?: string;
+    /** Indicate that parent store data should not be mutated. */
+    immutable?: boolean;
+    /** Indicate that local store data should not be mutated. */
+    sealed?: boolean;
+}
+export declare class DataProxy extends PureContainerBase<DataProxyConfig> {
+    data?: any;
+    alias?: string;
+    value?: any;
+    immutable: boolean;
+    sealed: boolean;
+    init(): void;
+    initInstance(context: any, instance: any): void;
+    applyParentStore(instance: any): void;
+}

package/build/ui/DataProxy.js

@@ -0,0 +1,26 @@
+import { NestedDataView } from "../data/NestedDataView";
+import { PureContainerBase } from "./PureContainer";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+export class DataProxy extends PureContainerBase {
+    init() {
+        if (!this.data)
+            this.data = {};
+        if (this.alias)
+            this.data[this.alias] = this.value;
+        super.init();
+    }
+    initInstance(context, instance) {
+        instance.store = new NestedDataView({
+            store: instance.parentStore,
+            nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
+            immutable: this.immutable,
+            sealed: this.sealed,
+        });
+        super.initInstance(context, instance);
+    }
+    applyParentStore(instance) {
+        instance.store.setStore(instance.parentStore);
+    }
+}
+DataProxy.prototype.immutable = false;
+DataProxy.prototype.sealed = false;

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

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