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

This PR addresses an issue where the `dev` script in `package.json` was not correctly updated to use the `--turbo` option when specified. The changes ensure that the `dev` script is set to `next dev --turbo` if the `turbo` option is enabled. ### Changes: 1. **Function Modification**: - Updated the `modifyPackageJson` function to include a check for the `turbo` parameter. - If `turbo` is true, the `dev` script in `package.json` is set to `next dev --turbo`. - If `turbo` is false, the `dev` script remains `next dev`. 2. **Integration in App Creation**: - Integrated the `modifyPackageJson` function into the app creation process to ensure the `dev` script is correctly set based on the `turbo` parameter. ### Testing: - Verified that the `dev` script in `package.json` is correctly updated to `next dev --turbo` when the `turbo` option is enabled. - Ensured that the `dev` script remains `next dev` when the `turbo` option is not enabled. ### Related Issues: - Fixes #65924 ### Notes: - This change ensures that developers opting to use Turbopack for development will have the correct script set up automatically. --------- Signed-off-by: Arindam Majumder <arindammajumder2020@gmail.com> Co-authored-by: Lee Robinson <me@leerob.io> Co-authored-by: devjiwonchoi <devjiwonchoi@gmail.com> Co-authored-by: Jiachi Liu <inbox@huozhi.im> Co-authored-by: Sam Ko <sam@vercel.com>
vercel · May 20, 2024 · 60ad8af · 60ad8af
1 parent 0eedddb
commit 60ad8af
Show file tree

Hide file tree

Showing 15 changed files with 343 additions and 227 deletions.
diff --git a/docs/01-getting-started/01-installation.mdx b/docs/01-getting-started/01-installation.mdx
@@ -30,6 +30,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`?  No / Yes
 Would you like to customize the default import alias (@/*)? No / Yes
 What import alias would you like configured? @/*
 ```

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`?  No / Yes
 Would you like to customize the default import alias (@/*)?  No / Yes
 ```
 
@@ -80,6 +81,10 @@ Options:
 
     Initialize inside a `src/` directory.
 
+  --turbo
+
+    Enable Turbopack by default for development.
+
   --import-alias <alias-to-configure>
 
     Specify import alias to use (default "@/*").

diff --git a/packages/create-next-app/README.md b/packages/create-next-app/README.md
@@ -59,6 +59,10 @@ Options:
 
     Initialize inside a `src/` directory.
 
+  --turbo
+
+    Enable Turbopack by default for development.
+
   --import-alias <alias-to-configure>
 
     Specify import alias to use (default "@/*").

