jsx-new-transform
**Rewrites import React / import * as React to named or namespace imports so code matches the automatic JSX runtime (same goal as the Backstage JSX migration tutorial, not Backstage-specific).
What it does
- Finds value imports from
reactwhere the binding isReact(default orimport * as React). - Safe destructure path: When
Reactis only used as a qualifier (React.createElement,React.FC,<React.Fragment>, etc.) and there are no conflicting bindings, replaces those uses and switches to named /import typeimports fromreact. - Fallback: When
Reactis still needed as a value (e.g. returned or passed around), rewrites towardimport * as React from "react"(including splitting default + named imports when needed). - Cleanup: Removes unused default or namespace
Reactimports when nothing referencesReact. - Errors: Throws if more than one conflicting
Reactbinding import is found (same rule as the original jscodeshift recipe).
Metrics
| Metric | Meaning |
|---|---|
jsx-react-import-outcome | One row per file outcome. Dimension outcome: destructured, namespace-fallback, namespace-fallback-split, removed-unused-namespace, removed-unused-default, skipped-no-react-import, error-duplicate-react-import, unchanged. |
jsx-react-destructure-symbols | When destructuring, counts symbols pulled into imports. Dimensions symbol (imported:local), kind: value or type. |
jsx-react-member-replaced | Counts qualifier rewrites. Dimension kind: nested_type_identifier (e.g. React.FC → FC) or member_expression (e.g. React.memo → memo, JSX React.Fragment → Fragment). |
Workflow parameters
destructureNamespaceImports(boolean, defaulttrue): Whentrue, also attempt to destructureimport * as Reactwhen onlyReact.*access is used (aligned with the tutorial’s--destructureNamespaceImports=true).
Workflow (see workflow.yaml): runs the JSSG step on **/*.{ts,tsx,js,jsx} excluding node_modules.