feat(devtools): show navigation entries under Frame

rigor789 · rigor789 · commit e82d0676e79a · 2019-08-25T00:02:16.000+02:00
Instead of showing a NavigationEntry component under the Root element, we now properly display the pages that have been navigated to in a Frame under the Frame itself.

Additionally we now use the `key` to show additional metadata about a specific navigation in development mode.

BREAKING CHANGES:

A Frame now only accepts a single child element, that is the defaultPage for the Frame. If you have multiple pages nested under the Frame element, you will need to refactor to use `$navigateTo` instead. Additionally the default slot is only rendered once, meaning that it will not be reactive after the initial render. This is due to how the Frame element works, it renders the defaultPage, and then "navigates" to it, and it is no longer a direct child of the Frame and cannot be reactive. If this affects you, plese open an issue and describe your use case, so we can discuss possible solutions.

For most users this will not requre any additional refactoring.
diff --git a/platform/nativescript/plugins/navigator-plugin.js b/platform/nativescript/plugins/navigator-plugin.js
@@ -1,5 +1,24 @@
 import { isObject, isDef, isPrimitive } from 'shared/util'
 import { getFrame } from '../util/frame'
+import { updateDevtools } from '../util'
+
+let sequentialCounter = 0
+
+function serializeNavigationOptions(options) {
+  if (process.env.NODE_ENV === 'production') {
+    return null
+  }
+
+  const allowed = ['backstackVisible', 'clearHistory']
+
+  return Object.keys(options)
+    .filter(key => allowed.includes(key))
+    .map(key => {
+      return `${key}: ${options[key]}`
+    })
+    .concat(`uid: ${++sequentialCounter}`)
+    .join(', ')
+}
 
 export function getFrameInstance(frame) {
   // get the frame that we need to navigate
@@ -54,17 +73,21 @@ export default {
       return new Promise(resolve => {
         const frame = getFrameInstance(options.frame)
         const navEntryInstance = new Vue({
+          abstract: true,
+          functional: true,
           name: 'NavigationEntry',
-          parent: this.$root,
+          parent: frame,
           frame,
-          props: {
-            frame: {
-              default: frame.id
-            }
-          },
-          render: h => h(component, { props: options.props })
+          render: h =>
+            h(component, {
+              props: options.props,
+              key: serializeNavigationOptions(options)
+            })
         })
         const page = navEntryInstance.$mount().$el.nativeView
+        page.__isNavigatedTo = true
+
+        updateDevtools()
 
         const handler = args => {
           if (args.isBackNavigation) {
diff --git a/platform/nativescript/runtime/components/frame.js b/platform/nativescript/runtime/components/frame.js
@@ -1,4 +1,5 @@
 import { setFrame, getFrame, deleteFrame } from '../../util/frame'
+import { warn } from 'core/util/debug'
 
 let idCounter = 1
 
@@ -39,10 +40,12 @@ export default {
   },
   data() {
     return {
+      // isFirstRender: true,
       properties: {}
     }
   },
   created() {
+    this._isFirstRender = true
     let properties = {}
 
     if (getFrame(this.$props.id)) {
@@ -57,13 +60,30 @@ export default {
     deleteFrame(this.properties.id)
   },
   render(h) {
+    let vnode = null
+
+    // Render slot on first render to ensure default page is displayed
+    if (this.$slots.default && this._isFirstRender) {
+      if (
+        process.env.NODE_ENV !== 'production' &&
+        this.$slots.default.length > 1
+      ) {
+        warn(
+          `The <Frame> element can only have a single child element, that is the defaultPage.`
+        )
+      }
+      this._isFirstRender = false
+      vnode = this.$slots.default[0]
+      vnode.key = 'default'
+    }
+
     return h(
       'NativeFrame',
       {
         attrs: this.properties,
         on: this.$listeners
       },
-      this.$slots.default
+      [vnode]
     )
   },
   methods: {
@@ -97,13 +117,19 @@ export default {
     },
 
     notifyPageMounted(pageVm) {
+      console.log('Page Mounted.')
       let options = {
         backstackVisible: this.backstackVisible,
         clearHistory: this.clearHistory,
         create: () => pageVm.$el.nativeView
       }
 
       this.$nextTick(() => {
+        if (pageVm.$el.nativeView.__isNavigatedTo) {
+          // Ignore pages we've navigated to, since they are already on screen
+          return
+        }
+
         this.navigate(options)
       })
     },
diff --git a/platform/nativescript/runtime/components/page.js b/platform/nativescript/runtime/components/page.js
@@ -1,3 +1,5 @@
+import { updateDevtools } from '../../util'
+
 export const PAGE_REF = '__vuePageRef__'
 
 export default {
@@ -35,6 +37,7 @@ export default {
     this.$el.nativeView.disposeNativeView = (...args) => {
       this.$parent.$destroy()
       dispose.call(this.$el.nativeView, args)
+      updateDevtools()
     }
   },
   methods: {
diff --git a/platform/nativescript/util/index.js b/platform/nativescript/util/index.js
@@ -111,3 +111,13 @@ export function deepProxy(object, depth = 0) {
     }
   })
 }
+
+export function updateDevtools() {
+  if (global.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    try {
+      global.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('flush')
+    } catch (err) {
+      //
+    }
+  }
+}
diff --git a/samples/app/app-with-pages.js b/samples/app/app-with-pages.js
@@ -1,21 +1,29 @@
 const Vue = require('nativescript-vue')
 
-Vue.config.debug = true
+const VueDevtools = require('nativescript-vue-devtools')
+Vue.use(VueDevtools)
+
+Vue.config.devtools = true
+Vue.config.debug = false //true
 Vue.config.silent = false
 
-const App = {
+const ToggledComp = {
+  template: `<Label text="im toggled" />`
+}
+
+const DefaultPage = {
+  name: 'DefaultPage',
+
+  components: { ToggledComp },
   template: `
-  <Frame>
-    <Page>
-      <ActionBar class="action-bar" title="Home Page">
-        <ActionItem text="Action"></ActionItem>
-      </ActionBar>
-      <StackLayout>
-        <Button text="Open page" @tap="openPage" />
-      </StackLayout>
-    </Page>
-  </Frame>
-  `,
+  <Page>
+    <ActionBar class="action-bar" title="Home Page">
+      <ActionItem text="Action"></ActionItem>
+    </ActionBar>
+    <StackLayout>
+      <Button text="Open page" @tap="openPage" />
+    </StackLayout>
+  </Page>`,
 
   methods: {
     openPage() {
@@ -25,29 +33,45 @@ const App = {
 }
 
 const DetailsPage = {
+  name: 'DetailsPage',
   template: `
   <Page>
     <ActionBar class="action-bar" title="Details Page">
       <ActionItem text="Action"></ActionItem>
     </ActionBar>
     <StackLayout>
       <Label :text="'Details ' + Math.random()" />
-      <Button text="another" @tap="openDetails" />
+      <Button text="another" @tap="openDetails({})" />
+      <Button text="another backstackVisible=false" @tap="openDetails({backstackVisible: false})" />
+      <Button text="another clearHistory=true" @tap="openDefault({clearHistory: true})" />
       <Button text="back" @tap="goBack" />
     </StackLayout>
   </Page>
   `,
 
   methods: {
-    openDetails() {
-      this.$navigateTo(DetailsPage)
+    openDetails(options = {}) {
+      this.$navigateTo(DetailsPage, options)
+    },
+    openDefault(options) {
+      this.$navigateTo(DefaultPage, options)
     },
     goBack() {
       this.$navigateBack()
     }
   }
 }
 
+const App = {
+  name: 'App',
+  components: { DefaultPage },
+  template: `
+  <Frame>
+    <DefaultPage/>
+  </Frame>
+  `
+}
+
 new Vue({
   render: h => h(App)
 }).$start()

Original file line number	Diff line number	Diff line change
`@@ -111,3 +111,13 @@ export function deepProxy(object, depth = 0) {`
`111`	`111`	`}`
`112`	`112`	`})`
`113`	`113`	`}`
	`114`	`+`
	`115`	`+export function updateDevtools() {`
	`116`	`+ if (global.__VUE_DEVTOOLS_GLOBAL_HOOK__) {`
	`117`	`+ try {`
	`118`	`+ global.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('flush')`
	`119`	`+ } catch (err) {`
	`120`	`+ //`
	`121`	`+ }`
	`122`	`+ }`
	`123`	`+}`