fix wix-incubator#191, allow use of 'class' in custom-elements

nippur72 · Sep 6, 2016 · aeb330e · aeb330e
1 parent 66d18d0
commit aeb330e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/reactTemplates.js b/src/reactTemplates.js
@@ -251,6 +251,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}}`;
 }
@@ -303,15 +309,18 @@ function convertTagNameToConstructor(tagName, context) {
     if (context.options.native) {
         const targetSupport = reactNativeSupport[context.options.nativeTargetVersion];
         return _.includes(targetSupport.components, tagName) ? `${targetSupport.reactNative.name}.${tagName}` : tagName;
-    }
-    let isHtmlTag = _.includes(reactDOMSupport[context.options.targetVersion], tagName);
-    if (reactSupport.shouldUseCreateElement(context)) {
-        isHtmlTag = isHtmlTag || tagName.match(/^\w+(-\w+)+$/);
+    }     
+    const isHtmlTag = _.includes(reactDOMSupport[context.options.targetVersion], tagName) || isCustomElement(tagName); 
+    if (reactSupport.shouldUseCreateElement(context)) {        
         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
@@ -1,4 +1,4 @@
 <div>
     <custom-element></custom-element>
-    <my-custom-element></my-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
@@ -1 +1 @@
-<div><custom-element></custom-element><my-custom-element></my-custom-element></div>
+<div><custom-element></custom-element><my-custom-element class="a b c" d="2"></my-custom-element></div>