cx 26.0.11 → 26.0.13

package/src/data/computable.spec.ts

@@ -1,62 +1,87 @@
-import { computable } from "./computable";
-import assert from "assert";
-import { createAccessorModelProxy } from "./createAccessorModelProxy";
-
-describe("computable", function () {
-   it("creates a selector", function () {
-      let state = { person: { name: "Joe" } };
-      let nameLength = computable("person.name", (name: string) => name.length);
-      assert.equal(nameLength(state), 3);
-   });
-
-   it("fires every time if not memoized", function () {
-      let state = { person: { name: "Joe" } };
-      let fired = 0;
-      let nameLength = computable("person.name", (name: string) => {
-         fired++;
-         return name.length;
-      });
-      assert.equal(nameLength(state), 3);
-      assert.equal(nameLength(state), 3);
-      assert.equal(fired, 2);
-   });
-
-   it("fires once if memoized and data has not changed", function () {
-      let state = { person: { name: "Joe" } };
-      let fired = 0;
-      let nameLength = computable("person.name", (name: string) => {
-         fired++;
-         return name.length;
-      }).memoize();
-      assert.equal(nameLength(state), 3);
-      assert.equal(nameLength(state), 3);
-      assert.equal(fired, 1);
-   });
-
-   //weird but that's how triggers work and
-   it("memoize with warmup data will not call compute", function () {
-      let state = { person: { name: "Joe" } };
-      let fired = 0;
-      let nameLength = computable("person.name", (name: string) => {
-         fired++;
-         return name.length;
-      }).memoize(state);
-      assert.equal(nameLength(state), undefined);
-      assert.equal(nameLength(state), undefined);
-      assert.equal(fired, 0);
-   });
-
-   it("works with accessors", function () {
-      var m = createAccessorModelProxy<{ person: { name: string } }>();
-      let state = { person: { name: "Joe" } };
-      let nameLength = computable(m.person.name, (name) => name.length);
-      assert.equal(nameLength(state), 3);
-   });
-
-   it("works with array length accessor", function () {
-      var m = createAccessorModelProxy<{ items: string[] }>();
-      let state = { items: ["a", "b", "c"] };
-      let itemCount = computable(m.items.length, (length) => length);
-      assert.equal(itemCount(state), 3);
-   });
-});
+import { computable } from "./computable";
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+
+describe("computable", function () {
+   it("creates a selector", function () {
+      let state = { person: { name: "Joe" } };
+      let nameLength = computable("person.name", (name: string) => name.length);
+      assert.equal(nameLength(state), 3);
+   });
+
+   it("fires every time if not memoized", function () {
+      let state = { person: { name: "Joe" } };
+      let fired = 0;
+      let nameLength = computable("person.name", (name: string) => {
+         fired++;
+         return name.length;
+      });
+      assert.equal(nameLength(state), 3);
+      assert.equal(nameLength(state), 3);
+      assert.equal(fired, 2);
+   });
+
+   it("fires once if memoized and data has not changed", function () {
+      let state = { person: { name: "Joe" } };
+      let fired = 0;
+      let nameLength = computable("person.name", (name: string) => {
+         fired++;
+         return name.length;
+      }).memoize();
+      assert.equal(nameLength(state), 3);
+      assert.equal(nameLength(state), 3);
+      assert.equal(fired, 1);
+   });
+
+   //weird but that's how triggers work and
+   it("memoize with warmup data will not call compute", function () {
+      let state = { person: { name: "Joe" } };
+      let fired = 0;
+      let nameLength = computable("person.name", (name: string) => {
+         fired++;
+         return name.length;
+      }).memoize(state);
+      assert.equal(nameLength(state), undefined);
+      assert.equal(nameLength(state), undefined);
+      assert.equal(fired, 0);
+   });
+
+   it("works with accessors", function () {
+      var m = createAccessorModelProxy<{ person: { name: string } }>();
+      let state = { person: { name: "Joe" } };
+      let nameLength = computable(m.person.name, (name) => {
+         // name should be inferred as string
+         const typedName: string = name;
+         // @ts-expect-error - name should not be number
+         const wrongType: number = name;
+         return typedName.length;
+      });
+      assert.equal(nameLength(state), 3);
+   });
+
+   it("works with array length accessor", function () {
+      var m = createAccessorModelProxy<{ items: string[] }>();
+      let state = { items: ["a", "b", "c"] };
+      let itemCount = computable(m.items.length, (length) => {
+         // length should be inferred as number
+         const typedLength: number = length;
+         // @ts-expect-error - length should not be string
+         const wrongType: string = length;
+         return typedLength;
+      });
+      assert.equal(itemCount(state), 3);
+   });
+
+   it("resolves AccessorChain<any> and nested properties to any", function () {
+      var m = createAccessorModelProxy<{ data: any }>();
+      let state = { data: { nested: { value: 42 } } };
+      let result = computable(m.data.nested.value, (value) => {
+         // value should be any, so all assignments should work
+         const asString: string = value;
+         const asNumber: number = value;
+         const asBoolean: boolean = value;
+         return value;
+      });
+      assert.equal(result(state), 42);
+   });
+});

