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

fix #3507

diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index c07bb0e55337aa9773b83b5e44fbc8c25bdb414c..bc2c9686a6c193ef4bd0a724eaf1b5caaa9aac66 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -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)

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 5c34c6d2eee756c11e5827ff6cf6d8d51adf7ad5..398758f42342464e0d548fd47a1ebb3927172e2e 100644 (file)
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -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'
+}