diff --git a/docs/api-reference/create-next-app.md b/docs/api-reference/create-next-app.md index 1eb306a6a98af..5e7ab10d74f45 100644 --- 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 index e525f0aba121e..a809b9f2a9b53 100644 --- 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 { 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 index a7a139e731c91..b66b4bb37c9f8 100644 --- 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 { tailwind: true, srcDir: false, importAlias: '@/*', + customizeImportAlias: false, } const getPrefOrDefault = (field: string) => preferences[field] ?? defaults[field] @@ -340,15 +341,13 @@ async function run(): Promise { } 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 { active: 'Yes', inactive: 'No', }) - program.experimentalApp = Boolean(appDir) + program.appDir = Boolean(appDir) } } @@ -370,19 +369,34 @@ async function run(): Promise { 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 /*', + 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 /*', + }) + program.importAlias = importAlias + preferences.importAlias = importAlias + } } } } @@ -396,7 +410,7 @@ async function run(): Promise { 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 { 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 index 12df3eb27e689..b1c3352204c00 100644 --- 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=@/*`, ], { diff --git a/test/integration/create-next-app/templates.test.ts b/test/integration/create-next-app/templates.test.ts index cf5e20931778f..ec32ef42e53dc 100644 --- a/test/integration/create-next-app/templates.test.ts +++ b/test/integration/create-next-app/templates.test.ts @@ -19,9 +19,16 @@ import { import { Span } from 'next/dist/trace' import { useTempDir } from '../../../test/lib/use-temp-dir' -import { fetchViaHTTP, findPort, killApp, launchApp } from 'next-test-utils' +import { + check, + fetchViaHTTP, + findPort, + killApp, + launchApp, +} from 'next-test-utils' import resolveFrom from 'resolve-from' import { createNextInstall } from '../../../test/lib/create-next-install' +import ansiEscapes from 'ansi-escapes' const startsWithoutError = async ( appDir: string, @@ -80,7 +87,7 @@ describe('create-next-app templates', () => { '--no-tailwind', '--eslint', '--no-src-dir', - '--no-experimental-app', + '--no-app-dir', `--import-alias=@/*`, ], { @@ -126,7 +133,7 @@ describe('create-next-app templates', () => { '--no-tailwind', '--eslint', '--no-src-dir', - '--no-experimental-app', + '--no-app-dir', `--import-alias=@/*`, ], { @@ -153,7 +160,7 @@ describe('create-next-app templates', () => { '--no-tailwind', '--eslint', '--src-dir', - '--no-experimental-app', + '--no-app-dir', `--import-alias=@/*`, ], { @@ -207,7 +214,7 @@ describe('create-next-app templates', () => { '--no-tailwind', '--eslint', '--no-src-dir', - '--no-experimental-app', + '--no-app-dir', `--import-alias=@/*`, ], { @@ -236,7 +243,7 @@ describe('create-next-app templates', () => { '--no-tailwind', '--eslint', '--src-dir', - '--no-experimental-app', + '--no-app-dir', `--import-alias=@/*`, ], { @@ -274,7 +281,7 @@ describe('create-next-app templates', () => { '--no-tailwind', '--eslint', '--no-src-dir', - '--no-experimental-app', + '--no-app-dir', ], { cwd, @@ -284,11 +291,18 @@ describe('create-next-app templates', () => { /** * Bind the exit listener. */ - await new Promise((resolve) => { + await new Promise(async (resolve) => { childProcess.on('exit', async (exitCode) => { expect(exitCode).toBe(0) resolve() }) + let output = '' + childProcess.stdout.on('data', (data) => { + output += data + process.stdout.write(data) + }) + childProcess.stdin.write(ansiEscapes.cursorForward() + '\n') + await check(() => output, /What import alias would you like configured/) childProcess.stdin.write('@/something/*\n') }) @@ -320,7 +334,7 @@ describe('create-next-app templates', () => { '--no-eslint', '--tailwind', '--src-dir', - '--no-experimental-app', + '--no-app-dir', `--import-alias=@/*`, ], { @@ -369,7 +383,7 @@ describe('create-next-app templates', () => { '--js', '--eslint', '--no-src-dir', - '--no-experimental-app', + '--no-app-dir', `--import-alias=@/*`, ], { @@ -406,7 +420,7 @@ describe('create-next-app templates', () => { }) }) -describe('create-next-app --experimental-app', () => { +describe('create-next-app --app-dir', () => { if (!process.env.NEXT_TEST_CNA && process.env.NEXT_TEST_JOB) { it('should skip when env is not set', () => {}) return @@ -428,7 +442,7 @@ describe('create-next-app --experimental-app', () => { projectName, '--ts', '--no-tailwind', - '--experimental-app', + '--app-dir', '--eslint', '--no-src-dir', `--import-alias=@/*`, @@ -458,7 +472,7 @@ describe('create-next-app --experimental-app', () => { projectName, '--js', '--no-tailwind', - '--experimental-app', + '--app-dir', '--eslint', '--no-src-dir', `--import-alias=@/*`, @@ -489,7 +503,7 @@ describe('create-next-app --experimental-app', () => { projectName, '--js', '--no-tailwind', - '--experimental-app', + '--app-dir', '--eslint', '--src-dir', '--import-alias=@/*', @@ -526,7 +540,7 @@ describe('create-next-app --experimental-app', () => { projectName, '--ts', '--tailwind', - '--experimental-app', + '--app-dir', '--eslint', '--src-dir', `--import-alias=@/*`,