package/src/data/computable.ts

@@ -11,12 +11,9 @@ export type ComputableSelector<T = any> = string | Selector<T> | AccessorChain<T
 export type InferSelectorValue<T> =
    T extends Selector<infer R> ? R : T extends AccessorChain<infer R> ? R : T extends string ? any : never;
 
-// Generic overload - handles all cases with proper type inference
-export function computable<Selectors extends readonly any[], R>(
-   ...args: [
-      ...selectors: ComputableSelector[],
-      compute: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => R,
-   ]
+// Generic function with proper type inference for selectors
+export function computable<T extends ComputableSelector[], R>(
+   ...args: [...T, (...values: { [K in keyof T]: InferSelectorValue<T[K]> }) => R]
 ): MemoSelector<R>;
 
 export function computable(...selectorsAndCompute: any[]): MemoSelector {

package/src/data/createAccessorModelProxy.spec.tsx

@@ -1,4 +1,6 @@
-import { createAccessorModelProxy } from "./createAccessorModelProxy";
+import { createAccessorModelProxy, AccessorChain } from "./createAccessorModelProxy";
+import { Prop, ResolvePropType } from "../ui/Prop";
+import { Widget, WidgetConfig } from "../ui/Widget";
 import assert from "assert";
 
 interface Model {
@@ -8,6 +10,13 @@ interface Model {
       streetNumber: number;
    };
    "@crazy": string;
+   users: User[];
+}
+
+interface User {
+   id: number;
+   name: string;
+   email: string;
 }
 
 describe("createAccessorModelProxy", () => {
@@ -41,4 +50,96 @@ describe("createAccessorModelProxy", () => {
       let model = createAccessorModelProxy<Model>();
       assert.strictEqual(model["@crazy"].nameOf(), "@crazy");
    });
+
+   it("AccessorChain<any> allows access to any property", () => {
+      // When using an untyped model (any), all property access should be allowed
+      let model = createAccessorModelProxy<any>();
+
+      // These should all be valid - no TypeScript errors
+      assert.strictEqual(model.foo.toString(), "foo");
+      assert.strictEqual(model.bar.baz.toString(), "bar.baz");
+      assert.strictEqual(model.deeply.nested.property.toString(), "deeply.nested.property");
+      assert.strictEqual(model.anyName.anyChild.anyGrandchild.toString(), "anyName.anyChild.anyGrandchild");
+   });
+
+   it("ResolvePropType extracts correct types from AccessorChain", () => {
+      let model = createAccessorModelProxy<Model>();
+
+      // ResolvePropType should extract the inner type from AccessorChain
+      type ResolvedString = ResolvePropType<typeof model.firstName>;
+      type ResolvedNumber = ResolvePropType<typeof model.address.streetNumber>;
+      type ResolvedUsers = ResolvePropType<typeof model.users>;
+
+      // These assignments verify the types are correctly inferred
+      // If types are wrong, TypeScript will error
+      const str: ResolvedString = "test";
+      const num: ResolvedNumber = 42;
+      const users: ResolvedUsers = [{ id: 1, name: "John", email: "john@example.com" }];
+
+      // Verify array element type is preserved
+      type UserArray = ResolvePropType<AccessorChain<User[]>>;
+      const userArray: UserArray = [{ id: 1, name: "Test", email: "test@test.com" }];
+
+      // Runtime assertion to make the test meaningful
+      assert.ok(true);
+   });
+
+   it("generic widget infers type from AccessorChain in JSX", () => {
+      let model = createAccessorModelProxy<Model>();
+
+      // Simulates a generic widget config like LookupFieldConfig<TOption>
+      interface GenericWidgetConfig<T = unknown> extends WidgetConfig {
+         items?: AccessorChain<T[]>;
+         onProcess?: (item: T) => void;
+      }
+
+      // Simulates a CxJS widget class
+      class GenericWidget<T = unknown> extends Widget<GenericWidgetConfig<T>> {}
+
+      // T should be inferred as User from model.users (AccessorChain<User[]>)
+      let widget = (
+         <cx>
+            <GenericWidget
+               items={model.users}
+               onProcess={(user) => {
+                  // user should be typed as User
+                  const id: number = user.id;
+                  const name: string = user.name;
+                  const email: string = user.email;
+               }}
+            />
+         </cx>
+      );
+
+      assert.ok(true);
+   });
+
+   it("generic widget infers type from Prop<T[]> in JSX", () => {
+      let model = createAccessorModelProxy<Model>();
+
+      // Uses Prop<T[]> like LookupFieldConfig does
+      interface GenericWidgetConfig<T = unknown> extends WidgetConfig {
+         items?: Prop<T[]>;
+         onProcess?: (item: T) => void;
+      }
+
+      class GenericWidget<T = unknown> extends Widget<GenericWidgetConfig<T>> {}
+
+      // T should be inferred as User from model.users (AccessorChain<User[]>)
+      let widget = (
+         <cx>
+            <GenericWidget
+               items={model.users}
+               onProcess={(user) => {
+                  // user should be typed as User
+                  const id: number = user.id;
+                  const name: string = user.name;
+                  const email: string = user.email;
+               }}
+            />
+         </cx>
+      );
+
+      assert.ok(true);
+   });
 });

package/src/data/createAccessorModelProxy.ts

@@ -8,12 +8,18 @@ type AccessorChainMap<M extends object> = {
    [prop in Exclude<keyof M, keyof AccessorChainMethods>]: AccessorChain<M[prop]>;
 };
 
+// Check if a type is `any` using the intersection trick
+type IsAny<T> = 0 extends 1 & T ? true : false;
+
 export type AccessorChain<M> = {
    toString(): string;
-   valueOf(): string;
+   valueOf(): M | undefined;
    nameOf(): string;
-   __accessorChainType?: M; // Type-only marker for inference
-} & (M extends object ? AccessorChainMap<M> : {});
+} & (IsAny<M> extends true
+   ? { [key: string]: any } // Allow any property access for `any` type
+   : M extends object
+     ? AccessorChainMap<M>
+     : {});
 
 const emptyFn = () => {};
 

package/src/data/createStructuredSelector.ts

@@ -1,62 +1,62 @@
-import { MemoSelector, Selector } from "./Selector";
-
-export interface StructuredSelectorConfig {
-   [prop: string]: Selector;
-}
-
-// Helper type to infer result type from selector config
-type InferStructuredSelectorResult<T extends StructuredSelectorConfig, C = {}> = {
-   [K in keyof T]: T[K] extends Selector<infer R> ? R : any;
-} & C;
-
-export function createStructuredSelector<S extends StructuredSelectorConfig, C extends Record<string, any> = {}>(
-   selector: S,
-   constants?: C,
-): MemoSelector<InferStructuredSelectorResult<S, C>> {
-   let keys = Object.keys(selector);
-   constants = constants ?? ({} as C);
-   if (keys.length == 0) {
-      let result: Selector = () => constants;
-      result.memoize = () => result;
-      return result as MemoSelector<InferStructuredSelectorResult<S, C>>;
-   }
-
-   function memoize() {
-      let lastResult: Record<string, any> = Object.assign({}, constants);
-
-      let memoizedSelectors: Record<string, Selector> = {};
-
-      keys.forEach((key) => {
-         memoizedSelectors[key] = selector[key].memoize ? selector[key].memoize() : selector[key];
-         lastResult[key] = undefined;
-      });
-
-      return function (data: any) {
-         let result = lastResult,
-            k,
-            v,
-            i;
-         for (i = 0; i < keys.length; i++) {
-            k = keys[i];
-            v = memoizedSelectors[k](data);
-            if (result === lastResult) {
-               if (v === lastResult[k]) continue;
-               result = Object.assign({}, lastResult);
-            }
-            result[k] = v;
-         }
-         return (lastResult = result);
-      };
-   }
-
-   let result: Selector = function evaluate(data: any) {
-      let result: Record<string, any> = Object.assign({}, constants);
-      for (let i = 0; i < keys.length; i++) {
-         result[keys[i]] = selector[keys[i]](data);
-      }
-      return result;
-   };
-
-   result.memoize = memoize;
-   return result as MemoSelector<InferStructuredSelectorResult<S, C>>;
-}
+import { MemoSelector, Selector } from "./Selector";
+
+export interface StructuredSelectorConfig {
+   [prop: string]: Selector;
+}
+
+// Helper type to infer result type from selector config
+type InferStructuredSelectorResult<T extends StructuredSelectorConfig, C = {}> = {
+   [K in keyof T]: T[K] extends Selector<infer R> ? R : any;
+} & C;
+
+export function createStructuredSelector<S extends StructuredSelectorConfig, C extends Record<string, any> = {}>(
+   selector: S,
+   constants?: C,
+): MemoSelector<InferStructuredSelectorResult<S, C>> {
+   let keys = Object.keys(selector);
+   constants = constants ?? ({} as C);
+   if (keys.length == 0) {
+      let result: Selector = () => constants;
+      result.memoize = () => result;
+      return result as MemoSelector<InferStructuredSelectorResult<S, C>>;
+   }
+
+   function memoize() {
+      let lastResult: Record<string, any> = Object.assign({}, constants);
+
+      let memoizedSelectors: Record<string, Selector> = {};
+
+      keys.forEach((key) => {
+         memoizedSelectors[key] = selector[key].memoize ? selector[key].memoize() : selector[key];
+         lastResult[key] = undefined;
+      });
+
+      return function (data: any) {
+         let result = lastResult,
+            k,
+            v,
+            i;
+         for (i = 0; i < keys.length; i++) {
+            k = keys[i];
+            v = memoizedSelectors[k](data);
+            if (result === lastResult) {
+               if (v === lastResult[k]) continue;
+               result = Object.assign({}, lastResult);
+            }
+            result[k] = v;
+         }
+         return (lastResult = result);
+      };
+   }
+
+   let result: Selector = function evaluate(data: any) {
+      let result: Record<string, any> = Object.assign({}, constants);
+      for (let i = 0; i < keys.length; i++) {
+         result[keys[i]] = selector[keys[i]](data);
+      }
+      return result;
+   };
+
+   result.memoize = memoize;
+   return result as MemoSelector<InferStructuredSelectorResult<S, C>>;
+}

package/src/data/getAccessor.spec.ts

@@ -1,11 +1,11 @@
-import assert from "assert";
-import { createAccessorModelProxy } from "./createAccessorModelProxy";
-import { getAccessor } from "./getAccessor";
-
-describe("getAccessor", function () {
-   it("works with accessor chains", function () {
-      let m = createAccessorModelProxy<{ a: { b: any } }>();
-      let accessor = getAccessor(m.a.b);
-      assert(typeof accessor.set == "function");
-   });
-});
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
+import { getAccessor } from "./getAccessor";
+
+describe("getAccessor", function () {
+   it("works with accessor chains", function () {
+      let m = createAccessorModelProxy<{ a: { b: any } }>();
+      let accessor = getAccessor(m.a.b);
+      assert(typeof accessor.set == "function");
+   });
+});

package/src/data/getAccessor.ts

@@ -1,74 +1,74 @@
-import { Binding, isBinding } from "./Binding";
-import { isSelector } from "./isSelector";
-import { getSelector } from "./getSelector";
-import { isObject } from "../util/isObject";
-import { AccessorChain, isAccessorChain } from "./createAccessorModelProxy";
-import { Prop } from "../ui/Prop";
-import { View } from "./View";
-
-/*
-   Accessor provides a common ground between refs and bindings.
-   Refs offer simplicity, bindings have better performance with more arguments.
-   Accessor works as a common interface which works with both patterns.
- */
-
-export interface Accessor<T = any> {
-   get: (data: any) => T;
-   set?: (value: T, store: View) => boolean;
-   bindInstance?(instance: any): Accessor;
-   isAccessor?: boolean;
-   isRef?: boolean;
-}
-
-export function getAccessor<T = any>(accessor: Prop<T>): Accessor;
-export function getAccessor(accessor: Accessor): Accessor;
-
-export function getAccessor(accessor: any): Accessor | undefined {
-   if (accessor == null) return undefined;
-
-   if (isObject(accessor)) {
-      if ("isAccessor" in accessor || "isRef" in accessor) return accessor as Accessor;
-      if (isBinding(accessor)) {
-         let binding = Binding.get(accessor);
-         return {
-            get: binding.value,
-            set: (v, store) => store.set(binding.path, v),
-            isAccessor: true,
-         };
-      }
-   }
-
-   if (isAccessorChain(accessor)) {
-      let binding = Binding.get(accessor);
-      return {
-         get: binding.value,
-         set: (v, store) => store.set(binding.path, v),
-         isAccessor: true,
-      };
-   }
-
-   if (isSelector(accessor)) {
-      let selector = getSelector(accessor);
-      if (accessor && accessor.set)
-         return {
-            get: selector,
-            isAccessor: true,
-            bindInstance(instance) {
-               return {
-                  get: selector,
-                  set: (value) => accessor.set(value, instance),
-                  isAccessor: true,
-               };
-            },
-         };
-
-      return {
-         get: selector,
-         isAccessor: true,
-      };
-   }
-
-   return {
-      get: () => accessor,
-   };
-}
+import { Binding, isBinding } from "./Binding";
+import { isSelector } from "./isSelector";
+import { getSelector } from "./getSelector";
+import { isObject } from "../util/isObject";
+import { AccessorChain, isAccessorChain } from "./createAccessorModelProxy";
+import { Prop } from "../ui/Prop";
+import { View } from "./View";
+
+/*
+   Accessor provides a common ground between refs and bindings.
+   Refs offer simplicity, bindings have better performance with more arguments.
+   Accessor works as a common interface which works with both patterns.
+ */
+
+export interface Accessor<T = any> {
+   get: (data: any) => T;
+   set?: (value: T, store: View) => boolean;
+   bindInstance?(instance: any): Accessor;
+   isAccessor?: boolean;
+   isRef?: boolean;
+}
+
+export function getAccessor<T = any>(accessor: Prop<T>): Accessor;
+export function getAccessor(accessor: Accessor): Accessor;
+
+export function getAccessor(accessor: any): Accessor | undefined {
+   if (accessor == null) return undefined;
+
+   if (isObject(accessor)) {
+      if ("isAccessor" in accessor || "isRef" in accessor) return accessor as Accessor;
+      if (isBinding(accessor)) {
+         let binding = Binding.get(accessor);
+         return {
+            get: binding.value,
+            set: (v, store) => store.set(binding.path, v),
+            isAccessor: true,
+         };
+      }
+   }
+
+   if (isAccessorChain(accessor)) {
+      let binding = Binding.get(accessor);
+      return {
+         get: binding.value,
+         set: (v, store) => store.set(binding.path, v),
+         isAccessor: true,
+      };
+   }
+
+   if (isSelector(accessor)) {
+      let selector = getSelector(accessor);
+      if (accessor && accessor.set)
+         return {
+            get: selector,
+            isAccessor: true,
+            bindInstance(instance) {
+               return {
+                  get: selector,
+                  set: (value) => accessor.set(value, instance),
+                  isAccessor: true,
+               };
+            },
+         };
+
+      return {
+         get: selector,
+         isAccessor: true,
+      };
+   }
+
+   return {
+      get: () => accessor,
+   };
+}