warn possible camelCase props

Author: yyx990803

src/compiler/compile-props.js

@@ -115,11 +115,28 @@ export function compileProps (el, propOptions) {
     } else if ((value = getAttr(el, attr)) !== null) {
       // has literal binding!
       prop.raw = value
-    } else if (options.required) {
-      // warn missing required
-      process.env.NODE_ENV !== 'production' && warn(
-        'Missing required prop: ' + name
+    } else if (process.env.NODE_ENV !== 'production') {
+      // check possible camelCase prop usage
+      var lowerCaseName = path.toLowerCase()
+      value = /[A-Z\-]/.test(name) && (
+        el.getAttribute(lowerCaseName) ||
+        el.getAttribute(':' + lowerCaseName) ||
+        el.getAttribute('v-bind:' + lowerCaseName) ||
+        el.getAttribute(':' + lowerCaseName + '.once') ||
+        el.getAttribute('v-bind:' + lowerCaseName + '.once') ||
+        el.getAttribute(':' + lowerCaseName + '.sync') ||
+        el.getAttribute('v-bind:' + lowerCaseName + '.sync')
       )
+      if (value) {
+        warn(
+          'Possible usage error for prop `' + lowerCaseName + '` - ' +
+          'did you mean `' + attr + '`? HTML is case-insensitive, remember to use ' +
+          'kebab-case for props in templates.'
+        )
+      } else if (options.required) {
+        // warn missing required
+        warn('Missing required prop: ' + name)
+      }
     }
     // push prop
     props.push(prop)

src/util/component.js

@@ -53,7 +53,7 @@ export function checkComponentAttr (el, options) {
           warn(
             'Unknown custom element: <' + tag + '> - ' +
             'did you mean <' + expectedTag + '>? ' +
-            'HTML is case-insensitive, remember to use kebab-case in templates!'
+            'HTML is case-insensitive, remember to use kebab-case in templates.'
           )
         } else if (isUnknownElement(el, tag)) {
           warn(

test/unit/specs/directives/internal/component_spec.js

@@ -530,4 +530,15 @@ describe('Component', function () {
       })
     }).not.toThrow()
   })
+
+  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)
+  })
 })

test/unit/specs/directives/internal/prop_spec.js

@@ -665,4 +665,20 @@ describe('prop', function () {
     expect(vm.$refs.child.propA).toBe(true)
     expect(vm.$refs.child.propB).toBe(false)
   })
+
+  it('detect possible camelCase prop usage', function () {
+    new Vue({
+      el: el,
+      template: '<comp propA="true" :propB="true" v-bind:propC.sync="true"></comp>',
+      components: {
+        comp: {
+          props: ['propA', 'propB', 'prop-c']
+        }
+      }
+    })
+    expect(getWarnCount()).toBe(3)
+    expect(hasWarned('did you mean `prop-a`')).toBe(true)
+    expect(hasWarned('did you mean `prop-b`')).toBe(true)
+    expect(hasWarned('did you mean `prop-c`')).toBe(true)
+  })
 })

test/unit/specs/misc_spec.js

@@ -473,15 +473,4 @@ 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)
-  })
 })