Warn when not passing props in kebab-case (vuejs#5161)

CodinCat · yyx990803 · commit 025e76312409 · 2017-03-13T15:41:26.000+08:00
* Warn when not passing props in kebab-case

* Move keyInLowerCase to dev only block
diff --git a/src/core/vdom/create-component.js b/src/core/vdom/create-component.js
@@ -286,6 +286,18 @@ function extractProps (data: VNodeData, Ctor: Class<Component>): ?Object {
   if (attrs || props || domProps) {
     for (const key in propOptions) {
       const altKey = hyphenate(key)
+      if (process.env.NODE_ENV !== 'production') {
+        const keyInLowerCase = key.toLowerCase()
+        if (
+          key !== keyInLowerCase &&
+          attrs && attrs.hasOwnProperty(keyInLowerCase)
+        ) {
+          warn(
+            `HTML attributes are case-insensitive. camelCased prop names need ` +
+            `to use their kebab-case equivalents. ${key} should be ${altKey}.`
+          )
+        }
+      }
       checkProp(res, props, key, altKey, true) ||
       checkProp(res, attrs, key, altKey) ||
       checkProp(res, domProps, key, altKey)
diff --git a/test/unit/features/component/component.spec.js b/test/unit/features/component/component.spec.js
@@ -258,6 +258,25 @@ describe('Component', () => {
     expect(vm.$el.outerHTML).toBe('<ul><li>1</li><li>2</li></ul>')
   })
 
+  it('should warn when not passing props in kebab-case', () => {
+    new Vue({
+      data: {
+        list: [{ a: 1 }, { a: 2 }]
+      },
+      template: '<test :somecollection="list"></test>',
+      components: {
+        test: {
+          template: '<ul><li v-for="item in someCollection">{{item.a}}</li></ul>',
+          props: ['someCollection']
+        }
+      }
+    }).$mount()
+    expect(
+      'HTML attributes are case-insensitive. camelCased prop names need ' +
+      'to use their kebab-case equivalents. someCollection should be some-collection.'
+    ).toHaveBeenWarned()
+  })
+
   it('not found component should not throw', () => {
     expect(function () {
       new Vue({
