refactor: improve transformer selection prompt (#70932)

### Why? Previously, we were showing ALL the descriptions of the codemods which made hard to read each lines of codemods. ### How? Show description only of current highlighted option. Also, display the version of the codemod. ### Before `@next/codemod` https://github.com/user-attachments/assets/2537c59e-c4a8-4cdd-af34-68cabf56354b `@next/codemod upgrade` https://github.com/user-attachments/assets/0fc05776-b398-4e13-b6ea-1e351fff2194 ### After `@next/codemod` https://github.com/user-attachments/assets/553e5952-bd2e-4a19-99b0-e3fdab10d868 `@next/codemod upgrade` https://github.com/user-attachments/assets/375c9abc-da3e-4c23-a03d-12def4c6d2a3 --------- Co-authored-by: Zack Tanner <1939140+ztanner@users.noreply.github.com> Co-authored-by: Jiachi Liu <inbox@huozhi.im>
vercel · Oct 10, 2024 · ba65c9d · ba65c9d
1 parent 3700f3f
commit ba65c9d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 155 deletions.
diff --git a/packages/next-codemod/bin/transform.ts b/packages/next-codemod/bin/transform.ts
@@ -63,7 +63,15 @@ export async function runTransform(
         type: 'select',
         name: 'transformer',
         message: 'Which transform would you like to apply?',
-        choices: TRANSFORMER_INQUIRER_CHOICES,
+        choices: TRANSFORMER_INQUIRER_CHOICES.reverse().map(
+          ({ title, value, version }) => {
+            return {
+              title: `(v${version}) ${value}`,
+              description: title,
+              value,
+            }
+          }
+        ),
       },
       { onCancel }
     )

diff --git a/packages/next-codemod/bin/upgrade.ts b/packages/next-codemod/bin/upgrade.ts
@@ -4,10 +4,9 @@ import { execSync } from 'child_process'
 import path from 'path'
 import { compareVersions } from 'compare-versions'
 import chalk from 'chalk'
-import { availableCodemods } from '../lib/codemods'
 import { getPkgManager, installPackages } from '../lib/handle-package'
 import { runTransform } from './transform'
-import { onCancel } from '../lib/utils'
+import { onCancel, TRANSFORMER_INQUIRER_CHOICES } from '../lib/utils'
 
 type PackageManager = 'pnpm' | 'npm' | 'yarn' | 'bun'
 
