CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-babel-plugin-react-transform

Babel plugin to instrument React components with custom transforms

59%

Overall

Evaluation59%

1.48x

Agent success when using this tile

Overview
Eval results
Files

task.mdevals/scenario-2/

Custom Pattern Transform Helper

Build a helper that takes JavaScript source code containing React-style components and returns transformed code where every detected component is wrapped with a provided transform module. The helper must allow callers to extend component detection to custom factory methods and custom superclasses while keeping the default detection behavior intact.

Capabilities

Extends superclass detection

  • Given code with a class extending WidgetBase that defines a render method, the transformed output wraps that class component with the provided transform while preserving its export. @test

Extends factory method detection

  • Given code that creates a component via UI.createWidget({ render() { return <div/>; } }), the transformed output wraps that factory-produced component with the provided transform. @test

Keeps non-components untouched

  • A class without a render method or an object created by unmatched factory calls remains unchanged after transformation. @test

Implementation

@generates

API

export interface TransformOptions {
  factoryPatterns?: string[];
  superclassPatterns?: string[];
  transformModule: string;
}

export function transformComponents(
  code: string,
  options: TransformOptions
): string;

Dependencies { .dependencies }

babel-plugin-react-transform { .dependency }

Use to wrap React-style components during compilation.

tessl i tessl/npm-babel-plugin-react-transform@3.0.0

tile.json