feat: use a --bare flag to generate a template without too much boi…

…lerplate
vuejs · haoqunjiang · Dec 23, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
commit c4289cd657d4657919820377fab569cb334404ea
diff --git a/index.ts b/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)
@@ -72,7 +73,6 @@ async function init() {
   const cwd = process.cwd()
   // possible options:
   // --default
-  // --minimal
   // --typescript / --ts
   // --jsx
   // --router / --vue-router
@@ -85,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)
 
@@ -108,7 +109,6 @@ async function init() {
   const isFeatureFlagsUsed =
     typeof (
       argv.default ??
-      argv.minimal ??
       (argv.ts || argv.typescript) ??
       argv.jsx ??
       (argv.router || argv['vue-router']) ??
@@ -321,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'],
@@ -565,29 +565,8 @@ async function init() {
     )
   }
 
-  if (argv.minimal) {
-    // Only keep `src/App.vue` and `src/main.js` inside the `src` folder
-    postOrderDirectoryTraverse(
-      path.resolve(root, 'src'),
-      (dir) => {
-        if (path.basename(dir) === 'src') {
-          return
-        }
-        fs.rmdirSync(dir)
-      },
-      (filepath) => {
-        if (!['App.vue', 'main.js'].includes(path.basename(filepath))) fs.unlinkSync(filepath)
-      },
-    )
-    // Replace the content in `src/App.vue` with a minimal template
-    fs.writeFileSync(
-      path.resolve(root, 'src/App.vue'),
-      '<script setup>\n</script>\n\n<template>\n  <h1>Hello World</h1>\n</template>\n\n<style scoped>\n</style>\n',
-    )
-    // Remove CSS import in `src/main.js`
-    const srcMainJsPath = path.resolve(root, 'src/main.js')
-    const srcMainJsContent = fs.readFileSync(srcMainJsPath, 'utf8')
-    fs.writeFileSync(srcMainJsPath, srcMainJsContent.replace("import './assets/main.css'\n\n", ''))
+  if (argv.bare) {
+    trimBoilerplate(root, { needsTypeScript, needsRouter })
   }
 
   // Instructions:

diff --git a/utils/trimBoilerplate.ts b/utils/trimBoilerplate.ts
@@ -0,0 +1,52 @@
+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)) {
+      console.log('continued')
+      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: [],'),
+    )
+  }
+}