cx 26.0.12 → 26.0.13

package/src/widgets/ReactElementWrapper.spec.tsx

@@ -0,0 +1,452 @@
+import { Store } from "../data/Store";
+import assert from "assert";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { VDOM } from "../ui/Widget";
+import { act } from "react-test-renderer";
+import {
+   ReactFunctionComponent,
+   ReactCounterComponent,
+   ReactClassComponent,
+   ReactPureComponent,
+   ReactRefEffectComponent,
+   ReactEffectStateComponent,
+   ReactPropsComponent,
+} from "./HtmlElement.spec.helpers";
+import { Controller } from "../ui/Controller";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+import { ReactElementWrapper } from "./ReactElementWrapper";
+
+describe("ReactElementWrapper", () => {
+   it("renders React components as tag", () => {
+      class MyReactComponent extends VDOM.Component<any> {
+         render() {
+            return VDOM.createElement("div", { className: "my-component" }, this.props.children);
+         }
+      }
+
+      let store = new Store();
+
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <MyReactComponent>
+               <span>Child content</span>
+            </MyReactComponent>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "my-component");
+      assert(tree.children && tree.children.length === 1, "Expected one child");
+   });
+
+   it("renders React function components with props", () => {
+      let store = new Store();
+
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <ReactFunctionComponent title="Test Title">
+               <span>Child content</span>
+            </ReactFunctionComponent>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "react-function-component");
+      assert(tree.children && tree.children.length === 2, "Expected two children (h3 and div)");
+
+      let h3 = tree.children[0] as any;
+      assert.equal(h3.type, "h3");
+      assert.deepEqual(h3.children, ["Test Title"]);
+
+      let contentDiv = tree.children[1] as any;
+      assert.equal(contentDiv.type, "div");
+      assert.equal(contentDiv.props.className, "content");
+   });
+
+   it("renders React function components with hooks", () => {
+      let store = new Store();
+
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <ReactCounterComponent initialCount={5} />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "react-counter");
+      assert(tree.children && tree.children.length === 2, "Expected two children (span and button)");
+
+      let span = tree.children[0] as any;
+      assert.equal(span.type, "span");
+      assert.equal(span.props.className, "count");
+      assert.deepEqual(span.children, ["5"]);
+
+      let button = tree.children[1] as any;
+      assert.equal(button.type, "button");
+   });
+
+   it("renders React class components with props", () => {
+      let store = new Store();
+
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <ReactClassComponent label="Test Label">
+               <span>Class child content</span>
+            </ReactClassComponent>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert(tree.props.className.includes("react-class-component"), "Expected react-class-component class");
+
+      assert(tree.children && tree.children.length === 2, "Expected two children (label and div)");
+
+      let label = tree.children[0] as any;
+      assert.equal(label.type, "label");
+      assert.deepEqual(label.children, ["Test Label"]);
+
+      let bodyDiv = tree.children[1] as any;
+      assert.equal(bodyDiv.type, "div");
+      assert.equal(bodyDiv.props.className, "body");
+   });
+
+   it("renders React PureComponent", () => {
+      let store = new Store();
+
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <ReactPureComponent value="Pure Value" />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "span");
+      assert.equal(tree.props.className, "react-pure-component");
+      assert.deepEqual(tree.children, ["Pure Value"]);
+   });
+
+   it("renders React function component with useRef and useEffect", () => {
+      let store = new Store();
+      let mountedElement: HTMLDivElement | null = null;
+
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <ReactRefEffectComponent
+               onMount={(el) => {
+                  mountedElement = el;
+               }}
+            />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "react-ref-effect-component");
+      assert.deepEqual(tree.children, ["Component with ref and effect"]);
+   });
+
+   it("renders React function component with useEffect that updates state", () => {
+      let store = new Store();
+      let component: ReturnType<typeof createTestRenderer>;
+
+      act(() => {
+         component = createTestRenderer(
+            store,
+            <cx>
+               <ReactEffectStateComponent value="Test" />
+            </cx>,
+         );
+      });
+
+      let tree = component!.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+      assert.equal(tree.props.className, "react-effect-state-component");
+      assert(tree.children && tree.children.length === 2, "Expected two children");
+
+      let processedSpan = tree.children[0] as any;
+      assert.equal(processedSpan.type, "span");
+      assert.equal(processedSpan.props.className, "processed");
+      // After act(), useEffect should have run and updated state
+      assert.deepEqual(processedSpan.children, ["Processed: Test"]);
+   });
+
+   it("translates CxJS accessor bindings to React component props", () => {
+      interface StoreModel {
+         text: string;
+         count: number;
+         enabled: boolean;
+         tags: string[];
+      }
+
+      let $store = createAccessorModelProxy<StoreModel>();
+
+      // First verify jsx transform output
+      const widget = (
+         <cx>
+            <ReactPropsComponent text={$store.text} count={$store.count} enabled={$store.enabled} tags={$store.tags} />
+         </cx>
+      );
+
+      assert.equal(widget.$type, ReactElementWrapper, "React component should use ReactElementWrapper as $type");
+      assert.equal(widget.componentType, ReactPropsComponent, "React component should be set as componentType");
+      assert.equal(typeof widget.text, "function", "Accessor chain text should be a function");
+      assert.equal(widget.text.toString(), "text", "Accessor chain text should resolve to path");
+
+      // Now verify rendering
+      let store = new Store<StoreModel>({
+         data: {
+            text: "Bound Text",
+            count: 42,
+            enabled: true,
+            tags: ["a", "b", "c"],
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(tree.type, "div");
+
+      let textSpan = tree.children![0] as any;
+      assert.deepEqual(textSpan.children, ["Bound Text"]);
+
+      let countSpan = tree.children![1] as any;
+      assert.deepEqual(countSpan.children, ["42"]);
+
+      let enabledSpan = tree.children![2] as any;
+      assert.deepEqual(enabledSpan.children, ["yes"]);
+
+      let tagsSpan = tree.children![3] as any;
+      assert.deepEqual(tagsSpan.children, ["a, b, c"]);
+   });
+
+   it("supports visible prop on React components", () => {
+      interface StoreModel {
+         show: boolean;
+      }
+
+      let $store = createAccessorModelProxy<StoreModel>();
+
+      let store = new Store<StoreModel>({
+         data: {
+            show: false,
+         },
+      });
+
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <div>
+               <ReactFunctionComponent title="Visible Test" visible={$store.show} />
+               <span>Always visible</span>
+            </div>
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      // When visible=false, the React component should not render
+      assert.equal(tree.children!.length, 1, "Expected only the span to be visible");
+      assert.equal((tree.children![0] as any).type, "span");
+
+      // Update store to make component visible
+      store.set("show", true);
+      let tree2 = component.toJSON();
+      assert(tree2 && !Array.isArray(tree2), "Expected single element");
+      assert.equal(tree2.children!.length, 2, "Expected both children to be visible");
+   });
+
+   it("supports controller prop on React components", () => {
+      let controllerInitialized = false;
+
+      class TestController extends Controller {
+         onInit() {
+            controllerInitialized = true;
+         }
+      }
+
+      interface StoreModel {
+         text: string;
+      }
+
+      let $store = createAccessorModelProxy<StoreModel>();
+
+      let store = new Store<StoreModel>({
+         data: {
+            text: "Controller Test",
+         },
+      });
+
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <ReactPropsComponent text={$store.text} count={10} enabled={true} controller={TestController} />
+         </cx>,
+      );
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.equal(controllerInitialized, true, "Controller should be initialized");
+
+      let textSpan = tree.children![0] as any;
+      assert.deepEqual(textSpan.children, ["Controller Test"]);
+   });
+
+   it("updates React component when bound store data changes", () => {
+      interface StoreModel {
+         text: string;
+         count: number;
+         enabled: boolean;
+      }
+
+      let $store = createAccessorModelProxy<StoreModel>();
+
+      let store = new Store<StoreModel>({
+         data: {
+            text: "Initial",
+            count: 1,
+            enabled: false,
+         },
+      });
+
+      const component = createTestRenderer(
+         store,
+         <cx>
+            <ReactPropsComponent text={$store.text} count={$store.count} enabled={$store.enabled} />
+         </cx>,
+      );
+
+      let tree1 = component.toJSON() as any;
+      assert.deepEqual(tree1.children[0].children, ["Initial"]);
+      assert.deepEqual(tree1.children[1].children, ["1"]);
+      assert.deepEqual(tree1.children[2].children, ["no"]);
+
+      // Update store
+      store.set("text", "Updated");
+      store.set("count", 99);
+      store.set("enabled", true);
+
+      let tree2 = component.toJSON() as any;
+      assert.deepEqual(tree2.children[0].children, ["Updated"]);
+      assert.deepEqual(tree2.children[1].children, ["99"]);
+      assert.deepEqual(tree2.children[2].children, ["yes"]);
+   });
+
+   describe("React component type inference", () => {
+      interface RequiredPropsComponentProps {
+         label: string;
+         value: number;
+         onChange: (value: number) => void;
+         disabled?: boolean;
+      }
+
+      function RequiredPropsComponent(_props: RequiredPropsComponentProps) {
+         return null;
+      }
+
+      it("accepts all required props", () => {
+         const widget = (
+            <cx>
+               <RequiredPropsComponent label="Amount" value={100} onChange={(v) => console.log(v)} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("accepts required props with optional prop", () => {
+         const widget = (
+            <cx>
+               <RequiredPropsComponent label="Amount" value={100} onChange={(v) => console.log(v)} disabled={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (label)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - label is required but missing */}
+               <RequiredPropsComponent value={100} onChange={(v) => console.log(v)} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing required prop (onChange)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - onChange is required but missing */}
+               <RequiredPropsComponent label="Amount" value={100} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects missing all required props", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - label, value, and onChange are required but missing */}
+               <RequiredPropsComponent disabled={true} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects wrong prop type (string for number)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - value should be number, not string */}
+               <RequiredPropsComponent label="Amount" value="100" onChange={(v) => console.log(v)} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("rejects wrong prop type (number for string)", () => {
+         const widget = (
+            <cx>
+               {/* @ts-expect-error - label should be string, not number */}
+               <RequiredPropsComponent label={123} value={100} onChange={(v) => console.log(v)} />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+
+      it("provides instance through this", () => {
+         class TestController extends Controller {
+            change(_v: number) {}
+         }
+         const widget = (
+            <cx>
+               <RequiredPropsComponent
+                  label={"label"}
+                  value={100}
+                  controller={TestController}
+                  onChange={function (v) {
+                     this.getControllerByType(TestController).change(v);
+                  }}
+               />
+            </cx>
+         );
+         assert.ok(widget);
+      });
+   });
+});

package/src/widgets/ReactElementWrapper.tsx

@@ -0,0 +1,108 @@
+import { ContainerBase, ContainerConfig } from "../ui/Container";
+import { Instance } from "../ui/Instance";
+import { Prop } from "../ui/Prop";
+import type { RenderingContext } from "../ui/RenderingContext";
+import { VDOM, Widget } from "../ui/Widget";
+import { isFunction, isNonEmptyArray } from "../util";
+import { isArray } from "../util/isArray";
+
+type ReactElementWrapperConfigBase = Omit<ContainerConfig, "items">;
+
+// CxJS callback type - can be string (controller method) or callback with Instance as this
+type CxCallback<T> = T extends (...args: infer A) => infer R ? (this: Instance, ...args: A) => R : T;
+
+// Transform a single prop: functions to CxCallback, data to Prop<T>
+type TransformProp<K, V> = K extends keyof ReactElementWrapperConfigBase
+   ? ReactElementWrapperConfigBase[K]
+   : NonNullable<V> extends Function
+     ? CxCallback<V>
+     : Prop<V>;
+
+// Transform React component props - functions to CxCallback, data props to Prop<T>
+// Preserves required/optional status
+type TransformReactElementProps<T> = {
+   [K in keyof T]: TransformProp<K, T[K]>;
+};
+
+/** ReactElementWrapper configuration with component-specific props */
+// componentType is not included here - it's added by the jsx-runtime and declared in the class
+export type ReactElementWrapperConfig<P> = ReactElementWrapperConfigBase & TransformReactElementProps<P>;
+
+interface ReactElementWrapperInstance extends Instance {
+   events?: Record<string, Function>;
+}
+
+export class ReactElementWrapper<C extends React.ComponentType<any> = React.ComponentType<any>> extends ContainerBase<
+   ReactElementWrapperConfigBase & { componentType: C; jsxAttributes?: string[] },
+   ReactElementWrapperInstance
+> {
+   declare public componentType: React.ComponentType<any>;
+   declare public jsxAttributes?: string[];
+   declare public props?: Record<string, unknown>;
+   [key: string]: unknown;
+
+   init(): void {
+      // Collect all props to pass to the React component
+      this.props = {};
+
+      if (this.jsxAttributes) {
+         for (const attr of this.jsxAttributes) {
+            // Skip CxJS reserved attributes and children-related attributes
+            if (
+               attr === "componentType" ||
+               attr === "visible" ||
+               attr === "if" ||
+               attr === "controller" ||
+               attr === "jsxAttributes" ||
+               attr === "layout" ||
+               attr === "outerLayout" ||
+               attr === "putInto" ||
+               attr === "contentFor" ||
+               attr === "children" ||
+               attr === "items"
+            )
+               continue;
+
+            this.props[attr] = this[attr];
+         }
+      }
+
+      super.init();
+   }
+
+   public initInstance(_context: RenderingContext, _instance: ReactElementWrapperInstance): void {
+      let events: Record<string, Function> | undefined;
+      if (!isNonEmptyArray(this.jsxAttributes)) return;
+      events = {};
+      for (let prop of this.jsxAttributes) {
+         let f = this[prop];
+         if (prop.startsWith("on") && isFunction(f)) events[prop] = (...args: any[]) => f.apply(_instance, args);
+      }
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            props: { structured: true },
+         },
+         ...args,
+      );
+   }
+
+   render(context: RenderingContext, instance: ReactElementWrapperInstance, key: string): React.ReactNode {
+      const { data } = instance;
+
+      // Render CxJS children to React elements
+      let children = this.renderChildren(context, instance);
+      if (children && isArray(children) && children.length === 0) children = undefined;
+
+      const props = {
+         key,
+         ...data.props,
+         ...instance.events,
+         children,
+      };
+
+      return VDOM.createElement(this.componentType, props);
+   }
+}