feat: new --bare CLI option to generate a barebone project without example code

.github/workflows/ci.yml

@@ -49,13 +49,13 @@ jobs:
           node-version: [18, 20, 22]
           os: [ubuntu-latest, windows-latest, macos-latest]
           verification-script:
-            - pnpm --filter "\!*typescript*" build
-            - pnpm --filter "*typescript*" build
-            - pnpm --filter "*vitest*" test:unit
-            - pnpm --filter "*eslint*" lint --no-fix --max-warnings=0
-            - pnpm --filter "*prettier*" format --write --check
+            - pnpm --filter '!*typescript*' build
+            - pnpm --filter '*typescript*' build
+            - pnpm --filter '*vitest*' --filter '!*bare*' test:unit
+            - pnpm --filter '*eslint*' lint --no-fix --max-warnings=0
+            - pnpm --filter '*prettier*' format --write --check
             # FIXME: it's failing now
-            # - pnpm --filter "*with-tests*" test:unit
+            # - pnpm --filter '*with-tests*' test:unit
       runs-on: ${{ matrix.os }}
       continue-on-error: ${{ matrix.os == 'windows-latest' }}
       env:
@@ -163,11 +163,11 @@ jobs:
 
       - name: Run build script
         working-directory: ./playground
-        run: pnpm --filter "*${{ matrix.e2e-framework }}*" build
+        run: pnpm --filter '*${{ matrix.e2e-framework }}*' build
 
       - name: Run e2e test script
         working-directory: ./playground
-        run: pnpm --filter "*${{ matrix.e2e-framework }}*" --workspace-concurrency 1 test:e2e
+        run: pnpm --filter '*${{ matrix.e2e-framework }}*' --workspace-concurrency 1 test:e2e
 
       - name: Cypress component testing for projects without Vitest
         if: ${{ contains(matrix.e2e-framework, 'cypress') }}

index.ts

@@ -18,6 +18,7 @@ import generateReadme from './utils/generateReadme'
 import getCommand from './utils/getCommand'
 import getLanguage from './utils/getLanguage'
 import renderEslint from './utils/renderEslint'
+import trimBoilerplate from './utils/trimBoilerplate'
 
 function isValidPackageName(projectName) {
   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)
@@ -84,6 +85,7 @@ async function init() {
   // --eslint
   // --eslint-with-prettier (only support prettier through eslint for simplicity)
   // --force (for force overwriting)
+  // --bare (for a barebone template)
 
   const args = process.argv.slice(2)
 
@@ -319,8 +321,8 @@ async function init() {
     packageName = projectName ?? defaultProjectName,
     shouldOverwrite = argv.force,
     needsJsx = argv.jsx,
-    needsTypeScript = argv.ts || argv.typescript,
-    needsRouter = argv.router || argv['vue-router'],
+    needsTypeScript = (argv.ts || argv.typescript) as boolean,
+    needsRouter = (argv.router || argv['vue-router']) as boolean,
     needsPinia = argv.pinia,
     needsVitest = argv.vitest || argv.tests,
     needsPrettier = argv['eslint-with-prettier'],
@@ -563,6 +565,10 @@ async function init() {
     )
   }
 
+  if (argv.bare) {
+    trimBoilerplate(root, { needsTypeScript, needsRouter })
+  }
+
   // Instructions:
   // Supported package managers: pnpm > yarn > bun > npm
   const userAgent = process.env.npm_config_user_agent ?? ''

scripts/snapshot.mjs

@@ -8,6 +8,7 @@ if (!/pnpm/.test(process.env.npm_config_user_agent ?? ''))
   throw new Error("Please use pnpm ('pnpm run snapshot') to generate snapshots!")
 
 const featureFlags = [
+  'bare',
   'typescript',
   'jsx',
   'router',
@@ -54,12 +55,7 @@ function fullCombination(arr) {
 }
 
 let flagCombinations = fullCombination(featureFlags)
-flagCombinations.push(
-  ['default'],
-  ['router', 'pinia'],
-  ['eslint'],
-  ['eslint-with-prettier'],
-)
+flagCombinations.push(['default'], ['bare', 'default'], ['eslint'], ['eslint-with-prettier'])
 
 // `--with-tests` are equivalent of `--vitest --cypress`
 // Previously it means `--cypress` without `--vitest`.
@@ -85,10 +81,14 @@ for (const flags of flagCombinations) {
 }
 
 // Filter out combinations that are not allowed
-flagCombinations = flagCombinations.filter(
-  (combination) =>
-    !featureFlagsDenylist.some((denylist) => denylist.every((flag) => combination.includes(flag))),
-)
+flagCombinations = flagCombinations
+  .filter(
+    (combination) =>
+      !featureFlagsDenylist.some((denylist) =>
+        denylist.every((flag) => combination.includes(flag)),
+      ),
+  )
+  .filter((combination) => !(combination.length === 1 && combination[0] === 'bare'))
 
 const bin = path.posix.relative('../playground/', '../outfile.cjs')
 

utils/trimBoilerplate.ts

@@ -0,0 +1,51 @@
+import * as fs from 'node:fs'
+import * as path from 'path'
+
+function getBareBoneAppContent(isTs: boolean) {
+  return `<script setup${isTs ? ' lang="ts"' : ''}>
+</script>
+
+<template>
+  <h1>Hello World</h1>
+</template>
+
+<style scoped>
+</style>
+`
+}
+
+function replaceContent(filepath: string, replacer: (content: string) => string) {
+  const content = fs.readFileSync(filepath, 'utf8')
+  fs.writeFileSync(filepath, replacer(content))
+}
+
+export default function trimBoilerplate(rootDir: string, features: Record<string, boolean>) {
+  const isTs = features.needsTypeScript
+  const srcDir = path.resolve(rootDir, 'src')
+
+  for (const filename of fs.readdirSync(srcDir)) {
+    // Keep `App.vue`, `main.js/ts`, `router`, and `stores` directories
+    if (['App.vue', 'main.js', 'main.ts', 'router', 'stores'].includes(filename)) {
+      continue
+    }
+    const fullpath = path.resolve(srcDir, filename)
+    fs.rmSync(fullpath, { recursive: true })
+  }
+
+  // Replace the content in `src/App.vue` with a barebone template
+  replaceContent(path.resolve(rootDir, 'src/App.vue'), () => getBareBoneAppContent(isTs))
+
+  // Remove CSS import in the entry file
+  const entryPath = path.resolve(rootDir, isTs ? 'src/main.ts' : 'src/main.js')
+  replaceContent(entryPath, (content) => content.replace("import './assets/main.css'\n\n", ''))
+
+  // If `router` feature is selected, use an empty router configuration
+  if (features.needsRouter) {
+    const routerEntry = path.resolve(srcDir, isTs ? 'router/index.ts' : 'router/index.js')
+    replaceContent(routerEntry, (content) =>
+      content
+        .replace(`import HomeView from '../views/HomeView.vue'\n`, '')
+        .replace(/routes:\s*\[[\s\S]*?\],/, 'routes: [],'),
+    )
+  }
+}