feat(vapor): vapor teleport

packages-private/vapor-e2e-test/__tests__/teleport.spec.ts

@@ -0,0 +1,62 @@
+import path from 'node:path'
+import {
+  E2E_TIMEOUT,
+  setupPuppeteer,
+} from '../../../packages/vue/__tests__/e2e/e2eUtils'
+import connect from 'connect'
+import sirv from 'sirv'
+import { nextTick } from 'vue'
+import { ports } from '../utils'
+const { page, click, html } = setupPuppeteer()
+
+describe('vapor teleport', () => {
+  let server: any
+  const port = ports.teleport
+  beforeAll(() => {
+    server = connect()
+      .use(sirv(path.resolve(import.meta.dirname, '../dist')))
+      .listen(port)
+    process.on('SIGTERM', () => server && server.close())
+  })
+
+  afterAll(() => {
+    server.close()
+  })
+
+  beforeEach(async () => {
+    const baseUrl = `http://localhost:${port}/teleport/`
+    await page().goto(baseUrl)
+    await page().waitForSelector('#app')
+  })
+
+  test(
+    'render vdom component',
+    async () => {
+      const targetSelector = '.target'
+      const testSelector = '.interop-render-vdom-comp'
+      const containerSelector = `${testSelector} > div`
+      const btnSelector = `${testSelector} > button`
+
+      const tt = await html('#app')
+      console.log(tt)
+
+      // teleport is disabled
+      expect(await html(containerSelector)).toBe('<h1>vdom comp</h1>')
+      expect(await html(targetSelector)).toBe('')
+
+      // enable teleport
+      await click(btnSelector)
+      await nextTick()
+
+      expect(await html(containerSelector)).toBe('')
+      expect(await html(targetSelector)).toBe('<h1>vdom comp</h1>')
+
+      // disable teleport
+      await click(btnSelector)
+      await nextTick()
+      expect(await html(containerSelector)).toBe('<h1>vdom comp</h1>')
+      expect(await html(targetSelector)).toBe('')
+    },
+    E2E_TIMEOUT,
+  )
+})

packages-private/vapor-e2e-test/__tests__/todomvc.spec.ts

@@ -5,6 +5,7 @@ import {
 } from '../../../packages/vue/__tests__/e2e/e2eUtils'
 import connect from 'connect'
 import sirv from 'sirv'
