Type improvements

mstijak · mstijak · commit 19c1c1a3bea4 · 2025-12-15T11:40:12.000+01:00
diff --git a/packages/cx/src/ui/ContentResolver.spec.tsx b/packages/cx/src/ui/ContentResolver.spec.tsx
@@ -4,6 +4,7 @@ import { createTestRenderer } from "../util/test/createTestRenderer";
 import assert from "assert";
 import { bind } from "./bind";
 import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+import { Prop } from "./Prop";
 
 interface TestModel {
    user: {
@@ -427,4 +428,133 @@ describe("ContentResolver", () => {
          ],
       });
    });
+
+   it("supports simple Prop params (non-structured)", () => {
+      const model = createAccessorModelProxy<TestModel>();
+
+      // Test using a single AccessorChain as params instead of an object
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={model.user.name}
+                  onResolve={(name) => {
+                     // name should be typed as string (from AccessorChain<string>)
+                     const typedName: string = name;
+                     return <span text={`Hello, ${typedName}!`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            user: {
+               name: "Alice",
+               age: 25,
+               active: true,
+            },
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Hello, Alice!"],
+            },
+         ],
+      });
+   });
+
+   it("supports simple bind() as params", () => {
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={bind("count")}
+                  onResolve={(count) => {
+                     return <span text={`Count: ${count}`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            count: 42,
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Count: 42"],
+            },
+         ],
+      });
+   });
+
+   it("resolves Prop<string> to string (not any)", () => {
+      const model = createAccessorModelProxy<TestModel>();
+
+      // When params is typed as Prop<string>, onResolve should receive string (not any)
+      // This tests that the union type Prop<T> correctly extracts T
+      const typedParam: Prop<string> = model.user.name;
+
+      let widget = (
+         <cx>
+            <div>
+               <ContentResolver
+                  params={typedParam}
+                  onResolve={(name) => {
+                     // name should be typed as string, not any
+                     const typedName: string = name;
+                     return <span text={`Hello, ${typedName}!`} />;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            user: {
+               name: "Bob",
+               age: 35,
+               active: false,
+            },
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Hello, Bob!"],
+            },
+         ],
+      });
+   });
 });
diff --git a/packages/cx/src/ui/ContentResolver.ts b/packages/cx/src/ui/ContentResolver.ts
@@ -1,19 +1,62 @@
 import { PureContainerBase, PureContainerConfig } from "./PureContainer";
 import { isPromise } from "../util/isPromise";
 import { RenderingContext } from "./RenderingContext";
-import { BooleanProp, StructuredProp, ResolveStructuredProp } from "./Prop";
+import { BooleanProp, StructuredProp, ResolveStructuredProp, Bind, Tpl, Expr, GetSet } from "./Prop";
+import { Selector } from "../data/Selector";
+import { AccessorChain } from "../data/createAccessorModelProxy";
 import { Instance } from "./Instance";
 
+/**
+ * Helper type that extracts the value type from typed props (Selector, AccessorChain, GetSet).
+ * Returns never for bindings (Bind, Tpl, Expr) since they don't carry type information.
+ * This is used to properly resolve Prop<T> unions where we want to extract T.
+ */
+type ExtractTypedPropValue<P> = P extends Selector<infer T>
+   ? T
+   : P extends AccessorChain<infer T>
+     ? T
+     : P extends GetSet<infer T>
+       ? T
+       : P extends Bind
+         ? never
+         : P extends Tpl
+           ? never
+           : P extends Expr
+             ? never
+             : P extends Record<string, any>
+               ? never
+               : P;
+
+/**
+ * Utility type that resolves params which can be either a simple Prop<T> or a StructuredProp.
+ * - For Prop<T> unions (including Selector, AccessorChain, GetSet, bindings), extracts T
+ * - For plain bindings (Bind, Expr) used directly, resolves to any
+ * - For structured props (objects), applies ResolveStructuredProp to resolve each property
+ */
+type ResolveParams<P> = ExtractTypedPropValue<P> extends never
+   ? P extends Bind
+      ? any
+      : P extends Tpl
+        ? string
+        : P extends Expr
+          ? any
+          : P extends Record<string, any>
+            ? ResolveStructuredProp<P>
+            : P
+   : ExtractTypedPropValue<P>;
+
 /**
  * Configuration for ContentResolver widget.
  *
  * The params type parameter enables type inference for the onResolve callback:
  * - 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
@@ -23,18 +66,26 @@ 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: ResolveParams<P>, instance: Instance) => any);
 
    /** How to combine resolved content with initial content. Default is 'replace'. */
    mode?: "replace" | "prepend" | "append";
@@ -43,15 +94,13 @@ export interface ContentResolverConfig<P extends StructuredProp = StructuredProp
    loading?: BooleanProp;
 }
 
-export class ContentResolver<P extends StructuredProp = StructuredProp> extends PureContainerBase<
-   ContentResolverConfig<P>
-> {
+export class ContentResolver<P = StructuredProp> extends PureContainerBase<ContentResolverConfig<P>> {
    constructor(config?: ContentResolverConfig<P>) {
       super(config);
    }
 
    declare mode: "replace" | "prepend" | "append";
-   declare onResolve?: string | ((params: ResolveStructuredProp<P>, instance: Instance) => any);
+   declare onResolve?: string | ((params: ResolveParams<P>, instance: Instance) => any);
    declare initialItems: any;
 
    declareData(...args: any[]): void {
diff --git a/packages/cx/src/ui/Text.ts b/packages/cx/src/ui/Text.ts
@@ -1,11 +1,30 @@
-import { Widget } from './Widget';
+import { Widget, WidgetConfig } from './Widget';
+import { StringProp } from './Prop';
 
-export class Text extends Widget {
+export interface TextConfig extends WidgetConfig {
+   /** The value to be rendered as text. */
+   value?: StringProp;
+
+   /** Template string for the text value. */
+   tpl?: string;
+
+   /** Expression for the text value. */
+   expr?: string;
+
+   /** Binding path for the text value. */
+   bind?: string;
+}
+
+export class Text extends Widget<TextConfig> {
    declare value?: any;
    declare tpl?: string;
    declare expr?: any;
    declare bind?: string;
 
+   constructor(config?: TextConfig) {
+      super(config);
+   }
+
    init() {
       if (!this.value && (this.tpl || this.expr || this.bind))
          this.value = {
diff --git a/packages/cx/src/widgets/Icon.ts b/packages/cx/src/widgets/Icon.ts
@@ -1,4 +1,4 @@
-import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { Widget, VDOM, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
 import {
    registerIcon,
    registerIconFactory,
@@ -10,25 +10,11 @@ import {
 import "./icons/index";
 import { RenderingContext } from "../ui/RenderingContext";
 import { Instance } from "../ui/Instance";
-import { StringProp, ClassProp, StyleProp } from "../ui/Prop";
+import { StringProp } from "../ui/Prop";
 
-export interface IconConfig extends WidgetConfig {
+export interface IconConfig extends WidgetConfig, WidgetStyleConfig {
    /** Name under which the icon is registered. */
    name?: StringProp;
-
-   /** Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list. */
-   className?: ClassProp;
-
-   /** Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list. */
-   class?: ClassProp;
-
-   /** Style object applied to the wrapper div. Used for setting the dimensions of the field. */
-   style?: StyleProp;
-
-   /** Base CSS class to be applied to the element. Default is `icon`. */
-   baseClass?: string;
 }
 
 export class Icon extends Widget<IconConfig> {
