From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 11 Aug 2021 09:25:54 +0000 (+0800)
Subject: feat: implement readme generation
X-Git-Tag: v3.0.0-alpha.2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f1602606ca4ce3caf0807f39f5d680a7f2831959;p=thirdparty%2Fvuejs%2Fcreate-vue.git

feat: implement readme generation
---

diff --git a/index.js b/index.js
index 5974e553..c7d57b1f 100755
--- 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
index 00000000..f304a7f7
--- /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 c3a42c19..66a6bb8f 100644
--- 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
index 00000000..3eb338e1
--- /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
index 00000000..1b6cba2e
--- /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}`
+}