mirror of
https://github.com/github/awesome-copilot.git
synced 2026-04-11 18:55:55 +00:00
feat: Adds React 18 and 19 migration plugin (#1339)
- 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.
This commit is contained in:
Saravanan Rajaraman
committed by
GitHub
GitHub
parent
f4909cd581
commit
7f7b1b9b46
36
plugins/react18-upgrade/.github/plugin/plugin.json
vendored
Normal file
36
plugins/react18-upgrade/.github/plugin/plugin.json
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "react18-upgrade",
|
||||
"description": "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.",
|
||||
"version": "1.0.0",
|
||||
"keywords": [
|
||||
"react18",
|
||||
"react",
|
||||
"migration",
|
||||
"upgrade",
|
||||
"class-components",
|
||||
"lifecycle",
|
||||
"batching"
|
||||
],
|
||||
"author": {
|
||||
"name": "Awesome Copilot Community"
|
||||
},
|
||||
"repository": "https://github.com/github/awesome-copilot",
|
||||
"license": "MIT",
|
||||
"agents": [
|
||||
"./agents/react18-auditor.md",
|
||||
"./agents/react18-commander.md",
|
||||
"./agents/react18-dep-surgeon.md",
|
||||
"./agents/react18-class-surgeon.md",
|
||||
"./agents/react18-batching-fixer.md",
|
||||
"./agents/react18-test-guardian.md"
|
||||
],
|
||||
"skills": [
|
||||
"./skills/react-audit-grep-patterns/",
|
||||
"./skills/react18-batching-patterns/",
|
||||
"./skills/react18-dep-compatibility/",
|
||||
"./skills/react18-enzyme-to-rtl/",
|
||||
"./skills/react18-legacy-context/",
|
||||
"./skills/react18-lifecycle-patterns/",
|
||||
"./skills/react18-string-refs/"
|
||||
]
|
||||
}
|
||||
84
plugins/react18-upgrade/README.md
Normal file
84
plugins/react18-upgrade/README.md
Normal file
@@ -0,0 +1,84 @@
|
||||
# React 18 Upgrade Plugin
|
||||
|
||||
Enterprise toolkit for migrating React 16/17 class-component codebases to React 18.3.1. Includes six specialized agents and seven skills targeting the specific challenges of upgrading legacy class-heavy applications.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
copilot plugin install react18-upgrade@awesome-copilot
|
||||
```
|
||||
|
||||
## What's Included
|
||||
|
||||
### Agents
|
||||
|
||||
1. **react18-commander** - Master orchestrator that coordinates the entire migration pipeline through audit, dependencies, class-component surgery, automatic batching fixes, and test verification phases.
|
||||
|
||||
2. **react18-auditor** - Deep-scan specialist that identifies every React 18 breaking change: unsafe lifecycle methods, legacy context, string refs, batching vulnerabilities, and all deprecation patterns.
|
||||
|
||||
3. **react18-dep-surgeon** - Dependency upgrade specialist that pins react@18.3.1 exactly, upgrades testing-library to v14+, resolves all peer conflicts, and returns GO/NO-GO confirmation.
|
||||
|
||||
4. **react18-class-surgeon** - Lifecycle and API migration specialist that performs semantic migrations for:
|
||||
- `componentWillMount` → `componentDidMount` or constructor
|
||||
- `componentWillReceiveProps` → `getDerivedStateFromProps` or `componentDidUpdate`
|
||||
- `componentWillUpdate` → `getSnapshotBeforeUpdate` or `componentDidUpdate`
|
||||
- Legacy Context → `createContext`
|
||||
- String refs → `React.createRef()`
|
||||
- `findDOMNode` → direct refs
|
||||
- `ReactDOM.render` → `createRoot`
|
||||
|
||||
5. **react18-batching-fixer** - Automatic batching regression specialist that identifies and fixes the #1 silent runtime breaker in React 18: setState calls in async methods that relied on immediate intermediate re-renders.
|
||||
|
||||
6. **react18-test-guardian** - Test suite fixer that handles Enzyme-to-RTL rewrites, RTL v14 API updates, automatic batching test regressions, StrictMode double-invoke changes, and runs tests until zero failures.
|
||||
|
||||
### Skills
|
||||
|
||||
1. **react-audit-grep-patterns** - Reference grep patterns for auditing React 18 deprecations across class components.
|
||||
|
||||
2. **react18-batching-patterns** - Patterns and strategies for identifying and fixing automatic batching regressions.
|
||||
|
||||
3. **react18-dep-compatibility** - Dependency compatibility matrix for React 18 with migration paths for testing-library, Apollo, Emotion, react-router.
|
||||
|
||||
4. **react18-enzyme-to-rtl** - Complete guide for rewriting Enzyme tests to React Testing Library (RTL v14+).
|
||||
|
||||
5. **react18-legacy-context** - Migration patterns for legacy context API → `createContext`.
|
||||
|
||||
6. **react18-lifecycle-patterns** - Detailed migration patterns for all three unsafe lifecycle methods.
|
||||
|
||||
7. **react18-string-refs** - Reference implementations for migrating string refs to `React.createRef()`.
|
||||
|
||||
## Quick Start
|
||||
|
||||
```
|
||||
Ask: "Start implementing React 18 migration for my class-component codebase"
|
||||
```
|
||||
|
||||
The react18-commander will guide you through:
|
||||
|
||||
1. Audit → identify all breaking changes
|
||||
2. Deps → upgrade to react@18.3.1 + compatible libraries
|
||||
3. Class Surgery → migrate lifecycle methods and APIs
|
||||
4. Batching Fixes → fix automatic batching regressions
|
||||
5. Tests → migrate test suite and run to green
|
||||
|
||||
## Why React 18.3.1?
|
||||
|
||||
React 18.3.1 was released to surface **explicit warnings** for every API that React 19 will remove. A clean 18.3.1 run with zero warnings is the direct prerequisite for the React 19 migration.
|
||||
|
||||
## Key Features
|
||||
|
||||
- ✅ Targets class-component-heavy codebases (NOT just functional component patterns)
|
||||
- ✅ Automatic batching issue detection and `flushSync` recommendations
|
||||
- ✅ Enzyme test detection with full RTL rewrite capability
|
||||
- ✅ Memory-based resumable pipeline - survive interruptions
|
||||
- ✅ Zero tolerance for incomplete migrations - run to full success
|
||||
- ✅ StrictMode-aware test fixes
|
||||
- ✅ Apollo Client, Emotion, react-router compatibility handling
|
||||
|
||||
## Source
|
||||
|
||||
This plugin is part of [Awesome Copilot](https://github.com/github/awesome-copilot).
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
30
plugins/react19-upgrade/.github/plugin/plugin.json
vendored
Normal file
30
plugins/react19-upgrade/.github/plugin/plugin.json
vendored
Normal file
@@ -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.",
|
||||
"version": "1.0.0",
|
||||
"keywords": [
|
||||
"react19",
|
||||
"react",
|
||||
"migration",
|
||||
"upgrade",
|
||||
"hooks",
|
||||
"modern-react"
|
||||
],
|
||||
"author": {
|
||||
"name": "Awesome Copilot Community"
|
||||
},
|
||||
"repository": "https://github.com/github/awesome-copilot",
|
||||
"license": "MIT",
|
||||
"agents": [
|
||||
"./agents/react19-auditor.md",
|
||||
"./agents/react19-commander.md",
|
||||
"./agents/react19-dep-surgeon.md",
|
||||
"./agents/react19-migrator.md",
|
||||
"./agents/react19-test-guardian.md"
|
||||
],
|
||||
"skills": [
|
||||
"./skills/react19-concurrent-patterns/",
|
||||
"./skills/react19-source-patterns/",
|
||||
"./skills/react19-test-patterns/"
|
||||
]
|
||||
}
|
||||
112
plugins/react19-upgrade/README.md
Normal file
112
plugins/react19-upgrade/README.md
Normal file
@@ -0,0 +1,112 @@
|
||||
# React 19 Upgrade Plugin
|
||||
|
||||
Enterprise toolkit for migrating React 18 codebases to React 19. Includes five specialized agents and three skills targeting the specific challenges of upgrading to React 19's modern API surface.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
copilot plugin install react19-upgrade@awesome-copilot
|
||||
```
|
||||
|
||||
## What's Included
|
||||
|
||||
### Agents
|
||||
|
||||
1. **react19-commander** Master orchestrator that coordinates the entire migration pipeline through audit, dependencies, source code migration, and test verification phases.
|
||||
|
||||
2. **react19-auditor** Deep-scan specialist that identifies every React 19 breaking change and deprecated pattern:
|
||||
- Removed APIs: `ReactDOM.render`, `ReactDOM.hydrate`, `unmountComponentAtNode`, `findDOMNode`, `createFactory`, `react-dom/test-utils` exports
|
||||
- Legacy Context API (`contextTypes`, `childContextTypes`, `getChildContext`)
|
||||
- String refs (`this.refs.x`)
|
||||
- Deprecated patterns: `forwardRef`, `defaultProps` on function components, `useRef()` without initial value
|
||||
- Test-specific issues: `act` import location, `Simulate` usage, StrictMode changes
|
||||
|
||||
3. **react19-dep-surgeon** Dependency upgrade specialist that upgrades to react@19, handles @testing-library/react@16+, resolves all peer conflicts, and returns GO/NO-GO confirmation.
|
||||
|
||||
4. **react19-migrator** Source code migration engine that rewrites required React 19 changes and can apply optional modernizations for deprecated patterns:
|
||||
- `ReactDOM.render` → `createRoot`
|
||||
- `ReactDOM.hydrate` → `hydrateRoot`
|
||||
- `unmountComponentAtNode` → `root.unmount()`
|
||||
- `findDOMNode` → direct refs
|
||||
- Optional modernization: `forwardRef` → ref as direct prop
|
||||
- `defaultProps` → ES6 defaults
|
||||
- Legacy Context → `createContext`
|
||||
- String refs → `createRef`
|
||||
- `useRef()` → `useRef(null)`
|
||||
- `propTypes` → documentation comments
|
||||
|
||||
5. **react19-test-guardian** Test suite fixer that handles:
|
||||
- `act` import fixes (react-dom/test-utils → react)
|
||||
- `Simulate` → `fireEvent` migrations
|
||||
- StrictMode spy call count deltas (no more double-invoke in React 19)
|
||||
- `useRef` shape updates
|
||||
- Custom render helper verification
|
||||
- Error boundary test updates
|
||||
- Runs tests until zero failures
|
||||
|
||||
### Skills
|
||||
|
||||
1. **react19-concurrent-patterns** Deep patterns for React 19 concurrent features including Suspense, use() Hook, Server Components integration, and concurrent batching.
|
||||
|
||||
2. **react19-source-patterns** Migration patterns for source API changes including DOM/root APIs, refs, and context updates.
|
||||
|
||||
3. **react19-test-patterns** Comprehensive test migration guide covering `act()` semantics, error boundary testing, and StrictMode behavioral changes.
|
||||
|
||||
## Quick Start
|
||||
|
||||
```
|
||||
Ask: "Start implementing React 19 migration for my codebase"
|
||||
```
|
||||
|
||||
The react19-commander will guide you through:
|
||||
|
||||
1. Audit → identify all breaking changes
|
||||
2. Deps → upgrade to react@19 + compatible libraries
|
||||
3. Migrate → fix all deprecated APIs and patterns
|
||||
4. Tests → migrate test suite and run to green
|
||||
|
||||
## Breaking Changes from React 18
|
||||
|
||||
### Removed APIs
|
||||
|
||||
- `ReactDOM.render()` use `createRoot()`
|
||||
- `ReactDOM.hydrate()` use `hydrateRoot()`
|
||||
- `ReactDOM.unmountComponentAtNode()` use `root.unmount()`
|
||||
- `ReactDOM.findDOMNode()` use direct refs
|
||||
- `React.createFactory()` use JSX
|
||||
- `react-dom/test-utils` exports
|
||||
- Legacy Context API
|
||||
- String refs
|
||||
|
||||
### Deprecated Patterns (Still work but should migrate)
|
||||
|
||||
- `forwardRef` ref is now a direct prop
|
||||
- `defaultProps` on function components use ES6 defaults
|
||||
- `useRef()` without initial value pass `null`
|
||||
|
||||
### Behavioral Changes
|
||||
|
||||
- StrictMode no longer double-invokes effects (affects test call count assertions)
|
||||
- `propTypes` runtime validation removed (keep for documentation, but no runtime checks)
|
||||
|
||||
## Key Features
|
||||
|
||||
- ✅ Comprehensive removal of 8+ deprecated React APIs
|
||||
- ✅ Handles complex patterns: legacy context, forwardRef, defaultProps
|
||||
- ✅ Memory-based resumable pipeline survive interruptions
|
||||
- ✅ Zero tolerance for incomplete migrations run to full success
|
||||
- ✅ StrictMode-aware test fixes
|
||||
- ✅ Testing-library v16+ compatibility verification
|
||||
- ✅ Error boundary and async test pattern updates
|
||||
|
||||
## Prerequisite
|
||||
|
||||
This plugin assumes you're migrating from **React 18** codebases. If you're on React 16/17, use the **react18-upgrade** plugin first to reach React 18.3.1, then use this plugin for the React 19 final upgrade.
|
||||
|
||||
## Source
|
||||
|
||||
This plugin is part of [Awesome Copilot](https://github.com/github/awesome-copilot).
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user