Added some scaffolding to plugin generation

adambullmer · adambullmer · commit 59be54ef7c5f · 2018-07-12T01:08:03.000-05:00
diff --git a/generator/index.js b/generator/index.js
@@ -1,12 +1,20 @@
 module.exports = (api, { config }) => {
+  const eslintConfig = { env: { webextensions: true } }
   const pkg = {
     scripts: {
       'ext-serve': 'vue-cli-service ext-serve'
     },
-    devDependencies: {
-      'vue-cli-plugin-build-watch': '^1.0.0'
+    dependencies: {
+      'vue-router': '^3.0.1',
+      'vuex': '^3.0.1'
     }
   }
 
+  if (api.hasPlugin('eslint')) {
+    console.log('Adding eslint config stuffs')
+    pkg.eslintConfig = eslintConfig
+  }
+
   api.extendPackage(pkg)
+  api.render('./template')
 }
diff --git a/generator/template/src/background.js b/generator/template/src/background.js
@@ -0,0 +1,5 @@
+import store from './store'
+
+chrome.browserAction.onClicked.addListener(function (tab) {
+  console.log(`Hello ${store.getters.foo}!`)
+})
diff --git a/generator/template/src/manifest.json b/generator/template/src/manifest.json
@@ -0,0 +1,30 @@
+{
+  "manifest_version": 2,
+  "icons": {
+    "16": "icons/16.png",
+    "48": "icons/48.png",
+    "128": "icons/128.png"
+  },
+  "name": "<%- rootOptions.projectName %>",
+  "homepage_url": "http://localhost/",
+  "description": "A Vue Browser Extension",
+  "version": "1.0",
+  "permissions": ["activeTab", "http://*/*", "https://*/*"],
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
+  "browser_action": {
+    "default_title": "<%- rootOptions.projectName %>",
+    "default_icon": {
+      "19": "icons/19.png",
+      "38": "icons/38.png"
+    },
+    "default_popup": "popup/popup.html"
+  },
+  "background": {
+    "scripts": [
+      "background.js"
+    ]
+  }
+}
diff --git a/generator/template/src/popup/App.vue b/generator/template/src/popup/App.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style>
+html {
+    width: 400px;
+    height: 400px;
+}
+</style>
diff --git a/generator/template/src/popup/popup.html b/generator/template/src/popup/popup.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title><%- rootOptions.projectName %></title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div id="app">
+
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/generator/template/src/popup/popup.js b/generator/template/src/popup/popup.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App'
+import store from '../store'
+import router from './router'
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  store,
+  router,
+  render: h => h(App)
+})
diff --git a/generator/template/src/popup/router/index.js b/generator/template/src/popup/router/index.js
@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import routes from './routes'
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+  routes
+})
diff --git a/generator/template/src/popup/router/pages/Index.vue b/generator/template/src/popup/router/pages/Index.vue
@@ -0,0 +1,17 @@
+<template>
+  <p>Hello world!</p>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 20px;
+}
+</style>
diff --git a/generator/template/src/popup/router/routes.js b/generator/template/src/popup/router/routes.js
@@ -0,0 +1,8 @@
+import PageIndex from './pages/Index'
+
+export default [
+  {
+    path: '/',
+    component: PageIndex
+  }
+]
diff --git a/generator/template/src/store/actions.js b/generator/template/src/store/actions.js
@@ -0,0 +1,5 @@
+import * as types from './mutation-types'
+
+export const setFoo = ({commit}, payload) => {
+  commit(types.UPDATE_FOO, payload)
+}
diff --git a/generator/template/src/store/getters.js b/generator/template/src/store/getters.js
@@ -0,0 +1 @@
+export const foo = (state) => state.foo
diff --git a/generator/template/src/store/index.js b/generator/template/src/store/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import * as getters from './getters'
+import mutations from './mutations'
+import * as actions from './actions'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: { foo: 'bar' },
+  getters,
+  mutations,
+  actions
+})
diff --git a/generator/template/src/store/mutation-types.js b/generator/template/src/store/mutation-types.js
@@ -0,0 +1 @@
+export const UPDATE_FOO = 'UPDATE_FOO'
diff --git a/generator/template/src/store/mutations.js b/generator/template/src/store/mutations.js
@@ -0,0 +1,7 @@
+import * as types from './mutation-types'
+
+export default {
+  [types.UPDATE_FOO] (state, payload) {
+    state.foo = payload
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-browser-extension",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Browser extension development plugin for vue-cli 3.0",
   "main": "index.js",
   "scripts": {
