cx 26.0.12 → 26.0.14

package/build/data/ops/append.spec.js

@@ -0,0 +1,24 @@
+import assert from 'assert';
+import { Store } from '../Store';
+import { append } from './append';
+describe('append', function () {
+    it('should add elements to an array', function () {
+        let store = new Store({
+            data: {
+                array: []
+            }
+        });
+        assert(store.update('array', append, 1));
+        assert.deepEqual(store.get('array'), [1]);
+    });
+    it('should work with undefined arrays', function () {
+        let store = new Store();
+        assert(store.update('array', append, 1));
+        assert.deepEqual(store.get('array'), [1]);
+    });
+    it('accepts multiple arguments', function () {
+        let store = new Store();
+        assert(store.update('array', append, 1, 2, 3));
+        assert.deepEqual(store.get('array'), [1, 2, 3]);
+    });
+});

package/build/data/ops/filter.spec.d.ts

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

package/build/data/ops/filter.spec.js

@@ -0,0 +1,25 @@
+import assert from "assert";
+import { Store } from "../Store";
+import { filter } from "./filter";
+describe("filter", function () {
+    it("should filter array elements", function () {
+        let store = new Store({
+            data: {
+                array: [1, 2, 3],
+            },
+        });
+        assert(store.update("array", filter, (x) => x > 1));
+        assert.deepEqual(store.get("array"), [2, 3]);
+    });
+    it("should work with undefined arrays", function () {
+        let store = new Store();
+        assert.equal(false, store.update("array", filter, (x) => x > 1));
+        assert.deepEqual(store.get("array"), undefined);
+    });
+    it("returns same array if all elements satisfy condition", function () {
+        let array = [1, 2, 3];
+        let store = new Store({ data: { array } });
+        assert.equal(false, store.update("array", filter, (x) => x > 0));
+        assert(store.get("array") === array);
+    });
+});

package/build/data/ops/findTreeNode.d.ts

@@ -1 +1 @@
-export declare function findTreeNode<T extends Record<string, any>>(array: T[], criteria: (node: T) => boolean, childrenField?: keyof T): T | false;
+export declare function findTreeNode<T = any>(array: T[], criteria: (node: T) => boolean, childrenField: keyof T): T | false;

package/build/data/ops/findTreeNode.js

