cx 26.0.1 → 26.0.3

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

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

package/build/ui/app/index.d.ts

@@ -0,0 +1,4 @@
+export * from './startAppLoop';
+export * from './History';
+export * from './Url';
+export * from "./startHotAppLoop";

package/build/ui/app/index.js

@@ -0,0 +1,4 @@
+export * from './startAppLoop';
+export * from './History';
+export * from './Url';
+export * from "./startHotAppLoop";

package/build/ui/app/startAppLoop.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource react */
+import { Widget, WidgetConfig } from "../Widget";
+import { Store } from "../../data/Store";
+import { Instance } from "../Instance";
+export interface StartAppLoopOptions {
+    destroyDelay?: number;
+    removeParentDOMElement?: boolean;
+    [key: string]: any;
+}
+export declare function startAppLoop(parentDOMElement: HTMLElement, storeOrInstance?: Store | Instance, widget?: Widget | WidgetConfig, options?: StartAppLoopOptions): () => void;

package/build/ui/app/startAppLoop.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { VDOM } from "../Widget";
+import { Store } from "../../data/Store";
+import { Cx } from "../Cx";
+export function startAppLoop(parentDOMElement, storeOrInstance, widget, options = {}) {
+    if (!parentDOMElement || parentDOMElement.nodeType !== 1)
+        throw new Error("First argument to startAppLoop should be a valid DOM element.");
+    let store;
+    let instance;
+    let parentInstance;
+    if (!storeOrInstance)
+        storeOrInstance = new Store();
+    if (storeOrInstance.notify)
+        store = storeOrInstance;
+    else if (storeOrInstance.getChild) {
+        if (storeOrInstance.widget === widget)
+            instance = storeOrInstance;
+        else
+            parentInstance = storeOrInstance;
+    }
+    else
+        throw new Error("Second argument to startAppLoop should be either of type Store or Instance");
+    let content = (_jsx(Cx, { store: store, widget: widget, instance: instance, parentInstance: parentInstance, options: options, subscribe: true }));
+    let root = null;
+    if (VDOM.DOM.createRoot) {
+        root = VDOM.DOM.createRoot(parentDOMElement);
+        root.render(content);
+    }
+    else
+        VDOM.DOM.render(content, parentDOMElement);
+    let stopped = false;
+    return function () {
+        if (stopped)
+            return;
+        stopped = true;
+        if (!options.destroyDelay)
+            destroy(parentDOMElement, options, root);
+        else {
+            setTimeout(() => {
+                destroy(parentDOMElement, options, root);
+            }, options.destroyDelay);
+        }
+    };
+}
+function destroy(parentDOMElement, options, root) {
+    if (root)
+        root.unmount();
+    else
+        VDOM.DOM.unmountComponentAtNode(parentDOMElement);
+    if (options.removeParentDOMElement && parentDOMElement.parentNode)
+        parentDOMElement.parentNode.removeChild(parentDOMElement);
+}

package/build/ui/app/startHotAppLoop.d.ts

@@ -0,0 +1,11 @@
+import { StartAppLoopOptions } from "./startAppLoop";
+import { Widget, WidgetConfig } from "../Widget";
+import { Store } from "../../data/Store";
+export interface HotModule {
+    hot?: {
+        accept: () => void;
+        dispose: (callback: (data: any) => void) => void;
+        data?: any;
+    };
+}
+export declare function startHotAppLoop(appModule: HotModule, element: HTMLElement, store: Store, widgets: Widget | WidgetConfig, options?: StartAppLoopOptions): () => void;

package/build/ui/app/startHotAppLoop.js

@@ -0,0 +1,22 @@
+import { startAppLoop } from "./startAppLoop";
+import { Widget } from "../Widget";
+export function startHotAppLoop(appModule, element, store, widgets, options = {}) {
+    let stop;
+    //webpack (HMR)
+    if (appModule.hot) {
+        // accept itself
+        appModule.hot.accept();
+        // remember data on dispose
+        appModule.hot.dispose(function (data) {
+            data.state = store.getData();
+            if (stop)
+                stop();
+        });
+        //apply data on hot replace
+        if (appModule.hot.data)
+            store.load(appModule.hot.data.state);
+    }
+    Widget.resetCounter();
+    //app loop
+    return (stop = startAppLoop(element, store, widgets, options));
+}

package/build/ui/batchUpdates.d.ts

@@ -0,0 +1,5 @@
+export declare function batchUpdates(callback: () => void): void;
+export declare function isBatchingUpdates(): boolean;
+export declare function notifyBatchedUpdateStarting(): void;
+export declare function notifyBatchedUpdateCompleted(): void;
+export declare function batchUpdatesAndNotify(callback: () => void, notifyCallback: (success: boolean) => void, timeout?: number): void;

package/build/ui/batchUpdates.js

