feat: add rolldown-vite features (#760)

Author: btea

index.ts

@@ -39,8 +39,9 @@ const FEATURE_FLAGS = [
   'playwright',
   'eslint',
   'prettier',
-  'eslint-with-oxlint',
   'eslint-with-prettier',
+  'oxlint',
+  'rolldown-vite',
 ] as const
 
 const FEATURE_OPTIONS = [
@@ -77,14 +78,24 @@ const FEATURE_OPTIONS = [
     label: language.needsPrettier.message,
   },
 ] as const
+const EXPERIMENTAL_FEATURE_OPTIONS = [
+  {
+    value: 'oxlint',
+    label: language.needsOxlint.message,
+  },
+  {
+    value: 'rolldown-vite',
+    label: language.needsRolldownVite.message,
+  },
+] as const
 
 type PromptResult = {
   projectName?: string
   shouldOverwrite?: boolean
   packageName?: string
   features?: (typeof FEATURE_OPTIONS)[number]['value'][]
   e2eFramework?: 'cypress' | 'nightwatch' | 'playwright'
-  experimentOxlint?: boolean
+  experimentFeatures?: (typeof EXPERIMENTAL_FEATURE_OPTIONS)[number]['value'][]
 }
 
 function isValidPackageName(projectName) {
@@ -177,12 +188,14 @@ Available feature flags:
     If used without ${cyan('--vitest')}, it will also add Nightwatch Component Testing.
   --eslint
     Add ESLint for code quality.
-  --eslint-with-oxlint
-    Add ESLint for code quality, and use Oxlint to speed up the linting process.
   --eslint-with-prettier (Deprecated in favor of ${cyan('--eslint --prettier')})
     Add Prettier for code formatting in addition to ESLint.
   --prettier
     Add Prettier for code formatting.
+  --oxlint
+    Add Oxlint for code quality and formatting.
+  --rolldown-vite
+    Use Rolldown Vite instead of Vite for building the project.
 
 Unstable feature flags:
   --tests, --with-tests
@@ -232,7 +245,7 @@ async function init() {
     packageName: defaultProjectName,
     features: [],
     e2eFramework: undefined,
-    experimentOxlint: false,
+    experimentFeatures: [],
   }
 
   intro(
@@ -321,32 +334,28 @@ async function init() {
         }),
       )
     }
-
-    if (result.features.includes('eslint')) {
-      result.experimentOxlint = await unwrapPrompt(
-        confirm({
-          message: language.needsOxlint.message,
-          initialValue: false,
-        }),
-      )
-    }
+    result.experimentFeatures = await unwrapPrompt(
+      multiselect({
+        message: `${language.needsExperimentalFeatures.message} ${dim(language.needsExperimentalFeatures.hint)}`,
+        // @ts-expect-error @clack/prompt's type doesn't support readonly array yet
+        options: EXPERIMENTAL_FEATURE_OPTIONS,
+        required: false,
+      }),
+    )
   }
 
-  const { features } = result
+  const { features, experimentFeatures } = result
 
   const needsTypeScript = argv.ts || argv.typescript || features.includes('typescript')
   const needsJsx = argv.jsx || features.includes('jsx')
   const needsRouter = argv.router || argv['vue-router'] || features.includes('router')
   const needsPinia = argv.pinia || features.includes('pinia')
   const needsVitest = argv.vitest || argv.tests || features.includes('vitest')
-  const needsEslint =
-    argv.eslint ||
-    argv['eslint-with-oxlint'] ||
-    argv['eslint-with-prettier'] ||
-    features.includes('eslint')
+  const needsEslint = argv.eslint || argv['eslint-with-prettier'] || features.includes('eslint')
   const needsPrettier =
     argv.prettier || argv['eslint-with-prettier'] || features.includes('prettier')
-  const needsOxlint = argv['eslint-with-oxlint'] || result.experimentOxlint
+  const needsOxlint = experimentFeatures.includes('oxlint') || argv['oxlint']
+  const needsRolldownVite = experimentFeatures.includes('rolldown-vite') || argv['rolldown-vite']
 
   const { e2eFramework } = result
   const needsCypress = argv.cypress || argv.tests || e2eFramework === 'cypress'
@@ -374,6 +383,13 @@ async function init() {
     const templateDir = path.resolve(templateRoot, templateName)
     renderTemplate(templateDir, root, callbacks)
   }
+  const replaceVite = () => {
+    const content = fs.readFileSync(path.resolve(root, 'package.json'), 'utf-8')
+    const json = JSON.parse(content)
+    // Replace `vite` with `rolldown-vite` if the feature is enabled
+    json.devDependencies.vite = 'npm:rolldown-vite@latest'
+    fs.writeFileSync(path.resolve(root, 'package.json'), JSON.stringify(json, null, 2))
+  }
   // Render base template
   render('base')
 
