cx 26.0.1 → 26.0.2

package/build/ui/Instance.js

@@ -0,0 +1,613 @@
+import { Controller } from "./Controller";
+import { debug, renderFlag, processDataFlag, destroyFlag } 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 { isNonEmptyArray } from "../util/isNonEmptyArray";
+import { isUndefined } from "../util/isUndefined";
+import { isAccessorChain } from "../data/createAccessorModelProxy";
+let instanceId = 1000;
+/**
+ * Base Instance class
+ */
+export class Instance {
+    // Selectors
+    dataSelector;
+    // Lifecycle flags
+    initialized;
+    destroySubscriptions;
+    helpers;
+    components;
+    constructor(widget, key, parent, parentStore) {
+        this.widget = widget;
+        this.key = key;
+        this.id = String(++instanceId);
+        this.cached = {};
+        this.parent = parent;
+        this.parentStore = parentStore ?? parent?.store;
+        if (this.parentStore == null)
+            throw new Error("Cannot create instance without a parent store.");
+    }
+    setParentStore(parentStore) {
+        this.parentStore = parentStore;
+        this.widget.applyParentStore(this);
+    }
+    init(context) {
+        // widget is initialized when the first instance is initialized
+        if (!this.widget.initialized) {
+            this.widget.init();
+            this.widget.initialized = true;
+        }
+        if (!this.dataSelector) {
+            this.widget.selector.init(this.parentStore);
+            this.dataSelector = this.widget.selector.createStoreSelector();
+        }
+        // init instance might change the store, so this must go before the controller initialization
+        this.widget.initInstance(context, this);
+        // initInstance can set the store, otherwise use parent store
+        if (!this.store)
+            this.store = this.parentStore;
+        if (this.widget.onInit)
+            this.widget.onInit(context, this);
+        this.widget.initState(context, this);
+        if (this.widget.controller)
+            this.controller = Controller.create(this.widget.controller, {
+                widget: this.widget,
+                instance: this,
+                store: this.store,
+            });
+        if (this.widget.exploreCleanup ||
+            this.widget.outerLayout ||
+            this.widget.isContent ||
+            this.widget.controller ||
+            this.widget.prepareCleanup)
+            this.needsExploreCleanup = true;
+        if (this.widget.prepare || this.widget.controller)
+            this.needsPrepare = true;
+        if (this.widget.cleanup || this.widget.controller)
+            this.needsCleanup = true;
+        this.initialized = true;
+    }
+    checkVisible(context) {
+        if (!this.initialized)
+            this.init(context);
+        const wasVisible = this.visible;
+        this.rawData = this.dataSelector(this.store);
+        this.visible = this.widget.checkVisible(context, this, this.rawData);
+        if (this.visible && !this.detached)
+            this.parent.instanceCache.addChild(this);
+        this.explored = false;
+        this.prepared = false;
+        if (!this.visible && wasVisible)
+            this.destroy();
+        return this.visible;
+    }
+    scheduleExploreIfVisible(context) {
+        if (this.checkVisible(context)) {
+            context.exploreStack.push(this);
+            if (this.needsExploreCleanup)
+                context.exploreStack.push(this);
+            return true;
+        }
+        return false;
+    }
+    cache(key, value) {
+        const oldValue = this.cached[key];
+        if (oldValue === value)
+            return false;
+        if (!this.cacheList)
+            this.cacheList = {};
+        this.cacheList[key] = value;
+        return true;
+    }
+    markShouldUpdate(context) {
+        let ins = this;
+        let renderList = this.renderList;
+        renderList.markReverseIndex();
+        //notify all parents that child state changed to bust up caching
+        while (ins && !ins.shouldUpdate && ins.explored) {
+            if (ins.renderList !== renderList) {
+                renderList.reverse();
+                renderList = ins.renderList;
+                renderList.markReverseIndex();
+            }
+            ins.shouldUpdate = true;
+            renderList.data.push(ins);
+            ins = ins.widget.isContent
+                ? ins.contentPlaceholder
+                : ins.parent?.outerLayout === ins
+                    ? ins.parent?.parent
+                    : ins.parent;
+        }
+        renderList.reverse();
+    }
+    explore(context) {
+        if (!this.visible)
+            throw new Error("Explore invisible!");
+        if (this.explored) {
+            if (this.widget.prepareCleanup)
+                context.prepareList.push(this);
+            if (this.widget.exploreCleanup)
+                this.widget.exploreCleanup(context, this);
+            if (this.parent?.outerLayout === this)
+                context.popNamedValue("content", "body");
+            if (this.widget.controller)
+                context.pop("controller");
+            return;
+        }
+        this.explored = true;
+        if (this.needsPrepare)
+            context.prepareList.push(this);
+        else
+            this.prepared = true;
+        if (this.needsCleanup)
+            context.cleanupList.push(this);
+        if (this.instanceCache)
+            this.instanceCache.mark();
+        //controller may reconfigure the widget and need to go before shouldUpdate calculation
+        this.parentOptions = context.parentOptions;
+        if (!this.controller) {
+            if (context.controller)
+                this.controller = context.controller;
+            else if (this.parent?.controller)
+                this.controller = this.parent?.controller;
+        }
+        this.destroyTracked = false;
+        if (this.controller) {
+            if (this.widget.controller) {
+                if (!this.controller.initialized) {
+                    this.controller.init(context);
+                    this.controller.initialized = true;
+                }
+                context.push("controller", this.controller);
+                this.controller.explore(context);
+                if (this.controller.onDestroy && this.controller.widget == this.widget)
+                    this.trackDestroy();
+            }
+        }
+        if (this.widget.onDestroy || isNonEmptyArray(this.destroySubscriptions))
+            this.trackDestroy();
+        this.renderList = this.assignedRenderList || this.parent?.renderList || context.getRootRenderList();
+        let shouldUpdate = this.rawData !== this.cached.rawData ||
+            this.state !== this.cached.state ||
+            this.widget.version !== this.cached.widgetVersion ||
+            this.cached.globalCacheIdentifier !== GlobalCacheIdentifier.get();
+        if (shouldUpdate) {
+            this.data = { ...this.rawData };
+            this.widget.prepareData(context, this);
+            debug(processDataFlag, this.widget);
+        }
+        //onExplore might set the outer layout
+        if (this.widget.onExplore)
+            this.widget.onExplore(context, this);
+        if (this.parent?.outerLayout === this) {
+            this.renderList = this.renderList.insertRight();
+            context.pushNamedValue("content", "body", this.parent);
+        }
+        if (this.widget.outerLayout) {
+            this.outerLayout = this.getChild(context, this.widget.outerLayout, null, this.store);
+            this.outerLayout.scheduleExploreIfVisible(context);
+            this.renderList = this.renderList.insertLeft();
+        }
+        if (this.widget.isContent) {
+            this.contentPlaceholder = context.contentPlaceholder && context.contentPlaceholder[this.widget.putInto];
+            if (this.contentPlaceholder)
+                context.contentPlaceholder[this.widget.putInto](this);
+            else {
+                this.renderList = this.renderList.insertLeft();
+                context.pushNamedValue("content", this.widget.putInto, this);
+                if (!context.contentList)
+                    context.contentList = {};
+                let list = context.contentList[this.widget.putInto];
+                if (!list)
+                    list = context.contentList[this.widget.putInto] = [];
+                list.push(this);
+            }
+        }
+        this.shouldUpdate = false;
+        if (shouldUpdate || this.childStateDirty || !this.widget.memoize)
+            this.markShouldUpdate(context);
+        context.exploreStack.hop();
+        if (this.widget.helpers) {
+            this.helpers = {};
+            for (let cmp in this.widget.helpers) {
+                let helper = this.widget.helpers[cmp];
+                if (helper) {
+                    let ins = this.getChild(context, helper);
+                    if (ins.scheduleExploreIfVisible(context))
+                        this.helpers[cmp] = ins;
+                }
+            }
+        }
+        //TODO: check do we need to pass data here?
+        this.widget.explore(context, this, this.data);
+    }
+    prepare(context) {
+        if (!this.visible)
+            throw new Error("Prepare invisible!");
+        if (this.prepared) {
+            if (this.widget.prepareCleanup)
+                this.widget.prepareCleanup(context, this);
+            return;
+        }
+        this.prepared = true;
+        if (this.widget.prepare)
+            this.widget.prepare(context, this);
+        if (this.widget.controller && this.controller?.prepare)
+            this.controller.prepare(context);
+    }
+    render(context) {
+        if (!this.visible)
+            throw new Error("Render invisible!");
+        if (this.shouldUpdate) {
+            debug(renderFlag, this.widget, this.key);
+            const vdom = renderResultFix(this.widget.render(context, this, this.key));
+            if (this.widget.isContent || this.outerLayout)
+                this.contentVDOM = vdom;
+            else
+                this.vdom = vdom;
+        }
+        if (this.cacheList) {
+            for (const key in this.cacheList) {
+                this.cached[key] = this.cacheList[key];
+            }
+        }
+        this.cacheList = null;
+        this.cached.rawData = this.rawData;
+        this.cached.data = this.data;
+        this.cached.state = this.state;
+        this.cached.widgetVersion = this.widget.version;
+        this.cached.globalCacheIdentifier = GlobalCacheIdentifier.get();
+        this.childStateDirty = false;
+        if (this.instanceCache)
+            this.instanceCache.sweep();
+        if (this.parent?.outerLayout === this) {
+            //if outer layouts are chained we need to find the originating element (last element with OL set)
+            let parent = this.parent;
+            while (parent.parent?.outerLayout == parent)
+                parent = parent.parent;
+            parent.vdom = this.vdom;
+        }
+        return this.vdom;
+    }
+    cleanup(context) {
+        if (this.widget.controller && this.controller?.cleanup)
+            this.controller.cleanup(context);
+        if (this.widget.cleanup)
+            this.widget.cleanup(context, this);
+    }
+    trackDestroy() {
+        if (!this.destroyTracked) {
+            this.destroyTracked = true;
+            if (this.parent && !this.detached)
+                this.parent.trackDestroyableChild(this);
+        }
+    }
+    trackDestroyableChild(child) {
+        this.instanceCache.trackDestroy(child);
+        this.trackDestroy();
+    }
+    subscribeOnDestroy(callback) {
+        if (!this.destroySubscriptions)
+            this.destroySubscriptions = [];
+        this.destroySubscriptions.push(callback);
+        this.trackDestroy();
+        return () => {
+            if (this.destroySubscriptions) {
+                this.destroySubscriptions = this.destroySubscriptions.filter((cb) => cb !== callback);
+            }
+        };
+    }
+    destroy() {
+        if (this.instanceCache) {
+            this.instanceCache.destroy();
+            this.instanceCache = null;
+        }
+        if (this.destroySubscriptions) {
+            this.destroySubscriptions.forEach((cb) => cb());
+            this.destroySubscriptions = null;
+        }
+        if (this.destroyTracked) {
+            debug(destroyFlag, this);
+            if (this.widget.onDestroy)
+                this.widget.onDestroy(this);
+            if (this.widget.controller &&
+                this.controller &&
+                this.controller.onDestroy &&
+                this.controller.widget == this.widget)
+                this.controller.onDestroy();
+            this.destroyTracked = false;
+        }
+    }
+    setState(state) {
+        let skip = !!this.state;
+        if (this.state) {
+            for (const k in state) {
+                if (this.state[k] !== state[k]) {
+                    skip = false;
+                    break;
+                }
+            }
+        }
+        if (skip)
+            return;
+        this.state = Object.assign({}, this.state, state);
+        let parent = this.parent;
+        //notify all parents that child state change to bust up caching
+        while (parent) {
+            parent.childStateDirty = true;
+            parent = parent.parent;
+        }
+        batchUpdates(() => {
+            this.store.notify();
+        });
+    }
+    set(prop, value, options = {}) {
+        //skip re-rendering (used for reading state from uncontrolled components)
+        if (options.internal && this.rawData) {
+            this.rawData[prop] = value;
+            this.data[prop] = value;
+        }
+        const setter = this.setters && this.setters[prop];
+        if (setter) {
+            if (options.immediate && isFunction(setter.reset))
+                setter.reset(value);
+            else
+                setter(value);
+            return true;
+        }
+        const p = this.widget[prop];
+        if (p && typeof p == "object") {
+            if (p.debounce) {
+                this.definePropertySetter(prop, validatedDebounce((value) => this.doSet(prop, value), () => this.dataSelector(this.store)[prop], p.debounce));
+                this.set(prop, value, options);
+                return true;
+            }
+            if (p.throttle) {
+                this.definePropertySetter(prop, throttle((value) => this.doSet(prop, value), p.throttle));
+                this.set(prop, value, options);
+                return true;
+            }
+        }
+        return this.doSet(prop, value);
+    }
+    definePropertySetter(prop, setter) {
+        if (!this.setters)
+            this.setters = {};
+        this.setters[prop] = setter;
+    }
+    doSet(prop, value) {
+        let changed = false;
+        batchUpdates(() => {
+            const p = this.widget[prop];
+            if (isObject(p)) {
+                const pObj = p;
+                if (pObj.set) {
+                    if (isFunction(pObj.set)) {
+                        pObj.set(value, this);
+                        changed = true;
+                    }
+                    else if (isString(pObj.set)) {
+                        this.controller?.[pObj.set](value, this);
+                        changed = true;
+                    }
+                }
+                else if (pObj.action) {
+                    const action = pObj.action(value, this);
+                    this.store.dispatch(action);
+                    changed = true;
+                }
+                else if (isString(pObj.bind) || isAccessorChain(pObj.bind)) {
+                    changed = this.store.set(pObj.bind, value);
+                }
+            }
+            else if (isAccessorChain(p)) {
+                changed = this.store.set(p.toString(), value);
+            }
+        });
+        return changed;
+    }
+    nestedDataSet(key, value, dataConfig, useParentStore) {
+        let config = dataConfig[key];
+        if (!config)
+            throw new Error(`Unknown nested data key ${key}. Known keys are ${Object.keys(dataConfig).join(", ")}.`);
+        if (isAccessorChain(config))
+            config = { bind: config.toString() };
+        if (config.bind) {
+            let store = this.store;
+            //in case of Rescope or DataProxy, bindings point to the data in the parent store
+            if (useParentStore && store.store)
+                store = store.store;
+            return isUndefined(value) ? store.deleteItem(config.bind) : store.setItem(config.bind, value);
+        }
+        if (!config.set)
+            throw new Error(`Cannot change nested data value for ${key} as it's read-only. Either define it as a binding or define a set function.`);
+        if (isString(config.set))
+            this.getControllerMethod(config.set)(value, this);
+        else if (isFunction(config.set))
+            config.set(value, this);
+        else
+            throw new Error(`Cannot change nested data value for ${key} the defined setter is neither a function nor a controller method.`);
+        return true;
+    }
+    replaceState(state) {
+        this.cached.state = this.state;
+        this.state = state;
+        this.store.notify();
+    }
+    getInstanceCache() {
+        if (!this.instanceCache)
+            this.instanceCache = new InstanceCache(this, this.widget.isPureContainer ? this.key : null);
+        return this.instanceCache;
+    }
+    clearChildrenCache() {
+        if (this.instanceCache)
+            this.instanceCache.destroy();
+    }
+    getChild(context, widget, key, store) {
+        return this.getInstanceCache().getChild(widget, store ?? this.store, key);
+    }
+    getDetachedChild(widget, key, store) {
+        const child = new Instance(widget, key, this, store ?? this.store);
+        child.detached = true;
+        return child;
+    }
+    prepareRenderCleanupChild(widget, store, keyPrefix, options) {
+        return widget.prepareRenderCleanup(store ?? this.store, options, keyPrefix, this);
+    }
+    getJsxEventProps() {
+        const { widget } = this;
+        if (!isArray(widget.jsxAttributes))
+            return null;
+        const props = {};
+        widget.jsxAttributes.forEach((attr) => {
+            if (attr.indexOf("on") == 0 && attr.length > 2) {
+                props[attr] = (e) => this.invoke(attr, e, this);
+            }
+        });
+        return props;
+    }
+    getCallback(methodName) {
+        const scope = this.widget;
+        const callback = scope[methodName];
+        if (typeof callback === "string")
+            return this.getControllerMethod(callback);
+        if (typeof callback !== "function")
+            throw new Error(`Cannot invoke callback method ${methodName} as assigned value is not a function.`);
+        return callback.bind(scope);
+    }
+    /**
+     * Finds the first controller in the instance tree matching the predicate
+     * @param predicate Function to test each controller
+     * @returns The matching controller or undefined
+     */
+    findController(predicate) {
+        let at = this;
+        while (at?.controller != null) {
+            if (predicate(at.controller)) {
+                return at.controller;
+            }
+            at = at.parent;
+        }
+        return undefined;
+    }
+    /**
+     * Finds a controller of the specified type in the instance tree
+     * @param type Controller class/constructor to find
+     * @returns The matching controller cast to the specified type, or undefined
+     */
+    findControllerByType(type) {
+        return this.findController((c) => c instanceof type);
+    }
+    /**
+     * Gets the first controller in the instance tree matching the predicate
+     * @param predicate Function to test each controller
+     * @returns The matching controller
+     * @throws Error if no matching controller is found
+     */
+    getController(predicate) {
+        const controller = this.findController(predicate);
+        if (!controller)
+            throw new Error("Cannot find a controller matching the given predicate in the instance tree.");
+        return controller;
+    }
+    /**
+     * Gets a controller of the specified type in the instance tree
+     * @param type Controller class/constructor to find
+     * @returns The matching controller cast to the specified type
+     * @throws Error if no controller of the specified type is found
+     */
+    getControllerByType(type) {
+        const controller = this.findControllerByType(type);
+        if (!controller)
+            throw new Error(`Cannot find a controller of type "${type.name}" in the instance tree.`);
+        return controller;
+    }
+    getControllerMethod(methodName) {
+        if (!this.controller)
+            throw new Error(`Cannot invoke controller method "${methodName}" as controller is not assigned to the widget.`);
+        const controller = this.findController((c) => !!c[methodName]);
+        if (!controller)
+            throw new Error(`Cannot invoke controller method "${methodName}". The method cannot be found in any of the assigned controllers.`);
+        return controller[methodName].bind(controller);
+    }
+    invoke(methodName, ...args) {
+        return this.getCallback(methodName).apply(null, args);
+    }
+    invokeControllerMethod(methodName, ...args) {
+        return this.getControllerMethod(methodName).apply(null, args);
+    }
+}
+function renderResultFix(res) {
+    return res != null && isDefined(res.content) ? res : { content: res };
+}
+export class InstanceCache {
+    constructor(parent, keyPrefix) {
+        this.children = {};
+        this.parent = parent;
+        this.marked = {};
+        this.monitored = null;
+        this.keyPrefix = keyPrefix != null ? keyPrefix + "-" : "";
+    }
+    getChild(widget, parentStore, key) {
+        const k = this.keyPrefix + (key != null ? key : widget.vdomKey || widget.widgetId);
+        let instance = this.children[k];
+        if (!instance ||
+            instance.widget !== widget ||
+            (!instance.visible && (instance.widget.controller || instance.widget.onInit))) {
+            instance = new Instance(widget, k, this.parent, parentStore);
+            this.children[k] = instance;
+        }
+        else if (instance.parentStore !== parentStore) {
+            instance.setParentStore(parentStore);
+        }
+        return instance;
+    }
+    addChild(instance) {
+        this.marked[instance.key] = instance;
+    }
+    mark() {
+        this.marked = {};
+    }
+    trackDestroy(instance) {
+        if (!this.monitored)
+            this.monitored = {};
+        this.monitored[instance.key] = instance;
+    }
+    destroy() {
+        this.children = {};
+        this.marked = {};
+        if (!this.monitored)
+            return;
+        for (const key in this.monitored) {
+            this.monitored[key].destroy();
+        }
+        this.monitored = null;
+    }
+    sweep() {
+        this.children = this.marked;
+        if (!this.monitored)
+            return;
+        let activeCount = 0;
+        for (const key in this.monitored) {
+            const monitoredChild = this.monitored[key];
+            const child = this.children[key];
+            if (child !== monitoredChild || !monitoredChild.visible) {
+                monitoredChild.destroy();
+                delete this.monitored[key];
+                if (child === monitoredChild)
+                    delete this.children[key];
+            }
+            else
+                activeCount++;
+        }
+        if (activeCount === 0)
+            this.monitored = null;
+    }
+}

