codemod: install types into dev dependencies (#71257)

vercel · Oct 14, 2024 · 3a3c596 · 3a3c596
1 parent ccd166c
commit 3a3c596
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 10 deletions.
diff --git a/packages/next-codemod/bin/upgrade.ts b/packages/next-codemod/bin/upgrade.ts
@@ -154,17 +154,18 @@ export async function runUpgrade(
   fs.writeFileSync(appPackageJsonPath, JSON.stringify(appPackageJson, null, 2))
 
   const nextDependency = `next@${targetNextVersion}`
-  const reactDependencies = [
+  const dependenciesToInstall = [
     `react@${targetReactVersion}`,
     `react-dom@${targetReactVersion}`,
   ]
+  const devDependenciesToInstall = []
   if (
     targetReactVersion.startsWith('19.0.0-canary') ||
     targetReactVersion.startsWith('19.0.0-beta') ||
     targetReactVersion.startsWith('19.0.0-rc')
   ) {
-    reactDependencies.push(`@types/react@npm:types-react@rc`)
-    reactDependencies.push(`@types/react-dom@npm:types-react-dom@rc`)
+    devDependenciesToInstall.push(`@types/react@npm:types-react@rc`)
+    devDependenciesToInstall.push(`@types/react-dom@npm:types-react-dom@rc`)
   } else {
     const [targetReactTypesVersion, targetReactDOMTypesVersion] =
       await Promise.all([
@@ -175,17 +176,24 @@ export async function runUpgrade(
           `@types/react-dom@${targetNextPackageJson.peerDependencies['react']}`
         ),
       ])
-    reactDependencies.push(`@types/react@${targetReactTypesVersion}`)
-    reactDependencies.push(`@types/react-dom@${targetReactDOMTypesVersion}`)
+    devDependenciesToInstall.push(`@types/react@${targetReactTypesVersion}`)
+    devDependenciesToInstall.push(
+      `@types/react-dom@${targetReactDOMTypesVersion}`
+    )
   }
 
   console.log(
     `Upgrading your project to ${pc.blue('Next.js ' + targetNextVersion)}...\n`
   )
 
-  installPackages([nextDependency, ...reactDependencies], {
+  installPackages([nextDependency, ...dependenciesToInstall], {
+    packageManager,
+    silent: !verbose,
+  })
+  installPackages(devDependenciesToInstall, {
     packageManager,
     silent: !verbose,
+    dev: true,
   })
 
   for (const codemod of codemods) {

diff --git a/packages/next-codemod/lib/handle-package.ts b/packages/next-codemod/lib/handle-package.ts
@@ -54,17 +54,45 @@ export function uninstallPackage(
   }
 }
 
+const ADD_CMD_FLAG = {
+  npm: 'install',
+  yarn: 'add',
+  pnpm: 'add',
+  bun: 'add',
+}
+
+const DEV_DEP_FLAG = {
+  npm: '--save-dev',
+  yarn: '--dev',
+  pnpm: '--save-dev',
+  bun: '--dev',
+}
+
 export function installPackages(
   packageToInstall: string[],
-  options: { packageManager?: PackageManager; silent?: boolean } = {}
+  options: {
+    packageManager?: PackageManager
+    silent?: boolean
+    dev?: boolean
+  } = {}
 ) {
-  const { packageManager = getPkgManager(process.cwd()), silent = false } =
-    options
+  const {
+    packageManager = getPkgManager(process.cwd()),
+    silent = false,
+    dev = false,
+  } = options
 
   if (!packageManager) throw new Error('Failed to find package manager')
 
+  const addCmd = ADD_CMD_FLAG[packageManager]
+  const devDepFlag = dev ? DEV_DEP_FLAG[packageManager] : undefined
+
+  const installFlags = [addCmd]
+  if (devDepFlag) {
+    installFlags.push(devDepFlag)
+  }
   try {
-    execa.sync(packageManager, ['add', ...packageToInstall], {
+    execa.sync(packageManager, [...installFlags, ...packageToInstall], {
       // Keeping stderr since it'll likely be relevant later when it fails.
       stdio: silent ? ['ignore', 'ignore', 'inherit'] : 'inherit',
       shell: true,