feat(compiler-sfc): support kebab-case components in <script setup> sfc template

packages/compiler-core/src/transform.ts

@@ -22,7 +22,8 @@ import {
   isArray,
   NOOP,
   PatchFlags,
-  PatchFlagNames
+  PatchFlagNames,
+  EMPTY_OBJ
 } from '@vue/shared'
 import { defaultOnError } from './errors'
 import {
@@ -122,7 +123,7 @@ export function createTransformContext(
     scopeId = null,
     ssr = false,
     ssrCssVars = ``,
-    bindingMetadata = {},
+    bindingMetadata = EMPTY_OBJ,
     onError = defaultOnError
   }: TransformOptions
 ): TransformContext {

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

@@ -26,7 +26,10 @@ import {
   isSymbol,
   isOn,
   isObject,
-  isReservedProp
+  isReservedProp,
+  capitalize,
+  camelize,
+  EMPTY_OBJ
 } from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import {
@@ -246,8 +249,15 @@ export function resolveComponentType(
   }
 
   // 3. user component (from setup bindings)
-  if (context.bindingMetadata[tag] === 'setup') {
-    return `$setup[${JSON.stringify(tag)}]`
+  let tagFromSetup = tag
+  const bindings = context.bindingMetadata
+  if (
+    bindings !== EMPTY_OBJ &&
+    (bindings[tagFromSetup] === 'setup' ||
+      bindings[(tagFromSetup = camelize(tag))] === 'setup' ||
+      bindings[(tagFromSetup = capitalize(camelize(tag)))] === 'setup')
+  ) {
+    return `$setup[${JSON.stringify(tagFromSetup)}]`
   }
 
   // 4. user component (resolve)