diff --git a/plugins/framework-migration/commands/deps-upgrade.md b/plugins/framework-migration/commands/deps-upgrade.md index 71c4ca1..439f770 100644 --- a/plugins/framework-migration/commands/deps-upgrade.md +++ b/plugins/framework-migration/commands/deps-upgrade.md @@ -660,8 +660,8 @@ framework_upgrades = { 'react': { 'upgrade_command': 'npm install react@{version} react-dom@{version}', 'codemods': [ - 'npx react-codemod rename-unsafe-lifecycles', - 'npx react-codemod error-boundaries' + 'npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/', + 'npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/error-boundaries.js src/' ], 'verification': [ 'npm run build', @@ -671,7 +671,7 @@ framework_upgrades = { }, 'vue': { 'upgrade_command': 'npm install vue@{version}', - 'migration_tool': 'npx @vue/migration-tool', + 'migration_tool': 'npx vue-codemod -t ', 'breaking_changes': { '2_to_3': [ 'Composition API', diff --git a/plugins/framework-migration/skills/dependency-upgrade/SKILL.md b/plugins/framework-migration/skills/dependency-upgrade/SKILL.md index 36ee8e3..26c2cd3 100644 --- a/plugins/framework-migration/skills/dependency-upgrade/SKILL.md +++ b/plugins/framework-migration/skills/dependency-upgrade/SKILL.md @@ -161,24 +161,24 @@ describe("Dependency Compatibility", () => { ### Identifying Breaking Changes ```bash -# Use changelog parsers -npx changelog-parser react 16.0.0 17.0.0 - -# Or manually check -curl https://raw.githubusercontent.com/facebook/react/main/CHANGELOG.md +# Check the changelog directly +curl https://raw.githubusercontent.com/facebook/react/master/CHANGELOG.md ``` ### Codemod for Automated Fixes ```bash -# React upgrade codemods -npx react-codeshift +# Run jscodeshift with transform URL +npx jscodeshift -t -# Example: Update lifecycle methods -npx react-codeshift \ - --parser tsx \ - --transform react-codeshift/transforms/rename-unsafe-lifecycles.js \ - src/ +# Example: Rename unsafe lifecycle methods +npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/ + +# For TypeScript files +npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --parser=tsx src/ + +# Dry run to preview changes +npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --dry src/ ``` ### Custom Migration Script diff --git a/plugins/framework-migration/skills/react-modernization/SKILL.md b/plugins/framework-migration/skills/react-modernization/SKILL.md index a8b5fa5..72970e6 100644 --- a/plugins/framework-migration/skills/react-modernization/SKILL.md +++ b/plugins/framework-migration/skills/react-modernization/SKILL.md @@ -327,21 +327,20 @@ function ProfileTimeline() { ### Run React Codemods ```bash -# Install jscodeshift -npm install -g jscodeshift +# Rename unsafe lifecycle methods +npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/ -# React 16.9 codemod (rename unsafe lifecycle methods) -npx react-codeshift +# Update React imports (React 17+) +npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/update-react-imports.js src/ -# Example: Rename UNSAFE_ methods -npx react-codeshift --parser=tsx \ - --transform=react-codeshift/transforms/rename-unsafe-lifecycles.js \ - src/ +# Add error boundaries +npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/error-boundaries.js src/ -# Update to new JSX Transform (React 17+) -npx react-codeshift --parser=tsx \ - --transform=react-codeshift/transforms/new-jsx-transform.js \ - src/ +# For TypeScript files +npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --parser=tsx src/ + +# Dry run to preview changes +npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --dry --print src/ # Class to Hooks (third-party) npx codemod react/hooks/convert-class-to-function src/