cx 26.0.1 → 26.0.3

package/build/ui/IsolatedScope.spec.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { IsolatedScope } from "./IsolatedScope";
+import { bind } from "./bind";
+describe("IsolatedScope", () => {
+    it("prevents multiple re-renders", () => {
+        let list = [];
+        let widget = (_jsx("cx", { children: _jsx(IsolatedScope, { data: {
+                    value: { bind: 'value' }
+                }, children: _jsx("span", { text: bind("value"), onExplore: (context, { store }) => {
+                        list.push(store.get("value"));
+                    } }) }) }));
+        let store = new Store({
+            data: {
+                value: "bad",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(list, ["bad"]);
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["bad"],
+        });
+        //component should not re-render if unrelated data changes
+        store.set("dummy", "dummy");
+        tree = component.toJSON();
+        assert.deepEqual(list, ["bad"]);
+        //component should not re-render if unrelated data changes
+        store.set("value", "good");
+        tree = component.toJSON();
+        assert.deepEqual(list, ["bad", "good"]);
+        assert.deepEqual(tree, {
+            type: "span",
+            props: {},
+            children: ["good"],
+        });
+    });
+});

package/build/ui/Localization.d.ts

@@ -0,0 +1,9 @@
+export declare class Localization {
+    static register(key: string): (type: any) => any;
+    static registerPrototype(key: string, type: any): void;
+    static trackDefaults(): void;
+    static restoreDefaults(): void;
+    static override(key: string, values: any): void;
+    static localize(culture: string, key: string, values: any): void;
+    static setCulture(culture: string): void;
+}

package/build/ui/Localization.js

@@ -0,0 +1,63 @@
+let contents = {};
+let localizations = {};
+let overrides = {};
+let defaults = {};
+let trackDefaults = false;
+export class Localization {
+    static register(key) {
+        return (type) => {
+            this.registerPrototype(key, type);
+            return type;
+        };
+    }
+    static registerPrototype(key, type) {
+        contents[key] = type.prototype;
+        if (overrides[key])
+            this.override(key, overrides[key]);
+    }
+    static trackDefaults() {
+        trackDefaults = true;
+    }
+    static restoreDefaults() {
+        for (let type in defaults) {
+            let proto = contents[type];
+            if (!proto)
+                continue;
+            let d = defaults[type];
+            for (let key in d)
+                proto[key] = d[key];
+        }
+        defaults = {};
+    }
+    static override(key, values) {
+        overrides[key] = values;
+        let p = contents[key];
+        if (p) {
+            if (trackDefaults && !defaults[key]) {
+                let d = defaults[key] = {};
+                for (let key in values)
+                    d[key] = p[key];
+            }
+            Object.assign(p, values);
+        }
+    }
+    static localize(culture, key, values) {
+        let l = localizations[culture];
+        if (!l)
+            l = localizations[culture] = {};
+        l[key] = {
+            ...l[key],
+            ...values
+        };
+    }
+    static setCulture(culture) {
+        var l = localizations[culture];
+        if (l) {
+            for (var key in l) {
+                var content = contents[key];
+                if (content)
+                    Object.assign(content, l[key]);
+            }
+        }
+    }
+}

package/build/ui/Prop.d.ts

@@ -0,0 +1,83 @@
+import { Selector } from "../data/Selector";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+export type Bind = {
+    bind: string;
+    defaultValue?: any;
+    throttle?: number;
+    debounce?: number;
+};
+export type Tpl = {
+    tpl: string;
+};
+export type Expr = {
+    expr: string;
+    set?: (value: any, instance?: any) => boolean;
+    throttle?: number;
+    debounce?: number;
+};
+export type Binding = Bind | Tpl | Expr;
+export type GetSet<T> = {
+    get: Selector<T>;
+    set?: (value: T, instance?: any) => boolean;
+    throttle?: number;
+    debounce?: number;
+};
+export interface StructuredSelector {
+    [prop: string]: Selector<any>;
+}
+export type Prop<T> = T | Binding | Selector<T> | AccessorChain<T> | GetSet<T>;
+export type WritableProp<T> = Bind | AccessorChain<T>;
+export interface DataRecord {
+    [prop: string]: any;
+}
+export interface Config {
+    [prop: string]: any;
+}
+export interface StructuredProp {
+    [prop: string]: Prop<any>;
+}
+/**
+ * Utility type that extracts the resolved value type from a Prop<T>.
+ * Used to derive the runtime type of structured props.
+ */
+export type ResolveProp<P> = P extends Selector<infer T> ? T : P extends AccessorChain<infer T> ? T : P extends GetSet<infer T> ? T : P extends Bind ? any : P extends Tpl ? string : P extends Expr ? any : P;
+/**
+ * Utility type that resolves a structured prop object to its runtime value types.
+ * Transforms { name: StringProp, count: NumberProp } to { name: string, count: number }
+ */
+export type ResolveStructuredProp<S> = {
+    [K in keyof S]: ResolveProp<S[K]>;
+};
+/**
+ * Generic structured prop type that provides type safety for params and their resolved values.
+ * Use with ContentResolver and similar widgets to type the onResolve callback params.
+ */
+export type TypedStructuredProp<T extends Record<string, any>> = {
+    [K in keyof T]: Prop<T[K]>;
+};
+export type StringProp = Prop<string>;
+export type StyleProp = Prop<string | React.CSSProperties> | StructuredProp;
+export type NumberProp = Prop<number>;
+export type BooleanProp = Prop<boolean>;
+export type ClassProp = Prop<string> | StructuredProp;
+export type RecordsProp = Prop<DataRecord[]>;
+export type SortersProp = Prop<Sorter[]>;
+export type UnknownProp = Prop<unknown>;
+export type ModProp = StringProp | StructuredProp;
+export type RecordAlias = string | {
+    toString(): string;
+};
+export type SortDirection = "ASC" | "DESC";
+export interface Sorter {
+    field?: string;
+    value?: (record: DataRecord) => any;
+    direction: SortDirection;
+}
+export interface CollatorOptions {
+    localeMatcher?: "lookup" | "best fit";
+    usage?: "sort" | "search";
+    sensitivity?: "base" | "accent" | "case" | "variant";
+    ignorePunctuation?: boolean;
+    numeric?: boolean;
+    caseFirst?: "upper" | "lower" | "false";
+}

package/build/ui/Prop.js

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

package/build/ui/PureContainer.d.ts

@@ -0,0 +1,9 @@
+import { ContainerBase, ContainerConfig } from "./Container";
+import { Instance } from "./Instance";
+export interface PureContainerConfig extends ContainerConfig {
+}
+export declare class PureContainerBase<Config extends PureContainerConfig = PureContainerConfig, InstanceType extends Instance = Instance> extends ContainerBase<Config, InstanceType> {
+    isPureContainer: boolean;
+}
+export declare class PureContainer extends PureContainerBase<PureContainerConfig, Instance> {
+}

package/build/ui/PureContainer.js

@@ -0,0 +1,9 @@
+import { ContainerBase } from "./Container";
+// Base class for extending with custom Config types
+export class PureContainerBase extends ContainerBase {
+}
+PureContainerBase.prototype.isPureContainer = true;
+// Closed type for direct usage - preserves ControllerProp ThisType
+export class PureContainer extends PureContainerBase {
+}
+PureContainer.alias("pure-container", PureContainer);

package/build/ui/RenderingContext.d.ts

@@ -0,0 +1,19 @@
+import { Widget } from "./Widget";
+export type CxChild = Record<string, any> | React.ReactElement | Widget | CxChild[] | null | undefined;
+export declare class RenderingContext {
+    options: any;
+    exploreStack: any;
+    prepareList: any[];
+    cleanupList: any[];
+    stacks: any;
+    renderList: any;
+    [key: string]: any;
+    constructor(options?: any);
+    getStack(key: string): any;
+    push(key: string, value: any): any;
+    pop(key: string): any;
+    pushNamedValue(key: string, name: string, value: any): any;
+    popNamedValue(key: string, name: string): any;
+    get(key: string): any;
+    getRootRenderList(): any;
+}

package/build/ui/RenderingContext.js

@@ -0,0 +1,84 @@
+import { TraversalStack } from "../util/TraversalStack";
+import { reverseSlice } from "../util/reverseSlice";
+export class RenderingContext {
+    options;
+    exploreStack;
+    prepareList;
+    cleanupList;
+    stacks;
+    renderList;
+    constructor(options) {
+        this.options = options || {};
+        this.exploreStack = new TraversalStack();
+        this.prepareList = [];
+        this.cleanupList = [];
+        this.stacks = {};
+        this.renderList = new LinkedListsNode();
+    }
+    getStack(key) {
+        let stack = this.stacks[key];
+        if (!stack)
+            stack = this.stacks[key] = [];
+        return stack;
+    }
+    push(key, value) {
+        let stack = this.getStack(key);
+        stack.push(this[key]);
+        return (this[key] = value);
+    }
+    pop(key) {
+        let stack = this.getStack(key);
+        return (this[key] = stack.pop());
+    }
+    pushNamedValue(key, name, value) {
+        let stack = this.getStack(`${key}:${name}`);
+        if (!this[key])
+            this[key] = {};
+        stack.push(this[key][name]);
+        return (this[key][name] = value);
+    }
+    popNamedValue(key, name) {
+        let stack = this.getStack(`${key}:${name}`);
+        return (this[key][name] = stack.pop());
+    }
+    get(key) {
+        return this[key];
+    }
+    getRootRenderList() {
+        let rl = this.renderList;
+        while (rl.left)
+            rl = rl.left;
+        return rl;
+    }
+}
+class LinkedListsNode {
+    left;
+    right;
+    data;
+    reverseIndex;
+    constructor(left, right) {
+        this.left = left;
+        this.right = right;
+        this.data = [];
+    }
+    insertLeft() {
+        let node = new LinkedListsNode(this.left, this);
+        if (this.left)
+            this.left.right = node;
+        this.left = node;
+        return node;
+    }
+    insertRight() {
+        let node = new LinkedListsNode(this, this.right);
+        if (this.right)
+            this.right.left = node;
+        this.right = node;
+        return node;
+    }
+    markReverseIndex() {
+        this.reverseIndex = this.data.length;
+    }
+    reverse() {
+        reverseSlice(this.data, this.reverseIndex);
+    }
+}

package/build/ui/Repeater.d.ts

@@ -0,0 +1,73 @@
+import { ContainerBase, ContainerConfig } from "./Container";
+import { ArrayAdapter } from "./adapter/ArrayAdapter";
+import { RenderingContext } from "./RenderingContext";
+import { Prop, StringProp, StructuredProp, RecordAlias, SortersProp, CollatorOptions, SortDirection, DataRecord } from "./Prop";
+import { Instance } from "./Instance";
+import { DataAdapter, DataAdapterRecord } from "./adapter/DataAdapter";
+import type { GroupAdapter } from "./adapter/GroupAdapter";
+import type { TreeAdapter } from "./adapter/TreeAdapter";
+import { Create } from "../util/Component";
+export interface RepeaterConfig<T = DataRecord> extends ContainerConfig {
+    /** An array of records to be displayed. */
+    records?: Prop<T[]>;
+    /** Alias used to expose the record in the child scope. Default is `$record`. */
+    recordName?: RecordAlias;
+    /** Alias used to expose the record in the child scope. Default is `$record`. */
+    recordAlias?: RecordAlias;
+    /** Alias used to expose the index of the record. Default is `$index`. */
+    indexName?: RecordAlias;
+    /** Alias used to expose the index of the record. Default is `$index`. */
+    indexAlias?: RecordAlias;
+    /** Set to `true` to enable caching for improved performance on large datasets. */
+    cached?: boolean;
+    /** Indicate that parent store data should not be mutated. */
+    immutable?: boolean;
+    /** Indicate that record stores should not be mutated. */
+    sealed?: boolean;
+    /** An array of sorter configurations. */
+    sorters?: SortersProp;
+    /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
+    sortField?: StringProp;
+    /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
+    sortDirection?: Prop<SortDirection>;
+    /** Parameters that affect filtering. */
+    filterParams?: StructuredProp;
+    /** Callback to create a filter function for given filter params. */
+    onCreateFilter?: (filterParams: any, instance: Instance) => (record: T) => boolean;
+    /**
+     * Callback function to track and retrieve displayed records.
+     * Accepts new records as a first argument.
+     * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
+     */
+    onTrackMappedRecords?: string | ((records: DataAdapterRecord<T>[], instance: Instance) => void);
+    /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
+    sortOptions?: CollatorOptions;
+    /** A field used to get the unique identifier of the record. Setting keyField improves performance on sort operations as the widget is able to track movement of records inside the collection. */
+    keyField?: string;
+    /** Data adapter used to convert data in the list of records. Used for manipulation of records, e.g flattening the tree records. */
+    dataAdapter?: Create<typeof DataAdapter> | Create<typeof ArrayAdapter> | Create<typeof TreeAdapter> | Create<typeof GroupAdapter>;
+}
+export declare class Repeater<Config extends RepeaterConfig = RepeaterConfig> extends ContainerBase<Config> {
+    records?: any;
+    recordsAccessor: any;
+    recordAlias?: string;
+    recordName: string;
+    indexAlias?: string;
+    indexName: string;
+    dataAdapter: any;
+    keyField?: string;
+    immutable: boolean;
+    sealed: boolean;
+    sortOptions?: any;
+    item: any;
+    cached: boolean;
+    onCreateFilter?: any;
+    filter?: any;
+    onTrackMappedRecords?: any;
+    declareData(...args: any[]): void;
+    init(): void;
+    initInstance(context: RenderingContext, instance: any): void;
+    applyParentStore(instance: any): void;
+    prepareData(context: RenderingContext, instance: any): void;
+    explore(context: RenderingContext, instance: any, data?: any): void;
+}

package/build/ui/Repeater.js

@@ -0,0 +1,99 @@
+import { Widget } from "./Widget";
+import { PureContainer } from "./PureContainer";
+import { ContainerBase } from "./Container";
+import { ArrayAdapter } from "./adapter/ArrayAdapter";
+import { UseParentLayout } from "./layout/UseParentLayout";
+import { getAccessor } from "../data/getAccessor";
+export class Repeater extends ContainerBase {
+    recordsAccessor;
+    item;
+    filter;
+    declareData(...args) {
+        super.declareData({
+            records: undefined,
+            sorters: undefined,
+            sortField: undefined,
+            sortDirection: undefined,
+            filterParams: {
+                structured: true,
+            },
+        }, ...args);
+    }
+    init() {
+        this.recordsAccessor = getAccessor(this.records);
+        if (this.recordAlias)
+            this.recordName = this.recordAlias;
+        if (this.indexAlias)
+            this.indexName = this.indexAlias;
+        this.dataAdapter = ArrayAdapter.create({
+            ...this.dataAdapter,
+            recordName: this.recordName,
+            indexName: this.indexName,
+            keyField: this.keyField,
+            immutable: this.immutable,
+            sealed: this.sealed,
+            recordsAccessor: this.recordsAccessor,
+            sortOptions: this.sortOptions,
+        });
+        this.item = PureContainer.create({
+            children: this.items || this.children,
+            layout: UseParentLayout,
+        });
+        delete this.children;
+        this.items = [];
+        super.init();
+    }
+    initInstance(context, instance) {
+        this.dataAdapter.initInstance(context, instance);
+    }
+    applyParentStore(instance) {
+        super.applyParentStore(instance);
+        // force prepareData to execute again and propagate the store change to the records
+        if (instance.cached)
+            delete instance.cached.rawData;
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        if (data.sortField)
+            data.sorters = [
+                {
+                    field: data.sortField,
+                    direction: data.sortDirection || "ASC",
+                },
+            ];
+        this.dataAdapter.sort(data.sorters);
+        let filter = null;
+        if (this.onCreateFilter)
+            filter = instance.invoke("onCreateFilter", data.filterParams, instance);
+        else if (this.filter)
+            filter = (item) => this.filter(item, data.filterParams);
+        this.dataAdapter.setFilter(filter);
+        instance.mappedRecords = this.dataAdapter.getRecords(context, instance, data.records, instance.store);
+        if (this.onTrackMappedRecords) {
+            instance.invoke("onTrackMappedRecords", instance.mappedRecords, instance);
+        }
+        super.prepareData(context, instance);
+    }
+    explore(context, instance, data) {
+        let instances = [];
+        instance.mappedRecords.forEach((record) => {
+            let subInstance = instance.getChild(context, this.item, record.key, record.store);
+            let changed = subInstance.cache("recordData", record.data) || subInstance.cache("key", record.key);
+            subInstance.record = record;
+            if (this.cached && !changed && subInstance.visible && !subInstance.childStateDirty) {
+                instances.push(subInstance);
+                subInstance.shouldUpdate = false;
+            }
+            else if (subInstance.scheduleExploreIfVisible(context))
+                instances.push(subInstance);
+        });
+        instance.children = instances;
+    }
+}
+Repeater.prototype.recordName = "$record";
+Repeater.prototype.indexName = "$index";
+Repeater.prototype.cached = false;
+Repeater.prototype.immutable = false;
+Repeater.prototype.sealed = false;
+Repeater.prototype.isPureContainer = true;
+Widget.alias("repeater", Repeater);

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

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

package/build/ui/Repeater.spec.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import { Repeater } from "./Repeater";
+import { bind } from "./bind";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+describe("Repeater", () => {
+    it("allows sorting", () => {
+        let data = [
+            {
+                value: "C",
+            },
+            {
+                value: "B",
+            },
+            {
+                value: "A",
+            },
+        ];
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(Repeater, { records: data, sorters: [{ field: "value", direction: "ASC" }], recordAlias: "$item", children: _jsx("div", { text: bind("$item.value") }) }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "div",
+                    props: {},
+                    children: ["A"],
+                },
+                {
+                    type: "div",
+                    props: {},
+                    children: ["B"],
+                },
+                {
+                    type: "div",
+                    props: {},
+                    children: ["C"],
+                },
+            ],
+        });
+    });
+    it("changes are properly updated", () => {
+        let divInstances = [];
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(Repeater, { records: bind("data"), sorters: [{ field: "value", direction: "ASC" }], recordAlias: "$item", children: _jsx("div", { text: bind("$item.value"), onExplore: (context, instance) => {
+                            divInstances.push(instance);
+                        } }) }) }) }));
+        let store = new Store({
+            data: {
+                data: [
+                    {
+                        value: "C",
+                    },
+                    {
+                        value: "B",
+                    },
+                ],
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "div",
+                    props: {},
+                    children: ["B"],
+                },
+                {
+                    type: "div",
+                    props: {},
+                    children: ["C"],
+                },
+            ],
+        });
+        divInstances = [];
+        store.update("data", (data) => [{ value: "A" }, ...data]);
+        assert.deepEqual(component.toJSON(), {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "div",
+                    props: {},
+                    children: ["A"],
+                },
+                {
+                    type: "div",
+                    props: {},
+                    children: ["B"],
+                },
+                {
+                    type: "div",
+                    props: {},
+                    children: ["C"],
+                },
+            ],
+        });
+        assert.equal(divInstances.length, 3);
+        assert.equal(divInstances[0].store.get("$item.value"), "A");
+        assert.equal(divInstances[1].store.get("$item.value"), "B");
+        assert.equal(divInstances[2].store.get("$item.value"), "C");
+    });
+});

