fix(runtime-vapor): preserve correct parent instance for slotted content (#14095)

Author: edison1105

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap

@@ -115,7 +115,7 @@ exports[`compiler: transform <slot> outlets > slot outlet with scopeId and slott
 "import { createSlot as _createSlot } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createSlot("default", null, null, undefined, true)
+  const n0 = _createSlot("default", null, null, true)
   return n0
 }"
 `;

packages/compiler-vapor/src/generators/slotOutlet.ts

@@ -30,7 +30,6 @@ export function genSlotOutlet(
       nameExpr,
       genRawProps(oper.props, context) || 'null',
       fallbackArg,
-      noSlotted && 'undefined', // instance
       noSlotted && 'true', // noSlotted
     ),
   )

packages/runtime-core/src/apiCreateApp.ts

@@ -212,7 +212,12 @@ export interface VaporInteropInterface {
     transition: TransitionHooks,
   ): void
 
-  vdomMount: (component: ConcreteComponent, props?: any, slots?: any) => any
+  vdomMount: (
+    component: ConcreteComponent,
+    parentComponent: any,
+    props?: any,
+    slots?: any,
+  ) => any
   vdomUnmount: UnmountComponentFn
   vdomSlot: (
     slots: any,

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

@@ -12,9 +12,12 @@ import {
 } from '@vue/runtime-dom'
 import {
   createComponent,
+  createSlot,
   createTextNode,
   createVaporApp,
+  defineVaporComponent,
   renderEffect,
+  withVaporCtx,
 } from '../src'
 import { makeRender } from './_utils'
 import { setElementText } from '../src/dom/prop'
@@ -368,6 +371,32 @@ describe('api: provide/inject', () => {
     expect(host.innerHTML).toBe('')
   })
 
+  it('should work with slots', () => {
+    const Parent = defineVaporComponent({
+      setup() {
+        provide('test', 'hello')
+        return createSlot('default', null)
+      },
+    })
+
+    const Child = defineVaporComponent({
+      setup() {
+        const test = inject('test')
+        return createTextNode(toDisplayString(test))
+      },
+    })
+
+    const { host } = define({
+      setup() {
+        return createComponent(Parent, null, {
+          default: withVaporCtx(() => createComponent(Child)),
+        })
+      },
+    }).render()
+
+    expect(host.innerHTML).toBe('hello<!--slot-->')
+  })
+
   describe('hasInjectionContext', () => {
     it('should be false outside of setup', () => {
       expect(hasInjectionContext()).toBe(false)

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

@@ -10,6 +10,7 @@ import {
   setDynamicProps,
   setText,
   template,
+  withVaporCtx,
 } from '../src'
 import { nextTick, reactive, ref, watchEffect } from '@vue/runtime-dom'
 import { makeRender } from './_utils'
@@ -113,11 +114,11 @@ describe('api: setup context', () => {
       inheritAttrs: false,
       setup(_: any, { attrs }: any) {
         const n0 = createComponent(Wrapper, null, {
-          default: () => {
+          default: withVaporCtx(() => {
             const n0 = template('<div>')() as HTMLDivElement
             renderEffect(() => setDynamicProps(n0, [attrs]))
             return n0
-          },
+          }),
         })
         return n0
       },

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

@@ -10,6 +10,7 @@ import {
   setProp,
   setStyle,
   template,
+  withVaporCtx,
 } from '../src'
 import { makeRender } from './_utils'
 import { stringifyStyle } from '@vue/shared'
@@ -286,10 +287,10 @@ describe('attribute fallthrough', () => {
           () => 'button',
           null,
           {
-            default: () => {
+            default: withVaporCtx(() => {
               const n0 = createSlot('default', null)
               return n0
-            },
+            }),
           },
           true,
         )