fix: error with v-show

Author: LittleSound

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

@@ -26,11 +26,13 @@ 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)
-  }])
+  const n0 = _createSlot("default", [
+    {
+      foo: () => ("bar"), 
+      baz: () => (_ctx.qux), 
+      fooBar: () => (_ctx.foo-_ctx.bar)
+    }
+  ])
   return n0
 }"
 `;
@@ -62,6 +64,15 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: transform <slot> outlets > error on unexpected custom directive with v-show on <slot> 1`] = `
+"import { createSlot as _createSlot } from 'vue/vapor';
+
+export function render(_ctx) {
+  const n0 = _createSlot("default", null)
+  return n0
+}"
+`;
+
 exports[`compiler: transform <slot> outlets > named slot outlet with fallback 1`] = `
 "import { createSlot as _createSlot, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
@@ -88,10 +99,12 @@ exports[`compiler: transform <slot> outlets > statically named slot outlet with
 "import { createSlot as _createSlot } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createSlot("foo", [{
-    foo: () => ("bar"), 
-    baz: () => (_ctx.qux)
-  }])
+  const n0 = _createSlot("foo", [
+    {
+      foo: () => ("bar"), 
+      baz: () => (_ctx.qux)
+    }
+  ])
   return n0
 }"
 `;
@@ -100,11 +113,11 @@ exports[`compiler: transform <slot> outlets > statically named slot outlet with
 "import { createSlot as _createSlot } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createSlot("foo", [{
-    foo: () => ("bar")
-  }, () => (_ctx.obj), {
-    baz: () => (_ctx.qux)
-  }])
+  const n0 = _createSlot("foo", [
+    { foo: () => ("bar") }, 
+    () => (_ctx.obj), 
+    { baz: () => (_ctx.qux) }
+  ])
   return n0
 }"
 `;
@@ -114,11 +127,11 @@ exports[`compiler: transform <slot> outlets > statically named slot outlet with
 import { createSlot as _createSlot } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createSlot("default", [{
-    onClick: () => _ctx.foo
-  }, () => (_toHandlers(_ctx.bar)), {
-    baz: () => (_ctx.qux)
-  }])
+  const n0 = _createSlot("default", [
+    { onClick: () => _ctx.foo }, 
+    () => (_toHandlers(_ctx.bar)), 
+    { baz: () => (_ctx.qux) }
+  ])
   return n0
 }"
 `;

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

@@ -7,6 +7,7 @@ import {
   transformText,
   transformVBind,
   transformVOn,
+  transformVShow,
 } from '../../src'
 import { makeCompile } from './_utils'
 
@@ -20,6 +21,7 @@ const compileWithSlotsOutlet = makeCompile({
   directiveTransforms: {
     bind: transformVBind,
     on: transformVOn,
+    show: transformVShow,
   },
 })
 
@@ -230,4 +232,27 @@ describe('compiler: transform <slot> outlets', () => {
       },
     })
   })
+
+  test('error on unexpected custom directive with v-show on <slot>', () => {
+    const onError = vi.fn()
+    const source = `<slot v-show="ok" />`
+    const index = source.indexOf('v-show="ok"')
+    const { code } = compileWithSlotsOutlet(source, { onError })
+    expect(code).toMatchSnapshot()
+    expect(onError.mock.calls[0][0]).toMatchObject({
+      code: ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET,
+      loc: {
+        start: {
+          offset: index,
+          line: 1,
+          column: index + 1,
+        },
+        end: {
+          offset: index + 11,
+          line: 1,
+          column: index + 12,
+        },
+      },
+    })
+  })
 })

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

@@ -18,8 +18,9 @@ import {
   IRNodeTypes,
   type IRProps,
   type VaporDirectiveNode,
+  type WithDirectiveIRNode,
 } from '../ir'
-import { camelize, extend, isBuiltInDirective } from '@vue/shared'
+import { camelize, extend } from '@vue/shared'
 import { newBlock } from './utils'
 import { buildProps } from './transformElement'
 
@@ -37,7 +38,6 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
 
   let name: SimpleExpressionNode | undefined
   const nonNameProps: (AttributeNode | DirectiveNode)[] = []
-  const directives: DirectiveNode[] = []
   for (const prop of props) {
     if (prop.type === NodeTypes.ATTRIBUTE) {
       if (prop.value) {
@@ -59,8 +59,6 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
         )
         name.ast = null
       }
-    } else if (!isBuiltInDirective(prop.name)) {
-      directives.push(prop)
     } else {
       const nonProp = extend({}, prop)
       if (nonProp.name === 'bind' && nonProp.arg && isStaticExp(nonProp.arg)) {
@@ -72,15 +70,6 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
     }
   }
 
-  if (directives.length) {
-    context.options.onError(
-      createCompilerError(
-        ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET,
-        directives[0].loc,
-      ),
-    )
-  }
-
   name ||= createSimpleExpression('default', true)
   let irProps: IRProps[] = []
   if (nonNameProps.length > 0) {
@@ -90,6 +79,20 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
       true,
     )
     irProps = isDynamic ? props : [props]
+
+    const { operation } = context.block
+    const directives = operation.filter(
+      oper => oper.type === IRNodeTypes.WITH_DIRECTIVE,
+    ) as WithDirectiveIRNode[]
+
+    if (directives.length) {
+      context.options.onError(
+        createCompilerError(
+          ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET,
+          directives[0].dir.loc,
+        ),
+      )
+    }
   }
 
   return () => {