Merge pull request #30 from wrakky/custom_processNodes

Add preprocessNodes option

Author: peternewnham

.travis.yml

@@ -4,7 +4,7 @@ node_js:
   - 8
 
 env:
-  - REACT_VERSION=next # 16 beta
+  - REACT_VERSION=16
   - REACT_VERSION=15
 
 script:

README.md

@@ -21,7 +21,7 @@ yarn add react-html-parser
 
 ```javascript
 import React from 'react';
-import ReactHtmlParser from 'react-html-parser';
+import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
 
 class HtmlComponent extends React.Component {
   render() {
@@ -45,6 +45,7 @@ import ReactHtmlParser from 'react-html-parser';
 - `options`: Options object
   - decodeEntities=true *(boolean)*: Whether to decode html entities (defaults to true)
   - transform *(function)*: Transform function that is applied to every node
+  - preprocessNodes *(function)*: Pre-process the nodes generated by `htmlparser2`
 
 #### Transform Function
 The transform function will be called for every node that is parsed by the library.
@@ -86,6 +87,16 @@ function transform(node) {
 }
 ```
 
+#### preprocessNodes Function
+Allows pre-processing the nodes generated from the html by `htmlparser2` before being passed to the library and converted to React elements.
+
+`function preprocessNodes(nodes)`
+##### Arguments
+- `nodes`: The entire node tree generated by `htmlparser2`.
+
+##### Return type
+The `preprocessNodes` function should return a valid `htmlparser2` node tree.
+
 ### `function convertNodeToElement(node, index, transform)`
 Processes a node and returns the React element to be rendered. This function can be used in conjunction with the previously described `transform` function to continue to process a node after modifying it.
 
@@ -108,3 +119,9 @@ function transform(node, index) {
   }
 }
 ```
+
+### `htmlparser2`
+The library exposes the `htmlparser2` library it uses. This allows consumers
+to use it without having to add it as a separate dependency.
+
+See https://github.com/fb55/htmlparser2 for full details.

package-lock.json

@@ -8,7 +8,11 @@ import processNodes from './processNodes';
  * @param {Object} options Options to pass
  * @returns {Array} List of top level React elements
  */
-export default function HtmlParser(html, { decodeEntities=true, transform }={}) {
-  const nodes = htmlparser2.parseDOM(html, { decodeEntities });
+export default function HtmlParser(html, {
+  decodeEntities = true,
+  transform,
+  preprocessNodes = nodes => nodes
+}={}) {
+  const nodes = preprocessNodes(htmlparser2.parseDOM(html, { decodeEntities }));
   return processNodes(nodes, transform);
 }

src/HtmlParser.js

@@ -3,3 +3,6 @@ export default HtmlParser;
 
 export { default as processNodes } from './processNodes';
 export { default as convertNodeToElement } from './convertNodeToElement';
+
+// expose htmlparser2 so it can be used if required
+export { default as htmlparser2 } from 'htmlparser2';

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import HtmlParser, { convertNodeToElement } from 'index';
+import HtmlParser, { convertNodeToElement, htmlparser2 } from 'index';
 
 const reactVersion = parseInt(require('react/package.json').version.match(/^(\d+)\./)[1], 10);
 
@@ -170,4 +170,23 @@ describe('Integration tests: ', () => {
     );
   });
 
+  it('should preprocess nodes correctly', () => {
+    test(
+      '<div>preprocess test</div>',
+      '<div>preprocess test</div><div>preprocess test</div>',
+      {
+        preprocessNodes(nodes) {
+          return [
+            ...nodes,
+            ...nodes
+          ];
+        }
+      }
+    );
+  });
+
+  it('should expose htmlparser2', () => {
+    expect(htmlparser2).toBeDefined();
+  });
+
 });

test/integration/integration.spec.js

@@ -22,10 +22,11 @@ describe('Testing: `HtmlParser`', () => {
   });
 
   it('should apply the options', () => {
-    const transform = function() {};
-    expect(HtmlParser('html', { decodeEntities:false, transform })).toBe('processed');
+    const transform = jasmine.createSpy('transform');
+    const preprocessNodes = jasmine.createSpy('preprocessNodes').and.callFake(v => `preprocessed ${v}`);
+    expect(HtmlParser('html', { decodeEntities:false, transform, preprocessNodes })).toBe('processed');
     expect(htmlparser2.parseDOM).toHaveBeenCalledWith('html', {decodeEntities: false});
-    expect(processNodes).toHaveBeenCalledWith('parsed', transform);
+    expect(processNodes).toHaveBeenCalledWith('preprocessed parsed', transform);
   });
 
 });