From 754a80e595c33b00eb9a14a302482e87a37de621 Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Thu, 7 Mar 2024 03:36:16 +0000
Subject: [PATCH 1/3] fix: shorthand of :is doesn't work in dynamic component

---
 .../transforms/transformElement.spec.ts       | 18 ++++++++++++
 .../src/transforms/transformElement.ts        |  3 +-
 packages/compiler-core/src/utils.ts           | 28 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 5d3f92ced18..c30840a21a6 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -1231,6 +1231,24 @@ describe('compiler: element transform', () => {
       })
     })
 
+    test('dynamic binding shorthand', () => {
+      const { node, root } = parseWithBind(`<component :is />`)
+      expect(root.helpers).toContain(RESOLVE_DYNAMIC_COMPONENT)
+      expect(node).toMatchObject({
+        isBlock: true,
+        tag: {
+          callee: RESOLVE_DYNAMIC_COMPONENT,
+          arguments: [
+            {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: 'is',
+              isStatic: false,
+            },
+          ],
+        },
+      })
+    })
+
     test('is casting', () => {
       const { node, root } = parseWithBind(`<div is="vue:foo" />`)
       expect(root.helpers).toContain(RESOLVE_COMPONENT)
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index c50f7f5e969..06aa9ddb041 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -51,6 +51,7 @@ import {
 } from '../runtimeHelpers'
 import {
   findProp,
+  findShorthandProp,
   isCoreComponent,
   isStaticArgOf,
   isStaticExp,
@@ -253,7 +254,7 @@ export function resolveComponentType(
 
   // 1. dynamic component
   const isExplicitDynamic = isComponentTag(tag)
-  const isProp = findProp(node, 'is')
+  const isProp = findProp(node, 'is') || findShorthandProp(node, 'is', context)
   if (isProp) {
     if (
       isExplicitDynamic ||
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index 99a2c5b61a8..70b8a802b50 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -23,6 +23,7 @@ import {
   type VNodeCall,
   createCallExpression,
   createObjectExpression,
+  createSimpleExpression,
 } from './ast'
 import type { TransformContext } from './transform'
 import {
@@ -36,11 +37,12 @@ import {
   TO_HANDLERS,
   WITH_MEMO,
 } from './runtimeHelpers'
-import { NOOP, isObject, isString } from '@vue/shared'
+import { NOOP, camelize, isObject, isString } from '@vue/shared'
 import type { PropsExpression } from './transforms/transformElement'
 import { parseExpression } from '@babel/parser'
 import type { Expression } from '@babel/types'
 import { unwrapTSNode } from './babelUtils'
+import { processExpression } from './transforms/transformExpression'
 
 export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
   p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic
@@ -263,6 +265,30 @@ export function findProp(
   }
 }
 
+export function findShorthandProp(
+  node: ElementNode,
+  name: string,
+  context: TransformContext,
+): ElementNode['props'][0] | undefined {
+  for (let i = 0; i < node.props.length; i++) {
+    const p = node.props[i]
+    if (
+      p.type !== NodeTypes.ATTRIBUTE &&
+      p.name === 'bind' &&
+      p.arg &&
+      isStaticArgOf(p.arg, name) &&
+      p.arg.type === NodeTypes.SIMPLE_EXPRESSION
+    ) {
+      const name = camelize(p.arg.content)
+      p.exp = createSimpleExpression(name, false, p.arg.loc)
+      if (!__BROWSER__) {
+        p.exp = processExpression(p.exp, context)
+      }
+      return p
+    }
+  }
+}
+
 export function isStaticArgOf(
   arg: DirectiveNode['arg'],
   name: string,

From 85355caf4df5553a29d7d6e88ccc6c0a68e2d4f6 Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Thu, 7 Mar 2024 04:53:18 +0000
Subject: [PATCH 2/3] fix: shorthand of :is doesn't work in dynamic component

---
 packages/compiler-core/src/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index 70b8a802b50..83d18355174 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -279,8 +279,8 @@ export function findShorthandProp(
       isStaticArgOf(p.arg, name) &&
       p.arg.type === NodeTypes.SIMPLE_EXPRESSION
     ) {
-      const name = camelize(p.arg.content)
-      p.exp = createSimpleExpression(name, false, p.arg.loc)
+      const value = camelize(p.arg.content)
+      p.exp = createSimpleExpression(value, false, p.arg.loc)
       if (!__BROWSER__) {
         p.exp = processExpression(p.exp, context)
       }

From 3e918d89fa1c117692596b6f9ac6e53ded9c6c7e Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Tue, 12 Mar 2024 13:11:59 +0000
Subject: [PATCH 3/3] chore: optimize fn name of find shorthand prop

---
 packages/compiler-core/src/transforms/transformElement.ts | 5 +++--
 packages/compiler-core/src/utils.ts                       | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 06aa9ddb041..be90eaf65d9 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -50,8 +50,8 @@ import {
   UNREF,
 } from '../runtimeHelpers'
 import {
+  findAndProcessShorthandProp,
   findProp,
-  findShorthandProp,
   isCoreComponent,
   isStaticArgOf,
   isStaticExp,
@@ -254,7 +254,8 @@ export function resolveComponentType(
 
   // 1. dynamic component
   const isExplicitDynamic = isComponentTag(tag)
-  const isProp = findProp(node, 'is') || findShorthandProp(node, 'is', context)
+  const isProp =
+    findProp(node, 'is') || findAndProcessShorthandProp(node, 'is', context)
   if (isProp) {
     if (
       isExplicitDynamic ||
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index 83d18355174..bcdb1d107ae 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -265,7 +265,7 @@ export function findProp(
   }
 }
 
-export function findShorthandProp(
+export function findAndProcessShorthandProp(
   node: ElementNode,
   name: string,
   context: TransformContext,