test(runtime-vapor): add test for teleport work with SVG (#14103)

diff --git a/packages/runtime-vapor/__tests__/components/Teleport.spec.ts b/packages/runtime-vapor/__tests__/components/Teleport.spec.ts
index 5f3324e1e35e0b60efc24df2dd718e9ff93aef4d..f6b47220e76b93377230ee23f0fa669078e16f8a 100644 (file)
--- a/packages/runtime-vapor/__tests__/components/Teleport.spec.ts
+++ b/packages/runtime-vapor/__tests__/components/Teleport.spec.ts
@@ -4,6 +4,7 @@ import {
   createComponent as createComp,
   createComponent,
 } from '../../src/component'
+import { withVaporCtx } from '../../src'
 import {
   type VaporDirective,
   VaporTeleport,
@@ -704,7 +705,42 @@ function runSharedTests(deferMode: boolean): void {
     expect(target.innerHTML).toBe('<div>teleported</div>')
   })
 
-  test.todo('should work with SVG', async () => {})
+  test('should work with SVG', async () => {
+    const svg = ref()
+    const circle = ref()
+    const { host } = define({
+      setup() {
+        const _setTemplateRef = createTemplateRefSetter()
+        const n0 = template('<svg></svg>', false, 1)() as any
+        const n1 = createIf(
+          () => svg.value,
+          () => {
+            const n4 = createComponent(
+              VaporTeleport,
+              { to: () => svg.value },
+              {
+                default: withVaporCtx(() => {
+                  const n3 = template('<circle></circle>', false, 1)() as any
+                  _setTemplateRef(n3, circle, undefined, undefined, 'circle')
+                  return n3
+                }),
+              },
+            )
+            return n4
+          },
+        )
+        _setTemplateRef(n0, svg, undefined, undefined, 'svg')
+        return [n0, n1]
+      },
+    }).render()
+
+    await nextTick()
+    expect(host.innerHTML).toBe(
+      '<svg><circle></circle></svg><!--teleport start--><!--teleport end--><!--if-->',
+    )
+    expect(svg.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    expect(circle.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
+  })
 
   test('should update target', async () => {
     const targetA = document.createElement('div')

diff --git a/packages/runtime-vapor/src/apiTemplateRef.ts b/packages/runtime-vapor/src/apiTemplateRef.ts
index bbe60d829a890dfd5241360e85bacbc7b6b5515b..33784d670091beec24ba555ef7415cfa34bc142b 100644 (file)
--- a/packages/runtime-vapor/src/apiTemplateRef.ts
+++ b/packages/runtime-vapor/src/apiTemplateRef.ts
@@ -35,6 +35,7 @@ export type setRefFn = (
   ref: NodeRef,
   oldRef?: NodeRef,
   refFor?: boolean,
+  refKey?: string,
 ) => NodeRef | undefined
 
 export function createTemplateRefSetter(): setRefFn {