+import { ports } from '../utils'
 
 describe('e2e: todomvc', () => {
   const {
@@ -23,7 +24,7 @@ describe('e2e: todomvc', () => {
   } = setupPuppeteer()
 
   let server: any
-  const port = '8194'
+  const port = ports.todomvc
   beforeAll(() => {
     server = connect()
       .use(sirv(path.resolve(import.meta.dirname, '../dist')))

packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts

@@ -5,29 +5,33 @@ import {
 } from '../../../packages/vue/__tests__/e2e/e2eUtils'
 import connect from 'connect'
 import sirv from 'sirv'
+import { ports } from '../utils'
+import { nextTick } from 'vue'
+const { page, click, text, enterValue, html } = setupPuppeteer()
 
 describe('vdom / vapor interop', () => {
-  const { page, click, text, enterValue } = setupPuppeteer()
-
   let server: any
-  const port = '8193'
+  const port = ports.vdomInterop
   beforeAll(() => {
     server = connect()
       .use(sirv(path.resolve(import.meta.dirname, '../dist')))
       .listen(port)
     process.on('SIGTERM', () => server && server.close())
   })
 
+  beforeEach(async () => {
+    const baseUrl = `http://localhost:${port}/interop/`
+    await page().goto(baseUrl)
+    await page().waitForSelector('#app')
+  })
+
   afterAll(() => {
     server.close()
   })
 
   test(
     'should work',
     async () => {
-      const baseUrl = `http://localhost:${port}/interop/`
-      await page().goto(baseUrl)
-
       expect(await text('.vapor > h2')).toContain('Vapor component in VDOM')
 
       expect(await text('.vapor-prop')).toContain('hello')
@@ -81,4 +85,33 @@ describe('vdom / vapor interop', () => {
     },
     E2E_TIMEOUT,
   )
+
+  describe('teleport', () => {
+    const testSelector = '.teleport'
+    test('render vapor component', async () => {
+      const targetSelector = `${testSelector} .teleport-target`
+      const containerSelector = `${testSelector} .render-vapor-comp`
+      const buttonSelector = `${containerSelector} button`
+
+      // teleport is disabled by default
+      expect(await html(containerSelector)).toBe(
+        `<button>toggle</button><div>vapor comp</div>`,
+      )
+      expect(await html(targetSelector)).toBe('')
+
+      // disabled -> enabled
+      await click(buttonSelector)
+      await nextTick()
+      expect(await html(containerSelector)).toBe(`<button>toggle</button>`)
+      expect(await html(targetSelector)).toBe('<div>vapor comp</div>')
+
+      // enabled -> disabled
+      await click(buttonSelector)
+      await nextTick()
+      expect(await html(containerSelector)).toBe(
+        `<button>toggle</button><div>vapor comp</div>`,
+      )
+      expect(await html(targetSelector)).toBe('')
+    })
+  })
 })

packages-private/vapor-e2e-test/index.html

@@ -1,2 +1,3 @@
 <a href="/interop/">VDOM / Vapor interop</a>
 <a href="/todomvc/">Vapor TodoMVC</a>
+<a href="/teleport/">Vapor Teleport</a>

packages-private/vapor-e2e-test/interop/App.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import VaporComp from './VaporComp.vue'
+import VaporComp from './components/VaporComp.vue'
+import SimpleVaporComp from './components/SimpleVaporComp.vue'
 
 const msg = ref('hello')
 const passSlot = ref(true)
+const disabled = ref(true)
 </script>
 
 <template>
@@ -19,4 +21,16 @@ const passSlot = ref(true)
 
     <template #test v-if="passSlot">A test slot</template>
   </VaporComp>
+
+  <!-- teleport -->
+  <div class="teleport">
+    <div class="teleport-target"></div>
+    <div class="render-vapor-comp">
+      <button @click="disabled = !disabled">toggle</button>
+      <Teleport to=".teleport-target" defer :disabled="disabled">
+        <SimpleVaporComp />
+      </Teleport>
+    </div>
+  </div>
+  <!-- teleport end-->
 </template>

packages-private/vapor-e2e-test/interop/components/SimpleVaporComp.vue

@@ -0,0 +1,6 @@
+<script setup vapor lang="ts">
+const msg = 'vapor comp'
+</script>
+<template>
+  <div>{{ msg }}</div>
+</template>

packages-private/vapor-e2e-test/teleport/App.vue

@@ -0,0 +1,17 @@
+<script setup vapor>
+import { ref, Teleport } from 'vue'
+import VdomComp from './components/VdomComp.vue'
+const disabled = ref(true)
+</script>
+
+<template>
+  <div class="target"></div>
+  <div class="interop-render-vdom-comp">
+    <button @click="disabled = !disabled">toggle</button>
+    <div>
+      <Teleport to=".target" defer :disabled>
+        <VdomComp />
+      </Teleport>
+    </div>
+  </div>
+</template>

packages-private/vapor-e2e-test/teleport/components/VdomComp.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const msg = 'vdom comp'
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+</template>

packages-private/vapor-e2e-test/teleport/index.html

@@ -0,0 +1,2 @@
+<script type="module" src="./main.ts"></script>
+<div id="app"></div>

packages-private/vapor-e2e-test/teleport/main.ts

@@ -0,0 +1,5 @@
+import { createVaporApp, vaporInteropPlugin } from 'vue'
+import App from './App.vue'
+import 'todomvc-app-css/index.css'
+
+createVaporApp(App).use(vaporInteropPlugin).mount('#app')

packages-private/vapor-e2e-test/utils.ts

@@ -0,0 +1,6 @@
+// make sure these ports are unique
+export const ports = {
+  vdomInterop: 8193,
+  todomvc: 8194,
+  teleport: 8195,
+}

packages-private/vapor-e2e-test/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
       input: {
         interop: resolve(import.meta.dirname, 'interop/index.html'),
         todomvc: resolve(import.meta.dirname, 'todomvc/index.html'),
+        teleport: resolve(import.meta.dirname, 'teleport/index.html'),
       },
     },
   },

packages/compiler-vapor/src/generators/component.ts

@@ -39,6 +39,7 @@ import { genEventHandler } from './event'
 import { genDirectiveModifiers, genDirectivesForElement } from './directive'
 import { genBlock } from './block'
 import { genModelHandler } from './vModel'
+import { isBuiltInComponent } from '../utils'
 
 export function genCreateComponent(
   operation: CreateComponentIRNode,
@@ -92,8 +93,15 @@ export function genCreateComponent(
     } else if (operation.asset) {
       return toValidAssetId(operation.tag, 'component')
     } else {
+      const { tag } = operation
+      const builtInTag = isBuiltInComponent(tag)
+      if (builtInTag) {
+        // @ts-expect-error
+        helper(builtInTag)
+        return `_${builtInTag}`
+      }
       return genExpression(
-        extend(createSimpleExpression(operation.tag, false), { ast: null }),
+        extend(createSimpleExpression(tag, false), { ast: null }),
         context,
       )
     }

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -36,7 +36,7 @@ import {
   type VaporDirectiveNode,
 } from '../ir'
 import { EMPTY_EXPRESSION } from './utils'
-import { findProp } from '../utils'
+import { findProp, isBuiltInComponent } from '../utils'
 
 export const isReservedProp: (key: string) => boolean = /*#__PURE__*/ makeMap(
   // the leading comma is intentional so empty string "" is also included
@@ -109,6 +109,12 @@ function transformComponentElement(
       asset = false
     }
 
+    const builtInTag = isBuiltInComponent(tag)
+    if (builtInTag) {
+      tag = builtInTag
+      asset = false
+    }
+
     const dotIndex = tag.indexOf('.')
     if (dotIndex > 0) {
       const ns = resolveSetupReference(tag.slice(0, dotIndex), context)

packages/compiler-vapor/src/utils.ts

@@ -88,3 +88,14 @@ export function getLiteralExpressionValue(
   }
   return exp.isStatic ? exp.content : null
 }
+
+export function isTeleportTag(tag: string): boolean {
+  tag = tag.toLowerCase()
+  return tag === 'teleport' || tag === 'vaporteleport'
+}
+
+export function isBuiltInComponent(tag: string): string | undefined {
+  if (isTeleportTag(tag)) {
+    return 'VaporTeleport'
+  }
+}

packages/runtime-core/src/components/Teleport.ts

@@ -27,10 +27,10 @@ export const TeleportEndKey: unique symbol = Symbol('_vte')
 
 export const isTeleport = (type: any): boolean => type.__isTeleport
 
-const isTeleportDisabled = (props: VNode['props']): boolean =>
+export const isTeleportDisabled = (props: VNode['props']): boolean =>
   props && (props.disabled || props.disabled === '')
 
-const isTeleportDeferred = (props: VNode['props']): boolean =>
+export const isTeleportDeferred = (props: VNode['props']): boolean =>
   props && (props.defer || props.defer === '')
 
 const isTargetSVG = (target: RendererElement): boolean =>
@@ -39,7 +39,7 @@ const isTargetSVG = (target: RendererElement): boolean =>
 const isTargetMathML = (target: RendererElement): boolean =>
   typeof MathMLElement === 'function' && target instanceof MathMLElement
 
-const resolveTarget = <T = RendererElement>(
+export const resolveTarget = <T = RendererElement>(
   props: TeleportProps | null,
   select: RendererOptions['querySelector'],
 ): T | null => {

packages/runtime-core/src/hmr.ts

@@ -119,7 +119,7 @@ function reload(id: string, newComp: HMRComponent): void {
   // create a snapshot which avoids the set being mutated during updates
   const instances = [...record.instances]
 
-  if (newComp.vapor) {
+  if (newComp.__vapor) {
     for (const instance of instances) {
       instance.hmrReload!(newComp)
     }

packages/runtime-core/src/index.ts

@@ -557,3 +557,11 @@ export { startMeasure, endMeasure } from './profiling'
  * @internal
  */
 export { initFeatureFlags } from './featureFlags'
+/**
+ * @internal
+ */
+export {
+  resolveTarget as resolveTeleportTarget,
+  isTeleportDisabled,
+  isTeleportDeferred,
+} from './components/Teleport'

packages/runtime-vapor/__tests__/block.spec.ts

@@ -1,10 +1,5 @@
-import {
-  VaporFragment,
-  insert,
-  normalizeBlock,
-  prepend,
-  remove,
-} from '../src/block'
+import { insert, normalizeBlock, prepend, remove } from '../src/block'
+import { VaporFragment } from '../src/fragment'
 
 const node1 = document.createTextNode('node1')
 const node2 = document.createTextNode('node2')