refactor(vapor): replace forwardedSlotCreator with withVaporCtx

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,49 +79,49 @@ 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
 }"
 `;
 
 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,15 +99,13 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
   }
 
   return () => {
-    if (context.inSlot) context.ir.hasForwardedSlot = true
     exitBlock && exitBlock()
     context.dynamic.operation = {
       type: IRNodeTypes.SLOT_OUTLET_NODE,
       id,
       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 {