test(compiler-vapor): slot outlets with props & fallbacks (#199)

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

@@ -22,6 +22,21 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: transform <slot> outlets > default slot outlet with props & fallback 1`] = `
+"import { createSlot as _createSlot, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = _createSlot("default", [
+    { foo: () => (_ctx.bar) }
+  ], () => {
+    const n2 = t0()
+    return n2
+  })
+  return n0
+}"
+`;
+
 exports[`compiler: transform <slot> outlets > default slot outlet with props 1`] = `
 "import { createSlot as _createSlot } from 'vue/vapor';
 
@@ -86,6 +101,21 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: transform <slot> outlets > named slot outlet with props & fallback 1`] = `
+"import { createSlot as _createSlot, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = _createSlot("foo", [
+    { foo: () => (_ctx.bar) }
+  ], () => {
+    const n2 = t0()
+    return n2
+  })
+  return n0
+}"
+`;
+
 exports[`compiler: transform <slot> outlets > statically named slot outlet 1`] = `
 "import { createSlot as _createSlot } from 'vue/vapor';
 

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

@@ -210,6 +210,52 @@ describe('compiler: transform <slot> outlets', () => {
     ])
   })
 
+  test('default slot outlet with props & fallback', () => {
+    const { ir, code } = compileWithSlotsOutlet(
+      `<slot :foo="bar"><div/></slot>`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(ir.template[0]).toMatchObject('<div></div>')
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.SLOT_OUTLET_NODE,
+        id: 0,
+        name: { content: 'default' },
+        props: [[{ key: { content: 'foo' }, values: [{ content: 'bar' }] }]],
+        fallback: {
+          type: IRNodeTypes.BLOCK,
+          dynamic: {
+            children: [{ template: 0, id: 2 }],
+          },
+          returns: [2],
+        },
+      },
+    ])
+  })
+
+  test('named slot outlet with props & fallback', () => {
+    const { ir, code } = compileWithSlotsOutlet(
+      `<slot name="foo" :foo="bar"><div/></slot>`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(ir.template[0]).toMatchObject('<div></div>')
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.SLOT_OUTLET_NODE,
+        id: 0,
+        name: { content: 'foo' },
+        props: [[{ key: { content: 'foo' }, values: [{ content: 'bar' }] }]],
+        fallback: {
+          type: IRNodeTypes.BLOCK,
+          dynamic: {
+            children: [{ template: 0, id: 2 }],
+          },
+          returns: [2],
+        },
+      },
+    ])
+  })
+
   test('error on unexpected custom directive on <slot>', () => {
     const onError = vi.fn()
     const source = `<slot v-foo />`