wip(runtime-vapor): try to fix level slots mess up

Author: Doctor-wu

packages/runtime-vapor/src/componentSlots.ts

@@ -1,17 +1,19 @@
-import { EMPTY_OBJ, NO, hasOwn, isArray, isFunction } from '@vue/shared'
+import { EMPTY_OBJ, NO, isArray, isFunction } from '@vue/shared'
 import { type Block, type BlockFn, DynamicFragment } from './block'
 import {
   type RawProps,
   getAttrFromRawProps,
   getKeysFromRawProps,
   hasAttrFromRawProps,
 } from './componentProps'
-import { currentInstance } from '@vue/runtime-core'
+import { currentInstance, shallowReactive } from '@vue/runtime-core'
 import type { LooseRawProps, VaporComponentInstance } from './component'
 import { renderEffect } from './renderEffect'
+import { enableTracking, pauseTracking } from '@vue/reactivity'
 
 export type RawSlots = Record<string, Slot> & {
   $?: DynamicSlotSource[]
+  $levelQueues?: SlotsLevelQueues
 }
 
 export type StaticSlots = Record<string, Slot>
@@ -23,7 +25,10 @@ export type DynamicSlotSource = StaticSlots | DynamicSlotFn
 
 export const dynamicSlotsProxyHandlers: ProxyHandler<RawSlots> = {
   get: getSlot,
-  has: (target, key: string) => !!getSlot(target, key),
+  has: (target, key: string) => {
+    const levelSlots = ensureLevelQueues(target)
+    return levelSlots.queues.has(key)
+  },
   getOwnPropertyDescriptor(target, key: string) {
     const slot = getSlot(target, key)
     if (slot) {
@@ -35,23 +40,8 @@ export const dynamicSlotsProxyHandlers: ProxyHandler<RawSlots> = {
     }
   },
   ownKeys(target) {
-    const keys = Object.keys(target)
-    const dynamicSources = target.$
-    if (dynamicSources) {
-      for (const source of dynamicSources) {
-        if (isFunction(source)) {
-          const slot = source()
-          if (isArray(slot)) {
-            for (const s of slot) keys.push(s.name)
-          } else {
-            keys.push(slot.name)
-          }
-        } else {
-          keys.push(...Object.keys(source))
-        }
-      }
-    }
-    return keys
+    const levelSlots = ensureLevelQueues(target)
+    return [...levelSlots.queues.keys()]
   },
   set: NO,
   deleteProperty: NO,
@@ -61,30 +51,11 @@ export function getSlot(
   target: RawSlots,
   key: string,
 ): (Slot & { _bound?: Slot }) | undefined {
-  if (key === '$') return
-  const dynamicSources = target.$
-  if (dynamicSources) {
-    let i = dynamicSources.length
-    let source
-    while (i--) {
-      source = dynamicSources[i]
-      if (isFunction(source)) {
-        const slot = source()
-        if (isArray(slot)) {
-          for (const s of slot) {
-            if (s.name === key) return s.fn
-          }
-        } else if (slot.name === key) {
-          return slot.fn
-        }
-      } else if (hasOwn(source, key)) {
-        return source[key]
-      }
-    }
-  }
-  if (hasOwn(target, key)) {
+  if (!target.$) {
     return target[key]
   }
+  const levelSlots = ensureLevelQueues(target)
+  return levelSlots.getSlot(key)
 }
 
 const dynamicSlotsPropsProxyHandlers: ProxyHandler<RawProps> = {
@@ -151,3 +122,90 @@ export function createSlot(
 
 // TODO
 export function createForSlots(): any {}
+
+export function ensureLevelQueues(rawSlots: RawSlots): SlotsLevelQueues {
+  if (!rawSlots.$levelQueues) {
+    rawSlots.$levelQueues = new SlotsLevelQueues(rawSlots)
+  }
+  return rawSlots.$levelQueues
+}
+
+export type SlotLevelItem = [number, BlockFn]
+
+export class SlotsLevelQueues {
+  queues: Map<string, SlotLevelItem[]> = shallowReactive(new Map())
+
+  constructor(rawSlots: RawSlots) {
+    this.setupLevel(rawSlots)
+  }
+
+  public getSlot(name: string): BlockFn | undefined {
+    const queue = this.queues.get(name)
+    if (queue && queue.length) {
+      return queue[0][1]
+    }
+  }
+
+  private setupLevel(rawSlots: RawSlots) {
+    const dynamicSources = rawSlots.$
+    if (dynamicSources) {
+      let index = 0
+      for (const source of dynamicSources) {
+        const level = index++
+        const isDynamicSlot = isFunction(source)
+        if (isDynamicSlot) {
+          renderEffect(() => {
+            const slot = source()
+            this.cleanupLevel(level)
+            if (isArray(slot)) {
+              for (const s of slot) {
+                this.registerLevelSlot(s.name, [level, s.fn])
+              }
+            } else {
+              this.registerLevelSlot(slot.name, [level, slot.fn])
+            }
+          })
+        } else {
+          for (const name of Object.keys(source)) {
+            this.registerLevelSlot(name, [level, source[name]])
+          }
+        }
+      }
+    }
+  }
+
+  private registerLevelSlot(name: string, levelSlot: SlotLevelItem) {
+    const queue = this.queues.get(name) || this.queues.set(name, []).get(name)!
+    this.insertLevelSlot(queue, levelSlot)
+  }
+
+  private insertLevelSlot(queue: SlotLevelItem[], levelSlot: SlotLevelItem) {
+    // binary insert, keep the queue sorted by level ascending
+    let start = 0
+    let end = queue.length
+    while (start < end) {
+      const mid = (start + end) >>> 1
+      if (queue[mid][0] < levelSlot[0]) {
+        start = mid + 1
+      } else {
+        end = mid
+      }
+    }
+    queue.splice(start, 0, levelSlot)
+  }
+
+  private cleanupLevel(level: number) {
+    pauseTracking()
+    for (const [name, queue] of this.queues.entries()) {
+      for (let i = 0; i < queue.length; i++) {
+        if (queue[i][0] === level) {
+          queue.splice(i, 1)
+          if (queue.length === 0) {
+            this.queues.delete(name)
+          }
+        }
+      }
+    }
+    enableTracking()
+  }
+}