🚪 Improve handling of self-closing tags

Author: ticky

src/html-to-jsx.js

@@ -1,6 +1,38 @@
 import HTMLtoJSX from 'htmltojsx';
 
-export default function htmlToJsx(html, indent) {
+const prepareHtml = (html) => {
+  const tree = [];
+
+  return html.replace(
+    /(<([a-z\.]+)|\/>|<\/|>)/gi,
+    (match, tagFragment, tagName) => {
+      // If we have a tag name, this is an opening tag
+      if (tagName) {
+        tagFragment = tagFragment[0];
+      }
+
+      switch (tagFragment) {
+        case "<":
+          tree.push(tagName);
+          break;
+        case "/>":
+          match = `></${tree.pop()}>`;
+          break;
+        case ">":
+          break;
+        case "</":
+          tree.pop();
+          break;
+      }
+
+      return match;
+    }
+  );
+};
+
+export default (html, indent) => {
+  html = prepareHtml(html);
+
   const jsxConverter = new HTMLtoJSX({ createClass: false });
 
   let jsx = jsxConverter.convert(html);
@@ -16,4 +48,4 @@ export default function htmlToJsx(html, indent) {
   return jsx
     .replace(/\n\s{8}/g, `\n${indent}`) // Indent for pretty inspector output 🎉
     .replace(/\n\s*$/g, '');            // Remove the trailing blank line
-}
+};