From faa6b1adf25cdd64bef5df4f0870a393b80e10f5 Mon Sep 17 00:00:00 2001
From: avim <avim@wix.com>
Date: Thu, 26 Feb 2015 10:48:44 +0200
Subject: [PATCH] added better rt-props support use assign instead of merge and
 merge correctly style and className

---
 src/reactTemplates.js         | 15 +++++++++++++--
 test/data/props-class.rt      |  1 +
 test/data/props-class.rt.html |  1 +
 test/data/props.rt.html       |  2 +-
 test/src/test.js              |  2 +-
 5 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 test/data/props-class.rt
 create mode 100644 test/data/props-class.rt.html

diff --git a/src/reactTemplates.js b/src/reactTemplates.js
index 57445b3..ebac308 100644
--- a/src/reactTemplates.js
+++ b/src/reactTemplates.js
@@ -13,7 +13,9 @@ var RTCodeError = rtError.RTCodeError;
 
 var repeatTemplate = _.template('_.map(<%= collection %>,<%= repeatFunction %>.bind(<%= repeatBinds %>))');
 var ifTemplate = _.template('((<%= condition %>)?(<%= body %>):null)');
-var propsTemplate = _.template('_.merge({}, <%= generatedProps %>, <%= rtProps %>)');
+var propsTemplateSimple = _.template('_.assign({}, <%= generatedProps %>, <%= rtProps %>)');
+var propsTemplate = _.template('mergeProps( <%= generatedProps %>, <%= rtProps %>)');
+var propsMergeFunction = 'function mergeProps(inline,external) {\n var res = _.assign({},inline,external)\nif (inline.hasOwnProperty(\'style\')) {\n res.style = _.defaults(res.style, inline.style);\n}\n if (inline.hasOwnProperty(\'className\') && external.hasOwnProperty(\'className\')) {\n res.className = external.className + \' \' + inline.className;\n} return res;\n}\n';
 var classSetTemplate = _.template('React.addons.classSet(<%= classSet %>)');
 var simpleTagTemplate = _.template('<%= name %>(<%= props %><%= children %>)');
 var tagTemplate = _.template('<%= name %>.apply(this,_.flatten([<%= props %><%= children %>]))');
@@ -307,7 +309,16 @@ function convertHtmlToReact(node, context) {
         }
         data.props = generateProps(node, context);
         if (node.attribs[propsProp]) {
-            data.props = propsTemplate({generatedProps: data.props, rtProps: node.attribs[propsProp]});
+            if (data.props === '{}') {
+                data.props = node.attribs[propsProp];
+            } else if (!node.attribs.style && !node.attribs.class) {
+                data.props = propsTemplateSimple({generatedProps: data.props, rtProps: node.attribs[propsProp]});
+            } else {
+                data.props = propsTemplate({generatedProps: data.props, rtProps: node.attribs[propsProp]});
+                if (!_.contains(context.injectedFunctions,propsMergeFunction)) {
+                    context.injectedFunctions.push(propsMergeFunction);
+                }
+            }
         }
         if (node.attribs[ifProp]) {
             data.condition = node.attribs[ifProp].trim();
diff --git a/test/data/props-class.rt b/test/data/props-class.rt
new file mode 100644
index 0000000..7bbb78e
--- /dev/null
+++ b/test/data/props-class.rt
@@ -0,0 +1 @@
+<input style="height:10px;width:3px;" rt-props="{style:{width:'5px'}, type:'text', className: 'clsB'}" class="clsA"/>
diff --git a/test/data/props-class.rt.html b/test/data/props-class.rt.html
new file mode 100644
index 0000000..4d711b4
--- /dev/null
+++ b/test/data/props-class.rt.html
@@ -0,0 +1 @@
+<input style="width:5px;height:10px;" class="clsB clsA" type="text">
\ No newline at end of file
diff --git a/test/data/props.rt.html b/test/data/props.rt.html
index 5aa998c..16f173c 100644
--- a/test/data/props.rt.html
+++ b/test/data/props.rt.html
@@ -1 +1 @@
-<input alt="test rt-props" style="height:10px;width:5px;" type="text" value="test"/>
\ No newline at end of file
+<input alt="test rt-props" style="width:5px;height:10px;" type="text" value="test">
\ No newline at end of file
diff --git a/test/src/test.js b/test/src/test.js
index 06532a6..f18bbe4 100644
--- a/test/src/test.js
+++ b/test/src/test.js
@@ -160,7 +160,7 @@ function normalizeHtml(html) {
 }
 
 test('html tests', function (t) {
-    var files = ['scope.rt', 'lambda.rt', 'eval.rt', 'props.rt', 'custom-element.rt', 'style.rt', 'concat.rt', 'js-in-attr.rt'];
+    var files = ['scope.rt', 'lambda.rt', 'eval.rt', 'props.rt', 'custom-element.rt', 'style.rt', 'concat.rt', 'js-in-attr.rt', 'props-class.rt'];
     t.plan(files.length);
 
     files.forEach(check);