Frame and router - a new hope (through factory extensibility)

build/config.js

@@ -65,7 +65,7 @@ const genConfig = (name) => {
             pureExternalModules: id => id.startsWith('weex')
         },
         watch: {
-          chokidar: false
+            chokidar: false
         },
         plugins: [
             replace({

package.json

@@ -12,6 +12,7 @@
     "tdd": "jest --watch",
     "samples": "node build/sample-runner.js",
     "dev": "rollup -c build/config.js -w --o samples/app/nativescript-vue.js --environment TARGET:nativescript-vue",
+    "dev:dist": "rollup -c build/config.js -w --o dist/index.js --environment TARGET:nativescript-vue",
     "build": "node build/build.js",
     "build:docs": "cd docs && npm run build",
     "prettier": "prettier --no-semi --single-quote --write \"{{platform,__test__}/**/*.js,samples/app/*.js}\"",
@@ -76,7 +77,8 @@
     "set-value": "^2.0.0",
     "tns-core-modules": "4.1.0",
     "util-inspect": "^0.1.8",
-    "vue": "^2.5.16"
+    "vue": "^2.5.16",
+    "vue-router": "file:../vue-router/"
   },
   "jest": {
     "verbose": true,

platform/nativescript/element-registry.js

@@ -1,6 +1,6 @@
 import * as builtInComponents from './runtime/components'
 
-const elementMap = new Map()
+const elementMap = {}
 const nativeRegExp = /Native/gi
 const dashRegExp = /-/g
 
@@ -25,7 +25,7 @@ export function registerElement(elementName, resolver, meta) {
 
   meta = Object.assign({}, defaultViewMeta, meta)
 
-  if (elementMap.has(normalizedName)) {
+  if (elementMap[normalizedName]) {
     throw new Error(`Element for ${elementName} already registered.`)
   }
 
@@ -46,7 +46,7 @@ export function registerElement(elementName, resolver, meta) {
     resolver: resolver,
     meta: meta
   }
-  elementMap.set(normalizedName, entry)
+  elementMap[normalizedName] = entry
 }
 
 export function getElementMap() {
@@ -55,7 +55,7 @@ export function getElementMap() {
 
 export function getViewClass(elementName) {
   const normalizedName = normalizeElementName(elementName)
-  const entry = elementMap.get(normalizedName)
+  const entry = elementMap[normalizedName]
 
   if (!entry) {
     throw new TypeError(`No known component for element ${elementName}.`)
@@ -72,7 +72,7 @@ export function getViewMeta(elementName) {
   const normalizedName = normalizeElementName(elementName)
 
   let meta = defaultViewMeta
-  const entry = elementMap.get(normalizedName)
+  const entry = elementMap[normalizedName]
 
   if (entry && entry.meta) {
     meta = entry.meta
@@ -82,7 +82,7 @@ export function getViewMeta(elementName) {
 }
 
 export function isKnownView(elementName) {
-  return elementMap.has(normalizeElementName(elementName))
+  return elementMap[normalizeElementName(elementName)]
 }
 
 registerElement(

platform/nativescript/framework.js

@@ -9,7 +9,7 @@ import application from 'tns-core-modules/application'
 import Vue from './runtime/index'
 import ModalPlugin from './plugins/modal-plugin'
 import NavigatorPlugin from './plugins/navigator-plugin'
-import RouterPlugin from './plugins/router-plugin'
+import mode from './plugins/router-plugin'
 
 import { setVue } from './util'
 
@@ -19,7 +19,6 @@ setVue(Vue)
 
 Vue.use(ModalPlugin)
 Vue.use(NavigatorPlugin)
-Vue.use(RouterPlugin)
 
 const newLineRegExp = /\\n/g
 
@@ -73,4 +72,9 @@ global.__onLiveSyncCore = () => {
   }
 }
 
+Object.assign(Vue, {
+  Vue,
+  mode
+})
+
 export default Vue

platform/nativescript/plugins/router-plugin.js

@@ -1,145 +1,69 @@
+import Vue from 'core/index'
+
 import { android } from 'tns-core-modules/application'
 import { isPlainObject } from 'shared/util'
 
-const properties = ['stack', 'index', 'current']
-
-class NativeScriptHistory {
-  constructor(router, history) {
-    this.router = router
-    this.history = history
-    this.isGoingBack = false
+const operations = ['push', 'replace', 'go']
 
-    if (android) {
-      android.on('activityBackPressed', function(args) {
-        if (history.index > 0) {
-          args.cancel = true
+function extractEntry(args) {
+  let entry
 
-          router.back()
-        }
-      })
+  for (let i = 1; i < args.length; i++) {
+    if (isPlainObject(args[i])) {
+      entry = args[i]
+      delete args[i]
     }
-
-    properties.forEach(name => {
-      Object.defineProperty(NativeScriptHistory.prototype, name, {
-        get: () => {
-          return this.history[name]
-        },
-        set: value => {
-          this.history[name] = value
-        }
-      })
-    })
-  }
-
-  _buildEntry(args) {
-    let entry
-
-    for (let i = 1; i < args.length; i++) {
-      if (isPlainObject(args[i])) {
-        entry = args[i]
-        delete args[i]
-      }
-    }
-
-    return { args, entry }
-  }
-
-  push(...args) {
-    ;({ args, entry: this.currentEntry } = this._buildEntry(args))
-
-    this.isGoingBack = false
-    this.history.push.call(this.history, ...args)
-  }
-
-  replace(...args) {
-    ;({ args, entry: this.currentEntry } = this._buildEntry(args))
-
-    this.isGoingBack = false
-    this.history.replace.call(this.history, ...args)
-  }
-
-  go(n, entry) {
-    this.isGoingBack = n < 0
-
-    this.currentEntry = entry
-
-    this.history.go.call(this.history, n)
-  }
-
-  getCurrentLocation() {
-    return this.history.getCurrentLocation.call(this.history)
-  }
-
-  onReady(...args) {
-    this.history.onReady.call(this.history, ...args)
-  }
-
-  onError(...args) {
-    this.history.onError.call(this.history, ...args)
-  }
-
-  listen(...args) {
-    this.history.listen.call(this.history, ...args)
-  }
-
-  transitionTo(...args) {
-    this.history.transitionTo.call(this.history, ...args)
-  }
-
-  confirmTransition(...args) {
-    this.history.confirmTransition.call(this.history, ...args)
-  }
-
-  updateRoute(...args) {
-    this.history.updateRoute.call(this.history, ...args)
-  }
-
-  setupListeners(...args) {
-    this.history.setupListeners.call(this.history, ...args)
-  }
-}
-
-export function patchDefaultRouter(router) {
-  if (router.__patched_for_routing__) {
-    return
   }
 
-  router.__patched_for_routing__ = true
-
-  router.history = new NativeScriptHistory(router, router.history)
-
-  router.push = function push(...args) {
-    this.history.push(...args)
-  }
+  args = args.filter(n => n)
 
-  router.replace = function push(...args) {
-    this.history.push(...args)
-  }
-
-  router.go = function go(n, entry) {
-    this.history.go(n, entry)
-  }
-
-  router.back = function back(entry) {
-    this.go(-1, entry)
-  }
-
-  router.forward = function forward(entry) {
-    this.go(1, entry)
-  }
+  return { args, entry }
 }
 
-export default {
-  install(Vue) {
-    Vue.mixin({
-      beforeCreate() {
-        if (!this.$options.router) {
-          // If there is no router, we don't care
-          return
+let mode
+
+export default (mode = {
+  name: 'NativeScriptHistory',
+
+  factory(ancestor) {
+    return class NativeScriptHistory extends ancestor {
+      constructor(router, base) {
+        super(router, base)
+        this.router = router
+
+        this.store = new Vue({
+          data() {
+            return {
+              operation: 'push',
+              isGoingBack: false,
+              entry: {}
+            }
+          }
+        })
+
+        if (android) {
+          android.on('activityBackPressed', args => {
+            if (!args.cancel && this.index > 0) {
+              args.cancel = true
+
+              router.back()
+            }
+          })
         }
 
-        patchDefaultRouter(this.$options.router)
+        operations.forEach(name => {
+          this[name] = (...args) => {
+            if (args.length > 1) {
+              ;({ args, entry: this.store.entry } = extractEntry(args))
+            } else if (name === 'go') {
+              this.store.isGoingBack = args[0] < 0
+            }
+
+            this.store.operation = name
+            super[name](...args)
+          }
+        })
       }
-    })
+    }
   }
-}
+})