Skip to content

chore: port jssg codemods #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mohab-sameh merged 8 commits into from
Apr 21, 2026
Merged

chore: port jssg codemods #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
81acd7c
port remaining codemods
mohab-sameh Apr 21, 2026
86c049e
more testing & bug fixes
mohab-sameh Apr 21, 2026
b9a4987
performance evaluation
mohab-sameh Apr 21, 2026
14a7db2
Update TESTING_REPORT.md
mohab-sameh Apr 21, 2026
a1329d1
Update TESTING_REPORT.md
mohab-sameh Apr 21, 2026
26cb21e
clean up repo
mohab-sameh Apr 21, 2026
88138df
move codemods directory
mohab-sameh Apr 21, 2026
bd5e2ab
clean up development sections
mohab-sameh Apr 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
35 changes: 5 additions & 30 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ on:
pull_request:

jobs:
docs-and-lint:
checks:
runs-on: ubuntu-latest
permissions:
contents: read
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
Expand All @@ -17,32 +19,5 @@ jobs:
node-version: 20
cache: pnpm
- run: pnpm install --frozen-lockfile
- run: pnpm run lint

active:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
with:
version: 9.14.2
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- run: pnpm install --frozen-lockfile
- run: pnpm run test:active
- run: pnpm run check-types:active

legacy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
with:
version: 9.14.2
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- run: pnpm run test:legacy
- run: pnpm run test
- run: pnpm run check-types
62 changes: 23 additions & 39 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,44 @@
# Contributing

Thanks for your interest in contributing to react-codemod!
This repository is a pnpm workspace of JSSG codemods under `codemods/*`.

## Development setup
## Setup

```bash
# Install dependencies
pnpm install

# Run all tests
pnpm test

# Type-check all codemods
pnpm check-types
```

## Making changes

1. Create a branch from `main`.
2. Make your changes and add or update tests.
3. Run `pnpm test` and `pnpm check-types` to verify everything passes.
4. Add a changeset (see below).
5. Open a pull request.
Required local checks before opening a pull request:

## Adding a changeset
```bash
pnpm run test
pnpm run check-types
```

