refactor: clean up application start

rigor789 · rigor789 · commit 9ac744ee71c8 · 2018-04-02T17:03:42.000+02:00
diff --git a/platform/nativescript/framework.js b/platform/nativescript/framework.js
@@ -44,19 +44,20 @@ console.keys = function(object) {
 // this fixes the issue of resuming the application
 // however this might not be the desired functionality
 // Todo: figure out if there is a better way to fix application resume.
-application.on(application.exitEvent, () => {
-  const frame = topmost()
-  if (frame) {
-    frame.eachChildView(child => {
-      const vm = child[VUE_VM_REF]
-
-      if (vm) {
-        vm.$destroy()
-      }
-      frame._removeView(child)
-    })
-  }
-})
+// application.on(application.exitEvent, () => {
+//   const frame = topmost()
+//   if (frame) {
+//     frame.eachChildView(child => {
+//       const vm = child[VUE_VM_REF]
+//
+//       if (vm) {
+//         console.log('DESTROYING ON APPEXITEVENT...')
+//         vm.$destroy()
+//       }
+//       frame._removeView(child)
+//     })
+//   }
+// })
 
 global.__onLiveSyncCore = () => {
   const frame = topmost()
diff --git a/platform/nativescript/plugins/modal-plugin.js b/platform/nativescript/plugins/modal-plugin.js
@@ -1,5 +1,4 @@
-import { isPage } from '../util/index'
-import { Page } from 'tns-core-modules/ui/page'
+import { ensurePage } from '../util'
 
 export default {
   install(Vue) {
@@ -8,28 +7,19 @@ export default {
       options = { context: null, fullscreen: false }
     ) {
       return new Promise(resolve => {
-        const placeholder = this.$document.createComment('placeholder')
-
         const contentComponent = Vue.extend(component)
         const vm = new contentComponent(options.context)
 
+        vm.$mount()
+        const modalPage = ensurePage(vm.$el, vm)
+
         contentComponent.prototype.$modal = {
           close(data) {
             resolve(data)
             modalPage.closeModal()
-            setTimeout(() => {
-              vm.$destroy()
-            })
           }
         }
 
-        vm.$mount(placeholder)
-        const modalPage = isPage(vm.$el) ? vm.$el.nativeView : new Page()
-
-        if (!isPage(vm.$el)) {
-          modalPage.content = vm.$el.nativeView
-        }
-
         this.$root.$el.nativeView.showModal(
           modalPage,
           null,
diff --git a/platform/nativescript/plugins/navigator-plugin.js b/platform/nativescript/plugins/navigator-plugin.js
@@ -1,9 +1,5 @@
-import { VUE_VM_REF } from '../runtime/index'
-import { isPage } from '../util/index'
-import { start } from 'tns-core-modules/application'
 import { topmost } from 'tns-core-modules/ui/frame'
-import { after } from '../util'
-import { Page } from 'tns-core-modules/ui/page'
+import { ensurePage } from '../util'
 
 export default {
   install(Vue) {
@@ -17,59 +13,21 @@ export default {
       pageCb = () => {}
     ) {
       return new Promise(resolve => {
-        const frame = topmost()
-        const navigate = frame ? frame.navigate : start
+        const navigationEntry = {
+          create() {
+            const vm = new (Vue.extend(component))(options)
 
-        if (isPage(component)) {
-          return navigate(
-            Object.assign(options, {
-              create() {
-                return component
-              }
-            })
-          )
-        }
-
-        const placeholder = Vue.$document.createComment('placeholder')
-
-        let vm = component
-        if (!component.__is_root__) {
-          const contentComponent = Vue.extend(component)
-          vm = new contentComponent(options.context)
-          vm.$mount(placeholder)
-        }
+            vm.$mount()
+            const pageInstance = ensurePage(vm.$el, vm)
 
-        const toPage = isPage(vm.$el) ? vm.$el.nativeView : new Page()
+            pageCb(pageInstance)
+            resolve(pageInstance)
 
-        if (!isPage(vm.$el)) {
-          toPage.content = vm.$el.nativeView
+            return pageInstance
+          }
         }
 
-        toPage[VUE_VM_REF] = vm
-
-        navigate.call(
-          frame,
-          Object.assign(
-            {
-              create: () => {
-                if (frame) {
-                  toPage.disposeNativeView = after(
-                    toPage.disposeNativeView,
-                    toPage,
-                    () => {
-                      vm.$destroy()
-                    }
-                  )
-                }
-
-                pageCb(toPage)
-                resolve(toPage)
-                return toPage
-              }
-            },
-            options
-          )
-        )
+        topmost().navigate(Object.assign({}, navigationEntry, options))
       })
     }
   }
diff --git a/platform/nativescript/runtime/index.js b/platform/nativescript/runtime/index.js
@@ -4,15 +4,14 @@ import { patch } from './patch'
 import { mountComponent } from 'core/instance/lifecycle'
 import { compileToFunctions } from '../compiler/index'
 import { registerElement } from '../element-registry'
-import { isPage } from '../util/index'
-import { Page } from 'tns-core-modules/ui/page'
 
 import Vue from 'core/index'
 import DocumentNode from '../renderer/DocumentNode'
 import platformComponents from './components/index'
 import platformDirectives from './directives/index'
 
 import { mustUseProp, isReservedTag, isUnknownElement } from '../util/index'
+import { ensurePage } from '../util'
 
 export const VUE_VM_REF = '__vue_vm_ref__'
 
@@ -22,47 +21,14 @@ Vue.config.isUnknownElement = isUnknownElement
 
 Vue.$document = Vue.prototype.$document = new DocumentNode()
 
+Vue.compile = compileToFunctions
 Vue.registerElement = registerElement
 
 Object.assign(Vue.options.directives, platformDirectives)
 Object.assign(Vue.options.components, platformComponents)
 
 Vue.prototype.__patch__ = patch
 
-Vue.prototype.$start = function() {
-  this.__is_root__ = true
-
-  const placeholder = this.$document.createComment('placeholder')
-
-  this.$mount(placeholder)
-}
-
-const mount = function(el, hydrating) {
-  if (this.__is_root__ && !this.__started__) {
-    const self = this
-    start({
-      create() {
-        // Call mountComponent in the create callback when the IOS app loop has started
-        // https://github.com/rigor789/nativescript-vue/issues/24
-        mountComponent(self, el, hydrating)
-        self.__started__ = true
-
-        const page = isPage(self.$el) ? self.$el.nativeView : new Page()
-
-        if (!isPage(self.$el)) {
-          page.content = self.$el.nativeView
-        }
-
-        page[VUE_VM_REF] = self
-
-        return page
-      }
-    })
-  } else {
-    return mountComponent(this, el, hydrating)
-  }
-}
-
 Vue.prototype.$mount = function(el, hydrating) {
   const options = this.$options
   // resolve template/el and convert to render function
@@ -77,30 +43,33 @@ Vue.prototype.$mount = function(el, hydrating) {
       const { render, staticRenderFns } = compileToFunctions(
         template,
         {
-          delimiters: options.delimiters
+          delimiters: options.delimiters,
+          comments: options.comments
         },
         this
       )
       options.render = render
       options.staticRenderFns = staticRenderFns
     }
   }
-  return mount.call(this, el, hydrating)
+
+  return mountComponent(this, el, hydrating)
 }
 
-Vue.compile = compileToFunctions
-Vue.prototype.$renderTemplate = function(template, context, oldVnode) {
-  let slot = template
-  if (typeof template !== 'function') {
-    slot = this.$scopedSlots[template]
-      ? this.$scopedSlots[template]
-      : this.$scopedSlots.default
-  }
+Vue.prototype.$start = function() {
+  const self = this
 
-  let vnode = slot(context)[0]
-  this.__patch__(oldVnode, vnode)
+  start({
+    create() {
+      if (self.$el) {
+        self.$el.nativeView.parent = null
+        return self.$el.nativeView
+      }
 
-  return vnode
+      self.$mount()
+      return ensurePage(self.$el, self)
+    }
+  })
 }
 
 export default Vue
diff --git a/platform/nativescript/util/index.js b/platform/nativescript/util/index.js
@@ -1,5 +1,6 @@
-import { isKnownView, getViewMeta } from '../element-registry'
+import { isKnownView, getViewMeta, getViewClass } from '../element-registry'
 import { makeMap, once } from 'shared/util'
+import { VUE_VM_REF } from '../runtime'
 
 export const isReservedTag = makeMap('template', true)
 
@@ -33,6 +34,27 @@ export function isPage(el) {
   return el && el.tagName === 'page'
 }
 
+export function ensurePage(el, vm) {
+  if (!isPage(el)) {
+    const page = new (getViewClass('page'))()
+    page.content = el.nativeView
+    if (vm) {
+      page[VUE_VM_REF] = vm
+      page.disposeNativeView = after(page.disposeNativeView, page, () =>
+        vm.$destroy()
+      )
+    }
+    return page
+  }
+
+  if (vm) {
+    el.nativeView[VUE_VM_REF] = vm
+    el.disposeNativeView = after(el.disposeNativeView, el, () => vm.$destroy())
+  }
+
+  return el.nativeView
+}
+
 export function query(el, renderer, document) {
   // Todo
 }
