From: HcySunYang <HcySunYang@outlook.com>
Date: Mon, 29 Mar 2021 19:18:25 +0000 (+0800)
Subject: fix(compiler-core): allow PascalCase dynamic component tag usage (#3508)
X-Git-Tag: v3.0.10~24
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=555b016dcb3b347a1d8b3d14df74c175115adb0b;p=thirdparty%2Fvuejs%2Fcore.git

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 c07bb0e553..bc2c9686a6 100644
--- 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 5c34c6d2ee..398758f423 100644
--- 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'
+}