fix(compiler-core): transform kebab case props to camelcase on slots (#2490)
fix #2488
This commit is contained in:
parent
735af1c7b7
commit
ef59a30cab
@ -95,7 +95,9 @@ describe('compiler: transform <slot> outlets', () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
test('default slot outlet with props', () => {
|
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({
|
expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
|
||||||
type: NodeTypes.JS_CALL_EXPRESSION,
|
type: NodeTypes.JS_CALL_EXPRESSION,
|
||||||
callee: RENDER_SLOT,
|
callee: RENDER_SLOT,
|
||||||
@ -124,6 +126,16 @@ describe('compiler: transform <slot> outlets', () => {
|
|||||||
content: `qux`,
|
content: `qux`,
|
||||||
isStatic: false
|
isStatic: false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: {
|
||||||
|
content: `fooBar`,
|
||||||
|
isStatic: true
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
content: `foo-bar`,
|
||||||
|
isStatic: false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -11,6 +11,7 @@ import { isSlotOutlet, findProp } from '../utils'
|
|||||||
import { buildProps, PropsExpression } from './transformElement'
|
import { buildProps, PropsExpression } from './transformElement'
|
||||||
import { createCompilerError, ErrorCodes } from '../errors'
|
import { createCompilerError, ErrorCodes } from '../errors'
|
||||||
import { RENDER_SLOT } from '../runtimeHelpers'
|
import { RENDER_SLOT } from '../runtimeHelpers'
|
||||||
|
import { camelize } from '@vue/shared/'
|
||||||
|
|
||||||
export const transformSlotOutlet: NodeTransform = (node, context) => {
|
export const transformSlotOutlet: NodeTransform = (node, context) => {
|
||||||
if (isSlotOutlet(node)) {
|
if (isSlotOutlet(node)) {
|
||||||
@ -68,9 +69,22 @@ export function processSlotOutlet(
|
|||||||
const propsWithoutName = name
|
const propsWithoutName = name
|
||||||
? node.props.filter(p => p !== name)
|
? node.props.filter(p => p !== name)
|
||||||
: node.props
|
: node.props
|
||||||
|
|
||||||
if (propsWithoutName.length > 0) {
|
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)
|
const { props, directives } = buildProps(node, context, propsWithoutName)
|
||||||
slotProps = props
|
slotProps = props
|
||||||
|
|
||||||
if (directives.length) {
|
if (directives.length) {
|
||||||
context.onError(
|
context.onError(
|
||||||
createCompilerError(
|
createCompilerError(
|
||||||
|
Loading…
x
Reference in New Issue
Block a user