From 248ad53572d2782fc16bfc029b4fc21a6ea15c09 Mon Sep 17 00:00:00 2001
From: Hyunje Jun <me@noraesae.net>
Date: Thu, 19 Apr 2018 11:31:18 +0900
Subject: [PATCH] feat(warn): Warn component names hyphenated into reserved
 names

Currently, component names like 'Map' is silently ignored, because they
translated into reserved names but the component names are not exactly
the same as the reserved names. The component names, thus, should be
hyphenated before checking if reserved.

Resolve #8025.
---
 src/core/util/options.js                      | 4 +++-
 test/unit/features/options/components.spec.js | 9 +++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/core/util/options.js b/src/core/util/options.js
index 5f0d10d3361..9b1574b3103 100644
--- a/src/core/util/options.js
+++ b/src/core/util/options.js
@@ -4,6 +4,7 @@ import config from '../config'
 import { warn } from './debug'
 import { nativeWatch } from './env'
 import { set } from '../observer/index'
+import { hyphenate } from '../../shared/util'
 
 import {
   ASSET_TYPES,
@@ -260,7 +261,8 @@ export function validateComponentName (name: string) {
       'and must start with a letter.'
     )
   }
-  if (isBuiltInTag(name) || config.isReservedTag(name)) {
+  const hyphenatedName = hyphenate(name)
+  if (isBuiltInTag(hyphenatedName) || config.isReservedTag(hyphenatedName)) {
     warn(
       'Do not use built-in or reserved HTML elements as component ' +
       'id: ' + name
diff --git a/test/unit/features/options/components.spec.js b/test/unit/features/options/components.spec.js
index 1a94380c322..ae5465fc3c8 100644
--- a/test/unit/features/options/components.spec.js
+++ b/test/unit/features/options/components.spec.js
@@ -69,6 +69,15 @@ describe('Options components', () => {
     expect('Do not use built-in or reserved HTML elements as component').toHaveBeenWarned()
   })
 
+  it('should warn component names translated into native HTML elements', () => {
+    new Vue({
+      components: {
+        Div: { template: '<div></div>' }
+      }
+    })
+    expect('Do not use built-in or reserved HTML elements as component').toHaveBeenWarned()
+  })
+
   it('should warn built-in elements', () => {
     new Vue({
       components: {