fix: more consistent component naming warnings across the API

close vuejs#7212
aJean · Aug 19, 2020 · 4f432be · 4f432be
1 parent 386e909
commit 4f432be
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 25 deletions.
diff --git a/src/core/global-api/assets.js b/src/core/global-api/assets.js
@@ -1,8 +1,7 @@
 /* @flow */
 
-import config from '../config'
 import { ASSET_TYPES } from 'shared/constants'
-import { warn, isPlainObject } from '../util/index'
+import { isPlainObject, validateComponentName } from '../util/index'
 
 export function initAssetRegisters (Vue: GlobalAPI) {
   /**
@@ -17,13 +16,8 @@ export function initAssetRegisters (Vue: GlobalAPI) {
         return this.options[type + 's'][id]
       } else {
         /* istanbul ignore if */
-        if (process.env.NODE_ENV !== 'production') {
-          if (type === 'component' && config.isReservedTag(id)) {
-            warn(
-              'Do not use built-in or reserved HTML elements as component ' +
-              'id: ' + id
-            )
-          }
+        if (process.env.NODE_ENV !== 'production' && type === 'component') {
+          validateComponentName(id)
         }
         if (type === 'component' && isPlainObject(definition)) {
           definition.name = definition.name || id

diff --git a/src/core/global-api/extend.js b/src/core/global-api/extend.js
@@ -1,8 +1,8 @@
 /* @flow */
 
 import { ASSET_TYPES } from 'shared/constants'
-import { warn, extend, mergeOptions } from '../util/index'
 import { defineComputed, proxy } from '../instance/state'
+import { extend, mergeOptions, validateComponentName } from '../util/index'
 
 export function initExtend (Vue: GlobalAPI) {
   /**
@@ -26,14 +26,8 @@ export function initExtend (Vue: GlobalAPI) {
     }
 
     const name = extendOptions.name || Super.options.name
-    if (process.env.NODE_ENV !== 'production') {
-      if (!/^[a-zA-Z][\w-]*$/.test(name)) {
-        warn(
-          'Invalid component name: "' + name + '". Component names ' +
-          'can only contain alphanumeric characters and the hyphen, ' +
-          'and must start with a letter.'
-        )
-      }
+    if (process.env.NODE_ENV !== 'production' && name) {
+      validateComponentName(name)
     }
 
     const Sub = function VueComponent (options) {

diff --git a/src/core/util/options.js b/src/core/util/options.js
@@ -248,13 +248,24 @@ const defaultStrat = function (parentVal: any, childVal: any): any {
  */
 function checkComponents (options: Object) {
   for (const key in options.components) {
-    const lower = key.toLowerCase()
-    if (isBuiltInTag(lower) || config.isReservedTag(lower)) {
-      warn(
-        'Do not use built-in or reserved HTML elements as component ' +
-        'id: ' + key
-      )
-    }
+    validateComponentName(key)
+  }
+}
+
+export function validateComponentName (name: string) {
+  if (!/^[a-zA-Z][\w-]*$/.test(name)) {
+    warn(
+      'Invalid component name: "' + name + '". Component names ' +
+      'can only contain alphanumeric characters and the hyphen, ' +
+      'and must start with a letter.'
+    )
+  }
+  const lower = name.toLowerCase()
+  if (isBuiltInTag(lower) || config.isReservedTag(lower)) {
+    warn(
+      'Do not use built-in or reserved HTML elements as component ' +
+      'id: ' + name
+    )
   }
 }