fix: proper support for camelCase

vuejs · Aug 2, 2018 · a903610 · a903610
1 parent 6a43377
commit a903610
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/packages/babel-plugin-transform-vue-jsx/package.json b/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": [

diff --git a/packages/babel-plugin-transform-vue-jsx/src/index.js b/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-/
@@ -162,7 +163,7 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
       name = name.replace(directiveRE, '')
       prefix = 'directives'
     } else if (name.startsWith('v') && name.length >= 2 && name[1] >= 'A' && name[1] <= 'Z') {
-      name = name[1].toLowerCase() + name.substr(2)
+      name = kebabcase(name.substr(1))
       prefix = 'directives'
     }
     if (name.match(xlinkRE)) {

diff --git a/packages/babel-plugin-transform-vue-jsx/test/snapshot.js b/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 } vOther={ 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
   }]
 }));`,

diff --git a/packages/babel-plugin-transform-vue-jsx/yarn.lock b/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"