Merge pull request #28 from remarkablemark/html-to-dom

Replace HTML to DOM implementation with `html-dom-parser` package

Author: remarkablemark

README.md

@@ -27,11 +27,13 @@ Parser('<p>Hello, world!</p>');
 
 ## Installation
 
+[NPM](https://www.npmjs.com/package/html-react-parser):
+
 ```sh
 $ npm install html-react-parser
 ```
 
-Or you can download the script from a CDN:
+[CDN](https://unpkg.com/html-react-parser/):
 
 ```html
 <!-- HTMLReactParser depends on React -->
@@ -113,7 +115,7 @@ The element is only replaced if a valid React Element is returned.
 ```js
 // with JSX
 Parser('<p id="replace">text</p>', {
-    replace: (domNode) => {
+    replace: function(domNode) {
         if (domNode.attribs && domNode.attribs.id === 'replace') {
             return <span>replaced</span>;
         }
@@ -189,9 +191,8 @@ $ npm run lint
 
 ## Special Thanks
 
-- To [htmlparser2](https://github.com/fb55/htmlparser2).
-- To all the [contributors](https://github.com/remarkablemark/html-react-parser/graphs/contributors).
-- To [benox3](https://github.com/benox3) and [tdlm](https://github.com/tdlm) for their feedback and review.
+- [html-dom-parser](https://github.com/remarkablemark/html-dom-parser)
+- [Contributors](https://github.com/remarkablemark/html-react-parser/graphs/contributors)
 
 ## License
 

index.js

@@ -4,11 +4,7 @@
  * Module dependencies.
  */
 var domToReact = require('./lib/dom-to-react');
-var htmlToDOM = (
-    process.browser ?
-    require('./lib/html-to-dom-client') :
-    require('./lib/html-to-dom-server')
-);
+var htmlToDOM = require('html-dom-parser');
 
 /**
  * Convert HTML string to React elements.

lib/html-to-dom-client.js

@@ -28,8 +28,7 @@
     "converter"
   ],
   "dependencies": {
-    "domhandler": "^2.3.0",
-    "htmlparser2": "^3.9.1"
+    "html-dom-parser": "0.0.2"
   },
   "devDependencies": {
     "coveralls": "^2.11.12",

lib/html-to-dom-server.js

@@ -5,19 +5,21 @@
  */
 var assert = require('assert');
 var React = require('react');
-var htmlToDOMServer = require('../lib/html-to-dom-server');
+var htmlToDOM = require('html-dom-parser');
 var domToReact = require('../lib/dom-to-react');
 var helpers = require('./helpers/');
-var data = require('./data');
+var mocks = helpers.mocks;
+var render = helpers.render;
 
 /**
  * Tests for `domToReact`.
  */
 describe('dom-to-react parser', function() {
 
     it('converts single DOM node to React', function() {
-        var html = data.html.single;
-        var reactElement = domToReact(htmlToDOMServer(html));
+        var html = mocks.html.single;
+        var reactElement = domToReact(htmlToDOM(html));
+
         assert(React.isValidElement(reactElement));
         assert.deepEqual(
             reactElement,
@@ -26,12 +28,14 @@ describe('dom-to-react parser', function() {
     });
 
     it('converts multiple DOM nodes to React', function() {
-        var html = data.html.multiple;
-        var reactElements = domToReact(htmlToDOMServer(html));
+        var html = mocks.html.multiple;
+        var reactElements = domToReact(htmlToDOM(html));
+
         reactElements.forEach(function(reactElement) {
             assert(React.isValidElement(reactElement));
             assert(reactElement.key);
         });
+
         assert.deepEqual(
             reactElements,
             [
@@ -43,8 +47,9 @@ describe('dom-to-react parser', function() {
 
     // https://facebook.github.io/react/docs/forms.html#why-textarea-value
     it('converts <textarea> correctly', function() {
-        var html = data.html.textarea;
-        var reactElement = domToReact(htmlToDOMServer(html));
+        var html = mocks.html.textarea;
+        var reactElement = domToReact(htmlToDOM(html));
+
         assert(React.isValidElement(reactElement));
         assert.deepEqual(
             reactElement,
@@ -55,8 +60,9 @@ describe('dom-to-react parser', function() {
     });
 
     it('does not escape <script> content', function() {
-        var html = data.html.script;
-        var reactElement = domToReact(htmlToDOMServer(html));
+        var html = mocks.html.script;
+        var reactElement = domToReact(htmlToDOM(html));
+
         assert(React.isValidElement(reactElement));
         assert.deepEqual(
             reactElement,
@@ -69,8 +75,9 @@ describe('dom-to-react parser', function() {
     });
 
     it('does not escape <style> content', function() {
-        var html = data.html.style;
-        var reactElement = domToReact(htmlToDOMServer(html));
+        var html = mocks.html.style;
+        var reactElement = domToReact(htmlToDOM(html));
+
         assert(React.isValidElement(reactElement));
         assert.deepEqual(
             reactElement,
@@ -83,32 +90,40 @@ describe('dom-to-react parser', function() {
     });
 
     it('does not have `children` for void elements', function() {
-        var html = data.html.img;
-        var reactElement = domToReact(htmlToDOMServer(html));
+        var html = mocks.html.img;
+        var reactElement = domToReact(htmlToDOM(html));
         assert(!reactElement.props.children);
     });
 
     it('does not throw an error for void elements', function() {
-        var html = data.html.void;
-        var reactElements = domToReact(htmlToDOMServer(html));
+        var html = mocks.html.void;
+        var reactElements = domToReact(htmlToDOM(html));
         assert.doesNotThrow(function() {
-            helpers.render(React.createElement('div', {}, reactElements));
+            render(React.createElement('div', {}, reactElements));
         });
     });
 
-    it('skips HTML comments', function() {
-        var html = [data.html.single, data.html.comment, data.html.single].join('');
-        var reactElements = domToReact(htmlToDOMServer(html));
+    it('skips doctype and comments', function() {
+        var html = [
+            mocks.html.doctype,
+            mocks.html.single,
+            mocks.html.comment,
+            mocks.html.single
+        ].join('');
+
+        var reactElements = domToReact(htmlToDOM(html));
         reactElements.forEach(function(reactElement) {
             assert(React.isValidElement(reactElement));
             assert(reactElement.key);
         });
+
         assert.deepEqual(
             reactElements,
             [
-                React.createElement('p', { key: 0 }, 'foo'),
+                // doctype
+                React.createElement('p', { key: 1 }, 'foo'),
                 // comment is in the middle
-                React.createElement('p', { key: 2 }, 'foo')
+                React.createElement('p', { key: 3 }, 'foo')
             ]
         );
     });