Simplify CNA prompts a bit (#49063)

This updates the default CNA prompts a bit to be more straightforward. x-ref: [slack thread](https://vercel.slack.com/archives/C03KAR5DCKC/p1681919151818769) x-ref: [slack thread](https://vercel.slack.com/archives/C04K237UHCP/p1682959312307409)
vercel · May 2, 2023 · 26f69d5 · 26f69d5
1 parent abc74fb
commit 26f69d5
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 53 deletions.
diff --git a/docs/api-reference/create-next-app.md b/docs/api-reference/create-next-app.md
@@ -57,9 +57,9 @@ Options:
 
     Initialize with ESLint config.
 
-  --experimental-app
+  --app-dir
 
-    Initialize as a `app/` directory project.
+    Initialize as an `app/` directory project.
 
   --src-dir
 

diff --git a/packages/create-next-app/create-app.ts b/packages/create-next-app/create-app.ts
@@ -36,7 +36,7 @@ export async function createApp({
   typescript,
   tailwind,
   eslint,
-  experimentalApp,
+  appDir,
   srcDir,
   importAlias,
 }: {
@@ -47,13 +47,13 @@ export async function createApp({
   typescript: boolean
   tailwind: boolean
   eslint: boolean
-  experimentalApp: boolean
+  appDir: boolean
   srcDir: boolean
   importAlias: string
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined
   const mode: TemplateMode = typescript ? 'ts' : 'js'
-  const template: TemplateType = experimentalApp
+  const template: TemplateType = appDir
     ? tailwind
       ? 'app-tw'
       : 'app'

diff --git a/packages/create-next-app/index.ts b/packages/create-next-app/index.ts
@@ -67,10 +67,10 @@ const program = new Commander.Command(packageJson.name)
 `
   )
   .option(
-    '--experimental-app',
+    '--app-dir',
     `
 
-  Initialize as a \`app/\` directory project.
+  Initialize as an \`app/\` directory project.
 `
   )
   .option(
@@ -232,6 +232,7 @@ async function run(): Promise<void> {
       tailwind: true,
       srcDir: false,
       importAlias: '@/*',
+      customizeImportAlias: false,
     }
     const getPrefOrDefault = (field: string) =>
       preferences[field] ?? defaults[field]
@@ -340,15 +341,13 @@ async function run(): Promise<void> {
     }
 
     if (
-      !process.argv.includes('--experimental-app') &&
-      !process.argv.includes('--no-experimental-app')
+      !process.argv.includes('--app-dir') &&
+      !process.argv.includes('--no-app-dir')
     ) {
       if (ciInfo.isCI) {
-        program.experimentalApp = false
+        program.appDir = false
       } else {
-        const styledAppDir = chalk.hex('#007acc')(
-          'experimental `app/` directory'
-        )
+        const styledAppDir = chalk.hex('#007acc')('`app/` directory')
         const { appDir } = await prompts({
           onState: onPromptState,
           type: 'toggle',
@@ -358,7 +357,7 @@ async function run(): Promise<void> {
           active: 'Yes',
           inactive: 'No',
         })
-        program.experimentalApp = Boolean(appDir)
+        program.appDir = Boolean(appDir)
       }
     }
 
@@ -370,19 +369,34 @@ async function run(): Promise<void> {
         program.importAlias = '@/*'
       } else {
         const styledImportAlias = chalk.hex('#007acc')('import alias')
-        const { importAlias } = await prompts({
+
+        const { customizeImportAlias } = await prompts({
           onState: onPromptState,
-          type: 'text',
-          name: 'importAlias',
-          message: `What ${styledImportAlias} would you like configured?`,
-          initial: getPrefOrDefault('importAlias'),
-          validate: (value) =>
-            /.+\/\*/.test(value)
-              ? true
-              : 'Import alias must follow the pattern <prefix>/*',
+          type: 'toggle',
+          name: 'customizeImportAlias',
+          message: `Would you like to customize the default ${styledImportAlias}?`,
+          initial: getPrefOrDefault('customizeImportAlias'),
+          active: 'Yes',
+          inactive: 'No',
         })
-        program.importAlias = importAlias
-        preferences.importAlias = importAlias
+
+        if (!customizeImportAlias) {
+          program.importAlias = '@/*'
+        } else {
+          const { importAlias } = await prompts({
+            onState: onPromptState,
+            type: 'text',
+            name: 'importAlias',
+            message: `What ${styledImportAlias} would you like configured?`,
+            initial: getPrefOrDefault('importAlias'),
+            validate: (value) =>
+              /.+\/\*/.test(value)
+                ? true
+                : 'Import alias must follow the pattern <prefix>/*',
+          })
+          program.importAlias = importAlias
+          preferences.importAlias = importAlias
+        }
       }
     }
   }
@@ -396,7 +410,7 @@ async function run(): Promise<void> {
       typescript: program.typescript,
       tailwind: program.tailwind,
       eslint: program.eslint,
-      experimentalApp: program.experimentalApp,
+      appDir: program.appDir,
       srcDir: program.srcDir,
       importAlias: program.importAlias,
     })
@@ -424,7 +438,7 @@ async function run(): Promise<void> {
       typescript: program.typescript,
       eslint: program.eslint,
       tailwind: program.tailwind,
-      experimentalApp: program.experimentalApp,
+      appDir: program.appDir,
       srcDir: program.srcDir,
       importAlias: program.importAlias,
     })

diff --git a/test/integration/create-next-app/index.test.ts b/test/integration/create-next-app/index.test.ts
@@ -51,7 +51,7 @@ describe('create next app', () => {
           '--no-tailwind',
           '--eslint',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {
@@ -77,7 +77,7 @@ describe('create next app', () => {
             '--no-tailwind',
             '--eslint',
             '--no-src-dir',
-            '--no-experimental-app',
+            '--no-app-dir',
             `--import-alias=@/*`,
           ],
           { cwd }
@@ -362,7 +362,7 @@ describe('create next app', () => {
           '--eslint',
           '--example',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {
@@ -399,7 +399,7 @@ describe('create next app', () => {
           '--no-tailwind',
           '--eslint',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {
@@ -440,7 +440,7 @@ describe('create next app', () => {
           '--no-tailwind',
           '--eslint',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {
@@ -466,7 +466,7 @@ describe('create next app', () => {
           '--no-tailwind',
           '--eslint',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {
@@ -491,7 +491,7 @@ describe('create next app', () => {
           '--eslint',
           '--use-npm',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {
@@ -546,7 +546,7 @@ describe('create next app', () => {
           '--eslint',
           '--use-pnpm',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {
@@ -618,7 +618,7 @@ describe('create next app', () => {
           '--no-tailwind',
           '--eslint',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {
@@ -686,7 +686,7 @@ describe('create next app', () => {
           '--no-tailwind',
           '--eslint',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {
@@ -761,7 +761,7 @@ describe('create next app', () => {
           '--no-tailwind',
           '--eslint',
           '--no-src-dir',
-          '--no-experimental-app',
+          '--no-app-dir',
           `--import-alias=@/*`,
         ],
         {