feat: implement readme generation

Author: haoqunjiang

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()
 }
 

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 -->

template/base/README.md renamed to 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 -->

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
+}

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}`
+}