fix(compiler-core): transform kebab case props to camelcase on slots (#…

…2490) fix #2488
vuejs · Nov 27, 2020 · ef59a30 · ef59a30
1 parent 735af1c
commit ef59a30
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
@@ -95,7 +95,9 @@ describe('compiler: transform <slot> outlets', () => {
   })
 
   test('default slot outlet with props', () => {
-    const ast = parseWithSlots(`<slot foo="bar" :baz="qux" />`)
+    const ast = parseWithSlots(
+      `<slot foo="bar" :baz="qux" :foo-bar="foo-bar" />`
+    )
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
@@ -124,6 +126,16 @@ describe('compiler: transform <slot> outlets', () => {
                 content: `qux`,
                 isStatic: false
               }
+            },
+            {
+              key: {
+                content: `fooBar`,
+                isStatic: true
+              },
+              value: {
+                content: `foo-bar`,
+                isStatic: false
+              }
             }
           ]
         }

diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -11,6 +11,7 @@ import { isSlotOutlet, findProp } from '../utils'
 import { buildProps, PropsExpression } from './transformElement'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { RENDER_SLOT } from '../runtimeHelpers'
+import { camelize } from '@vue/shared/'
 
 export const transformSlotOutlet: NodeTransform = (node, context) => {
   if (isSlotOutlet(node)) {
@@ -68,9 +69,22 @@ export function processSlotOutlet(
   const propsWithoutName = name
     ? node.props.filter(p => p !== name)
     : node.props
+
   if (propsWithoutName.length > 0) {
+    //#2488
+    propsWithoutName.forEach(prop => {
+      if (
+        prop.type === NodeTypes.DIRECTIVE &&
+        prop.arg &&
+        prop.arg.type === NodeTypes.SIMPLE_EXPRESSION
+      ) {
+        prop.arg.content = camelize(prop.arg.content)
+      }
+    })
+
     const { props, directives } = buildProps(node, context, propsWithoutName)
     slotProps = props
+
     if (directives.length) {
       context.onError(
         createCompilerError(