From 896b7369bf56c695682794d405f13d4592ef506c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Fri, 22 Mar 2019 18:22:14 +0800
Subject: [PATCH] feature: add create template (#1762)

---
 package.json                       |  4 ++-
 plop-templates/component/index.hbs | 26 ++++++++++++++
 plop-templates/component/prompt.js | 55 ++++++++++++++++++++++++++++++
 plop-templates/utils.js            |  9 +++++
 plop-templates/view/index.hbs      | 26 ++++++++++++++
 plop-templates/view/prompt.js      | 55 ++++++++++++++++++++++++++++++
 plopfile.js                        |  7 ++++
 7 files changed, 181 insertions(+), 1 deletion(-)
 create mode 100644 plop-templates/component/index.hbs
 create mode 100644 plop-templates/component/prompt.js
 create mode 100644 plop-templates/utils.js
 create mode 100644 plop-templates/view/index.hbs
 create mode 100644 plop-templates/view/prompt.js
 create mode 100644 plopfile.js

diff --git a/package.json b/package.json
index 19b00aa8..c4fb285e 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "lint": "eslint --ext .js,.vue src",
     "test": "npm run lint",
     "test:unit": "vue-cli-service test:unit",
-    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "new": "plop"
   },
   "husky": {
     "hooks": {
@@ -87,6 +88,7 @@
     "lint-staged": "7.2.2",
     "mockjs": "1.0.1-beta3",
     "node-sass": "^4.9.0",
+    "plop": "2.3.0",
     "runjs": "^4.3.2",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
diff --git a/plop-templates/component/index.hbs b/plop-templates/component/index.hbs
new file mode 100644
index 00000000..76610552
--- /dev/null
+++ b/plop-templates/component/index.hbs
@@ -0,0 +1,26 @@
+{{#if template}}
+<template>
+  <div />
+</template>
+{{/if}}
+
+{{#if script}}
+<script>
+export default {
+  name: '{{ properCase name }}',
+  props: {},
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+{{/if}}
+
+{{#if style}}
+<style lang="scss" scoped>
+
+</style>
+{{/if}}
diff --git a/plop-templates/component/prompt.js b/plop-templates/component/prompt.js
new file mode 100644
index 00000000..3723e8e1
--- /dev/null
+++ b/plop-templates/component/prompt.js
@@ -0,0 +1,55 @@
+const { notEmpty } = require('../utils.js')
+
+module.exports = {
+  description: 'generate vue component',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'component name please',
+    validate: notEmpty('name')
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: '<template>',
+      value: 'template',
+      checked: true
+    },
+    {
+      name: '<script>',
+      value: 'script',
+      checked: true
+    },
+    {
+      name: 'style',
+      value: 'style',
+      checked: true
+    }
+    ],
+    validate(value) {
+      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
+        return 'Components require at least a <script> or <template> tag.'
+      }
+      return true
+    }
+  }
+  ],
+  actions: data => {
+    const name = '{{properCase name}}'
+    const actions = [{
+      type: 'add',
+      path: `src/components/${name}/index.vue`,
+      templateFile: 'plop-templates/component/index.hbs',
+      data: {
+        name: name,
+        template: data.blocks.includes('template'),
+        script: data.blocks.includes('script'),
+        style: data.blocks.includes('style')
+      }
+    }]
+
+    return actions
+  }
+}
diff --git a/plop-templates/utils.js b/plop-templates/utils.js
new file mode 100644
index 00000000..0310ca02
--- /dev/null
+++ b/plop-templates/utils.js
@@ -0,0 +1,9 @@
+exports.notEmpty = name => {
+  return v => {
+    if (!v || v.trim === '') {
+      return `${name} is required`
+    } else {
+      return true
+    }
+  }
+}
diff --git a/plop-templates/view/index.hbs b/plop-templates/view/index.hbs
new file mode 100644
index 00000000..76610552
--- /dev/null
+++ b/plop-templates/view/index.hbs
@@ -0,0 +1,26 @@
+{{#if template}}
+<template>
+  <div />
+</template>
+{{/if}}
+
+{{#if script}}
+<script>
+export default {
+  name: '{{ properCase name }}',
+  props: {},
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+{{/if}}
+
+{{#if style}}
+<style lang="scss" scoped>
+
+</style>
+{{/if}}
diff --git a/plop-templates/view/prompt.js b/plop-templates/view/prompt.js
new file mode 100644
index 00000000..1d490ee8
--- /dev/null
+++ b/plop-templates/view/prompt.js
@@ -0,0 +1,55 @@
+const { notEmpty } = require('../utils.js')
+
+module.exports = {
+  description: 'generate a view',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'view name please',
+    validate: notEmpty('name')
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: '<template>',
+      value: 'template',
+      checked: true
+    },
+    {
+      name: '<script>',
+      value: 'script',
+      checked: true
+    },
+    {
+      name: 'style',
+      value: 'style',
+      checked: true
+    }
+    ],
+    validate(value) {
+      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
+        return 'View require at least a <script> or <template> tag.'
+      }
+      return true
+    }
+  }
+  ],
+  actions: data => {
+    const name = '{{name}}'
+    const actions = [{
+      type: 'add',
+      path: `src/views/${name}/index.vue`,
+      templateFile: 'plop-templates/view/index.hbs',
+      data: {
+        name: name,
+        template: data.blocks.includes('template'),
+        script: data.blocks.includes('script'),
+        style: data.blocks.includes('style')
+      }
+    }]
+
+    return actions
+  }
+}
diff --git a/plopfile.js b/plopfile.js
new file mode 100644
index 00000000..9f3147e2
--- /dev/null
+++ b/plopfile.js
@@ -0,0 +1,7 @@
+const viewGenerator = require('./plop-templates/view/prompt')
+const componentGenerator = require('./plop-templates/component/prompt')
+
+module.exports = function(plop) {
+  plop.setGenerator('view', viewGenerator)
+  plop.setGenerator('component', componentGenerator)
+}