@@ -1,4 +1,4 @@
-export function findTreeNode(array, criteria, childrenField = "$children") {
+export function findTreeNode(array, criteria, childrenField) {
     if (!Array.isArray(array))
         return false;
     for (const node of array) {

package/build/data/ops/findTreeNode.spec.d.ts

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

package/build/data/ops/findTreeNode.spec.js

@@ -0,0 +1,20 @@
+import assert from 'assert';
+import { findTreeNode } from './findTreeNode';
+describe('removeTreeNodes', function () {
+    it('removes all nodes that satisfy criteria', function () {
+        let array = [{
+                id: 'n1',
+                value: 1,
+                children: [{
+                        id: 'n11',
+                        value: 2
+                    }, {
+                        id: 'n12',
+                        value: 3
+                    }]
+            }];
+        let node = findTreeNode(array, x => x.value == 3, 'children');
+        assert(node);
+        assert.equal(node.value, 3);
+    });
+});

package/build/data/ops/findTreePath.d.ts

@@ -1 +1 @@
-export declare function findTreePath<T extends Record<string, any>>(array: T[] | undefined, criteria: (node: T) => boolean, childrenField?: keyof T, currentPath?: T[]): T[] | false;
+export declare function findTreePath<T = any>(array: T[] | undefined, criteria: (node: T) => boolean, childrenField?: keyof T, currentPath?: T[]): T[] | false;

package/build/data/ops/merge.spec.d.ts

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

package/build/data/ops/merge.spec.js

@@ -0,0 +1,23 @@
+import { Store } from "../Store";
+import { merge } from "./merge";
+import assert from "assert";
+describe("merge", function () {
+    it("performs multiple set operations", function () {
+        let store = new Store({
+            data: {
+                person: { firstName: "John", lastName: "Doe" },
+            },
+        });
+        assert(store.update("person", merge, { firstName: "Johny", age: 18 }));
+        assert.deepEqual(store.get("person"), { firstName: "Johny", lastName: "Doe", age: 18 });
+    });
+    it("does not modify data if not necessary", function () {
+        let store = new Store({
+            data: {
+                person: { firstName: "John", lastName: "Doe" },
+            },
+        });
+        assert(store.update("person", merge, { firstName: "John" }) == false);
+        assert.deepEqual(store.get("person"), { firstName: "John", lastName: "Doe" });
+    });
+});

package/build/data/ops/removeTreeNodes.d.ts

@@ -1 +1 @@
-export declare function removeTreeNodes<T extends Record<string, any>>(array: T[] | undefined, criteria: (node: T) => boolean, childrenField?: keyof T): T[] | undefined;
+export declare function removeTreeNodes<T = any>(array: T[] | undefined, criteria: (node: T) => boolean, childrenField: keyof T): T[] | undefined;

package/build/data/ops/removeTreeNodes.js

@@ -1,4 +1,4 @@
 import { updateTree } from "./updateTree";
-export function removeTreeNodes(array, criteria, childrenField = "$children") {
+export function removeTreeNodes(array, criteria, childrenField) {
     return updateTree(array, (x) => x, () => false, childrenField, criteria);
 }

package/build/data/ops/removeTreeNodes.spec.d.ts

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

package/build/data/ops/removeTreeNodes.spec.js

@@ -0,0 +1,35 @@
+import { Store } from "../Store";
+import { removeTreeNodes } from "./removeTreeNodes";
+import assert from "assert";
+describe("removeTreeNodes", function () {
+    it("removes all nodes that satisfy criteria", function () {
+        let store = new Store({
+            data: {
+                array: [
+                    {
+                        id: "n1",
+                        value: 1,
+                        children: [
+                            {
+                                id: "n11",
+                                value: 2,
+                            },
+                            {
+                                id: "n12",
+                                value: 3,
+                            },
+                        ],
+                    },
+                ],
+            },
+        });
+        assert(store.update("array", removeTreeNodes, (x) => x.value > 1, "children"));
+        assert.deepEqual(store.get("array"), [
+            {
+                id: "n1",
+                value: 1,
+                children: [],
+            },
+        ]);
+    });
+});

package/build/data/ops/updateArray.spec.d.ts

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

package/build/data/ops/updateArray.spec.js

@@ -0,0 +1,33 @@
+import { Store } from "../Store";
+import { updateArray } from "./updateArray";
+import assert from "assert";
+describe("updateArray", function () {
+    it("updates all elements that satisfy criteria", function () {
+        let store = new Store({
+            data: { array: [1, 2, 3, 4, 5, 6] },
+        });
+        assert(store.update("array", updateArray, (x) => x + 1, (x) => x > 3));
+        assert.deepEqual(store.get("array"), [1, 2, 3, 5, 6, 7]);
+    });
+    it("does not modify data if not necessary", function () {
+        let array = [1, 2, 3, 4, 5, 6];
+        let store = new Store({
+            data: { array },
+        });
+        assert(false ===
+            store.update("array", updateArray, (x) => x + 1, (x) => x > 10));
+        assert(store.get("array") === array);
+    });
+    it("works with null or undefined", function () {
+        let store = new Store();
+        assert(false ===
+            store.update("array", updateArray, (x) => x + 1, (x) => x > 0));
+    });
+    it("can remove elements given the criteria", function () {
+        let store = new Store({
+            data: { array: [1, 2, 3, 4, 5, 6] },
+        });
+        assert(store.update("array", updateArray, (x) => x + 1, (x) => x > 3, (x) => x <= 3));
+        assert.deepEqual(store.get("array"), [5, 6, 7]);
+    });
+});

package/build/data/ops/updateTree.d.ts

@@ -1 +1 @@
-export declare function updateTree<T extends Record<string, any> = any>(array: T[] | undefined, updateCallback: (item: T) => T, itemFilter: ((item: T) => boolean) | null, childrenField: keyof T, removeFilter?: (item: T) => boolean): T[] | undefined;
+export declare function updateTree<T = any>(array: T[] | undefined, updateCallback: (item: T) => T, itemFilter: ((item: T) => boolean) | null, childrenField: keyof T, removeFilter?: (item: T) => boolean): T[] | undefined;

package/build/data/ops/updateTree.spec.d.ts

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

package/build/data/ops/updateTree.spec.js

@@ -0,0 +1,44 @@
+import { Store } from "../Store";
+import { updateTree } from "./updateTree";
+import assert from "assert";
+describe("updateTree", function () {
+    it("updates all nodes that satisfy criteria", function () {
+        let store = new Store({
+            data: {
+                array: [
+                    {
+                        id: "n1",
+                        value: 1,
+                        children: [
+                            {
+                                id: "n11",
+                                value: 2,
+                            },
+                            {
+                                id: "n12",
+                                value: 3,
+                            },
+                        ],
+                    },
+                ],
+            },
+        });
+        assert(store.update("array", updateTree, (x) => ({ ...x, value: x.value + 1 }), (x) => x.value > 1, "children"));
+        assert.deepEqual(store.get("array"), [
+            {
+                id: "n1",
+                value: 1,
+                children: [
+                    {
+                        id: "n11",
+                        value: 3,
+                    },
+                    {
+                        id: "n12",
+                        value: 4,
+                    },
+                ],
+            },
+        ]);
+    });
+});

package/build/hooks/invokeCallback.spec.d.ts

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

package/build/hooks/invokeCallback.spec.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import assert from "assert";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { invokeCallback } from "./invokeCallback";
+describe("invokeCallback", () => {
+    it("works with functions", () => {
+        const FComp = createFunctionalComponent(({ onTest }) => {
+            invokeCallback(null, onTest, "works");
+            return (_jsx("cx", { children: _jsx("div", {}) }));
+        });
+        let store = new Store();
+        let value;
+        const component = createTestRenderer(store, {
+            type: FComp,
+            onTest: (v) => {
+                value = v;
+            },
+        });
+        component.toJSON();
+        assert.equal(value, "works");
+    });
+    it("works with controller methods", () => {
+        const FComp = createFunctionalComponent(({ onTest }) => {
+            return (_jsx("cx", { children: _jsx("div", { onExplore: (context, instance) => {
+                        invokeCallback(instance, onTest, "works");
+                    } }) }));
+        });
+        let store = new Store();
+        let value;
+        const component = createTestRenderer(store, {
+            type: FComp,
+            onTest: "onTest",
+            controller: {
+                onTest(v) {
+                    value = v;
+                },
+            },
+        });
+        component.toJSON();
+        assert.equal(value, "works");
+    });
+});

package/build/hooks/resolveCallback.spec.d.ts

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

package/build/hooks/resolveCallback.spec.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import assert from "assert";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { resolveCallback } from "./resolveCallback";
+describe("resolveCallback", () => {
+    it("works with functions", () => {
+        const FComp = createFunctionalComponent(({ onTest }) => {
+            let callback = resolveCallback(onTest);
+            assert(typeof callback === 'function');
+            callback("works");
+            return (_jsx("cx", { children: _jsx("div", {}) }));
+        });
+        let store = new Store();
+        let value;
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx(FComp, { onTest: (v) => { value = v; } }) }));
+        component.toJSON();
+        assert.equal(value, "works");
+    });
+    it("works with controller methods", () => {
+        const FComp = createFunctionalComponent(({ onTest }) => {
+            let callback = resolveCallback(onTest);
+            assert(typeof callback === 'function');
+            return (_jsx("cx", { children: _jsx("div", { onInit: () => { callback("works"); } }) }));
+        });
+        let store = new Store();
+        let value;
+        const component = createTestRenderer(store, _jsx("cx", { children: _jsx(FComp, { onTest: "onTest", controller: {
+                    onTest(v) { value = v; }
+                } }) }));
+        component.toJSON();
+        assert.equal(value, "works");
+    });
+});

package/build/hooks/store.spec.d.ts

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

package/build/hooks/store.spec.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import assert from "assert";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { computable } from "../data";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { ref } from "./store";
+describe("ref", () => {
+    it("allows store references in functional components", () => {
+        const FComp = createFunctionalComponent(({}) => {
+            let testValue = ref({ bind: "x", defaultValue: 10 });
+            return (_jsx("cx", { children: _jsx("div", { text: testValue }) }));
+        });
+        let store = new Store();
+        const component = createTestRenderer(store, FComp);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            children: ["10"],
+            props: {},
+        });
+    });
+    it("can be used to adapt any prop passed to a functional component", () => {
+        const FComp = createFunctionalComponent(({ value }) => {
+            return (_jsx("cx", { children: _jsx("div", { text: computable(ref(value), (value) => `x${value}`) }) }));
+        });
+        let store = new Store({ data: { value: 100 } });
+        function test(value, expectation) {
+            const component = createTestRenderer(store, _jsx(FComp, { value: value }));
+            let tree = component.toJSON();
+            assert.deepEqual(tree, {
+                type: "div",
+                children: [expectation],
+                props: {},
+            });
+        }
+        test({ bind: "value" }, "x100");
+        test({ expr: "{value}" }, "x100");
+        test({ tpl: "{value:n;2}" }, "x100.00");
+        test(200, "x200");
+        test(() => 500, "x500");
+        test(computable("value", (value) => value + 100), "x200");
+        test(null, "xnull");
+        test(undefined, "xundefined");
+        test(0, "x0");
+        test(false, "xfalse");
+    });
+});

