refactor(compiler-vapor): impl dynamic slot name + add error detection

LittleSound · LittleSound · commit 4683a64b0c9d · 2024-05-08T22:36:18.000+08:00
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -6,10 +6,13 @@ 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)
+  const n2 = _createComponent(_component_Comp, null, null, () => [{
+    name: _ctx.name, 
+    fn: () => {
+      const n0 = t0()
+      return n0
+    }
+  }], true)
   return n2
 }"
 `;
diff --git a/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts b/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts
@@ -1,6 +1,5 @@
-import { createSimpleExpression } from '@vue/compiler-dom'
+import { ErrorCodes, NodeTypes } from '@vue/compiler-core'
 import {
-  type CreateComponentIRNode,
   IRNodeTypes,
   transformChildren,
   transformElement,
@@ -36,10 +35,22 @@ describe('compiler: transform slot', () => {
     expect(code).toMatchSnapshot()
 
     expect(ir.template).toEqual(['<div></div>'])
-    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.operation).toMatchObject([
+      {
+        type: IRNodeTypes.CREATE_COMPONENT_NODE,
+        id: 1,
+        tag: 'Comp',
+        props: [[]],
+        slots: {
+          default: {
+            type: IRNodeTypes.BLOCK,
+            dynamic: {
+              children: [{ template: 0 }],
+            },
+          },
+        },
+      },
+    ])
     expect(ir.block.returns).toEqual([1])
     expect(ir.block.dynamic).toMatchObject({
       children: [{ id: 1 }],
@@ -55,11 +66,28 @@ describe('compiler: transform slot', () => {
     expect(code).toMatchSnapshot()
 
     expect(ir.template).toEqual(['foo', 'bar', '<span></span>'])
-    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')
+    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 }],
+            },
+          },
+        },
+      },
+    ])
   })
 
   test('nested slots', () => {
@@ -72,13 +100,75 @@ describe('compiler: transform slot', () => {
   })
 
   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)
+    const { ir, code } = compileWithSlots(
+      `<Comp>
+        <template #[name]>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: 'name',
+              isStatic: false,
+            },
+            fn: { type: IRNodeTypes.BLOCK },
+          },
+        ],
+      },
+    ])
+  })
+
+  describe('errors', () => {
+    test('error on extraneous children w/ named default slot', () => {
+      const onError = vi.fn()
+      const source = `<Comp><template #default>foo</template>bar</Comp>`
+      compileWithSlots(source, { onError })
+      const index = source.indexOf('bar')
+      expect(onError.mock.calls[0][0]).toMatchObject({
+        code: ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
+        loc: {
+          start: {
+            offset: index,
+            line: 1,
+            column: index + 1,
+          },
+          end: {
+            offset: index + 3,
+            line: 1,
+            column: index + 4,
+          },
+        },
+      })
+    })
+
+    test('error on duplicated slot names', () => {
+      const onError = vi.fn()
+      const source = `<Comp><template #foo></template><template #foo></template></Comp>`
+      compileWithSlots(source, { onError })
+      const index = source.lastIndexOf('#foo')
+      expect(onError.mock.calls[0][0]).toMatchObject({
+        code: ErrorCodes.X_V_SLOT_DUPLICATE_SLOT_NAMES,
+        loc: {
+          start: {
+            offset: index,
+            line: 1,
+            column: index + 1,
+          },
+          end: {
+            offset: index + 4,
+            line: 1,
+            column: index + 5,
+          },
+        },
+      })
+    })
   })
 })
diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts
@@ -1,6 +1,8 @@
 import { camelize, extend, isArray } from '@vue/shared'
 import type { CodegenContext } from '../generate'
 import {
+  type ComponentDynamicSlot,
+  type ComponentSlots,
   type CreateComponentIRNode,
   IRDynamicPropsKind,
   type IRProp,
@@ -10,6 +12,7 @@ import {
 import {
   type CodeFragment,
   NEWLINE,
+  SEGMENTS_ARRAY,
   SEGMENTS_ARRAY_NEWLINE,
   SEGMENTS_OBJECT,
   SEGMENTS_OBJECT_NEWLINE,
@@ -31,7 +34,7 @@ export function genCreateComponent(
   const { vaporHelper } = context
 
   const tag = genTag()
-  const isRoot = oper.root
+  const { root: isRoot, slots, dynamicSlots } = oper
   const rawProps = genRawProps(oper.props, context)
 
   return [
@@ -40,9 +43,17 @@ export function genCreateComponent(
     ...genCall(
       vaporHelper('createComponent'),
       tag,
-      rawProps || (oper.slots || isRoot ? 'null' : false),
-      oper.slots ? genSlots(oper, context) : isRoot ? 'null' : false,
-      isRoot && 'null',
+      rawProps || (slots || dynamicSlots || isRoot ? 'null' : false),
+      slots
+        ? genSlots(slots, context)
+        : dynamicSlots || isRoot
+          ? 'null'
+          : false,
+      dynamicSlots
+        ? genDynamicSlots(dynamicSlots, context)
+        : isRoot
+          ? 'null'
+          : false,
       isRoot && 'true',
     ),
     ...genDirectivesForElement(oper.id, context),
@@ -137,18 +148,29 @@ function genModelModifiers(
   return [',', NEWLINE, ...modifiersKey, `: () => ({ ${modifiersVal} })`]
 }
 
-function genSlots(oper: CreateComponentIRNode, context: CodegenContext) {
-  const slotList = oper.slots!
+function genSlots(slots: ComponentSlots, context: CodegenContext) {
+  const slotList = Object.entries(slots!)
   return genMulti(
     slotList.length > 1 ? SEGMENTS_OBJECT_NEWLINE : SEGMENTS_OBJECT,
-    ...slotList.map(({ name, block }) => {
-      return [
-        ...(name.isStatic
-          ? [name.content]
-          : ['[', ...genExpression(name, context), ']']),
-        ': ',
-        ...genBlock(block, context),
-      ]
+    ...slotList.map(([name, slot]) => {
+      return [name, ': ', ...genBlock(slot, context)]
     }),
   )
 }
+
+function genDynamicSlots(
+  dynamicSlots: ComponentDynamicSlot[],
+  context: CodegenContext,
+) {
+  const slotsExpr = genMulti(
+    dynamicSlots.length > 1 ? SEGMENTS_ARRAY_NEWLINE : SEGMENTS_ARRAY,
+    ...dynamicSlots.map(({ name, fn }) => {
+      return genMulti(
+        SEGMENTS_OBJECT_NEWLINE,
+        ['name: ', ...genExpression(name, context)],
+        ['fn: ', ...genBlock(fn, context)],
+      )
+    }),
+  )
+  return ['() => ', ...slotsExpr]
+}
diff --git a/packages/compiler-vapor/src/ir.ts b/packages/compiler-vapor/src/ir.ts
@@ -199,12 +199,10 @@ export interface WithDirectiveIRNode extends BaseIRNode {
   builtin?: VaporHelper
 }
 
-export interface ComponentStaticSlot {
-  name: SimpleExpressionNode
-  block: ComponentSlotBlockIRNode
+export interface ComponentSlotBlockIRNode extends BlockIRNode {
+  // TODO slot props
 }
-
-export interface ComponentSlotBlockIRNode extends BlockIRNode {}
+export type ComponentSlots = Record<string, ComponentSlotBlockIRNode>
 export interface ComponentDynamicSlot {
   name: SimpleExpressionNode
   fn: ComponentSlotBlockIRNode
@@ -217,7 +215,7 @@ export interface CreateComponentIRNode extends BaseIRNode {
   tag: string
   props: IRProps[]
 
-  slots?: ComponentStaticSlot[]
+  slots?: ComponentSlots
   dynamicSlots?: ComponentDynamicSlot[]
 
   resolve: boolean
diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts
@@ -16,7 +16,8 @@ import {
 import { EMPTY_OBJ, NOOP, extend, isArray, isString } from '@vue/shared'
 import {
   type BlockIRNode,
-  type ComponentStaticSlot,
+  type ComponentDynamicSlot,
+  type ComponentSlots,
   DynamicFlag,
   type HackOptions,
   type IRDynamicInfo,
@@ -78,7 +79,8 @@ export class TransformContext<T extends AllNode = AllNode> {
 
   comment: CommentNode[] = []
   component: Set<string> = this.ir.component
-  slots: ComponentStaticSlot[] | null = null
+  slots: ComponentSlots | null = null
+  dynamicSlots: ComponentDynamicSlot[] | null = null
 
   private globalId = 0
 
@@ -92,12 +94,14 @@ export class TransformContext<T extends AllNode = AllNode> {
   }
 
   enterBlock(ir: BlockIRNode, isVFor: boolean = false): () => void {
-    const { block, template, dynamic, childrenTemplate, slots } = this
+    const { block, template, dynamic, childrenTemplate, slots, dynamicSlots } =
+      this
     this.block = ir
     this.dynamic = ir.dynamic
     this.template = ''
     this.childrenTemplate = []
     this.slots = null
+    this.dynamicSlots = null
     isVFor && this.inVFor++
     return () => {
       // exit
@@ -107,6 +111,7 @@ export class TransformContext<T extends AllNode = AllNode> {
       this.dynamic = dynamic
       this.childrenTemplate = childrenTemplate
       this.slots = slots
+      this.dynamicSlots = dynamicSlots
       isVFor && this.inVFor--
     }
   }
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -105,8 +105,10 @@ function transformComponentElement(
     resolve,
     root,
     slots: context.slots || undefined,
+    dynamicSlots: context.dynamicSlots || undefined,
   })
   context.slots = null
+  context.dynamicSlots = null
 }
 
 function resolveSetupReference(name: string, context: TransformContext) {
diff --git a/packages/compiler-vapor/src/transforms/vSlot.ts b/packages/compiler-vapor/src/transforms/vSlot.ts
