cx 26.0.1 → 26.0.2

package/build/ui/Controller.js

@@ -0,0 +1,110 @@
+import { computable } from "../data/computable";
+import { Component } from "../util/Component";
+import { isArray } from "../util/isArray";
+import { isFunction } from "../util/isFunction";
+import { StoreProxy } from "../data/StoreProxy";
+const computablePrefix = "computable-";
+const triggerPrefix = "trigger-";
+export class Controller extends Component {
+    initialized;
+    computables;
+    constructor(config) {
+        super(config);
+    }
+    init(context) {
+        if (!this.initialized) {
+            this.initialized = true;
+            if (this.onInit && context)
+                this.onInit(context);
+        }
+    }
+    explore(context) {
+        let { store } = this.instance;
+        this.store = store; //in rare cases instance may change its store
+        if (!this.initialized) {
+            this.init(context);
+            //forgive if the developer forgets to call super.init()
+            this.initialized = true;
+        }
+        if (this.computables) {
+            for (let key in this.computables) {
+                let x = this.computables[key];
+                let v = x.selector(store.getData());
+                if (x.type == "computable")
+                    store.set(x.name, v);
+            }
+        }
+        if (this.onExplore) {
+            this.onExplore(context);
+        }
+    }
+    prepare(context) {
+        if (this.onPrepare) {
+            this.onPrepare(context);
+        }
+    }
+    cleanup(context) {
+        if (this.onCleanup) {
+            this.onCleanup(context);
+        }
+    }
+    addComputable(name, args, callback) {
+        if (!isArray(args))
+            throw new Error("Second argument to the addComputable method should be an array.");
+        let selector = computable(...args, callback).memoize();
+        if (!this.computables)
+            this.computables = {};
+        this.computables[computablePrefix + name] = { name, selector, type: "computable" };
+    }
+    addTrigger(name, args, callback, autoRun) {
+        if (!isArray(args))
+            throw new Error("Second argument to the addTrigger method should be an array.");
+        let selector = computable(...args, callback).memoize(!autoRun && this.store.getData());
+        if (!this.computables)
+            this.computables = {};
+        this.computables[triggerPrefix + name] = { name, selector, type: "trigger" };
+    }
+    removeTrigger(name) {
+        if (this.computables)
+            delete this.computables[triggerPrefix + name];
+    }
+    removeComputable(name) {
+        if (this.computables)
+            delete this.computables[computablePrefix + name];
+    }
+    invokeParentMethod(methodName, ...args) {
+        let parent = this.instance.parent;
+        if (!parent)
+            throw new Error("Cannot invoke a parent controller method as the instance does not have a parent.");
+        return parent.invokeControllerMethod(methodName, ...args);
+    }
+    invokeMethod(methodName, ...args) {
+        return this.instance.invokeControllerMethod(methodName, ...args);
+    }
+}
+Controller.namespace = "ui.controller.";
+Controller.factory = function (alias, config, more) {
+    if (isFunction(alias)) {
+        let cfg = {
+            ...config,
+            ...more,
+        };
+        if (cfg.instance) {
+            //in rare cases instance.store may change, so we cannot rely on the store passed through configuration
+            cfg.store = new StoreProxy(() => cfg.instance.store);
+            Object.assign(cfg, cfg.store.getMethods());
+        }
+        let result = alias(cfg);
+        if (result instanceof Controller)
+            return result;
+        return Controller.create({
+            ...config,
+            ...more,
+            ...result,
+        });
+    }
+    return Controller.create({
+        ...config,
+        ...more,
+    });
+};

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

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

package/build/ui/Controller.spec.js

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

package/build/ui/Culture.d.ts

@@ -0,0 +1,39 @@
+import { NumberCulture, DateTimeCulture } from "intl-io";
+export interface CultureInfo {
+    culture?: string;
+    numberCulture?: string | null;
+    dateTimeCulture?: string | null;
+    defaultCurrency?: string;
+    dateEncoding?: (date: Date) => string;
+    timezone?: string | null;
+}
+export interface ResolvedCultureInfo {
+    culture: string;
+    numberCulture?: string | null;
+    dateTimeCulture?: string | null;
+    cache: any;
+    defaultCurrency: string;
+    dateEncoding: (date: Date) => string;
+    timezone?: string | null;
+}
+export declare function getDefaultCulture(): ResolvedCultureInfo;
+export declare function getCurrentCulture(): ResolvedCultureInfo;
+export declare function getCurrentCultureCache(): any;
+export declare function pushCulture(cultureInfo: ResolvedCultureInfo): void;
+export declare function createCulture(cultureSpecs: Partial<CultureInfo>): ResolvedCultureInfo;
+export declare function popCulture(cultureSpecs?: CultureInfo): CultureInfo | undefined;
+export declare class Culture {
+    static setCulture(cultureCode: string): void;
+    static setNumberCulture(cultureCode: string): void;
+    static setDateTimeCulture(cultureCode: string): void;
+    static setDefaultCurrency(currencyCode: string): void;
+    static setDefaultTimezone(timezone: string): void;
+    static setDefaultDateEncoding(encoding: (date: Date) => string): void;
+    static invalidateCache(): void;
+    static get defaultCurrency(): string | undefined;
+    static get culture(): string | undefined;
+    static getNumberCulture(): NumberCulture;
+    static getDateTimeCulture(): DateTimeCulture;
+    static getDefaultDateEncoding(): (date: Date) => string;
+    static getComparer(options?: Intl.CollatorOptions): (a: any, b: any) => number;
+}

package/build/ui/Culture.js

@@ -0,0 +1,124 @@
+// @ts-expect-error
+import { NumberCulture, DateTimeCulture } from "intl-io";
+import { Localization } from "./Localization";
+import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
+import { invalidateExpressionCache } from "../data/Expression";
+import { invalidateStringTemplateCache } from "../data/StringTemplate";
+import { defaultCompare } from "../data/defaultCompare";
+import { Console } from "../util/Console";
+let stack = [
+    {
+        culture: "en",
+        numberCulture: null,
+        dateTimeCulture: null,
+        cache: {},
+        defaultCurrency: "USD",
+        dateEncoding: (date) => date.toISOString(),
+        timezone: null,
+    },
+];
+export function getDefaultCulture() {
+    return stack[0];
+}
+export function getCurrentCulture() {
+    return stack[stack.length - 1];
+}
+export function getCurrentCultureCache() {
+    return getCurrentCulture().cache;
+}
+export function pushCulture(cultureInfo) {
+    stack.push(cultureInfo);
+}
+export function createCulture(cultureSpecs) {
+    let current = getCurrentCulture();
+    let info = {
+        culture: current.culture,
+        dateEncoding: current.dateEncoding,
+        defaultCurrency: current.defaultCurrency,
+        cache: {},
+    };
+    for (let key in cultureSpecs) {
+        if (!cultureSpecs[key])
+            continue;
+        info[key] = cultureSpecs[key];
+    }
+    return info;
+}
+export function popCulture(cultureSpecs) {
+    if (stack.length == 1)
+        throw new Error("Cannot pop the last culture object.");
+    if (cultureSpecs && stack[stack.length - 1] !== cultureSpecs) {
+        Console.warn("Popped culture object does not match the current one.");
+    }
+    return stack.pop();
+}
+export class Culture {
+    static setCulture(cultureCode) {
+        let cultureSpecs = getDefaultCulture();
+        cultureSpecs.culture = cultureCode;
+        cultureSpecs.cache = {};
+        Localization.setCulture(cultureCode);
+        this.invalidateCache();
+    }
+    static setNumberCulture(cultureCode) {
+        let cultureSpecs = getDefaultCulture();
+        cultureSpecs.numberCulture = cultureCode;
+        delete cultureSpecs.cache.numberCulture;
+        this.invalidateCache();
+    }
+    static setDateTimeCulture(cultureCode) {
+        let cultureSpecs = getDefaultCulture();
+        cultureSpecs.dateTimeCulture = cultureCode;
+        delete cultureSpecs.cache.dateTimeCulture;
+        this.invalidateCache();
+    }
+    static setDefaultCurrency(currencyCode) {
+        let cultureSpecs = getDefaultCulture();
+        cultureSpecs.defaultCurrency = currencyCode;
+        this.invalidateCache();
+    }
+    static setDefaultTimezone(timezone) {
+        let cultureSpecs = getDefaultCulture();
+        cultureSpecs.timezone = timezone;
+        this.invalidateCache();
+    }
+    static setDefaultDateEncoding(encoding) {
+        let cultureSpecs = getDefaultCulture();
+        cultureSpecs.dateEncoding = encoding;
+        this.invalidateCache();
+    }
+    static invalidateCache() {
+        GlobalCacheIdentifier.change();
+        invalidateExpressionCache();
+        invalidateStringTemplateCache();
+    }
+    static get defaultCurrency() {
+        return getCurrentCulture().defaultCurrency;
+    }
+    static get culture() {
+        return getCurrentCulture().culture;
+    }
+    static getNumberCulture() {
+        let { cache, numberCulture, culture } = getCurrentCulture();
+        if (!cache.numberCulture)
+            cache.numberCulture = new NumberCulture(numberCulture ?? culture);
+        return cache.numberCulture;
+    }
+    static getDateTimeCulture() {
+        let { cache, dateTimeCulture, culture, timezone } = getCurrentCulture();
+        if (!cache.dateTimeCulture)
+            cache.dateTimeCulture = new DateTimeCulture(dateTimeCulture ?? culture, {
+                defaultTimezone: timezone,
+            });
+        return cache.dateTimeCulture;
+    }
+    static getDefaultDateEncoding() {
+        return getCurrentCulture().dateEncoding;
+    }
+    static getComparer(options) {
+        let { culture } = getCurrentCulture();
+        if (typeof Intl.Collator != "undefined")
+            return new Intl.Collator(culture, options).compare;
+        return defaultCompare;
+    }
+}

package/build/ui/Cx.d.ts

@@ -0,0 +1,57 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from "./Widget";
+import { Instance } from "./Instance";
+import { ResolvedCultureInfo } from "./Culture";
+import { View } from "../data/View";
+import { Config } from "./Prop";
+export interface CxProps {
+    widget?: Config;
+    items?: Config;
+    store?: View;
+    instance?: Instance;
+    parentInstance?: Instance;
+    subscribe?: boolean;
+    immediate?: boolean;
+    deferredUntilIdle?: boolean;
+    idleTimeout?: number;
+    options?: any;
+    onError?: (error: Error, instance: Instance, info: any) => void;
+    params?: any;
+    contentFactory?: (props: {
+        children: any;
+    }) => any;
+    cultureInfo?: ResolvedCultureInfo;
+}
+export interface CxState {
+    deferToken: number;
+    data?: any;
+}
+export declare class Cx extends VDOM.Component<CxProps, CxState> {
+    widget: Widget;
+    store: View;
+    parentInstance?: Instance;
+    instance?: Instance;
+    flags: {
+        preparing?: boolean;
+        dirty?: boolean;
+        rendering?: boolean;
+    };
+    renderCount: number;
+    unsubscribe?: () => void;
+    componentDidCatch?: (error: Error, info: any) => void;
+    forceUpdateCallback: () => void;
+    deferCounter: number;
+    pendingUpdateTimer?: NodeJS.Timeout;
+    unsubscribeIdleRequest?: () => void;
+    constructor(props: CxProps);
+    UNSAFE_componentWillReceiveProps(props: CxProps): void;
+    getInstance(): Instance;
+    render(): import("react/jsx-runtime").JSX.Element | null;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    update(): void;
+    waitForIdle(): void;
+    componentWillUnmount(): void;
+    shouldComponentUpdate(props: CxProps, state: CxState): boolean;
+    componentDidCatchHandler(error: Error, info: any): void;
+}