From 6364b10be50db9e4df066ddd1d6d68ea68671c4c Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Wed, 27 Mar 2024 00:09:42 +0800
Subject: [PATCH 1/3] feat(runtime-vapor): createSlot

---
 .../__tests__/componentSlots.spec.ts          |   8 +-
 packages/runtime-vapor/src/componentSlots.ts  | 150 ++++++++++++------
 packages/runtime-vapor/src/index.ts           |   1 +
 3 files changed, 112 insertions(+), 47 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts
index c0e1b716f..6bd38826c 100644
--- a/packages/runtime-vapor/__tests__/componentSlots.spec.ts
+++ b/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
diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
index 48ea4509c..705ecb077 100644
--- a/packages/runtime-vapor/src/componentSlots.ts
+++ b/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
+}
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index b15f4c461..919e0c2c6 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/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,

From 6c99c7a89d18cfd6db2214ad1c72408354e2ccde Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Sat, 6 Apr 2024 18:49:54 +0800
Subject: [PATCH 2/3] test: createSlot

---
 .../__tests__/componentSlots.spec.ts          | 195 +++++++++++++++++-
 packages/runtime-vapor/src/componentSlots.ts  |   4 +-
 2 files changed, 192 insertions(+), 7 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts
index 6bd38826c..d769c0f19 100644
--- a/packages/runtime-vapor/__tests__/componentSlots.spec.ts
+++ b/packages/runtime-vapor/__tests__/componentSlots.spec.ts
@@ -8,7 +8,10 @@ import {
   getCurrentInstance,
   insert,
   nextTick,
+  prepend,
   ref,
+  renderEffect,
+  setText,
   template,
 } from '../src'
 import { makeRender } from './_utils'
@@ -43,13 +46,11 @@ 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, host } = define({
+    const { render } = define({
       render() {
         return createComponent(Comp, {}, { header: () => template('header')() })
       },
@@ -60,8 +61,6 @@ describe('component: slots', () => {
     expect(instance.slots.header()).toMatchObject(
       document.createTextNode('header'),
     )
-
-    expect(host.innerHTML).toBe('<div>header</div>')
   })
 
   // NOTE: slot normalization is not supported
@@ -243,4 +242,190 @@ describe('component: slots', () => {
       'Slot "default" invoked outside of the render function',
     ).not.toHaveBeenWarned()
   })
+
+  describe('createSlot', () => {
+    test('slot should be render correctly', () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        insert(createSlot('header'), n0 as any as ParentNode)
+        return n0
+      })
+
+      const { host } = define(() => {
+        return createComponent(Comp, {}, { header: () => template('header')() })
+      }).render()
+
+      expect(host.innerHTML).toBe('<div>header</div>')
+    })
+
+    test('slot should be render correctly with binds', async () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        insert(
+          createSlot('header', { title: () => 'header' }),
+          n0 as any as ParentNode,
+        )
+        return n0
+      })
+
+      const { host } = define(() => {
+        return createComponent(
+          Comp,
+          {},
+          {
+            header: ({ title }) => {
+              const el = template('<h1></h1>')()
+              renderEffect(() => {
+                setText(el, title())
+              })
+              return el
+            },
+          },
+        )
+      }).render()
+
+      expect(host.innerHTML).toBe('<div><h1>header</h1></div>')
+    })
+
+    test('dynamic slot should be render correctly with binds', async () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        prepend(
+          n0 as any as ParentNode,
+          createSlot('header', { title: () => 'header' }),
+        )
+        return n0
+      })
+
+      const { host } = define(() => {
+        // dynamic slot
+        return createComponent(Comp, {}, {}, () => [
+          { name: 'header', fn: ({ title }) => template(`${title()}`)() },
+        ])
+      }).render()
+
+      expect(host.innerHTML).toBe('<div>header<!--slot--></div>')
+    })
+
+    test('dynamic slot outlet should be render correctly with binds', async () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        prepend(
+          n0 as any as ParentNode,
+          createSlot(
+            () => 'header', // dynamic slot outlet name
+            { title: () => 'header' },
+          ),
+        )
+        return n0
+      })
+
+      const { host } = define(() => {
+        return createComponent(
+          Comp,
+          {},
+          { header: ({ title }) => template(`${title()}`)() },
+        )
+      }).render()
+
+      expect(host.innerHTML).toBe('<div>header<!--slot--></div>')
+    })
+
+    test('fallback should be render correctly', () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        insert(
+          createSlot('header', {}, () => template('fallback')()),
+          n0 as any as ParentNode,
+        )
+        return n0
+      })
+
+      const { host } = define(() => {
+        return createComponent(Comp, {}, {})
+      }).render()
+
+      expect(host.innerHTML).toBe('<div>fallback</div>')
+    })
+
+    test('dynamic slot should be updated correctly', async () => {
+      const flag1 = ref(true)
+
+      const Child = defineComponent(() => {
+        const temp0 = template('<p></p>')
+        const el0 = temp0()
+        const el1 = temp0()
+        const slot1 = createSlot('one', {}, () => template('one fallback')())
+        const slot2 = createSlot('two', {}, () => template('two fallback')())
+        insert(slot1, el0 as any as ParentNode)
+        insert(slot2, el1 as any as ParentNode)
+        return [el0, el1]
+      })
+
+      const { host } = define(() => {
+        return createComponent(Child, {}, {}, () => [
+          flag1.value
+            ? { name: 'one', fn: () => template('one content')() }
+            : { name: 'two', fn: () => template('two content')() },
+        ])
+      }).render()
+
+      expect(host.innerHTML).toBe(
+        '<p>one content<!--slot--></p><p>two fallback<!--slot--></p>',
+      )
+
+      flag1.value = false
+      await nextTick()
+
+      expect(host.innerHTML).toBe(
+        '<p>one fallback<!--slot--></p><p>two content<!--slot--></p>',
+      )
+
+      flag1.value = true
+      await nextTick()
+
+      expect(host.innerHTML).toBe(
+        '<p>one content<!--slot--></p><p>two fallback<!--slot--></p>',
+      )
+    })
+
+    test('dynamic slot outlet should be updated correctly', async () => {
+      const slotOutletName = ref('one')
+
+      const Child = defineComponent(() => {
+        const temp0 = template('<p></p>')
+        const el0 = temp0()
+        const slot1 = createSlot(
+          () => slotOutletName.value,
+          {},
+          () => template('fallback')(),
+        )
+        insert(slot1, el0 as any as ParentNode)
+        return el0
+      })
+
+      const { host } = define(() => {
+        return createComponent(
+          Child,
+          {},
+          {
+            one: () => template('one content')(),
+            two: () => template('two content')(),
+          },
+        )
+      }).render()
+
+      expect(host.innerHTML).toBe('<p>one content<!--slot--></p>')
+
+      slotOutletName.value = 'two'
+      await nextTick()
+
+      expect(host.innerHTML).toBe('<p>two content<!--slot--></p>')
+
+      slotOutletName.value = 'none'
+      await nextTick()
+
+      expect(host.innerHTML).toBe('<p>fallback<!--slot--></p>')
+    })
+  })
 })
diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
index 705ecb077..cec1421ae 100644
--- a/packages/runtime-vapor/src/componentSlots.ts
+++ b/packages/runtime-vapor/src/componentSlots.ts
@@ -127,7 +127,7 @@ export function createSlot(
     }
   }
 
-  const getName = isDynamicName ? name : () => name
+  const getSlot = isDynamicName ? () => slots[name()] : () => slots[name]
   const anchor = __DEV__ ? createComment('slot') : createTextNode()
   const fragment: Fragment = {
     nodes: [],
@@ -137,7 +137,7 @@ export function createSlot(
 
   // TODO lifecycle hooks
   renderEffect(() => {
-    if ((branch = slots[getName()] || fallback) !== oldBranch) {
+    if ((branch = getSlot() || fallback) !== oldBranch) {
       parent ||= anchor.parentNode
       if (block) {
         scope!.stop()

From 22c05386b7e9637797bdaab97aecb6ad00b47faf Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Sun, 14 Apr 2024 17:29:05 +0800
Subject: [PATCH 3/3] fix: should to pre change dynamic slots

---
 packages/runtime-vapor/src/componentSlots.ts | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
index cec1421ae..dc2da78ea 100644
--- a/packages/runtime-vapor/src/componentSlots.ts
+++ b/packages/runtime-vapor/src/componentSlots.ts
@@ -1,6 +1,9 @@
 import { type IfAny, isArray, isFunction } from '@vue/shared'
 import {
   type EffectScope,
+  ReactiveEffect,
+  type SchedulerJob,
+  SchedulerJobFlags,
   effectScope,
   isReactive,
   shallowReactive,
@@ -13,6 +16,8 @@ import {
 import { type Block, type Fragment, fragmentKey } from './apiRender'
 import { renderEffect } from './renderEffect'
 import { createComment, createTextNode, insert, remove } from './dom/element'
+import { queueJob } from './scheduler'
+import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 
 // TODO: SSR
 
@@ -51,8 +56,13 @@ export const initSlots = (
   if (dynamicSlots) {
     slots = shallowReactive(slots)
     const dynamicSlotKeys: Record<string, true> = {}
-    renderEffect(() => {
-      const _dynamicSlots = dynamicSlots()
+
+    const effect = new ReactiveEffect(() => {
+      const _dynamicSlots = callWithAsyncErrorHandling(
+        dynamicSlots,
+        instance,
+        VaporErrorCodes.RENDER_FUNCTION,
+      )
       for (let i = 0; i < _dynamicSlots.length; i++) {
         const slot = _dynamicSlots[i]
         // array of dynamic slot generated by <template v-for="..." #[...]>
@@ -88,6 +98,12 @@ export const initSlots = (
         }
       }
     })
+
+    const job: SchedulerJob = () => effect.run()
+    job.flags! |= SchedulerJobFlags.PRE
+    job.id = instance.uid
+    effect.scheduler = () => queueJob(job)
+    effect.run()
   }
 
   instance.slots = slots