feat(create-vite): scaffold with rolldown-vite (#20739)

Author: sapphi-red

docs/guide/rolldown.md

@@ -85,6 +85,8 @@ If you use a Vitepress or a meta framework that has Vite as peer dependency, you
 
 After adding these overrides, reinstall your dependencies and start your development server or build your project as usual. No further configuration changes are required.
 
+If you are starting a new project, you can use `create-vite` as normal for rolldown-vite, too. The latest version will ask you whether to use `rolldown-vite` or not.
+
 ## Known Limitations
 
 While Rolldown aims to be a drop-in replacement for Rollup, there are features that are still being implemented and minor intentional behavior differences. For a comprehensive list, please refer to [this GitHub PR](https://github.com/vitejs/rolldown-vite/pull/84#issue-2903144667) which is regularly updated.

packages/create-vite/__tests__/cli.spec.ts

@@ -110,9 +110,12 @@ test('asks to overwrite non-empty current directory', () => {
 })
 
 test('successfully scaffolds a project based on vue starter template', () => {
-  const { stdout } = run([projectName, '--interactive', '--template', 'vue'], {
-    cwd: __dirname,
-  })
+  const { stdout } = run(
+    [projectName, '--interactive', '--template', 'vue', '--no-rolldown'],
+    {
+      cwd: __dirname,
+    },
+  )
   const generatedFiles = fs.readdirSync(genPath).sort()
 
   // Assertions
@@ -122,7 +125,13 @@ test('successfully scaffolds a project based on vue starter template', () => {
 
 test('successfully scaffolds a project with subfolder based on react starter template', () => {
   const { stdout } = run(
-    [`subfolder/${projectName}`, '--interactive', '--template', 'react'],
+    [
+      `subfolder/${projectName}`,
+      '--interactive',
+      '--template',
+      'react',
+      '--no-rolldown',
+    ],
     {
       cwd: __dirname,
     },
@@ -134,10 +143,32 @@ test('successfully scaffolds a project with subfolder based on react starter tem
   expect(templateFilesReact).toEqual(generatedFiles)
 })
 
+test('successfully scaffolds a project with subfolder based on react starter template with rolldown flag', () => {
+  const { stdout } = run(
+    [`subfolder/${projectName}`, '--template', 'react', '--rolldown'],
+    {
+      cwd: __dirname,
+    },
+  )
+  const generatedFiles = fs.readdirSync(genPathWithSubfolder).sort()
+
+  // Assertions
+  expect(stdout).toContain(`Scaffolding project in ${genPathWithSubfolder}`)
+  expect(templateFilesReact).toEqual(generatedFiles)
+  const generatedPackageJson = fs.readFileSync(
+    path.join(genPathWithSubfolder, 'package.json'),
+    'utf-8',
+  )
+  expect(generatedPackageJson).toContain('rolldown-vite')
+})
+
 test('works with the -t alias', () => {
-  const { stdout } = run([projectName, '--interactive', '-t', 'vue'], {
-    cwd: __dirname,
-  })
+  const { stdout } = run(
+    [projectName, '--interactive', '-t', 'vue', '--no-rolldown'],
+    {
+      cwd: __dirname,
+    },
+  )
   const generatedFiles = fs.readdirSync(genPath).sort()
 
   // Assertions

packages/create-vite/src/index.ts

@@ -23,10 +23,11 @@ const argv = mri<{
   template?: string
   help?: boolean
   overwrite?: boolean
+  rolldown?: boolean
   interactive?: boolean
 }>(process.argv.slice(2), {
   alias: { h: 'help', t: 'template' },
-  boolean: ['help', 'overwrite', 'interactive'],
+  boolean: ['help', 'overwrite', 'rolldown', 'interactive'],
   string: ['template'],
 })
 const cwd = process.cwd()
@@ -40,6 +41,7 @@ When running in TTY, the CLI will start in interactive mode.
 
 Options:
   -t, --template NAME                   use a specific template
+  --rolldown / --no-rolldown            use / do not use rolldown-vite (Experimental)
   --interactive / --no-interactive      force interactive / non-interactive mode
 
 Available templates:
@@ -348,6 +350,7 @@ async function init() {
     : undefined
   const argTemplate = argv.template
   const argOverwrite = argv.overwrite
+  const argRolldown = argv.rolldown
   const argInteractive = argv.interactive
 
   const help = argv.help
@@ -525,6 +528,28 @@ async function init() {
     process.exit(status ?? 0)
   }
 
+  let useRolldownVite = argRolldown
+  if (useRolldownVite === undefined) {
+    if (interactive) {
+      const rolldownViteValue = await prompts.select({
+        message: 'Use rolldown-vite (Experimental)?:',
+        options: [
+          {
+            label: 'Yes',
+            value: true,
+            hint: 'The future default Vite, which is powered by Rolldown',
+          },
+          { label: 'No', value: false },
+        ],
+        initialValue: false,
+      })
+      if (prompts.isCancel(rolldownViteValue)) return cancel()
+      useRolldownVite = rolldownViteValue
+    } else {
+      useRolldownVite = false
+    }
+  }
+
   prompts.log.step(`Scaffolding project in ${root}...`)
 
   const templateDir = path.resolve(
@@ -561,6 +586,27 @@ async function init() {
 
   pkg.name = packageName
 
+  if (useRolldownVite) {
+    // renovate: datasource=npm depName=rolldown-vite
+    const rolldownViteVersion = '7.1.12'
+    const pkgVersion = `npm:rolldown-vite@${rolldownViteVersion}`
+    pkg.devDependencies.vite = pkgVersion
+    switch (pkgManager) {
+      case 'pnpm':
+        pkg.pnpm ??= {}
+        pkg.pnpm.overrides ??= {}
+        pkg.pnpm.overrides.vite = pkgVersion
+        break
+      case 'yarn':
+        pkg.resolutions ??= {}
+        pkg.resolutions.vite = pkgVersion
+        break
+      default:
+        pkg.overrides ??= {}
+        pkg.overrides.vite = pkgVersion
+    }
+  }
+
   write('package.json', JSON.stringify(pkg, null, 2) + '\n')
 
   if (isReactSwc) {