From cfeaea538cba724d143d39ef5c4b1603518ee62e Mon Sep 17 00:00:00 2001 From: Mark Date: Tue, 23 Aug 2016 21:18:01 -0400 Subject: [PATCH] Refactor HTML to DOM modules and environment detection logic Move the client/server environment detection logic to the entry file. Rename `lib/html-to-dom.js` to `lib/html-to-dom-server.js` and move the client-side parsing logic to `lib/html-to-dom-client.js`. `lib/html-to-dom-server.js` will only contain the server-side logic. Fix and update the tests. --- index.js | 24 +++++++++++------ lib/html-to-dom-client.js | 30 +++++++++++++++++++-- lib/html-to-dom-server.js | 26 ++++++++++++++++++ lib/html-to-dom.js | 53 ------------------------------------- test/attributes-to-props.js | 2 +- test/dom-to-react.js | 12 ++++----- test/html-to-dom.js | 21 ++++++++------- 7 files changed, 88 insertions(+), 80 deletions(-) create mode 100644 lib/html-to-dom-server.js delete mode 100644 lib/html-to-dom.js diff --git a/index.js b/index.js index 40241124..5b1fe6fd 100644 --- a/index.js +++ b/index.js @@ -3,8 +3,21 @@ /** * Module dependencies. */ -var htmlToDOM = require('./lib/html-to-dom'); var domToReact = require('./lib/dom-to-react'); +var htmlToDOM; + +/** + * Detect environment. + */ + +/** Client (Browser). */ +if (typeof window !== 'undefined' && this === window) { + htmlToDOM = require('./html-to-dom-client'); + +/** Server (Node). */ +} else { + htmlToDOM = require('./lib/html-to-dom-server'); +} /** * Convert HTML to React. @@ -14,11 +27,6 @@ var domToReact = require('./lib/dom-to-react'); * @param {Function} [options.replace] - The replace method. * @return {ReactElement|Array} */ -function htmlToReact(html, options) { +module.exports = function(html, options) { return domToReact(htmlToDOM(html), options); -} - -/** - * Export HTML to React parser. - */ -module.exports = htmlToReact; +}; diff --git a/lib/html-to-dom-client.js b/lib/html-to-dom-client.js index f6ed615d..b5abd8d3 100644 --- a/lib/html-to-dom-client.js +++ b/lib/html-to-dom-client.js @@ -95,6 +95,32 @@ function formatDOM(nodes, parentNode) { } /** - * Export HTML to DOM client helper. + * Parse HTML string to DOM nodes. + * This uses the browser DOM API. + * + * @param {String} html - The HTML. + * @return {Object} - The DOM nodes. + */ +function htmlToDOMClient(html) { + var root; + + // `DOMParser` can parse full HTML + // https://developer.mozilla.org/en-US/docs/Web/API/DOMParser + if (window.DOMParser) { + var parser = new window.DOMParser(); + root = parser.parseFromString(html, 'text/html'); + + // otherwise, use `innerHTML` + // but this will strip out tags like and + } else { + root = document.createElement('div'); + root.innerHTML = html; + } + + return formatDOM(root.childNodes); +} + +/** + * Export HTML to DOM parser (client). */ -module.exports = formatDOM; +module.exports = htmlToDOMClient; diff --git a/lib/html-to-dom-server.js b/lib/html-to-dom-server.js new file mode 100644 index 00000000..7b4061b2 --- /dev/null +++ b/lib/html-to-dom-server.js @@ -0,0 +1,26 @@ +'use strict'; + +/** + * Module dependencies. + */ +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. + */ +function htmlToDOMServer(html, options) { + var handler = new DomHandler(options); + new Parser(handler, options).end(html); + return handler.dom; +} + +/** + * Export HTML to DOM parser (server). + */ +module.exports = htmlToDOMServer; diff --git a/lib/html-to-dom.js b/lib/html-to-dom.js deleted file mode 100644 index f10ac582..00000000 --- a/lib/html-to-dom.js +++ /dev/null @@ -1,53 +0,0 @@ -'use strict'; - -/** - * Detect environment. - */ - -/** Browser. */ -if (typeof window !== 'undefined' && this === window) { - var formatDOM = require('./html-to-dom-client'); - - /** - * 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 and - } 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; - }; -} diff --git a/test/attributes-to-props.js b/test/attributes-to-props.js index a24e43ad..3aa34340 100644 --- a/test/attributes-to-props.js +++ b/test/attributes-to-props.js @@ -26,7 +26,7 @@ describe('attributes to props helper', function() { { className: 'ic', htmlFor: 'tran', - httpEquiv: 'refresh', + httpEquiv: 'refresh' } ); }); diff --git a/test/dom-to-react.js b/test/dom-to-react.js index 2b27500d..6722810c 100644 --- a/test/dom-to-react.js +++ b/test/dom-to-react.js @@ -5,7 +5,7 @@ */ var assert = require('assert'); var React = require('react'); -var htmlToDOM = require('../lib/html-to-dom'); +var htmlToDOMServer = require('../lib/html-to-dom-server'); var domToReact = require('../lib/dom-to-react'); var data = require('./data'); @@ -16,7 +16,7 @@ describe('dom-to-react parser', function() { it('converts single DOM node to React', function() { var html = data.html.single; - var reactElement = domToReact(htmlToDOM(html)); + var reactElement = domToReact(htmlToDOMServer(html)); assert(React.isValidElement(reactElement)); assert.deepEqual( reactElement, @@ -26,7 +26,7 @@ describe('dom-to-react parser', function() { it('converts multiple DOM nodes to React', function() { var html = data.html.multiple; - var reactElements = domToReact(htmlToDOM(html)); + var reactElements = domToReact(htmlToDOMServer(html)); reactElements.forEach(function(reactElement) { assert(React.isValidElement(reactElement)); assert(reactElement.key); @@ -43,7 +43,7 @@ describe('dom-to-react parser', function() { // https://facebook.github.io/react/docs/forms.html#why-textarea-value it('converts