From 50d903d11fd3160005929afc29995c4cc5a3c1da Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 12 Dec 2024 21:08:28 +0800
Subject: [PATCH 01/12] feat: `--minimal` option

Closes #112
Closes #300

The minimal template is a cut-down version of the default template;
therefore, the `--minimal` flag is mutually exclusive with all other flags.
I chose not to include it in the prompts because it's a very specific
use case, and it's not a good idea to clutter the CLI with too many
options that are not commonly used.

I didn't design it as an add-on because the logic would be too complex,
and the use case would be even more niche.
---
 index.ts | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/index.ts b/index.ts
index 40f70304b..9fff16389 100755
--- a/index.ts
+++ b/index.ts
@@ -72,6 +72,7 @@ async function init() {
   const cwd = process.cwd()
   // possible options:
   // --default
+  // --minimal
   // --typescript / --ts
   // --jsx
   // --router / --vue-router
@@ -107,6 +108,7 @@ async function init() {
   const isFeatureFlagsUsed =
     typeof (
       argv.default ??
+      argv.minimal ??
       (argv.ts || argv.typescript) ??
       argv.jsx ??
       (argv.router || argv['vue-router']) ??
@@ -563,6 +565,31 @@ 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", ''))
+  }
+
   // Instructions:
   // Supported package managers: pnpm > yarn > bun > npm
   const userAgent = process.env.npm_config_user_agent ?? ''

From fce43617aa5efbdd6f25ec58cbf984cbc198af50 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 12 Dec 2024 22:41:08 +0800
Subject: [PATCH 02/12] chore: add snapshot for `--minimal` flag

---
 scripts/snapshot.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/snapshot.mjs b/scripts/snapshot.mjs
index de5de0b0d..50775d039 100644
--- a/scripts/snapshot.mjs
+++ b/scripts/snapshot.mjs
@@ -55,6 +55,7 @@ function fullCombination(arr) {
 
 let flagCombinations = fullCombination(featureFlags)
 flagCombinations.push(
+  ['minimal'],
   ['default'],
   ['router', 'pinia'],
   ['eslint'],

From c4289cd657d4657919820377fab569cb334404ea Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 13 Dec 2024 00:11:21 +0800
Subject: [PATCH 03/12] feat: use a `--bare` flag to generate a template
 without too much boilerplate

---
 index.ts                 | 33 +++++--------------------
 utils/trimBoilerplate.ts | 52 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 27 deletions(-)
 create mode 100644 utils/trimBoilerplate.ts

diff --git a/index.ts b/index.ts
index 9fff16389..55246c999 100755
--- 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
new file mode 100644
index 000000000..1a450fed8
--- /dev/null
+++ 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: [],'),
+    )
+  }
+}

From e2056bc5956bf17327cd61c8b6a329cebbc0337a Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 13 Dec 2024 00:21:21 +0800
Subject: [PATCH 04/12] chore: remove debugging code

---
 utils/trimBoilerplate.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/utils/trimBoilerplate.ts b/utils/trimBoilerplate.ts
index 1a450fed8..b5f45f32e 100644
--- a/utils/trimBoilerplate.ts
+++ b/utils/trimBoilerplate.ts
@@ -26,7 +26,6 @@ export default function trimBoilerplate(rootDir: string, features: Record<string
   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)

From b813514255335ea8fd7a97cdb90f81f5cb665dba Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 13 Dec 2024 00:51:33 +0800
Subject: [PATCH 05/12] chore: remove `minimal` flag from snapshot as it's not
 implemented anymore

---
 scripts/snapshot.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/snapshot.mjs b/scripts/snapshot.mjs
index 50775d039..de5de0b0d 100644
--- a/scripts/snapshot.mjs
+++ b/scripts/snapshot.mjs
@@ -55,7 +55,6 @@ function fullCombination(arr) {
 
 let flagCombinations = fullCombination(featureFlags)
 flagCombinations.push(
-  ['minimal'],
   ['default'],
   ['router', 'pinia'],
   ['eslint'],

From 42df7c5bc44f9cb1451bfab678b955d781aa60cd Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 19 Dec 2024 20:12:02 +0800
Subject: [PATCH 06/12] test: remove extraneous flag combinations

The ['router', 'pinia'] combination is already included in the result of
the fullCombination function, so it's redundant.

It's there because it was originally ['devtools', 'router', 'pinia'],
but now devtools is always included, I forgot to delete this line during
the refactor.
---
 scripts/snapshot.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/snapshot.mjs b/scripts/snapshot.mjs
index de5de0b0d..debe02aa1 100644
--- a/scripts/snapshot.mjs
+++ b/scripts/snapshot.mjs
@@ -56,7 +56,6 @@ function fullCombination(arr) {
 let flagCombinations = fullCombination(featureFlags)
 flagCombinations.push(
   ['default'],
-  ['router', 'pinia'],
   ['eslint'],
   ['eslint-with-prettier'],
 )

From 639413f8b8bc85acc3175852c307610e8b6b0614 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 19 Dec 2024 20:22:39 +0800
Subject: [PATCH 07/12] feat: add snapshots for `--bare` flag

---
 .github/workflows/ci.yml |  2 +-
 scripts/snapshot.mjs     | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 32046f255..4332f2069 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -51,7 +51,7 @@ jobs:
           verification-script:
             - pnpm --filter "\!*typescript*" build
             - pnpm --filter "*typescript*" build
-            - pnpm --filter "*vitest*" test:unit
+            - 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
diff --git a/scripts/snapshot.mjs b/scripts/snapshot.mjs
index debe02aa1..29a1c19cd 100644
--- a/scripts/snapshot.mjs
+++ b/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,11 +55,7 @@ function fullCombination(arr) {
 }
 
 let flagCombinations = fullCombination(featureFlags)
-flagCombinations.push(
-  ['default'],
-  ['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`.
@@ -84,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')
 

From 06e9d46e08a80c45c0bcbde20f0cc9202dfc512d Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 19 Dec 2024 20:27:30 +0800
Subject: [PATCH 08/12] ci: use single quotes everywhere to avoid different
 behavior between shells

---
 .github/workflows/ci.yml | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4332f2069..aa21a1c63 100644
--- a/.github/workflows/ci.yml
+++ b/.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*" --filter "\!*bare*" 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') }}

From 976ac5e1113b184a10c179f68136b2ada05b2fd0 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 19 Dec 2024 22:20:07 +0800
Subject: [PATCH 09/12] ci: should also exclude bare templates from e2e tests

---
 .github/workflows/ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index aa21a1c63..e02be5653 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -167,10 +167,10 @@ jobs:
 
       - 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 }}*' --filter '!*bare*' --workspace-concurrency 1 test:e2e
 
       - name: Cypress component testing for projects without Vitest
         if: ${{ contains(matrix.e2e-framework, 'cypress') }}
-        run: pnpm --filter '*cypress*' --filter '!*vitest*' --workspace-concurrency 1 test:unit
+        run: pnpm --filter '*cypress*' --filter '!*vitest*' --filter '!*bare*' --workspace-concurrency 1 test:unit
 
       # FIXME: `--with-tests` folders. It's failing now.

From 2d77ded59085f8020b1c77f79718f7f332198243 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 19 Dec 2024 22:22:59 +0800
Subject: [PATCH 10/12] ci: add comments for the reason of excluding bare
 templates from unit and e2e tests

---
 .github/workflows/ci.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e02be5653..30b0f7961 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -51,6 +51,7 @@ jobs:
           verification-script:
             - pnpm --filter '!*typescript*' build
             - pnpm --filter '*typescript*' build
+            # bare templates only contain vitest configurations, but do not include unit test files
             - pnpm --filter '*vitest*' --filter '!*bare*' test:unit
             - pnpm --filter '*eslint*' lint --no-fix --max-warnings=0
             - pnpm --filter '*prettier*' format --write --check
@@ -167,10 +168,12 @@ jobs:
 
       - name: Run e2e test script
         working-directory: ./playground
+        # bare templates can't pass e2e tests because their page structures don't match the example tests
         run: pnpm --filter '*${{ matrix.e2e-framework }}*' --filter '!*bare*' --workspace-concurrency 1 test:e2e
 
       - name: Cypress component testing for projects without Vitest
         if: ${{ contains(matrix.e2e-framework, 'cypress') }}
+        # bare templates only contain test configurations, but do not include component test files
         run: pnpm --filter '*cypress*' --filter '!*vitest*' --filter '!*bare*' --workspace-concurrency 1 test:unit
 
       # FIXME: `--with-tests` folders. It's failing now.

From e7603a4a98188583d20e9a8fcc0365deb60ce522 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 19 Dec 2024 22:28:11 +0800
Subject: [PATCH 11/12] chore: clarify that `--bare` & `--force` are
 *supplementary* options to the feature flags

---
 index.ts             | 5 +++--
 scripts/snapshot.mjs | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/index.ts b/index.ts
index 55246c999..e089e7214 100755
--- a/index.ts
+++ b/index.ts
@@ -84,8 +84,9 @@ async function init() {
   // --playwright
   // --eslint
   // --eslint-with-prettier (only support prettier through eslint for simplicity)
-  // --force (for force overwriting)
-  // --bare (for a barebone template)
+  // in addition to the feature flags, you can also pass the following options:
+  // --bare (for a barebone template without example code)
+  // --force (for force overwriting without confirming)
 
   const args = process.argv.slice(2)
 
diff --git a/scripts/snapshot.mjs b/scripts/snapshot.mjs
index 29a1c19cd..1b523a0fb 100644
--- a/scripts/snapshot.mjs
+++ b/scripts/snapshot.mjs
@@ -88,6 +88,7 @@ flagCombinations = flagCombinations
         denylist.every((flag) => combination.includes(flag)),
       ),
   )
+  // `--bare` is a supplementary flag and should not be used alone
   .filter((combination) => !(combination.length === 1 && combination[0] === 'bare'))
 
 const bin = path.posix.relative('../playground/', '../outfile.cjs')

From b56500c05357ab4ecfb019323806b0d0f47457cc Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 20 Dec 2024 15:35:12 +0800
Subject: [PATCH 12/12] feat: render unit test files even in --bare mode

---
 .github/workflows/ci.yml                      |  6 ++----
 index.ts                                      | 15 +++++++++++++
 template/bare/base/src/App.vue                |  7 +++++++
 .../bare/cypress-ct/src/__tests__/App.cy.js   |  8 +++++++
 .../nightwatch-ct/src/__tests__/App.spec.js   | 14 +++++++++++++
 template/bare/typescript/src/App.vue          |  7 +++++++
 .../bare/vitest/src/__tests__/App.spec.js     | 11 ++++++++++
 utils/trimBoilerplate.ts                      | 21 +++----------------
 8 files changed, 67 insertions(+), 22 deletions(-)
 create mode 100644 template/bare/base/src/App.vue
 create mode 100644 template/bare/cypress-ct/src/__tests__/App.cy.js
 create mode 100644 template/bare/nightwatch-ct/src/__tests__/App.spec.js
 create mode 100644 template/bare/typescript/src/App.vue
 create mode 100644 template/bare/vitest/src/__tests__/App.spec.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 30b0f7961..c773caded 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -51,8 +51,7 @@ jobs:
           verification-script:
             - pnpm --filter '!*typescript*' build
             - pnpm --filter '*typescript*' build
-            # bare templates only contain vitest configurations, but do not include unit test files
-            - pnpm --filter '*vitest*' --filter '!*bare*' test:unit
+            - pnpm --filter '*vitest*' test:unit
             - pnpm --filter '*eslint*' lint --no-fix --max-warnings=0
             - pnpm --filter '*prettier*' format --write --check
             # FIXME: it's failing now
@@ -173,7 +172,6 @@ jobs:
 
       - name: Cypress component testing for projects without Vitest
         if: ${{ contains(matrix.e2e-framework, 'cypress') }}
-        # bare templates only contain test configurations, but do not include component test files
-        run: pnpm --filter '*cypress*' --filter '!*vitest*' --filter '!*bare*' --workspace-concurrency 1 test:unit
+        run: pnpm --filter '*cypress*' --filter '!*vitest*' --workspace-concurrency 1 test:unit
 
       # FIXME: `--with-tests` folders. It's failing now.
diff --git a/index.ts b/index.ts
index e089e7214..bf6031eb5 100755
--- a/index.ts
+++ b/index.ts
@@ -568,6 +568,21 @@ async function init() {
 
   if (argv.bare) {
     trimBoilerplate(root, { needsTypeScript, needsRouter })
+    render('bare/base')
+
+    // TODO: refactor the `render` utility to avoid this kind of manual mapping?
+    if (needsTypeScript) {
+      render('bare/typescript')
+    }
+    if (needsVitest) {
+      render('bare/vitest')
+    }
+    if (needsCypressCT) {
+      render('bare/cypress-ct')
+    }
+    if (needsNightwatchCT) {
+      render('bare/nightwatch-ct')
+    }
   }
 
   // Instructions:
diff --git a/template/bare/base/src/App.vue b/template/bare/base/src/App.vue
new file mode 100644
index 000000000..6ca279f5d
--- /dev/null
+++ b/template/bare/base/src/App.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <h1>Hello World</h1>
+</template>
+
+<style scoped></style>
diff --git a/template/bare/cypress-ct/src/__tests__/App.cy.js b/template/bare/cypress-ct/src/__tests__/App.cy.js
new file mode 100644
index 000000000..55f8caa1b
--- /dev/null
+++ b/template/bare/cypress-ct/src/__tests__/App.cy.js
@@ -0,0 +1,8 @@
+import App from '../App.vue'
+
+describe('App', () => {
+  it('mounts and renders properly', () => {
+    cy.mount(App)
+    cy.get('h1').should('contain', 'Hello World')
+  })
+})
diff --git a/template/bare/nightwatch-ct/src/__tests__/App.spec.js b/template/bare/nightwatch-ct/src/__tests__/App.spec.js
new file mode 100644
index 000000000..86cd9e122
--- /dev/null
+++ b/template/bare/nightwatch-ct/src/__tests__/App.spec.js
@@ -0,0 +1,14 @@
+describe('App', function () {
+  before((browser) => {
+    browser.init()
+  })
+
+  it('mounts and renders properly', async function () {
+    const appComponent = await browser.mountComponent('/src/App.vue');
+
+    browser.expect.element(appComponent).to.be.present;
+    browser.expect.element('h1').text.to.contain('Hello World');
+  })
+
+  after((browser) => browser.end())
+})
diff --git a/template/bare/typescript/src/App.vue b/template/bare/typescript/src/App.vue
new file mode 100644
index 000000000..c2903a622
--- /dev/null
+++ b/template/bare/typescript/src/App.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Hello World</h1>
+</template>
+
+<style scoped></style>
diff --git a/template/bare/vitest/src/__tests__/App.spec.js b/template/bare/vitest/src/__tests__/App.spec.js
new file mode 100644
index 000000000..607fbfbab
--- /dev/null
+++ b/template/bare/vitest/src/__tests__/App.spec.js
@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import App from '../App.vue'
+
+describe('App', () => {
+  it('mounts renders properly', () => {
+    const wrapper = mount(App)
+    expect(wrapper.text()).toContain('Hello World')
+  })
+})
diff --git a/utils/trimBoilerplate.ts b/utils/trimBoilerplate.ts
index b5f45f32e..1a9fd704c 100644
--- a/utils/trimBoilerplate.ts
+++ b/utils/trimBoilerplate.ts
@@ -1,19 +1,6 @@
 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))
@@ -24,17 +11,15 @@ export default function trimBoilerplate(rootDir: string, features: Record<string
   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)) {
+    // Keep `main.js/ts`, `router`, and `stores` directories
+    // `App.vue` would be re-rendered in the next step
+    if (['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", ''))

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/vuejs/create-vue/pull/636.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/vuejs/create-vue/pull/636.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/vuejs/create-vue/pull/636.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/vuejs/create-vue/pull/636.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>