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

Anonymous Component Identity Reporter

A small tool that instruments React component source code and reports the per-component identifiers and metadata generated by the transform step. All metadata should come from the declared instrumentation dependency rather than custom component scanning, making it obvious when anonymous or nested components receive stable ids.

Capabilities

Reports generated ids for anonymous components

  • Transforming a file whose default export is an unnamed class extending React.Component returns metadata with one entry where id matches the transform-generated value (starts with _component), displayName is absent, and isInFunction is false. @test

Tracks nested component scope

  • Instrumenting a class component declared inside a factory function marks isInFunction as true for that component while keeping its generated id consistent (uses the class name if available) even when another top-level component exists. @test

Preserves declared display names

  • When processing a mix of named and anonymous factory-based components, metadata retains the explicit displayName for named entries and assigns generated ids (e.g., _component, _component2) to anonymous ones while keeping isInFunction false. @test

Implementation

@generates

API

export interface ComponentMetadata {
  id: string;
  displayName?: string;
  isInFunction: boolean;
}

/**
 * Instruments React component source and returns the transform-generated metadata.
 * @param source JavaScript/JSX source containing components
 * @param filename Optional filename used during instrumentation
 */
export function collectComponentMetadata(source: string, filename?: string): ComponentMetadata[];

Dependencies { .dependencies }

babel-plugin-react-transform { .dependency }

Instruments React components and assigns per-file identifiers.

@babel/core { .dependency }

Runs the compile step that applies the transform plugin.

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

tile.json