improve camelCase prop warning message

yyx990803 · yyx990803 · commit 041683953aa1 · 2017-03-13T15:54:36.000+08:00
diff --git a/src/core/util/debug.js b/src/core/util/debug.js
@@ -32,9 +32,11 @@ if (process.env.NODE_ENV !== 'production') {
     if (vm.$root === vm) {
       return '<Root>'
     }
-    let name = vm._isVue
-      ? vm.$options.name || vm.$options._componentTag
-      : vm.name
+    let name = typeof vm === 'function' && vm.options
+      ? vm.options.name
+      : vm._isVue
+        ? vm.$options.name || vm.$options._componentTag
+        : vm.name
 
     const file = vm._isVue && vm.$options.__file
     if (!name && file) {
diff --git a/src/core/vdom/create-component.js b/src/core/vdom/create-component.js
@@ -10,7 +10,8 @@ import {
   isObject,
   hasOwn,
   hyphenate,
-  validateProp
+  validateProp,
+  formatComponentName
 } from '../util/index'
 
 import {
@@ -293,8 +294,11 @@ function extractProps (data: VNodeData, Ctor: Class<Component>): ?Object {
           attrs && attrs.hasOwnProperty(keyInLowerCase)
         ) {
           warn(
-            `HTML attributes are case-insensitive. camelCased prop names need ` +
-            `to use their kebab-case equivalents. ${key} should be ${altKey}.`
+            `Prop "${keyInLowerCase}" is not declared in component ` +
+            `${formatComponentName(Ctor)}. Note that HTML attributes are ` +
+            `case-insensitive and camelCased props need to use their kebab-case ` +
+            `equivalents when using in-DOM templates. You should probably use ` +
+            `"${altKey}" instead of "${key}".`
           )
         }
       }
diff --git a/test/unit/features/component/component.spec.js b/test/unit/features/component/component.spec.js
@@ -272,8 +272,7 @@ describe('Component', () => {
       }
     }).$mount()
     expect(
-      'HTML attributes are case-insensitive. camelCased prop names need ' +
-      'to use their kebab-case equivalents. someCollection should be some-collection.'
+      'You should probably use "some-collection" instead of "someCollection".'
     ).toHaveBeenWarned()
   })
 

Original file line number	Diff line number	Diff line change
`@@ -272,8 +272,7 @@ describe('Component', () => {`
`272`	`272`	`}`
`273`	`273`	`}).$mount()`
`274`	`274`	`expect(`
`275`		`- 'HTML attributes are case-insensitive. camelCased prop names need ' +`
`276`		`- 'to use their kebab-case equivalents. someCollection should be some-collection.'`
	`275`	`+ 'You should probably use "some-collection" instead of "someCollection".'`
`277`	`276`	`).toHaveBeenWarned()`
`278`	`277`	`})`
`279`	`278`