fix: use ts files when necessary with --bare option

With v3.13.0, the generated tests were using the `.js` extension.
See https://github.com/vuejs/create-vue-templates/tree/v3.13.0/bare-typescript-vitest/src/__tests__ for example

We now render all files _before_ renaming them with the .ts extension if needed.

Author: cexbrayat

index.ts

@@ -18,7 +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'
+import { trimBoilerplate, removeCSSImport, emptyRouterConfig } from './utils/trimBoilerplate'
 
 import cliPackageJson from './package.json'
 
@@ -560,6 +560,24 @@ async function init() {
     },
   )
 
+  if (argv.bare) {
+    trimBoilerplate(root)
+    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')
+    }
+  }
+
   // Cleanup.
 
   // We try to share as many files between TypeScript and JavaScript as possible.
@@ -610,21 +628,9 @@ 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')
+    removeCSSImport(root, needsTypeScript)
+    if (needsRouter) {
+      emptyRouterConfig(root, needsTypeScript)
     }
   }
 

template/base/vite.config.js.data.mjs

@@ -11,7 +11,7 @@ export default function getData() {
         id: 'vite-plugin-vue-devtools',
         importer: "import vueDevTools from 'vite-plugin-vue-devtools'",
         initializer: 'vueDevTools()',
-      }
+      },
     ],
   }
 }

utils/trimBoilerplate.ts

@@ -6,8 +6,7 @@ function replaceContent(filepath: string, replacer: (content: string) => string)
   fs.writeFileSync(filepath, replacer(content))
 }
 
-export default function trimBoilerplate(rootDir: string, features: Record<string, boolean>) {
-  const isTs = features.needsTypeScript
+export function trimBoilerplate(rootDir: string) {
   const srcDir = path.resolve(rootDir, 'src')
 
   for (const filename of fs.readdirSync(srcDir)) {
@@ -19,18 +18,21 @@ export default function trimBoilerplate(rootDir: string, features: Record<string
     const fullpath = path.resolve(srcDir, filename)
     fs.rmSync(fullpath, { recursive: true })
   }
+}
 
+export function removeCSSImport(rootDir: string, needsTypeScript: boolean) {
   // Remove CSS import in the entry file
-  const entryPath = path.resolve(rootDir, isTs ? 'src/main.ts' : 'src/main.js')
+  const entryPath = path.resolve(rootDir, needsTypeScript ? 'src/main.ts' : 'src/main.js')
   replaceContent(entryPath, (content) => content.replace("import './assets/main.css'\n\n", ''))
+}
 
+export function emptyRouterConfig(rootDir: string, needsTypeScript: boolean) {
+  const srcDir = path.resolve(rootDir, 'src')
   // 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: [],'),
-    )
-  }
+  const routerEntry = path.resolve(srcDir, needsTypeScript ? 'router/index.ts' : 'router/index.js')
+  replaceContent(routerEntry, (content) =>
+    content
+      .replace(`import HomeView from '../views/HomeView.vue'\n`, '')
+      .replace(/routes:\s*\[[\s\S]*?\],/, 'routes: [],'),
+  )
 }