feat: allow passing frame to $navigateTo

rigor789 · rigor789 · commit 5ed42045bbce · 2018-06-20T19:43:54.000+02:00
BREAKING CHANGE: the options object of $navigateTo has been simplified fix nativescript-vue#213
diff --git a/platform/nativescript/plugins/navigator-plugin.js b/platform/nativescript/plugins/navigator-plugin.js
@@ -1,33 +1,52 @@
-import { topmost } from 'tns-core-modules/ui/frame'
-import { ensurePage } from '../util'
+import { isObject, isDef, isPrimitive } from 'shared/util'
+import { getFrame } from '../util/frame'
+import { getFrameById } from 'tns-core-modules/ui/frame'
+
+function getFrameInstance(frame) {
+  // get the frame that we need to navigate
+  // this can be a frame id (String)
+  // a Vue ref to a frame
+  // a Frame ViewNode
+  // or a Frame instance
+  if (isObject(frame) && isDef(frame.$el)) {
+    frame = frame.$el.nativeView
+  } else if (isPrimitive(frame)) {
+    frame = getFrameById(frame)
+  } else if (isDef(frame.nativeView)) {
+    frame = frame.nativeView
+  }
+  // finally get the component instance for this frame
+  return getFrame(frame.id)
+}
 
 export default {
   install(Vue) {
-    Vue.navigateBack = Vue.prototype.$navigateBack = function() {
-      return topmost().goBack()
-    }
+    Vue.prototype.$navigateBack = function(options) {
+      const defaultOptions = {
+        frame: 'default'
+      }
+      options = Object.assign({}, defaultOptions, options)
+      const frame = getFrameInstance(options.frame)
 
-    Vue.navigateTo = Vue.prototype.$navigateTo = function(
-      component,
-      options = {},
-      pageCb = () => {}
-    ) {
-      return new Promise(resolve => {
-        const navigationEntry = {
-          create() {
-            const vm = new (Vue.extend(component))(options.context)
-
-            vm.$mount()
-            const pageInstance = ensurePage(vm.$el, vm)
+      frame.back()
+    }
 
-            pageCb(pageInstance)
-            resolve(pageInstance)
+    Vue.prototype.$navigateTo = function(component, options) {
+      const defaultOptions = {
+        frame: 'default'
+      }
+      // build options object with defaults
+      options = Object.assign({}, defaultOptions, options)
 
-            return pageInstance
-          }
-        }
+      return new Promise(resolve => {
+        const frame = getFrameInstance(options.frame)
+        const page = new Vue({
+          parent: this,
+          render: h => h(component, { props: options.props })
+        }).$mount().$el.nativeView
 
-        topmost().navigate(Object.assign({}, navigationEntry, options))
+        frame.navigate(Object.assign({}, options, { create: () => page }))
+        resolve(page)
       })
     }
   }
diff --git a/platform/nativescript/plugins/router-plugin.js b/platform/nativescript/plugins/router-plugin.js
@@ -80,20 +80,22 @@ export function patchRouter(router, Vue) {
 
     const component = router.getMatchedComponents()[0]
 
-    Vue.navigateTo(component, {
-      context: { router },
-      transition: router.pageTransition
-      // Todo: add transitionAndroid and transitionIOS
-    }).then(page => {
-      router.pageStack.push(page)
-
-      page.on(Page.navigatedFromEvent, ({ isBackNavigation }) => {
-        if (isBackNavigation && !router.isBackNavigation) {
-          router._beginBackNavigation(false)
-          router.back()
-        }
+    router.app
+      .$navigateTo(component, {
+        context: { router },
+        transition: router.pageTransition
+        // Todo: add transitionAndroid and transitionIOS
+      })
+      .then(page => {
+        router.pageStack.push(page)
+
+        page.on(Page.navigatedFromEvent, ({ isBackNavigation }) => {
+          if (isBackNavigation && !router.isBackNavigation) {
+            router._beginBackNavigation(false)
+            router.back()
+          }
+        })
       })
-    })
   })
 }
 
diff --git a/platform/nativescript/runtime/components/frame.js b/platform/nativescript/runtime/components/frame.js
@@ -1,13 +1,24 @@
+import { setFrame, deleteFrame } from '../../util/frame'
+
 export default {
   name: 'frame',
+  props: {
+    id: {
+      default: 'default'
+    }
+  },
   created() {
+    setFrame(this.$props.id, this)
     this.cache = {}
   },
+  destroyed() {
+    deleteFrame(this.$props.id)
+  },
   render(h) {
     return h(
       'NativeFrame',
       {
-        attrs: this.$attrs,
+        attrs: Object.assign({}, this.$attrs, this.$props),
         on: this.$listeners
       },
       this.$slots.default
diff --git a/platform/nativescript/util/frame.js b/platform/nativescript/util/frame.js
@@ -0,0 +1,13 @@
+const frames = new Map()
+
+export function setFrame(id, frame) {
+  return frames.set(id, frame)
+}
+
+export function getFrame(id) {
+  return frames.get(id)
+}
+
+export function deleteFrame(id) {
+  return frames.delete(id)
+}
