From 3f99e239e03a8861c462d4ee91feb82066ab3e28 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 9 Nov 2020 17:22:58 -0500
Subject: [PATCH] feat(compiler-sfc): support kebab-case components in `<script
 setup>` sfc template

---
 packages/compiler-core/src/transform.ts          |  5 +++--
 .../src/transforms/transformElement.ts           | 16 +++++++++++++---
 packages/compiler-sfc/src/compileScript.ts       |  8 ++++----
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 4650c368557..fc56ddf5649 100644
--- 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 8a6d39a376a..53b591fc03b 100644
--- 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 841c60ecfef..45cdea72256 100644
--- 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,