Merge pull request #5 from nickmessing/fix/camelCase-directives

fix: Support camelCase directives

Author: nickmessing

packages/babel-plugin-transform-vue-jsx/package.json

@@ -36,7 +36,8 @@
   "dependencies": {
     "@babel/helper-module-imports": "^7.0.0-beta.49",
     "@babel/plugin-syntax-jsx": "^7.0.0-beta.49",
-    "@vuejs/babel-helper-vue-jsx-merge-props": "^0.1.0"
+    "@vuejs/babel-helper-vue-jsx-merge-props": "^0.1.0",
+    "lodash.kebabcase": "^4.1.1"
   },
   "nyc": {
     "exclude": [

packages/babel-plugin-transform-vue-jsx/src/index.js

@@ -1,5 +1,6 @@
 import syntaxJsx from '@babel/plugin-syntax-jsx'
 import { addDefault } from '@babel/helper-module-imports'
+import kebabcase from 'lodash.kebabcase'
 
 const xlinkRE = /^xlink([A-Z])/
 const directiveRE = /^v-/
@@ -161,6 +162,9 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
     if (name.startsWith(`v-`)) {
       name = name.replace(directiveRE, '')
       prefix = 'directives'
+    } else if (name.startsWith('v') && name.length >= 2 && name[1] >= 'A' && name[1] <= 'Z') {
+      name = kebabcase(name.substr(1))
+      prefix = 'directives'
     }
     if (name.match(xlinkRE)) {
       name = name.replace(xlinkRE, (_, firstCharacter) => {

packages/babel-plugin-transform-vue-jsx/test/functional.js

@@ -234,7 +234,7 @@ test('Spread (mixed)', t => {
 test('Custom directives', t => {
   const wrapper = shallow({
     render(h) {
-      return <div v-test={123} v-other={234} />
+      return <div v-test={123} vOther={234} />
     },
   })
 

packages/babel-plugin-transform-vue-jsx/test/snapshot.js

@@ -215,13 +215,13 @@ render(h => h("div", _mergeJSXProps([{}, spread, {
   },
   {
     name: 'Directives',
-    from: `render(h => <div v-test={ 123 } v-other={ 234 } />)`,
+    from: `render(h => <div v-test={ 123 } vOtherStuff={ 234 } />)`,
     to: `render(h => h("div", {
   "directives": [{
     name: "test",
     value: 123
   }, {
-    name: "other",
+    name: "other-stuff",
     value: 234
   }]
 }));`,

packages/babel-plugin-transform-vue-jsx/yarn.lock

@@ -2929,6 +2929,10 @@ lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
 
+lodash.kebabcase@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
+
 lodash.merge@^4.6.0:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"