@@ -471,7 +487,7 @@ async function init() {
   }
 
   // Render ESLint config
-  if (needsEslint) {
+  if (needsEslint || needsOxlint) {
     renderEslint(root, {
       needsTypeScript,
       needsOxlint,
@@ -492,6 +508,11 @@ async function init() {
     render('config/prettier')
   }
 
+  // use rolldown-vite if the feature is enabled
+  if (needsRolldownVite) {
+    replaceVite()
+  }
+
   // Render code template.
   // prettier-ignore
   const codeTemplate =

locales/en-US.json

@@ -60,7 +60,17 @@
     }
   },
   "needsOxlint": {
-    "message": "Install Oxlint for faster linting? (experimental)"
+    "message": "Oxlint (experimental)"
+  },
+  "needsExperimental": {
+    "message": "Enable experimental features"
+  },
+  "needsExperimentalFeatures": {
+    "message": "Select experimental features to include in your project:",
+    "hint": "(↑/↓ to navigate, space to select, a to toggle all, enter to confirm)"
+  },
+  "needsRolldownVite": {
+    "message": "rolldown-vite (experimental)"
   },
   "errors": {
     "operationCancelled": "Operation cancelled"

locales/fr-FR.json

@@ -60,7 +60,17 @@
     }
   },
   "needsOxlint": {
-    "message": "Installer Oxlint pour un linting plus rapide\u00a0? (expérimental)"
+    "message": "Oxlint (expérimental)"
+  },
+  "needsExperimental": {
+    "message": "Activer les fonctionnalités expérimentales"
+  },
+  "needsExperimentalFeatures": {
+    "message": "Sélectionnez les fonctionnalités expérimentales à inclure\u00a0:",
+    "hint": "(↑/↓ pour naviguer, espace pour sélectionner, a pour tout sélectionner, entrée pour confirmer)"
+  },
+  "needsRolldownVite": {
+    "message": "rolldown-vite (expérimental)"
   },
   "errors": {
     "operationCancelled": "Operation annulée"

locales/tr-TR.json

@@ -60,7 +60,17 @@
     }
   },
   "needsOxlint": {
-    "message": "Daha hızlı linting için Oxlint eklensin mi? (deneysel)"
+    "message": "Oxlint (deneysel)"
+  },
+  "needsExperimental": {
+    "message": "Deneysel özellikleri etkinleştir"
+  },
+  "needsExperimentalFeatures": {
+    "message": "Dahil edilecek deneysel özellikleri seçin:",
+    "hint": "(↑/↓ gezinmek için, boşluk seçmek için, a tümünü seçmek için, enter onaylamak için)"
+  },
+  "needsRolldownVite": {
+    "message": "rolldown-vite (deneysel)"
   },
   "errors": {
     "operationCancelled": "İşlem iptal edildi"

locales/zh-Hans.json

@@ -60,7 +60,17 @@
     }
   },
   "needsOxlint": {
-    "message": "是否引入 Oxlint 以加快检测？（试验阶段）"
+    "message": "Oxlint（试验阶段）"
+  },
+  "needsExperimental": {
+    "message": "启用试验特性"
+  },
+  "needsExperimentalFeatures": {
+    "message": "选择要包含的试验特性：",
+    "hint": "(↑/↓ 切换，空格选择，a 全选，回车确认)"
+  },
+  "needsRolldownVite": {
+    "message": "rolldown-vite（试验阶段）"
   },
   "errors": {
     "operationCancelled": "操作取消"

locales/zh-Hant.json

@@ -60,7 +60,17 @@
     }
   },
   "needsOxlint": {
-    "message": "是否引入 Oxlint 以加快檢測？（試驗性功能）"
+    "message": "Oxlint（試驗性功能）"
+  },
+  "needsExperimental": {
+    "message": "启用試驗性功能"
+  },
+  "needsExperimentalFeatures": {
+    "message": "請選擇要包含的試驗特性：",
+    "hint": "(↑/↓ 切換，空格選擇，a 全選，enter 確認)"
+  },
+  "needsRolldownVite": {
+    "message": "rolldown-vite（試驗性功能）"
   },
   "errors": {
     "operationCancelled": "操作取消"

utils/getLanguage.ts

@@ -37,7 +37,10 @@ interface Language {
       [key: string]: { title: string; desc?: string; hintOnComponentTesting?: string }
     }
   }
+  needsExperimental: LanguageItem
+  needsExperimentalFeatures: LanguageItem
   needsOxlint: LanguageItem
+  needsRolldownVite: LanguageItem
   errors: {
     operationCancelled: string
   }