Update HTML to DOM parser to detect environment (browser vs node)

remarkablemark · remarkablemark · commit e7ee263e9a4a · 2016-08-22T16:14:09.000-04:00
- In node/server, use `htmlparser2` and `domhandler` - In browser/client, use the DOM API that's already provided - Use `DOMParser` but fallback to `innerHTML` - https://developer.mozilla.org/en-US/docs/Web/API/DOMParser - Making this distinction will allow the build to be optimized
diff --git a/lib/html-to-dom.js b/lib/html-to-dom.js
@@ -1,26 +1,53 @@
 'use strict';
 
 /**
- * Module dependencies.
+ * Detect environment.
  */
-var Parser = require('htmlparser2/lib/Parser');
-var DomHandler = require('domhandler');
 
-/**
- * Parse HTML string into DOM nodes.
- * This is the same method as `require('htmlparser2').parseDOM`.
- *
- * @param  {String} html    - The HTML.
- * @param  {Object} options - The parser options.
- * @return {Object}         - The DOM nodes.
- */
-function parseDOM(html, options) {
-    var handler = new DomHandler(options);
-    new Parser(handler, options).end(html);
-    return handler.dom;
-}
+/** Browser. */
+if (typeof window !== 'undefined' && this === window) {
+    var formatDOM = require('./html-to-dom-client');
 
-/**
- * Export HTML to DOM helper.
- */
-module.exports = parseDOM;
+    /**
+     * Parse HTML string to DOM nodes.
+     * This uses the browser DOM API.
+     *
+     * @param  {String} html - The HTML.
+     * @return {Object}      - The DOM nodes.
+     */
+    module.exports = function(html) {
+        // `DOMParser` can parse full HTML
+        // https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
+        if (window.DOMParser) {
+            var parser = new window.DOMParser();
+            var doc = parser.parseFromString(html, 'text/html');
+            return formatDOM(doc.childNodes);
+
+        // otherwise, use `innerHTML`
+        // but this will strip out tags like <html> and <body>
+        } else {
+            var root = document.createElement('div');
+            root.innerHTML = html;
+            return formatDOM(root.childNodes);
+        }
+    };
+
+/** Node. */
+} else {
+    var Parser = require('htmlparser2/lib/Parser');
+    var DomHandler = require('domhandler');
+
+    /**
+     * Parse HTML string to DOM nodes.
+     * This is the same method as `require('htmlparser2').parseDOM`.
+     *
+     * @param  {String} html    - The HTML.
+     * @param  {Object} options - The parser options.
+     * @return {Object}         - The DOM nodes.
+     */
+    module.exports = function(html, options) {
+        var handler = new DomHandler(options);
+        new Parser(handler, options).end(html);
+        return handler.dom;
+    };
+}
