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 @@
+
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 @@ -
+