fix(runtime-dom): fix static node content caching edge cases

reverts fded1e8

fix #4023, #4031, #4037

packages/runtime-core/src/hydration.ts

@@ -134,10 +134,10 @@ export function createHydrationFunctions(
           // if the static vnode has its content stripped during build,
           // adopt it from the server-rendered HTML.
           const needToAdoptContent = !(vnode.children as string).length
-          for (let i = 0; i < vnode.staticCount; i++) {
+          for (let i = 0; i < vnode.staticCount!; i++) {
             if (needToAdoptContent)
               vnode.children += (nextNode as Element).outerHTML
-            if (i === vnode.staticCount - 1) {
+            if (i === vnode.staticCount! - 1) {
               vnode.anchor = nextNode
             }
             nextNode = nextSibling(nextNode)!

packages/runtime-core/src/renderer.ts

@@ -143,7 +143,7 @@ export interface RendererOptions<
     parent: HostElement,
     anchor: HostNode | null,
     isSVG: boolean,
-    cached?: [HostNode, HostNode | null] | null
+    cached?: HostNode[] | null
   ): HostElement[]
 }
 
@@ -633,7 +633,7 @@ function baseCreateRenderer(
   ) => {
     // static nodes are only present when used with compiler-dom/runtime-dom
     // which guarantees presence of hostInsertStaticContent.
-    ;[n2.el, n2.anchor] = hostInsertStaticContent!(
+    const nodes = hostInsertStaticContent!(
       n2.children as string,
       container,
       anchor,
@@ -641,8 +641,14 @@ function baseCreateRenderer(
       // pass cached nodes if the static node is being mounted multiple times
       // so that runtime-dom can simply cloneNode() instead of inserting new
       // HTML
-      n2.el && [n2.el, n2.anchor]
+      n2.staticCache
     )
+    // first mount - this is the orignal hoisted vnode. cache nodes.
+    if (!n2.el) {
+      n2.staticCache = nodes
+    }
+    n2.el = nodes[0]
+    n2.anchor = nodes[nodes.length - 1]
   }
 
   /**
@@ -686,16 +692,14 @@ function baseCreateRenderer(
     hostInsert(anchor!, container, nextSibling)
   }
 
-  const removeStaticNode = (vnode: VNode) => {
+  const removeStaticNode = ({ el, anchor }: VNode) => {
     let next
-    let { el, anchor } = vnode
     while (el && el !== anchor) {
       next = hostNextSibling(el)
       hostRemove(el)
       el = next
     }
     hostRemove(anchor!)
-    vnode.el = vnode.anchor = null
   }
 
   const processElement = (

packages/runtime-core/src/vnode.ts

@@ -167,7 +167,8 @@ export interface VNode<
   anchor: HostNode | null // fragment anchor
   target: HostElement | null // teleport target
   targetAnchor: HostNode | null // teleport target anchor
-  staticCount: number // number of elements contained in a static vnode
+  staticCount?: number // number of elements contained in a static vnode
+  staticCache?: HostNode[] // cache of parsed static nodes for faster repeated insertions
 
   // suspense
   suspense: SuspenseBoundary | null
@@ -439,7 +440,6 @@ function _createVNode(
     anchor: null,
     target: null,
     targetAnchor: null,
-    staticCount: 0,
     shapeFlag,
     patchFlag,
     dynamicProps,
@@ -521,6 +521,7 @@ export function cloneVNode<T, U>(
     target: vnode.target,
     targetAnchor: vnode.targetAnchor,
     staticCount: vnode.staticCount,
+    staticCache: vnode.staticCache,
     shapeFlag: vnode.shapeFlag,
     // if the vnode is cloned with extra props, we can no longer assume its
     // existing patch flag to be reliable and need to add the FULL_PROPS flag.