This repo uses [Changesets](https://github.com/changesets/changesets) for versioning and releases. Every PR that changes a codemod must include a changeset.
Or run the combined check:

```bash
pnpm changeset
pnpm run ci
```

Follow the prompts to:
1. Select the affected codemod(s).
2. Choose the semver bump type — **patch** for bug fixes, **minor** for new features, **major** for breaking changes.
3. Write a short summary of the change.
## Adding or updating codemods

This creates a markdown file in `.changeset/` that should be committed with your PR.
- Keep each codemod self-contained under `codemods/<slug>/`.
- Update the codemod package README when behavior or usage changes.
- Add or extend snapshot fixtures under the codemod’s `tests/` directory for every behavioral change.

## Release workflow
## Versioning and publishing

1. Merge a PR with one or more changesets into `main`.
2. CI automatically opens a **Version Packages** PR that bumps versions in `package.json` and `codemod.yaml`.
3. Merge the version PR — git tags are created and the updated codemods are published to the Codemod registry.
This repo uses Changesets to version codemod packages.

## Adding a new codemod
To prepare a release entry for your change:

Each codemod lives in its own directory under `codemods/jssg/`:

```
codemods/jssg/<name>/
scripts/codemod.ts # Codemod logic (jssg / ast-grep)
tests/ # Input/expected test fixtures
codemod.yaml # Codemod manifest
workflow.yaml # Execution workflow
package.json
```bash
pnpm changeset
```

Use an existing codemod as a reference when creating a new one.
When release changesets land on `main`, GitHub Actions:

1. opens or updates the release PR via Changesets
2. tags released codemod package versions as `<package-name>@v<version>`
3. publishes each tagged codemod through `codemod/publish-action@v1`
32 changes: 0 additions & 32 deletions LEGACY.md
View file
Open in desktop

This file was deleted.

41 changes: 21 additions & 20 deletions PARITY_STATUS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
# Parity Status

Last updated: 2026-04-15
Last updated: 2026-04-21

Status meanings:

- `Certified`: replacement-grade confidence. Tests are green, public test posture is portable, and there are no known logic gaps versus the original jscodeshift codemod. May include safe extensions on edge cases the original did not handle, as long as original behavior remains unbroken.
- `Legacy`: available as a jscodeshift codemod under `codemods/legacy/`. Not yet ported to JSSG.
- `Fixture-Verified`: JSSG port exists in this branch, package fixture suites are green, and type checks pass. May include differential/error/warning tests, but replacement-grade real-repo parity has not yet been established to the same standard as `Certified`.
- `Deferred`: intentionally out of scope for now. Not ported to JSSG yet.

## JSSG Codemods

Expand All @@ -17,23 +18,23 @@ Status meanings:
| `replace-reactdom-render` | `replace-reactdom-render.ts` | `Certified` | Full fixture coverage plus multi-alias regression tests are green. |
| `react-proptypes-to-prop-types` | `React-PropTypes-to-prop-types.js` | `Certified` | Full original fixture surface is green. No JSSG-specific rollout blocker found. |
| `use-context-hook` | `use-context-hook.ts` | `Certified` | Full fixture coverage plus multi-import regression tests are green. |

## Legacy Codemods

These codemods are available as jscodeshift transforms under [`codemods/legacy/transforms/`](./codemods/legacy/transforms/):
| `create-element-to-jsx` | `create-element-to-jsx.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. 34 fixture cases plus error/differential checks are green. |
| `error-boundaries` | `error-boundaries.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `find-dom-node` | `findDOMNode.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `manual-bind-to-arrow` | `manual-bind-to-arrow.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `pure-component` | `pure-component.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. 11 fixtures plus warning/differential checks are green. |
| `pure-render-mixin` | `pure-render-mixin.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `react-dom-to-react-dom-factories` | `React-DOM-to-react-dom-factories.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `react-native-view-prop-types` | `ReactNative-View-propTypes.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `react-to-react-dom` | `react-to-react-dom.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. 14 fixtures plus error tests are green. |
| `remove-context-provider` | `remove-context-provider.ts` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `remove-forward-ref` | `remove-forward-ref.ts` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `rename-unsafe-lifecycles` | `rename-unsafe-lifecycles.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `sort-comp` | `sort-comp.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. Package fixtures and type checks are green. |
| `update-react-imports` | `update-react-imports.js` | `Fixture-Verified` | Imported from `align-with-legacy-codemods` on 2026-04-20. 33 fixtures are green. |

## Deferred Codemods

These codemods are still deferred and do not have a JSSG port in this repo:

- `class`
- `create-element-to-jsx`
- `error-boundaries`
- `findDOMNode`
- `manual-bind-to-arrow`
- `pure-component`
- `pure-render-mixin`
- `React-DOM-to-react-dom-factories`
- `ReactNative-View-propTypes`
- `react-to-react-dom`
- `remove-context-provider`
- `remove-forward-ref`
- `rename-unsafe-lifecycles`
- `sort-comp`
- `update-react-imports`
55 changes: 28 additions & 27 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
# React Codemods

This repository contains a collection of codemods to help update React apps.
This repository contains the public JSSG codemods for React migrations and cleanup work.

All codemods are free and open source, with the source code available in this repository.

## Usage

We recommend using the [`codemod`](https://go.codemod.com/github) command for running codemods.

```bash
npx codemod <codemod-name> --target <path>
```

- `<codemod-name>` — name of the codemod (see available codemods below)
- `<path>` — files or directory to transform

Check [codemod docs](https://go.codemod.com/cli-docs) for the full list of available commands.
Check [Codemod docs](https://go.codemod.com/cli-docs) for the full list of available commands.

## Available Codemods

All React codemods are also available in the [Codemod Registry](https://go.codemod.com/react-codemods).
All React codemods are also available in the [Codemod Registry](https://app.codemod.com/registry?q=scope:@react-new).

#### `react-19-migration-recipe`

Expand All @@ -29,7 +27,7 @@ Runs all React 19 migration codemods in sequence.
npx codemod @react-new/react-19-migration-recipe --target <path>
```

See [`react-19-migration-recipe`](./codemods/jssg/react-19-migration-recipe/) for details.
See [@react-new/react-19-migration-recipe](https://app.codemod.com/registry/@react-new/react-19-migration-recipe).

#### `use-context-hook`

Expand All @@ -39,7 +37,7 @@ Replaces usages of `React.useContext(...)` with `React.use(...)`.
npx codemod @react-new/use-context-hook --target <path>
```

See [`use-context-hook`](./codemods/jssg/use-context-hook/) for details.
See [@react-new/use-context-hook](https://app.codemod.com/registry/@react-new/use-context-hook).

#### `replace-act-import`

Expand All @@ -49,7 +47,7 @@ Updates `act` import path from `react-dom/test-utils` to `react`.
npx codemod @react-new/replace-act-import --target <path>
```

See [`replace-act-import`](./codemods/jssg/replace-act-import/) for details.
See [@react-new/replace-act-import](https://app.codemod.com/registry/@react-new/replace-act-import).

#### `replace-string-ref`

Expand All @@ -59,7 +57,7 @@ Replaces deprecated string refs with callback refs.
npx codemod @react-new/replace-string-ref --target <path>
```

See [`replace-string-ref`](./codemods/jssg/replace-string-ref/) for details.
See [@react-new/replace-string-ref](https://app.codemod.com/registry/@react-new/replace-string-ref).

#### `replace-use-form-state`

Expand All @@ -69,7 +67,7 @@ Replaces usages of `useFormState()` with `useActionState()`.
npx codemod @react-new/replace-use-form-state --target <path>
```

See [`replace-use-form-state`](./codemods/jssg/replace-use-form-state/) for details.
See [@react-new/replace-use-form-state](https://app.codemod.com/registry/@react-new/replace-use-form-state).

#### `replace-reactdom-render`

Expand All @@ -79,7 +77,7 @@ Replaces usages of `ReactDOM.render()` with `createRoot(node).render()`.
npx codemod @react-new/replace-reactdom-render --target <path>
```

See [`replace-reactdom-render`](./codemods/jssg/replace-reactdom-render/) for details.
See [@react-new/replace-reactdom-render](https://app.codemod.com/registry/@react-new/replace-reactdom-render).

#### `react-proptypes-to-prop-types`

Expand All @@ -89,11 +87,24 @@ Replaces `React.PropTypes` references with the `prop-types` package and adds the
npx codemod @react-new/react-proptypes-to-prop-types --target <path>
```

See [`react-proptypes-to-prop-types`](./codemods/jssg/react-proptypes-to-prop-types/) for details.

#### Legacy Codemods

Additional jscodeshift-based codemods from the original `react-codemod` project are available under [`codemods/legacy/`](./codemods/legacy/). See [LEGACY.md](./LEGACY.md) for the full catalog.
See [@react-new/react-proptypes-to-prop-types](https://app.codemod.com/registry/@react-new/react-proptypes-to-prop-types).

#### Additional useful React codemods

- [`create-element-to-jsx`](https://app.codemod.com/registry/@react-new/create-element-to-jsx)
- [`error-boundaries`](https://app.codemod.com/registry/@react-new/error-boundaries)
- [`find-dom-node`](https://app.codemod.com/registry/@react-new/find-dom-node)
- [`manual-bind-to-arrow`](https://app.codemod.com/registry/@react-new/manual-bind-to-arrow)
- [`pure-component`](https://app.codemod.com/registry/@react-new/pure-component)
- [`pure-render-mixin`](https://app.codemod.com/registry/@react-new/pure-render-mixin)
- [`react-dom-to-react-dom-factories`](https://app.codemod.com/registry/@react-new/react-dom-to-react-dom-factories)
- [`react-native-view-prop-types`](https://app.codemod.com/registry/@react-new/react-native-view-prop-types)
- [`react-to-react-dom`](https://app.codemod.com/registry/@react-new/react-to-react-dom)
- [`remove-context-provider`](https://app.codemod.com/registry/@react-new/remove-context-provider)
- [`remove-forward-ref`](https://app.codemod.com/registry/@react-new/remove-forward-ref)
- [`rename-unsafe-lifecycles`](https://app.codemod.com/registry/@react-new/rename-unsafe-lifecycles)
- [`sort-comp`](https://app.codemod.com/registry/@react-new/sort-comp)
- [`update-react-imports`](https://app.codemod.com/registry/@react-new/update-react-imports)

## Development

Expand All @@ -114,16 +125,6 @@ Run type checking:
pnpm run check-types
```

Run legacy codemod tests:

```bash
pnpm run test:legacy
```

## Support and Contributing

If you want to contribute, you're welcome to submit a pull request.

## License

react-codemod is [MIT licensed](./LICENSE).
If you want to contribute, see [CONTRIBUTING.md](./CONTRIBUTING.md).
Loading
Loading