feat(compiler-vapor): impl dynamic slot name

Author: Doctor-wu

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

@@ -1,5 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`compiler: transform slot > dynamic slots name 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent, 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, { [_ctx.dynamicName]: () => {
+    const n0 = t0()
+    return n0
+  } }, null, true)
+  return n2
+}"
+`;
+
 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,4 +1,6 @@
+import { createSimpleExpression } from '@vue/compiler-dom'
 import {
+  type CreateComponentIRNode,
   IRNodeTypes,
   transformChildren,
   transformElement,
@@ -34,22 +36,10 @@ describe('compiler: transform slot', () => {
     expect(code).toMatchSnapshot()
 
     expect(ir.template).toEqual(['<div></div>'])
-    expect(ir.block.operation).toMatchObject([
-      {
-        type: IRNodeTypes.CREATE_COMPONENT_NODE,
-        id: 1,
-        tag: 'Comp',
-        props: [[]],
-        slots: {
-          default: {
-            type: IRNodeTypes.BLOCK,
-            dynamic: {
-              children: [{ template: 0 }],
-            },
-          },
-        },
-      },
-    ])
+    expect(ir.block.operation[0].type).toBe(IRNodeTypes.CREATE_COMPONENT_NODE)
+    const slots = (ir.block.operation[0] as CreateComponentIRNode).slots!
+    expect(slots.length).toBe(1)
+    expect(slots[0].name.content).toBe('default')
     expect(ir.block.returns).toEqual([1])
     expect(ir.block.dynamic).toMatchObject({
       children: [{ id: 1 }],
@@ -65,28 +55,11 @@ describe('compiler: transform slot', () => {
     expect(code).toMatchSnapshot()
 
     expect(ir.template).toEqual(['foo', 'bar', '<span></span>'])
-    expect(ir.block.operation).toMatchObject([
-      {
-        type: IRNodeTypes.CREATE_COMPONENT_NODE,
-        id: 4,
-        tag: 'Comp',
-        props: [[]],
-        slots: {
-          one: {
-            type: IRNodeTypes.BLOCK,
-            dynamic: {
-              children: [{ template: 0 }],
-            },
-          },
-          default: {
-            type: IRNodeTypes.BLOCK,
-            dynamic: {
-              children: [{}, { template: 1 }, { template: 2 }],
-            },
-          },
-        },
-      },
-    ])
+    expect(ir.block.operation[0].type).toBe(IRNodeTypes.CREATE_COMPONENT_NODE)
+    const slots = (ir.block.operation[0] as CreateComponentIRNode).slots!
+    expect(slots.length).toBe(2)
+    expect(slots[0].name.content).toBe('one')
+    expect(slots[1].name.content).toBe('default')
   })
 
   test('nested slots', () => {
@@ -97,4 +70,15 @@ describe('compiler: transform slot', () => {
     )
     expect(code).toMatchSnapshot()
   })
+
+  test('dynamic slots name', () => {
+    const { ir, code } = compileWithSlots(`<Comp>
+        <template #[dynamicName]>foo</template>
+      </Comp>`)
+    expect(ir.block.operation[0].type).toBe(IRNodeTypes.CREATE_COMPONENT_NODE)
+    const slots = (ir.block.operation[0] as CreateComponentIRNode).slots!
+    expect(slots.length).toBe(1)
+    expect(slots[0].name.isStatic).toBe(false)
+    expect(code).toMatchSnapshot()
+  })
 })

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

@@ -138,11 +138,17 @@ function genModelModifiers(
 }
 
 function genSlots(oper: CreateComponentIRNode, context: CodegenContext) {
-  const slotList = Object.entries(oper.slots!)
+  const slotList = oper.slots!
   return genMulti(
     slotList.length > 1 ? SEGMENTS_OBJECT_NEWLINE : SEGMENTS_OBJECT,
-    ...slotList.map(([name, slot]) => {
-      return [name, ': ', ...genBlock(slot, context)]
+    ...slotList.map(({ name, block }) => {
+      return [
+        ...(name.isStatic
+          ? [name.content]
+          : ['[', ...genExpression(name, context), ']']),
+        ': ',
+        ...genBlock(block, context),
+      ]
     }),
   )
 }

packages/compiler-vapor/src/ir.ts

@@ -199,6 +199,11 @@ export interface WithDirectiveIRNode extends BaseIRNode {
   builtin?: VaporHelper
 }
 
+export interface ComponentStaticSlot {
+  name: SimpleExpressionNode
+  block: ComponentSlotBlockIRNode
+}
+
 export interface ComponentSlotBlockIRNode extends BlockIRNode {}
 export interface ComponentDynamicSlot {
   name: SimpleExpressionNode
@@ -212,7 +217,7 @@ export interface CreateComponentIRNode extends BaseIRNode {
   tag: string
   props: IRProps[]
 
-  slots?: Record<string, ComponentSlotBlockIRNode>
+  slots?: ComponentStaticSlot[]
   dynamicSlots?: ComponentDynamicSlot[]
 
   resolve: boolean

packages/compiler-vapor/src/transform.ts

@@ -16,7 +16,7 @@ import {
 import { EMPTY_OBJ, NOOP, extend, isArray, isString } from '@vue/shared'
 import {
   type BlockIRNode,
-  type ComponentSlotBlockIRNode,
+  type ComponentStaticSlot,
   DynamicFlag,
   type HackOptions,
   type IRDynamicInfo,
@@ -78,7 +78,7 @@ export class TransformContext<T extends AllNode = AllNode> {
 
   comment: CommentNode[] = []
   component: Set<string> = this.ir.component
-  slots: Record<string, ComponentSlotBlockIRNode> | null = null
+  slots: ComponentStaticSlot[] | null = null
 
   private globalId = 0
 

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

@@ -2,6 +2,7 @@ import {
   type ElementNode,
   ElementTypes,
   NodeTypes,
+  createSimpleExpression,
   isTemplateNode,
   isVSlot,
 } from '@vue/compiler-core'
@@ -35,12 +36,16 @@ export const transformVSlot: NodeTransform = (node, context) => {
       context as TransformContext<ElementNode>,
     )
 
-    const slots = (context.slots ||= {})
+    const slots = (context.slots ||= [])
 
     return () => {
       onExit()
-      if (hasDefalutSlot) slots.default = block
-      if (Object.keys(slots).length) context.slots = slots
+      if (hasDefalutSlot)
+        slots.push({
+          name: createSimpleExpression('default', true),
+          block,
+        })
+      if (slots.length) context.slots = slots
     }
   } else if (isSlotTemplate && (dir = findDir(node, 'slot', true))) {
     context.dynamic.flags |= DynamicFlag.NON_TEMPLATE
@@ -52,7 +57,10 @@ export const transformVSlot: NodeTransform = (node, context) => {
       context as TransformContext<ElementNode>,
     )
 
-    slots[dir.arg!.content] = block
+    slots.push({
+      name: dir.arg!,
+      block,
+    })
     return () => onExit()
   }
 }