support camelCase props (close #1000)

Author: yyx990803

src/compiler/compile-props.js

@@ -29,22 +29,13 @@ module.exports = function compileProps (el, propOptions) {
     // interpreted as minus calculations by the parser
     // so we need to camelize the path here
     path = _.camelize(name.replace(dataAttrRE, ''))
-    if (/[A-Z]/.test(name)) {
-      _.warn(
-        'You seem to be using camelCase for a component prop, ' +
-        'but HTML doesn\'t differentiate between upper and ' +
-        'lower case. You should use hyphen-delimited ' +
-        'attribute names. For more info see ' +
-        'http://vuejs.org/api/options.html#props'
-      )
-    }
     if (!identRE.test(path)) {
       _.warn(
         'Invalid prop key: "' + name + '". Prop keys ' +
         'must be valid identifiers.'
       )
     }
-    value = el.getAttribute(name)
+    value = el.getAttribute(_.hyphenate(name))
     // create a prop descriptor
     prop = {
       name: name,

src/util/lang.js

@@ -72,26 +72,31 @@ exports.stripQuotes = function (str) {
 }
 
 /**
- * Replace helper
+ * Camelize a hyphen-delmited string.
  *
- * @param {String} _ - matched delimiter
- * @param {String} c - matched char
+ * @param {String} str
  * @return {String}
  */
+
+exports.camelize = function (str) {
+  return str.replace(/-(\w)/g, toUpper)
+}
+
 function toUpper (_, c) {
   return c ? c.toUpperCase() : ''
 }
 
 /**
- * Camelize a hyphen-delmited string.
+ * Hyphenate a camelCase string.
  *
  * @param {String} str
  * @return {String}
  */
 
-var camelRE = /-(\w)/g
-exports.camelize = function (str) {
-  return str.replace(camelRE, toUpper)
+exports.hyphenate = function (str) {
+  return str
+    .replace(/([a-z\d])([A-Z])/g, '$1-$2')
+    .toLowerCase()
 }
 
 /**

test/unit/specs/compiler/compile_spec.js

@@ -179,6 +179,7 @@ if (_.inBrowser) {
       el.setAttribute('onetime', '{{*a}}')
       el.setAttribute('twoway', '{{@a}}')
       el.setAttribute('with-filter', '{{a | filter}}')
+      el.setAttribute('camel-case', 'hi')
       el.setAttribute('boolean-literal', '{{true}}')
       el.setAttribute('boolean', '')
       compiler.compileAndLinkProps(vm, el, props)
@@ -227,12 +228,10 @@ if (_.inBrowser) {
       expect(vm._data.onetime).toBe('from parent: a')
       expect(vm.booleanLiteral).toBe('from parent: true')
       expect(vm._data.booleanLiteral).toBe('from parent: true')
-      expect(vm._data.camelCase).toBeUndefined()
+      expect(vm._data.camelCase).toBe('hi')
       expect(vm._data.defaultValue).toBe(123)
       expect(vm._data.boolean).toBe(true)
       expect(vm._data.booleanAbsent).toBe(false)
-      // camelCase should've warn
-      expect(hasWarned(_, 'using camelCase')).toBe(true)
     })
 
     it('props on root instance', function () {

test/unit/specs/util/lang_spec.js

@@ -29,6 +29,12 @@ describe('Util - Language Enhancement', function () {
     expect(_.camelize('some-long-name')).toBe('someLongName')
   })
 
+  it('hyphenate', function () {
+    expect(_.hyphenate('whatsUp')).toBe('whats-up')
+    expect(_.hyphenate('a1BfC')).toBe('a1-bf-c')
+    expect(_.hyphenate('already-With-Hyphen')).toBe('already-with-hyphen')
+  })
+
   it('classify', function () {
     expect(_.classify('abc')).toBe('Abc')
     expect(_.classify('some-long-name')).toBe('SomeLongName')