From 56c20fa6d12ff8c09975cd168fd9eb621b3c3cce Mon Sep 17 00:00:00 2001 From: Mark Date: Sun, 1 Oct 2017 00:50:00 -0400 Subject: [PATCH 1/5] feat(property-config): get property configs from `react-dom-core` Because `react-dom` v16 no longer exposes `lib`, `react-dom-core` is used. See issue: https://github.com/facebook/react/issues/10391 Resolves #43 --- lib/property-config.js | 24 +++++++++++------------- package.json | 3 ++- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/lib/property-config.js b/lib/property-config.js index 48d911f6..f5de410c 100644 --- a/lib/property-config.js +++ b/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,18 +18,17 @@ 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; @@ -37,25 +36,24 @@ for (propertyName in HTMLDOMPropertyConfig.Properties) { /** * 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, diff --git a/package.json b/package.json index 7cc76077..f5e9e9de 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "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", From 4802b928ef303cedc38648362a4ac39567a2f1da Mon Sep 17 00:00:00 2001 From: Mark Date: Sun, 1 Oct 2017 14:44:00 -0400 Subject: [PATCH 2/5] chore(package): upgrade `react` and `react-dom` to 16 And update test fixtures as `ReactDOMServer.renderToStaticMarkup()` has changed in its output compared to the previous major version. --- package.json | 7 +++---- test/helpers/mocks.json | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index f5e9e9de..2cdb2249 100644 --- a/package.json +++ b/package.json @@ -37,13 +37,12 @@ "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" } diff --git a/test/helpers/mocks.json b/test/helpers/mocks.json index c8795803..d18ec1d6 100644 --- a/test/helpers/mocks.json +++ b/test/helpers/mocks.json @@ -4,7 +4,7 @@ "multiple": "

foo

bar

", "nested": "

foo bar

", "attributes": "
", - "complex": "Title
Header

Heading

Paragraph

Some text.
", + "complex": "Title
Header

Heading

Paragraph

Some text.
", "textarea": "", "script": "", "style": "", From 53ca089389f168282930b1c243d9fa0b6e3e36b3 Mon Sep 17 00:00:00 2001 From: Mark Date: Sun, 1 Oct 2017 14:45:53 -0400 Subject: [PATCH 3/5] chore(examples): update examples to use `react` and `react-dom` v16 --- examples/requirejs.html | 6 +++--- examples/script-tag.html | 8 +++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/examples/requirejs.html b/examples/requirejs.html index 6ee9467e..dc57adbd 100644 --- a/examples/requirejs.html +++ b/examples/requirejs.html @@ -8,14 +8,14 @@
- + - + + + + + - + + ``` -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 = ` `; -// 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
@@ -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 From d760c470f7183f11802f701124dbca58b9f84647 Mon Sep 17 00:00:00 2001 From: Mark Date: Sun, 1 Oct 2017 15:20:16 -0400 Subject: [PATCH 5/5] chore(changelog): update changelog with `react-dom-core` addition --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e085d79d..691c9f9d 100644 --- a/CHANGELOG.md +++ b/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