feat(create-next-app): Add option to enable Turbopack

vercel · May 18, 2024 · 69699fc · 69699fc
1 parent 0cd20e0
commit 69699fc
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 2 deletions.
diff --git a/docs/02-app/02-api-reference/06-create-next-app.mdx b/docs/02-app/02-api-reference/06-create-next-app.mdx
@@ -38,6 +38,7 @@ Would you like to use ESLint?  No / Yes
 Would you like to use Tailwind CSS?  No / Yes
 Would you like to use `src/` directory?  No / Yes
 Would you like to use App Router? (recommended)  No / Yes
+Would you like to use Turbopack for next dev? (RC)  No / Yes
 Would you like to customize the default import alias (@/*)?  No / Yes
 ```
 
@@ -104,6 +105,10 @@ Options:
 
     Explicitly tell the CLI to bootstrap the app using Bun
 
+  --turbo
+
+    Initialize with Turbopack for next dev
+
   -e, --example [name]|[github-url]
 
     An example to bootstrap the app with. You can use an example name

diff --git a/packages/create-next-app/create-app.ts b/packages/create-next-app/create-app.ts
@@ -49,10 +49,13 @@ export async function createApp({
   importAlias: string
   skipInstall: boolean
   empty: boolean
+  turbo: boolean
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined
   const mode: TemplateMode = typescript ? 'ts' : 'js'
-  const template: TemplateType = `${appRouter ? 'app' : 'default'}${tailwind ? '-tw' : ''}${empty ? '-empty' : ''}`
+  const template: TemplateType = `${appRouter ? 'app' : 'default'}${
+    tailwind ? '-tw' : ''
+  }${empty ? '-empty' : ''}`
 
   if (example) {
     let repoUrl: URL | undefined

diff --git a/packages/create-next-app/index.ts b/packages/create-next-app/index.ts
@@ -158,6 +158,13 @@ const program = new Commander.Command(packageJson.name)
     `
 
   Explicitly tell the CLI to skip installing packages
+`
+  )
+  .option(
+    '--turbo',
+    `
+
+  Initialize with Turbopack for next dev
 `
   )
   .allowUnknownOption()
@@ -272,6 +279,7 @@ async function run(): Promise<void> {
       importAlias: '@/*',
       customizeImportAlias: false,
       empty: false,
+      turbo: false,
     }
     const getPrefOrDefault = (field: string) =>
       preferences[field] ?? defaults[field]
@@ -396,6 +404,25 @@ async function run(): Promise<void> {
       }
     }
 
+    if (!process.argv.includes('--turbo')) {
+      if (ciInfo.isCI) {
+        program.turbo = getPrefOrDefault('turbo')
+      } else {
+        const styledTurbo = blue('Turbopack (RC)')
+        const { turbo } = await prompts({
+          onState: onPromptState,
+          type: 'toggle',
+          name: 'turbo',
+          message: `Would you like to use ${styledTurbo} for next dev? (RC)`,
+          initial: getPrefOrDefault('turbo'),
+          active: 'Yes',
+          inactive: 'No',
+        })
+        program.turbo = Boolean(turbo)
+        preferences.turbo = Boolean(turbo)
+      }
+    }
+
     const importAliasPattern = /^[^*"]+\/\*\s*$/
     if (
       typeof program.importAlias !== 'string' ||
@@ -455,7 +482,20 @@ async function run(): Promise<void> {
       importAlias: program.importAlias,
       skipInstall: program.skipInstall,
       empty: program.empty,
+      turbo: program.turbo,
     })
+
+    if (program.turbo) {
+      const packageJsonPath = path.join(resolvedProjectPath, 'package.json')
+      const packageJsonData = JSON.parse(
+        fs.readFileSync(packageJsonPath, 'utf8')
+      )
+      packageJsonData.scripts.dev = 'next dev --turbo'
+      fs.writeFileSync(
+        packageJsonPath,
+        JSON.stringify(packageJsonData, null, 2)
+      )
+    }
   } catch (reason) {
     if (!(reason instanceof DownloadError)) {
       throw reason
@@ -485,7 +525,20 @@ async function run(): Promise<void> {
       importAlias: program.importAlias,
       skipInstall: program.skipInstall,
       empty: program.empty,
+      turbo: program.turbo,
     })
+
+    if (program.turbo) {
+      const packageJsonPath = path.join(resolvedProjectPath, 'package.json')
+      const packageJsonData = JSON.parse(
+        fs.readFileSync(packageJsonPath, 'utf8')
+      )
+      packageJsonData.scripts.dev = 'next dev --turbo'
+      fs.writeFileSync(
+        packageJsonPath,
+        JSON.stringify(packageJsonData, null, 2)
+      )
+    }
   }
   conf.set('preferences', preferences)
 }

diff --git a/packages/create-next-app/templates/types.ts b/packages/create-next-app/templates/types.ts
@@ -8,7 +8,9 @@ export type TemplateType =
   | "default"
   | "default-empty"
   | "default-tw"
-  | "default-tw-empty";
+  | "default-tw-empty"
+  | "app-turbo";
+
 export type TemplateMode = "js" | "ts";
 
 export interface GetTemplateFileArgs {
@@ -29,4 +31,5 @@ export interface InstallTemplateArgs {
   srcDir: boolean;
   importAlias: string;
   skipInstall: boolean;
+  turbo: boolean;
 }
diff --git a/test/integration/create-next-app/templates/app.test.ts b/test/integration/create-next-app/templates/app.test.ts
@@ -223,3 +223,39 @@ describe.skip('create-next-app --app (App Router)', () => {
     })
   })
 })
+
+it('should create a project with Turbopack enabled using --turbo flag', async () => {
+  await useTempDir(async (cwd) => {
+    const projectName = 'app-turbo'
+    const childProcess = createNextApp(
+      [
+        projectName,
+        '--ts',
+        '--app',
+        '--eslint',
+        '--src-dir',
+        '--tailwind',
+        '--no-import-alias',
+        '--turbo',
+      ],
+      {
+        cwd,
+      },
+      testVersion
+    )
+
+    const exitCode = await spawnExitPromise(childProcess)
+    expect(exitCode).toBe(0)
+    shouldBeTemplateProject({
+      cwd,
+      projectName,
+      template: 'app-turbo',
+      mode: 'ts',
+      srcDir: true,
+    })
+    await tryNextDev({
+      cwd,
+      projectName,
+    })
+  })
+})