refactor(vapor): replace forwardedSlotCreator with withVaporCtx (#14009)

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

@@ -1,46 +1,46 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: transition > basic 1`] = `
-"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
 const t0 = _template("<h1>foo</h1>")
 
 export function render(_ctx) {
   const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
-    "default": () => {
+    "default": _withVaporCtx(() => {
       const n0 = t0()
       _applyVShow(n0, () => (_ctx.show))
       return n0
-    }
+    })
   }, true)
   return n1
 }"
 `;
 
 exports[`compiler: transition > inject persisted when child has v-show 1`] = `
-"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
-    "default": () => {
+    "default": _withVaporCtx(() => {
       const n0 = t0()
       _applyVShow(n0, () => (_ctx.ok))
       return n0
-    }
+    })
   }, true)
   return n1
 }"
 `;
 
 exports[`compiler: transition > the v-if/else-if/else branches in Transition should ignore comments 1`] = `
-"import { VaporTransition as _VaporTransition, setInsertionState as _setInsertionState, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, setInsertionState as _setInsertionState, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
 const t0 = _template("<div>hey</div>")
 const t1 = _template("<p></p>")
 const t2 = _template("<div></div>")
 
 export function render(_ctx) {
   const n16 = _createComponent(_VaporTransition, null, {
-    "default": () => {
+    "default": _withVaporCtx(() => {
       const n0 = _createIf(() => (_ctx.a), () => {
         const n2 = t0()
         n2.$key = 2
@@ -63,14 +63,14 @@ export function render(_ctx) {
         return n14
       }))
       return [n0, n3, n7]
-    }
+    })
   }, true)
   return n16
 }"
 `;
 
 exports[`compiler: transition > v-show + appear 1`] = `
-"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
 const t0 = _template("<h1>foo</h1>")
 
 export function render(_ctx) {
@@ -79,11 +79,11 @@ export function render(_ctx) {
     appear: () => (""),
     persisted: () => ("")
   }, {
-    "default": () => {
+    "default": _withVaporCtx(() => {
       const n0 = t0()
       deferredApplyVShows.push(() => _applyVShow(n0, () => (_ctx.show)))
       return n0
-    }
+    })
   }, true)
   deferredApplyVShows.forEach(fn => fn())
   return n1
@@ -91,37 +91,37 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: transition > work with dynamic keyed children 1`] = `
-"import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
 const t0 = _template("<h1>foo</h1>")
 
 export function render(_ctx) {
   const n1 = _createComponent(_VaporTransition, null, {
-    "default": () => {
+    "default": _withVaporCtx(() => {
       return _createKeyedFragment(() => _ctx.key, () => {
         const n0 = t0()
         n0.$key = _ctx.key
         return n0
       })
-    }
+    })
   }, true)
   return n1
 }"
 `;
 
 exports[`compiler: transition > work with v-if 1`] = `
-"import { VaporTransition as _VaporTransition, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
+"import { VaporTransition as _VaporTransition, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
 const t0 = _template("<h1>foo</h1>")
 
 export function render(_ctx) {
   const n3 = _createComponent(_VaporTransition, null, {
-    "default": () => {
+    "default": _withVaporCtx(() => {
       const n0 = _createIf(() => (_ctx.show), () => {
         const n2 = t0()
         n2.$key = 2
         return n2
       })
       return n0
-    }
+    })
   }, true)
   return n3
 }"

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

