feat: props for slot outlet

Author: LittleSound

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

@@ -22,6 +22,19 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: transform <slot> outlets > default slot outlet with props 1`] = `
+"import { createSlot as _createSlot } from 'vue/vapor';
+
+export function render(_ctx) {
+  const n0 = _createSlot("default", [{
+    foo: () => ("bar"), 
+    baz: () => (_ctx.qux), 
+    fooBar: () => (_ctx.foo-_ctx.bar)
+  }])
+  return n0
+}"
+`;
+
 exports[`compiler: transform <slot> outlets > dynamically named slot outlet 1`] = `
 "import { createSlot as _createSlot } from 'vue/vapor';
 
@@ -61,3 +74,42 @@ export function render(_ctx) {
   return n0
 }"
 `;
+
+exports[`compiler: transform <slot> outlets > statically named slot outlet with props 1`] = `
+"import { createSlot as _createSlot } from 'vue/vapor';
+
+export function render(_ctx) {
+  const n0 = _createSlot("foo", [{
+    foo: () => ("bar"), 
+    baz: () => (_ctx.qux)
+  }])
+  return n0
+}"
+`;
+
+exports[`compiler: transform <slot> outlets > statically named slot outlet with v-bind="obj" 1`] = `
+"import { createSlot as _createSlot } from 'vue/vapor';
+
+export function render(_ctx) {
+  const n0 = _createSlot("foo", [{
+    foo: () => ("bar")
+  }, () => (_ctx.obj), {
+    baz: () => (_ctx.qux)
+  }])
+  return n0
+}"
+`;
+
+exports[`compiler: transform <slot> outlets > statically named slot outlet with v-on 1`] = `
+"import { toHandlers as _toHandlers } from 'vue';
+import { createSlot as _createSlot } from 'vue/vapor';
+
+export function render(_ctx) {
+  const n0 = _createSlot("default", [{
+    onClick: () => _ctx.foo
+  }, () => (_toHandlers(_ctx.bar)), {
+    baz: () => (_ctx.qux)
+  }])
+  return n0
+}"
+`;

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

@@ -92,6 +92,80 @@ describe('compiler: transform <slot> outlets', () => {
     ])
   })
 
+  test('default slot outlet with props', () => {
+    const { ir, code } = compileWithSlotsOutlet(
+      `<slot foo="bar" :baz="qux" :foo-bar="foo-bar" />`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.SLOT_OUTLET_NODE,
+        name: { content: 'default' },
+        props: [
+          [
+            { key: { content: 'foo' }, values: [{ content: 'bar' }] },
+            { key: { content: 'baz' }, values: [{ content: 'qux' }] },
+            { key: { content: 'fooBar' }, values: [{ content: 'foo-bar' }] },
+          ],
+        ],
+      },
+    ])
+  })
+
+  test('statically named slot outlet with props', () => {
+    const { ir, code } = compileWithSlotsOutlet(
+      `<slot name="foo" foo="bar" :baz="qux" />`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.SLOT_OUTLET_NODE,
+        name: { content: 'foo' },
+        props: [
+          [
+            { key: { content: 'foo' }, values: [{ content: 'bar' }] },
+            { key: { content: 'baz' }, values: [{ content: 'qux' }] },
+          ],
+        ],
+      },
+    ])
+  })
+
+  test('statically named slot outlet with v-bind="obj"', () => {
+    const { ir, code } = compileWithSlotsOutlet(
+      `<slot name="foo" foo="bar" v-bind="obj" :baz="qux" />`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.SLOT_OUTLET_NODE,
+        name: { content: 'foo' },
+        props: [
+          [{ key: { content: 'foo' }, values: [{ content: 'bar' }] }],
+          { value: { content: 'obj', isStatic: false } },
+          [{ key: { content: 'baz' }, values: [{ content: 'qux' }] }],
+        ],
+      },
+    ])
+  })
+
+  test('statically named slot outlet with v-on', () => {
+    const { ir, code } = compileWithSlotsOutlet(
+      `<slot @click="foo" v-on="bar" :baz="qux" />`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.SLOT_OUTLET_NODE,
+        props: [
+          [{ key: { content: 'click' }, values: [{ content: 'foo' }] }],
+          { value: { content: 'bar' }, handler: true },
+          [{ key: { content: 'baz' }, values: [{ content: 'qux' }] }],
+        ],
+      },
+    ])
+  })
+
   test('default slot outlet with fallback', () => {
     const { ir, code } = compileWithSlotsOutlet(`<slot><div/></slot>`)
     expect(code).toMatchSnapshot()

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

@@ -1,11 +1,22 @@
+import { isArray } from '@vue/shared'
 import type { CodegenContext } from '../generate'
-import type { SlotOutletIRNode } from '../ir'
+import type { IRProp, SlotOutletIRNode } from '../ir'
 import { genBlock } from './block'
 import { genExpression } from './expression'
-import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
+import {
+  type CodeFragment,
+  INDENT_END,
+  INDENT_START,
+  NEWLINE,
+  buildCodeFragment,
+  genCall,
+  genMulti,
+} from './utils'
+import { genPropKey } from './prop'
+import { genEventHandler } from './event'
 
 export function genSlotOutlet(oper: SlotOutletIRNode, context: CodegenContext) {
-  const { vaporHelper } = context
+  const { helper, vaporHelper } = context
   const { id, name, fallback } = oper
   const [frag, push] = buildCodeFragment()
 
@@ -19,7 +30,52 @@ export function genSlotOutlet(oper: SlotOutletIRNode, context: CodegenContext) {
   }
 
   push(NEWLINE, `const n${id} = `)
-  push(...genCall(vaporHelper('createSlot'), nameExpr, false, fallbackArg))
+  push(
+    ...genCall(
+      vaporHelper('createSlot'),
+      nameExpr,
+      genRawProps() || false,
+      fallbackArg,
+    ),
+  )
 
   return frag
+
+  // TODO share this with genCreateComponent
+  function genRawProps() {
+    const props = oper.props
+      .map(props => {
+        if (isArray(props)) {
+          if (!props.length) return
+          return genStaticProps(props)
+        } else {
+          let expr = genExpression(props.value, context)
+          if (props.handler) expr = genCall(helper('toHandlers'), expr)
+          return ['() => (', ...expr, ')']
+        }
+      })
+      .filter(Boolean)
+    if (props.length) {
+      return genMulti(['[', ']', ', '], ...props)
+    }
+  }
+
+  function genStaticProps(props: IRProp[]) {
+    return genMulti(
+      [
+        ['{', INDENT_START, NEWLINE],
+        [INDENT_END, NEWLINE, '}'],
+        [', ', NEWLINE],
+      ],
+      ...props.map(prop => {
+        return [
+          ...genPropKey(prop, context),
+          ': ',
+          ...(prop.handler
+            ? genEventHandler(context, prop.values[0])
+            : ['() => (', ...genExpression(prop.values[0], context), ')']),
+        ]
+      }),
+    )
+  }
 }

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

@@ -183,7 +183,7 @@ export type PropsResult =
   | [dynamic: true, props: IRProps[], expressions: SimpleExpressionNode[]]
   | [dynamic: false, props: IRProp[]]
 
-function buildProps(
+export function buildProps(
   node: ElementNode,
   context: TransformContext<ElementNode>,
   isComponent: boolean,

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

@@ -13,10 +13,12 @@ import {
   DynamicFlag,
   type IRDynamicInfo,
   IRNodeTypes,
+  type IRProps,
   type VaporDirectiveNode,
 } from '../ir'
 import { camelize, extend } from '@vue/shared'
 import { genDefaultDynamic } from './utils'
+import { buildProps } from './transformElement'
 
 export const transformSlotOutlet: NodeTransform = (node, context) => {
   if (node.type !== NodeTypes.ELEMENT || node.tag !== 'slot') {
@@ -37,7 +39,6 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
       if (p.value) {
         if (p.name === 'name') {
           name = createSimpleExpression(p.value.content, true, p.loc)
-          break
         } else {
           p.name = camelize(p.name)
           nonNameProps.push(p)
@@ -65,14 +66,23 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
     }
   }
   name ||= createSimpleExpression('default', true)
+  let irProps: IRProps[] = []
+  if (nonNameProps.length > 0) {
+    const [isDynamic, props] = buildProps(
+      extend({}, node, { props: nonNameProps }),
+      context as TransformContext<ElementNode>,
+      true,
+    )
+    irProps = isDynamic ? props : [props]
+  }
 
   return () => {
     exitBlock && exitBlock()
     context.registerOperation({
       type: IRNodeTypes.SLOT_OUTLET_NODE,
       id,
       name,
-      props: [],
+      props: irProps,
       fallback,
     })
   }

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

@@ -20,6 +20,7 @@ const delegatedEvents = /*#__PURE__*/ makeMap(
 export const transformVOn: DirectiveTransform = (dir, node, context) => {
   let { arg, exp, loc, modifiers } = dir
   const isComponent = node.tagType === ElementTypes.COMPONENT
+  const isSlotOutlet = node.tag === 'slot'
 
   if (!exp && !modifiers.length) {
     context.options.onError(
@@ -60,7 +61,7 @@ export const transformVOn: DirectiveTransform = (dir, node, context) => {
     }
   }
 
-  if (isComponent) {
+  if (isComponent || isSlotOutlet) {
     const handler = exp || EMPTY_EXPRESSION
     return {
       key: arg,