Add mod-name to modName (camelCase) plugin

bem-sdk-archive · May 3, 2017 · 76eff0e · 76eff0e
1 parent d4bc573
commit 76eff0e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/lib/plugins.js b/lib/plugins.js
@@ -1,3 +1,4 @@
+var camelCase = require('camel-case');
 var helpers = require('./helpers');
 var styleToObj = helpers.styleToObj;
 var valToStr = helpers.valToStr;
@@ -6,6 +7,13 @@ module.exports.copyMods = () => function copyMods(jsx, bemjson) {
     bemjson.mods && Object.assign(jsx.props, bemjson.mods);
 };
 
+module.exports.camelCaseProps = () => function camelCaseProps(jsx) {
+    jsx.props = Object.keys(jsx.props).reduce((acc, propKey) => {
+        acc[camelCase(propKey)] = jsx.props[propKey];
+        return acc;
+    }, {});
+};
+
 module.exports.copyCustomFields = () => function copyCustomFields(jsx, bemjson) {
     var blackList = ['content', 'block', 'elem', 'mods', 'tag', 'js'];
 
@@ -39,6 +47,7 @@ module.exports.keepWhiteSpaces = () => function keepWhiteSpaces(jsx) {
 module.exports.defaultPlugins = [
     module.exports.keepWhiteSpaces,
     module.exports.copyMods,
+    module.exports.camelCaseProps,
     module.exports.copyCustomFields,
     module.exports.stylePropToObj
 ];

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@bem/entity-name": "github:bem-sdk/bem-entity-name",
     "@bem/naming": "^2.0.0-6",
+    "camel-case": "^3.0.0",
     "pascal-case": "^2.0.1"
   }
 }
diff --git a/test/plugins.js b/test/plugins.js
@@ -28,6 +28,32 @@ describe('pluginis', () => {
         });
     });
 
+    describe('camelCaseProps', () => {
+        it('should transform mod-name to modName', () => {
+            var res = T().process({ block: 'button2', mods: { 'has-clear': 'yes' } });
+
+            expect(res.JSX).to.equal(
+                `<Button2 hasClear='yes'/>`
+            );
+        });
+
+        it('should transform several mod-names to modName', () => {
+            var res = T().process({ block: 'button2', mods: { 'has-clear': 'yes', 'has-tick': 'too' } });
+
+            expect(res.JSX).to.equal(
+                `<Button2 hasClear='yes' hasTick='too'/>`
+            );
+        });
+
+        it('should distinguish mod-name and modname', () => {
+            var res = T().process({ block: 'button2', mods: { 'has-clear': 'yes', 'hasclear': 'yes' } });
+
+            expect(res.JSX).to.equal(
+                `<Button2 hasClear='yes' hasclear='yes'/>`
+            );
+        });
+    });
+
     describe('stylePropToObj', () => {
         it('styleProp to obj', () => {
             var res = T().process({ block: 'button2', style: 'width:200px' });