From 079f5da0d1d84d403baf6b83c35345e6b442f285 Mon Sep 17 00:00:00 2001
From: Antonino Porcino <nino.porcino@gmail.com>
Date: Tue, 6 Sep 2016 14:06:14 +0200
Subject: [PATCH] fix #191, allow use of 'class' in custom-elements

---
 src/reactTemplates.js            | 13 +++++++++++--
 test/data/custom-element.rt      |  1 +
 test/data/custom-element.rt.html |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/reactTemplates.js b/src/reactTemplates.js
index 5f8979e..3063740 100644
--- a/src/reactTemplates.js
+++ b/src/reactTemplates.js
@@ -199,6 +199,12 @@ function generateProps(node, context) {
     });
     _.assign(props, generateTemplateProps(node, context));
 
+    // map 'className' back into 'class' for custom elements
+    if (props[reactSupport.classNameProp] && isCustomElement(node.name)) {
+        props[classAttr] = props[reactSupport.classNameProp];
+        delete props[reactSupport.classNameProp];
+    }
+
     const propStr = _.map(props, (v, k) => `${JSON.stringify(k)} : ${v}`).join(',');
     return `{${propStr}}`;
 }
@@ -252,14 +258,17 @@ function convertTagNameToConstructor(tagName, context) {
         const targetSupport = reactNativeSupport[context.options.nativeTargetVersion];
         return _.includes(targetSupport.components, tagName) ? `${targetSupport.reactNative.name}.${tagName}` : tagName;
     }
-    let isHtmlTag = _.includes(reactDOMSupport[context.options.targetVersion], tagName);
+    const isHtmlTag = _.includes(reactDOMSupport[context.options.targetVersion], tagName) || isCustomElement(tagName);
     if (reactSupport.shouldUseCreateElement(context)) {
-        isHtmlTag = isHtmlTag || tagName.match(/^\w+(-\w+)$/);
         return isHtmlTag ? `'${tagName}'` : tagName;
     }
     return isHtmlTag ? `React.DOM.${tagName}` : tagName;
 }
 
+function isCustomElement(tagName) {
+    return tagName.match(/^\w+(-\w+)+$/);
+}
+
 /**
  * @param {string} html
  * @param options
diff --git a/test/data/custom-element.rt b/test/data/custom-element.rt
index dbeead7..90e1a8b 100644
--- a/test/data/custom-element.rt
+++ b/test/data/custom-element.rt
@@ -1,3 +1,4 @@
 <div>
     <custom-element></custom-element>
+    <my-custom-element class="a" className="b" rt-class="{c:1}" rt-props="{d:2}"></my-custom-element>
 </div>
diff --git a/test/data/custom-element.rt.html b/test/data/custom-element.rt.html
index b57a8c4..b37eed2 100644
--- a/test/data/custom-element.rt.html
+++ b/test/data/custom-element.rt.html
@@ -1 +1 @@
-<div><custom-element></custom-element></div>
+<div><custom-element></custom-element><my-custom-element class="a b c" d="2"></my-custom-element></div>