chore: use fragment's anchor as insertion point

diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts
index 4af9ef74eec720d987513e57d81779796e999509..9528e91de188a848db9de76aa246c4c721680444 100644 (file)
--- a/packages/runtime-vapor/__tests__/componentSlots.spec.ts
+++ b/packages/runtime-vapor/__tests__/componentSlots.spec.ts
@@ -796,7 +796,7 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><div>fallback</div>')
+        expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
       })
 
       test('vdom slot > vapor forwarded slot(with fallback) > vapor slot', async () => {
@@ -820,7 +820,7 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><div>forwarded fallback</div>')
+        expect(root.innerHTML).toBe('<div>forwarded fallback</div><!--slot-->')
       })
 
       test('vdom slot > vapor forwarded slot > vdom slot', async () => {
@@ -1083,11 +1083,11 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><!--slot--><div>fallback</div>')
+        expect(root.innerHTML).toBe('<div>fallback</div><!--slot--><!--slot-->')
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
       })
 
       test('vdom slot > vapor forwarded slot (multiple) > vdom forwarded slot(with fallback) > vdom slot', async () => {
@@ -1116,12 +1116,12 @@ describe('component: slots', () => {
         show.value = false
         await nextTick()
         expect(root.innerHTML).toBe(
-          '<!--slot--><!--slot--><div>vdom fallback</div>',
+          '<div>vdom fallback</div><!--slot--><!--slot-->',
         )
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
       })
 
       test('vdom slot > vdom forwarded slot > vapor slot', async () => {
@@ -1168,11 +1168,11 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><div>fallback</div>')
+        expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
       })
 
       test('vdom slot > vdom forwarded slot (multiple) > vapor forwarded slot > vdom slot', async () => {
@@ -1197,11 +1197,11 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><div>fallback</div>')
+        expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
       })
 
       test('vdom slot > vdom forwarded slot (multiple) > vapor forwarded slot(with fallback) > vdom slot', async () => {
@@ -1229,11 +1229,11 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><div>vapor fallback</div>')
+        expect(root.innerHTML).toBe('<div>vapor fallback</div><!--slot-->')
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
       })
 
       test('vdom slot > vapor forwarded slot > vapor forwarded slot > vdom slot', async () => {
@@ -1257,11 +1257,11 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><div>fallback</div>')
+        expect(root.innerHTML).toBe('<div>fallback</div><!--slot-->')
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
       })
 
       test('vdom slot > vapor forwarded slot(with fallback) > vapor forwarded slot > vdom slot', async () => {
@@ -1286,11 +1286,11 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><div>vapor1 fallback</div>')
+        expect(root.innerHTML).toBe('<div>vapor1 fallback</div><!--slot-->')
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
       })
 
       test('vdom slot > vapor forwarded slot > vapor forwarded slot(with fallback) > vdom slot', async () => {
@@ -1317,11 +1317,11 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><div>vapor2 fallback</div>')
+        expect(root.innerHTML).toBe('<div>vapor2 fallback</div><!--slot-->')
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
       })
 
       test('vdom slot > vapor forwarded slot > vapor forwarded slot > vapor slot', async () => {
@@ -1344,11 +1344,11 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><!--slot--><div>fallback</div>')
+        expect(root.innerHTML).toBe('<div>fallback</div><!--slot--><!--slot-->')
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
       })
 
       test('vdom slot > vapor forwarded slot(with fallback) > vapor forwarded slot(with fallback) > vdom slot', async () => {
@@ -1376,11 +1376,11 @@ describe('component: slots', () => {
 
         show.value = false
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><div>vapor1 fallback</div>')
+        expect(root.innerHTML).toBe('<div>vapor1 fallback</div><!--slot-->')
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot-->')
       })
 
       test('vdom slot > vapor forwarded slot(with fallback) > vapor forwarded slot(with fallback) > vapor slot', async () => {
@@ -1409,12 +1409,12 @@ describe('component: slots', () => {
         show.value = false
         await nextTick()
         expect(root.innerHTML).toBe(
-          '<!--slot--><!--slot--><div>vapor1 fallback</div>',
+          '<div>vapor1 fallback</div><!--slot--><!--slot-->',
         )
 
         show.value = true
         await nextTick()
-        expect(root.innerHTML).toBe('<!--slot--><!--slot--><span>bar</span>')
+        expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
       })
 
       test('vdom slot > vdom forwarded slot(with fallback) > vdom forwarded slot(with fallback) > vapor slot', async () => {

diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts
index b2d0ca04b67da88cc8c95ef05faae3686a5e0735..93c88f9c01170fc9e7cb089bb8ffc120b4994343 100644 (file)
--- a/packages/runtime-vapor/src/block.ts
+++ b/packages/runtime-vapor/src/block.ts
@@ -124,6 +124,10 @@ export function insert(
       insert(b, parent, anchor)
     }
   } else {
+    if (block.anchor) {
+      insert(block.anchor, parent, anchor)
+      anchor = block.anchor
+    }
     // fragment
     if (block.insert) {
       // TODO handle hydration for vdom interop
@@ -131,7 +135,6 @@ export function insert(
     } else {
       insert(block.nodes, parent, anchor)
     }
-    if (block.anchor) insert(block.anchor, parent, anchor)
   }
 }
 

diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts
index a6b115f747494d519b080dd9548817987e23a1e8..9b73e15b84cbd9e19a1b0b2895803e12e01b30e5 100644 (file)
--- a/packages/runtime-vapor/src/vdomInterop.ts
+++ b/packages/runtime-vapor/src/vdomInterop.ts
@@ -102,16 +102,10 @@ const vaporInteropImpl: Omit<
   slot(n1: VNode, n2: VNode, container, anchor) {
     if (!n1) {
       // mount
-      const selfAnchor = (n2.el = n2.anchor = createTextNode())
-      insert(selfAnchor, container, anchor)
+      let selfAnchor: Node | undefined
       const { slot, fallback } = n2.vs!
       const propsRef = (n2.vs!.ref = shallowRef(n2.props))
       const slotBlock = slot(new Proxy(propsRef, vaporSlotPropsProxyHandler))
-      // TODO fallback for slot with v-if content
-      // fallback is a vnode slot function here, and slotBlock, if a DynamicFragment,
-      // expects a Vapor BlockFn as fallback
-      // fallback
-
       // forwarded vdom slot without its own fallback, use the fallback provided by
       // the slot outlet
       if (slotBlock instanceof DynamicFragment) {
@@ -121,11 +115,15 @@ const vaporInteropImpl: Omit<
           ensureVDOMSlotFallback(nodes, fallback)
           nodes = nodes.nodes
         }
+        // use fragment's anchor when possible
+        selfAnchor = slotBlock.anchor
       } else if (isFragment(slotBlock)) {
         ensureVDOMSlotFallback(slotBlock, fallback)
+        selfAnchor = slotBlock.anchor!
       }
 
-      // TODO use fragment's anchor as selfAnchor?
+      if (!selfAnchor) selfAnchor = createTextNode()
+      insert((n2.el = n2.anchor = selfAnchor), container, anchor)
       insert((n2.vb = slotBlock), container, selfAnchor)
     } else {
       // update