@@ -200,25 +199,26 @@ async function suggestCodemods(
   initialNextVersion: string,
   targetNextVersion: string
 ): Promise<string[]> {
-  const initialVersionIndex = availableCodemods.findIndex(
+  const initialVersionIndex = TRANSFORMER_INQUIRER_CHOICES.findIndex(
     (versionCodemods) =>
       compareVersions(versionCodemods.version, initialNextVersion) > 0
   )
   if (initialVersionIndex === -1) {
     return []
   }
 
-  let targetVersionIndex = availableCodemods.findIndex(
+  let targetVersionIndex = TRANSFORMER_INQUIRER_CHOICES.findIndex(
     (versionCodemods) =>
       compareVersions(versionCodemods.version, targetNextVersion) > 0
   )
   if (targetVersionIndex === -1) {
-    targetVersionIndex = availableCodemods.length
+    targetVersionIndex = TRANSFORMER_INQUIRER_CHOICES.length
   }
 
-  const relevantCodemods = availableCodemods
-    .slice(initialVersionIndex, targetVersionIndex)
-    .flatMap((versionCodemods) => versionCodemods.codemods)
+  const relevantCodemods = TRANSFORMER_INQUIRER_CHOICES.slice(
+    initialVersionIndex,
+    targetVersionIndex
+  )
 
   if (relevantCodemods.length === 0) {
     return []
@@ -229,10 +229,11 @@ async function suggestCodemods(
       type: 'multiselect',
       name: 'codemods',
       message: `\nThe following ${chalk.blue('codemods')} are recommended for your upgrade. Would you like to apply them?`,
-      choices: relevantCodemods.map((codemod) => {
+      choices: relevantCodemods.reverse().map(({ title, value, version }) => {
         return {
-          title: `${codemod.title} ${chalk.grey(`(${codemod.value})`)}`,
-          value: codemod.value,
+          title: `(v${version}) ${value}`,
+          description: title,
+          value,
           selected: true,
         }
       }),

diff --git a/packages/next-codemod/lib/codemods.ts b/packages/next-codemod/lib/codemods.ts
diff --git a/packages/next-codemod/lib/utils.ts b/packages/next-codemod/lib/utils.ts
@@ -38,71 +38,82 @@ export function onCancel() {
 export const TRANSFORMER_INQUIRER_CHOICES = [
   {
     title:
-      'name-default-component: Transforms anonymous components into named components to make sure they work with Fast Refresh',
-    value: 'name-default-component',
+      'Transform the deprecated automatically injected url property on top level pages to using withRouter',
+    value: 'url-to-withrouter',
+    version: '6.0',
   },
   {
-    title:
-      'add-missing-react-import: Transforms files that do not import `React` to include the import in order for the new React JSX transform',
-    value: 'add-missing-react-import',
+    title: 'Transforms the withAmp HOC into Next.js 9 page configuration',
+    value: 'withamp-to-config',
+    version: '8.0',
   },
   {
     title:
-      'withamp-to-config: Transforms the withAmp HOC into Next.js 9 page configuration',
-    value: 'withamp-to-config',
+      'Transforms anonymous components into named components to make sure they work with Fast Refresh',
+    value: 'name-default-component',
+    version: '9.0',
   },
   {
     title:
-      'url-to-withrouter: Transforms the deprecated automatically injected url property on top level pages to using withRouter',
-    value: 'url-to-withrouter',
+      'Transforms files that do not import `React` to include the import in order for the new React JSX transform',
+    value: 'add-missing-react-import',
+    version: '10.0',
   },
   {
     title:
-      'cra-to-next (experimental): automatically migrates a Create React App project to Next.js',
+      'Automatically migrates a Create React App project to Next.js (experimental)',
     value: 'cra-to-next',
+    version: '11.0',
   },
   {
-    title: 'new-link: Ensures your <Link> usage is backwards compatible.',
+    title: 'Ensures your <Link> usage is backwards compatible',
     value: 'new-link',
+    version: '13.0',
   },
   {
     title:
-      'next-og-import: Transforms imports from `next/server` to `next/og` for usage of Dynamic OG Image Generation.',
-    value: 'next-og-import',
+      'Dangerously migrates from `next/legacy/image` to the new `next/image` by adding inline styles and removing unused props (experimental)',
+    value: 'next-image-experimental',
+    version: '13.0',
   },
   {
     title:
-      'metadata-to-viewport-export: Migrates certain viewport related metadata from the `metadata` export to a new `viewport` export.',
-    value: 'metadata-to-viewport-export',
+      'Safely migrate Next.js 10, 11, 12 applications importing `next/image` to the renamed `next/legacy/image` import in Next.js 13',
+    value: 'next-image-to-legacy-image',
+    version: '13.0',
   },
   {
-    title:
-      'next-dynamic-access-named-export: Transforms dynamic imports that return the named export itself to a module like object.',
-    value: 'next-dynamic-access-named-export',
+    title: 'Uninstall `@next/font` and transform imports to `next/font`',
+    value: 'built-in-next-font',
+    version: '13.2',
   },
   {
     title:
-      'next-image-to-legacy-image: safely migrate Next.js 10, 11, 12 applications importing `next/image` to the renamed `next/legacy/image` import in Next.js 13',
-    value: 'next-image-to-legacy-image',
+      'Migrates certain viewport related metadata from the `metadata` export to a new `viewport` export',
+    value: 'metadata-to-viewport-export',
+    version: '14.0',
   },
   {
     title:
-      'next-image-experimental (experimental): dangerously migrates from `next/legacy/image` to the new `next/image` by adding inline styles and removing unused props',
-    value: 'next-image-experimental',
+      'Transforms imports from `next/server` to `next/og` for usage of Dynamic OG Image Generation',
+    value: 'next-og-import',
+    version: '14.0',
   },
   {
     title:
-      'built-in-next-font: Uninstall `@next/font` and transform imports to `next/font`',
-    value: 'built-in-next-font',
+      'Transforms dynamic imports that return the named export itself to a module like object',
+    value: 'next-dynamic-access-named-export',
+    version: '15.0.0-canary.44',
   },
   {
     title:
-      'next-async-request-api: Transforms usage of Next.js async Request APIs',
-    value: 'next-async-request-api',
+      'Install `@vercel/functions` to replace `geo` and `ip` properties on `NextRequest`',
+    value: 'next-request-geo-ip',
+    version: '15.0.0-canary.153',
   },
   {
-    title:
-      'next-request-geo-ip: Install `@vercel/functions` to replace `geo` and `ip` properties on `NextRequest`',
-    value: 'next-request-geo-ip',
+    title: 'Transforms usage of Next.js async Request APIs',
+    value: 'next-async-request-api',
+    version: '15.0.0-canary.171',
   },
 ]