detect possible camelCase components

Author: yyx990803

src/util/component.js

@@ -46,7 +46,16 @@ export function checkComponentAttr (el, options) {
       if (is) {
         return is
       } else if (process.env.NODE_ENV !== 'production') {
-        if (isUnknownElement(el, tag)) {
+        var expectedTag =
+          options._componentNameMap &&
+          options._componentNameMap[tag]
+        if (expectedTag) {
+          warn(
+            'Unknown custom element: <' + tag + '> - ' +
+            'did you mean <' + expectedTag + '>? ' +
+            'HTML is case-insensitive, remember to use kebab-case in templates!'
+          )
+        } else if (isUnknownElement(el, tag)) {
           warn(
             'Unknown custom element: <' + tag + '> - did you ' +
             'register the component correctly? For recursive components, ' +

src/util/options.js

@@ -7,7 +7,8 @@ import {
   isArray,
   isPlainObject,
   hasOwn,
-  camelize
+  camelize,
+  hyphenate
 } from './lang'
 import { warn } from './debug'
 import { commonTagRE, reservedTagRE } from './component'
@@ -230,8 +231,11 @@ function guardComponents (options) {
   if (options.components) {
     var components = options.components =
       guardArrayAssets(options.components)
-    var def
     var ids = Object.keys(components)
+    var def
+    if (process.env.NODE_ENV !== 'production') {
+      var map = options._componentNameMap = {}
+    }
     for (var i = 0, l = ids.length; i < l; i++) {
       var key = ids[i]
       if (commonTagRE.test(key) || reservedTagRE.test(key)) {
@@ -241,6 +245,11 @@ function guardComponents (options) {
         )
         continue
       }
+      // record a all lowercase <-> kebab-case mapping for
+      // possible custom element case error warning
+      if (process.env.NODE_ENV !== 'production') {
+        map[key.replace(/-/g, '').toLowerCase()] = hyphenate(key)
+      }
       def = components[key]
       if (isPlainObject(def)) {
         components[key] = Vue.extend(def)

test/unit/specs/misc_spec.js

@@ -473,4 +473,15 @@ describe('Misc', function () {
     })
     expect(vm.$el.textContent).toBe('default content slot1')
   })
+
+  it('warn possible camelCase components', function () {
+    new Vue({
+      el: document.createElement('div'),
+      template: '<HelloWorld></HelloWorld>',
+      components: {
+        'hello-world': {}
+      }
+    })
+    expect(hasWarned('did you mean <hello-world>?')).toBe(true)
+  })
 })