feat(runtime-vapor): createSlot

Author: LittleSound

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

@@ -2,9 +2,11 @@
 
 import {
   createComponent,
+  createSlot,
   createVaporApp,
   defineComponent,
   getCurrentInstance,
+  insert,
   nextTick,
   ref,
   template,
@@ -41,11 +43,13 @@ describe('component: slots', () => {
         const t0 = template('<div></div>')
         const n0 = t0()
         instance = getCurrentInstance()
+        const n1 = createSlot('header')
+        insert(n1, n0 as any as ParentNode)
         return n0
       },
     })
 
-    const { render } = define({
+    const { render, host } = define({
       render() {
         return createComponent(Comp, {}, { header: () => template('header')() })
       },
@@ -56,6 +60,8 @@ describe('component: slots', () => {
     expect(instance.slots.header()).toMatchObject(
       document.createTextNode('header'),
     )
+
+    expect(host.innerHTML).toBe('<div>header</div>')
   })
 
   // NOTE: slot normalization is not supported

packages/runtime-vapor/src/componentSlots.ts

@@ -1,8 +1,18 @@
-import { type IfAny, isArray } from '@vue/shared'
-import { baseWatch } from '@vue/reactivity'
-import { type ComponentInternalInstance, setCurrentInstance } from './component'
-import type { Block } from './apiRender'
-import { createVaporPreScheduler } from './scheduler'
+import { type IfAny, isArray, isFunction } from '@vue/shared'
+import {
+  type EffectScope,
+  effectScope,
+  isReactive,
+  shallowReactive,
+} from '@vue/reactivity'
+import {
+  type ComponentInternalInstance,
+  currentInstance,
+  setCurrentInstance,
+} from './component'
+import { type Block, type Fragment, fragmentKey } from './apiRender'
+import { renderEffect } from './renderEffect'
+import { createComment, createTextNode, insert, remove } from './dom/element'
 
 // TODO: SSR
 
@@ -29,7 +39,7 @@ export const initSlots = (
   rawSlots: InternalSlots | null = null,
   dynamicSlots: DynamicSlots | null = null,
 ) => {
-  const slots: InternalSlots = {}
+  let slots: InternalSlots = {}
 
   for (const key in rawSlots) {
     const slot = rawSlots[key]
@@ -39,50 +49,45 @@ export const initSlots = (
   }
 
   if (dynamicSlots) {
+    slots = shallowReactive(slots)
     const dynamicSlotKeys: Record<string, true> = {}
-    baseWatch(
-      () => {
-        const _dynamicSlots = dynamicSlots()
-        for (let i = 0; i < _dynamicSlots.length; i++) {
-          const slot = _dynamicSlots[i]
-          // array of dynamic slot generated by <template v-for="..." #[...]>
-          if (isArray(slot)) {
-            for (let j = 0; j < slot.length; j++) {
-              slots[slot[j].name] = withCtx(slot[j].fn)
-              dynamicSlotKeys[slot[j].name] = true
-            }
-          } else if (slot) {
-            // conditional single slot generated by <template v-if="..." #foo>
-            slots[slot.name] = withCtx(
-              slot.key
-                ? (...args: any[]) => {
-                    const res = slot.fn(...args)
-                    // attach branch key so each conditional branch is considered a
-                    // different fragment
-                    if (res) (res as any).key = slot.key
-                    return res
-                  }
-                : slot.fn,
-            )
-            dynamicSlotKeys[slot.name] = true
+    renderEffect(() => {
+      const _dynamicSlots = dynamicSlots()
+      for (let i = 0; i < _dynamicSlots.length; i++) {
+        const slot = _dynamicSlots[i]
+        // array of dynamic slot generated by <template v-for="..." #[...]>
+        if (isArray(slot)) {
+          for (let j = 0; j < slot.length; j++) {
+            slots[slot[j].name] = withCtx(slot[j].fn)
+            dynamicSlotKeys[slot[j].name] = true
           }
+        } else if (slot) {
+          // conditional single slot generated by <template v-if="..." #foo>
+          slots[slot.name] = withCtx(
+            slot.key
+              ? (...args: any[]) => {
+                  const res = slot.fn(...args)
+                  // attach branch key so each conditional branch is considered a
+                  // different fragment
+                  if (res) (res as any).key = slot.key
+                  return res
+                }
+              : slot.fn,
+          )
+          dynamicSlotKeys[slot.name] = true
         }
-        // delete stale slots
-        for (const key in dynamicSlotKeys) {
-          if (
-            !_dynamicSlots.some(slot =>
-              isArray(slot)
-                ? slot.some(s => s.name === key)
-                : slot?.name === key,
-            )
-          ) {
-            delete slots[key]
-          }
+      }
+      // delete stale slots
+      for (const key in dynamicSlotKeys) {
+        if (
+          !_dynamicSlots.some(slot =>
+            isArray(slot) ? slot.some(s => s.name === key) : slot?.name === key,
+          )
+        ) {
+          delete slots[key]
         }
-      },
-      undefined,
-      { scheduler: createVaporPreScheduler(instance) },
-    )
+      }
+    })
   }
 
   instance.slots = slots
@@ -98,3 +103,56 @@ export const initSlots = (
     }
   }
 }
+
+export function createSlot(
+  name: string | (() => string),
+  binds?: Record<string, (() => unknown) | undefined>,
+  fallback?: () => Block,
+): Block {
+  let block: Block | undefined
+  let branch: Slot | undefined
+  let oldBranch: Slot | undefined
+  let parent: ParentNode | undefined | null
+  let scope: EffectScope | undefined
+  const isDynamicName = isFunction(name)
+  const instance = currentInstance!
+  const { slots } = instance
+
+  // When not using dynamic slots, simplify the process to improve performance
+  if (!isDynamicName && !isReactive(slots)) {
+    if ((branch = slots[name] || fallback)) {
+      return branch(binds)
+    } else {
+      return []
+    }
+  }
+
+  const getName = isDynamicName ? name : () => name
+  const anchor = __DEV__ ? createComment('slot') : createTextNode()
+  const fragment: Fragment = {
+    nodes: [],
+    anchor,
+    [fragmentKey]: true,
+  }
+
+  // TODO lifecycle hooks
+  renderEffect(() => {
+    if ((branch = slots[getName()] || fallback) !== oldBranch) {
+      parent ||= anchor.parentNode
+      if (block) {
+        scope!.stop()
+        remove(block, parent!)
+      }
+      if ((oldBranch = branch)) {
+        scope = effectScope()
+        fragment.nodes = block = scope.run(() => branch!(binds))!
+        parent && insert(block, parent, anchor)
+      } else {
+        scope = block = undefined
+        fragment.nodes = []
+      }
+    }
+  })
+
+  return fragment
+}

packages/runtime-vapor/src/index.ts

@@ -50,6 +50,7 @@ export {
   type FunctionalComponent,
   type SetupFn,
 } from './component'
+export { createSlot } from './componentSlots'
 export { renderEffect } from './renderEffect'
 export {
   watch,