🤔 Rethink HTML processing

- switches to a different mini-parser and executes different actions based on different tag fragments

Author: ticky

package.json

@@ -32,6 +32,7 @@
     "doc-chomp": "1.1.0",
     "front-matter": "^2.1.0",
     "highlight.js": "^9.6.0",
+    "html-void-elements": "^1.0.1",
     "htmltojsx": "https://github.com/reactjs/react-magic#e63dabeefb87d4ce1e74ac2ddb73b0164c344219",
     "jsesc": "^2.2.0",
     "loader-utils": "^0.2.16",

src/html-to-jsx.js

@@ -1,38 +1,6 @@
 import HTMLtoJSX from 'htmltojsx';
 
-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);

src/index.js

@@ -1,13 +1,18 @@
+import anyBase from 'any-base';
 import frontMatter from 'front-matter';
 import { getLoaderConfig } from 'loader-utils';
+import hash from 'sha.js';
 import HighlightJS from 'highlight.js';
 import MarkdownIt from 'markdown-it';
 import { DOM as ReactDOM } from 'react';
 
+import VOID_ELEMENTS from 'html-void-elements';
+
 import formatImport from './formatters/import';
 import formatModule from './formatters/module';
 import formatStatic from './formatters/static';
 import htmlToJsx from './html-to-jsx';
+import processHtml from './process-html';
 import StringReplacementCache from './string-replacement-cache';
 
 const DEFAULT_CONFIGURATION = {
@@ -16,6 +21,14 @@ const DEFAULT_CONFIGURATION = {
   markdownItPlugins: []
 };
 
+const lowercaseHash = (content) => (
+  anyBase(anyBase.HEX, 'abcdefghijklmnopqrstuvwxyz')(
+    hash('sha256')
+      .update(content, 'utf-8')
+      .digest('hex')
+  )
+);
+
 module.exports = function(source) {
   // This loader is deterministic and will return the same thing for the same inputs!
   this.cacheable && this.cacheable();
@@ -113,7 +126,34 @@ module.exports = function(source) {
       );
   }
 
-  const html = renderer.render(markdownSansAssignments);
+  const tagCache = {};
+
+  const html = processHtml(
+    renderer.render(markdownSansAssignments),
+    (match, tagFragment, tag) => {
+      switch (tagFragment) {
+        case '<':
+          // tag names which won't survive browser serialization, or those with
+          // special characters, need to be cached
+          if (tag.tagName.indexOf('.') !== -1 || tag.tagName.toLowerCase() !== tag.tagName) {
+            const nameHash = lowercaseHash(tag.tagName);
+            tagCache[nameHash] = tag.tagName;
+            tag.tagName = nameHash;
+          }
+          return `<${tag.tagName}`;
+        case '/>':
+          return (
+            VOID_ELEMENTS.indexOf(tagCache[tag.tagName] || tag.tagName) === -1
+              ? `></${tag.tagName}>`
+              : match
+          );
+        case '</':
+          return `</${tag.tagName}`;
+      }
+
+      return match;
+    }
+  );
 
   let jsx = htmlToJsx(
     html || '<!-- no input given -->',
@@ -123,17 +163,28 @@ module.exports = function(source) {
   // Unload caches so we've got our values back!
   jsx = stylePropertyCache.unload(assignmentExpressionCache.unload(jsx));
 
-  // Pass through `elementProps` to tags React knows about (the others are already under our control)
-  if (config.passElementProps) {
-    jsx = jsx.replace(
-      /<([^\/][^\s>]*)([^/>\s]*)/g,
-      (match, tagName) => {
-        return (tagName in ReactDOM)
-          ? `${match} {...elementProps['${tagName}']}`
-          : match;
+  jsx = processHtml(
+    jsx,
+    (match, tagFragment, { tagName, state }) => {
+      const correctedTagName = tagCache[tagName] || tagName;
+
+      switch (tagFragment) {
+        case '<':
+          // Pass through `elementProps` to tags React knows about (the others are already under our control)
+          if (config.passElementProps && correctedTagName in ReactDOM) {
+            return `<${correctedTagName} {...elementProps['${correctedTagName}']}`;
+          }
+          return `<${correctedTagName}`;
+        case '/>':
+        case '>':
+          return match;
+        case '</':
+          return `</${correctedTagName}`;
       }
-    );
-  }
+
+      return match;
+    }
+  ).replace(/\s\s\{/, ' {'); // Remove double spaces before spread statements;
 
   return formatModule(
     config,

src/process-html.js

@@ -0,0 +1,52 @@
+export default (html, callback) => {
+  if (!(callback instanceof Function)) {
+    return html;
+  }
+
+  const tree = [];
+
+  return html.replace(
+    /(<\/?([a-z][a-z0-9\.\-]*)|\/>|>)/gi,
+    (match, tagFragment, tagName) => {
+      // If we have a tag name, this is an opening tag
+      if (tagName) {
+        tagFragment = tagFragment.replace(tagName, '');
+      }
+
+      let thisTag;
+      const lastTag = tree[tree.length - 1] || {};
+      let shouldPopTree = false;
+
+      switch (tagFragment) {
+        case '<':
+          thisTag = { tagName, state: 'open' };
+          tree.push(thisTag);
+          break;
+
+        case '/>':
+          shouldPopTree = true;
+          break;
+
+        case '>':
+          if (lastTag.state === 'open') {
+            lastTag.state = 'content';
+          } else if (lastTag.state === 'closing') {
+            shouldPopTree = true;
+          }
+          break;
+
+        case '</':
+          lastTag.state = 'closing';
+          break;
+      }
+
+      const returnValue = callback(match, tagFragment, thisTag || lastTag, tree);
+
+      if (shouldPopTree) {
+        tree.pop();
+      }
+
+      return returnValue;
+    }
+  );
+};

yarn.lock

@@ -1830,7 +1830,7 @@ faye-websocket@~0.11.0:
 
 fb-watchman@^1.8.0, fb-watchman@^1.9.0:
   version "1.9.0"
-  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-1.9.0.tgz#6f268f1f347a6b3c875d1e89da7e1ed79adfc0ec"
+  resolved "http://registry.npmjs.org/fb-watchman/-/fb-watchman-1.9.0.tgz#6f268f1f347a6b3c875d1e89da7e1ed79adfc0ec"
   dependencies:
     bser "^1.0.2"
 
@@ -2177,6 +2177,10 @@ html-encoding-sniffer@^1.0.1:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-void-elements@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.1.tgz#f929bea267a19e3535950502ca12c159f1b559af"
+
 "htmlparser2@>= 3.7.3 < 4.0.0":
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"