package/build/ui/IsolatedScope.d.ts

@@ -0,0 +1,19 @@
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Instance } from "./Instance";
+import { StructuredProp } from "./Prop";
+export interface IsolatedScopeConfig extends PureContainerConfig {
+    /**
+     * A single binding path or a list of paths to be monitored for changes.
+     * Use `bind` as a shorthand for defining the `data` object.
+     */
+    bind?: string | string[];
+    /** Data object selector. The children will update only if `data` change. */
+    data?: StructuredProp;
+}
+export declare class IsolatedScope<Config extends IsolatedScopeConfig = IsolatedScopeConfig, InstanceType extends Instance = Instance> extends PureContainerBase<Config, InstanceType> {
+    bind?: string | string[];
+    data?: StructuredProp;
+    declareData(...args: any[]): void;
+    init(): void;
+    explore(context: any, instance: any): void;
+}

package/build/ui/IsolatedScope.js

@@ -0,0 +1,31 @@
+import { PureContainerBase } from "./PureContainer";
+import { isArray } from "../util/isArray";
+export class IsolatedScope extends PureContainerBase {
+    declareData(...args) {
+        return super.declareData(...args, {
+            data: { structured: true },
+        });
+    }
+    init() {
+        if (typeof this.bind === "string")
+            this.data = { bind: this.bind };
+        else if (isArray(this.bind)) {
+            let data = {};
+            this.bind.forEach((x, i) => {
+                data[String(i)] = { bind: x };
+            });
+            this.data = data;
+        }
+        super.init();
+    }
+    explore(context, instance) {
+        if (instance.shouldUpdate) {
+            super.explore(context, instance);
+        }
+        else if (instance.children) {
+            // mark children to prevent sweeping them away
+            for (let i = 0; i < instance.children.length; i++)
+                instance.instanceCache.addChild(instance.children[i]);
+        }
+    }
+}

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

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