or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

component-detection.md index.md plugin-configuration.md transform-interface.md

tile.json

Plugin Configuration

Configuration options for setting up babel-plugin-react-transform with transforms and component detection rules.

Capabilities

Main Plugin Options

Configuration object passed to the Babel plugin.

/**
 * Main configuration object for babel-plugin-react-transform
 */
interface BabelPluginReactTransformOptions {
  /** Array of transform configurations to apply to React components */
  transforms: TransformConfig[];
  /** Optional array of factory method patterns to detect (default: ['React.createClass']) */
  factoryMethods?: string[];
  /** Optional array of superclass patterns to detect (default: ['React.Component', 'React.PureComponent', 'Component', 'PureComponent']) */
  superClasses?: string[];
}

Usage Example:

// .babelrc configuration
{
  "plugins": [
    ["react-transform", {
      "transforms": [{
        "transform": "react-transform-hmr",
        "imports": ["react"],
        "locals": ["module"]
      }],
      "factoryMethods": ["React.createClass", "createClass"],
      "superClasses": ["React.Component", "Component", "BaseComponent"]
    }]
  ]
}

Transform Configuration

Individual transform configuration within the transforms array.

/**
 * Configuration for a single transform
 */
interface TransformConfig {
  /** NPM module name or local path to the transform function */
  transform: string;
  /** Optional array of dependencies to import and inject into the transform */
  imports?: string[];
  /** Optional array of local variables to inject into the transform */
  locals?: string[];
}

Usage Examples:

// Hot Module Replacement transform
{
  "transform": "react-transform-hmr",
  "imports": ["react"],
  "locals": ["module"]
}

// Error catching transform
{
  "transform": "react-transform-catch-errors",
  "imports": ["react", "redbox-react"]
}

// Local custom transform
{
  "transform": "./src/my-custom-transform",
  "imports": ["react"],
  "locals": ["process"]
}

Factory Methods Configuration

Patterns for detecting React component factory methods like React.createClass.

/**
 * Factory method patterns for component detection
 * @default ['React.createClass']
 */
type FactoryMethods = string[];

Common Patterns:

// Default patterns
["React.createClass"]

// Extended patterns
["React.createClass", "createClass", "createReactClass"]

// Custom patterns
["MyFramework.createComponent", "createCustomComponent"]

Super Classes Configuration

Patterns for detecting React component class inheritance.

/**
 * Superclass patterns for component detection
 * @default ['React.Component', 'React.PureComponent', 'Component', 'PureComponent']
 */
type SuperClasses = string[];

Common Patterns:

// Default patterns
["React.Component", "React.PureComponent", "Component", "PureComponent"]

// Extended patterns
["React.Component", "Component", "BaseComponent", "MyComponent"]

// Framework-specific patterns
["CustomFramework.Component", "ExtendedComponent"]

Configuration Validation

The plugin validates configuration and throws errors for invalid options.

/**
 * Validates plugin configuration (ReactTransformBuilder static method)
 * @param options - Configuration object to validate
 * @returns Boolean indicating if options are valid (checks if options is object with transforms array)
 */
static validateOptions(options: any): boolean;

/**
 * Asserts plugin configuration is valid, throws error if not (ReactTransformBuilder static method)
 * @param options - Configuration object to validate
 * @throws Error if options are invalid with descriptive message
 */
static assertValidOptions(options: any): void;

/**
 * Normalizes plugin options with default values
 * @param options - Raw plugin options from .babelrc
 * @returns Normalized options with defaults for factoryMethods and superClasses
 */
normalizeOptions(options: BabelPluginReactTransformOptions): NormalizedOptions;

Error Handling:

// Invalid configuration will throw:
new Error(
  'babel-plugin-react-transform requires that you specify options ' +
  'in .babelrc or from the Babel Node API, and that it is an object ' +
  'with a transforms property which is an array.'
);

// Default values applied during normalization:
{
  factoryMethods: ['React.createClass'],
  superClasses: ['React.Component', 'React.PureComponent', 'Component', 'PureComponent'],
  transforms: [...] // User-provided transforms
}

Complete Configuration Example

// .babelrc with comprehensive configuration
{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [
            {
              "transform": "react-transform-hmr",
              "imports": ["react"],
              "locals": ["module"]
            },
            {
              "transform": "react-transform-catch-errors",
              "imports": ["react", "redbox-react"]
            },
            {
              "transform": "./src/custom-debug-transform",
              "imports": ["react", "debug"],
              "locals": ["process", "console"]
            }
          ],
          "factoryMethods": ["React.createClass", "createClass"],
          "superClasses": ["React.Component", "React.PureComponent", "Component", "PureComponent"]
        }]
      ]
    }
  }
}

Version

Tile

Files