html-to-react - npm Package Compare versions

Comparing version 1.3.3 to 1.3.4

.nvmrc

@@ -1,1 +0,1 @@
-v8
+10

.travis.yml

@@ -7,2 +7,3 @@ language: node_js
 - 9
+- 10
 script: npm run test-coverage

lib/parser.js

@@ -39,5 +39,5 @@ 'use strict';
           ]);
+        } else {
+          return processingInstruction.processNode(node, children, index);
         }
-
-        return processingInstruction.processNode(node, children, index);
       } else {
@@ -44,0 +44,0 @@ return false;

lib/utils.js

 'use strict';
-var camelize = require('underscore.string.fp/camelize');
+var camelCase = require('lodash.camelcase');
 var toPairs = require('ramda/src/toPairs');
@@ -25,3 +25,3 @@ var reduce = require('ramda/src/reduce');
     if (key != null && value != null && key.length > 0 && value.length > 0) {
-      jsonStyles[camelize(key)] = value;
+      jsonStyles[camelCase(key)] = value;
     }
@@ -28,0 +28,0 @@ }

package.json

 {
   "name": "html-to-react",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "A lightweight library that converts raw HTML to a React DOM structure.",
@@ -38,7 +38,7 @@ "main": "index.js",
   "dependencies": {
-    "domhandler": "^2.3.0",
+    "domhandler": "^2.4.2",
     "escape-string-regexp": "^1.0.5",
-    "htmlparser2": "^3.8.3",
-    "ramda": "^0.25.0",
-    "underscore.string.fp": "^1.0.4"
+    "htmlparser2": "^3.10.0",
+    "lodash.camelcase": "^4.3.0",
+    "ramda": "^0.26"
   },
@@ -49,10 +49,10 @@ "peerDependencies": {
   "devDependencies": {
-    "coveralls": "^3.0",
-    "eslint": "^4.8.0",
+    "coveralls": "^3.0.2",
+    "eslint": "^5.9.0",
     "istanbul": "^0.4",
-    "mocha": "^4.0.1",
+    "mocha": "^5.2.0",
     "mocha-lcov-reporter": "^1.2.0",
-    "react": "^16.0",
-    "react-dom": "^16.0"
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3"
   }
 }

README.md

@@ -18,12 +18,12 @@ # html-to-react
 <div class="row">
-    <div class="col-sm-6">
-        <div data-report-id="report-1">
-          <!-- A React component for report-1 -->
-        </div>
+  <div class="col-sm-6">
+    <div data-report-id="report-1">
+      <!-- A React component for report-1 -->
     </div>
-    <div class="col-sm-6">
-        <div data-report-id="report-2">
-          <!-- A React component for report-2 -->
-        </div>
+  </div>
+  <div class="col-sm-6">
+    <div data-report-id="report-2">
+      <!-- A React component for report-2 -->
     </div>
+  </div>
 </div>
@@ -77,3 +77,3 @@ ```
 var isValidNode = function () {
-    return true;
+  return true;
 };
@@ -84,17 +84,19 @@
 var processingInstructions = [
-    {
-        // Custom <h1> processing
-        shouldProcessNode: function (node) {
-            return node.parent && node.parent.name && node.parent.name === 'h1';
-        },
-        processNode: function (node, children) {
-            return node.data.toUpperCase();
-        }
-    }, {
-        // Anything else
-        shouldProcessNode: function (node) {
-            return true;
-        },
-        processNode: processNodeDefinitions.processDefaultNode
-    }];
+  {
+    // Custom <h1> processing
+    shouldProcessNode: function (node) {
+      return node.parent && node.parent.name && node.parent.name === 'h1';
+    },
+    processNode: function (node, children) {
+      return node.data.toUpperCase();
+    }
+  },
+  {
+    // Anything else
+    shouldProcessNode: function (node) {
+      return true;
+    },
+    processNode: processNodeDefinitions.processDefaultNode
+  }
+];
 var htmlToReactParser = new HtmlToReactParser();
@@ -121,8 +123,8 @@ var reactComponent = htmlToReactParser.parseWithInstructions(htmlInput, isValidNode,
 <div class="row">
-    <div class="col-sm-6">
-        <div data-container="wysiwyg">
-            <h1>Sample Heading</h1>
-            <p>Sample Text</p>
-        </div>
+  <div class="col-sm-6">
+    <div data-container="wysiwyg">
+      <h1>Sample Heading</h1>
+      <p>Sample Text</p>
     </div>
+  </div>
 </div>
@@ -138,7 +140,7 @@ ```
 <div class="row">
-    <div class="col-sm-6">
-        <div data-container="wysiwyg">
-            <RichTextEditor html={"<h1>Sample heading</h1><p>Sample Text</p>"} />
-        </div>
+  <div class="col-sm-6">
+    <div data-container="wysiwyg">
+      <RichTextEditor html={"<h1>Sample heading</h1><p>Sample Text</p>"} />
     </div>
+  </div>
 </div>
@@ -161,3 +163,3 @@ ```
 var isValidNode = function () {
-    return true;
+  return true;
 };
@@ -170,24 +172,24 @@
 var processingInstructions = [
-    {
-       // This is REQUIRED, it tells the parser
-       // that we want to insert our React
-       // component as a child
-       replaceChildren: true,
-       shouldProcessNode: function (node) {
-            return node.attribs && node.attribs['data-test'] === 'foo';
-        },
-        processNode: function (node, children, index) {
-            return React.createElement('h1', {key: index,}, 'Heading');
-        }
+  {
+    // This is REQUIRED, it tells the parser
+    // that we want to insert our React
+    // component as a child
+    replaceChildren: true,
+    shouldProcessNode: function (node) {
+      return node.attribs && node.attribs['data-test'] === 'foo';
     },
-    {
-        // Anything else
-        shouldProcessNode: function (node) {
-            return true;
-        },
-        processNode: processNodeDefinitions.processDefaultNode,
+    processNode: function (node, children, index) {
+      return React.createElement('h1', {key: index,}, 'Heading');
+    }
+  },
+  {
+    // Anything else
+    shouldProcessNode: function (node) {
+      return true;
     },
+    processNode: processNodeDefinitions.processDefaultNode,
+  },
 ];
 
-var reactComponent = parser.parseWithInstructions(
+var reactComponent = htmlToReactParser.parseWithInstructions(
   htmlInput, isValidNode, processingInstructions);
@@ -194,0 +196,0 @@ var reactHtml = ReactDOMServer.renderToStaticMarkup(

test/html-to-react-tests.js

@@ -339,3 +339,3 @@ 'use strict';
 
-      it('should replace the children of an element', function () {
+      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>';
@@ -342,0 +342,0 @@ var htmlExpected = '<div><div data-test="foo"><h1>Heading</h1></div></div>';

No alert changes

Improved metrics

Lines of code

628

0.16%

Number of lines in readme file

201

1.01%

Worsened metrics

Total package byte prevSize

48461

-0.34%

Dependency changes

• + Added

  lodash.camelcase@^4.3.0

• + Added

  lodash.camelcase@4.3.0
  (transitive)

• + Added

  ramda@0.26.1
  (transitive)

• - Removed

  underscore.string.fp@^1.0.4

• - Removed

  arity-n@1.0.4
  (transitive)

• - Removed

  chickencurry@1.1.1
  (transitive)

• - Removed

  compose-function@2.0.0
  (transitive)

• - Removed

  ramda@0.25.0
  (transitive)

• - Removed

  reverse-arguments@1.0.0
  (transitive)

• - Removed

  underscore.string@3.0.3
  (transitive)

• - Removed

  underscore.string.fp@1.0.4
  (transitive)

• Updated

  domhandler@^2.4.2

• Updated

  htmlparser2@^3.10.0

• Updated

  ramda@^0.26