fix(runtime-core): TypeError when using html comment in teleport(fix #10747)

packages/runtime-core/__tests__/components/Teleport.spec.ts

@@ -13,11 +13,20 @@ import {
  nodeOps,
  ref,
  render,
+ serialize,
  serializeInner,
  withDirectives,
 } from '@vue/runtime-test'
-import { Fragment, createVNode } from '../../src/vnode'
+import {
+ Fragment,
+ createBlock,
+ createCommentVNode,
+ createTextVNode,
+ createVNode,
+ openBlock,
+} from '../../src/vnode'
 import { compile, render as domRender } from 'vue'
+import { toDisplayString } from '@vue/shared'
 
 describe('renderer: teleport', () => {
  test('should work', () => {
@@ -129,6 +138,41 @@ describe('renderer: teleport', () => {
  expect(serializeInner(target)).toMatchInlineSnapshot(`"teleported"`)
  })
 
+ test('should traverse comment node after updating in optimize mode', async () => {
+ const target = nodeOps.createElement('div')
+ const root = nodeOps.createElement('div')
+ const count = ref(0)
+ let teleport
+
+ __DEV__ = false
+ render(
+ h(() => {
+ teleport =
+ (openBlock(),
+ createBlock(Teleport, { to: target }, [
+ createCommentVNode('comment in teleport'),
+ ]))
+ return h('div', null, [
+ createTextVNode(toDisplayString(count.value)),
+ teleport,
+ ])
+ }),
+ root,
+ )
+ const commentNode = teleport!.children[0].el
+ expect(serializeInner(root)).toMatchInlineSnapshot(`"<div>0</div>"`)
+ expect(serializeInner(target)).toMatchInlineSnapshot(
+ `"<!--comment in teleport-->"`,
+ )
+ expect(serialize(commentNode)).toBe(`<!--comment in teleport-->`)
+
+ count.value = 1
+ await nextTick()
+ __DEV__ = true
+ expect(serializeInner(root)).toMatchInlineSnapshot(`"<div>1</div>"`)
+ expect(teleport!.children[0].el).toBe(commentNode)
+ })
+
  test('should remove children when unmounted', () => {
  const target = nodeOps.createElement('div')
  const root = nodeOps.createElement('div')
@@ -151,6 +195,33 @@ describe('renderer: teleport', () => {
  testUnmount({ to: target, disabled: true })
  testUnmount({ to: null, disabled: true })
  })
+ // #10747
+ test('should unmount correctly when using top level comment in teleport', async () => {
+ const target = nodeOps.createElement('div')
+ const root = nodeOps.createElement('div')
+ const count = ref(0)
+
+ __DEV__ = false
+ render(
+ h(() => {
+ return h('div', null, [
+ createTextVNode(toDisplayString(count.value)),
+ (openBlock(),
+ createBlock(Teleport, { to: target }, [
+ createCommentVNode('comment in teleport'),
+ ])),
+ ])
+ }),
+ root,
+ )
+
+ count.value = 1
+
+ await nextTick()
+ __DEV__ = true
+ render(null, root)
+ expect(root.children.length).toBe(0)
+ })
 
  test('component with multi roots should be removed when unmounted', () => {
  const target = nodeOps.createElement('div')

packages/runtime-core/src/renderer.ts

@@ -2471,7 +2471,7 @@ export function traverseStaticChildren(n1: VNode, n2: VNode, shallow = false) {
  }
  // also inherit for comment nodes, but not placeholders (e.g. v-if which
  // would have received .el during block patch)
- if (__DEV__ && c2.type === Comment && !c2.el) {
+ if (c2.type === Comment && !c2.el) {
  c2.el = c1.el
  }
  }