mirror of
https://github.com/github/awesome-copilot.git
synced 2026-04-11 02:35:55 +00:00
7f7b1b9b46
- 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.
48 lines
2.4 KiB
Markdown
48 lines
2.4 KiB
Markdown
---
|
|
name: react18-legacy-context
|
|
description: 'Provides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API. Use this skill whenever migrating legacy context in class components - this is always a cross-file migration requiring the provider AND all consumers to be updated together. Use it before touching any contextTypes or childContextTypes code, because migrating only the provider without the consumers (or vice versa) will cause a runtime failure. Always read this skill before writing any context migration - the cross-file coordination steps here prevent the most common context migration bugs.'
|
|
---
|
|
|
|
# React 18 Legacy Context Migration
|
|
|
|
Legacy context (`contextTypes`, `childContextTypes`, `getChildContext`) was deprecated in React 16.3 and warns in React 18.3.1. It is **removed in React 19**.
|
|
|
|
## This Is Always a Cross-File Migration
|
|
|
|
Unlike most other migrations that touch one file at a time, context migration requires coordinating:
|
|
1. Create the context object (usually a new file)
|
|
2. Update the **provider** component
|
|
3. Update **every consumer** component
|
|
|
|
Missing any consumer leaves the app broken - it will read from the wrong context or get `undefined`.
|
|
|
|
## Migration Steps (Always Follow This Order)
|
|
|
|
```
|
|
Step 1: Find the provider (childContextTypes + getChildContext)
|
|
Step 2: Find ALL consumers (contextTypes)
|
|
Step 3: Create the context file
|
|
Step 4: Update the provider
|
|
Step 5: Update each consumer (class components → contextType, function components → useContext)
|
|
Step 6: Verify - run the app, check no legacy context warnings remain
|
|
```
|
|
|
|
## Scan Commands
|
|
|
|
```bash
|
|
# Find all providers
|
|
grep -rn "childContextTypes\|getChildContext" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
|
|
|
|
# Find all consumers
|
|
grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
|
|
|
|
# Find this.context usage (may be legacy or modern - check which)
|
|
grep -rn "this\.context\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
|
|
```
|
|
|
|
## Reference Files
|
|
|
|
- **`references/single-context.md`** - complete migration for one context (theme, auth, etc.) with provider + class consumer + function consumer
|
|
- **`references/multi-context.md`** - apps with multiple legacy contexts (nested providers, multiple consumers of different contexts)
|
|
- **`references/context-file-template.md`** - the standard file structure for a new context module
|