package/build/ui/Rescope.d.ts

@@ -0,0 +1,18 @@
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { StructuredProp } from "./Prop";
+export interface RescopeConfig extends PureContainerConfig {
+    bind: string;
+    rootName?: string;
+    rootAlias?: string;
+    data?: StructuredProp;
+}
+export declare class Rescope extends PureContainerBase<RescopeConfig> {
+    bind: string;
+    binding: any;
+    rootAlias?: string;
+    rootName: string;
+    data?: any;
+    init(): void;
+    initInstance(context: any, instance: any): void;
+    applyParentStore(instance: any): void;
+}

package/build/ui/Rescope.js

@@ -0,0 +1,31 @@
+import { Widget } from "./Widget";
+import { PureContainerBase } from "./PureContainer";
+import { Binding } from "../data/Binding";
+import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+import { isObject } from "../util/isObject";
+export class Rescope extends PureContainerBase {
+    init() {
+        this.binding = Binding.get(this.bind);
+        if (this.rootAlias)
+            this.rootName = this.rootAlias;
+        super.init();
+    }
+    initInstance(context, instance) {
+        instance.store = new ZoomIntoPropertyView({
+            store: instance.parentStore,
+            binding: this.binding,
+            rootName: this.rootName,
+            nestedData: isObject(this.data)
+                ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
+                : undefined,
+        });
+        super.initInstance(context, instance);
+    }
+    applyParentStore(instance) {
+        instance.store.setStore(instance.parentStore);
+    }
+}
+Rescope.prototype.bind = "$page";
+Rescope.prototype.rootName = "$root";
+Widget.alias("rescope", Rescope);

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

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