TypeScript Migration Guide

{
   "compilerOptions": {
      "jsx": "react-jsx",
      "jsxImportSource": "cx",
      "moduleResolution": "bundler",
      "esModuleInterop": true
   }
}
            

{
   test: /\.(ts|tsx)$/,
   loader: 'ts-loader',
   exclude: /node_modules/
}
            

// Install the plugin
npm install babel-plugin-transform-cx-imports --save-dev

// In babel.config.js
{
   plugins: [
      ["transform-cx-imports", { useSrc: true }]
   ]
}
            

{
   test: /\.(ts|tsx)$/,
   exclude: /node_modules/,
   use: ['babel-loader', 'ts-loader']
}
            

import { Controller, bind } from "cx/ui";
import { Button, Section } from "cx/widgets";

class PageController extends Controller {
   onSave() {
      // save logic
   }

   onDelete(id: string) {
      // delete logic
   }
}

export default (
   <cx>
      <Section controller={PageController}>
         {/* Type-safe controller method calls */}
         <Button
            onClick={(e, instance) =>
               instance.getControllerByType(PageController).onSave()
            }
         >
            Save
         </Button>
         <Button
            onClick={(e, instance) =>
               instance.getControllerByType(PageController).onDelete("123")
            }
         >
            Delete
         </Button>
      </Section>
   </cx>
);
            

import type { FormRenderingContext } from "cx/widgets";

export class MyFormWidget extends Field<MyFormWidgetConfig> {
   explore(context: FormRenderingContext, instance: Instance) {
      // Type-safe access to form context properties
      if (context.parentDisabled) {
         // handle disabled state
      }
      super.explore(context, instance);
   }
}
            

import { ContentResolver } from "cx/widgets";
import { createAccessorModelProxy } from "cx/data";

interface AppModel {
   user: { name: string; age: number };
}

const model = createAccessorModelProxy<AppModel>();

<ContentResolver
   params={{
      name: model.user.name,  // AccessorChain<string>
      age: model.user.age,    // AccessorChain<number>
      limit: 10,              // number literal
   }}
   onResolve={(params) => {
      // TypeScript infers:
      // params.name: string
      // params.age: number
      // params.limit: number
      return <div>{params.name} is {params.age} years old</div>;
   }}
/>
            

import { createAccessorModelProxy } from "cx/data";
import { truthy, isEmpty, equal, greaterThan } from "cx/ui";
import { TextField, NumberField, Button } from "cx/widgets";

interface FormModel {
   name: string;
   age: number;
   items: string[];
}

const m = createAccessorModelProxy<FormModel>();

<cx>
   <TextField value={m.name} label="Name" />
   <NumberField value={m.age} label="Age" />

   {/* Show warning if name is empty */}
   <div visible={isEmpty(m.name)} class="warning">
      Name is required
   </div>

   {/* Enable button only if age >= 18 */}
   <Button disabled={lessThan(m.age, 18)}>
      Submit
   </Button>

   {/* Show special message for specific age */}
   <div visible={equal(m.age, 21)}>
      Welcome to adulthood!
   </div>
</cx>
            

import { Grid } from "cx/widgets";
import { KeySelection } from "cx/ui";

<Grid
   selection={{
      type: KeySelection,
      bind: "selection",
      keyField: "id"  // KeySelection-specific prop, fully typed
   }}
   // ...
/>
            

import { Chart } from "cx/charts";
import { NumericAxis, CategoryAxis } from "cx/charts";

<Chart
   axes={{
      x: { type: CategoryAxis, labelAnchor: "end" },
      y: { type: NumericAxis, min: 0, max: 100 }  // NumericAxis-specific props
   }}
>
   {/* chart content */}
</Chart>
            

import { Grid } from "cx/widgets";
import { GroupAdapter } from "cx/ui";

<Grid
   dataAdapter={{
      type: GroupAdapter,
      groupings: [{ key: { bind: "category" } }]  // GroupAdapter-specific props
   }}
   // ...
/>
            

import { DateTimeField } from "cx/widgets";

<DateTimeField
   value-bind="date"
   dropdownOptions={{
      placement: "down-right",
      offset: 10,
      touchFriendly: true
   }}
/>
            

import { validateConfig } from "cx/util";
import { Controller } from "cx/ui";

interface MyControllerConfig {
   apiEndpoint: string;
   maxRetries: number;
}

class MyController extends Controller {
   declare apiEndpoint: string;
   declare maxRetries: number;

   constructor(config?: MyControllerConfig) {
      super(config);
   }
}

// validateConfig enables strict checking
<Section
   controller={validateConfig({
      type: MyController,
      apiEndpoint: "/api",
      maxRetires: 3,  // Error: 'maxRetires' does not exist (typo)
   })}
/>
            

/** @jsxImportSource react */

import { BooleanProp, StringProp, RenderingContext, VDOM } from "cx/ui";
import { HtmlElement, HtmlElementConfig } from "cx/widgets";

// 1. Define the Config interface
export interface MyButtonConfig extends HtmlElementConfig {
   icon?: StringProp;
   pressed?: BooleanProp;
}

// 2. Extend the appropriate generic base class (Instance type argument is optional)
export class MyButton extends HtmlElement<MyButtonConfig> {

   // 3. Use declare for all properties from config/prototype
   declare icon?: string;
   declare pressed?: boolean;
   declare baseClass: string;

   // 4. Declare bindable props in declareData
   declareData(...args) {
      super.declareData(...args, {
         icon: undefined,
         pressed: undefined,
      });
   }

   // 5. Add constructor accepting the config type
   constructor(config?: MyButtonConfig) {
      super(config);
   }

   // 6. Implement render method with React JSX
   render(
      context: RenderingContext,
      instance: Instance,
      key: string
   ): React.ReactNode {
      return (
         <button
            key={key}
            className={this.baseClass}
            onClick={(e) => this.handleClick(e, instance)}
         >
            {this.icon && <span className="icon">{Icon.render(instance.data.icon)}</span>}
            {this.renderChildren(context, instance)}
         </button>
      );
   }
}

// 7. Initialize prototype properties
MyButton.prototype.baseClass = "mybutton";
            

// WRONG - these fields will override config values with undefined
export class MyWidget extends HtmlElement<MyWidgetConfig> {
   icon?: string;     // Overwrites config.icon!
   pressed?: boolean; // Overwrites config.pressed!
}

// CORRECT - declare tells TypeScript the field exists without initializing it
export class MyWidget extends HtmlElement<MyWidgetConfig> {
   declare icon?: string;
   declare pressed?: boolean;
   declare baseClass: string; // Non-nullable when defined in prototype
}
            

export interface MyWidgetInstance extends Instance {
   customData: SomeType;
}

export class MyWidget extends HtmlElement<MyWidgetConfig, MyWidgetInstance> {
   initInstance(context: RenderingContext, instance: MyWidgetInstance): void {
      instance.customData = initializeSomething();
      super.initInstance(context, instance);
   }
}
            

export { Button, ButtonConfig } from "./Button";
export { FlexBox, FlexBoxConfig } from "./FlexBox";