feat: core

Author: yyx990803

packages/@vue/cli/lib/Creator.js

@@ -1,5 +1,6 @@
 const fs = require('fs')
 const os = require('os')
+const ejs = require('ejs')
 const path = require('path')
 const inquirer = require('inquirer')
 const { warn } = require('./util/log')
@@ -20,6 +21,7 @@ const defaultOptions = {
 
 module.exports = class Creator {
   constructor (name, generators) {
+    this.name = name
     const { modePrompt, featurePrompt } = this.resolveIntroPrompts()
     this.modePrompt = modePrompt
     this.featurePrompt = featurePrompt
@@ -28,6 +30,7 @@ module.exports = class Creator {
     this.promptCompleteCbs = []
     this.fileMiddlewares = []
 
+    this.options = {}
     this.pkg = {
       name,
       version: '0.1.0',
@@ -41,8 +44,8 @@ module.exports = class Creator {
     // virtual file tree
     this.files = {}
 
-    generators.forEach(generator => {
-      generator.module(new GeneratorAPI(this, generator))
+    generators.forEach(({ id, apply }) => {
+      apply(new GeneratorAPI(id, this))
     })
   }
 
@@ -56,10 +59,12 @@ module.exports = class Creator {
     } else if (options.mode === 'default') {
       options = defaultOptions
     }
+    options.projectName = this.name
     options.features = options.features || []
 
     // run cb registered by generators
     this.promptCompleteCbs.forEach(cb => cb(options))
+    this.options = options
     debug('options')(options)
     // save options
     if (options.mode === 'manual' && options.save) {
@@ -82,18 +87,18 @@ module.exports = class Creator {
       message: `Pick a project creation mode:`,
       choices: [
         {
-          name: 'Zero-configuration with defaults (Babel, ESLint, Unit Tests w/ Mocha)',
+          name: 'Zero-configuration with defaults',
           value: 'default'
         },
         {
-          name: 'Manually select features (advanced)',
+          name: 'Manually select features',
           value: 'manual'
         }
       ]
     }
     if (fs.existsSync(rcPath)) {
       modePrompt.choices.unshift({
-        name: 'Using saved preferences',
+        name: 'Use previously saved preferences',
         value: 'saved'
       })
     }
@@ -120,7 +125,7 @@ module.exports = class Creator {
       }
     ]
     if (hasYarn()) {
-      outroPrompts.push({
+      outroPrompts.unshift({
         name: 'packageManager',
         when: isMode('manual'),
         type: 'list',
@@ -144,7 +149,7 @@ module.exports = class Creator {
         ]
       })
     } else {
-      outroPrompts.push({
+      outroPrompts.unshift({
         name: 'packageManager',
         when: isMode('manual'),
         type: 'confirm',
@@ -209,7 +214,7 @@ module.exports = class Creator {
 
   async resolveFiles () {
     for (const middleware of this.fileMiddlewares) {
-      await middleware(this.files)
+      await middleware(this.files, ejs.render)
     }
     debug('files')(this.files)
   }

packages/@vue/cli/lib/Generator.js

@@ -1,12 +1,19 @@
+const fs = require('fs')
+const ejs = require('ejs')
+const path = require('path')
+const walk = require('klaw-sync')
 const { error } = require('./util/log')
 const mergeDeps = require('./util/mergeDeps')
-const isObject = val => val && typeof val === 'object'
+const errorParser = require('error-stack-parser')
+
+const isString = val => typeof val === 'string'
 const isFunction = val => typeof val === 'function'
+const isObject = val => val && typeof val === 'object'
 
 module.exports = class GeneratorAPI {
-  constructor (creator, generator) {
+  constructor (id, creator) {
+    this.id = id
     this.creator = creator
-    this.generator = generator
   }
 
   injectFeature (feature) {
@@ -24,7 +31,7 @@ module.exports = class GeneratorAPI {
     if (!prompt) {
       error(
         `injectOptionForFeature error in generator "${
-          this.generator.id
+          this.id
         }": prompt "${name}" does not exist.`
       )
     }
@@ -58,7 +65,7 @@ module.exports = class GeneratorAPI {
           if (key === 'dependencies' || key === 'devDependencies') {
             // use special version resolution merge
             pkg[key] = mergeDeps(
-              this.generator.id,
+              this.id,
               existing,
               value,
               this.creator.depSources
@@ -73,9 +80,40 @@ module.exports = class GeneratorAPI {
     }
   }
 
-  renderFile (file, additionalData, ejsOptions) {
-    // TODO render file based on generator path
-    // render with ejs & options
-    return file
+  renderFiles (fileDir, additionalData = {}, ejsOptions = {}) {
+    const baseDir = extractCallDir()
+    if (isString(fileDir)) {
+      fileDir = path.resolve(baseDir, fileDir)
+      this.injectFileMiddleware(files => {
+        const data = Object.assign({}, this.creator.options, additionalData)
+        const _files = walk(fileDir, { nodir: true })
+        for (const file of _files) {
+          const relativePath = path.relative(fileDir, file.path)
+          files[relativePath] = renderFile(file.path, data, ejsOptions)
+        }
+      })
+    } else if (isObject(fileDir)) {
+      this.injectFileMiddleware(files => {
+        const data = Object.assign({}, this.creator.options, additionalData)
+        for (const targetPath in fileDir) {
+          const sourcePath = path.resolve(baseDir, fileDir[targetPath])
+          files[targetPath] = renderFile(sourcePath, data, ejsOptions)
+        }
+      })
+    } else if (isFunction(fileDir)) {
+      this.injectFileMiddleware(fileDir)
+    }
   }
 }
+
+function extractCallDir () {
+  // extract api.renderFiles() callsite file location using error stack
+  const obj = {}
+  Error.captureStackTrace(obj)
+  const stack = errorParser.parse(obj)
+  return path.dirname(stack[2].fileName)
+}
+
+function renderFile (name, data, ejsOptions) {
+  return ejs.render(fs.readFileSync(name, 'utf-8'), data, ejsOptions)
+}

packages/@vue/cli/lib/GeneratorAPI.js

@@ -3,7 +3,6 @@ const path = require('path')
 const program = require('commander')
 const Creator = require('./Creator')
 const debug = require('debug')('create')
-const Generator = require('./Generator')
 const { warn, error } = require('./util/log')
 const resolveInstalledGenerators = require('./util/resolveInstalledGenerators')
 
@@ -18,15 +17,20 @@ if (!projectName) {
   process.exit(1)
 }
 
+const createGenerator = (id, requirePath = id) => ({
+  id,
+  apply: require(requirePath)
+})
+
 const builtInGenerators = fs
   .readdirSync(path.resolve(__dirname, './generators'))
   .filter(dir => dir.charAt(0) !== '.')
-  .map(id => new Generator(id, `./generators/${id}`))
+  .map(id => createGenerator(id, `./generators/${id}`))
 
 debug(builtInGenerators)
 
 const installedGenerators = resolveInstalledGenerators().map(id => {
-  return new Generator(id)
+  return createGenerator(id)
 })
 
 const targetDir = path.resolve(process.cwd(), projectName)

packages/@vue/cli/lib/create.js

@@ -7,9 +7,7 @@ module.exports = api => {
           'babel-preset-vue-app': '^2.0.0'
         }
       })
-      api.injectFileMiddleware(files => {
-        files['.babelrc'] = api.renderFile('.babelrc')
-      })
+      api.renderFiles('./files')
     }
   })
 }

packages/@vue/cli/lib/generators/babel/index.js

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title><%= projectName %></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

packages/@vue/cli/lib/generators/core/files/public/index.html

@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'app',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

packages/@vue/cli/lib/generators/core/files/src/App.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+      <br>
+      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
+      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
+      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

packages/@vue/cli/lib/generators/core/files/src/assets/logo.png

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

packages/@vue/cli/lib/generators/core/files/src/components/HelloWorld.vue

@@ -1,3 +1,16 @@
 module.exports = api => {
-
+  api.renderFiles('./files')
+  api.extendPackage({
+    scripts: {
+      'dev': 'vue-cli-service serve',
+      'build': 'vue-cli-service build',
+      'start': 'vue-cli-service serve --prod'
+    },
+    dependencies: {
+      'vue': '^2.5.13'
+    },
+    devDependencies: {
+      '@vue/cli-service': '^1.0.0'
+    }
+  })
 }

packages/@vue/cli/lib/generators/core/files/src/main.js

@@ -5,15 +5,15 @@ import { expect } from 'expect'
 <%_ if (assertionLibrary === 'chai') { _%>
 import { expect } from 'chai'
 <%_ } _%>
-import Hello from '@/components/Hello.vue'
+import HelloWorld from '@/components/HelloWorld.vue'
 
 describe('Hello.vue', () => {
   it('renders props.msg when passed', () => {
     const msg = 'new message'
-    const wrapper = shallow(Hello, {
+    const wrapper = shallow(HelloWorld, {
       context: { props: { msg } }
     })
-    <%_ if (assertionLibrary === 'expect' || unit === 'jest') { _%>
+    <%_ if (assertionLibrary === 'expect') { _%>
     expect(wrapper.text()).toBe(msg)
     <%_ } _%>
     <%_ if (assertionLibrary === 'chai') { _%>

packages/@vue/cli/lib/generators/core/index.js

@@ -1,4 +1,6 @@
 module.exports = (api, options) => {
+  options.assertionLibrary = 'expect'
+  api.renderFiles('./files')
   api.extendPackage({
     scripts: {
       test: 'jest'
@@ -32,9 +34,4 @@ module.exports = (api, options) => {
       'mapCoverage': true
     }
   })
-
-  api.injectFileMiddleware(files => {
-    // add dummy test
-    files['test/unit/Hello.spec.js'] = api.renderFile('Hello.spec.js')
-  })
 }

packages/@vue/cli/lib/generators/unit/files/Hello.spec.js packages/@vue/cli/lib/generators/unit/files/test/unit/HelloWorld.spec.js

@@ -16,8 +16,5 @@ module.exports = (api, options) => {
     }
   })
 
-  api.injectFileMiddleware(files => {
-    // add dummy test
-    files['test/unit/Hello.spec.js'] = api.renderFile('Hello.spec.js')
-  })
+  api.renderFiles('./files')
 }