Resolve nested entities

README.md

@@ -41,7 +41,7 @@ var bemjson = {
 
 var jsxTree = bemjsonToJSX.process(bemjson);
 
-console.log(jsxTree.JSX));
+console.log(jsxTree.JSX);
 // → "<Button2 theme={'normal'} size={'m'} text={'hello world'}/>"
 ```
 

lib/index.js

@@ -20,6 +20,8 @@ function JSXNode(tag, props, children) {
 var propsToStr = props => Object.keys(props).reduce((acc, k) => {
     if (typeof props[k] === 'string') {
         return acc + ` ${k}=${valToStr(props[k])}`
+    } else if (props[k] instanceof JSXNode) {
+        return acc + ` ${k}={${render(props[k])}}`
     } else {
         return acc + ` ${k}={${valToStr(props[k])}}`
     }
@@ -59,6 +61,26 @@ Transformer.prototype.process = function(bemjson) {
     var root = nodes[0];
 
     var node;
+
+    var setJsx = function(json) {
+        var jsx = new JSXNode();
+        var _blockName = json.block || node.blockName;
+
+        if (typeof json === 'string') {
+            jsx.isText = true;
+            jsx.simpleText = json;
+        }
+
+        if (json.tag) {
+            jsx.tag = json.tag;
+        } else if (json.block || json.elem) {
+            jsx.bemEntity = new BemEntity({ block: _blockName, elem: json.elem });
+            jsx.tag = this.bemNaming.stringify(jsx.bemEntity);
+        }
+
+        return jsx;
+    }.bind(this);
+
     while((node = nodes.shift())) {
         var json = node.json, i;
 
@@ -68,19 +90,22 @@ Transformer.prototype.process = function(bemjson) {
             }
         } else {
             var res = undefined;
-            var jsx = new JSXNode();
             var blockName = json.block || node.blockName;
 
-            if (typeof json === 'string') {
-                jsx.isText = true;
-                jsx.simpleText = json;
-            }
+            var jsx = setJsx(json);
+
+            for (key in json) {
+                if (key !== 'mix' && typeof Object(json[key]).block === 'string') {
+                    var nestedJSX = setJsx(json[key]);
+
+                    for (i = 0; i < this.plugins.length; i++) {
+                        var plugin = this.plugins[i];
 
-            if (json.tag) {
-                jsx.tag = json.tag;
-            } else if (json.block || json.elem) {
-                jsx.bemEntity = new BemEntity({ block: blockName, elem: json.elem });
-                jsx.tag = this.bemNaming.stringify(jsx.bemEntity);
+                        plugin(nestedJSX, Object.assign({ block: json[key].block }, json[key]));
+                    }
+
+                    json[key] = nestedJSX;
+                }
             }
 
             for (i = 0; i < this.plugins.length; i++) {

test.js

@@ -0,0 +1,13 @@
+var btj = require('./lib/index');
+
+var bemjson = {
+    block: 'button2',
+    mods: { theme: 'normal', size: 'm' },
+    text: 'hello world',
+    icon: {block: 'test', mods: {'test-mod': 'yes'}}
+};
+
+var jsxTree = btj().process(bemjson);
+
+console.log(jsxTree.JSX);
+// → "<Button2 theme={'normal'} size={'m'} text={'hello world'}/>"