TypeScript Type Implementation

TypeScript is the only client-side application development language that is currently supported by uiInfrastructure.

Copy link to this section

@typeScript

All Types that are annotated with the Ann#TypeScript annotation will be included in the packaged runtime.

Each .ts Type implementation file is treated as an ECMAScript module. Functions that are part of the C3 Type definition should be exported so that they can be imported in other TypeScript files. No Types or functions are provided globally by the runtime so any external functionality should be imported as needed.

Copy link to this section

Importing other code

Copy link to this section

Other types

Copy link to this section

TypeScript typings

TypeScript typings (.d.ts) are available for all enum Types and all Types that have the @typeScript annotation. They can be imported from @c3/types/<Type Name>. For example:

import { MyButton as MyButtonProps } from '@c3/types/MyButton';

const props: MyButtonProps = {
  size: 'LARGE',
};

Copy link to this section

Methods

Methods that are defined on Types and implemented in TypeScript can be imported by other Types. For example, myPackage/src/ui/MyButton.ts:

export function clickAction() {
  return { /* ... */ };
}

myPackage/src/ui/MyOtherButton.ts:

import { clickAction } from '@c3/ui/MyButton';

Copy link to this section

UI metadata

UI metadata (i.e. JSON files included in myPackage/ui/c3/meta/) is transformed into a format that is specific to each rendering library and placed in the @c3/ui/components/ directory.

Using uiInfrastructureReact, where each component is a React component, for example:

myPackage/ui/c3/meta/MyApp.SubmitButton:

{
  "type": "MyButton",
  "text": "Submit",
  "size": "LARGE"
}

The props that are specified in the UI metadata file are already included in the component, so the component can be used as-is after importing it:

import MyApp_SubmitButton from '@c3/ui/components/MyApp.SubmitButton';

export default (props) => {
  return (
    <div className="wrapper">
      <MyApp_SubmitButton />
    </div>
  );
};

While components that are generated from UI metadata can be imported manually in this manner, the recommended approach is to use UI Component Types that have UiComponentRef fields. uiInfrastructure will automatically import these components and pass them as props.

Copy link to this section

Third-party libraries

Third-party libraries that are specified in the js-webpack_c3 ActionRuntime can be imported from .ts and .tsx implementation files.

Example:

import * as React from 'react';
import isObject from 'lodash/isObject';

The js-webpack_c3 ActionRuntime is special in two ways:

1. It extends the nodejs-webpack ActionRuntime (used by UiBundler)
2. It can be extended by other packages by creating a seed/ActionRuntime/js-webpack_c3.json file in the corresponding package.