cx 26.0.12 → 26.0.14

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

@@ -45,9 +45,20 @@ export type ResolveProp<P> = P extends Selector<infer T> ? T : P extends Accesso
  * 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> = {
+export type ResolveStructuredPropType<S> = {
     [K in keyof S]: ResolveProp<S[K]>;
 };
+/**
+ * Resolves the runtime value type from either a Prop<T> or a StructuredProp.
+ * Use this for generic widgets like ContentResolver and Validator where the
+ * input can be either a single prop or a structured object.
+ *
+ * - For Prop<T> (Selector, AccessorChain, GetSet), resolves to T
+ * - For bindings (Bind, Tpl, Expr), resolves to any/string/any
+ * - For structured objects, recursively resolves each property via ResolveStructuredProp
+ * - For literal values, returns them as-is
+ */
+export type ResolvePropType<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 extends object ? ResolveStructuredPropType<P> : P;
 /**
  * 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.

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

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

package/build/ui/PureContainer.spec.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import assert from "assert";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { bind } from "./bind";
+import { PureContainer } from "./PureContainer";
+describe("PureContainer", () => {
+    it("renders static text children", () => {
+        let widget = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsx("div", { children: "Test" }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree), "Expected single element");
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["Test"],
+        });
+    });
+    it("renders multiple children", () => {
+        let widget = (_jsx("cx", { children: _jsxs(PureContainer, { children: [_jsx("div", { children: "First" }), _jsx("div", { children: "Second" }), _jsx("div", { children: "Third" })] }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(Array.isArray(tree), "Expected array of elements");
+        assert.equal(tree.length, 3);
+        assert.deepEqual(tree, [
+            {
+                type: "div",
+                props: {},
+                children: ["First"],
+            },
+            {
+                type: "div",
+                props: {},
+                children: ["Second"],
+            },
+            {
+                type: "div",
+                props: {},
+                children: ["Third"],
+            },
+        ]);
+    });
+    it("renders children with data bindings", () => {
+        let widget = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsx("div", { text: bind("message") }) }) }));
+        let store = new Store({
+            data: {
+                message: "Hello World",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree), "Expected single element");
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["Hello World"],
+        });
+    });
+    it("renders nested containers", () => {
+        let widget = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsx("div", { children: _jsx(PureContainer, { children: _jsx("span", { children: "Nested" }) }) }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree), "Expected single element");
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "span",
+                    props: {},
+                    children: ["Nested"],
+                },
+            ],
+        });
+    });
+    it("conditionally renders children based on visible binding", () => {
+        let widget = (_jsx("cx", { children: _jsxs(PureContainer, { children: [_jsx("div", { visible: bind("show"), text: "Visible" }), _jsx("div", { visible: false, text: "Hidden" })] }) }));
+        let store = new Store({
+            data: {
+                show: true,
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree), "Expected single element");
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["Visible"],
+        });
+    });
+    it("handles empty children", () => {
+        let widget = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsx("div", {}) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree), "Expected single element");
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: null,
+        });
+    });
+    it("renders children from items property", () => {
+        let widget = (_jsx("cx", { children: _jsx(PureContainer, { items: [_jsx("div", { children: "Item 1" }, "1"), _jsx("div", { children: "Item 2" }, "2")] }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(Array.isArray(tree), "Expected array of elements");
+        assert.equal(tree.length, 2);
+        assert.deepEqual(tree[0], {
+            type: "div",
+            props: {},
+            children: ["Item 1"],
+        });
+        assert.deepEqual(tree[1], {
+            type: "div",
+            props: {},
+            children: ["Item 2"],
+        });
+    });
+    it("updates children when store data changes", () => {
+        let widget = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsx("div", { text: bind("count") }) }) }));
+        let store = new Store({
+            data: {
+                count: 0,
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["0"],
+        });
+        // Update the store
+        store.set("count", 5);
+        // Re-render
+        tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["5"],
+        });
+    });
+});

package/build/ui/Repeater.d.ts

@@ -1,13 +1,13 @@
 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 { Prop, StringProp, StructuredProp, RecordAlias, SortersProp, CollatorOptions, SortDirection } 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 {
+export interface RepeaterConfig<T = any> 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`. */
@@ -47,7 +47,7 @@ export interface RepeaterConfig<T = DataRecord> extends ContainerConfig {
     /** 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> {
+export declare class Repeater<T = any> extends ContainerBase<RepeaterConfig<T>> {
     records?: any;
     recordsAccessor: any;
     recordAlias?: string;

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

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

package/build/ui/Rescope.spec.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import { Rescope } from "./Rescope";
+import { bind } from "./bind";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { Controller } from "./Controller";
+import assert from "assert";
+import { PureContainer } from "./PureContainer";
+describe("Rescope", () => {
+    it("allows simple access to nested data", () => {
+        let store = new Store({
+            data: {
+                $page: {
+                    data: {
+                        name: "John",
+                    },
+                },
+            },
+        });
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page.data", children: _jsx("div", { text: bind("name") }) }) }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["John"],
+        });
+    });
+    it("allows parent access through $root", () => {
+        let store = new Store({
+            data: {
+                layout: {
+                    title: "Title",
+                },
+                $page: {
+                    data: {
+                        name: "John",
+                    },
+                },
+            },
+        });
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page.data", children: _jsx("div", { text: bind("$root.layout.title") }) }) }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["Title"],
+        });
+    });
+    it("allows nested data access through data", () => {
+        let store = new Store({
+            data: {
+                layout: {
+                    title: "Title",
+                },
+            },
+        });
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page", data: { $title: { bind: "layout.title" } }, children: _jsx("div", { text: bind("$title") }) }) }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["Title"],
+        });
+    });
+    it("nested data mutations are correctly propagated to the parent store", () => {
+        let store = new Store({
+            data: {
+                item: {
+                    value: 0,
+                },
+            },
+        });
+        let widget = (_jsxs("cx", { children: [_jsx(Rescope, { bind: "$page", data: { $value: { bind: "item.value" } }, children: _jsx(PureContainer, { controller: {
+                            onInit() {
+                                this.store.set("$value", 2);
+                            },
+                        } }) }), _jsx("div", { text: bind("item.value") })] }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["2"],
+        });
+    });
+    it("visible is calculated based on the inner scope", () => {
+        let store = new Store({
+            data: {
+                layout: {
+                    title: "Title",
+                },
+                $page: {
+                    data: {
+                        visible: true,
+                        name: "John",
+                    },
+                },
+            },
+        });
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page.data", visible: bind("visible"), children: _jsx("div", { text: bind("name") }) }) }));
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: ["John"],
+        });
+    });
+    it("controllers see inner scope", () => {
+        let store = new Store({
+            data: {
+                $page: {
+                    data: {
+                        visible: true,
+                        name: "John",
+                    },
+                },
+            },
+        });
+        let testName = null;
+        class TestController extends Controller {
+            onInit() {
+                testName = this.store.get("name");
+            }
+        }
+        let widget = (_jsx("cx", { children: _jsx(Rescope, { bind: "$page.data", controller: TestController, children: _jsx("div", { text: bind("name") }) }) }));
+        const component = createTestRenderer(store, widget);
+        component.toJSON();
+        assert.equal(testName, "John");
+    });
+});

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

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