feat: d2-vue-application

add d2-vue-application to integrate the boot process

src/lib/core/index.js

@@ -0,0 +1,62 @@
+import Emitter from 'events'
+
+export class D2VueApplication extends Emitter {
+  constructor() {
+    super()
+    this.router = null
+    this.vm = null
+    this.store = null
+    this.state = {}
+    this.ready = false
+    this.waitSet = new Set()
+  }
+
+  start() {
+    this.beforeStart()
+    this.store = this.createStore()
+    this.router = this.createRouter()
+    this.vm = this.createVM({ store: this.store, router: this.router })
+    this.afterStart()
+    this.checkWait(true)
+  }
+
+  createStore() {}
+  createRouter() {}
+  beforeStart() {}
+  afterStart() {}
+  createVM() {}
+
+  waitFor(note) {
+    if (typeof note !== 'string' || note.length < 1) {
+      throw new Error('invalid string ' + note)
+    }
+
+    this.waitSet.add(note)
+
+    return () => {
+      this.waitSet.delete(note)
+      this.checkWait()
+    }
+  }
+
+  checkWait(ready) {
+    if (ready) {
+      this.ready = true
+    }
+    if (this.ready && this.waitSet.size === 0) {
+      this.mount(this.vm)
+    }
+  }
+
+  firstRoutingMiddleware() {
+    const done = this.waitFor('first routing')
+    let called = false
+    return async (_, next) => {
+      await next()
+      if (!called) {
+        called = true
+        done()
+      }
+    }
+  }
+}

src/routes/index.js

@@ -0,0 +1,20 @@
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'about',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+export default routes

src/start.js

@@ -1,18 +1,63 @@
 import Vue from 'vue'
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
-import router from './router'
-import store from './store'
+import routes from './routes'
+import RoutingGuards from './lib/routing-guards'
+import { D2VueApplication } from './lib/core'
 
+Vue.use(Vuex)
+Vue.use(VueRouter)
 Vue.use(ElementUI)
 
-export default {
-  start() {
-    new Vue({
-      router,
+class MyApplication extends D2VueApplication {
+  constructor() {
+    super()
+  }
+
+  createStore() {
+    return new Vuex.Store({
+      state: {},
+      mutations: {},
+      actions: {},
+      modules: {}
+    })
+  }
+
+  createRouter() {
+    const router = new VueRouter({ routes })
+
+    router.beforeEach(
+      new RoutingGuards()
+        .use(this.firstRoutingMiddleware())
+        .use(async () => {
+          await new Promise(resolve => setTimeout(resolve, 2000))
+        })
+        .callback()
+    )
+
+    return router
+  }
+
+  createVM({ store, router }) {
+    return new Vue({
       store,
+      router,
       render: h => h(App)
-    }).$mount('#app')
+    })
+  }
+
+  mount(vm) {
+    vm.$mount('#app')
+  }
+}
+
+export default {
+  app: null,
+  start(payload = {}) {
+    this.app = new MyApplication()
+    this.app.start(payload)
   }
 }