feat(compiler-core): consider component import names for resolving setup component references

packages/compiler-core/src/codegen.ts

@@ -120,7 +120,10 @@ enum NewlineType {
 }
 
 export interface CodegenContext
-  extends Omit<Required<CodegenOptions>, 'bindingMetadata' | 'inline'> {
+  extends Omit<
+    Required<CodegenOptions>,
+    'bindingMetadata' | 'knownComponents' | 'inline'
+  > {
   source: string
   code: string
   line: number

packages/compiler-core/src/options.ts

@@ -199,6 +199,12 @@ interface SharedTransformCodegenOptions {
    * binding access when `prefixIdentifiers` is enabled.
    */
   bindingMetadata?: BindingMetadata
+  /**
+   * Optional metadata analyzed from script - used to help disambiguate
+   * template component references when other bindings in the script use
+   * different name casing
+   */
+  knownComponents?: Set<string>
   /**
    * Compile the function for inlining inside setup().
    * This allows the function to directly access setup() local bindings.

packages/compiler-core/src/transform.ts

@@ -143,6 +143,7 @@ export function createTransformContext(
     inSSR = false,
     ssrCssVars = ``,
     bindingMetadata = EMPTY_OBJ,
+    knownComponents = new Set<string>(),
     inline = false,
     isTS = false,
     onError = defaultOnError,
@@ -171,6 +172,7 @@ export function createTransformContext(
     inSSR,
     ssrCssVars,
     bindingMetadata,
+    knownComponents,
     inline,
     isTS,
     onError,

packages/compiler-core/src/transforms/transformElement.ts

@@ -286,13 +286,13 @@ export function resolveComponentType(
   // this is skipped in browser build since browser builds do not perform
   // binding analysis.
   if (!__BROWSER__) {
-    const fromSetup = resolveSetupReference(tag, context)
+    const fromSetup = resolveSetupReference(tag, context, true)
     if (fromSetup) {
       return fromSetup
     }
     const dotIndex = tag.indexOf('.')
     if (dotIndex > 0) {
-      const ns = resolveSetupReference(tag.slice(0, dotIndex), context)
+      const ns = resolveSetupReference(tag.slice(0, dotIndex), context, true)
       if (ns) {
         return ns + tag.slice(dotIndex)
       }
@@ -319,24 +319,35 @@ export function resolveComponentType(
   return toValidAssetId(tag, `component`)
 }
 
-function resolveSetupReference(name: string, context: TransformContext) {
+function resolveSetupReference(
+  name: string,
+  context: TransformContext,
+  isComponent: boolean,
+) {
   const bindings = context.bindingMetadata
   if (!bindings || bindings.__isScriptSetup === false) {
     return
   }
 
   const camelName = camelize(name)
   const PascalName = capitalize(camelName)
+  const names = [name, camelName, PascalName]
+  const isKnownComponentPerName = names.map(name => ({
+    name,
+    isKnownComponent:
+      context.knownComponents && context.knownComponents.has(name),
+  }))
   const checkType = (type: BindingTypes) => {
-    if (bindings[name] === type) {
-      return name
-    }
-    if (bindings[camelName] === type) {
-      return camelName
-    }
-    if (bindings[PascalName] === type) {
-      return PascalName
+    if (isComponent) {
+      // If there is a known component with this name then prioritize it
+      const foundWithKnownComponent = isKnownComponentPerName.find(
+        x => bindings[x.name] === type && x.isKnownComponent,
+      )
+      if (foundWithKnownComponent) {
+        return foundWithKnownComponent.name
+      }
     }
+    return names.find(x => bindings[x] === type)
   }
 
   const fromConst =
@@ -885,7 +896,7 @@ export function buildDirectiveArgs(
     // user directive.
     // see if we have directives exposed via <script setup>
     const fromSetup =
-      !__BROWSER__ && resolveSetupReference('v-' + dir.name, context)
+      !__BROWSER__ && resolveSetupReference('v-' + dir.name, context, false)
     if (fromSetup) {
       dirArgs.push(fromSetup)
     } else {

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -848,6 +848,33 @@ return (_ctx, _cache) => {
 }"
 `;
 
+exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components casing 1`] = `
+"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import First from './First.vue'
+        import SecondComp from './Second.vue'
+        import thirdComp from './Fifth.vue'
+
+
+export default {
+  setup(__props) {
+
+        const first = () => 1
+        const secondComp = () => 2
+        const ThirdComp = () => 3
+
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createVNode(First),
+    _createVNode(SecondComp),
+    _createVNode(thirdComp)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
 "import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -406,6 +406,32 @@ describe('SFC compile <script setup>', () => {
       assertCode(content)
     })
 
+    test('referencing scope components casing', () => {
+      const { content } = compile(
+        `
+        <script setup>
+        import First from './First.vue'
+        import SecondComp from './Second.vue'
+        import thirdComp from './Fifth.vue'
+
+        const first = () => 1
+        const secondComp = () => 2
+        const ThirdComp = () => 3
+        </script>
+        <template>
+          <first/>
+          <second-comp/>
+          <third-comp/>
+        </template>
+        `,
+        { inlineTemplate: true },
+      )
+      expect(content).toMatch('_createVNode(First)')
+      expect(content).toMatch('_createVNode(SecondComp)')
+      expect(content).toMatch('_createVNode(thirdComp)')
+      assertCode(content)
+    })
+
     test('avoid unref() when necessary', () => {
       // function, const, component import
       const { content } = compile(

packages/compiler-sfc/src/compileScript.ts

@@ -726,16 +726,21 @@ export function compileScript(
   if (scriptAst) {
     Object.assign(ctx.bindingMetadata, analyzeScriptBindings(scriptAst.body))
   }
+  const knownComponents = new Set<string>()
   for (const [key, { isType, imported, source }] of Object.entries(
     ctx.userImports,
   )) {
     if (isType) continue
-    ctx.bindingMetadata[key] =
+    const isKnownComponent =
       imported === '*' ||
       (imported === 'default' && source.endsWith('.vue')) ||
       source === 'vue'
-        ? BindingTypes.SETUP_CONST
-        : BindingTypes.SETUP_MAYBE_REF
+    if (isKnownComponent) {
+      knownComponents.add(key)
+      ctx.bindingMetadata[key] = BindingTypes.SETUP_CONST
+    } else {
+      ctx.bindingMetadata[key] = BindingTypes.SETUP_MAYBE_REF
+    }
   }
   for (const key in scriptBindings) {
     ctx.bindingMetadata[key] = scriptBindings[key]
@@ -880,6 +885,7 @@ export function compileScript(
           inline: true,
           isTS: ctx.isTS,
           bindingMetadata: ctx.bindingMetadata,
+          knownComponents: knownComponents,
         },
       })
       templateMap = map