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-6/

React Class Transform Harness

Build a helper that runs a Babel transform to instrument React-style class components while filtering out classes without render methods. Rely on the provided dependency to perform detection and wrapping rather than reimplementing component parsing logic.

Capabilities

Gated class wrapping

  • A class extending React.Component with a render method is wrapped by the transform, while a utility class without render remains unchanged in the emitted code @test

Renderless classes are skipped

  • A class extending React.Component but missing render is left untouched, confirming the render-method gate @test

Custom superclass support

  • When provided with an additional superclass pattern (e.g., BaseComponent), a class extending it with render is wrapped and its display name appears in the reported metadata @test

Implementation

@generates

API

export interface TransformOptions {
  /** Extra superclass patterns to consider when detecting class components */
  superClasses?: string[];
  /** Optional file name to use in generated metadata */
  filename?: string;
}

/**
 * Transforms source code by applying the configured component-wrapping plugin.
 * Returns both the compiled code and component metadata emitted by the transform.
 */
export function transformWithClassGate(
  source: string,
  options?: TransformOptions
): { code: string; metadata: Record<string, { displayName?: string; isInFunction: boolean }> };

Dependencies { .dependencies }

babel-plugin-react-transform { .dependency }

Provides the component-detection and wrapping transform used during compilation.

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

tile.json