package/build/hooks/useTrigger.spec.d.ts

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

package/build/hooks/useTrigger.spec.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import assert from "assert";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { useTrigger } from "./useTrigger";
+describe("useTrigger", () => {
+    it("works", () => {
+        let last = null;
+        const FComp = createFunctionalComponent(({ ...props }) => {
+            useTrigger(["test"], (test) => {
+                last = test;
+            });
+            return (_jsx("cx", { children: _jsx("div", {}) }));
+        });
+        let store = new Store();
+        let test = store.ref("test", 1);
+        const component = createTestRenderer(store, FComp);
+        component.toJSON();
+        assert.equal(last, null); //trigger did not fire because it didn't receive true as the last argument
+        test.set(2);
+        component.toJSON();
+        assert.equal(last, 2);
+    });
+    it("fires immediately if the last argument is true", () => {
+        let last = null;
+        const FComp = createFunctionalComponent(({ ...props }) => {
+            useTrigger(["test"], (test) => {
+                last = test;
+            }, true);
+            return (_jsx("cx", { children: _jsx("div", {}) }));
+        });
+        let store = new Store();
+        let test = store.ref("test", 1);
+        const component = createTestRenderer(store, FComp);
+        component.toJSON();
+        assert.equal(last, 1);
+        test.set(2);
+        component.toJSON();
+        assert.equal(last, 2);
+    });
+    it("accepts refs as arguments", () => {
+        let last = null;
+        let store = new Store();
+        let test = store.ref("test", 1);
+        const FComp = createFunctionalComponent(({ ...props }) => {
+            useTrigger([test], (test) => {
+                last = test;
+            }, true);
+            return (_jsx("cx", { children: _jsx("div", {}) }));
+        });
+        const component = createTestRenderer(store, FComp);
+        component.toJSON();
+        assert.equal(last, 1);
+        test.set(2);
+        component.toJSON();
+        assert.equal(last, 2);
+    });
+});

