JSX Prop Snapshotter

Create a utility that parses JSX source and produces evaluated prop snapshots for a given component.

Capabilities

Collects targeted component instances

• Given source containing multiple JSX elements, collects only elements whose opening name matches componentName, returning one entry per element in document order. @test

Evaluates requested props to plain values

• For each targeted element, returns an object with keys from propNames; missing props are omitted. Boolean shorthand and string "true" / "false" convert to booleans; literal numbers and strings are preserved. @test

Handles expressions, spreads, and JSX content

• Expression containers with arrays or object literals (including object-literal spreads) are evaluated to plain JavaScript structures; JSX elements or fragments become serialized markup strings; non-object spreads are ignored without throwing. @test

Flags unsupported expressions

• When a prop uses an unsupported expression (e.g., arrow function or optional chain call), the returned value is null while other props remain intact. @test

Implementation

@generates

API

export interface PropSnapshot {
  elementIndex: number;
  props: Record<string, any>;
}

export function generatePropSnapshots(
  sourceCode: string,
  componentName: string,
  propNames: string[]
): PropSnapshot[];

Dependencies { .dependencies }

jsx-ast-utils { .dependency }

Evaluates JSX prop values into JavaScript equivalents and assists with JSX attribute access.