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

diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 4650c3685578d81c15be22355ef84472042dbd62..fc56ddf56492b6064bad115ac20bf11638e95d32 100644 (file)
--- a/packages/compiler-core/src/transform.ts
+++ b/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 {

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 8a6d39a376a71fd23e86f69d88c34acfb303ef19..53b591fc03b038d97b65946fa8dc0a18f24898d7 100644 (file)
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/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)

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 841c60ecfeffbd482617386e56492f092a7f934e..45cdea722566ef96c7dabb2315857e2eaada04a5 100644 (file)
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -41,7 +41,7 @@ const hasWarned: Record<string, boolean> = {}
 function warnOnce(msg: string) {
   if (!hasWarned[msg]) {
     hasWarned[msg] = true
-    console.log(`\n\x1b[33m[@vue/compiler-sfc] %s\x1b[0m\n`, msg)
+    console.log(`\x1b[33m[@vue/compiler-sfc] %s\x1b[0m\n`, msg)
   }
 }
 
@@ -59,7 +59,7 @@ export function compileScript(
   if (__DEV__ && !__TEST__ && scriptSetup) {
     warnOnce(
       `<script setup> is still an experimental proposal.\n` +
-        `Follow https://github.com/vuejs/rfcs/pull/227 for its status.`
+        `Follow its status at https://github.com/vuejs/rfcs/pull/227.`
     )
   }
 
@@ -461,9 +461,9 @@ export function compileScript(
     ) {
       if (enableRefSugar) {
         warnOnce(
-          `ref: sugar is still an experimental proposal and is not\n` +
+          `ref: sugar is still an experimental proposal and is not ` +
             `guaranteed to be a part of <script setup>.\n` +
-            `Follow its status at https://github.com/vuejs/rfcs/pull/228`
+            `Follow its status at https://github.com/vuejs/rfcs/pull/228.`
         )
         s.overwrite(
           node.label.start! + startOffset,