Added standalone app

adambullmer · adambullmer · commit 8ca06ce7fe24 · 2018-07-27T02:02:49.000-05:00
diff --git a/README.md b/README.md
@@ -34,6 +34,15 @@ I hope to be able to scaffold an app so that identifying the below in unnecessar
       |- App.vue
       |- popup.html
       |- popup.js
+   |- standalone/
+      |- router/
+         |- pages/
+            |- Index.vue
+         |- index.js
+         |- routes.js
+      |- App.vue
+      |- standalone.html
+      |- standalone.js
    |- store/
       |- actions.js
       |- getters.js
@@ -77,7 +86,6 @@ yarn test
 ## Roadmap
 - Add some generator options for other pieces of browser extensions. This includes scaffolding the components/dirs, and registering the build options into the build time hooks.
   - Dev Tools
-  - Dedicated extension pages
 - A preset
 - Key Generation
 - Cleanup the dist-zip directory
diff --git a/generator/index.js b/generator/index.js
@@ -55,6 +55,17 @@ module.exports = (api, options) => {
     }
   }
 
+  if (options.components.standalone) {
+    console.log('Generating standalone app')
+    api.render('./template/standalone', { name, ...options })
+
+    pkg.vue.pages['standalone/standalone'] = {
+      entry: 'src/standalone/standalone.js',
+      filename: 'app.html',
+      title: name
+    }
+  }
+
   if (options.components.contentScript) {
     api.render('./template/content-script', { ...options })
   }
diff --git a/generator/template/standalone/src/standalone/App.vue b/generator/template/standalone/src/standalone/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/standalone/src/standalone/router/index.js b/generator/template/standalone/src/standalone/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/standalone/src/standalone/router/pages/Index.vue b/generator/template/standalone/src/standalone/router/pages/Index.vue
@@ -0,0 +1,20 @@
+<template>
+  <p>Hello world!</p>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  },
+  mounted () {
+    chrome.runtime.sendMessage({});
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 20px;
+}
+</style>
diff --git a/generator/template/standalone/src/standalone/router/routes.js b/generator/template/standalone/src/standalone/router/routes.js
@@ -0,0 +1,8 @@
+import PageIndex from './pages/Index'
+
+export default [
+  {
+    path: '/',
+    component: PageIndex
+  }
+]
diff --git a/generator/template/standalone/src/standalone/standalone.html b/generator/template/standalone/src/standalone/standalone.html
@@ -0,0 +1,12 @@
+<!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><%- '\<\%= htmlWebpackPlugin.options.title \%\>' %></title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/generator/template/standalone/src/standalone/standalone.js b/generator/template/standalone/src/standalone/standalone.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/prompts.js b/prompts.js
@@ -20,11 +20,11 @@ module.exports = [
         name: 'Content Script',
         value: 'contentScript',
         short: 'content script'
-      // },
-      // {
-      //   name: 'Standalone Tab',
-      //   value: 'standalone',
-      //   short: 'standalone'
+      },
+      {
+        name: 'Standalone Tab',
+        value: 'standalone',
+        short: 'standalone'
       // },
       // {
       //   name: 'Dev Tools Tab',

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,17 @@ module.exports = (api, options) => {`
`55`	`55`	`}`
`56`	`56`	`}`
`57`	`57`
	`58`	`+ if (options.components.standalone) {`
	`59`	`+ console.log('Generating standalone app')`
	`60`	`+ api.render('./template/standalone', { name, ...options })`
	`61`	`+`
	`62`	`+ pkg.vue.pages['standalone/standalone'] = {`
	`63`	`+ entry: 'src/standalone/standalone.js',`
	`64`	`+ filename: 'app.html',`
	`65`	`+ title: name`
	`66`	`+ }`
	`67`	`+ }`
	`68`	`+`
`58`	`69`	`if (options.components.contentScript) {`
`59`	`70`	`api.render('./template/content-script', { ...options })`
`60`	`71`	`}`