feat: implement readme generation

diff --git a/index.js b/index.js
index 5974e553b89fa33f95896f0cab6cbde3153a19bd..c7d57b1f21a8b8c9eea69a30195c767357f26910 100755 (executable)
--- a/index.js
+++ b/index.js
@@ -13,6 +13,8 @@ import {
   postOrderDirectoryTraverse,
   preOrderDirectoryTraverse
 } from './utils/directoryTraverse.js'
+import generateReadme from './utils/generateReadme.js'
+import getCommand from './utils/getCommand.js'
 
 function isValidPackageName(projectName) {
   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
@@ -253,9 +255,6 @@ async function init() {
     render('entry/default')
   }
 
-  // TODO:
-  // Replace `<!-- NPM-SCRIPTS-PLACEHOLDER -->` in README with detailed explanation of npm scripts.
-
   // Cleanup.
 
   if (needsTypeScript) {
@@ -311,25 +310,20 @@ async function init() {
     ? 'yarn'
     : 'npm'
 
-  const commandsMap = {
-    install: {
-      pnpm: 'pnpm install',
-      yarn: 'yarn',
-      npm: 'npm install'
-    },
-    dev: {
-      pnpm: 'pnpm dev',
-      yarn: 'yarn dev',
-      npm: 'npm run dev'
-    }
-  }
+  // README generation
+  fs.writeFileSync(path.resolve(root, 'README.md'), generateReadme({
+    projectName: result.projectName || defaultProjectName,
+    packageManager,
+    needsTypeScript,
+    needsTests
+  }))
 
   console.log(`\nDone. Now run:\n`)
   if (root !== cwd) {
     console.log(`  ${bold(green(`cd ${path.relative(cwd, root)}`))}`)
   }
-  console.log(`  ${bold(green(commandsMap.install[packageManager]))}`)
-  console.log(`  ${bold(green(commandsMap.dev[packageManager]))}`)
+  console.log(`  ${bold(green(getCommand(packageManager, 'install')))}`)
+  console.log(`  ${bold(green(getCommand(packageManager, 'dev')))}`)
   console.log()
 }
 

diff --git a/utils/docs/README-TEMPLATE.md b/utils/docs/README-TEMPLATE.md
new file mode 100644 (file)
index 0000000..f304a7f
--- /dev/null
+++ b/utils/docs/README-TEMPLATE.md
@@ -0,0 +1,17 @@
+# {{projectName}}
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+
+<!-- SFC-TYPE-SUPPORT -->
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+<!-- NPM-SCRIPTS -->

diff --git a/template/base/README.md b/utils/docs/SFC-TYPE-SUPPORT.md
similarity index 54%
rename from template/base/README.md
rename to utils/docs/SFC-TYPE-SUPPORT.md
index c3a42c1992db8be23bdd9c1cfca07b9b94832ab0..66a6bb8f0d48d2af275c23612751dbb8ee037378 100644 (file)
--- a/template/base/README.md
+++ b/utils/docs/SFC-TYPE-SUPPORT.md
@@ -1,21 +1,5 @@
-# Vue 3 + Vite
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
-
 ## Type Support for `.vue` Imports in TS
 
 Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
 
 However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Usage
-
-<!-- NPM-SCRIPTS-PLACEHOLDER -->

diff --git a/utils/generateReadme.js b/utils/generateReadme.js
new file mode 100644 (file)
index 0000000..3eb338e
--- /dev/null
+++ b/utils/generateReadme.js
@@ -0,0 +1,69 @@
+import fs from 'fs'
+
+import getCommand from './getCommand.js'
+
+const sfcTypeSupportDoc = fs.readFileSync(
+  new URL('./docs/SFC-TYPE-SUPPORT.md', import.meta.url).pathname,
+  'utf8'
+)
+
+export default function generateReadme({
+  projectName,
+  packageManager,
+  needsTypeScript,
+  needsTests
+}) {
+  let template = fs.readFileSync(
+    new URL('./docs/README-TEMPLATE.md', import.meta.url).pathname,
+    'utf8'
+  )
+
+  template = template.replace('{{projectName}}', projectName)
+
+  if (needsTypeScript) {
+    template = template.replace('<!-- SFC-TYPE-SUPPORT -->\n', sfcTypeSupportDoc)
+  } else {
+    template = template.replace('<!-- SFC-TYPE-SUPPORT -->\n\n', '')
+  }
+
+  let npmScriptsDescriptions = 
+`\`\`\`sh
+${getCommand(packageManager, 'install')}
+\`\`\`
+
+### Compile and Hot-Reload for Development
+
+\`\`\`sh
+${getCommand(packageManager, 'dev')}
+\`\`\`
+
+### ${needsTypeScript ? 'Type-Check, ' : ''}Compile and Minify for Production
+
+\`\`\`sh
+${getCommand(packageManager, 'build')}
+\`\`\`
+`
+
+  if (needsTests) {
+    npmScriptsDescriptions +=`
+### Run Unit Tests with [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction)
+
+\`\`\`sh
+${getCommand(packageManager, 'test:unit')} # or \`${getCommand(packageManager, 'test:unit:ci')}\` for headless testing
+\`\`\`
+
+### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+
+\`\`\`sh
+${getCommand(packageManager, 'test:e2e')} # or \`${getCommand(packageManager, 'test:e2e:ci')}\` for headless testing
+\`\`\`
+`
+  }
+
+  template = template.replace(
+    '<!-- NPM-SCRIPTS -->\n',
+    npmScriptsDescriptions
+  )
+
+  return template
+}

diff --git a/utils/getCommand.js b/utils/getCommand.js
new file mode 100644 (file)
index 0000000..1b6cba2
--- /dev/null
+++ b/utils/getCommand.js
@@ -0,0 +1,7 @@
+export default function getCommand(packageManager, scriptName) {
+  if (scriptName === 'install') {
+    return packageManager === 'yarn' ? 'yarn': `${packageManager} install`
+  }
+
+  return packageManager === 'npm' ? `npm run ${scriptName}` : `${packageManager} ${scriptName}`
+}