Repository: vuejs/vue
Pull request: fix(codegen): improve resolve component name in <script setup>

<!--
Please make sure to read the Pull Request Guidelines:
https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#pull-request-guidelines
-->

<!-- PULL REQUEST TEMPLATE -->
<!-- (Update "[ ]" to "[x]" to check a box) -->

**What kind of change does this PR introduce?** (check at least one)

- [x] Bugfix
- [ ] Feature
- [ ] Code style update
- [ ] Refactor
- [ ] Build-related changes
- [ ] Other, please describe:

**Does this PR introduce a breaking change?** (check one)

- [ ] Yes
- [x] No

If yes, please describe the impact and migration path for existing applications:

**The PR fulfills these requirements:**

- [ ] It's submitted to the `dev` branch for v2.x (or to a previous version branch), _not_ the `master` branch
- [x] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number)
- [x] All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
- [ ] New/updated tests are included

If adding a **new feature**, the PR's description includes:
- [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

**Other information:**

close #12685


Changed files:
filename: src/compiler/codegen/index.ts
patch: @@ -13,7 +13,7 @@ import {
   ASTText,
   CompilerOptions
 } from 'types/compiler'
-import { BindingMetadata } from 'sfc/types'
+import { BindingMetadata, BindingTypes } from 'sfc/types'
 
 type TransformFunction = (el: ASTElement, code: string) => string
 type DataGenFunction = (el: ASTElement) => string
@@ -104,10 +104,7 @@ export function genElement(el: ASTElement, state: CodegenState): string {
       // check if this is a component in <script setup>
       const bindings = state.options.bindings
       if (maybeComponent && bindings && bindings.__isScriptSetup !== false) {
-        tag =
-          checkBindingType(bindings, el.tag) ||
-          checkBindingType(bindings, camelize(el.tag)) ||
-          checkBindingType(bindings, capitalize(camelize(el.tag)))
+        tag = checkBindingType(bindings, el.tag)
       }
       if (!tag) tag = `'${el.tag}'`
 
@@ -127,9 +124,32 @@ export function genElement(el: ASTElement, state: CodegenState): string {
 }
 
 function checkBindingType(bindings: BindingMetadata, key: string) {
-  const type = bindings[key]
-  if (type && type.startsWith('setup')) {
-    return key
+  const camelName = camelize(key)
+  const PascalName = capitalize(camelName)
+  const checkType = (type) => {
+    if (bindings[key] === type) {
+      return key
+    }
+    if (bindings[camelName] === type) {
+      return camelName
+    }
+    if (bindings[PascalName] === type) {
+      return PascalName
+    }
+  }
+  const fromConst =
+    checkType(BindingTypes.SETUP_CONST) ||
+    checkType(BindingTypes.SETUP_REACTIVE_CONST)
+  if (fromConst) {
+    return fromConst
+  }
+
+  const fromMaybeRef =
+    checkType(BindingTypes.SETUP_LET) ||
+    checkType(BindingTypes.SETUP_REF) ||
+    checkType(BindingTypes.SETUP_MAYBE_REF)
+  if (fromMaybeRef) {
+    return fromMaybeRef
   }
 }