html-to-react - npm Package Compare versions

Comparing version 1.3.4 to 1.4.0

CHANGELOG.md

 # Change Log
 
+## [v1.4.0](https://github.com/aknuds1/html-to-react/tree/v1.4.0)
+
+- Allow nodes to be preprocessed [\#90](https://github.com/aknuds1/html-to-react/pull/90) ([manixate](https://github.com/manixate))
+
+## [v1.3.4](https://github.com/aknuds1/html-to-react/tree/v1.3.4)
+
+- Use lodash.camelcase instead of underscore.string.fp [\#76](https://github.com/aknuds1/html-to-react/pull/76) ([codepunkt](https://github.com/codepunkt))
+
 ## [v1.3.3](https://github.com/aknuds1/html-to-react/tree/v1.3.3)
@@ -4,0 +12,0 @@

lib/parser.js

@@ -6,4 +6,4 @@ 'use strict';
 var map = require('ramda/src/map');
-var HtmlParser = require('htmlparser2/lib/Parser');
-var DomHandler = require('domhandler');
+var HtmlParser = require('htmlparser2').Parser;
+var DomHandler = require('domhandler').DomHandler;
 var ProcessingInstructions = require('./processing-instructions');
@@ -25,11 +25,20 @@ var IsValidNodeDefinitions = require('./is-valid-node-definitions');
 
-  function traverseDom(node, isValidNode, processingInstructions, index) {
+  function traverseDom(node, isValidNode, processingInstructions, preprocessingInstructions,
+    index) {
     if (isValidNode(node)) {
+      var preprocessingInstruction = find(function (instruction) {
+        return instruction.shouldPreprocessNode(node);
+      }, preprocessingInstructions || []);
+      if (preprocessingInstruction != null) {
+        preprocessingInstruction.preprocessNode(node, index);
+      }
+
       var processingInstruction = find(function (processingInstruction) {
         return processingInstruction.shouldProcessNode(node);
-      }, processingInstructions);
+      }, processingInstructions || []);
       if (processingInstruction != null) {
         var children = reject(function (x) {return x == null || x === false;},
           addIndex(map)(function (child, i) {
-            return traverseDom(child, isValidNode, processingInstructions, i);
+            return traverseDom(child, isValidNode, processingInstructions,
+              preprocessingInstructions, i);
           }, node.children || []));
@@ -52,7 +61,8 @@
 
-  function parseWithInstructions(html, isValidNode, processingInstructions) {
+  function parseWithInstructions(html, isValidNode, processingInstructions,
+      preprocessingInstructions) {
     var domTree = parseHtmlToTree(html);
-
     var list = domTree.map(function (domTreeItem, index) {
-      return traverseDom(domTreeItem, isValidNode, processingInstructions, index);
+      return traverseDom(domTreeItem, isValidNode, processingInstructions,
+        preprocessingInstructions, index);
     });
@@ -59,0 +69,0 @@ return list.length <= 1 ? list[0] : list;

package.json

 {
   "name": "html-to-react",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "A lightweight library that converts raw HTML to a React DOM structure.",
@@ -38,5 +38,4 @@ "main": "index.js",
   "dependencies": {
-    "domhandler": "^2.4.2",
-    "escape-string-regexp": "^1.0.5",
-    "htmlparser2": "^3.10.0",
+    "domhandler": "^3.0",
+    "htmlparser2": "^4.0",
     "lodash.camelcase": "^4.3.0",
@@ -49,10 +48,10 @@ "ramda": "^0.26"
   "devDependencies": {
-    "coveralls": "^3.0.2",
-    "eslint": "^5.9.0",
+    "coveralls": "^3.0.5",
+    "eslint": "^6.1.0",
     "istanbul": "^0.4",
-    "mocha": "^5.2.0",
+    "mocha": "^6.2.0",
     "mocha-lcov-reporter": "^1.2.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   }
 }

README.md

@@ -194,2 +194,104 @@ # html-to-react
 
+### With Preprocessing Instructions
+
+There may be situations where you want to preprocess nodes before rendering them, analogously
+to the custom processing instructions functionality. The rationale for supporting preprocessing
+hooks is generally that you might want to apply more general processing to nodes, before
+applying custom processing hooks to filtered sets of nodes. You could accomplish the same by
+calling common functions from your custom processing hooks, but the preprocessing hooks
+API makes it more convenient.
+
+#### Example
+
+Below is a simple template in which you may want to replace div IDs, via a preprocessing hook:
+
+```
+<div class="row">
+  <div id="first" data-process="shared">
+    <p>Sample For First</p>
+  </div>
+  <div id="second" data-process="shared">
+    <p>Sample For Second</p>
+  </div>
+</div>
+```
+
+We want to process the above HTML into the following:
+
+```
+<div class="row">
+  <h1 id="preprocessed-first">First</h1>
+  <h2 id="preprocessed-second">Second</h2>
+</div>
+```
+
+We can accomplish that with the following script, using a combination of preprocessing and
+custom processing instructions:
+
+```javascript
+var React = require('react');
+var HtmlToReact = require('html-to-react');
+var HtmlToReactParser = require('html-to-react').Parser;
+
+var htmlToReactParser = new HtmlToReactParser();
+var htmlInput = '<div class="row">' +
+  '<div id="first" data-process="shared">' +
+    '<p>Sample For First</p>' +
+  '</div>' +
+  '<div id="second" data-process="shared">' +
+    '<p>Sample For Second</p>' +
+  '</div>' +
+'</div>';
+
+var htmlExpected = '<div class="row">' +
+  '<h1 id="preprocessed-first">First</h1>' +
+  '<h2 id="preprocessed-second">Second</h2>' +
+'</div>';
+
+var isValidNode = function () {
+  return true;
+};
+
+var preprocessingInstructions = [
+  {
+    shouldPreprocessNode: function (node) {
+      return node.attribs && node.attribs['data-process'] === 'shared';
+    },
+    preprocessNode: function (node) {
+      node.attribs = {id: `preprocessed-${node.attribs.id}`,};
+    },
+  }
+];
+var processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
+var processingInstructions = [
+  {
+    shouldProcessNode: function (node) {
+      return node.attribs && node.attribs.id === 'preprocessed-first';
+    },
+    processNode: function(node, children, index) {
+      return React.createElement('h1', {key: index, id: node.attribs.id,}, 'First');
+    },
+  },
+  {
+    shouldProcessNode: function (node) {
+      return node.attribs && node.attribs.id === 'preprocessed-second';
+    },
+    processNode: function (node, children, index) {
+      return React.createElement('h2', {key: index, id: node.attribs.id,}, 'Second');
+    },
+  },
+  {
+    shouldProcessNode: function (node) {
+      return true;
+    },
+    processNode: processNodeDefinitions.processDefaultNode,
+  },
+];
+
+var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions,
+  preprocessingInstructions);
+var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+assert.equal(reactHtml, htmlExpected);
+```
+
 ## Tests & Coverage
@@ -196,0 +298,0 @@

test/html-to-react-tests.js

 'use strict';
-var assert = require('assert');
-var React = require('react');
-var ReactDOMServer = require('react-dom/server');
-var R = require('ramda');
-var escapeStringRegexp = require('escape-string-regexp');
+const assert = require('assert');
+const React = require('react');
+const ReactDOMServer = require('react-dom/server');
+const R = require('ramda');
 
-var Parser = require('..').Parser;
-var ProcessNodeDefinitions = require('..').ProcessNodeDefinitions;
+const Parser = require('..').Parser;
+const ProcessNodeDefinitions = require('..').ProcessNodeDefinitions;
 
 describe('Html2React', function () {
-  var parser = new Parser();
+  const parser = new Parser();
 
   describe('parse valid HTML', function () {
     it('should return a valid HTML string', function () {
-      var htmlInput = '<p>Does this work?</p>';
+      const htmlInput = '<p>Does this work?</p>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -25,6 +24,6 @@ assert.equal(reactHtml, htmlInput);
     it('should return a valid HTML string with nested elements', function () {
-      var htmlInput = '<div><h1>Heading</h1></div>';
+      const htmlInput = '<div><h1>Heading</h1></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -35,8 +34,8 @@ assert.equal(reactHtml, htmlInput);
     it('should return a valid HTML string with inline styles', function () {
-      var htmlInput = '<div style="background-image:url(' +
+      const htmlInput = '<div style="background-image:url(' +
         '&quot;http://lorempixel.com/400/200/&quot;);background-color:red;color:white;' +
         'font-family:&quot;Open Sans&quot;"></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -47,8 +46,8 @@ assert.equal(reactHtml, htmlInput);
     it('should return a valid HTML string with inline image in style', function () {
-      var htmlInput = '<div style="background:url(' +
+      const htmlInput = '<div style="background:url(' +
         'data:image/png;base64,iVBORw0KGgoAAA);color:white;' +
         'font-family:&quot;Open Sans&quot;"></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -59,7 +58,7 @@ assert.equal(reactHtml, htmlInput);
     it('should return a valid HTML string with empty inline styles', function () {
-      var htmlInput = '<div style=""></div>';
-      var htmlExpected = '<div></div>';
+      const htmlInput = '<div style=""></div>';
+      const htmlExpected = '<div></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -70,6 +69,6 @@ assert.equal(reactHtml, htmlExpected);
     it('should return a valid HTML string with data attributes', function () {
-      var htmlInput = '<div data-test-attribute="data attribute value"></div>';
+      const htmlInput = '<div data-test-attribute="data attribute value"></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -80,6 +79,6 @@ assert.equal(reactHtml, htmlInput);
     it('should return a valid HTML string with aria attributes', function () {
-      var htmlInput = '<div aria-labelledby="label1"></div>';
+      const htmlInput = '<div aria-labelledby="label1"></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -90,6 +89,6 @@ assert.equal(reactHtml, htmlInput);
     it('should return a valid HTML string with a class attribute', function () {
-      var htmlInput = '<div class="class-one"></div>';
+      const htmlInput = '<div class="class-one"></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -100,6 +99,6 @@ assert.equal(reactHtml, htmlInput);
     it('should return a valid HTML string with a for attribute', function () {
-      var htmlInput = '<label for="input"></label>';
+      const htmlInput = '<label for="input"></label>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -110,6 +109,6 @@ assert.equal(reactHtml, htmlInput);
     it('should return a valid HTML string with a react camelCase attribute', function () {
-      var htmlInput = '<div contenteditable="true"></div>';
+      const htmlInput = '<div contenteditable="true"></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -120,6 +119,6 @@ assert.equal(reactHtml, htmlInput);
     it('should handle dashed attributes', function () {
-      var input = '<form accept-charset="en"><svg viewBox="0 0 10 10"><text text-anchor="left">' +
+      const input = '<form accept-charset="en"><svg viewBox="0 0 10 10"><text text-anchor="left">' +
         '</text><circle stroke="black" stroke-width="42"></circle></svg></form>';
-      var reactComponent = parser.parse(input);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(input);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -131,6 +130,6 @@ assert.equal(reactHtml, input);
     it.skip('should return a valid HTML string with comments', function () {
-      var htmlInput = '<div><!-- This is a comment --></div>';
+      const htmlInput = '<div><!-- This is a comment --></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -142,7 +141,7 @@ assert.equal(reactHtml, htmlInput);
     it('should return a valid HTML string without comments', function () {
-      var htmlInput = '<div><!-- This is a comment --></div>';
-      var htmlExpected = '<div></div>';
+      const htmlInput = '<div><!-- This is a comment --></div>';
+      const htmlExpected = '<div></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -153,7 +152,7 @@ assert.equal(reactHtml, htmlExpected);
     it('should parse br elements without warnings', function () {
-      var htmlInput = '<div><p>Line one<br>Line two<br/>Line three</p></div>';
-      var htmlExpected = '<div><p>Line one<br/>Line two<br/>Line three</p></div>';
+      const htmlInput = '<div><p>Line one<br>Line two<br/>Line three</p></div>';
+      const htmlExpected = '<div><p>Line one<br/>Line two<br/>Line three</p></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -164,5 +163,5 @@ assert.equal(reactHtml, htmlExpected);
     it('should not generate children for br tags', function () {
-      var htmlInput = '<br/>';
+      const htmlInput = '<br/>';
 
-      var reactComponent = parser.parse(htmlInput);
+      const reactComponent = parser.parse(htmlInput);
       assert.strictEqual((reactComponent.props.children || []).length, 0);
@@ -172,6 +171,6 @@ });
     it('should parse void elements with all attributes and no warnings', function () {
-      var htmlInput = '<p><img src="www.google.ca/logo.png"/></p>';
+      const htmlInput = '<p><img src="www.google.ca/logo.png"/></p>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -183,6 +182,6 @@ assert.equal(reactHtml, htmlInput);
     it('should parse textarea elements', function () {
-      var htmlInput = '<textarea></textarea>';
+      const htmlInput = '<textarea></textarea>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -193,10 +192,10 @@ assert.equal(reactHtml, htmlInput);
     it('should generate keys for sequence items', function () {
-      var htmlInput = '<ul><li>Item 1</li><li>Item 2</li><</ul>';
+      const htmlInput = '<ul><li>Item 1</li><li>Item 2</li><</ul>';
 
-      var reactComponent = parser.parse(htmlInput);
+      const reactComponent = parser.parse(htmlInput);
 
-      var children = R.filter(function (c) {
+      const children = R.filter(function (c) {
         return R.has('key', c);
       }, R.flatten(reactComponent.props.children));
-      var keys = R.map(function (child) {
+      const keys = R.map(function (child) {
         return child.key;
@@ -208,7 +207,7 @@ }, children);
     it('should parse br elements without warnings', function () {
-      var htmlInput = '<div><p>Line one<br>Line two<br/>Line three</p></div>';
-      var htmlExpected = '<div><p>Line one<br/>Line two<br/>Line three</p></div>';
+      const htmlInput = '<div><p>Line one<br>Line two<br/>Line three</p></div>';
+      const htmlExpected = '<div><p>Line one<br/>Line two<br/>Line three</p></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -219,6 +218,6 @@ assert.equal(reactHtml, htmlExpected);
     it('should parse src elements with all attributes but without warnings', function () {
-      var htmlInput = '<p><img src="www.google.ca/logo.png"/></p>';
+      const htmlInput = '<p><img src="www.google.ca/logo.png"/></p>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -229,6 +228,6 @@ assert.equal(reactHtml, htmlInput);
     it('should decode character entities in text nodes', function () {
-      var htmlInput = '<div>1 &lt; 2</div>';
+      const htmlInput = '<div>1 &lt; 2</div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -239,5 +238,5 @@ assert.equal(reactHtml, htmlInput);
     it('should not generate children for childless elements', function () {
-      var htmlInput = '<div></div>';
+      const htmlInput = '<div></div>';
 
-      var reactComponent = parser.parse(htmlInput);
+      const reactComponent = parser.parse(htmlInput);
 
@@ -248,7 +247,7 @@ assert.strictEqual((reactComponent.props.children || []).length, 0);
     it('should fill in the key name with boolean attribute', function () {
-      var htmlInput = '<input type="checkbox" disabled required/>';
-      var htmlExpected = '<input type="checkbox" disabled="" required=""/>';
+      const htmlInput = '<input type="checkbox" disabled required/>';
+      const htmlExpected = '<input type="checkbox" disabled="" required=""/>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -259,6 +258,6 @@ assert.equal(reactHtml, htmlExpected);
     it('should decode attribute values to avoid React re-encoding them', function () {
-      var htmlInput = '<p><a href="http://domain.com/search?query=1&amp;lang=en">A link</a></p>';
+      const htmlInput = '<p><a href="http://domain.com/search?query=1&amp;lang=en">A link</a></p>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -269,5 +268,5 @@ assert.equal(reactHtml, htmlInput);
     it('should handle spaces in inline styles', function () {
-      var htmlInput = '<p style="text-align: center"></p>';
+      const htmlInput = '<p style="text-align: center"></p>';
 
-      var reactComponent = parser.parse(htmlInput);
+      const reactComponent = parser.parse(htmlInput);
 
@@ -278,7 +277,7 @@ assert.equal(reactComponent.props.style.textAlign, 'center');
     it('should handle doctype directives', function () {
-      var htmlInput = '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ' +
+      const htmlInput = '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ' +
       '"http://www.w3.org/TR/REC-html40/loose.dtd"><html><body><div></div></body></html>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -289,6 +288,6 @@ assert.equal(reactHtml, '<html><body><div></div></body></html>');
     it('should handle free text nodes', function () {
-      var htmlInput = 'text<div></div>text';
+      const htmlInput = 'text<div></div>text';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -301,7 +300,7 @@ assert.equal(reactHtml, 'text<div></div>text');
     it('should fix missing closing tags', function () {
-      var htmlInput = '<div><p></div>';
-      var htmlExpected = '<div><p></p></div>';
+      const htmlInput = '<div><p></div>';
+      const htmlExpected = '<div><p></p></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -312,7 +311,7 @@ assert.equal(reactHtml, htmlExpected);
     it('should handle invalid style tag', function () {
-      var htmlInput = '<div style="color:black;href="></div>';
-      var htmlExpected = '<div style="color:black"></div>';
+      const htmlInput = '<div style="color:black;href="></div>';
+      const htmlExpected = '<div style="color:black"></div>';
 
-      var reactComponent = parser.parse(htmlInput);
-      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      const reactComponent = parser.parse(htmlInput);
+      const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -324,12 +323,12 @@ assert.equal(reactHtml, htmlExpected);
   describe('with custom processing instructions', function () {
-    var parser = new Parser();
-    var processNodeDefinitions = new ProcessNodeDefinitions(React);
+    const parser = new Parser();
+    const processNodeDefinitions = new ProcessNodeDefinitions(React);
 
     describe('parse valid HTML', function () {
       it('should return nothing with only a single <p> element', function () {
-        var htmlInput = '<p>Does this work?</p>';
-        var isValidNode = function () {
+        const htmlInput = '<p>Does this work?</p>';
+        const isValidNode = function () {
           return true;
         };
-        var processingInstructions = [{
+        const processingInstructions = [{
           shouldProcessNode: function (node) {
@@ -340,3 +339,3 @@ return node.name && node.name !== 'p';
         },];
-        var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
+        const reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
           processingInstructions);
@@ -350,10 +349,10 @@
           function () {
-        var htmlInput = '<div><h1>Title</h1><p>Paragraph</p></div>';
-        var htmlExpected = '<div><h1>Title</h1></div>';
+        const htmlInput = '<div><h1>Title</h1><p>Paragraph</p></div>';
+        const htmlExpected = '<div><h1>Title</h1></div>';
 
-        var isValidNode = function () {
+        const isValidNode = function () {
           return true;
         };
 
-        var processingInstructions = [{
+        const processingInstructions = [{
           shouldProcessNode: function (node) {
@@ -364,5 +363,5 @@ return node.type === 'text' || node.name !== 'p';
         },];
-        var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
+        const reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
           processingInstructions);
-        var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+        const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
         assert.equal(reactHtml, htmlExpected);
@@ -372,14 +371,14 @@ });
       it('should replace the children of an element if configured so', function () {
-        var htmlInput = '<div><div data-test="foo"><p>Text</p><p>Text</p></div></div>';
-        var htmlExpected = '<div><div data-test="foo"><h1>Heading</h1></div></div>';
+        const htmlInput = '<div><div data-test="foo"><p>Text</p><p>Text</p></div></div>';
+        const htmlExpected = '<div><div data-test="foo"><h1>Heading</h1></div></div>';
 
-        var isValidNode = function () {
+        const isValidNode = function () {
           return true;
         };
 
-        var processingInstructions = [
+        const processingInstructions = [
           {
             replaceChildren: true,
             shouldProcessNode: function (node) {
-              return node.attribs && node.attribs['data-test'] === 'foo';
+              return (node.attribs || {})['data-test'] === 'foo';
             },
@@ -399,5 +398,5 @@ processNode: function (node, children, index) {
 
-        var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
+        const reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
           processingInstructions);
-        var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+        const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
         assert.equal(reactHtml, htmlExpected);
@@ -407,12 +406,12 @@ });
       it('should return capitalized content for all <h1> elements', function () {
-        var htmlInput = '<div><h1>Title</h1><p>Paragraph</p>' +
+        const htmlInput = '<div><h1>Title</h1><p>Paragraph</p>' +
         '<h1>Another title</h1></div>';
-        var htmlExpected = '<div><h1>TITLE</h1><p>Paragraph</p>' +
+        const htmlExpected = '<div><h1>TITLE</h1><p>Paragraph</p>' +
         '<h1>ANOTHER TITLE</h1></div>';
 
-        var isValidNode = function () {
+        const isValidNode = function () {
           return true;
         };
 
-        var processingInstructions = [
+        const processingInstructions = [
           {
@@ -435,5 +434,5 @@ // Custom <h1> processing
         ];
-        var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
+        const reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
           processingInstructions);
-        var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+        const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
         assert.equal(reactHtml, htmlExpected);
@@ -443,8 +442,8 @@ });
       it('should return false in case of invalid node', function () {
-        var htmlInput = '<p></p>';
-        var processingInstructions = [{
+        const htmlInput = '<p></p>';
+        const processingInstructions = [{
           shouldProcessNode: function (node) { return true; },
           processNode: processNodeDefinitions.processDefaultNode,
         }, ];
-        var reactComponent = parser.parseWithInstructions(htmlInput,
+        const reactComponent = parser.parseWithInstructions(htmlInput,
           function () { return false; }, processingInstructions);
@@ -456,9 +455,9 @@
       it('should generate only valid children', function () {
-        var htmlInput = '<div> <p></p> <p></p> </div>';
+        const htmlInput = '<div> <p></p> <p></p> </div>';
 
-        var processingInstructions = [{
+        const processingInstructions = [{
           shouldProcessNode: function (node) { return true; },
           processNode: processNodeDefinitions.processDefaultNode,
         }, ];
-        var reactComponent = parser.parseWithInstructions(htmlInput, function (node) {
+        const reactComponent = parser.parseWithInstructions(htmlInput, function (node) {
           // skip whitespace text nodes to clean up children
@@ -475,5 +474,5 @@ if (node.type === 'text') {
       it('should not affect unhandled whitespace', function () {
-        var htmlInput = '<div> <p></p> <p></p> </div>';
+        const htmlInput = '<div> <p></p> <p></p> </div>';
 
-        var reactComponent = parser.parse(htmlInput);
+        const reactComponent = parser.parse(htmlInput);
 
@@ -483,2 +482,54 @@ assert.equal(reactComponent.props.children.length, 5);
     });
+
+    it('should support preprocessing instructions', function () {
+      var htmlInput = '<div>' +
+        '<div id="first" data-process="shared"><p>Sample For First</p></div>' +
+        '<div id="second" data-process="shared"><p>Sample For Second</p></div>' +
+        '</div>';
+      var htmlExpected = '<div><h1 id="preprocessed-first">First</h1>' +
+        '<h2 id="preprocessed-second">Second</h2></div>';
+
+      var isValidNode = function () {
+        return true;
+      };
+      var preprocessingInstructions = [
+        {
+          shouldPreprocessNode: function (node) {
+            return (node.attribs || {})['data-process'] === 'shared';
+          },
+          preprocessNode: function (node) {
+            node.attribs = {id: `preprocessed-${node.attribs.id}`,};
+          },
+        },
+      ];
+      var processingInstructions = [
+        {
+          shouldProcessNode: function (node) {
+            return (node.attribs || {}).id === 'preprocessed-first';
+          },
+          processNode: function (node, children, index) {
+            return React.createElement('h1', {key: index, id: node.attribs.id,}, 'First');
+          },
+        },
+        {
+          shouldProcessNode: function (node) {
+            return (node.attribs || {}).id === 'preprocessed-second';
+          },
+          processNode: function (node, children, index) {
+            return React.createElement('h2', {key: index, id: node.attribs.id,}, 'Second');
+          },
+        },
+        {
+          shouldProcessNode: function () {
+            return true;
+          },
+          processNode: processNodeDefinitions.processDefaultNode,
+        },
+      ];
+      var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode,
+        processingInstructions, preprocessingInstructions);
+
+      var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+      assert.strictEqual(reactHtml, htmlExpected);
+    });
   });
@@ -488,3 +539,3 @@
     it('should have correct attributes', function () {
-      var input2RegExp = {
+      const input2RegExp = {
         '<svg><image xlink:href="http://i.imgur.com/w7GCRPb.png"/></svg>':
@@ -497,5 +548,5 @@ /<svg><image xlink:href="http:\/\/i\.imgur\.com\/w7GCRPb\.png"/,
       R.forEach(function (inputAndRegExp) {
-        var input = inputAndRegExp[0], regExp = inputAndRegExp[1];
-        var reactComponent = parser.parse(input);
-        var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
+        const input = inputAndRegExp[0], regExp = inputAndRegExp[1];
+        const reactComponent = parser.parse(input);
+        const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
 
@@ -509,5 +560,5 @@ assert(regExp.test(reactHtml), reactHtml + ' has expected attributes');
     it('should result in a list of React elements', function () {
-      var htmlInput = '<div></div><div></div>';
-      var elements = parser.parse(htmlInput);
-      var output = elements.map(ReactDOMServer.renderToStaticMarkup).join('');
+      const htmlInput = '<div></div><div></div>';
+      const elements = parser.parse(htmlInput);
+      const output = elements.map(ReactDOMServer.renderToStaticMarkup).join('');
       assert.equal(htmlInput, output);
@@ -514,0 +565,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54513

increased by12.49%

Dependency count

5

decreased by-16.67%

Lines of code

686

increased by9.24%

Number of lines in readme file

303

increased by50.75%

Dependency changes

• + Addeddom-serializer@1.4.1(transitive)

• + Addeddomhandler@3.3.04.3.1(transitive)

• + Addeddomutils@2.8.0(transitive)

• + Addedhtmlparser2@4.1.0(transitive)

• - Removedescape-string-regexp@^1.0.5

• - Removeddom-serializer@0.2.2(transitive)

• - Removeddomelementtype@1.3.1(transitive)

• - Removeddomhandler@2.4.2(transitive)

• - Removeddomutils@1.7.0(transitive)

• - Removedentities@1.1.2(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedhtmlparser2@3.10.1(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedreadable-stream@3.6.2(transitive)

• - Removedsafe-buffer@5.2.1(transitive)

• - Removedstring_decoder@1.3.0(transitive)

• - Removedutil-deprecate@1.0.2(transitive)

• Updateddomhandler@^3.0

• Updatedhtmlparser2@^4.0