wip(runtime): test for static vnode handling

Author: yyx990803

packages/runtime-core/src/renderer.ts

@@ -485,26 +485,14 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     isSVG: boolean
   ) => {
-    if (n2.el && hostCloneNode !== undefined) {
-      // static node was already mounted (and reused), or adopted
-      // server-rendered node during hydration (in this case its children can be
-      // stripped by SSR optimizations). Clone the dom nodes instead.
-      let cur: RendererElement | null = n2.el
-      while (cur && cur !== n2.anchor) {
-        hostInsert(hostCloneNode(cur), container, anchor)
-        cur = hostNextSibling(cur)
-      }
-      hostInsert(hostCloneNode(n2.anchor!), container, anchor)
-    } else {
-      // static nodes are only present when used with compiler-dom/runtime-dom
-      // which guarantees presence of hostInsertStaticContent.
-      ;[n2.el, n2.anchor] = hostInsertStaticContent!(
-        n2.children as string,
-        container,
-        anchor,
-        isSVG
-      )
-    }
+    // static nodes are only present when used with compiler-dom/runtime-dom
+    // which guarantees presence of hostInsertStaticContent.
+    ;[n2.el, n2.anchor] = hostInsertStaticContent!(
+      n2.children as string,
+      container,
+      anchor,
+      isSVG
+    )
   }
 
   /**

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

@@ -0,0 +1,50 @@
+import { createStaticVNode, h, render } from '../src'
+
+describe('static vnode handling', () => {
+  const content = `<div>hello</div><p>world</p>`
+  const content2 = `<p>foo</p><div>bar</div><span>baz</span>`
+
+  const s = createStaticVNode(content, 2)
+  const s2 = createStaticVNode(content2, 3)
+
+  test('should mount from string', () => {
+    const root = document.createElement('div')
+    render(h('div', [s]), root)
+    expect(root.innerHTML).toBe(`<div>${content}</div>`)
+  })
+
+  test('should support reusing the same hoisted node', () => {
+    const root = document.createElement('div')
+    render(h('div', [s, s]), root)
+    expect(root.innerHTML).toBe(`<div>${content}${content}</div>`)
+  })
+
+  // the rest only happens during HMR but needs to be correctly supported
+  test('should update', () => {
+    const root = document.createElement('div')
+    render(h('div', [s]), root)
+    expect(root.innerHTML).toBe(`<div>${content}</div>`)
+    render(h('div', [s2]), root)
+    expect(root.innerHTML).toBe(`<div>${content2}</div>`)
+  })
+
+  test('should move', () => {
+    const root = document.createElement('div')
+    render(h('div', [h('b'), s, h('b')]), root)
+    expect(root.innerHTML).toBe(`<div><b></b>${content}<b></b></div>`)
+    render(h('div', [s, h('b'), h('b')]), root)
+    expect(root.innerHTML).toBe(`<div>${content}<b></b><b></b></div>`)
+    render(h('div', [h('b'), h('b'), s]), root)
+    expect(root.innerHTML).toBe(`<div><b></b><b></b>${content}</div>`)
+  })
+
+  test('should remove', () => {
+    const root = document.createElement('div')
+    render(h('div', [h('b'), s, h('b')]), root)
+    expect(root.innerHTML).toBe(`<div><b></b>${content}<b></b></div>`)
+    render(h('div', [h('b'), h('b')]), root)
+    expect(root.innerHTML).toBe(`<div><b></b><b></b></div>`)
+    render(h('div', [h('b'), h('b'), s]), root)
+    expect(root.innerHTML).toBe(`<div><b></b><b></b>${content}</div>`)
+  })
+})