feat(portal): support multiple portal appending to same target

packages/runtime-core/src/components/Portal.ts

@@ -4,10 +4,11 @@ import {
   RendererInternals,
   MoveType,
   RendererElement,
-  RendererNode
+  RendererNode,
+  RendererOptions
 } from '../renderer'
 import { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
-import { isString, ShapeFlags, PatchFlags } from '@vue/shared'
+import { isString, ShapeFlags } from '@vue/shared'
 import { warn } from '../warning'
 
 export const isPortal = (type: any): boolean => type.__isPortal
@@ -32,11 +33,11 @@ export const PortalImpl = {
       pc: patchChildren,
       pbc: patchBlockChildren,
       m: move,
-      o: { insert, querySelector, setElementText, createComment }
+      o: { insert, querySelector, createText, createComment }
     }: RendererInternals
   ) {
     const targetSelector = n2.props && n2.props.target
-    const { patchFlag, shapeFlag, children } = n2
+    const { shapeFlag, children } = n2
     if (n1 == null) {
       // insert an empty node as the placeholder for the portal
       insert((n2.el = createComment(`portal`)), container, anchor)
@@ -49,14 +50,18 @@ export const PortalImpl = {
       const target = (n2.target = isString(targetSelector)
         ? querySelector!(targetSelector)
         : targetSelector)
+      // portal content needs an anchor to support patching multiple portals
+      // appending to the same target element.
+      const portalAnchor = (n2.anchor = createText(''))
       if (target) {
-        if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-          setElementText(target, children as string)
-        } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+        insert(portalAnchor, target)
+        // Portal *always* has Array children. This is enforced in both the
+        // compiler and vnode children normalization.
+        if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
           mountChildren(
             children as VNodeArrayChildren,
             target,
-            null,
+            portalAnchor,
             parentComponent,
             parentSuspense,
             isSVG,
@@ -67,12 +72,11 @@ export const PortalImpl = {
         warn('Invalid Portal target on mount:', target, `(${typeof target})`)
       }
     } else {
-      n2.el = n1.el
       // update content
+      n2.el = n1.el
       const target = (n2.target = n1.target)!
-      if (patchFlag === PatchFlags.TEXT) {
-        setElementText(target, children as string)
-      } else if (n2.dynamicChildren) {
+      const portalAnchor = (n2.anchor = n1.anchor)!
+      if (n2.dynamicChildren) {
         // fast path when the portal happens to be a block root
         patchBlockChildren(
           n1.dynamicChildren!,
@@ -87,27 +91,20 @@ export const PortalImpl = {
           n1,
           n2,
           target,
-          null,
+          portalAnchor,
           parentComponent,
           parentSuspense,
           isSVG
         )
       }
+
       // target changed
       if (targetSelector !== (n1.props && n1.props.target)) {
         const nextTarget = (n2.target = isString(targetSelector)
           ? querySelector!(targetSelector)
           : targetSelector)
         if (nextTarget) {
-          // move content
-          if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-            setElementText(target, '')
-            setElementText(nextTarget, children as string)
-          } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-            for (let i = 0; i < (children as VNode[]).length; i++) {
-              move((children as VNode[])[i], nextTarget, null, MoveType.REORDER)
-            }
-          }
+          movePortal(n2, nextTarget, null, insert, move)
         } else if (__DEV__) {
           warn('Invalid Portal target on update:', target, `(${typeof target})`)
         }
@@ -117,12 +114,11 @@ export const PortalImpl = {
 
   remove(
     vnode: VNode,
-    { r: remove, o: { setElementText } }: RendererInternals
+    { r: remove, o: { remove: hostRemove } }: RendererInternals
   ) {
-    const { target, shapeFlag, children } = vnode
-    if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-      setElementText(target!, '')
-    } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+    const { shapeFlag, children, anchor } = vnode
+    hostRemove(anchor!)
+    if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
       for (let i = 0; i < (children as VNode[]).length; i++) {
         remove((children as VNode[])[i])
       }
@@ -130,6 +126,24 @@ export const PortalImpl = {
   }
 }
 
+const movePortal = (
+  vnode: VNode,
+  nextTarget: RendererElement,
+  anchor: RendererNode | null,
+  insert: RendererOptions['insert'],
+  move: RendererInternals['m']
+) => {
+  const { anchor: portalAnchor, shapeFlag, children } = vnode
+  // move content.
+  // Portal has either Array children or no children.
+  insert(portalAnchor!, nextTarget, anchor)
+  if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+    for (let i = 0; i < (children as VNode[]).length; i++) {
+      move((children as VNode[])[i], nextTarget, portalAnchor, MoveType.REORDER)
+    }
+  }
+}
+
 // Force-casted public typing for h and TSX props inference
 export const Portal = (PortalImpl as any) as {
   __isPortal: true

packages/runtime-core/src/renderer.ts

@@ -1839,7 +1839,7 @@ function baseCreateRenderer(
     if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
       return vnode.suspense!.next()
     }
-    return hostNextSibling((vnode.anchor || vnode.el)!)
+    return hostNextSibling((vnode.type === Fragment ? vnode.anchor : vnode.el)!)
   }
 
   const setRef = (

packages/runtime-core/src/vnode.ts

@@ -419,14 +419,17 @@ export function cloneIfMounted(child: VNode): VNode {
 
 export function normalizeChildren(vnode: VNode, children: unknown) {
   let type = 0
+  const { shapeFlag } = vnode
   if (children == null) {
     children = null
   } else if (isArray(children)) {
     type = ShapeFlags.ARRAY_CHILDREN
   } else if (typeof children === 'object') {
-    // in case <component :is="x"> resolves to native element, the vnode call
-    // will receive slots object.
-    if (vnode.shapeFlag & ShapeFlags.ELEMENT && (children as any).default) {
+    // Normalize slot to plain children
+    if (
+      (shapeFlag & ShapeFlags.ELEMENT || shapeFlag & ShapeFlags.PORTAL) &&
+      (children as any).default
+    ) {
       normalizeChildren(vnode, (children as any).default())
       return
     } else {
@@ -440,7 +443,13 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
     type = ShapeFlags.SLOTS_CHILDREN
   } else {
     children = String(children)
-    type = ShapeFlags.TEXT_CHILDREN
+    // force portal children to array so it can be moved around
+    if (shapeFlag & ShapeFlags.PORTAL) {
+      type = ShapeFlags.ARRAY_CHILDREN
+      children = [createTextVNode(children as string)]
+    } else {
+      type = ShapeFlags.TEXT_CHILDREN
+    }
   }
   vnode.children = children as VNodeNormalizedChildren
   vnode.shapeFlag |= type