@@ -104,16 +104,15 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: transform slot > forwarded slots > <slot w/ nested component> 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 
 export function render(_ctx) {
-  const _createForwardedSlot = _forwardedSlotCreator()
   const _component_Comp = _resolveComponent("Comp")
   const n2 = _createComponentWithFallback(_component_Comp, null, {
     "default": _withVaporCtx(() => {
       const n1 = _createComponentWithFallback(_component_Comp, null, {
         "default": _withVaporCtx(() => {
-          const n0 = _createForwardedSlot("default", null)
+          const n0 = _createSlot("default", null)
           return n0
         })
       })
@@ -125,14 +124,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: transform slot > forwarded slots > <slot> tag only 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 
 export function render(_ctx) {
-  const _createForwardedSlot = _forwardedSlotCreator()
   const _component_Comp = _resolveComponent("Comp")
   const n1 = _createComponentWithFallback(_component_Comp, null, {
     "default": _withVaporCtx(() => {
-      const n0 = _createForwardedSlot("default", null)
+      const n0 = _createSlot("default", null)
       return n0
     })
   }, true)
@@ -141,14 +139,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: transform slot > forwarded slots > <slot> tag w/ template 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 
 export function render(_ctx) {
-  const _createForwardedSlot = _forwardedSlotCreator()
   const _component_Comp = _resolveComponent("Comp")
   const n2 = _createComponentWithFallback(_component_Comp, null, {
     "default": _withVaporCtx(() => {
-      const n0 = _createForwardedSlot("default", null)
+      const n0 = _createSlot("default", null)
       return n0
     })
   }, true)
@@ -157,15 +154,14 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: transform slot > forwarded slots > <slot> tag w/ v-for 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, createFor as _createFor, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, createFor as _createFor, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 
 export function render(_ctx) {
-  const _createForwardedSlot = _forwardedSlotCreator()
   const _component_Comp = _resolveComponent("Comp")
   const n3 = _createComponentWithFallback(_component_Comp, null, {
     "default": _withVaporCtx(() => {
       const n0 = _createFor(() => (_ctx.b), (_for_item0) => {
-        const n2 = _createForwardedSlot("default", null)
+        const n2 = _createSlot("default", null)
         return n2
       })
       return n0
@@ -176,15 +172,14 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: transform slot > forwarded slots > <slot> tag w/ v-if 1`] = `
-"import { forwardedSlotCreator as _forwardedSlotCreator, resolveComponent as _resolveComponent, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+"import { resolveComponent as _resolveComponent, createSlot as _createSlot, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 
 export function render(_ctx) {
-  const _createForwardedSlot = _forwardedSlotCreator()
   const _component_Comp = _resolveComponent("Comp")
   const n3 = _createComponentWithFallback(_component_Comp, null, {
     "default": _withVaporCtx(() => {
       const n0 = _createIf(() => (_ctx.ok), () => {
-        const n2 = _createForwardedSlot("default", null)
+        const n2 = _createSlot("default", null)
         return n2
       })
       return n0

packages/compiler-vapor/src/generate.ts

@@ -18,7 +18,6 @@ import {
   genCall,
 } from './generators/utils'
 import { setTemplateRefIdent } from './generators/templateRef'
-import { createForwardedSlotIdent } from './generators/slotOutlet'
 
 export type CodegenOptions = Omit<BaseCodegenOptions, 'optimizeImports'>
 
@@ -130,12 +129,6 @@ export function generate(
       `const ${setTemplateRefIdent} = ${context.helper('createTemplateRefSetter')}()`,
     )
   }
-  if (ir.hasForwardedSlot) {
-    push(
-      NEWLINE,
-      `const ${createForwardedSlotIdent} = ${context.helper('forwardedSlotCreator')}()`,
-    )
-  }
   push(...genBlockContent(ir.block, context, true))
   push(INDENT_END, NEWLINE)
 

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

@@ -40,7 +40,7 @@ import { genEventHandler } from './event'
 import { genDirectiveModifiers, genDirectivesForElement } from './directive'
 import { genBlock } from './block'
 import { genModelHandler } from './vModel'
-import { isBuiltInComponent } from '../utils'
+import { isBuiltInComponent, isTransitionTag } from '../utils'
 
 export function genCreateComponent(
   operation: CreateComponentIRNode,
@@ -410,7 +410,6 @@ function genSlotBlockWithProps(oper: SlotBlockIRNode, context: CodegenContext) {
   let depth: number | undefined
   const { props, key, node } = oper
   const idsOfProps = new Set<string>()
-
   if (props) {
     rawProps = props.content
     if ((isDestructureAssignment = !!props.ast)) {
@@ -459,7 +458,10 @@ function genSlotBlockWithProps(oper: SlotBlockIRNode, context: CodegenContext) {
     ]
   }
 
-  if (node.type === NodeTypes.ELEMENT && !isBuiltInComponent(node.tag)) {
+  if (
+    node.type === NodeTypes.ELEMENT &&
+    (!isBuiltInComponent(node.tag) || isTransitionTag(node.tag))
+  ) {
     // wrap with withVaporCtx to ensure correct currentInstance inside slot
     blockFn = [`${context.helper('withVaporCtx')}(`, ...blockFn, `)`]
   }

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

@@ -5,14 +5,12 @@ import { genExpression } from './expression'
 import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
 import { genRawProps } from './component'
 
-export const createForwardedSlotIdent = `_createForwardedSlot`
-
 export function genSlotOutlet(
   oper: SlotOutletIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
   const { helper } = context
-  const { id, name, fallback, forwarded, noSlotted } = oper
+  const { id, name, fallback, noSlotted } = oper
   const [frag, push] = buildCodeFragment()
 
   const nameExpr = name.isStatic
@@ -28,7 +26,7 @@ export function genSlotOutlet(
     NEWLINE,
     `const n${id} = `,
     ...genCall(
-      forwarded ? createForwardedSlotIdent : helper('createSlot'),
+      helper('createSlot'),
       nameExpr,
       genRawProps(oper.props, context) || 'null',
       fallbackArg,

packages/compiler-vapor/src/ir/index.ts

@@ -67,7 +67,6 @@ export interface RootIRNode {
   directive: Set<string>
   block: BlockIRNode
   hasTemplateRef: boolean
-  hasForwardedSlot: boolean
 }
 
 export interface IfIRNode extends BaseIRNode {
@@ -220,7 +219,6 @@ export interface SlotOutletIRNode extends BaseIRNode {
   name: SimpleExpressionNode
   props: IRProps[]
   fallback?: BlockIRNode
-  forwarded?: boolean
   noSlotted?: boolean
   parent?: number
   anchor?: number

packages/compiler-vapor/src/transform.ts

@@ -79,8 +79,6 @@ export class TransformContext<T extends AllNode = AllNode> {
 
   inVOnce: boolean = false
   inVFor: number = 0
-  inSlot: boolean = false
-
   comment: CommentNode[] = []
   component: Set<string> = this.ir.component
   directive: Set<string> = this.ir.directive
@@ -221,7 +219,6 @@ export function transform(
     directive: new Set(),
     block: newBlock(node),
     hasTemplateRef: false,
-    hasForwardedSlot: false,
   }
 
   const context = new TransformContext(ir, node, options)

packages/compiler-vapor/src/transforms/transformSlotOutlet.ts

@@ -99,7 +99,6 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
   }
 
   return () => {
-    if (context.inSlot) context.ir.hasForwardedSlot = true
     exitBlock && exitBlock()
     context.dynamic.operation = {
       type: IRNodeTypes.SLOT_OUTLET_NODE,
@@ -107,7 +106,6 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
       name: slotName,
       props: irProps,
       fallback,
-      forwarded: context.inSlot,
       noSlotted: !!(context.options.scopeId && !context.options.slotted),
     }
   }

packages/compiler-vapor/src/transforms/vSlot.ts

@@ -269,14 +269,7 @@ function createSlotBlock(
     block.dynamic.needsKey = true
   }
   const exitBlock = context.enterBlock(block)
-  context.inSlot = true
-  return [
-    block,
-    () => {
-      context.inSlot = false
-      exitBlock()
-    },
-  ]
+  return [block, exitBlock]
 }
 
 function isNonWhitespaceContent(node: TemplateChildNode): boolean {

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

@@ -9,13 +9,13 @@ import {
   createSlot,
   createVaporApp,
   defineVaporComponent,
-  forwardedSlotCreator,
   insert,
   prepend,
   renderEffect,
   setInsertionState,
   template,
   vaporInteropPlugin,
+  withVaporCtx,
 } from '../src'
 import {
   type Ref,
@@ -779,14 +779,13 @@ describe('component: slots', () => {
       })
       const Parent = defineVaporComponent({
         setup() {
-          const createForwardedSlot = forwardedSlotCreator()
           const n2 = createComponent(
             Child,
             null,
             {
-              foo: () => {
-                return createForwardedSlot('foo', null)
-              },
+              foo: withVaporCtx(() => {
+                return createSlot('foo', null)
+              }),
             },
             true,
           )
@@ -828,12 +827,11 @@ describe('component: slots', () => {
       })
       const Parent = defineVaporComponent({
         setup() {
-          const createForwardedSlot = forwardedSlotCreator()
           const n2 = createComponent(Child, null, {
-            foo: () => {
-              const n0 = createForwardedSlot('foo', null)
+            foo: withVaporCtx(() => {
+              const n0 = createSlot('foo', null)
               return n0
-            },
+            }),
           })
           const n3 = createSlot('default', null)
           return [n2, n3]
@@ -880,14 +878,13 @@ describe('component: slots', () => {
 
       const Parent = defineVaporComponent({
         setup() {
-          const createForwardedSlot = forwardedSlotCreator()
           const n2 = createComponent(Child, null, {
-            default: () => {
-              const n0 = createForwardedSlot('default', null, () => {
+            default: withVaporCtx(() => {
+              const n0 = createSlot('default', null, () => {
                 return template('<!-- <div></div> -->')()
               })
               return n0
-            },
+            }),
           })
           return n2
         },
@@ -914,10 +911,9 @@ describe('component: slots', () => {
       const show = ref(false)
       const Parent = defineVaporComponent({
         setup() {
-          const createForwardedSlot = forwardedSlotCreator()
           const n2 = createComponent(Child, null, {
-            default: () => {
-              const n0 = createForwardedSlot('default', null, () => {
+            default: withVaporCtx(() => {
+              const n0 = createSlot('default', null, () => {
                 const n2 = createIf(
                   () => show.value,
                   () => {
@@ -928,7 +924,7 @@ describe('component: slots', () => {
                 return n2
               })
               return n0
-            },
+            }),
           })
           return n2
         },
@@ -961,10 +957,9 @@ describe('component: slots', () => {
       const items = ref<number[]>([])
       const Parent = defineVaporComponent({
         setup() {
-          const createForwardedSlot = forwardedSlotCreator()
           const n2 = createComponent(Child, null, {
-            default: () => {
-              const n0 = createForwardedSlot('default', null, () => {
+            default: withVaporCtx(() => {
+              const n0 = createSlot('default', null, () => {
                 const n2 = createFor(
                   () => items.value,
                   for_item0 => {
@@ -979,7 +974,7 @@ describe('component: slots', () => {
                 return n2
               })
               return n0
-            },
+            }),
           })
           return n2
         },
@@ -1033,19 +1028,18 @@ describe('component: slots', () => {
       ) => {
         return defineVaporComponent({
           setup() {
-            const createForwardedSlot = forwardedSlotCreator()
             const n2 = createComponent(
               targetComponent,
               null,
               {
-                foo: () => {
+                foo: withVaporCtx(() => {
                   return fallbackText
-                    ? createForwardedSlot('foo', null, () => {
+                    ? createSlot('foo', null, () => {
                         const n2 = template(`<div>${fallbackText}</div>`)()
                         return n2
                       })
-                    : createForwardedSlot('foo', null)
-                },
+                    : createSlot('foo', null)
+                }),
               },
               true,
             )

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

@@ -4,7 +4,6 @@ import {
   createDynamicComponent,
   createSlot,
   defineVaporComponent,
-  forwardedSlotCreator,
   setInsertionState,
   template,
   vaporInteropPlugin,
@@ -231,7 +230,7 @@ describe('scopeId', () => {
               const n0 = template('<div parent></div>')()
               const n1 = createComponent(Child2)
               return [n0, n1]
-            }) as any,
+            }),
           },
           true,
         )
@@ -262,7 +261,7 @@ describe('scopeId', () => {
         // <div><slot/></div>
         const n1 = template('<div wrapper></div>', true)() as any
         setInsertionState(n1)
-        createSlot('default', null, undefined, undefined, true /* noSlotted */)
+        createSlot('default', null, undefined, true /* noSlotted */)
         return n1
       },
     })
@@ -271,15 +270,14 @@ describe('scopeId', () => {
       __scopeId: 'slotted',
       setup() {
         // <Wrapper><slot/></Wrapper>
-        const _createForwardedSlot = forwardedSlotCreator()
         const n1 = createComponent(
           Wrapper,
           null,
           {
             default: withVaporCtx(() => {
-              const n0 = _createForwardedSlot('default', null)
+              const n0 = createSlot('default', null)
               return n0
-            }) as any,
+            }),
           },
           true,
         )
@@ -297,7 +295,7 @@ describe('scopeId', () => {
           {
             default: withVaporCtx(() => {
               return template('<div root></div>')()
-            }) as any,
+            }),
           },
           true,
         )
@@ -589,7 +587,7 @@ describe('vdom interop', () => {
               const n0 = template('<div vapor-parent></div>')()
               const n1 = createComponent(VdomChild)
               return [n0, n1]
-            }) as any,
+            }),
           },
           true,
         )

packages/runtime-vapor/src/componentSlots.ts

@@ -114,7 +114,7 @@ export function getSlot(
   }
 }
 
-export function withVaporCtx(fn: Function): Function {
+export function withVaporCtx(fn: Function): BlockFn {
   const instance = currentInstance as VaporComponentInstance
   return (...args: any[]) => {
     const prev = setCurrentInstance(instance)
@@ -126,21 +126,10 @@ export function withVaporCtx(fn: Function): Function {
   }
 }
 
-export function forwardedSlotCreator(): (
-  name: string | (() => string),
-  rawProps?: LooseRawProps | null,
-  fallback?: VaporSlot,
-) => Block {
-  const instance = currentInstance as VaporComponentInstance
-  return (name, rawProps, fallback) =>
-    createSlot(name, rawProps, fallback, instance, false /* noSlotted */)
-}
-
 export function createSlot(
   name: string | (() => string),
   rawProps?: LooseRawProps | null,
   fallback?: VaporSlot,
-  i?: VaporComponentInstance,
   noSlotted?: boolean,
 ): Block {
   const _insertionParent = insertionParent
@@ -148,7 +137,7 @@ export function createSlot(
   const _isLastInsertion = isLastInsertion
   if (!isHydrating) resetInsertionState()
 
-  const instance = i || (currentInstance as VaporComponentInstance)
+  const instance = currentInstance as VaporComponentInstance
   const rawSlots = instance.rawSlots
   const slotProps = rawProps
     ? new Proxy(rawProps, rawPropsProxyHandlers)

packages/runtime-vapor/src/index.ts

@@ -16,11 +16,7 @@ export {
   isVaporComponent,
 } from './component'
 export { renderEffect } from './renderEffect'
-export {
-  createSlot,
-  forwardedSlotCreator,
-  withVaporCtx,
-} from './componentSlots'
+export { createSlot, withVaporCtx } from './componentSlots'
 export { template } from './dom/template'
 export { createTextNode, child, nthChild, next, txt } from './dom/node'
 export {