feat(runtime-vapor): the current instance should be kept in the slot

Author: LittleSound

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

@@ -8,6 +8,7 @@ import {
   nextTick,
   ref,
   template,
+  withCtx,
 } from '../src'
 import { makeRender } from './_utils'
 
@@ -152,6 +153,35 @@ describe('component: slots', () => {
     expect(instance.slots).toHaveProperty('footer')
   })
 
+  test('the current instance should be kept in the slot', async () => {
+    let instanceInSlot: any
+
+    const Comp = defineComponent({
+      render() {
+        const instance = getCurrentInstance()
+        instance!.slots.default!()
+        return template('<div></div>')()
+      },
+    })
+
+    const { instance } = define({
+      render() {
+        return createComponent(
+          Comp,
+          {},
+          {
+            default: withCtx(() => {
+              instanceInSlot = getCurrentInstance()
+              return template('content')()
+            }),
+          },
+        )
+      },
+    }).render()
+
+    expect(instanceInSlot).toBe(instance)
+  })
+
   test.todo('should respect $stable flag', async () => {
     // TODO: $stable flag?
   })

packages/runtime-vapor/src/componentRenderContext.ts

@@ -0,0 +1,22 @@
+import {
+  type ComponentInternalInstance,
+  currentInstance,
+  setCurrentInstance,
+} from './component'
+
+export function withCtx<T extends (...args: any) => any>(
+  fn: T,
+  instance: ComponentInternalInstance | null = currentInstance,
+): T {
+  if (!instance) return fn
+
+  const fnWithCtx = ((...args: any[]) => {
+    const reset = setCurrentInstance(instance)
+    try {
+      return fn(...args)
+    } finally {
+      reset()
+    }
+  }) as T
+  return fnWithCtx
+}

packages/runtime-vapor/src/index.ts

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