feat(compiler/runtime-vapor): implement v-slots + v-for / v-if

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

@@ -17,6 +17,61 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: transform slot > dynamic slots name w/ v-for 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createForSlots as _createForSlots, template as _template } from 'vue/vapor';
+const t0 = _template("foo")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n2 = _createComponent(_component_Comp, null, null, () => [_createForSlots(_ctx.list, (item) => ({
+ name: _ctx.i, 
+ fn: () => {
+ const n0 = t0()
+ return n0
+ }
+ }))], true)
+ return n2
+}"
+`;
+
+exports[`compiler: transform slot > dynamic slots name w/ v-if / v-else[-if] 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent, template as _template } from 'vue/vapor';
+const t0 = _template("condition slot")
+const t1 = _template("another condition")
+const t2 = _template("else condition")
+
+export function render(_ctx) {
+ const _component_Comp = _resolveComponent("Comp")
+ const n6 = _createComponent(_component_Comp, null, null, () => [_ctx.condition
+ ? {
+ name: "condition", 
+ fn: () => {
+ const n0 = t0()
+ return n0
+ }, 
+ key: "0"
+ }
+ : _ctx.anotherCondition
+ ? {
+ name: "condition", 
+ fn: () => {
+ const n2 = t1()
+ return n2
+ }, 
+ key: "1"
+ }
+ : {
+ name: "condition", 
+ fn: () => {
+ const n4 = t2()
+ return n4
+ }, 
+ key: "2"
+ }], true)
+ return n6
+}"
+`;
+
 exports[`compiler: transform slot > implicit default slot 1`] = `
 "import { resolveComponent as _resolveComponent, createComponent as _createComponent, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")

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

@@ -1,5 +1,6 @@
 import { ErrorCodes, NodeTypes } from '@vue/compiler-core'
 import {
+ DynamicSlotType,
  IRNodeTypes,
  transformChildren,
  transformElement,
@@ -126,6 +127,77 @@ describe('compiler: transform slot', () => {
  ])
  })
 