@@ -0,0 +1,60 @@
+import { VDOM } from './Widget';
+import { SubscriberList } from '../util/SubscriberList';
+let isBatching = 0;
+let promiseSubscribers = new SubscriberList();
+export function batchUpdates(callback) {
+    if (VDOM.DOM.unstable_batchedUpdates)
+        VDOM.DOM.unstable_batchedUpdates(() => {
+            isBatching++;
+            try {
+                callback();
+            }
+            finally {
+                isBatching--;
+            }
+        });
+    else
+        callback();
+}
+export function isBatchingUpdates() {
+    return isBatching > 0;
+}
+export function notifyBatchedUpdateStarting() {
+    promiseSubscribers.execute((x) => {
+        x.pending++;
+    });
+}
+export function notifyBatchedUpdateCompleted() {
+    promiseSubscribers.execute((x) => {
+        let cb = x;
+        cb.finished++;
+        if (cb.finished >= cb.pending)
+            cb.complete(true);
+    });
+}
+let updateId = 0;
+export function batchUpdatesAndNotify(callback, notifyCallback, timeout = 1000) {
+    let done = false;
+    let timer;
+    let unsubscribe;
+    const update = {
+        pending: 0,
+        finished: 0,
+        complete: (success) => {
+            if (!done) {
+                done = true;
+                if (timer)
+                    clearInterval(timer);
+                if (unsubscribe)
+                    unsubscribe();
+                notifyCallback(!!success);
+            }
+        }
+    };
+    unsubscribe = promiseSubscribers.subscribe(update);
+    batchUpdates(callback);
+    if (update.pending <= update.finished)
+        update.complete(true);
+    else
+        timer = setTimeout(update.complete, timeout);
+}

package/build/ui/bind.d.ts

@@ -0,0 +1,3 @@
+import { Bind } from "./Prop";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+export declare function bind(path: string | AccessorChain<unknown>, defaultValue?: unknown): Bind;

package/build/ui/bind.js

@@ -0,0 +1,7 @@
+export function bind(path, defaultValue) {
+    return {
+        //toString will ensure chain accessors are converted to strings
+        bind: path.toString(),
+        defaultValue,
+    };
+}

package/build/ui/createFunctionalComponent.d.ts

@@ -0,0 +1,2 @@
+export declare function createFunctionalComponent(factory: any): any;
+export declare function getCurrentInstance(): any;

package/build/ui/createFunctionalComponent.js

@@ -0,0 +1,58 @@
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { flattenProps } from "../ui/flattenProps";
+import { PureContainer } from "./PureContainer";
+import { UseParentLayout } from "./layout/UseParentLayout";
+import { isDefined } from "../util/isDefined";
+let currentInstance = null;
+class FunctionalComponent extends PureContainer {
+    initInstance(context, instance) {
+        instance.store = instance.parentStore;
+        this.clear();
+        currentInstance = instance;
+        this.add(this.childrenFactory(this.props));
+        instance.content = this.layout ? this.layout.items : this.items;
+        this.clear();
+        currentInstance = null;
+    }
+    explore(context, instance) {
+        if (this.layout)
+            this.layout.items = instance.content;
+        else
+            this.items = instance.content;
+        this.exploreItems(context, instance, instance.content);
+        if (instance.computables) {
+            instance.computables.forEach((cb) => cb(instance.store.getData()));
+        }
+    }
+}
+export function createFunctionalComponent(factory) {
+    if (isComponentFactory(factory))
+        return factory;
+    return createComponentFactory(factory, (props = {}) => {
+        let innerProps = flattenProps(props);
+        delete innerProps.visible;
+        delete innerProps.if;
+        delete innerProps.controller;
+        delete innerProps.layout;
+        delete innerProps.outerLayout;
+        delete innerProps.putInto;
+        delete innerProps.contentFor;
+        delete innerProps.jsxAttributes;
+        delete innerProps.$type;
+        delete innerProps.vdomKey;
+        return {
+            type: FunctionalComponent,
+            visible: isDefined(props.if) ? props.if : isDefined(props.visible) ? props.visible : true,
+            layout: props.layout || UseParentLayout,
+            controller: props.controller,
+            outerLayout: props.outerLayout,
+            putInto: props.contentFor || props.putInto,
+            vdomKey: props.vdomKey,
+            childrenFactory: factory,
+            props: innerProps,
+        };
+    });
+}
+export function getCurrentInstance() {
+    return currentInstance;
+}

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

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

package/build/ui/createFunctionalComponent.spec.js

