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

reverts fded1e8

fix #4023, #4031, #4037

packages/runtime-dom/__tests__/nodeOps.spec.ts

@@ -30,15 +30,11 @@ describe('runtime-dom: node-ops', () => {
     test('fresh insertion', () => {
       const content = `<div>one</div><div>two</div>three`
       const parent = document.createElement('div')
-      const [first, last] = nodeOps.insertStaticContent!(
-        content,
-        parent,
-        null,
-        false
-      )
+      const nodes = nodeOps.insertStaticContent!(content, parent, null, false)
       expect(parent.innerHTML).toBe(content)
-      expect(first).toBe(parent.firstChild)
-      expect(last).toBe(parent.lastChild)
+      expect(nodes.length).toBe(3)
+      expect(nodes[0]).toBe(parent.firstChild)
+      expect(nodes[nodes.length - 1]).toBe(parent.lastChild)
     })
 
     test('fresh insertion with anchor', () => {
@@ -47,15 +43,13 @@ describe('runtime-dom: node-ops', () => {
       const parent = document.createElement('div')
       parent.innerHTML = existing
       const anchor = parent.firstChild
-      const [first, last] = nodeOps.insertStaticContent!(
-        content,
-        parent,
-        anchor,
-        false
-      )
+      const nodes = nodeOps.insertStaticContent!(content, parent, anchor, false)
       expect(parent.innerHTML).toBe(content + existing)
-      expect(first).toBe(parent.firstChild)
-      expect(last).toBe(parent.childNodes[parent.childNodes.length - 2])
+      expect(nodes.length).toBe(3)
+      expect(nodes[0]).toBe(parent.firstChild)
+      expect(nodes[nodes.length - 1]).toBe(
+        parent.childNodes[parent.childNodes.length - 2]
+      )
     })
 
     test('fresh insertion as svg', () => {
@@ -97,7 +91,7 @@ describe('runtime-dom: node-ops', () => {
       const content = `<div>one</div><div>two</div>three`
 
       const cacheParent = document.createElement('div')
-      const [cachedFirst, cachedLast] = nodeOps.insertStaticContent!(
+      const nodes = nodeOps.insertStaticContent!(
         content,
         cacheParent,
         null,
@@ -106,20 +100,18 @@ describe('runtime-dom: node-ops', () => {
 
       const parent = document.createElement('div')
 
-      const [first, last] = nodeOps.insertStaticContent!(
+      const clonedNodes = nodeOps.insertStaticContent!(
         ``,
         parent,
         null,
         false,
-        [cachedFirst, cachedLast]
+        nodes
       )
 
       expect(parent.innerHTML).toBe(content)
-      expect(first).toBe(parent.firstChild)
-      expect(last).toBe(parent.lastChild)
-
-      expect(first).not.toBe(cachedFirst)
-      expect(last).not.toBe(cachedLast)
+      expect(clonedNodes[0]).toBe(parent.firstChild)
+      expect(clonedNodes[clonedNodes.length - 1]).toBe(parent.lastChild)
+      expect(clonedNodes[0]).not.toBe(nodes[0])
     })
   })
 })

packages/runtime-dom/src/nodeOps.ts

@@ -73,17 +73,15 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
   // As long as the user only uses trusted templates, this is safe.
   insertStaticContent(content, parent, anchor, isSVG, cached) {
     if (cached) {
-      let [cachedFirst, cachedLast] = cached
-      let first, last
-      while (true) {
-        let node = cachedFirst.cloneNode(true)
-        if (!first) first = node
+      let first
+      let last
+      let i = 0
+      let l = cached.length
+      for (; i < l; i++) {
+        const node = cached[i].cloneNode(true)
+        if (i === 0) first = node
+        if (i === l - 1) last = node
         parent.insertBefore(node, anchor)
-        if (cachedFirst === cachedLast) {
-          last = node
-          break
-        }
-        cachedFirst = cachedFirst.nextSibling!
       }
       return [first, last] as any
     }
@@ -111,11 +109,14 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
     } else {
       parent.insertAdjacentHTML('beforeend', content)
     }
-    return [
-      // first
-      before ? before.nextSibling : parent.firstChild,
-      // last
-      anchor ? anchor.previousSibling : parent.lastChild
-    ]
+    let first = before ? before.nextSibling : parent.firstChild
+    const last = anchor ? anchor.previousSibling : parent.lastChild
+    const ret = []
+    while (first) {
+      ret.push(first)
+      if (first === last) break
+      first = first.nextSibling
+    }
+    return ret
   }
 }