Cleaned up router code, fixed instances not getting destroyed.

rigor789 · rigor789 · commit 465021820402 · 2017-10-19T20:32:37.000+01:00
diff --git a/platform/nativescript/framework.js b/platform/nativescript/framework.js
@@ -10,12 +10,12 @@ global.process.env = global.process.env || {}
 import Vue from './runtime/index'
 import ModalPlugin from './plugins/modal-plugin'
 import NavigatorPlugin from './plugins/navigator-plugin'
-import DecoderPlugin from './plugins/decoder-plugin'
+// import DecoderPlugin from './plugins/decoder-plugin'
 import RouterPlugin from './plugins/router-plugin'
 
 Vue.use(ModalPlugin)
 Vue.use(NavigatorPlugin)
-Vue.use(DecoderPlugin)
+// Vue.use(DecoderPlugin)
 Vue.use(RouterPlugin)
 
 export default Vue
diff --git a/platform/nativescript/plugins/navigator-plugin.js b/platform/nativescript/plugins/navigator-plugin.js
@@ -3,21 +3,14 @@ import { Page } from 'ui/page'
 import { topmost } from 'ui/frame'
 import { start } from 'application'
 import { VUE_VM_REF } from '../runtime/index'
+import { after } from '../util'
 
 export default {
   install(Vue) {
     Vue.navigateBack = Vue.prototype.$navigateBack = function() {
-      const frame = topmost()
-      frame.eachChildView(child => {
-        const vm = child[VUE_VM_REF]
-
-        if (vm && !vm.__is_root__) {
-          vm.$destroy()
-        }
-      })
-
-      return frame.goBack()
+      return topmost().goBack()
     }
+
     Vue.navigateTo = Vue.prototype.$navigateTo = function(component, options) {
       return new Promise(resolve => {
         const placeholder = Vue.$document.createComment('placeholder')
@@ -42,6 +35,16 @@ export default {
           Object.assign(
             {
               create: () => {
+                if (frame) {
+                  toPage.disposeNativeView = after(
+                    toPage.disposeNativeView,
+                    toPage,
+                    () => {
+                      vm.$destroy()
+                    }
+                  )
+                }
+
                 resolve(toPage)
                 return toPage
               }
diff --git a/platform/nativescript/plugins/router-plugin.js b/platform/nativescript/plugins/router-plugin.js
@@ -1,57 +1,48 @@
-import { android, AndroidApplication } from 'application'
+import { Page } from 'ui/page'
+import { before, trace } from '../util/index'
 
-export default {
-  install(Vue) {
-    const patchGo = router => {
-      if (router.go.__patched__) {
-        return
-      }
-
-      if (router.history.index === -1) {
-        // Todo: make sure this is indeed required
-        // The problem: When using router.replace() to set the initial route
-        // the history index stays -1, which then causes an issue when visiting a route,
-        // going back, and then trying to visit again (the active route is not changed on nav back)
-        // This fixes it, since it allows the router.go logic to run
-        router.history.index = 0
-      }
-
-      const go = router.go
-
-      router.go = n => {
-        if (router.isPageRouter && n < 0) {
-          for (let i = n; i < 0; ++i) {
-            // Todo: figure out a cleaner way to navigate back n frames
-            Vue.navigateBack()
-          }
-        }
-
-        go.call(router, n)
-      }
+export function patchRouter(router, Vue) {
+  if (router.__patched_for_page_routing__) {
+    return
+  }
+  router.__patched_for_page_routing__ = true
+
+  // The problem: When using router.replace() to set the initial route
+  // the history index stays -1, which then causes an issue when visiting a route,
+  // going back, and then trying to visit again (the active route is not changed on nav back)
+  // This fixes it, since it allows the router.go logic to run
+  router.history.index = 0
+
+  router.go = before(router.go, router, n => {
+    if (n === -1) {
+      router.isBackNavigation = true
+      Vue.navigateBack()
+    }
+  })
 
-      router.go.__patched__ = true
+  router.afterEach(() => {
+    if (router.isBackNavigation) {
+      router.isBackNavigation = false
+      return
     }
 
-    const registerGuards = router => {
-      if (router.__patched__) {
-        return
-      }
+    const component = router.getMatchedComponents()[0]
 
-      router.afterEach(() => {
-        if (!router.isPageRouter) {
-          return
+    Vue.navigateTo(component, {
+      context: { router }
+    }).then(page => {
+      page.off(Page.navigatingFromEvent)
+      page.on(Page.navigatingFromEvent, args => {
+        if (args.isBackNavigation) {
+          router.back()
         }
-
-        const component = router.getMatchedComponents()[0]
-
-        Vue.navigateTo(component, {
-          context: { router }
-        })
       })
+    })
+  })
+}
 
-      router.__patched__ = true
-    }
-
+export default {
+  install(Vue) {
     Vue.mixin({
       beforeCreate() {
         if (!this.$options.router) {
@@ -62,28 +53,7 @@ export default {
         const router = this.$options.router
         const self = this
 
-        // Handle back button on android
-        if (android && !android.__patched__) {
-          android.on(AndroidApplication.activityBackPressedEvent, e => {
-            if (router.history.index !== 0) {
-              e.cancel = true
-            }
-            router.back()
-          })
-
-          android.__patched__ = true
-        }
-
-        if (!router.hasOwnProperty('isPageRouter')) {
-          Object.defineProperty(router, 'isPageRouter', {
-            get() {
-              return self.$options.pageRouting
-            }
-          })
-        }
-
-        patchGo(router)
-        registerGuards(router)
+        patchRouter(router, Vue)
 
         // Overwrite the default $start function
         this.$start = () => {
diff --git a/platform/nativescript/util/entity-decoder.js b/platform/nativescript/util/entity-decoder.js
@@ -1,3 +1,7 @@
+export default {
+  decode
+}
+
 export function decode(html) {
   // todo?
   return html
diff --git a/platform/nativescript/util/index.js b/platform/nativescript/util/index.js
@@ -39,3 +39,21 @@ export function trace(message) {
     `{NSVue (Vue: ${VUE_VERSION} | NSVue: ${NS_VUE_VERSION})} -> ${message}`
   )
 }
+
+export function before(original, thisArg, wrap) {
+  const __slice = Array.prototype.slice
+  return function() {
+    const args = __slice.call(arguments)
+    wrap.apply(null, args)
+    original.apply(thisArg, args)
+  }
+}
+
+export function after(original, thisArg, wrap) {
+  const __slice = Array.prototype.slice
+  return function() {
+    const args = __slice.call(arguments)
+    wrap.apply(null, args)
+    original.apply(thisArg, args)
+  }
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -28,7 +28,8 @@ const aliases = {
   core: resolveVue('core'),
   shared: resolveVue('shared'),
   sfc: resolveVue('sfc'),
-  he: path.resolve(__dirname, 'node_modules', 'he', 'he')
+  //he: path.resolve(__dirname, 'node_modules', 'he', 'he')
+  he: path.resolve(__dirname, 'platform/nativescript/util/entity-decoder')
 }
 
 export default {
@@ -77,7 +78,7 @@ export default {
     commonjs({
       include: [
         path.resolve(__dirname, 'node_modules', 'vue') + '/**',
-        path.resolve(__dirname, 'node_modules', 'he') + '/**',
+        //path.resolve(__dirname, 'node_modules', 'he') + '/**',
       ],
 
       namedExports: {
diff --git a/samples/app/app-with-router-pages.js b/samples/app/app-with-router-pages.js
@@ -7,6 +7,7 @@ const Foo = {
     <page>
         <action-bar :title="$route.path"></action-bar>
         <stack-layout>
+            <label :text="$route.path" textWrap="true"></label>
             <label style="text-align: center; color: #41b883; font-size: 30">Hi I'm foo!</label>
             <button @tap="$router.push('/bar')">Bar</button>
             <button @tap="$router.push('/baz')">Baz</button>
@@ -22,6 +23,7 @@ const Bar = {
         </action-bar>
         <stack-layout>
             <label style="text-align: center; color: #41b883; font-size: 30">Hi I'm  bar!</label>
+            <button @tap="$router.push('/baz')">Baz</button>
         </stack-layout>
     </page>
 `
@@ -34,6 +36,7 @@ const Baz = {
         </action-bar>
         <stack-layout>
             <label style="text-align: center; color: #41b883; font-size: 30">Hi I'm baz!</label>
+            <button @tap="$router.push('/bar')">Bar</button>
         </stack-layout>
     </page>
 `
