examples: MountingPortal works

Thorsten Luenborg · Thorsten Luenborg · commit 5b6716fe16ae · 2020-11-08T13:32:32.000+01:00
diff --git a/example/index.html b/example/index.html
@@ -6,6 +6,7 @@
 </head>
 <body>
   <div id="app"></div>
+  <div id="external-target"></div>
   <script type="application/json">
     {
       "test": "this should not be complied."
diff --git a/example/router.ts b/example/router.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 import ToggleExample from './components/toggle/toggle-example.vue'
@@ -11,7 +10,7 @@ import Programmatic from './components/programmatic/index.vue'
 import RouterViewWithPortals from './components/router-view-with-portals/index.vue'
 import RouterViewWithPortalsA from './components/router-view-with-portals/a.vue'
 import RouterViewWithPortalsB from './components/router-view-with-portals/b.vue'
-// import MountToExternal from './components/mount-to/mount-to-external.vue'
+import MountToExternal from './components/mount-to/mount-to-external.vue'
 import EmptyPortal from './components/empty-portal/index.vue'
 import DefaultSlotContent from './components/default-content-on-target/index.vue'
 import Transitions from './components/transitions/transitions.vue'
@@ -71,10 +70,10 @@ const routes: RouteRecordRaw[] = [
     path: '/transitions',
     component: Transitions,
   },
-  // {
-  //   path: '/Mount-to-external-element',
-  //   component: MountToExternal,
-  // },
+  {
+    path: '/Mount-to-external-element',
+    component: MountToExternal,
+  },
   {
     path: '/multiple',
     component: Multiple,
diff --git a/src/components/mounting-portal.ts b/src/components/mounting-portal.ts
@@ -1,10 +1,12 @@
+import { PortalTargetProps, Wormhole } from '@/types'
 import {
   ComponentOptions,
   createApp,
   defineComponent,
   getCurrentInstance,
   h,
   onBeforeUnmount,
+  onMounted,
 } from 'vue'
 import { useWormhole, wormholeSymbol } from '../composables/wormhole'
 import { __DEV__, assertStaticProps, inBrowser } from '../utils'
@@ -28,7 +30,6 @@ export default defineComponent({
     },
     order: { type: Number, default: 0 },
     slotProps: { type: Object, default: () => ({}) },
-    tag: { type: String, default: 'DIV' },
     // name for the target
     to: {
       type: String,
@@ -40,7 +41,18 @@ export default defineComponent({
     targetSlotProps: { type: Object, default: () => ({}) },
   },
   setup(props, { slots }) {
+    __DEV__ &&
+      assertStaticProps('Portal', props, [
+        'mountTo',
+        'order',
+        'name',
+        'append',
+        'multiple',
+      ])
+
     const wormhole = useWormhole()
+    usePortal(props, slots)
+
     if (inBrowser) {
       const el = getTargetEl(props.mountTo)
 
@@ -51,18 +63,9 @@ export default defineComponent({
         __parent: getCurrentInstance()?.parent,
       }
 
-      const app = createApp({
-        // TODO: fix Component type error
-        render: () => h(PortalTarget as ComponentOptions, targetProps),
-      })
-      app.provide(wormholeSymbol, wormhole)
-      onBeforeUnmount(() => {
-        app.unmount(el)
-      })
+      mountPortalTarget(targetProps, wormhole, el)
     }
 
-    usePortal(props, slots)
-
     return () => {
       if (props.disabled && slots.default) {
         return slots.default()
@@ -73,6 +76,24 @@ export default defineComponent({
   },
 })
 
+function mountPortalTarget(
+  targetProps: PortalTargetProps,
+  wormhole: Wormhole,
+  el: HTMLElement
+) {
+  const app = createApp({
+    // TODO: fix Component type error
+    render: () => h(PortalTarget as ComponentOptions, targetProps),
+  })
+
+  app.provide(wormholeSymbol, wormhole)
+
+  onMounted(() => app.mount(el))
+  onBeforeUnmount(() => {
+    app.unmount(el)
+  })
+}
+
 function getTargetEl(mountTo: string): HTMLElement {
   const el: HTMLElement | null = document.querySelector(mountTo)
 

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`</head>`
`7`	`7`	`<body>`
`8`	`8`	`<div id="app"></div>`
	`9`	`+ <div id="external-target"></div>`
`9`	`10`	`<script type="application/json">`
`10`	`11`	`{`
`11`	`12`	`"test": "this should not be complied."`