package/build/jsx-runtime.d.ts

@@ -1,20 +1,15 @@
-import type { JSX as ReactJSX } from "react";
-import { Instance } from "./ui/Instance";
-import type { ClassProp, Prop } from "./ui/Prop";
+import type { ComponentClass, FunctionComponent, JSX as ReactJSX } from "react";
+import type { CxFunctionalComponent } from "./ui/createFunctionalComponent";
 import { Widget } from "./ui/Widget";
 import { HtmlElementConfig } from "./widgets/HtmlElement";
-import { ChildNode } from "./ui/Container";
+import { ReactElementWrapperConfig } from "./widgets/ReactElementWrapper";
 export declare function jsx(typeName: any, props: any, key?: string): any;
 export declare const jsxs: typeof jsx;
 type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
-type IsEventHandler<K, T> = K extends `on${string}` ? (T extends Function ? true : false) : false;
-type CxEventHandler<T> = T extends (event: infer E) => any ? string | ((event: E, instance: Instance) => void) : string | T;
-type CxIntrinsicElement<T> = {
-    [K in keyof T]: K extends "children" ? ChildNode | ChildNode[] : K extends "className" | "class" ? ClassProp : IsEventHandler<K, T[K]> extends true ? CxEventHandler<T[K]> : Prop<T[K]>;
-} & HtmlElementConfig;
 type CxIntrinsicElements = {
-    [K in keyof ReactIntrinsicElements]: CxIntrinsicElement<ReactIntrinsicElements[K]>;
+    [K in keyof ReactIntrinsicElements]: HtmlElementConfig<K>;
 };
