html-react-parser - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

index.js

@@ -1,63 +0,31 @@
-/* eslint-disable strict */
-// UMD template: https://github.com/ForbesLindesay/umd/blob/master/template.js
-;(function(factory) { // eslint-disable-line no-extra-semi
+'use strict';
 
-    // CommonJS
-    if (typeof exports === 'object' && typeof module !== 'undefined') {
-        module.exports = factory();
+/**
+ * Module dependencies.
+ */
+var domToReact = require('./lib/dom-to-react');
+var htmlToDOM = (
+    process.browser && process.title === 'browser' ?
+    require('./lib/html-to-dom-client') :
+    require('./lib/html-to-dom-server')
+);
 
-    // RequireJS (AMD)
-    } else if (typeof define === 'function' && define.amd) { // eslint-disable-line no-undef
-        define([], factory()); // eslint-disable-line no-undef
-
-    // Browser (script tag)
-    } else {
-        var root;
-        if (typeof window !== 'undefined') {
-            root = window;
-        } else if (typeof global !== 'undefined') {
-            root = global;
-        } else if (typeof self !== 'undefined') {
-            root = self;
-        } else {
-            // works provided we're not in strict mode
-            root = this;
-        }
-
-        // define namespace
-        root.HTMLReactParser = factory();
+/**
+ * Convert HTML string to React elements.
+ *
+ * @param  {String}   html              - The HTML.
+ * @param  {Object}   [options]         - The additional options.
+ * @param  {Function} [options.replace] - The replace method.
+ * @return {ReactElement|Array}
+ */
+function HTMLReactParser(html, options) {
+    if (typeof html !== 'string') {
+        throw new Error('`HTMLReactParser`: The first argument must be a string.');
     }
+    return domToReact(htmlToDOM(html), options);
+}
 
-})(function() {
-
-    var domToReact = require('./lib/dom-to-react');
-    var htmlToDOM;
-
-    // client (browser)
-    if (typeof window !== 'undefined' && this === window) {
-        htmlToDOM = require('./lib/html-to-dom-client');
-
-    // server (node)
-    } else {
-        htmlToDOM = require('./lib/html-to-dom-server');
-    }
-
-    /**
-     * Convert HTML string to React elements.
-     *
-     * @param  {String}   html              - The HTML.
-     * @param  {Object}   [options]         - The additional options.
-     * @param  {Function} [options.replace] - The replace method.
-     * @return {ReactElement|Array}
-     */
-    function HTMLReactParser(html, options) {
-        if (typeof html !== 'string') {
-            throw new Error('`HTMLReactParser`: The first argument must be a string.');
-        }
-        return domToReact(htmlToDOM(html), options);
-    }
-
-    // source
-    return HTMLReactParser;
-
-});
+/**
+ * Export HTML to React parser.
+ */
+module.exports = HTMLReactParser;

lib/html-to-dom-client.js

@@ -105,3 +105,4 @@ 'use strict';
 function htmlToDOMClient(html) {
-    var match = typeof html === 'string' ? html.match(/<(.+?)>/) : null;
+    // from `<p>` or `<p style="">` get `p`
+    var match = typeof html === 'string' ? html.match(/<(.+?)[>\s]/) : null;
     var tagName;
@@ -112,3 +113,3 @@ var parentNode;
     if (match && typeof match[1] === 'string') {
-        tagName = match[1].toLowerCase();
+        tagName = match[1].trim().toLowerCase();
     }
@@ -115,0 +116,0 @@

package.json

 {
   "name": "html-react-parser",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "An HTML to React parser.",
@@ -8,2 +8,5 @@ "author": "Mark <[e-mail]>",
   "scripts": {
+    "build": "NODE_ENV=development webpack index.js dist/html-to-react.js",
+    "build-min": "NODE_ENV=production webpack -p index.js dist/html-to-react.min.js",
+    "prepublish": "npm run build && npm run build-min",
     "test": "mocha",
@@ -39,3 +42,4 @@ "lint": "eslint index.js \"lib/**\" \"test/**\"",
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "webpack": "^1.13.2"
   },
@@ -42,0 +46,0 @@ "peerDependencies": {

README.md

@@ -23,3 +23,3 @@ # html-react-parser
 var reactElement = (
-    Parser('<p>Hello, world!</p>') // equivalent to `React.createElement('p', {}, 'Hello, world!')`
+    Parser('<p>Hello, world!</p>') // same as `React.createElement('p', {}, 'Hello, world!')`
 );
@@ -76,4 +76,3 @@ require('react-dom').render(reactElement, document.getElementById('root'));
 
-The method has 1 parameter:
-1. `domNode`: An object which shares the same schema as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
+The first argument is `domNode`, which is an object which shares the same schema as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
 
@@ -99,3 +98,3 @@ ```js
 
-Working example:
+Simple example:
 
@@ -106,10 +105,16 @@ ```js
 
-var html = '<div><p id="main">replace me</p></div>';
+var html = (
+    '<div>' +
+        '<p id="replace">'
+            'replace me' +
+        '</p>' +
+    '</div>'
+);
 
 var reactElement = Parser(html, {
     replace: function(domNode) {
-        if (domNode.attribs && domNode.attribs.id === 'main') {
+        if (domNode.attribs && domNode.attribs.id === 'replace') {
             return React.createElement('span', {
-                style: { fontSize: '42px' } },
-            'replaced!');
+                style: { fontSize: '42px' }
+            }, 'replaced!');
             // equivalent jsx syntax:
@@ -121,6 +126,71 @@ // return <span style={{ fontSize: '42px' }}>replaced!</span>;
 
-require('react-dom').render(reactElement, document.getElementById('root'));
-// <div><span style="font-size: 42px;">replaced!</span></div>
+require('react-dom').render(
+    reactElement,
+    document.getElementById('root')
+);
+// <div>
+//     <span style="font-size: 42px;">
+//         replaced!
+//     </span>
+// </div>
 ```
 
+Advanced example (the replaced element's children are kept):
+
+```js
+var Parser = require('html-react-parser');
+var React = require('react');
+
+// used for recursively parsing DOM created from the HTML
+var domToReact = require('html-react-parser/lib/dom-to-react');
+
+var html = (
+    '<div>' +
+        '<p id="main">' +
+            '<span class="prettify">' +
+                'keep me and make me pretty!' +
+            '</span>' +
+        '</p>' +
+    '</div>'
+);
+
+var parserConfig = {
+    replace: function(domNode) {
+        var parsedChildren;
+        if (domNode.attribs) {
+            if (domNode.attribs.id === 'main') {
+                // continue parsing domNode's children with same config
+                parsedChildren = domToReact(domNode.children, parserConfig);
+                return React.createElement('span', {
+                    style: { fontSize: '42px' }
+                }, parsedChildren);
+                // equivalent jsx syntax:
+                // return <span style={{ fontSize: '42px' }}>{parsedChildren}</span>;
+
+            } else if (domNode.attribs.class === 'prettify') {
+                // continue parsing domNode's children with same config
+                parsedChildren = domToReact(domNode.children, parserConfig);
+                return React.createElement('span', {
+                    style: { color: 'hotpink' }
+                }, parsedChildren);
+                // equivalent jsx syntax:
+                // return <span style={{ color: 'hotpink' }}>{parsedChildren}</span>;
+            }
+        }
+    }
+};
+
+require('react-dom').render(
+    Parser(html, parserConfig),
+    document.getElementById('root')
+);
+// <div>
+//     <span style="font-size: 42px;">
+//         <span class="prettify" style="color: hotpink;">
+//             keep me and make me pretty!
+//         </span>
+//     </span>
+// </div>
+```
+
 ## Testing
@@ -130,2 +200,3 @@
 $ npm test
+$ npm run lint
 ```
@@ -135,3 +206,5 @@
 
-To [benox3](https://github.com/benox3) and [tdlm](https://github.com/tdlm) for their feedback and review.
+- 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.
 
@@ -138,0 +211,0 @@ ## License

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

86291

increased by296.78%

Number of package files

13

increased by30%

Lines of code

1922

increased by301.25%

Number of lines in readme file

207

increased by54.48%

Worsened metrics

Dev dependency count

8

increased by14.29%

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes