Merge pull request #113 from remarkablemark/build/package

build(package): update dependencies, tidy docs and examples, generate sourcemap
remarkablemark · Jun 24, 2019 · e2e6414 · e2e6414
2 parents 63e7d51 + 5dd4f07
commit e2e6414
Show file tree

Hide file tree

Showing 11 changed files with 183 additions and 109 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,7 +7,8 @@
   },
   "extends": "eslint:recommended",
   "parserOptions": {
-    "ecmaVersion": 6
+    "ecmaVersion": 6,
+    "sourceType": "module"
   },
   "plugins": ["prettier"],
   "rules": {

diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,51 @@
-node_modules
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
 coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Build files
+build
 dist
+
+# Vim swap files
 *.swp
-*.log
+
+# Mac OS
 .DS_Store
diff --git a/.huskyrc b/.huskyrc
@@ -1,6 +1,6 @@
 {
   "hooks": {
-    "pre-commit": "npm test && lint-staged",
-    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+    "pre-commit": "npm run test:coverage && lint-staged"
   }
 }
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -1,3 +1,5 @@
 {
-  "*.js": ["npm run lint:fix", "git add"]
+  "*.js": ["npm run lint:fix", "git add"],
+  "*.{html,json,md,yml}": ["prettier --write", "git add"],
+  "*.*rc": ["prettier --write --parser json", "git add"]
 }
diff --git a/.travis.yml b/.travis.yml
@@ -4,14 +4,14 @@ node_js:
 install:
   - npm install
 script:
-  # Lint last commit from history
+  # Lint last commit message from history
   - npx commitlint --from=HEAD~1
   - npm run lint
   - npm run dtslint
-  - npm run test:cover
+  - npm run test:coverage
   - npm run build
   - npm run benchmark
-after_script:
+after_success:
   - npm run coveralls
 cache:
   directories:

diff --git a/README.md b/README.md
@@ -8,24 +8,22 @@
 [![Dependency status](https://david-dm.org/remarkablemark/html-react-parser.svg)](https://david-dm.org/remarkablemark/html-react-parser)
 [![NPM downloads](https://img.shields.io/npm/dm/html-react-parser.svg?style=flat-square)](https://www.npmjs.com/package/html-react-parser)
 
-An HTML to React parser that works on both the server and the browser:
+HTML to React parser that works on both the server (Node.js) and client (browser):
 
 ```
 HTMLReactParser(string[, options])
 ```
 
-The parser converts an HTML string to [React element(s)](https://reactjs.org/docs/react-api.html#creating-react-elements). If you want to [replace an element](#replacedomnode) with your own custom element, there's an [option](#options) to do that.
+It converts an HTML string to one or more [React elements](https://reactjs.org/docs/react-api.html#creating-react-elements). There's also an option to [replace an element](#replacedomnode) with your own.
 
-Example:
+#### Example:
 
 ```js
 var parse = require('html-react-parser');
 parse('<div>text</div>'); // equivalent to `React.createElement('div', {}, 'text')`
 ```
 
-[CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [repl.it](https://repl.it/@remarkablemark/html-react-parser)
-
-See [usage](#usage) and [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples).
+[CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [Repl.it](https://repl.it/@remarkablemark/html-react-parser) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples).
 
 ## Installation
 
@@ -41,7 +39,7 @@ $ npm install html-react-parser --save
 $ yarn add html-react-parser
 ```
 
-[unpkg](https://unpkg.com/html-react-parser/) (CDN):
+[CDN](https://unpkg.com/html-react-parser/):
 
 ```html
 <!-- HTMLReactParser depends on React -->
@@ -54,9 +52,12 @@ $ yarn add html-react-parser
 
 ## Usage
 
-Given `html-react-parser` is imported:
+Import the module:
 
 ```js
+// CommonJS
+const parse = require('html-react-parser');
+
 // ES Modules
 import parse from 'html-react-parser';
 ```
@@ -70,26 +71,31 @@ parse('<h1>single</h1>');
 Parse multiple elements:
 
 ```js
-parse('<p>sibling 1</p><p>sibling 2</p>');
+parse('<li>Item 1</li><li>Item 2</li>');
 ```
 
-Because the parser returns an array for adjacent elements, make sure it's nested under a parent element when rendered:
+But make sure to render the parsed adjacent elements under a parent element since the parsed output is an array:
 
 ```jsx
-import React, { Component } from 'react';
+import React from 'react';
 import parse from 'html-react-parser';
 
-class App extends Component {
-  render() {
-    return <div>{parse('<p>sibling 1</p><p>sibling 2</p>')}</div>;
-  }
+function App() {
+  return (
+    <ul>
+      {parse(`
+        <li>Item 1</li>
+        <li>Item 2</li>
+      `)}
+    </ul>
+  );
 }
 ```
 
 Parse nested elements:
 
 ```js
-parse('<ul><li>item</li></ul>');
+parse('<body><p>Lorem ipsum</p></body>');
 ```
 
 Parse element with attributes:
@@ -120,7 +126,7 @@ parse('<p id="replace">text</p>', {
 });
 ```
 
-The following [example](https://repl.it/@remarkablemark/html-react-parser-replace-example) uses `replace` to modify the children:
+[Example](https://repl.it/@remarkablemark/html-react-parser-replace-example) that modifies an element but keeps the children:
 
 ```jsx
 import React from 'react';
@@ -157,7 +163,7 @@ const reactElement = parse(html, options);
 console.log(renderToStaticMarkup(reactElement));
 ```
 
-The output:
+Output:
 
 ```html
 <h1 style="font-size:42px">
@@ -167,7 +173,7 @@ The output:
 </h1>
 ```
 
-The following [example](https://repl.it/@remarkablemark/html-react-parser-issue-56) uses `replace` to exclude an element:
+[Example](https://repl.it/@remarkablemark/html-react-parser-issue-56) that excludes an element:
 
 ```jsx
 parse('<p><br id="remove"></p>', {
@@ -201,13 +207,18 @@ $ npm test
 Run tests with coverage:
 
 ```sh
-$ npm run test:cover
+$ npm run test:coverage
 ```
 
 Lint files:
 
 ```sh
 $ npm run lint
+```
+
+Fix lint errors:
+
+```sh
 $ npm run lint:fix
 ```
 

diff --git a/examples/requirejs.html b/examples/requirejs.html
@@ -1,36 +1,38 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <title>Load with Require.js (AMD)</title>
-    </head>
-    <body style="padding: 50px">
-        <div id="root"></div>
+  <head>
+    <meta charset="utf-8" />
+    <title>Load with Require.js (AMD)</title>
+  </head>
+  <body style="padding: 50px">
+    <div id="root"></div>
 
-        <!-- Require.js -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
+    <!-- Require.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
 
-        <script>
-            requirejs.config({
-                paths: {
-                    'html-react-parser': '../dist/html-react-parser.min',
-                    'react': 'https://unpkg.com/react@16/umd/react.production.min',
-                    'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.production.min'
-                }
-            });
+    <script>
+      window.requirejs.config({
+        paths: {
+          'html-react-parser': '../dist/html-react-parser.min',
+          react: 'https://unpkg.com/react@16/umd/react.production.min',
+          'react-dom':
+            'https://unpkg.com/react-dom@16/umd/react-dom.production.min'
+        }
+      });
 
-            requirejs([
-                'react-dom', 'html-react-parser'
-            ], function(ReactDOM, HTMLReactParser) {
-                ReactDOM.render(
-                    HTMLReactParser(
-                        '<h2 style="font-family:\'Lucida Grande\';">' +
-                            'HTMLReactParser loaded with Require.js' +
-                        '<\/h2>'
-                    ),
-                    document.getElementById('root')
-                );
-            });
-        </script>
-    </body>
+      window.requirejs(['react-dom', 'html-react-parser'], function(
+        ReactDOM,
+        HTMLReactParser
+      ) {
+        ReactDOM.render(
+          HTMLReactParser(
+            '<h2 style="font-family:\'Lucida Grande\';">' +
+              'HTMLReactParser loaded with Require.js' +
+              '<\/h2>'
+          ),
+          document.getElementById('root')
+        );
+      });
+    </script>
+  </body>
 </html>
diff --git a/examples/script-tag.html b/examples/script-tag.html
@@ -1,28 +1,32 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <title>Load with Script Tag</title>
-    </head>
-    <body style="padding: 50px">
-        <div id="root"></div>
+  <head>
+    <meta charset="utf-8" />
+    <title>Load with Script Tag</title>
+  </head>
+  <body style="padding: 50px;">
+    <div id="root"></div>
 
-        <!-- HTMLReactParser depends on React -->
-        <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-        <script src="../dist/html-react-parser.min.js"></script>
+    <!-- React -->
+    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+    <!-- <script src="https://unpkg.com/react@15/dist/react.min.js"></script> -->
 
-        <!-- ReactDOM -->
-        <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <!-- HTMLReactParser -->
+    <script src="../dist/html-react-parser.min.js"></script>
 
-        <script>
-            ReactDOM.render(
-                HTMLReactParser(
-                    '<h2 style="font-family:\'Lucida Grande\';">' +
-                        'HTMLReactParser loaded with script tag' +
-                    '<\/h2>'
-                ),
-                document.getElementById('root')
-            );
-        </script>
-    </body>
+    <!-- ReactDOM -->
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <!-- <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> -->
+
+    <script>
+      ReactDOM.render(
+        HTMLReactParser(
+          '<h2 style="font-family: \'Lucida Grande\', sans-serif;">' +
+            'HTMLReactParser loaded with script tag' +
+            '<\/h2>'
+        ),
+        document.getElementById('root')
+      );
+    </script>
+  </body>
 </html>
diff --git a/lib/attributes-to-props.js b/lib/attributes-to-props.js
@@ -35,7 +35,10 @@ function attributesToProps(attributes) {
     reactProperty = config.html[propertyName.toLowerCase()];
     if (reactProperty) {
       if (
-        DOMProperty.properties.hasOwnProperty(reactProperty) &&
+        Object.prototype.hasOwnProperty.call(
+          DOMProperty.properties,
+          reactProperty
+        ) &&
         DOMProperty.properties[reactProperty].hasBooleanValue
       ) {
         props[reactProperty] = true;