@@ -0,0 +1,272 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "./createFunctionalComponent";
+import { bind } from "./bind";
+import { expr } from "./expr";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { Rescope } from "./Rescope";
+import { LabelsLeftLayout } from "./layout/LabelsLeftLayout";
+import { LabeledContainer } from "../widgets/form/LabeledContainer";
+import { Repeater } from "./Repeater";
+import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
+import { useStoreMethods } from "../hooks";
+describe("createFunctionalComponent", () => {
+    it("allows spread", () => {
+        const SuperDiv = createFunctionalComponent(({ ...props }) => {
+            return (_jsx("cx", { children: _jsx("div", { ...props }) }));
+        });
+        let props = {
+            text: "Spread",
+            style: "background: red;",
+        };
+        const widget = (_jsx("cx", { children: _jsx(SuperDiv, { ...props, class: "test" }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            children: ["Spread"],
+            props: {
+                className: "test",
+                style: {
+                    background: "red",
+                },
+            },
+        });
+    });
+    it("visible and Rescope behave as expected", () => {
+        const RootRescope = createFunctionalComponent(({}) => {
+            return (_jsx("cx", { children: _jsx(Rescope, { bind: "x", children: _jsx("div", { text: bind("y") }) }) }));
+        });
+        const widget = (_jsx("cx", { children: _jsx(RootRescope, { visible: expr("!!{x}") }) }));
+        let store = new Store({
+            data: {
+                x: {
+                    y: "OK",
+                },
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            children: ["OK"],
+            props: {},
+        });
+    });
+    it("visible and multiple items behave as expected", () => {
+        const FComponent = createFunctionalComponent(({}) => {
+            return (_jsxs("cx", { children: [_jsx("div", { children: "1" }), _jsx("div", { visible: false, children: "2" }), _jsx("div", { children: "3" })] }));
+        });
+        const widget = (_jsx("cx", { children: _jsx(FComponent, {}) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "div",
+                children: ["1"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["3"],
+                props: {},
+            },
+        ]);
+    });
+    it("respects inner layouts", () => {
+        const FComponent = createFunctionalComponent(({}) => {
+            return (_jsxs("cx", { children: [_jsx(LabeledContainer, { label: "Test" }), _jsx(LabeledContainer, { label: "Test" })] }));
+        });
+        const widget = (_jsx("cx", { children: _jsx("div", { layout: LabelsLeftLayout, children: _jsx(FComponent, {}) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "table",
+                    props: {
+                        className: "cxb-labelsleftlayout",
+                        style: undefined,
+                    },
+                    children: [
+                        {
+                            type: "tbody",
+                            props: {},
+                            children: [
+                                {
+                                    type: "tr",
+                                    props: {},
+                                    children: [
+                                        {
+                                            type: "td",
+                                            props: {
+                                                className: "cxe-labelsleftlayout-label",
+                                                style: undefined,
+                                            },
+                                            children: [
+                                                {
+                                                    type: "label",
+                                                    props: {
+                                                        className: "cxb-label",
+                                                    },
+                                                    children: ["Test"],
+                                                },
+                                            ],
+                                        },
+                                        {
+                                            type: "td",
+                                            props: {
+                                                className: "cxe-labelsleftlayout-field",
+                                            },
+                                            children: null,
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: "tr",
+                                    props: {},
+                                    children: [
+                                        {
+                                            type: "td",
+                                            props: {
+                                                className: "cxe-labelsleftlayout-label",
+                                                style: undefined,
+                                            },
+                                            children: [
+                                                {
+                                                    type: "label",
+                                                    props: {
+                                                        className: "cxb-label",
+                                                    },
+                                                    children: ["Test"],
+                                                },
+                                            ],
+                                        },
+                                        {
+                                            type: "td",
+                                            props: {
+                                                className: "cxe-labelsleftlayout-field",
+                                            },
+                                            children: null,
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+    it("can use refs for data bindings", () => {
+        const X = createFunctionalComponent(({}) => {
+            let { ref } = useStoreMethods();
+            let x = ref("x", "OK");
+            return (_jsx("cx", { children: _jsx("div", { text: x }) }));
+        });
+        const widget = (_jsx("cx", { children: _jsx(X, { visible: true }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            children: ["OK"],
+            props: {},
+        });
+    });
+    it("adds children at the right place", () => {
+        const X = createFunctionalComponent(({ children }) => (_jsxs("cx", { children: [_jsx("header", {}), _jsx("main", { children: children }), _jsx("footer", {})] })));
+        const widget = (_jsx("cx", { children: _jsx(X, { children: _jsx("div", {}) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "header",
+                children: null,
+                props: {},
+            },
+            {
+                type: "main",
+                children: [
+                    {
+                        type: "div",
+                        children: null,
+                        props: {},
+                    },
+                ],
+                props: {},
+            },
+            {
+                type: "footer",
+                children: null,
+                props: {},
+            },
+        ]);
+    });
+    it("works well with repeaters", () => {
+        const X = createFunctionalComponent(({}) => {
+            let { ref } = useStoreMethods();
+            let text = ref("$record.text");
+            return (_jsx("cx", { children: _jsx("div", { text: text }) }));
+        });
+        const widget = (_jsx("cx", { children: _jsx(Repeater, { records: bind("array"), children: _jsx(X, {}) }) }));
+        let store = new Store({ data: { array: [{ text: "0" }, { text: "1" }, { text: "2" }] } });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "div",
+                children: ["0"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["1"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["2"],
+                props: {},
+            },
+        ]);
+        store.update("array", (array) => [array[0], { text: "10" }, array[2]]);
+        tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "div",
+                children: ["0"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["10"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["2"],
+                props: {},
+            },
+        ]);
+    });
+    it("can have its own layout", () => {
+        const X = createFunctionalComponent(() => (_jsxs("cx", { children: [_jsx("div", { children: "1" }), _jsx("div", { children: "2" }), _jsx("div", { children: "3" })] })));
+        const widget = (_jsx("cx", { children: _jsx(X, { layout: FirstVisibleChildLayout }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            children: ["1"],
+            props: {},
+        });
+    });
+});

package/build/ui/expr.d.ts

@@ -0,0 +1,11 @@
+import { AccessorChain } from "../data/createAccessorModelProxy";
+import { Selector } from "../data/Selector";
+import { Expr } from "./Prop";
+export declare function expr(code: string): Expr;
+export declare function expr<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Selector<R>;
+export declare function expr<V1, V2, R>(arg1: AccessorChain<V1>, arg2: AccessorChain<V2>, compute: (v1: V1, v2: V2) => R): Selector<R>;
+export declare function expr<V1, V2, V3, R>(arg1: AccessorChain<V1>, arg2: AccessorChain<V2>, arg3: AccessorChain<V3>, compute: (v1: V1, v2: V2, v3: V3) => R): Selector<R>;
+export declare function expr<V1, V2, V3, V4, R>(arg1: AccessorChain<V1>, arg2: AccessorChain<V2>, arg3: AccessorChain<V3>, arg4: AccessorChain<V4>, compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R): Selector<R>;
+export declare function expr<T extends AccessorChain<any>[], R>(...args: [...accessors: T, compute: (...values: {
+    [K in keyof T]: T[K] extends AccessorChain<infer V> ? V : never;
+}) => R]): Selector<R>;

package/build/ui/expr.js

@@ -0,0 +1,17 @@
+import { Binding } from "../data/Binding";
+import { isString } from "../util/isString";
+export function expr(...args) {
+    let text = args[0];
+    if (isString(text))
+        return {
+            expr: text,
+        };
+    let getters = [];
+    let compute = args[args.length - 1];
+    for (let i = 0; i < args.length - 1; i++)
+        getters.push(Binding.get(args[i]).value);
+    return (data) => {
+        let argv = getters.map((g) => g(data));
+        return compute.apply(null, argv);
+    };
+}

package/build/ui/flattenProps.d.ts

@@ -0,0 +1 @@
+export declare const flattenProps: (props: any) => any;

package/build/ui/flattenProps.js

@@ -0,0 +1,18 @@
+export const flattenProps = (props) => {
+    if (!props)
+        return {};
+    if (props.jsxSpread) {
+        props = {
+            ...props,
+            ...props.jsxSpread.reduce((acc, prop) => Object.assign(acc, prop), {})
+        };
+    }
+    if (props.$props !== undefined) {
+        props = {
+            ...props.$props,
+            jsxAttributes: props.jsxAttributes,
+            children: props.children
+        };
+    }
+    return { ...props };
+};

package/build/ui/index.d.ts

@@ -0,0 +1,40 @@
+export * from "./Prop";
+export * from "./Controller";
+export * from "./Widget";
+export * from "./Container";
+export * from "./PureContainer";
+export * from "./Repeater";
+export * from "./Rescope";
+export * from "./StaticText";
+export * from "./Text";
+export * from "./CSS";
+export * from "./CSSHelper";
+export * from "./FocusManager";
+export * from "./ResizeManager";
+export * from "./ZIndexManager";
+export * from "./Format";
+export * from "./Culture";
+export * from "./Localization";
+export * from "./Cx";
+export * from "./Instance";
+export * from "./RenderingContext";
+export * from "./ContentResolver";
+export * from "./batchUpdates";
+export * from "./IsolatedScope";
+export * from "./DetachedScope";
+export * from "./Restate";
+export * from "./DataProxy";
+export * from "./keyboardShortcuts";
+export * from "./StructuredInstanceDataAccessor";
+export * from "./HoverSync";
+export * from "./createFunctionalComponent";
+export * from "./flattenProps";
+export * from "./selection/index";
+export * from "./layout/index";
+export * from "./app/index";
+export * from "./adapter/index";
+export * from "./bind";
+export * from "./tpl";
+export * from "./expr";
+import { computable } from "../data/computable";
+export { computable };