theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(compiler-core): allow PascalCase dynamic component tag usage (#3508)

Browse Source 
fix #3507
This commit is contained in:
HcySunYang 2021-03-30 03:18:25 +08:00 committed by GitHub
parent 3736496006
commit 555b016dcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/compiler-core/__tests__/transforms/transformElement.spec.ts
View File

@ -836,6 +836,24 @@ describe('compiler: element transform', () => {
})
})
test('capitalized version w/ static binding', () => {
const { node, root } = parseWithBind(`<Component is="foo" />`)
expect(root.helpers).toContain(RESOLVE_DYNAMIC_COMPONENT)
expect(node).toMatchObject({
isBlock: true,
tag: {
callee: RESOLVE_DYNAMIC_COMPONENT,
arguments: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'foo',
isStatic: true
}
]
}
})
})
test('dynamic binding', () => {
const { node, root } = parseWithBind(`<component :is="foo" />`)
expect(root.helpers).toContain(RESOLVE_DYNAMIC_COMPONENT)

13
packages/compiler-core/src/transforms/transformElement.ts
View File

@ -230,8 +230,9 @@ export function resolveComponentType(
const { tag } = node
// 1. dynamic component
const isProp =
node.tag === 'component' ? findProp(node, 'is') : findDir(node, 'is')
const isProp = isComponentTag(tag)
? findProp(node, 'is')
: findDir(node, 'is')
if (isProp) {
const exp =
isProp.type === NodeTypes.ATTRIBUTE
@ -413,7 +414,7 @@ export function buildProps(
}
}
// skip :is on <component>
if (name === 'is' && tag === 'component') {
if (name === 'is' && isComponentTag(tag)) {
continue
}
properties.push(
@ -452,7 +453,7 @@ export function buildProps(
// skip v-is and :is on <component>
if (
name === 'is' ||
(isBind && tag === 'component' && isBindKey(arg, 'is'))
(isBind && isComponentTag(tag) && isBindKey(arg, 'is'))
) {
continue
}
@ -672,3 +673,7 @@ function stringifyDynamicPropNames(props: string[]): string {
}
return propsNamesString + `]`
}
function isComponentTag(tag: string) {
return tag[0].toLowerCase() + tag.slice(1) === 'component'
}