Ordered Transform Pipeline

Build a small compilation helper that loads a React component file, runs it through a configurable component-transform plugin with multiple transforms, and surfaces the wrapper order and metadata observed by those transforms.

Capabilities

Preserves declared transform order

• Given two transforms named "outer" and "inner" that push entries such as "outer:<id>" or "inner:<id>" into a shared log when wrapping components, executing the compiled component records ["inner:App", "outer:App"], showing that the last-listed transform sits closest to the component. @test

Shares component identifiers across transforms

• All transforms receive the same identifier string for the wrapped component; when each transform appends the identifier it receives to the shared log, every entry uses the identical value for that component. @test

Injects configured imports and locals

• When a transform configuration provides imports and locals (for example, a logger function and module reference), those values are delivered to the transform factory so it can emit log entries like "logger:inner" while wrapping the component. @test

Implementation

@generates

API

export interface TransformConfig {
  transform: string;
  imports?: any[];
  locals?: any[];
}

export interface CompileOutcome {
  component: any;
  orderLog: string[];
}

export function compileAndExecute(
  sourcePath: string,
  transforms: TransformConfig[],
  runtime?: Record<string, any>
): CompileOutcome;

Dependencies { .dependencies }

babel-plugin-react-transform { .dependency }

Applies user-defined runtime transforms to detected React components, composing multiple transforms in the order declared.