Component Transform Instrumentation

Develop a small Babel-based helper that wraps React class components with configured transform wrappers during compilation while leaving non-component code untouched.

Capabilities

Wraps React class components

• Transforming a file containing a named React class component with a render method emits code where that component is wrapped with the configured transform wrapper and retains its render body unchanged. @test

Preserves default exports

• Transforming a default-exported React class component results in wrapped output that still exports the component as default. @test

Leaves non-components untouched

• Transforming a file with classes that lack render methods or helper classes nested alongside a component leaves those classes unwrapped while still wrapping the actual component. @test

Supports multiple transforms

• When two transforms are configured, the emitted wrappers reflect the provided order (the last-listed transform applies closest to the component) while sharing the same component identifier. @test

Implementation

@generates

API

/**
 * Transforms JSX/ES6 source so React class components are wrapped with configured transforms.
 * @param {string} sourceCode - The source text containing potential React class components.
 * @param {string} filename - Used for deterministic component identifiers in generated wrappers.
 * @returns {string} The transformed source with wrapper calls.
 */
export function instrumentSource(sourceCode, filename);

Dependencies { .dependencies }

babel-plugin-react-transform { .dependency }

Wraps React components with configured transforms during Babel compilation.

@babel/core { .dependency }

Runs the transform pipeline that applies the plugin and returns transformed code.

@babel/preset-react { .dependency }

Parses JSX in the source being transformed.