feat: Adds React 18 and 19 migration plugin#1339
Conversation
🔍 Skill Validator Results21 resource(s) checked | ✅ All checks passed Full output
|
SaravananRajaraman
force-pushed
the
staged
branch
3 times, most recently
from
b36a265 to
9bf3358
Compare
There was a problem hiding this comment.
Pull request overview
Adds two new Copilot CLI plugins (react18-upgrade, react19-upgrade) plus a set of React 18/19 migration skills and orchestrator agents to guide audits, dependency upgrades, source migrations, and test-suite modernization.
Changes:
- Introduces React 18 and React 19 upgrade plugins (plugin metadata + READMEs) and registers them in docs/marketplace lists.
- Adds multiple React migration skills (batching, lifecycle, legacy context, string refs, dependency compatibility, React 19 patterns) with reference guides.
- Adds React 18/19 agent definitions for audit/dep/migrate/test orchestration.
Reviewed changes
Copilot reviewed 50 out of 50 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| skills/react19-test-patterns/SKILL.md | React 19 test-migration patterns skill content. |
| skills/react19-source-patterns/SKILL.md | React 19 source-migration patterns and quick reference table. |
| skills/react19-source-patterns/references/api-migrations.md | Detailed React 19 API migration reference examples. |
| skills/react19-concurrent-patterns/SKILL.md | React 19 concurrent APIs guidance and “preserve vs adopt” rules. |
| skills/react19-concurrent-patterns/references/react19-use.md | Reference for the React 19 use() pattern. |
| skills/react19-concurrent-patterns/references/react19-suspense.md | Reference for Suspense-for-data patterns in React 19. |
| skills/react19-concurrent-patterns/references/react19-actions.md | Reference for React 19 Actions-related hooks/patterns. |
| skills/react18-string-refs/SKILL.md | React 18 string refs migration skill. |
| skills/react18-string-refs/references/patterns.md | Detailed before/after patterns for string refs. |
| skills/react18-lifecycle-patterns/SKILL.md | React 18 unsafe lifecycle migration decision guide. |
| skills/react18-lifecycle-patterns/references/componentWillUpdate.md | Reference for migrating componentWillUpdate. |
| skills/react18-lifecycle-patterns/references/componentWillReceiveProps.md | Reference for migrating componentWillReceiveProps. |
| skills/react18-lifecycle-patterns/references/componentWillMount.md | Reference for migrating componentWillMount. |
| skills/react18-legacy-context/SKILL.md | React 18 legacy context migration skill. |
| skills/react18-legacy-context/references/single-context.md | Full example for migrating a single legacy context. |
| skills/react18-legacy-context/references/multi-context.md | Guidance for multiple legacy contexts in one codebase. |
| skills/react18-legacy-context/references/context-file-template.md | Template for new context module files. |
| skills/react18-enzyme-to-rtl/SKILL.md | Enzyme → RTL migration skill for React 18 upgrades. |
| skills/react18-enzyme-to-rtl/references/enzyme-api-map.md | Detailed Enzyme-to-RTL API mapping. |
| skills/react18-enzyme-to-rtl/references/async-patterns.md | Async testing patterns for RTL migrations. |
| skills/react18-dep-compatibility/SKILL.md | React dependency compatibility matrix and decision tree. |
| skills/react18-dep-compatibility/references/router-migration.md | Scope assessment for react-router v5→v6 migration. |
| skills/react18-dep-compatibility/references/apollo-details.md | Apollo client compatibility notes for React 18+. |
| skills/react18-batching-patterns/SKILL.md | React 18 automatic batching diagnosis/migration guidance. |
| skills/react18-batching-patterns/references/flushSync-guide.md | flushSync usage guidance. |
| skills/react18-batching-patterns/references/batching-categories.md | Categorized before/after batching-fix patterns. |
| skills/react-audit-grep-patterns/SKILL.md | Grep-based audit command library skill. |
| skills/react-audit-grep-patterns/references/test-scans.md | Test-specific grep scans used during audits. |
| skills/react-audit-grep-patterns/references/react19-scans.md | React 19 audit scan command reference. |
| skills/react-audit-grep-patterns/references/react18-scans.md | React 18.3.1 audit scan command reference. |
| skills/react-audit-grep-patterns/references/dep-scans.md | Dependency/peer-conflict scan reference. |
| plugins/react19-upgrade/README.md | User-facing README for the React 19 upgrade plugin. |
| plugins/react19-upgrade/.github/plugin/plugin.json | Plugin manifest for react19-upgrade. |
| plugins/react18-upgrade/README.md | User-facing README for the React 18 upgrade plugin. |
| plugins/react18-upgrade/.github/plugin/plugin.json | Plugin manifest for react18-upgrade. |
| docs/README.skills.md | Registers newly added skills in docs. |
| docs/README.plugins.md | Registers newly added plugins in docs. |
| agents/react19-test-guardian.agent.md | React 19 test-suite fix/verification agent definition. |
| agents/react19-migrator.agent.md | React 19 source migration agent definition. |
| agents/react19-dep-surgeon.agent.md | React 19 dependency upgrade agent definition. |
| agents/react19-commander.agent.md | React 19 orchestrator agent definition. |
| agents/react19-auditor.agent.md | React 19 audit agent definition. |
| agents/react18-test-guardian.agent.md | React 18 test-suite fix/verification agent definition updates. |
| agents/react18-dep-surgeon.agent.md | React 18 dependency upgrade agent definition updates. |
| agents/react18-commander.agent.md | React 18 orchestrator agent definition updates. |
| agents/react18-class-surgeon.agent.md | React 18 class-component migration agent definition updates. |
| agents/react18-batching-fixer.agent.md | React 18 batching regression fixer agent definition updates. |
| .github/plugin/marketplace.json | Adds react18/react19 plugins to marketplace catalog. |
Comments suppressed due to low confidence (1)
skills/react18-dep-compatibility/SKILL.md:101
- The markdown code fence opened for the JSON example is never closed, which will break formatting for the remainder of the rendered skill. Please add the missing closing ``` and include (or remove) the intended example content.
- The conflict is only a peer dep declaration mismatch (not actual API incompatibility)
Document every `--legacy-peer-deps` usage:
```json
b355eab to
911334d
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 50 out of 50 changed files in this pull request and generated 5 comments.
Comments suppressed due to low confidence (1)
skills/react18-dep-compatibility/SKILL.md:104
- The JSON code fence is opened but never populated or closed, leaving an empty ```json block at the end of the file. Either provide the intended example content and close the fence, or remove the dangling code block.
- The conflict is only a peer dep declaration mismatch (not actual API incompatibility)
Document every `--legacy-peer-deps` usage:
```json
b600e04 to
ea6db71
Compare
aaronpowell
left a comment
aaronpowell
left a comment
There was a problem hiding this comment.
Looks like something has gone wrong with the PR as there's a bunch of changes to the Learning Hub section which seems incorrect for the scope of the PR.
SaravananRajaraman
force-pushed
the
staged
branch
5 times, most recently
from
64c18d4 to
179a129
Compare
SaravananRajaraman
force-pushed
the
staged
branch
from
179a129 to
64c18d4
Compare
SaravananRajaraman
left a comment
SaravananRajaraman
left a comment
There was a problem hiding this comment.
Updated the changes
SaravananRajaraman
force-pushed
the
staged
branch
from
64c18d4 to
d957332
Compare
SaravananRajaraman
force-pushed
the
staged
branch
2 times, most recently
from
cb6aec5 to
c8c683d
Compare
SaravananRajaraman
force-pushed
the
staged
branch
from
c8c683d to
d817105
Compare
SaravananRajaraman
force-pushed
the
staged
branch
from
ea094dd to
7b89fb9
Compare
- Adds React 18 and 19 migration orchestration plugins - Introduces comprehensive upgrade toolkits for migrating legacy React 16/17 and 18 codebases to React 18.3.1 and 19, respectively. Each plugin bundles specialized agents and skills for exhaustive audit, dependency management, class/component API migration, test suite transformation, and batching regression fixes. - The React 18 toolkit targets class-component-heavy apps, ensures safe lifecycle and context transitions, resolves dependency blockers, and fully automates test migrations including Enzyme removal. The React 19 toolkit addresses breaking changes such as removal of legacy APIs, defaultProps on function components, and forwardRef, while enforcing a gated, memory-resumable migration pipeline. - Both plugins update documentation, plugin registries, and skill references to support reliable, repeatable enterprise-scale React migrations.
SaravananRajaraman
force-pushed
the
staged
branch
from
0653191 to
5425dba
Compare
| } | ||
| ``` | ||
|
|
||
| **Note:** `useImperativeHandle` is still valid; only the `forwardRef` wrapper is removed. |
There was a problem hiding this comment.
This note says the forwardRef wrapper is removed in React 19, but forwardRef is still a supported API; what changes is that many patterns can be simplified to pass refs as regular props (optional modernization). Reword this to avoid implying forwardRef breaks in React 19, and clarify when it’s safe/beneficial to refactor vs when forwardRef is still required (e.g., for library/public component APIs).
| @@ -0,0 +1,30 @@ | |||
| { | |||
| "name": "react19-upgrade", | |||
| "description": "Enterprise React 19 migration toolkit with specialized agents and skills for upgrading React 18 codebases to React 19. Includes auditor, dependency surgeon, source code migrator, and test guardian. Handles removal of deprecated APIs including ReactDOM.render, forwardRef, defaultProps, legacy context, string refs, and more.", | |||
There was a problem hiding this comment.
The plugin description claims React 19 removes forwardRef. forwardRef remains supported; ref-as-prop is an optional modernization and not a required breaking-change migration. Please adjust the description to avoid misleading users about required work for a React 19 upgrade.
| "description": "Enterprise React 19 migration toolkit with specialized agents and skills for upgrading React 18 codebases to React 19. Includes auditor, dependency surgeon, source code migrator, and test guardian. Handles removal of deprecated APIs including ReactDOM.render, forwardRef, defaultProps, legacy context, string refs, and more.", | |
| "description": "Enterprise React 19 migration toolkit with specialized agents and skills for upgrading React 18 codebases to React 19. Includes auditor, dependency surgeon, source code migrator, and test guardian. Handles migration from removed and deprecated APIs such as ReactDOM.render, legacy context, and string refs, and can help modernize patterns such as forwardRef and defaultProps where appropriate.", |
| | [project-planning](../plugins/project-planning/README.md) | Tools and guidance for software project planning, feature breakdown, epic management, implementation planning, and task organization for development teams. | 15 items | planning, project-management, epic, feature, implementation, task, architecture, technical-spike | | ||
| | [python-mcp-development](../plugins/python-mcp-development/README.md) | Complete toolkit for building Model Context Protocol (MCP) servers in Python using the official SDK with FastMCP. Includes instructions for best practices, a prompt for generating servers, and an expert chat mode for guidance. | 2 items | python, mcp, model-context-protocol, fastmcp, server-development | | ||
| | [react18-upgrade](../plugins/react18-upgrade/README.md) | Enterprise React 18 migration toolkit with specialized agents and skills for upgrading React 16/17 class-component codebases to React 18.3.1. Includes auditor, dependency surgeon, class component migration specialist, automatic batching fixer, and test guardian. | 13 items | react18, react, migration, upgrade, class-components, lifecycle, batching | | ||
| | [react19-upgrade](../plugins/react19-upgrade/README.md) | Enterprise React 19 migration toolkit with specialized agents and skills for upgrading React 18 codebases to React 19. Includes auditor, dependency surgeon, source code migrator, and test guardian. Handles removal of deprecated APIs including ReactDOM.render, forwardRef, defaultProps, legacy context, string refs, and more. | 8 items | react19, react, migration, upgrade, hooks, modern-react | |
There was a problem hiding this comment.
This plugin entry repeats the claim that React 19 removes forwardRef. Since forwardRef is still supported, the plugin description here should be updated to avoid stating it as a breaking removal (and kept consistent with plugins/react19-upgrade/.github/plugin/plugin.json).
| | [react19-upgrade](../plugins/react19-upgrade/README.md) | Enterprise React 19 migration toolkit with specialized agents and skills for upgrading React 18 codebases to React 19. Includes auditor, dependency surgeon, source code migrator, and test guardian. Handles removal of deprecated APIs including ReactDOM.render, forwardRef, defaultProps, legacy context, string refs, and more. | 8 items | react19, react, migration, upgrade, hooks, modern-react | | |
| | [react19-upgrade](../plugins/react19-upgrade/README.md) | Enterprise React 19 migration toolkit with specialized agents and skills for upgrading React 18 codebases to React 19. Includes auditor, dependency surgeon, source code migrator, and test guardian. Handles removal of deprecated APIs including ReactDOM.render, defaultProps, legacy context, string refs, and more. | 8 items | react19, react, migration, upgrade, hooks, modern-react | |
| { | ||
| "name": "react19-upgrade", | ||
| "source": "react19-upgrade", | ||
| "description": "Enterprise React 19 migration toolkit with specialized agents and skills for upgrading React 18 codebases to React 19. Includes auditor, dependency surgeon, source code migrator, and test guardian. Handles removal of deprecated APIs including ReactDOM.render, forwardRef, defaultProps, legacy context, string refs, and more.", |
There was a problem hiding this comment.
This marketplace entry includes a description stating React 19 removes forwardRef, which is misleading because forwardRef remains supported. After correcting the source plugin.json description, regenerate/update this entry so the marketplace metadata stays accurate.
| "description": "Enterprise React 19 migration toolkit with specialized agents and skills for upgrading React 18 codebases to React 19. Includes auditor, dependency surgeon, source code migrator, and test guardian. Handles removal of deprecated APIs including ReactDOM.render, forwardRef, defaultProps, legacy context, string refs, and more.", | |
| "description": "Enterprise React 19 migration toolkit with specialized agents and skills for upgrading React 18 codebases to React 19. Includes auditor, dependency surgeon, source code migrator, and test guardian. Handles migration away from deprecated APIs and legacy patterns including ReactDOM.render, defaultProps, legacy context, string refs, and more.", |
| ### componentWillMount - what does it do? | ||
|
|
||
| | What it does | Correct migration | Reference | | ||
| |---|---|---| | ||
| | Sets initial state (`this.setState(...)`) | Move to `constructor` | [→ componentWillMount.md](references/componentWillMount.md#case-a) | | ||
| | Runs a side effect (fetch, subscription, DOM) | Move to `componentDidMount` | [→ componentWillMount.md](references/componentWillMount.md#case-b) | | ||
| | Derives initial state from props | Move to `constructor` with props | [→ componentWillMount.md](references/componentWillMount.md#case-c) | |
There was a problem hiding this comment.
These links use short fragment IDs like #case-a, but the referenced markdown headings use a nonstandard {#case-a} suffix. GitHub-flavored markdown and the site renderer (marked) won’t create anchors from {#...} in headings, so these fragments are likely broken. Consider removing the {#...} text and updating links to the generated heading slugs, or add explicit HTML anchors that match the fragment IDs.
| # componentWillMount Migration Reference | ||
|
|
||
| ## Case A - Initializes State {#case-a} | ||
|
|
||
| The method only calls `this.setState()` with static or computed values that do not depend on async operations. |
There was a problem hiding this comment.
The {#case-a} suffix in this heading is not standard markdown anchor syntax and will likely render as literal text, while also preventing links like ...#case-a from working as intended. Use a markdown-compatible approach for anchors (e.g., rely on the generated heading slug, or add an explicit HTML anchor) and remove the {#...} from the visible heading text.
| | Pattern | Reference | | ||
| |---|---| | ||
| | Single ref on a DOM element | [→ patterns.md#single-ref](references/patterns.md#single-ref) | | ||
| | Multiple refs in one component | [→ patterns.md#multiple-refs](references/patterns.md#multiple-refs) | | ||
| | Refs in a list / dynamic refs | [→ patterns.md#list-refs](references/patterns.md#list-refs) | | ||
| | Callback refs (alternative approach) | [→ patterns.md#callback-refs](references/patterns.md#callback-refs) | | ||
| | Ref passed to a child component | [→ patterns.md#forwarded-refs](references/patterns.md#forwarded-refs) | |
There was a problem hiding this comment.
The pattern map links to fragments like #single-ref / #multiple-refs, but the referenced headings use a nonstandard {#...} suffix. GitHub markdown and the site renderer (marked) won’t treat {#...} as an anchor declaration, so these links are likely broken. Update headings/anchors (or the link fragments) to use a renderer-compatible scheme.
| # String Refs - All Migration Patterns | ||
|
|
||
| ## Single Ref on a DOM Element {#single-ref} | ||
|
|
||
| The most common case - one ref to one DOM node. |
There was a problem hiding this comment.
The {#single-ref} suffix is not standard markdown anchor syntax and will likely render as literal text, which also means links targeting #single-ref may not work. Use a markdown-compatible anchor approach (generated heading slug or explicit HTML anchor) and remove {#...} from the heading text.
| @@ -0,0 +1,208 @@ | |||
| # Batching Categories - Before/After Patterns | |||
|
|
|||
| ## Category A - this.state Read After Await (Silent Bug) {#category-a} | |||
There was a problem hiding this comment.
These headings include {#category-*} suffixes, which aren’t standard in GitHub-flavored markdown / the site’s markdown renderer and will likely show up as literal text in the rendered docs. If you need stable intra-doc anchors, use a renderer-compatible approach (generated heading slugs or explicit HTML anchors) and remove the {#...} from headings.
| ## Category A - this.state Read After Await (Silent Bug) {#category-a} | |
| ## Category A - this.state Read After Await (Silent Bug) |
Adding Agent Plugin with Skills and Custom agent orchestrator to support React 18 and 19 migration.
Introduces comprehensive React 18 and React 19 migration plugins with specialized agents and skills for code auditing, dependency upgrades, source migration, and test suite modernization.
Targets legacy class-component-heavy and modern codebases, handling breaking API removals, automatic batching, context migration, string refs, and test framework transitions (including Enzyme to RTL).
Improves upgrade safety, repeatability, and code quality by providing memory checkpointing, reference migration patterns, and strict validation gates for zero deprecation warnings and test failures.
Pull Request Checklist
npm startand verified thatREADME.mdis up to date.stagedbranch for this pull request.Description
Type of Contribution
Additional Notes
By submitting this pull request, I confirm that my contribution abides by the Code of Conduct and will be licensed under the MIT License.