+type TransformReactComponentProps<C, P> = [C] extends [CxFunctionalComponent<any>] ? P : [C] extends [FunctionComponent<any>] ? ReactElementWrapperConfig<P> : [C] extends [ComponentClass<any>] ? ReactElementWrapperConfig<P> : P;
 export declare namespace JSX {
     /**
      * Base class for JSX element instances.
@@ -28,5 +23,10 @@ export declare namespace JSX {
     interface IntrinsicElements extends CxIntrinsicElements {
         cx: any;
     }
+    /**
+     * Transform props for React function components used in CxJS JSX.
+     * Adds standard WidgetConfig properties and transforms React props to Prop<X>.
+     */
+    type LibraryManagedAttributes<C, P> = TransformReactComponentProps<C, P>;
 }
 export {};

package/build/jsx-runtime.js

@@ -1,6 +1,7 @@
 import { isArray } from "./util/isArray";
 import { isString } from "./util/isString";
 import { HtmlElement } from "./widgets/HtmlElement";
+import { ReactElementWrapper } from "./widgets/ReactElementWrapper";
 export function jsx(typeName, props, key) {
     if (isArray(typeName))
         return typeName;
@@ -18,6 +19,11 @@ export function jsx(typeName, props, key) {
         props.tag = typeName;
         typeName = HtmlElement;
     }
+    // React components (functions/classes without isComponentType and not CxJS functional components) should go through ReactElementWrapper
+    else if (typeof typeName === "function" && !typeName.isComponentType && !typeName.$isComponentFactory) {
+        props.componentType = typeName;
+        typeName = ReactElementWrapper;
+    }
     return {
         $type: typeName,
         ...props,

package/build/svg/util/Rect.d.ts

@@ -21,7 +21,7 @@ export declare class Rect implements IRect {
     height(): number;
     valid(): boolean;
     makeValid(): Rect;
-    isEqual(r: Rect): boolean;
+    isEqual(r?: Rect): boolean;
     static add(a: Rect, b: Rect): Rect;
     static multiply(a: Rect, b: Rect): Rect;
     static margin(r: Rect, m?: RectMargin): Rect;

package/build/ui/ContentResolver.d.ts

@@ -1,6 +1,6 @@
 import { PureContainerBase, PureContainerConfig } from "./PureContainer";
 import { RenderingContext } from "./RenderingContext";
-import { BooleanProp, StructuredProp, ResolveStructuredProp } from "./Prop";
+import { BooleanProp, StructuredProp, ResolvePropType } from "./Prop";
 import { Instance } from "./Instance";
 /**
  * Configuration for ContentResolver widget.
@@ -9,9 +9,11 @@ import { Instance } from "./Instance";
  * - Literal values (numbers, strings, booleans) preserve their types
  * - AccessorChain<T> resolves to T
  * - Bind/Tpl/Expr resolve to any (type cannot be determined at compile time)
+ * - Structured props (objects) have each property resolved individually
  *
  * @example
  * ```typescript
+ * // Structured params (object)
  * <ContentResolver
  *    params={{
  *       count: 42,           // number
@@ -21,26 +23,34 @@ import { Instance } from "./Instance";
  *       // params.count is number, params.name is string
  *    }}
  * />
+ *
+ * // Simple param (single value)
+ * <ContentResolver
+ *    params={model.user.name}  // AccessorChain<string>
+ *    onResolve={(name) => {
+ *       // name is string
+ *    }}
+ * />
  * ```
  */
-export interface ContentResolverConfig<P extends StructuredProp = StructuredProp> extends PureContainerConfig {
-    /** Parameters that trigger content resolution when changed. */
+export interface ContentResolverConfig<P = StructuredProp> extends PureContainerConfig {
+    /** Parameters that trigger content resolution when changed. Can be a structured object or a single Prop. */
     params?: P;
     /**
      * Callback function that resolves content based on params. Can return content directly or a Promise.
      * The params type is inferred from the params property - literal values and AccessorChain<T>
      * preserve their types, while bindings (bind/tpl/expr) resolve to `any`.
      */
-    onResolve?: string | ((params: ResolveStructuredProp<P>, instance: Instance) => any);
+    onResolve?: string | ((params: ResolvePropType<P>, instance: Instance) => any);
     /** How to combine resolved content with initial content. Default is 'replace'. */
     mode?: "replace" | "prepend" | "append";
     /** Indicates if content is being loaded. */
     loading?: BooleanProp;
 }
-export declare class ContentResolver<P extends StructuredProp = StructuredProp> extends PureContainerBase<ContentResolverConfig<P>> {
+export declare class ContentResolver<P = StructuredProp> extends PureContainerBase<ContentResolverConfig<P>> {
     constructor(config?: ContentResolverConfig<P>);
     mode: "replace" | "prepend" | "append";
-    onResolve?: string | ((params: ResolveStructuredProp<P>, instance: Instance) => any);
+    onResolve?: string | ((params: ResolvePropType<P>, instance: Instance) => any);
     initialItems: any;
     declareData(...args: any[]): void;
     init(): void;

package/build/ui/Controller.d.ts

@@ -4,6 +4,7 @@ import { RenderingContext } from "./RenderingContext";
 import { View, ViewMethods } from "../data/View";
 import { Widget } from "./Widget";
 import { Instance } from "./Instance";
+import { AccessorChain } from "../data/createAccessorModelProxy";
 interface ComputableEntry {
     name: string;
     selector: any;
@@ -17,6 +18,9 @@ export interface ControllerMethods {
     addTrigger<Selectors extends readonly ComputableSelector[]>(name: string, args: [...Selectors], callback: (...values: {
         [K in keyof Selectors]: InferSelectorValue<Selectors[K]>;
     }) => any, autoRun?: boolean): void;
+    addComputable<T, Selectors extends readonly ComputableSelector[]>(name: AccessorChain<T>, args: [...Selectors], callback: (...values: {
+        [K in keyof Selectors]: InferSelectorValue<Selectors[K]>;
+    }) => T): void;
     addComputable<Selectors extends readonly ComputableSelector[]>(name: string, args: [...Selectors], callback: (...values: {
         [K in keyof Selectors]: InferSelectorValue<Selectors[K]>;
     }) => any): void;
@@ -50,6 +54,9 @@ export declare class Controller<D = any> extends Component implements Controller
     explore(context: RenderingContext): void;
     prepare(context: RenderingContext): void;
     cleanup(context: RenderingContext): void;
+    addComputable<T, Selectors extends readonly ComputableSelector[]>(name: AccessorChain<T>, args: [...Selectors], callback: (...values: {
+        [K in keyof Selectors]: InferSelectorValue<Selectors[K]>;
+    }) => T): void;
     addComputable<Selectors extends readonly ComputableSelector[]>(name: string, args: [...Selectors], callback: (...values: {
         [K in keyof Selectors]: InferSelectorValue<Selectors[K]>;
     }) => any): void;

package/build/ui/Controller.js

@@ -54,7 +54,8 @@ export class Controller extends Component {
         let selector = computable(...args, callback).memoize();
         if (!this.computables)
             this.computables = {};
-        this.computables[computablePrefix + name] = { name, selector, type: "computable" };
+        let nameStr = String(name);
+        this.computables[computablePrefix + nameStr] = { name: nameStr, selector, type: "computable" };
     }
     addTrigger(name, args, callback, autoRun) {
         if (!isArray(args))

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

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