...

Author: mstijak

packages/cx/src/jsx-runtime.ts

@@ -4,11 +4,7 @@ import { Widget } from "./ui/Widget";
 import { isArray } from "./util/isArray";
 import { isString } from "./util/isString";
 import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
-import {
-   ReactElementWrapper,
-   ReactElementWrapperConfig,
-   TransformReactElementProps,
-} from "./widgets/ReactElementWrapper";
+import { ReactElementWrapper, ReactElementWrapperConfig } from "./widgets/ReactElementWrapper";
 
 export function jsx(typeName: any, props: any, key?: string): any {
    if (isArray(typeName)) return typeName;

packages/cx/src/ui/Instance.ts

@@ -1,20 +1,20 @@
-import { Controller } from "./Controller";
-import { debug, renderFlag, processDataFlag, destroyFlag } from "../util/Debug";
+import { isAccessorChain } from "../data/createAccessorModelProxy";
+import { View } from "../data/View";
+import { debug, destroyFlag, processDataFlag, renderFlag } from "../util/Debug";
 import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
-import { throttle } from "../util/throttle";
-import { validatedDebounce } from "../util/validatedDebounce";
-import { batchUpdates } from "./batchUpdates";
-import { isString } from "../util/isString";
-import { isFunction } from "../util/isFunction";
-import { isDefined } from "../util/isDefined";
 import { isArray } from "../util/isArray";
-import { isObject } from "../util/isObject";
+import { isDefined } from "../util/isDefined";
+import { isFunction } from "../util/isFunction";
 import { isNonEmptyArray } from "../util/isNonEmptyArray";
+import { isObject } from "../util/isObject";
+import { isString } from "../util/isString";
 import { isUndefined } from "../util/isUndefined";
-import { isAccessorChain } from "../data/createAccessorModelProxy";
-import { CxChild, RenderingContext } from "./RenderingContext";
+import { throttle } from "../util/throttle";
+import { validatedDebounce } from "../util/validatedDebounce";
+import { batchUpdates } from "./batchUpdates";
+import { Controller } from "./Controller";
+import { RenderingContext } from "./RenderingContext";
 import type { Widget } from "./Widget";
-import { View } from "../data/View";
 
 /**
  * Serializable value types that can be safely passed through the framework
@@ -744,8 +744,7 @@ export class Instance<WidgetType extends Widget<any, any> = Widget<any, any>> {
     */
    public getController(predicate: (controller: Controller) => boolean): Controller {
       const controller = this.findController(predicate);
-      if (!controller)
-         throw new Error("Cannot find a controller matching the given predicate in the instance tree.");
+      if (!controller) throw new Error("Cannot find a controller matching the given predicate in the instance tree.");
       return controller;
    }
 
@@ -757,8 +756,7 @@ export class Instance<WidgetType extends Widget<any, any> = Widget<any, any>> {
     */
    public getControllerByType<T extends Controller>(type: new (...args: any[]) => T): T {
       const controller = this.findControllerByType(type);
-      if (!controller)
-         throw new Error(`Cannot find a controller of type "${type.name}" in the instance tree.`);
+      if (!controller) throw new Error(`Cannot find a controller of type "${type.name}" in the instance tree.`);
       return controller;
    }
 

packages/cx/src/widgets/HtmlElement.tsx

@@ -51,7 +51,7 @@ type CxEventHandler<T> = T extends (event: infer E) => any
 // Note: For string literal union props (like SVG's strokeLinecap), we also accept `string`
 // because TypeScript widens string literals to `string` in JSX attribute syntax.
 // This is a known TypeScript behavior where `<path strokeLinecap="round"/>` infers "round" as string.
-export type TransformHtmlElementProps<T> = {
+type TransformHtmlElementProps<T> = {
    [K in keyof T]: K extends "children"
       ? ChildNode | ChildNode[]
       : K extends "className" | "class"
@@ -98,10 +98,7 @@ export interface HtmlElementConfigBase extends StyledContainerConfig {
 }
 
 /** HtmlElement configuration with tag-specific attributes and events */
-export type HtmlElementConfig<Tag extends keyof ReactIntrinsicElements = "div"> = Omit<
-   HtmlElementConfigBase,
-   "tag"
-> &
+export type HtmlElementConfig<Tag extends keyof ReactIntrinsicElements = "div"> = Omit<HtmlElementConfigBase, "tag"> &
    TransformHtmlElementProps<ReactIntrinsicElements[Tag]> & { tag?: Tag };
 
 export class HtmlElementInstance<E extends HtmlElement<any, any> = HtmlElement<any, any>>

packages/cx/src/widgets/ReactElementWrapper.spec.tsx

@@ -429,5 +429,24 @@ describe("ReactElementWrapper", () => {
          );
          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);
+      });
    });
 });

packages/cx/src/widgets/ReactElementWrapper.tsx

@@ -1,48 +1,40 @@
-import type { ComponentProps } from "react";
+import { ContainerBase, ContainerConfig } from "../ui/Container";
 import { Instance } from "../ui/Instance";
-import { ChildNode, ContainerBase, ContainerConfig } from "../ui/Container";
-import { ControllerProp, VDOM } from "../ui/Widget";
+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";
-import { Prop } from "../ui/Prop";
-import { TransformHtmlElementProps } from "./HtmlElement";
 
-// CxJS callback type - can be string (controller method) or callback with Instance as this
-type CxCallback<T> = T extends (...args: infer A) => infer R
-   ? string | ((this: Instance, ...args: A) => R)
-   : string | T;
+type ReactElementWrapperConfigBase = Omit<ContainerConfig, "items">;
 
-// Required keys in T
-type RequiredKeys<T> = {
-   [K in keyof T]-?: {} extends Pick<T, K> ? never : K;
-}[keyof T];
-
-// Optional keys in T
-type OptionalKeys<T> = {
-   [K in keyof T]-?: {} extends Pick<T, K> ? K : never;
-}[keyof T];
+// 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 "controller"
-   ? ControllerProp
-   : K extends "children"
-     ? ChildNode | ChildNode[]
-     : NonNullable<V> extends Function
-       ? CxCallback<V>
-       : Prop<V>;
+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
-export type TransformReactElementProps<T> = {
+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> = ContainerConfig & TransformReactElementProps<P>;
+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<
-   ContainerConfig & { componentType: C }
+   ReactElementWrapperConfigBase & { componentType: C; jsxAttributes?: string[] },
+   ReactElementWrapperInstance
 > {
    declare public componentType: React.ComponentType<any>;
    declare public jsxAttributes?: string[];
@@ -78,6 +70,16 @@ export class ReactElementWrapper<C extends React.ComponentType<any> = React.Comp
       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(
          {
@@ -87,7 +89,7 @@ export class ReactElementWrapper<C extends React.ComponentType<any> = React.Comp
       );
    }
 
-   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+   render(context: RenderingContext, instance: ReactElementWrapperInstance, key: string): React.ReactNode {
       const { data } = instance;
 
       // Render CxJS children to React elements
@@ -97,6 +99,7 @@ export class ReactElementWrapper<C extends React.ComponentType<any> = React.Comp
       const props = {
          key,
          ...data.props,
+         ...instance.events,
          children,
       };