Merge pull request #44 from remarkablemark/react-16

Add `react-dom-core` to support react-dom@16

Author: remarkablemark

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com)
 and this project adheres to [Semantic Versioning](http://semver.org).
 
+## [Unreleased](https://github.com/remarkablemark/html-react-parser/compare/v0.3.6...HEAD)
+### Added
+- [react-dom-core](https://github.com/remarkablemark/react-dom-core) to dependencies (closes #43)
+  - `react-dom` 16 no longer exposes `lib`, which includes the DOM property configs
+  - Upgrade devDependencies of `react` and `react-dom` to 16
+  - Update README and examples
+
 ## [0.3.6](https://github.com/remarkablemark/html-react-parser/compare/v0.3.5...v0.3.6) - 2017-09-30
 ### Changed
 - Dependencies

README.md

@@ -17,7 +17,7 @@ The parser converts an HTML string to [React Element(s)](https://facebook.github
 
 There is also an option to [replace](#replacedomnode) element(s) with your own React Element(s) via the [parser options](#options).
 
-#### Example
+## Example
 
 ```js
 var Parser = require('html-react-parser');
@@ -32,37 +32,36 @@ Parser('<p>Hello, world!</p>');
 [NPM](https://www.npmjs.com/package/html-react-parser):
 
 ```sh
-$ npm install html-react-parser
+npm install html-react-parser --save
 ```
 
-Or if you're using react <15.4:
+[Yarn](https://yarn.fyi/html-react-parser):
 
 ```sh
-$ npm install html-react-parser@0.2
+yarn add html-react-parser
 ```
 
 [CDN](https://unpkg.com/html-react-parser/):
 
 ```html
-<!-- HTMLReactParser depends on React and ReactDOM -->
-<script src="https://unpkg.com/react@latest/dist/react.min.js"></script>
-<script src="https://unpkg.com/react-dom@latest/dist/react-dom.min.js"></script>
+<!-- HTMLReactParser depends on React -->
+<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
 ```
 
-See more [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples).
+See [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples).
 
 ## Usage
 
-Given that you have the following required:
+Given that you have the following imported:
 
 ```js
-// ES6
+// ES Modules
 import Parser from 'html-react-parser';
 import { render } from 'react-dom';
 ```
 
-You may render one element:
+You can render an element:
 
 ```js
 render(
@@ -71,7 +70,7 @@ render(
 );
 ```
 
-You may render adjacent elements:
+You can render multiple elements:
 
 ```js
 // with JSX
@@ -93,7 +92,7 @@ render(
 );
 ```
 
-You may render nested elements:
+You can render nested elements:
 
 ```js
 render(
@@ -117,7 +116,7 @@ render(
 
 The `replace` method allows you to swap an element with your own React Element.
 
-The first argument is `domNode`, which is an object that has the same output as [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
+The first argument is `domNode`, which is an object that has the same output as [`htmlparser2.parseDOM`](https://github.com/fb55/domhandler#example).
 
 The element is only replaced if a valid React Element is returned.
 
@@ -137,7 +136,7 @@ Advanced example (keep the replaced children):
 ```js
 // with ES6 and JSX
 
-// converts dom object to React Elements
+// converts DOM object to React Elements
 import domToReact from 'html-react-parser/lib/dom-to-react';
 
 const html = `
@@ -150,8 +149,7 @@ const html = `
     </div>
 `;
 
-// parser config
-const options = {
+const parserOptions = {
     replace: (domNode) => {
         // do not replace if element has no attributes
         if (!domNode.attribs) return;
@@ -174,12 +172,12 @@ const options = {
 };
 
 render(
-    Parser(html, options),
+    Parser(html, parserOptions),
     document.getElementById('root')
 );
 ```
 
-You will get the following:
+It will output the following:
 
 ```html
 <div>
@@ -200,8 +198,9 @@ $ npm run lint
 
 ## Special Thanks
 
-- [html-dom-parser](https://github.com/remarkablemark/html-dom-parser)
 - [Contributors](https://github.com/remarkablemark/html-react-parser/graphs/contributors)
+- [html-dom-parser](https://github.com/remarkablemark/html-dom-parser)
+- [react-dom-core](https://github.com/remarkablemark/react-dom-core)
 
 ## License
 

examples/requirejs.html

@@ -8,14 +8,14 @@
         <div id="root"></div>
 
         <!-- Require.js -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
+        <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@latest/dist/react.min',
-                    'react-dom': 'https://unpkg.com/react-dom@latest/dist/react-dom.min'
+                    'react': 'https://unpkg.com/react@16/umd/react.production.min',
+                    'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.production.min'
                 }
             });
 

examples/script-tag.html

@@ -7,11 +7,13 @@
     <body style="padding: 50px">
         <div id="root"></div>
 
-        <!-- HTMLReactParser depends on React and ReactDOM -->
-        <script src="https://unpkg.com/react@latest/dist/react.min.js"></script>
-        <script src="https://unpkg.com/react-dom@latest/dist/react-dom.min.js"></script>
+        <!-- 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>
 
+        <!-- ReactDOM -->
+        <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+
         <script>
             ReactDOM.render(
                 HTMLReactParser(

lib/property-config.js

@@ -6,8 +6,8 @@
 var utilities = require('./utilities');
 
 // HTML and SVG DOM Property Configs
-var HTMLDOMPropertyConfig = require('react-dom/lib/HTMLDOMPropertyConfig');
-var SVGDOMPropertyConfig = require('react-dom/lib/SVGDOMPropertyConfig');
+var HTMLDOMPropertyConfig = require('react-dom-core/lib/HTMLDOMPropertyConfig');
+var SVGDOMPropertyConfig = require('react-dom-core/lib/SVGDOMPropertyConfig');
 
 var config = {
     html: {},
@@ -18,44 +18,42 @@ var propertyName;
 
 /**
  * HTML DOM property config.
+ * https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
  */
 
-// first map out the HTML DOM attribute names
+// first map out the HTML attribute names
 // e.g., { className: 'class' } => { 'class': 'className' }
-// https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L204
 config.html = utilities.invertObject(
     HTMLDOMPropertyConfig.DOMAttributeNames
 );
 
-// then map out the rest of the HTML DOM properties
-// e.g., { charSet: 0 } => { charset: 'charSet' }
-// https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L28
+// then map out the rest of the HTML properties
+// e.g., { readOnly: 0 } => { readonly: 'readOnly' }
 for (propertyName in HTMLDOMPropertyConfig.Properties) {
     // lowercase to make matching property names easier
     config.html[propertyName.toLowerCase()] = propertyName;
 }
 
 /**
  * SVG DOM property config.
+ * https://github.com/facebook/react/blob/master/src/renderers/dom/shared/SVGDOMPropertyConfig.js
  */
 
-// first map out the SVG DOM attribute names
+// first map out the SVG attribute names
 // e.g., { fontSize: 'font-size' } => { 'font-size': 'fontSize' }
-// https://github.com/facebook/react/blob/master/src/renderers/dom/shared/SVGDOMPropertyConfig.js#L36
 config.svg = utilities.invertObject(
     SVGDOMPropertyConfig.DOMAttributeNames
 );
 
-// then map out the rest of the SVG DOM properties
-// e.g., { preserveAlpha: 0 } => { preserveAlpha: 'preserveAlpha' }
-// https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L28
+// then map out the rest of the SVG properties
+// e.g., { fillRule: 0 } => { fillRule: 'fillRule' }
 for (propertyName in SVGDOMPropertyConfig.Properties) {
     // do not lowercase as some svg properties are camel cased
     config.html[propertyName] = propertyName;
 }
 
 /**
- * Export React property configs.
+ * Export property configs.
  */
 module.exports = {
     config: config,

package.json

@@ -29,20 +29,20 @@
     "converter"
   ],
   "dependencies": {
-    "html-dom-parser": "0.1.2"
+    "html-dom-parser": "0.1.2",
+    "react-dom-core": "0.0.2"
   },
   "devDependencies": {
     "coveralls": "^2.13.1",
     "eslint": "^4.1.1",
     "istanbul": "^0.4.5",
     "mocha": "^3.4.2",
-    "react": "^15.4",
-    "react-dom": "^15.4",
+    "react": "^16",
+    "react-dom": "^16",
     "webpack": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^15.4",
-    "react-dom": "^15.4"
+    "react": "^0.14 || ^15 || ^16"
   },
   "license": "MIT"
 }

test/helpers/mocks.json

@@ -4,7 +4,7 @@
     "multiple": "<p>foo</p><p>bar</p>",
     "nested": "<div><p>foo <em>bar</em></p></div>",
     "attributes": "<hr id=\"foo\" class=\"bar baz\" style=\"background: #fff; text-align: center;\" data-foo=\"bar\" />",
-    "complex": "<html><head><meta charset=\"utf-8\"/><title>Title</title><link rel=\"stylesheet\" href=\"style.css\"/></head><body><header id=\"header\">Header</header><h1 style=\"color:#000;font-size:42px;\">Heading</h1><hr/><p>Paragraph</p><img src=\"image.jpg\"/><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
+    "complex": "<html><head><meta charSet=\"utf-8\"/><title>Title</title><link rel=\"stylesheet\" href=\"style.css\"/></head><body><header id=\"header\">Header</header><h1 style=\"color:#000;font-size:42px\">Heading</h1><hr/><p>Paragraph</p><img src=\"image.jpg\"/><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
     "textarea": "<textarea>foo</textarea>",
     "script": "<script>alert(1 < 2);</script>",
     "style": "<style>body > .foo { color: #f00; }</style>",