refactor: make portal tree-shakeable

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

@@ -0,0 +1,84 @@
+import {
+  nodeOps,
+  serializeInner,
+  render,
+  h,
+  defineComponent,
+  Portal,
+  Text,
+  Fragment,
+  ref,
+  nextTick,
+  TestElement,
+  TestNode
+} from '@vue/runtime-test'
+import { VNodeArrayChildren } from '../../src/vnode'
+
+describe('renderer: portal', () => {
+  test('should work', () => {
+    const target = nodeOps.createElement('div')
+    const root = nodeOps.createElement('div')
+
+    const Comp = defineComponent(() => () =>
+      h(Fragment, [
+        h(Portal, { target }, h('div', 'teleported')),
+        h('div', 'root')
+      ])
+    )
+    render(h(Comp), root)
+
+    expect(serializeInner(root)).toMatchSnapshot()
+    expect(serializeInner(target)).toMatchSnapshot()
+  })
+
+  test('should update target', async () => {
+    const targetA = nodeOps.createElement('div')
+    const targetB = nodeOps.createElement('div')
+    const target = ref(targetA)
+    const root = nodeOps.createElement('div')
+
+    const Comp = defineComponent(() => () =>
+      h(Fragment, [
+        h(Portal, { target: target.value }, h('div', 'teleported')),
+        h('div', 'root')
+      ])
+    )
+    render(h(Comp), root)
+
+    expect(serializeInner(root)).toMatchSnapshot()
+    expect(serializeInner(targetA)).toMatchSnapshot()
+    expect(serializeInner(targetB)).toMatchSnapshot()
+
+    target.value = targetB
+    await nextTick()
+
+    expect(serializeInner(root)).toMatchSnapshot()
+    expect(serializeInner(targetA)).toMatchSnapshot()
+    expect(serializeInner(targetB)).toMatchSnapshot()
+  })
+
+  test('should update children', async () => {
+    const target = nodeOps.createElement('div')
+    const root = nodeOps.createElement('div')
+    const children = ref<VNodeArrayChildren<TestNode, TestElement>>([
+      h('div', 'teleported')
+    ])
+
+    const Comp = defineComponent(() => () =>
+      h(Portal, { target }, children.value)
+    )
+    render(h(Comp), root)
+
+    expect(serializeInner(target)).toMatchSnapshot()
+
+    children.value = []
+    await nextTick()
+
+    expect(serializeInner(target)).toMatchSnapshot()
+
+    children.value = [h(Text, 'teleported')]
+    await nextTick()
+
+    expect(serializeInner(target)).toMatchSnapshot()
+  })
+})

packages/runtime-core/__tests__/components/__snapshots__/Portal.spec.ts.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renderer: portal should update children 1`] = `"<div>teleported</div>"`;
+
+exports[`renderer: portal should update children 2`] = `""`;
+
+exports[`renderer: portal should update children 3`] = `"teleported"`;
+
+exports[`renderer: portal should update target 1`] = `"<!----><!--[object Object]--><div>root</div><!---->"`;
+
+exports[`renderer: portal should update target 2`] = `"<div>teleported</div>"`;
+
+exports[`renderer: portal should update target 3`] = `""`;
+
+exports[`renderer: portal should update target 4`] = `"<!----><!--[object Object]--><div>root</div><!---->"`;
+
+exports[`renderer: portal should update target 5`] = `""`;
+
+exports[`renderer: portal should update target 6`] = `"<div>teleported</div>"`;
+
+exports[`renderer: portal should work 1`] = `"<!----><!--[object Object]--><div>root</div><!---->"`;
+
+exports[`renderer: portal should work 2`] = `"<div>teleported</div>"`;