diff --git a/packages/create-next-app/create-app.ts b/packages/create-next-app/create-app.ts
@@ -36,6 +36,7 @@ export async function createApp({
   importAlias,
   skipInstall,
   empty,
+  turbo,
 }: {
   appPath: string
   packageManager: PackageManager
@@ -49,6 +50,7 @@ export async function createApp({
   importAlias: string
   skipInstall: boolean
   empty: boolean
+  turbo: boolean
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined
   const mode: TemplateMode = typescript ? 'ts' : 'js'
@@ -229,6 +231,7 @@ export async function createApp({
       srcDir,
       importAlias,
       skipInstall,
+      turbo,
     })
   }
 

diff --git a/packages/create-next-app/index.ts b/packages/create-next-app/index.ts
@@ -83,6 +83,13 @@ const program = new Commander.Command(packageJson.name)
     `
 
   Initialize inside a \`src/\` directory.
+`
+  )
+  .option(
+    '--turbo',
+    `
+    
+  Enable Turbopack by default for development.
 `
   )
   .option(
@@ -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 (!program.turbo && !process.argv.includes('--no-turbo')) {
+      if (ciInfo.isCI) {
+        program.turbo = getPrefOrDefault('turbo')
+      } else {
+        const styledTurbo = blue('Turbopack')
+        const { turbo } = await prompts({
+          onState: onPromptState,
+          type: 'toggle',
+          name: 'turbo',
+          message: `Would you like to use ${styledTurbo} for ${`next dev`}?`,
+          initial: getPrefOrDefault('turbo'),
+          active: 'Yes',
+          inactive: 'No',
+        })
+        program.turbo = Boolean(turbo)
+        preferences.turbo = Boolean(turbo)
+      }
+    }
+
     const importAliasPattern = /^[^*"]+\/\*\s*$/
     if (
       typeof program.importAlias !== 'string' ||
@@ -455,6 +482,7 @@ async function run(): Promise<void> {
       importAlias: program.importAlias,
       skipInstall: program.skipInstall,
       empty: program.empty,
+      turbo: program.turbo,
     })
   } catch (reason) {
     if (!(reason instanceof DownloadError)) {
@@ -485,6 +513,7 @@ async function run(): Promise<void> {
       importAlias: program.importAlias,
       skipInstall: program.skipInstall,
       empty: program.empty,
+      turbo: program.turbo,
     })
   }
   conf.set('preferences', preferences)

diff --git a/packages/create-next-app/templates/index.ts b/packages/create-next-app/templates/index.ts
@@ -39,6 +39,7 @@ export const installTemplate = async ({
   srcDir,
   importAlias,
   skipInstall,
+  turbo,
 }: InstallTemplateArgs) => {
   console.log(bold(`Using ${packageManager}.`));
 
@@ -174,7 +175,7 @@ export const installTemplate = async ({
     version: "0.1.0",
     private: true,
     scripts: {
-      dev: "next dev",
+      dev: `next dev${turbo ? " --turbo" : ""}`,
       build: "next build",
       start: "next start",
       lint: "next lint",

diff --git a/packages/create-next-app/templates/types.ts b/packages/create-next-app/templates/types.ts
@@ -29,4 +29,5 @@ export interface InstallTemplateArgs {
   srcDir: boolean;
   importAlias: string;
   skipInstall: boolean;
+  turbo: boolean;
 }
diff --git a/test/integration/create-next-app/index.test.ts b/test/integration/create-next-app/index.test.ts
@@ -30,6 +30,7 @@ describe.skip('create-next-app', () => {
           projectName,
           '--ts',
           '--app',
+          '--no-turbo',
           '--no-eslint',
           '--no-tailwind',
           '--no-src-dir',
@@ -99,6 +100,7 @@ describe.skip('create-next-app', () => {
           projectName,
           '--ts',
           '--app',
+          '--no-turbo',
           '--no-eslint',
           '--no-tailwind',
           '--no-src-dir',

diff --git a/test/integration/create-next-app/package-manager/bun.test.ts b/test/integration/create-next-app/package-manager/bun.test.ts
@@ -36,6 +36,7 @@ describe.skip('create-next-app with package manager bun', () => {
           '--ts',
           '--app',
           '--use-bun',
+          '--no-turbo',
           '--no-eslint',
           '--no-src-dir',
           '--no-tailwind',
@@ -55,72 +56,73 @@ describe.skip('create-next-app with package manager bun', () => {
       })
     })
   })
-})
 
-it('should use bun when user-agent is bun', async () => {
-  await useTempDir(async (cwd) => {
-    const projectName = 'user-agent-bun'
-    const res = await run(
-      [
-        projectName,
-        '--ts',
-        '--app',
-        '--no-eslint',
-        '--no-src-dir',
-        '--no-tailwind',
-        '--no-import-alias',
-      ],
-      nextInstall.installDir,
-      {
-        cwd,
-        env: { npm_config_user_agent: 'bun' },
-      }
-    )
+  it('should use bun when user-agent is bun', async () => {
+    await useTempDir(async (cwd) => {
+      const projectName = 'user-agent-bun'
+      const res = await run(
+        [
+          projectName,
+          '--ts',
+          '--app',
+          '--no-turbo',
+          '--no-eslint',
+          '--no-src-dir',
+          '--no-tailwind',
+          '--no-import-alias',
+        ],
+        nextInstall.installDir,
+        {
+          cwd,
+          env: { npm_config_user_agent: 'bun' },
+        }
+      )
 
-    expect(res.exitCode).toBe(0)
-    projectFilesShouldExist({
-      cwd,
-      projectName,
-      files,
+      expect(res.exitCode).toBe(0)
+      projectFilesShouldExist({
+        cwd,
+        projectName,
+        files,
+      })
     })
   })
-})
 
-it('should use bun for --use-bun flag with example', async () => {
-  await useTempDir(async (cwd) => {
-    const projectName = 'use-bun-with-example'
-    const res = await run(
-      [projectName, '--use-bun', '--example', FULL_EXAMPLE_PATH],
-      nextInstall.installDir,
-      { cwd }
-    )
+  it('should use bun for --use-bun flag with example', async () => {
+    await useTempDir(async (cwd) => {
+      const projectName = 'use-bun-with-example'
+      const res = await run(
+        [projectName, '--use-bun', '--example', FULL_EXAMPLE_PATH],
+        nextInstall.installDir,
+        { cwd }
+      )
 
-    expect(res.exitCode).toBe(0)
-    projectFilesShouldExist({
-      cwd,
-      projectName,
-      files,
+      expect(res.exitCode).toBe(0)
+      projectFilesShouldExist({
+        cwd,
+        projectName,
+        files,
+      })
     })
   })
-})
 
-it('should use bun when user-agent is bun with example', async () => {
-  await useTempDir(async (cwd) => {
-    const projectName = 'user-agent-bun-with-example'
-    const res = await run(
-      [projectName, '--example', FULL_EXAMPLE_PATH],
-      nextInstall.installDir,
-      {
-        cwd,
-        env: { npm_config_user_agent: 'bun' },
-      }
-    )
+  it('should use bun when user-agent is bun with example', async () => {
+    await useTempDir(async (cwd) => {
+      const projectName = 'user-agent-bun-with-example'
+      const res = await run(
+        [projectName, '--example', FULL_EXAMPLE_PATH],
+        nextInstall.installDir,
+        {
+          cwd,
+          env: { npm_config_user_agent: 'bun' },
+        }
+      )
 
-    expect(res.exitCode).toBe(0)
-    projectFilesShouldExist({
-      cwd,
-      projectName,
-      files,
+      expect(res.exitCode).toBe(0)
+      projectFilesShouldExist({
+        cwd,
+        projectName,
+        files,
+      })
     })
   })
 })