+ test('dynamic slots name w/ v-for', () => {
+ const { ir, code } = compileWithSlots(
+ `<Comp>
+ <template v-for="item in list" #[i]>foo</template>
+ </Comp>`,
+ )
+ expect(code).toMatchSnapshot()
+ expect(ir.block.operation[0].type).toBe(IRNodeTypes.CREATE_COMPONENT_NODE)
+ expect(ir.block.operation).toMatchObject([
+ {
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ slots: undefined,
+ dynamicSlots: [
+ {
+ name: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: 'i',
+ isStatic: false,
+ },
+ fn: { type: IRNodeTypes.BLOCK },
+ loop: {
+ source: { content: 'list' },
+ value: { content: 'item' },
+ key: undefined,
+ index: undefined,
+ },
+ },
+ ],
+ },
+ ])
+ })
+
+ test('dynamic slots name w/ v-if / v-else[-if]', () => {
+ const { ir, code } = compileWithSlots(
+ `<Comp>
+ <template v-if="condition" #condition>condition slot</template>
+ <template v-else-if="anotherCondition" #condition>another condition</template>
+ <template v-else #condition>else condition</template>
+ </Comp>`,
+ )
+ expect(code).toMatchSnapshot()
+ expect(ir.block.operation[0].type).toBe(IRNodeTypes.CREATE_COMPONENT_NODE)
+ expect(ir.block.operation).toMatchObject([
+ {
+ type: IRNodeTypes.CREATE_COMPONENT_NODE,
+ tag: 'Comp',
+ slots: undefined,
+ dynamicSlots: [
+ {
+ slotType: DynamicSlotType.CONDITIONAL,
+ condition: { content: 'condition' },
+ positive: {
+ slotType: DynamicSlotType.BASIC,
+ key: 0,
+ },
+ negative: {
+ slotType: DynamicSlotType.CONDITIONAL,
+ condition: { content: 'anotherCondition' },
+ positive: {
+ slotType: DynamicSlotType.BASIC,
+ key: 1,
+ },
+ negative: { slotType: DynamicSlotType.BASIC, key: 2 },
+ },
+ },
+ ],
+ },
+ ])
+ })
+
  describe('errors', () => {
  test('error on extraneous children w/ named default slot', () => {
  const onError = vi.fn()

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

@@ -1,9 +1,13 @@
 import { camelize, extend, isArray } from '@vue/shared'
 import type { CodegenContext } from '../generate'
 import {
+ type ComponentBasicDynamicSlot,
+ type ComponentConditionalDynamicSlot,
  type ComponentDynamicSlot,
+ type ComponentLoopDynamicSlot,
  type ComponentSlots,
  type CreateComponentIRNode,
+ DynamicSlotType,
  IRDynamicPropsKind,
  type IRProp,
  type IRProps,
@@ -15,6 +19,8 @@ import {
  DELIMITERS_ARRAY_NEWLINE,
  DELIMITERS_OBJECT,
  DELIMITERS_OBJECT_NEWLINE,
+ INDENT_END,
+ INDENT_START,
  NEWLINE,
  genCall,
  genMulti,
@@ -155,13 +161,89 @@ function genDynamicSlots(
 ) {
  const slotsExpr = genMulti(
  dynamicSlots.length > 1 ? DELIMITERS_ARRAY_NEWLINE : DELIMITERS_ARRAY,
- ...dynamicSlots.map(({ name, fn }) =>
- genMulti(
- DELIMITERS_OBJECT_NEWLINE,
- ['name: ', ...genExpression(name, context)],
- ['fn: ', ...genBlock(fn, context)],
- ),
- ),
+ ...dynamicSlots.map(slot => genDynamicSlot(slot, context)),
  )
  return ['() => ', ...slotsExpr]
 }
+
+function genDynamicSlot(
+ slot: ComponentDynamicSlot,
+ context: CodegenContext,
+): CodeFragment[] {
+ switch (slot.slotType) {
+ case DynamicSlotType.BASIC:
+ return genBasicDynamicSlot(slot, context)
+ case DynamicSlotType.LOOP:
+ return genLoopSlot(slot, context)
+ case DynamicSlotType.CONDITIONAL:
+ return genConditionalSlot(slot, context)
+ }
+}
+
+function genBasicDynamicSlot(
+ slot: ComponentBasicDynamicSlot,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { name, fn, key } = slot
+ return genMulti(
+ DELIMITERS_OBJECT_NEWLINE,
+ ['name: ', ...genExpression(name, context)],
+ ['fn: ', ...genBlock(fn, context)],
+ ...(key !== undefined ? [`key: "${key}"`] : []),
+ )
+}
+
+function genLoopSlot(
+ slot: ComponentLoopDynamicSlot,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { name, fn, loop } = slot
+ const { value, key, index, source } = loop
+ const rawValue = value && value.content
+ const rawKey = key && key.content
+ const rawIndex = index && index.content
+
+ const idMap: Record<string, string> = {}
+ if (rawValue) idMap[rawValue] = rawValue
+ if (rawKey) idMap[rawKey] = rawKey
+ if (rawIndex) idMap[rawIndex] = rawIndex
+ const slotExpr = genMulti(
+ DELIMITERS_OBJECT_NEWLINE,
+ ['name: ', ...context.withId(() => genExpression(name, context), idMap)],
+ ['fn: ', ...context.withId(() => genBlock(fn, context), idMap)],
+ )
+ return [
+ ...genCall(
+ context.vaporHelper('createForSlots'),
+ genExpression(source, context),
+ [
+ `(`,
+ [value, key, index]
+ .filter(Boolean)
+ .map(exp => exp?.content)
+ .join(', '),
+ ') => (',
+ ...slotExpr,
+ ')',
+ ],
+ ),
+ ]
+}
+
+function genConditionalSlot(
+ slot: ComponentConditionalDynamicSlot,
+ context: CodegenContext,
+): CodeFragment[] {
+ const { condition, positive, negative } = slot
+ return [
+ ...genExpression(condition, context),
+ INDENT_START,
+ NEWLINE,
+ '? ',
+ ...genDynamicSlot(positive, context),
+ NEWLINE,
+ ': ',
+ ...(negative ? [...genDynamicSlot(negative, context)] : ['void 0']),
+ INDENT_END,
+ ]
+}

packages/compiler-vapor/src/ir.ts

@@ -73,13 +73,16 @@ export interface IfIRNode extends BaseIRNode {
  once?: boolean
 }
 
-export interface ForIRNode extends BaseIRNode {
- type: IRNodeTypes.FOR
- id: number
+export interface IRFor {
  source: SimpleExpressionNode
  value?: SimpleExpressionNode
  key?: SimpleExpressionNode
  index?: SimpleExpressionNode
+}
+
+export interface ForIRNode extends BaseIRNode, IRFor {
+ type: IRNodeTypes.FOR
+ id: number
  keyProp?: SimpleExpressionNode
  render: BlockIRNode
  once: boolean
@@ -208,12 +211,39 @@ export interface ComponentSlotBlockIRNode extends BlockIRNode {
  // TODO slot props
 }
 export type ComponentSlots = Record<string, ComponentSlotBlockIRNode>
-export interface ComponentDynamicSlot {
+
+export enum DynamicSlotType {
+ BASIC,
+ LOOP,
+ CONDITIONAL,
+}
+
+export interface ComponentBasicDynamicSlot {
+ slotType: DynamicSlotType.BASIC
  name: SimpleExpressionNode
  fn: ComponentSlotBlockIRNode
- key?: string
+ key?: number
 }
 
+export interface ComponentLoopDynamicSlot {
+ slotType: DynamicSlotType.LOOP
+ name: SimpleExpressionNode
+ fn: ComponentSlotBlockIRNode
+ loop: IRFor
+}
+
+export interface ComponentConditionalDynamicSlot {
+ slotType: DynamicSlotType.CONDITIONAL
+ condition: SimpleExpressionNode
+ positive: ComponentBasicDynamicSlot
+ negative?: ComponentBasicDynamicSlot | ComponentConditionalDynamicSlot
+}
+
+export type ComponentDynamicSlot =
+ | ComponentBasicDynamicSlot
+ | ComponentLoopDynamicSlot
+ | ComponentConditionalDynamicSlot
+
 export interface CreateComponentIRNode extends BaseIRNode {
  type: IRNodeTypes.CREATE_COMPONENT_NODE
  id: number