feat(runtime-vapor): fix slots level

Author: Doctor-wu

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

@@ -3,6 +3,7 @@
 import {
   type ComponentInternalInstance,
   createComponent,
+  createFor,
   createForSlots,
   createSlot,
   createVaporApp,
@@ -15,6 +16,7 @@ import {
   renderEffect,
   setText,
   template,
+  useSlots,
   withDestructure,
 } from '../src'
 import { makeRender } from './_utils'
@@ -326,7 +328,71 @@ describe('component: slots', () => {
     expect(instance.slots).not.toHaveProperty('1')
   })
 
-  test('dynamicSlots should not cover high weight static slots', async () => {
+  test('should not delete new rendered slot when the old slot is removed in loop slot', async () => {
+    const loop = ref([1, 'default', 3])
+
+    let childInstance
+    const t0 = template('<div></div>')
+    const { component: Child } = define({
+      setup() {
+        childInstance = getCurrentInstance()
+        const slots = useSlots()
+        const keys = () => Object.keys(slots)
+        return {
+          keys,
+          slots,
+        }
+      },
+      render: (_ctx: any) => {
+        const n0 = createFor(
+          () => _ctx.keys(),
+          (_ctx0: any) => {
+            const n5 = t0()
+            const n4 = createSlot(() => _ctx0[0])
+            insert(n4, n5 as ParentNode)
+            return n5
+          },
+        )
+        return n0
+      },
+    })
+
+    const t1 = template(' static default ')
+    const { render } = define({
+      setup() {
+        return createComponent(Child, {}, [
+          {
+            default: () => {
+              return t1()
+            },
+          },
+          () =>
+            createForSlots(loop.value, (item, i) => ({
+              name: item,
+              fn: () => template(item)(),
+            })),
+        ])
+      },
+    })
+    const { html } = render()
+
+    expect(childInstance!.slots).toHaveProperty('1')
+    expect(childInstance!.slots).toHaveProperty('default')
+    expect(childInstance!.slots).toHaveProperty('3')
+    expect(html()).toBe(
+      '<div>1<!--slot--></div><div>3<!--slot--></div><div>default<!--slot--></div><!--for-->',
+    )
+    loop.value = [1]
+    await nextTick()
+    expect(childInstance!.slots).toHaveProperty('1')
+    expect(childInstance!.slots).toHaveProperty('default')
+    expect(childInstance!.slots).not.toHaveProperty('3')
+    expect(html()).toBe(
+      '<div>1<!--slot--></div><div> static default <!--slot--></div><!--for-->',
+    )
+  })
+
+  test('dynamicSlots should not cover high level slots', async () => {
     const dynamicFlag = ref(true)
 
     let instance: ComponentInternalInstance
@@ -343,7 +409,7 @@ describe('component: slots', () => {
           () =>
             dynamicFlag.value
               ? { name: 'default', fn: () => template('dynamic default')() }
-              : { name: 'others', fn: () => template('ohters')() },
+              : { name: 'others', fn: () => template('others')() },
           {
             default: () => template('default')(),
           },

packages/runtime-vapor/src/componentSlots.ts

@@ -45,51 +45,93 @@ export function initSlots(
     // with ctx
     const slots = rawSlots[0] as StaticSlots
     for (const name in slots) {
-      registerSlot(name, slots[name])
+      resolveSlot(name, slots[name])
     }
     return
   }
 
   instance.slots = shallowReactive({})
-  const keys: Set<string>[] = []
+  const renderedSlotKeys: Set<string>[] = []
+  const slotNameLevels: Record<string, [number, Slot][]> = {}
   rawSlots.forEach((slots, index) => {
     const isDynamicSlot = isDynamicSlotFn(slots)
     if (isDynamicSlot) {
       firstEffect(instance, () => {
-        const recordNames = keys[index] || (keys[index] = new Set())
+        const renderedKeys =
+          renderedSlotKeys[index] || (renderedSlotKeys[index] = new Set())
         let dynamicSlot: ReturnType<DynamicSlotFn>
-        if (isDynamicSlotFn(slots)) {
-          dynamicSlot = slots()
-          if (isArray(dynamicSlot)) {
-            for (const slot of dynamicSlot) {
-              registerSlot(slot.name, slot.fn, recordNames)
-            }
-          } else if (dynamicSlot) {
-            registerSlot(dynamicSlot.name, dynamicSlot.fn, recordNames)
+        dynamicSlot = slots()
+        const restoreKeys = cleanupSlot(index)
+        if (isArray(dynamicSlot)) {
+          for (const slot of dynamicSlot) {
+            registerSlot(slot.name, slot.fn, index, renderedKeys)
+          }
+        } else if (dynamicSlot) {
+          registerSlot(dynamicSlot.name, dynamicSlot.fn, index, renderedKeys)
+        }
+        if (restoreKeys.length) {
+          for (const key of restoreKeys) {
+            resolveSlot(key, slotNameLevels[key][0][1])
           }
-        } else {
         }
-        for (const name of recordNames) {
+        for (const name of renderedKeys) {
           if (
             !(isArray(dynamicSlot)
               ? dynamicSlot.some(s => s.name === name)
               : dynamicSlot && dynamicSlot.name === name)
           ) {
-            recordNames.delete(name)
+            renderedKeys.delete(name)
             delete instance.slots[name]
           }
         }
       })
     } else {
       for (const name in slots) {
-        registerSlot(name, slots[name])
+        registerSlot(name, slots[name], index)
       }
     }
   })
 
-  function registerSlot(name: string, fn: Slot, recordNames?: Set<string>) {
+  function cleanupSlot(level: number) {
+    const restoreKeys: string[] = []
+    Object.keys(slotNameLevels).forEach(key => {
+      const index = slotNameLevels[key].findIndex(([l]) => l === level)
+      if (index > -1) {
+        slotNameLevels[key].splice(index, 1)
+        if (!slotNameLevels[key].length) {
+          delete slotNameLevels[key]
+          return
+        }
+        if (index === 0) {
+          renderedSlotKeys[level] && renderedSlotKeys[level].delete(key)
+          restoreKeys.push(key)
+        }
+      }
+    })
+    return restoreKeys
+  }
+
+  function registerSlot(
+    name: string,
+    fn: Slot,
+    level: number,
+    renderedKeys?: Set<string>,
+  ) {
+    slotNameLevels[name] = slotNameLevels[name] || []
+    slotNameLevels[name].push([level, fn])
+    slotNameLevels[name].sort((a, b) => b[0] - a[0])
+    for (let i = 1; i < slotNameLevels[name].length; i++) {
+      const hidenLevel = slotNameLevels[name][i][0]
+      renderedSlotKeys[hidenLevel] && renderedSlotKeys[hidenLevel].delete(name)
+    }
+    if (slotNameLevels[name][0][0] === level) {
+      renderedKeys && renderedKeys.add(name)
+    }
+    resolveSlot(name, slotNameLevels[name][0][1])
+  }
+
+  function resolveSlot(name: string, fn: Slot) {
     instance.slots[name] = withCtx(fn)
-    recordNames && recordNames.add(name)
   }
 
   function withCtx(fn: Slot): Slot {