feat: support async component with showModal

delaneyb · delaneyb · commit 35510e6216aa · 2021-07-23T15:20:45.000+10:00
diff --git a/platform/nativescript/plugins/modal-plugin.js b/platform/nativescript/plugins/modal-plugin.js
@@ -1,6 +1,7 @@
 import { isObject, isDef, isPrimitive } from 'shared/util'
 import { updateDevtools } from '../util'
 import { VUE_ELEMENT_REF } from '../renderer/ElementNode'
+import { Placeholder, Page } from '@nativescript/core'
 
 let sequentialCounter = 0
 
@@ -61,7 +62,7 @@ export default {
     })
 
     Vue.prototype.$showModal = function (component, options) {
-      return new Promise(resolve => {
+      return new Promise(async resolve => {
         let resolved = false
         const closeCb = data => {
           if (resolved) return
@@ -99,8 +100,46 @@ export default {
               props: options.props,
               key: serializeModalOptions(options)
             })
-        })
-        const modalPage = navEntryInstance.$mount().$el.nativeView
+        }).$mount()
+        const componentName =
+          (typeof component === 'string'
+            ? component
+            : component.name ||
+              (component.__file && component.__file.match(/\w+(?=\.vue)/))) ||
+          'Unknown'
+        let modalPage = navEntryInstance.$el.nativeView
+        // This check's purpose is to determine if we are showing an async component.
+        if (modalPage instanceof Placeholder) {
+          console.log(
+            `Modal destination component ${
+              componentName || 'Unknown'
+            } rendered a <Placeholder> at its root. Waiting for update with <Page> before showing modal...`
+          )
+          // Wait for update event and make sure <Page> is rendered as root node
+          modalPage = await new Promise((resolve, reject) => {
+            let updatedFn = function () {
+              if (this.$el.nativeView instanceof Page) {
+                resolve(this.$el.nativeView)
+                this.$off('hook:updated', updatedFn)
+              } else if (!(this.$el.nativeView instanceof Placeholder)) {
+                reject(
+                  new Error(
+                    `Root element of showModal destination component ("${componentName}") must be a <Page>, got <${this.$el.nativeView.constructor.name}>`
+                  )
+                )
+                navEntryInstance.$destroy()
+                this.$off('hook:updated', updatedFn)
+              }
+            }
+            navEntryInstance.$on('hook:updated', updatedFn)
+          })
+        } else if (!(modalPage instanceof Page)) {
+          setTimeout(() => navEntryInstance.$destroy(), 0)
+          throw new Error(
+            `Root element of showModal destination component ("${componentName}") must be a <Page>, got <${modalPage.constructor.name}>`
+          )
+        }
+
         updateDevtools()
 
         getTargetView(options.target).showModal(modalPage, options)
