cx 26.0.11 → 26.0.13

package/src/data/test-types.ts

@@ -1,7 +1,7 @@
-import { AccessorChain } from "./createAccessorModelProxy";
-
-// Test what AccessorChain<string[]> looks like
-type Test1 = AccessorChain<string[]>;
-type Test2 = AccessorChain<string[]>["length"];
-
-// The issue: does AccessorChain properly map array properties?
+import { AccessorChain } from "./createAccessorModelProxy";
+
+// Test what AccessorChain<string[]> looks like
+type Test1 = AccessorChain<string[]>;
+type Test2 = AccessorChain<string[]>["length"];
+
+// The issue: does AccessorChain properly map array properties?

package/src/hooks/resolveCallback.spec.tsx

@@ -8,7 +8,7 @@ describe("resolveCallback", () => {
    it("works with functions", () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: (value: string) => void }) => {
          let callback = resolveCallback(onTest);
-         assert(typeof callback === 'function');
+         assert(typeof callback === "function");
          callback("works");
          return (
             <cx>
@@ -19,7 +19,16 @@ describe("resolveCallback", () => {
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(store, <cx><FComp onTest={(v: string) => { value = v }} /></cx>);
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <FComp
+               onTest={(v: string) => {
+                  value = v;
+               }}
+            />
+         </cx>,
+      );
 
       component.toJSON();
       assert.equal(value, "works");
@@ -28,19 +37,33 @@ describe("resolveCallback", () => {
    it("works with controller methods", () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: string | ((value: string) => void) }) => {
          let callback = resolveCallback(onTest);
-         assert(typeof callback === 'function');
+         assert(typeof callback === "function");
          return (
             <cx>
-               <div onInit={() => { callback("works"); }} />
+               <div
+                  onInit={() => {
+                     callback("works");
+                  }}
+               />
             </cx>
          );
       });
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(store, <cx><FComp onTest="onTest" controller={{
-         onTest(v: string) { value = v }
-      }} /></cx>);
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <FComp
+               onTest="onTest"
+               controller={{
+                  onTest(v: string) {
+                     value = v;
+                  },
+               }}
+            />
+         </cx>,
+      );
 
       component.toJSON();
       assert.equal(value, "works");

package/src/hooks/useTrigger.ts

@@ -1,26 +1,26 @@
-import { getCurrentInstance } from "../ui/createFunctionalComponent";
-import { isArray } from "../util/isArray";
-import { computable, ComputableSelector } from "../data/computable";
-import { useStore } from "./store";
-
-export function addExploreCallback(callback: (...args: any[]) => any): () => void {
-   let instance = getCurrentInstance();
-   if (!instance.computables) instance.computables = [];
-   instance.computables.push(callback);
-   return () => {
-      if (instance.computables) {
-         instance.computables = instance.computables.filter((cb: unknown) => cb !== callback);
-      }
-   };
-}
-
-export function useTrigger(
-   args: ComputableSelector[],
-   callback: (...args: any[]) => void,
-   autoRun?: boolean,
-): () => void {
-   if (!isArray(args)) throw new Error("First argument to useTrigger should be an array.");
-   let store = useStore();
-   let selector = computable(...args, callback).memoize(!autoRun && store.getData());
-   return addExploreCallback(selector);
-}
+import { getCurrentInstance } from "../ui/createFunctionalComponent";
+import { isArray } from "../util/isArray";
+import { computable, ComputableSelector } from "../data/computable";
+import { useStore } from "./store";
+
+export function addExploreCallback(callback: (...args: any[]) => any): () => void {
+   let instance = getCurrentInstance();
+   if (!instance.computables) instance.computables = [];
+   instance.computables.push(callback);
+   return () => {
+      if (instance.computables) {
+         instance.computables = instance.computables.filter((cb: unknown) => cb !== callback);
+      }
+   };
+}
+
+export function useTrigger(
+   args: ComputableSelector[],
+   callback: (...args: any[]) => void,
+   autoRun?: boolean,
+): () => void {
+   if (!isArray(args)) throw new Error("First argument to useTrigger should be an array.");
+   let store = useStore();
+   let selector = computable(...args, callback).memoize(!autoRun && store.getData());
+   return addExploreCallback(selector);
+}

package/src/index.scss

@@ -1,6 +1,6 @@
-@import "global";
-@import "util/index";
-@import "ui/index";
-@import "widgets/index";
-@import "svg/index";
-@import "charts/index";
+@import "global";
+@import "util/index";
+@import "ui/index";
+@import "widgets/index";
+@import "svg/index";
+@import "charts/index";

package/src/jsx-dev-runtime.ts

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "./jsx-runtime";
-
-export const jsxDEV = jsx;
-export const jsxsDEV = jsxs;
+import { jsx, jsxs } from "./jsx-runtime";
+
+export const jsxDEV = jsx;
+export const jsxsDEV = jsxs;

package/src/jsx-runtime.spec.tsx

@@ -0,0 +1,402 @@
+import assert from "assert";
+import { TextField } from "./widgets/form/TextField";
+import { NumberField } from "./widgets/form/NumberField";
+import { Button } from "./widgets/Button";
+import { Checkbox } from "./widgets/form/Checkbox";
+import { bind } from "./ui/bind";
+import { expr } from "./ui/expr";
+import { createFunctionalComponent } from "./ui/createFunctionalComponent";
+
+/**
+ * These tests verify that widget props are correctly typed in JSX.
+ * Negative tests use @ts-expect-error to verify that incorrect types are rejected.
+ */
+
+describe("jsx-runtime type inference", () => {
+   describe("TextField", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <TextField
+                  value={bind("text")}
+                  placeholder="Enter text"
+                  disabled={false}
+                  readOnly={true}
+                  required={false}
+                  minLength={5}
+                  maxLength={100}
+               />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts binding for string props", () => {
+         const widget = (
+            <cx>
+               <TextField placeholder={bind("placeholder")} validationErrorText={bind("errorText")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts expressions for boolean props", () => {
+         const widget = (
+            <cx>
+               <TextField disabled={expr("{loading}")} readOnly={expr("{!editable}")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for placeholder (expects string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - placeholder should be StringProp, not a number */}
+               <TextField placeholder={123} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for minLength (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - minLength should be NumberProp, not a string */}
+               <TextField minLength="five" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for maxLength (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - maxLength should be NumberProp, not a string */}
+               <TextField maxLength="100" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for disabled (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - disabled should be BooleanProp, not a number */}
+               <TextField disabled={1} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for readOnly (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - readOnly should be BooleanProp, not a string */}
+               <TextField readOnly="true" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects non-existent properties", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - nonExistentProp does not exist on TextFieldConfig */}
+               <TextField nonExistentProp="value" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("NumberField", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <NumberField
+                  value={bind("amount")}
+                  placeholder="Enter amount"
+                  minValue={0}
+                  maxValue={1000}
+                  format="currency"
+                  disabled={false}
+               />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts bindings for number props", () => {
+         const widget = (
+            <cx>
+               <NumberField minValue={bind("minVal")} maxValue={bind("maxVal")} increment={bind("step")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for value (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - value should be NumberProp, not a literal string */}
+               <NumberField value="100" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for minValue (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - minValue should be NumberProp, not a string */}
+               <NumberField minValue="zero" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for maxValue (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - maxValue should be NumberProp, not a string */}
+               <NumberField maxValue="one thousand" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects boolean for increment (expects number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - increment should be NumberProp, not a boolean */}
+               <NumberField increment={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for format (expects string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - format should be StringProp, not a number */}
+               <NumberField format={123} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("Button", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <Button text="Click me" disabled={false} pressed={true} icon="search" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts bindings for boolean props", () => {
+         const widget = (
+            <cx>
+               <Button disabled={bind("isLoading")} pressed={bind("isPressed")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts expressions for enabled prop", () => {
+         const widget = (
+            <cx>
+               <Button enabled={expr("!{isLoading}")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for disabled (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - disabled should be BooleanProp, not a string */}
+               <Button disabled="true" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for pressed (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - pressed should be BooleanProp, not a number */}
+               <Button pressed={1} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for icon (expects string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - icon should be StringProp, not a number */}
+               <Button icon={42} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects invalid type value", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - type should be "submit" | "button", not "reset" */}
+               <Button type="reset" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("Checkbox", () => {
+      it("accepts correct prop types", () => {
+         const widget = (
+            <cx>
+               <Checkbox value={bind("checked")} text="Accept terms" disabled={false} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for value (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - value should be BooleanProp, not a string */}
+               <Checkbox value="checked" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects number for disabled (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - disabled should be BooleanProp, not a number */}
+               <Checkbox disabled={0} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("HtmlElement intrinsic elements", () => {
+      it("accepts correct prop types for div", () => {
+         const widget = (
+            <cx>
+               <div text="Hello" visible={true} class="container" style="padding: 10px" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts bindings for text prop", () => {
+         const widget = (
+            <cx>
+               <div text={bind("message")} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts expressions for visible prop", () => {
+         const widget = (
+            <cx>
+               <div visible={expr("{showDiv}")} text="Conditional" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects boolean for text (expects string or number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - text should be StringProp | NumberProp, not a boolean */}
+               <div text={false} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects string for visible (expects boolean)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - visible should be BooleanProp, not a string */}
+               <div visible="true" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+
+   describe("Required props", () => {
+      interface RequiredPropsConfig {
+         title: string;
+         count: number;
+         optional?: boolean;
+      }
+
+      const ComponentWithRequiredProps = createFunctionalComponent<RequiredPropsConfig>(({ title, count, optional }) => (
+         <cx>
+            <div text={title} />
+            <div text={String(count)} />
+            {optional && <div text="optional shown" />}
+         </cx>
+      ));
+
+      it("accepts all required props provided", () => {
+         const widget = (
+            <cx>
+               <ComponentWithRequiredProps title="Hello" count={42} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts required props with optional prop", () => {
+         const widget = (
+            <cx>
+               <ComponentWithRequiredProps title="Hello" count={42} optional={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (title)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - title is required but missing */}
+               <ComponentWithRequiredProps count={42} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (count)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - count is required but missing */}
+               <ComponentWithRequiredProps title="Hello" />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing all required props", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - title and count are required but missing */}
+               <ComponentWithRequiredProps optional={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+});

package/src/jsx-runtime.ts

@@ -1,11 +1,10 @@
-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 { isArray } from "./util/isArray";
 import { isString } from "./util/isString";
 import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
-import { ChildNode } from "./ui/Container";
+import { ReactElementWrapper, ReactElementWrapperConfig } from "./widgets/ReactElementWrapper";
 
 export function jsx(typeName: any, props: any, key?: string): any {
    if (isArray(typeName)) return typeName;
@@ -25,6 +24,11 @@ export function jsx(typeName: any, props: any, key?: string): any {
       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,
@@ -36,28 +40,22 @@ export function jsx(typeName: any, props: any, key?: string): any {
 export const jsxs = jsx;
 
 type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
-// Check if a key is an event handler (starts with "on" and is a function)
-type IsEventHandler<K, T> = K extends `on${string}` ? (T extends Function ? true : false) : false;
-
-// CxJS event handler type - can be string (controller method) or callback with Instance
-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>;
 };
 
+// Helper type to transform props for React components (but not CxJS functional components)
+// Uses a workaround to avoid TypeScript inference issues with conditional types in LibraryManagedAttributes
+// We use Omit to exclude componentType since it's added automatically by the jsx-runtime
+type TransformReactComponentProps<C, P> = [C] extends [CxFunctionalComponent<any>]
+   ? P // CxJS functional components already have proper types
+   : [C] extends [FunctionComponent<any>]
+     ? ReactElementWrapperConfig<P>
+     : [C] extends [ComponentClass<any>]
+       ? ReactElementWrapperConfig<P>
+       : P;
+
 export namespace JSX {
    /**
     * Base class for JSX element instances.
@@ -72,4 +70,10 @@ export namespace JSX {
    export 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>.
+    */
+   export type LibraryManagedAttributes<C, P> = TransformReactComponentProps<C, P>;
 }