├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── demo
    ├── .babelrc
    ├── package-lock.json
    ├── package.json
    ├── server.js
    ├── src
    │   ├── index.html
    │   ├── js
    │   │   ├── actions.js
    │   │   ├── components
    │   │   │   ├── App.js
    │   │   │   ├── Editor.js
    │   │   │   ├── Header.js
    │   │   │   └── Html.js
    │   │   ├── containers
    │   │   │   ├── Content.js
    │   │   │   ├── Editor.js
    │   │   │   └── Html.js
    │   │   ├── data
    │   │   │   ├── entities
    │   │   │   │   ├── html.html
    │   │   │   │   ├── index.js
    │   │   │   │   └── options.js
    │   │   │   ├── index.js
    │   │   │   ├── simple
    │   │   │   │   ├── html.html
    │   │   │   │   ├── index.js
    │   │   │   │   └── options.js
    │   │   │   └── transform
    │   │   │   │   ├── display.txt
    │   │   │   │   ├── html.html
    │   │   │   │   ├── index.js
    │   │   │   │   └── options.js
    │   │   ├── index.js
    │   │   └── reducers.js
    │   └── sass
    │   │   ├── app.scss
    │   │   ├── editor.scss
    │   │   ├── header.scss
    │   │   └── html.scss
    ├── webpack.config.base.js
    ├── webpack.config.development.js
    └── webpack.config.production.js
├── karma.conf.js
├── package-lock.json
├── package.json
├── scripts
    └── attributes-diff.js
├── src
    ├── HtmlParser.js
    ├── convertNodeToElement.js
    ├── dom
    │   ├── attributes
    │   │   ├── BooleanAttributes.js
    │   │   └── ReactAttributes.js
    │   └── elements
    │   │   └── VoidElements.js
    ├── elementTypes
    │   ├── StyleElementType.js
    │   ├── TagElementType.js
    │   ├── TextElementType.js
    │   ├── UnsupportedElementType.js
    │   └── index.js
    ├── index.js
    ├── processNodes.js
    └── utils
    │   ├── generatePropsFromAttributes.js
    │   ├── htmlAttributesToReact.js
    │   ├── inlineStyleToObject.js
    │   ├── isEmptyTextNode.js
    │   └── isValidTagOrAttributeName.js
├── test
    ├── integration
    │   └── integration.spec.js
    └── unit
    │   ├── HtmlParser.spec.js
    │   ├── convertNodeToElement.spec.js
    │   ├── elementTypes
    │       ├── StyleElementType.spec.js
    │       ├── TagElementType.spec.js
    │       ├── TextElementType.spec.js
    │       └── UnsupportedElementType.spec.js
    │   ├── processNodes.spec.js
    │   └── utils
    │       ├── generatePropsFromAttributes.spec.js
    │       ├── htmlAttributesToReact.spec.js
    │       ├── inlineStyleToObject.spec.js
    │       ├── isEmptyTextNode.spec.js
    │       └── isValidTagOrAttributeName.spec.js
├── tests.webpack.js
├── webpack.config.base.js
├── webpack.config.development.js
├── webpack.config.production.js
└── webpack.config.test.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "react",
 4 |     "es2015"
 5 |   ],
 6 |   "plugins": [
 7 |     "transform-object-assign",
 8 |     "transform-object-rest-spread"
 9 |   ]
10 | }


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "eslint:recommended",
 3 |   "parserOptions": {
 4 |     "ecmaVersion": 6,
 5 |     "sourceType": "module",
 6 |     "ecmaFeatures": {
 7 |       "jsx": true,
 8 |       "experimentalObjectRestSpread": true
 9 |     }
10 |   },
11 |   "env": {
12 |     "browser": true,
13 |     "node": true,
14 |     "jasmine": true,
15 |     "es6": true
16 |   },
17 |   "plugins": [
18 |     "react"
19 |   ],
20 |   "rules": {
21 |     "semi": [2, "always"],
22 |     "quotes": [2, "single"],
23 |     "indent": [2, 2, {"SwitchCase": 1}],
24 |     "eol-last": 2,
25 |     "react/jsx-uses-react": 1,
26 |     "react/jsx-uses-vars": 1
27 |   }
28 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | .idea
3 | node_modules
4 | dist/
5 | coverage/
6 | lib/


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .babelrc
3 | .eslintrc
4 | .travis.yml
5 | karma.conf.js
6 | tests.webpack.js
7 | webpack.config.*.js
8 | coverage/
9 | test/


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - 8
 5 | 
 6 | env:
 7 |   - REACT_VERSION=16
 8 |   - REACT_VERSION=15
 9 | 
10 | script:
11 |   - npm run lint
12 |   - npm test
13 | 
14 | before_script:
15 |   - npm install react@$REACT_VERSION react-dom@$REACT_VERSION
16 | 
17 | after_script:
18 |   - "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"  # Send coverage data to Coveralls
19 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | ## v2.0.2
 4 | ### Bug Fixes
 5 | - Fix empty inline style attribute breaking rendering [#34](https://github.com/wrakky/react-html-parser/pull/34) ([kevinzwhuang](https://github.com/kevinzwhuang))
 6 | 
 7 | ## v2.0.1
 8 | ### Updates
 9 | - Added `preprocessNodes` option to ReactHTMLParser function. This function is passed the raw
10 | node tree before `react-html-parser` processes it which it should return after any modifications
11 | are made to it
12 | - Exposed `htmlparser2` library
13 | - Updated the demo site to React v16
14 | 
15 | ## v2.0.0
16 | ### Breaking Changes
17 | - ReactHtmlParser now decodes html entities by default
18 | - html, head and body tags are no longer automatically converted to div tags
19 | ### Updates
20 | - Add React v16 as a peer dependency
21 | - Added new options parameter to ReactHtmlParser function with following properties:
22 |   - `decodeEntities` (boolean: default true) - whether to decode HTML entities
23 |   - `transform` (function) - function that can be used to transform parsed elements
24 | - Tags and attributes with invalid formats are now ignored and prevent React from blowing up
25 | ### Bug Fixes
26 | - Fixed bug where inline styles containing colons would not be generated correctly [#9](https://github.com/wrakky/react-html-parser/issues/9)
27 | 
28 | ## v1.0.3
29 | ### Updates
30 | - Added React v15 as a peer dependency
31 | ### Bug Fixes
32 | - Match boolean attributes when defined with upper or lower case characters [#5](https://github.com/wrakky/react-html-parser/issues/5)
33 | 
34 | ## v1.0.2
35 | ### Bug Fixes
36 | - Don't add children to void elements such as img or br [#1](https://github.com/wrakky/react-html-parser/issues/1)
37 | - Correctly render boolean attributes - disabled, checked, etc [#3](https://github.com/wrakky/react-html-parser/issues/3)
38 | 
39 | ## v1.0.0
40 | ### Initial Release
41 | - Render HTML elements and text
42 | - Map HTML attribute names to React HTML prop names
43 | - Convert inline style strings to React style object format
44 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016-present Peter Newnham
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React HTML Parser
  2 | 
  3 | A utility for converting HTML strings into [React](https://facebook.github.io/react/) components. Converts standard HTML elements, attributes and inline styles into their React equivalents and provides a simple way to modify and replace the content.
  4 | 
  5 | [Try the Live Demo](https://wrakky.github.io/react-html-parser)
  6 | 
  7 | [![Travis branch](https://img.shields.io/travis/wrakky/react-html-parser/master.svg)](https://travis-ci.org/wrakky/react-html-parser)
  8 | [![Coveralls](https://img.shields.io/coveralls/wrakky/react-html-parser.svg)](https://coveralls.io/github/wrakky/react-html-parser)
  9 | [![npm](https://img.shields.io/npm/v/react-html-parser.svg)](https://www.npmjs.com/package/react-html-parser)
 10 | [![Downloads](https://img.shields.io/npm/dw/react-html-parser.svg)](https://www.npmjs.com/package/react-html-parser)
 11 | [![David](https://img.shields.io/david/wrakky/react-html-parser.svg)](https://david-dm.org/wrakky/react-html-parser)
 12 | 
 13 | ## Install
 14 | 
 15 | ```bash
 16 | npm install react-html-parser
 17 | # or
 18 | yarn add react-html-parser
 19 | ```
 20 | 
 21 | ## Usage
 22 | 
 23 | ```javascript
 24 | import React from 'react';
 25 | import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
 26 | 
 27 | class HtmlComponent extends React.Component {
 28 |   render() {
 29 |     const html = '<div>Example HTML string</div>';
 30 |     return <div>{ ReactHtmlParser(html) }</div>;
 31 |   }
 32 | }
 33 | ```
 34 | 
 35 | ## Security
 36 | 
 37 | It is important to understand that this library should not be used as a direct replacement for using properly sanitized HTML and that it only provides the same level of protection that React does which does not provide 100% protection. All HTML should be properly sanitized using a dedicated sanitisation library (such as [dompurify](https://www.npmjs.com/package/dompurify) for node/js) before being passed to this library to ensure that you are fully protected from [malicious injections](https://en.wikipedia.org/wiki/Cross-site_scripting).
 38 | 
 39 | ### What doesn't React protect me from?
 40 | 
 41 | Whilst React has a [certain level of protection to injection attacks](https://reactjs.org/docs/introducing-jsx.html#jsx-prevents-injection-attacks) built into it, it doesn't cover everything, for example:
 42 | * xss via iframe src: `<iframe src="javascript:alert('xss')" />`
 43 | * xss via link href: `<a href="javascript:alert('xss')">click me</a>`
 44 | 
 45 | [Click here](https://codesandbox.io/s/reacthtmlparser-xss-examples-ijgiu?file=/src/App.js) to see these in action and how to protect yourself using [dompurify](https://www.npmjs.com/package/dompurify) in the browser.
 46 | 
 47 | ### Why doesn't ReactHTMLParser protect me automatically?
 48 | 
 49 | Including a sanitizer as part of the library means it is making decisions for you that may not be correct. It is up to you to decide what level of sanitization you need and to act accordingly. Some users may already be sanitizing on the server or others may have specialized requirements that cannot be covered by a generic implementation.
 50 | 
 51 | Additionally, HTML sanitization is a hard thing to get right and even the most popular and actively developed sanitizers have [vulnerabilities discovered](https://snyk.io/vuln/npm:dompurify) from time to time. By leaving the sanitization outside of this library it gives users the ability to patch and deploy any fixes needed immediately instead of having to wait for a new version of this library to be released with the fix.
 52 | 
 53 | ## API
 54 | 
 55 | ### `function ReactHtmlParser(html, [options])`
 56 | Takes an HTML string and returns equivalent React elements
 57 | 
 58 | #### Usage
 59 | ```js
 60 | import ReactHtmlParser from 'react-html-parser';
 61 | ```
 62 | #### Arguments
 63 | - `html`: The HTML string to parse
 64 | - `options`: Options object
 65 |   - decodeEntities=true *(boolean)*: Whether to decode html entities (defaults to true)
 66 |   - transform *(function)*: Transform function that is applied to every node
 67 |   - preprocessNodes *(function)*: Pre-process the nodes generated by `htmlparser2`
 68 | 
 69 | #### Transform Function
 70 | The transform function will be called for every node that is parsed by the library.
 71 | 
 72 | `function transform(node, index)`
 73 | ##### Arguments
 74 | - `node`: The node being parsed. This is the [htmlparser2](https://github.com/fb55/htmlparser2) node object. Full details can be found on their project page but important properties are:
 75 |   - `type` (string): The type of node *(tag, text, style etc)*
 76 |   - `name` (string): The name of the node
 77 |   - `children` (array): Array of children nodes
 78 |   - `next` (node): The node's next sibling
 79 |   - `prev` (node): The node's previous sibling
 80 |   - `parent` (node): The node's parent
 81 |   - `data` (string): The text content, if the `type` is text
 82 | - `index` (number): The index of the node in relation to it's parent
 83 | 
 84 | #### Return Types
 85 | `return null`
 86 | Returning null will prevent the node and all of it's children from being rendered.
 87 | ```js
 88 | function transform(node) {
 89 |   // do not render any <span> tags
 90 |   if (node.type === 'tag' && node.name === 'span') {
 91 |     return null;
 92 |   }
 93 | }
 94 | ```
 95 | `return undefined`
 96 | If the function does not return anything, or returns undefined, then the default behaviour will occur and the parser will continue was usual.
 97 | 
 98 | `return React element`
 99 | React elements can be returned directly
100 | ```js
101 | import React from 'react';
102 | function transform(node) {
103 |   if (node.type === 'tag' && node.name === 'b') {
104 |     return <div>This was a bold tag</div>;
105 |   }
106 | }
107 | ```
108 | 
109 | #### preprocessNodes Function
110 | Allows pre-processing the nodes generated from the html by `htmlparser2` before being passed to the library and converted to React elements.
111 | 
112 | `function preprocessNodes(nodes)`
113 | ##### Arguments
114 | - `nodes`: The entire node tree generated by `htmlparser2`.
115 | 
116 | ##### Return type
117 | The `preprocessNodes` function should return a valid `htmlparser2` node tree.
118 | 
119 | ### `function convertNodeToElement(node, index, transform)`
120 | Processes a node and returns the React element to be rendered. This function can be used in conjunction with the previously described `transform` function to continue to process a node after modifying it.
121 | 
122 | #### Usage
123 | ```js
124 | import { convertNodeToElement } from 'react-html-parser';
125 | ```
126 | #### Arguments
127 | - `node`: The node to process
128 | - `index` (number): The index of the node in relation to it's parent
129 | - `transform`: The transform function as described above
130 | 
131 | ```js
132 | import { convertNodeToElement } from 'react-html-parser';
133 | function transform(node, index) {
134 |   // convert <ul> to <ol>
135 |   if (node.type === 'tag' && node.name === 'ul') {
136 |     node.name = 'ol';
137 |     return convertNodeToElement(node, index, transform);
138 |   }
139 | }
140 | ```
141 | 
142 | ### `htmlparser2`
143 | The library exposes the `htmlparser2` library it uses. This allows consumers
144 | to use it without having to add it as a separate dependency.
145 | 
146 | See https://github.com/fb55/htmlparser2 for full details.
147 | 


--------------------------------------------------------------------------------
/demo/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "react",
4 |     "es2015",
5 |     "stage-2"
6 |   ],
7 |   "plugins": ["react-hot-loader/babel"]
8 | }


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-html-parser-demo",
 3 |   "version": "0.0.0",
 4 |   "description": "Demo for the React HTML Parser library",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node server.js",
 8 |     "build": "webpack --config webpack.config.production.js --progress",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "author": "Peter Newnham",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "autoprefixer": "^6.3.6",
15 |     "babel-cli": "^6.8.0",
16 |     "babel-core": "^6.8.0",
17 |     "babel-preset-es2015": "^6.6.0",
18 |     "babel-preset-react": "^6.5.0",
19 |     "babel-preset-stage-2": "^6.5.0",
20 |     "css-loader": "^0.23.1",
21 |     "extract-text-webpack-plugin": "^1.0.1",
22 |     "html-webpack-plugin": "^2.17.0",
23 |     "json-loader": "^0.5.4",
24 |     "node-sass": "^3.7.0",
25 |     "postcss-loader": "^0.9.1",
26 |     "raw-loader": "^0.5.1",
27 |     "react-hot-loader": "^3.0.0-beta.7",
28 |     "redux-devtools": "^3.3.1",
29 |     "sass-loader": "^3.2.0",
30 |     "style-loader": "^0.13.1",
31 |     "webpack": "^1.13.0",
32 |     "webpack-dev-server": "^1.14.1"
33 |   },
34 |   "dependencies": {
35 |     "brace": "^0.8.0",
36 |     "normalize-scss": "^4.2.1",
37 |     "prop-types": "^15.6.0",
38 |     "react": "^16.0.0",
39 |     "react-ace": "^5.1.2",
40 |     "react-dom": "^16.0.0",
41 |     "react-redux": "^5.0.6",
42 |     "redux": "^3.7.2"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/demo/server.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var WebpackDevServer = require('webpack-dev-server');
 3 | var config = require('./webpack.config.development');
 4 | 
 5 | new WebpackDevServer(webpack(config), {
 6 |   hot: true,
 7 |   historyApiFallback: true,
 8 |   stats: {
 9 |     colors: true
10 |   }
11 | }).listen(3000, 'localhost', function (err, result) {
12 |   if (err) {
13 |     console.log(err);
14 |   }
15 | 
16 |   console.log('Listening at localhost:3000');
17 | });


--------------------------------------------------------------------------------
/demo/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 5 |   <title>React HTML Parser Demo</title>
 6 | </head>
 7 | <body>
 8 |   <div id="root"></div>
 9 |   <script>
10 |     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
11 |           (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
12 |         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
13 |     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
14 |     ga('create', 'UA-128849-4', 'auto');
15 |     ga('send', 'pageview');
16 |   </script>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/demo/src/js/actions.js:
--------------------------------------------------------------------------------
 1 | export function updateHtml(html) {
 2 |   return {
 3 |     type: 'UPDATE_HTML',
 4 |     html
 5 |   };
 6 | }
 7 | 
 8 | export function updateSelectedExample(example) {
 9 |   return {
10 |     type: 'UPDATE_SELECTED_EXAMPLE',
11 |     example
12 |   };
13 | }
14 | 
15 | export function setView(view) {
16 |   return {
17 |     type: 'SET_VIEW',
18 |     view
19 |   };
20 | }
21 | 


--------------------------------------------------------------------------------
/demo/src/js/components/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import 'sass/app';
 3 | 
 4 | import Header from './Header';
 5 | import Editor from '../containers/Editor';
 6 | import Html from '../containers/Html';
 7 | 
 8 | export default function App() {
 9 |   return (
10 |     <div id="app">
11 |       <Header />
12 |       <main id="content">
13 |         <Editor />
14 |         <Html />
15 |       </main>
16 |     </div>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/demo/src/js/components/Editor.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import 'brace';
  4 | import 'brace/mode/html';
  5 | import 'brace/theme/chrome';
  6 | import AceEditor from 'react-ace';
  7 | 
  8 | import 'sass/editor';
  9 | import data from '../data';
 10 | 
 11 | export default class Editor extends Component {
 12 |   onEditorChange(html) {
 13 |     this.props.onUpdateHtml(html);
 14 |   }
 15 |   onEditorLoad(editor) {
 16 |     editor.session.setUseWorker(false);
 17 |     editor.session.setUseWrapMode(true);
 18 |   }
 19 |   onExampleChange(example) {
 20 |     this.props.onUpdateExample(example);
 21 |   }
 22 | 
 23 |   onViewChange(view) {
 24 |     this.props.onSetView(view);
 25 |   }
 26 | 
 27 |   generateViewLinks(activeView) {
 28 | 
 29 |     const views = [
 30 |       { id:'html', label:'HTML' },
 31 |       { id: 'options', label:'Options' }
 32 |     ];
 33 | 
 34 |     return views.map(view => {
 35 |       const contents = view.id === activeView ?
 36 |         view.label : <a href="#" onClick={e => { e.preventDefault(); this.onViewChange(view.id); } }>{view.label}</a>;
 37 |       return <li key={ view.id }>{contents}</li>;
 38 |     });
 39 | 
 40 |   }
 41 | 
 42 |   generateEditor(view) {
 43 | 
 44 |     const editorProps = {
 45 |       $blockScrolling: Infinity,
 46 |       wrap: true
 47 |     };
 48 | 
 49 |     if (view === 'html') {
 50 |       const { html } = this.props;
 51 |       return <AceEditor mode="html"
 52 |                         theme="chrome"
 53 |                         name="HTML_EDITOR"
 54 |                         value={ html }
 55 |                         width="100%"
 56 |                         height="auto"
 57 |                         onChange={ value => this.onEditorChange(value) }
 58 |                         onLoad={ editor => this.onEditorLoad(editor) }
 59 |                         editorProps={ editorProps }
 60 |       />;
 61 |     }
 62 |     else {
 63 |       const { selectedExample } = this.props;
 64 |       const value = data[selectedExample].display ? data[selectedExample].display : `const options = ${JSON.stringify(data[selectedExample].options, null, 2)}`;
 65 |       return <AceEditor mode="javascript"
 66 |                         theme="chrome"
 67 |                         name="HTML_EDITOR"
 68 |                         value={ value }
 69 |                         width="100%"
 70 |                         height="auto"
 71 |                         readOnly={ true }
 72 |                         onLoad={ editor => this.onEditorLoad(editor) }
 73 |                         editorProps={ editorProps }
 74 |       />;
 75 |     }
 76 | 
 77 |   }
 78 | 
 79 |   render() {
 80 |     const { examples, selectedExample, view } = this.props;
 81 |     return (
 82 |       <div id="editor">
 83 |         <div className="presets">
 84 |           <div>
 85 |             <select onChange={ e => this.onExampleChange(e.target.value) } value={ selectedExample }>
 86 |               { examples.map(example => <option value={ example.value } key={ example.value }>{ example.label}</option>)}
 87 |             </select>
 88 |           </div>
 89 |           <ul>
 90 |             { this.generateViewLinks(view) }
 91 |           </ul>
 92 |         </div>
 93 |         { this.generateEditor(view) }
 94 |       </div>
 95 |     );
 96 |   }
 97 | }
 98 | 
 99 | Editor.propTypes = {
100 |   html: PropTypes.string.isRequired,
101 |   onUpdateHtml: PropTypes.func.isRequired
102 | };
103 | 


--------------------------------------------------------------------------------
/demo/src/js/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import 'sass/header';
 4 | 
 5 | export default function Header() {
 6 |   return (
 7 |     <header>
 8 |       <a href="https://github.com/wrakky/react-html-parser" target="_blank">
 9 |         <svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
10 |           <path id="github" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z" />
11 |         </svg>
12 |         View Project on GitHub
13 |       </a>
14 |       <h1>React HTML Parser Demo</h1>
15 |     </header>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/demo/src/js/components/Html.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ReactHtmlParser from 'react-html-parser';
 4 | 
 5 | import 'sass/html';
 6 | 
 7 | import data from '../data';
 8 | 
 9 | export default function Html(props) {
10 |   const { html, selectedExample } = props;
11 |   const options = data[selectedExample].options;
12 |   return (
13 |     <div id="html">
14 |       { ReactHtmlParser(html, options) }
15 |     </div>
16 |   );
17 | }
18 | 
19 | Html.propTypes = {
20 |   html: PropTypes.string.isRequired
21 | };
22 | 


--------------------------------------------------------------------------------
/demo/src/js/containers/Content.js:
--------------------------------------------------------------------------------
 1 | import { connect } from 'react-redux';
 2 | import { updateHtml } from '../actions';
 3 | import Content from '../components/Content';
 4 | 
 5 | const mapStateToProps = state => {
 6 |   return {
 7 |     html: state.html
 8 |   };
 9 | };
10 | 
11 | const mapDispatchToProps = dispatch => {
12 |   return {
13 |     onUpdateHtml: html => {
14 |       dispatch(updateHtml(html));
15 |     }
16 |   };
17 | };
18 | 
19 | export default connect(
20 |   mapStateToProps,
21 |   mapDispatchToProps
22 | )(Content);
23 | 


--------------------------------------------------------------------------------
/demo/src/js/containers/Editor.js:
--------------------------------------------------------------------------------
 1 | import { connect } from 'react-redux';
 2 | import { updateHtml, updateSelectedExample, setView } from '../actions';
 3 | import Editor from '../components/Editor';
 4 | 
 5 | const mapStateToProps = state => {
 6 |   return {
 7 |     html: state.html,
 8 |     examples: state.examples,
 9 |     selectedExample: state.selectedExample,
10 |     view: state.view
11 |   };
12 | };
13 | 
14 | const mapDispatchToProps = dispatch => {
15 |   return {
16 |     onUpdateHtml: html => dispatch(updateHtml(html)),
17 |     onUpdateExample: example => dispatch(updateSelectedExample(example)),
18 |     onSetView: view => dispatch(setView(view))
19 |   };
20 | };
21 | 
22 | export default connect(
23 |   mapStateToProps,
24 |   mapDispatchToProps
25 | )(Editor);
26 | 


--------------------------------------------------------------------------------
/demo/src/js/containers/Html.js:
--------------------------------------------------------------------------------
 1 | import { connect } from 'react-redux';
 2 | import Content from '../components/Html';
 3 | 
 4 | const mapStateToProps = state => {
 5 |   return {
 6 |     html: state.html,
 7 |     selectedExample: state.selectedExample
 8 |   };
 9 | };
10 | 
11 | export default connect(
12 |   mapStateToProps
13 | )(Content);
14 | 


--------------------------------------------------------------------------------
/demo/src/js/data/entities/html.html:
--------------------------------------------------------------------------------
1 | <p>This example does not decode HTML entities</p>
2 | <p>HTML entities such as &pound; &raquo; and &amp; will be displayed as written</p>


--------------------------------------------------------------------------------
/demo/src/js/data/entities/index.js:
--------------------------------------------------------------------------------
1 | import html from './html.html';
2 | import options from './options';
3 | 
4 | export default {
5 |   html,
6 |   options
7 | };
8 | 


--------------------------------------------------------------------------------
/demo/src/js/data/entities/options.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   decodeEntities: false
3 | };
4 | 


--------------------------------------------------------------------------------
/demo/src/js/data/index.js:
--------------------------------------------------------------------------------
 1 | import simple from './simple/index';
 2 | import entities from './entities/index';
 3 | import transform from './transform/index';
 4 | 
 5 | export default {
 6 |   simple,
 7 |   entities,
 8 |   transform
 9 | };
10 | 


--------------------------------------------------------------------------------
/demo/src/js/data/simple/html.html:
--------------------------------------------------------------------------------
 1 | <h1>Example HTML</h1>
 2 | <p>Update this HTML to see React HTML Parser in action.</p>
 3 | <ul>
 4 |   <li>
 5 |     Elements can be nested
 6 |     <ol>
 7 |       <li>Any</li>
 8 |       <li>number</li>
 9 |       <li>of times</li>
10 |     </ol>
11 |   </li>
12 | </ul>
13 | <p>Attributes will be converted to <a href="https://facebook.github.io/react/" target="_blank">React</a> equivalent props</p>
14 | <p style="color:red;font-size:1.2rem;">Inline styles <span style="color:blue;font-weight:bold;">can also be</span> used</p>
15 | <p>HTML entities such as &pound;, &raquo; and &amp; are decoded by default</p>


--------------------------------------------------------------------------------
/demo/src/js/data/simple/index.js:
--------------------------------------------------------------------------------
1 | import html from './html.html';
2 | import options from './options';
3 | 
4 | export default {
5 |   html,
6 |   options
7 | };
8 | 


--------------------------------------------------------------------------------
/demo/src/js/data/simple/options.js:
--------------------------------------------------------------------------------
1 | export default {};
2 | 


--------------------------------------------------------------------------------
/demo/src/js/data/transform/display.txt:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { convertNodeToElement } from 'react-html-parser';
 3 | 
 4 | const options = {
 5 |   decodeEntities: true,
 6 |   transform
 7 | };
 8 | 
 9 | function transform(node, index) {
10 | 
11 |   // return null to block certain elements
12 |   // don't allow <span> elements
13 |   if (node.type === 'tag' && node.name === 'span') {
14 |     return null;
15 |   }
16 | 
17 |   // Transform <ul> into <ol>
18 |   // A node can be modified and passed to the convertNodeToElement function which will continue to render it and it's children
19 |   if (node.type === 'tag' && node.name === 'ul') {
20 |     node.name = 'ol';
21 |     return convertNodeToElement(node, index, transform);
22 |   }
23 | 
24 |   // return an <i> element for every <b>
25 |   // a key must be included for all elements
26 |   if (node.type === 'tag' && node.name === 'b') {
27 |     return <i key={index}>I am now in italics, not bold</i>;
28 |   }
29 | 
30 |   // all links must open in a new window
31 |   if (node.type === 'tag' && node.name === 'a') {
32 |     node.attribs.target = '_blank';
33 |     return convertNodeToElement(node, index, transform);
34 |   }
35 | 
36 | }


--------------------------------------------------------------------------------
/demo/src/js/data/transform/html.html:
--------------------------------------------------------------------------------
 1 | <h1>Transform Example</h1>
 2 | 
 3 | <span>span elements are banned and won't be included in the output</span>
 4 | 
 5 | <ul>
 6 |   <li>This unordered list has been transformed</li>
 7 |   <li>into an ordered list</li>
 8 | </ul>
 9 | 
10 | <p>
11 |   React components can be returned directly.
12 |   <b>This bold tag will be replaced directly with manually specified React element</b>
13 | </p>
14 | 
15 | <p>
16 |   Attributes can also be modified.
17 |   All links like <a href="https://facebook.github.io/react/">this one</a>
18 |   and <a href="https://github.com/wrakky/react-html-parser">this one</a>
19 |   will automatically have the <code>target="_blank"</code> attribute added to them.
20 | </p>


--------------------------------------------------------------------------------
/demo/src/js/data/transform/index.js:
--------------------------------------------------------------------------------
 1 | import html from './html.html';
 2 | import options from './options';
 3 | import display from './display.txt';
 4 | 
 5 | export default {
 6 |   html,
 7 |   options,
 8 |   display
 9 | };
10 | 


--------------------------------------------------------------------------------
/demo/src/js/data/transform/options.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { convertNodeToElement } from 'react-html-parser';
 3 | 
 4 | export default {
 5 |   decodeEntities: true,
 6 |   transform: function transform(node, index) {
 7 | 
 8 |     // return null to block certain elements
 9 |     // don't allow <span> elements
10 |     if (node.type === 'tag' && node.name === 'span') {
11 |       return null;
12 |     }
13 | 
14 |     // Transform <ul> into <ol>
15 |     // A node can be modified and passed to the convertNodeToElement function
16 |     // which will continue to render it and it's children
17 |     if (node.type === 'tag' && node.name === 'ul') {
18 |       node.name = 'ol';
19 |       return convertNodeToElement(node, index, transform);
20 |     }
21 | 
22 |     // return an <i> element for every <b>
23 |     if (node.type === 'tag' && node.name === 'b') {
24 |       return <i key={index}>I am now in italics, not bold</i>;
25 |     }
26 | 
27 |     // all links must open in a new window
28 |     if (node.type === 'tag' && node.name === 'a') {
29 |       node.attribs.target = '_blank';
30 |       return convertNodeToElement(node, index, transform);
31 |     }
32 | 
33 |   }
34 | };
35 | 


--------------------------------------------------------------------------------
/demo/src/js/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from 'react-dom';
 3 | import { createStore } from 'redux';
 4 | import { Provider } from 'react-redux';
 5 | import App from './components/App';
 6 | import reducer from './reducers';
 7 | 
 8 | let store = createStore(reducer);
 9 | 
10 | render(
11 |   <Provider store={store}>
12 |     <App />
13 |   </Provider>,
14 |   document.getElementById('root')
15 | );
16 | 


--------------------------------------------------------------------------------
/demo/src/js/reducers.js:
--------------------------------------------------------------------------------
 1 | import data from './data';
 2 | 
 3 | const initialExample = 'simple';
 4 | 
 5 | const initialState = {
 6 |   html: data[initialExample].html,
 7 |   examples: [
 8 |     { value: 'simple', label: 'Simple Example' },
 9 |     { value: 'entities', label: 'Don\'t Decode HTML Entities' },
10 |     { value: 'transform', label: 'Transform' }
11 |   ],
12 |   selectedExample: initialExample,
13 |   view: 'html'
14 | };
15 | 
16 | export default function reducer(state=initialState, action) {
17 | 
18 |   switch (action.type) {
19 |     case 'UPDATE_HTML':
20 |       return {
21 |         ...state,
22 |         html: action.html
23 |       };
24 |     case 'UPDATE_SELECTED_EXAMPLE':
25 |       return {
26 |         ...state,
27 |         html: data[action.example].html,
28 |         selectedExample: action.example
29 |       };
30 |     case 'SET_VIEW':
31 |       return {
32 |         ...state,
33 |         view: action.view
34 |       };
35 |     default:
36 |       return state;
37 |   }
38 | 
39 | }
40 | 


--------------------------------------------------------------------------------
/demo/src/sass/app.scss:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   background: #f5f5f5;
 3 |   margin: 0;
 4 |   height: 100%;
 5 | }
 6 | 
 7 | body {
 8 |   padding: 1rem;
 9 |   color: #000;
10 |   font-size: 1rem;
11 |   font-family: 'Proxima Nova', 'proxima-nova', sans-serif;
12 |   font-weight: normal;
13 |   line-height: 1.6;
14 |   letter-spacing: 0.8px;
15 | }
16 | 
17 | h1 {
18 |   line-height: 1;
19 |   margin: 0;
20 | }
21 | 
22 | * {
23 |   box-sizing: border-box;
24 | }
25 | 
26 | #root {
27 |   height: 100%;
28 | }
29 | 
30 | #app {
31 |   height: 100%;
32 |   display: flex;
33 |   flex-direction: column;
34 | }
35 | 
36 | main {
37 |   display: flex;
38 |   flex: 1;
39 |   overflow: hidden;
40 |   > div {
41 |     flex: 1;
42 |     margin: 0 1rem 0 0;
43 |   }
44 | }


--------------------------------------------------------------------------------
/demo/src/sass/editor.scss:
--------------------------------------------------------------------------------
 1 | $button-background: #3498db;
 2 | 
 3 | #editor {
 4 |   border: 1px solid #aaa;
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   #HTML_EDITOR {
 8 |     flex: 1;
 9 |   }
10 |   .presets {
11 |     padding: 5px 10px;
12 |     border-bottom: 1px solid #aaa;
13 |     display: flex;
14 | 
15 |     ul {
16 |       margin: 0;
17 |       padding: 0;
18 |       flex: 1;
19 |       text-align: right;
20 |     }
21 | 
22 |     li {
23 |       margin: 0;
24 |       padding: 0 10px;
25 |       list-style-type: none;
26 |       display: inline;
27 |       border-right: 1px solid #aaa;
28 |       &:last-of-type {
29 |         border: none;
30 |         padding-right: 0;
31 |       }
32 |     }
33 | 
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/demo/src/sass/header.scss:
--------------------------------------------------------------------------------
 1 | $headerLinkColor: #cc0000;
 2 | 
 3 | header {
 4 |   h1 {
 5 |     padding: 0 0 1rem;
 6 |   }
 7 |   a {
 8 |     float: right;
 9 |     text-decoration: none;
10 |     color: $headerLinkColor;
11 |     line-height: 32px;
12 |     svg {
13 |       margin-right: 5px;
14 |       position: relative;
15 |       top: 2px;
16 |       #github {
17 |         fill: $headerLinkColor;
18 |       }
19 |     }
20 |     &:hover {
21 |       color: darken($headerLinkColor, 10%);
22 |       #github {
23 |         fill: darken($headerLinkColor, 10%);
24 |       }
25 |     }
26 |   }
27 | }


--------------------------------------------------------------------------------
/demo/src/sass/html.scss:
--------------------------------------------------------------------------------
 1 | #html {
 2 |   background: #fff;
 3 |   border: 1px solid #aaa;
 4 |   padding: 0.5rem;
 5 |   font-size: 0.9rem;
 6 |   overflow-y: scroll;
 7 |   h1, h2, h3, h4, h5, p, ul {
 8 |     margin: 0.5rem 0;
 9 |   }
10 | }


--------------------------------------------------------------------------------
/demo/webpack.config.base.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | var autoprefixer = require('autoprefixer');
 4 | 
 5 | module.exports = {
 6 |   output: {
 7 |     path: path.join(__dirname, 'dist'),
 8 |     filename: 'app.js'
 9 |   },
10 |   module: {
11 |     loaders: [
12 |       {
13 |         test: /\.js$/,
14 |         include: [
15 |           path.join(__dirname, '..', 'src')
16 |         ],
17 |         loaders: [
18 |           'babel'
19 |         ]
20 |       },
21 |       {
22 |         test: /\.json$/,
23 |         loader: 'json'
24 |       },
25 |       {
26 |         test: /\.(html|txt)$/,
27 |         loader: 'raw'
28 |       }
29 |     ]
30 |   },
31 |   resolve: {
32 |     root: [
33 |       path.resolve('./src')
34 |     ],
35 |     extensions: ['', '.js', '.scss'],
36 |     alias: {
37 |       'react-html-parser': path.resolve(path.join('..', 'src'))
38 |     }
39 |   },
40 |   postcss: function() {
41 |     return [ autoprefixer ];
42 |   },
43 |   plugins: [
44 |     new HtmlWebpackPlugin({
45 |       template: path.join(__dirname, 'src', 'index.html'),
46 |       minify: {
47 |         collapseWhitespace: true
48 |       }
49 |     })
50 |   ]
51 | };
52 | 


--------------------------------------------------------------------------------
/demo/webpack.config.development.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var path = require('path');
 3 | 
 4 | const config = require('./webpack.config.base');
 5 | 
 6 | config.entry = [
 7 |   'webpack-dev-server/client?http://0.0.0.0:3000',
 8 |   'webpack/hot/only-dev-server',
 9 |   path.join(__dirname, 'src', 'js', 'index.js')
10 | ];
11 | config.devtool = 'cheap-module-eval-source-map';
12 | config.module.loaders = config.module.loaders.concat([
13 |   {
14 |     test: /\.js$/,
15 |     include: [
16 |       path.join(__dirname, 'src', 'js')
17 |     ],
18 |     loaders: [
19 |       'babel'
20 |     ]
21 |   },
22 |   {
23 |     test:   /\.scss$/,
24 |     include: [
25 |       path.join(__dirname, 'src', 'sass')
26 |     ],
27 |     loader: 'style-loader!css-loader!postcss-loader!sass-loader'
28 |   }
29 | ]);
30 | 
31 | config.plugins = config.plugins.concat([
32 |   new webpack.HotModuleReplacementPlugin(),
33 |   new webpack.DefinePlugin({
34 |     'process.env.NODE_ENV': JSON.stringify('development')
35 |   })
36 | ]);
37 | 
38 | module.exports = config;
39 | 


--------------------------------------------------------------------------------
/demo/webpack.config.production.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var path = require('path');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | 
 5 | var config = require('./webpack.config.base');
 6 | 
 7 | config.entry = [
 8 |   path.join(__dirname, 'src', 'js', 'index.js')
 9 | ];
10 | config.module.loaders = config.module.loaders.concat([
11 |   {
12 |     test: /\.js$/,
13 |     include: [
14 |       path.join(__dirname, 'src', 'js')
15 |     ],
16 |     loaders: [
17 |       'babel'
18 |     ]
19 |   },
20 |   {
21 |     test:   /\.scss$/,
22 |     include: [
23 |       path.join(__dirname, 'src', 'sass')
24 |     ],
25 |     loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
26 |   }
27 | ]);
28 | config.plugins = config.plugins.concat([
29 |   new ExtractTextPlugin('demo.css'),
30 |   new webpack.DefinePlugin({
31 |     'process.env.NODE_ENV': JSON.stringify('production')
32 |   }),
33 |   new webpack.optimize.OccurrenceOrderPlugin(),
34 |   new webpack.optimize.UglifyJsPlugin({
35 |     compressor: {
36 |       screw_ie8: true,
37 |       warnings: false
38 |     }
39 |   })
40 | ]);
41 | 
42 | module.exports = config;
43 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | var webpackConfig = require('./webpack.config.test');
 2 | 
 3 | module.exports = function(karma) {
 4 | 
 5 |   karma.set({
 6 |     files: [
 7 |       {
 8 |         pattern: 'tests.webpack.js',
 9 |         watched: true
10 |       }
11 |     ],
12 |     autoWatch: true,
13 |     logLevel: karma.LOG_INFO,
14 |     basePath: '',
15 |     singleRun: false,
16 |     frameworks: [
17 |       'jasmine',
18 |       'phantomjs-shim',
19 |       'es6-shim'
20 |     ],
21 |     preprocessors: {
22 |       'tests.webpack.js': 'webpack'
23 |     },
24 |     browsers: ['PhantomJS'],
25 |     colors: true,
26 |     browserNoActivityTimeout: 100000,
27 |     webpackMiddleware: {
28 |       noInfo: true
29 |     },
30 |     webpack: webpackConfig,
31 |     reporters: [ 'spec', 'coverage' ],
32 |     coverageReporter: {
33 |       type: 'lcov',
34 |       dir: 'coverage/',
35 |       subdir: '.',
36 |       includeAllSources: true
37 |     },
38 |     specReporter: {
39 |       suppressSkipped: true
40 |     }
41 |   });
42 | 
43 | };
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-html-parser",
 3 |   "version": "2.0.2",
 4 |   "description": "Parse HTML into React components",
 5 |   "main": "lib/index.js",
 6 |   "jsnext:main": "src/index.js",
 7 |   "scripts": {
 8 |     "clean": "rimraf coverage dist lib",
 9 |     "check": "npm run lint && npm run test",
10 |     "test": "karma start --single-run",
11 |     "test:watch": "karma start",
12 |     "lint": "eslint src test demo/src",
13 |     "build": "npm run build:lib && npm run build:umd && npm run build:umd:min",
14 |     "build:lib": "rimraf lib && babel ./src -d lib",
15 |     "build:umd": "webpack src/index.js dist/react-html-parser.js --config webpack.config.development.js",
16 |     "build:umd:min": "webpack src/index.js -p dist/react-html-parser.min.js --config webpack.config.production.js",
17 |     "prerelease": "npm run clean && npm run check",
18 |     "release": "npm run build",
19 |     "postrelease": "git push --follow-tags && npm publish",
20 |     "release:patch": "npm version patch && npm run release",
21 |     "release:minor": "npm version minor && npm run release",
22 |     "release:major": "npm version major && npm run release",
23 |     "demo:clean": "rimraf demo/dist",
24 |     "demo:dev": "cd demo && node ./server.js",
25 |     "demo:build": "cd demo && npm run build",
26 |     "demo:push": "cd demo/dist && git init && git commit --allow-empty -m 'update demo' && git checkout -b gh-pages && git add . && git commit -am 'update demo' && git push git@github.com:wrakky/react-html-parser gh-pages --force",
27 |     "demo:publish": "npm run demo:clean && npm run demo:build && npm run demo:push"
28 |   },
29 |   "repository": {
30 |     "type": "git",
31 |     "url": "https://github.com/wrakky/react-html-parser.git"
32 |   },
33 |   "keywords": [
34 |     "react",
35 |     "html",
36 |     "htmlparser",
37 |     "htmlparser2",
38 |     "inner html",
39 |     "dangerouslySetInnerHTML"
40 |   ],
41 |   "author": "Peter Newnham",
42 |   "license": "MIT",
43 |   "devDependencies": {
44 |     "babel": "^6.5.2",
45 |     "babel-cli": "^6.8.0",
46 |     "babel-core": "^6.8.0",
47 |     "babel-loader": "^6.2.4",
48 |     "babel-plugin-transform-object-assign": "^6.8.0",
49 |     "babel-plugin-transform-object-rest-spread": "^6.23.0",
50 |     "babel-preset-es2015": "^6.6.0",
51 |     "babel-preset-react": "^6.5.0",
52 |     "coveralls": "^2.11.9",
53 |     "eslint": "^2.10.1",
54 |     "eslint-plugin-react": "^5.1.1",
55 |     "inject-loader": "^2.0.1",
56 |     "isparta-loader": "^2.0.0",
57 |     "jasmine-core": "^2.4.1",
58 |     "json-loader": "^0.5.4",
59 |     "karma": "^0.13.22",
60 |     "karma-coverage": "^1.0.0",
61 |     "karma-es6-shim": "^1.0.0",
62 |     "karma-jasmine": "^1.0.2",
63 |     "karma-phantomjs-launcher": "^1.0.0",
64 |     "karma-phantomjs-shim": "^1.4.0",
65 |     "karma-spec-reporter": "^0.0.26",
66 |     "karma-webpack": "^1.7.0",
67 |     "phantomjs-prebuilt": "^2.1.7",
68 |     "react": "^16.0.0",
69 |     "react-dom": "^16.0.0",
70 |     "rimraf": "^2.5.2",
71 |     "webpack": "^1.13.0"
72 |   },
73 |   "dependencies": {
74 |     "htmlparser2": "^3.9.0"
75 |   },
76 |   "peerDependencies": {
77 |     "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0"
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/scripts/attributes-diff.js:
--------------------------------------------------------------------------------
 1 | // this script diffs the react attribute whitelist with the one react html parser maintains
 2 | // to determine if it is out of date
 3 | // the build:lib task must have been run before this can work
 4 | 
 5 | const currentProperties = require('../lib/dom/attributes/ReactAttributes').default;
 6 | const reactProperties = require('react-dom/lib/HTMLDOMPropertyConfig').Properties;
 7 | 
 8 | const changes = {};
 9 | 
10 | const currentKeys = Object.keys(currentProperties).map(key => currentProperties[key]);
11 | const reactKeys = Object.keys(reactProperties);
12 | 
13 | // attributes that have been added to react
14 | reactKeys.forEach(key => {
15 |   if (currentKeys.indexOf(key) === -1) {
16 |     changes[key] = 'add';
17 |   }
18 | });
19 | 
20 | // attributes that have been removed from react
21 | currentKeys.forEach(key => {
22 |   if (reactKeys.indexOf(key) === -1) {
23 |     changes[key] = 'remove';
24 |   }
25 | });
26 | 
27 | console.log(changes); // eslint-disable-line no-console
28 | 


--------------------------------------------------------------------------------
/src/HtmlParser.js:
--------------------------------------------------------------------------------
 1 | import htmlparser2 from 'htmlparser2';
 2 | import processNodes from './processNodes';
 3 | 
 4 | /**
 5 |  * Parses a HTML string and returns a list of React components generated from it
 6 |  *
 7 |  * @param {String} html The HTML to convert into React component
 8 |  * @param {Object} options Options to pass
 9 |  * @returns {Array} List of top level React elements
10 |  */
11 | export default function HtmlParser(html, {
12 |   decodeEntities = true,
13 |   transform,
14 |   preprocessNodes = nodes => nodes
15 | }={}) {
16 |   const nodes = preprocessNodes(htmlparser2.parseDOM(html, { decodeEntities }));
17 |   return processNodes(nodes, transform);
18 | }
19 | 


--------------------------------------------------------------------------------
/src/convertNodeToElement.js:
--------------------------------------------------------------------------------
 1 | import ElementTypes from './elementTypes';
 2 | 
 3 | /**
 4 |  * Converts a htmlparser2 node to a React element
 5 |  *
 6 |  * @param {Object} node The htmlparser2 node to convert
 7 |  * @param {Number} index The index of the current node
 8 |  * @param {Function} transform Transform function to apply to children of the node
 9 |  * @returns {React.Element}
10 |  */
11 | export default function convertNodeToElement(node, index, transform) {
12 |   return ElementTypes[node.type](node, index, transform);
13 | }
14 | 


--------------------------------------------------------------------------------
/src/dom/attributes/BooleanAttributes.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * List of boolean attributes
 3 |  * These attributes should have their React attribute value set to be the same as their name
 4 |  * E.g. <input disabled> = <input disabled>
 5 |  *      <input disabled=""> = <input disabled>
 6 |  *      <input disabled="disabled"> = <input disabled>
 7 |  * @type {Array}
 8 |  */
 9 | export default [
10 |   'allowfullScreen',
11 |   'async',
12 |   'autoplay',
13 |   'capture',
14 |   'checked',
15 |   'controls',
16 |   'default',
17 |   'defer',
18 |   'disabled',
19 |   'formnovalidate',
20 |   'hidden',
21 |   'loop',
22 |   'multiple',
23 |   'muted',
24 |   'novalidate',
25 |   'open',
26 |   'playsinline',
27 |   'readonly',
28 |   'required',
29 |   'reversed',
30 |   'scoped',
31 |   'seamless',
32 |   'selected',
33 |   'itemscope'
34 | ];
35 | 


--------------------------------------------------------------------------------
/src/dom/attributes/ReactAttributes.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Mapping of standard HTML attributes to their React counterparts
  3 |  * List taken and reversed from react/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
  4 |  * https://github.com/facebook/react/blob/c9c3c339b757682f1154f1c915eb55e6a8766933/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
  5 |  * @type {Object}
  6 |  */
  7 | export default {
  8 |   /**
  9 |    * Standard Properties
 10 |    */
 11 |   accept: 'accept',
 12 |   'accept-charset': 'acceptCharset',
 13 |   accesskey: 'accessKey',
 14 |   action: 'action',
 15 |   allowfullscreen: 'allowFullScreen',
 16 |   allowtransparency: 'allowTransparency',
 17 |   alt: 'alt',
 18 |   as: 'as',
 19 |   async: 'async',
 20 |   autocomplete: 'autoComplete',
 21 |   autoplay: 'autoPlay',
 22 |   capture: 'capture',
 23 |   cellpadding: 'cellPadding',
 24 |   cellspacing: 'cellSpacing',
 25 |   charset: 'charSet',
 26 |   challenge: 'challenge',
 27 |   checked: 'checked',
 28 |   cite: 'cite',
 29 |   classid: 'classID',
 30 |   class: 'className',
 31 |   cols: 'cols',
 32 |   colspan: 'colSpan',
 33 |   content: 'content',
 34 |   contenteditable: 'contentEditable',
 35 |   contextmenu: 'contextMenu',
 36 |   controls: 'controls',
 37 |   controlsList: 'controlsList',
 38 |   coords: 'coords',
 39 |   crossorigin: 'crossOrigin',
 40 |   data: 'data',
 41 |   datetime: 'dateTime',
 42 |   default: 'default',
 43 |   defer: 'defer',
 44 |   dir: 'dir',
 45 |   disabled: 'disabled',
 46 |   download: 'download',
 47 |   draggable: 'draggable',
 48 |   enctype: 'encType',
 49 |   form: 'form',
 50 |   formaction: 'formAction',
 51 |   formenctype: 'formEncType',
 52 |   formmethod: 'formMethod',
 53 |   formnovalidate: 'formNoValidate',
 54 |   formtarget: 'formTarget',
 55 |   frameborder: 'frameBorder',
 56 |   headers: 'headers',
 57 |   height: 'height',
 58 |   hidden: 'hidden',
 59 |   high: 'high',
 60 |   href: 'href',
 61 |   hreflang: 'hrefLang',
 62 |   for: 'htmlFor',
 63 |   'http-equiv': 'httpEquiv',
 64 |   icon: 'icon',
 65 |   id: 'id',
 66 |   inputmode: 'inputMode',
 67 |   integrity: 'integrity',
 68 |   is: 'is',
 69 |   keyparams: 'keyParams',
 70 |   keytype: 'keyType',
 71 |   kind: 'kind',
 72 |   label: 'label',
 73 |   lang: 'lang',
 74 |   list: 'list',
 75 |   loop: 'loop',
 76 |   low: 'low',
 77 |   manifest: 'manifest',
 78 |   marginheight: 'marginHeight',
 79 |   marginwidth: 'marginWidth',
 80 |   max: 'max',
 81 |   maxlength: 'maxLength',
 82 |   media: 'media',
 83 |   mediagroup: 'mediaGroup',
 84 |   method: 'method',
 85 |   min: 'min',
 86 |   minlength: 'minLength',
 87 |   multiple: 'multiple',
 88 |   muted: 'muted',
 89 |   name: 'name',
 90 |   nonce: 'nonce',
 91 |   novalidate: 'noValidate',
 92 |   open: 'open',
 93 |   optimum: 'optimum',
 94 |   pattern: 'pattern',
 95 |   placeholder: 'placeholder',
 96 |   playsinline: 'playsInline',
 97 |   poster: 'poster',
 98 |   preload: 'preload',
 99 |   profile: 'profile',
100 |   radiogroup: 'radioGroup',
101 |   readonly: 'readOnly',
102 |   referrerpolicy: 'referrerPolicy',
103 |   rel: 'rel',
104 |   required: 'required',
105 |   reversed: 'reversed',
106 |   role: 'role',
107 |   rows: 'rows',
108 |   rowspan: 'rowSpan',
109 |   sandbox: 'sandbox',
110 |   scope: 'scope',
111 |   scoped: 'scoped',
112 |   scrolling: 'scrolling',
113 |   seamless: 'seamless',
114 |   selected: 'selected',
115 |   shape: 'shape',
116 |   size: 'size',
117 |   sizes: 'sizes',
118 |   slot: 'slot',
119 |   span: 'span',
120 |   spellcheck: 'spellCheck',
121 |   src: 'src',
122 |   srcdoc: 'srcDoc',
123 |   srclang: 'srcLang',
124 |   srcset: 'srcSet',
125 |   start: 'start',
126 |   step: 'step',
127 |   style: 'style',
128 |   summary: 'summary',
129 |   tabindex: 'tabIndex',
130 |   target: 'target',
131 |   title: 'title',
132 |   type: 'type',
133 |   usemap: 'useMap',
134 |   value: 'value',
135 |   width: 'width',
136 |   wmode: 'wmode',
137 |   wrap: 'wrap',
138 |   /**
139 |    * RDFa Properties
140 |    */
141 |   about: 'about',
142 |   datatype: 'datatype',
143 |   inlist: 'inlist',
144 |   prefix: 'prefix',
145 |   property: 'property',
146 |   resource: 'resource',
147 |   typeof: 'typeof',
148 |   vocab: 'vocab',
149 |   /**
150 |    * Non-standard Properties
151 |    */
152 |   autocapitalize: 'autoCapitalize',
153 |   autocorrect: 'autoCorrect',
154 |   autosave: 'autoSave',
155 |   color: 'color',
156 |   itemprop: 'itemProp',
157 |   itemscope: 'itemScope',
158 |   itemtype: 'itemType',
159 |   itemid: 'itemID',
160 |   itemref: 'itemRef',
161 |   results: 'results',
162 |   security: 'security',
163 |   unselectable: 'unselectable'
164 | };
165 | 


--------------------------------------------------------------------------------
/src/dom/elements/VoidElements.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * List of void elements
 3 |  * These elements are not allowed to have children
 4 |  * @type {Array}
 5 |  */
 6 | export default [
 7 |   'area',
 8 |   'base',
 9 |   'br',
10 |   'col',
11 |   'command',
12 |   'embed',
13 |   'hr',
14 |   'img',
15 |   'input',
16 |   'keygen',
17 |   'link',
18 |   'meta',
19 |   'param',
20 |   'source',
21 |   'track',
22 |   'wbr'
23 | ];
24 | 


--------------------------------------------------------------------------------
/src/elementTypes/StyleElementType.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import generateElementProps from '../utils/generatePropsFromAttributes';
 3 | 
 4 | /**
 5 |  * Converts a <style> element to a React element
 6 |  *
 7 |  * @param {Object} node The style node
 8 |  * @param {String} index The index of the React element relative to it's parent
 9 |  * @returns {React.Element} The React style element
10 |  */
11 | export default function StyleElementType(node, index) {
12 | 
13 |   // The style element only ever has a single child which is the styles so try and find this to add as
14 |   // a child to the style element that will be created
15 |   let styles;
16 |   if (node.children.length > 0) {
17 |     styles = node.children[0].data;
18 |   }
19 | 
20 |   // generate props
21 |   const props = generateElementProps(node.attribs, index);
22 | 
23 |   // create and return the element
24 |   return React.createElement('style', props, styles);
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/src/elementTypes/TagElementType.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import processNodes from '../processNodes';
 3 | import generatePropsFromAttributes from '../utils/generatePropsFromAttributes';
 4 | import VoidElements from '../dom/elements/VoidElements';
 5 | import isValidTagOrAttributeName from '../utils/isValidTagOrAttributeName';
 6 | 
 7 | /**
 8 |  * Converts any element (excluding style - see StyleElementType - and script) to a react element.
 9 |  *
10 |  * @param {Object} node The tag node
11 |  * @param {String} index The index of the React element relative to it's parent
12 |  * @param {Function} transform The transform function to apply to all children
13 |  * @returns {React.Element} The React tag element
14 |  */
15 | export default function TagElementType(node, index, transform) {
16 | 
17 |   const tagName = node.name;
18 | 
19 |   // validate tag name
20 |   if (!isValidTagOrAttributeName(tagName)) {
21 |     return null;
22 |   }
23 | 
24 |   // generate props
25 |   const props = generatePropsFromAttributes(node.attribs, index);
26 | 
27 |   // If the node is not a void element and has children then process them
28 |   let children = null;
29 |   if (VoidElements.indexOf(tagName) === -1) {
30 |     children = processNodes(node.children, transform);
31 |   }
32 | 
33 |   // create and return the element
34 |   return React.createElement(tagName, props, children);
35 | }
36 | 


--------------------------------------------------------------------------------
/src/elementTypes/TextElementType.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Converts a text node to a React text element
 3 |  *
 4 |  * @param {Object} node The text node
 5 |  * @returns {String} The text
 6 |  */
 7 | export default function TextElementType(node) {
 8 | 
 9 |   // React will accept plain text for rendering so just return the node data
10 |   return node.data;
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/src/elementTypes/UnsupportedElementType.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Handles an unsupported element type by returning null so nothing is rendered
 3 |  * @returns {null}
 4 |  */
 5 | export default function UnsupportedElementType() {
 6 | 
 7 |   // do nothing because the element type is unsupported
 8 |   // comment, directive, script, cdata, doctype are all currently unsupported
 9 |   return null;
10 | 
11 | }
12 | 


--------------------------------------------------------------------------------
/src/elementTypes/index.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Map each htmlparser2 element type to a function which will convert that element type to a React element
 3 |  * Not all of the element types are supported so the UnsupportedElementType is used for them which will not return any
 4 |  * value
 5 |  */
 6 | 
 7 | import { ElementType } from 'htmlparser2';
 8 | 
 9 | import TextElementType from './TextElementType';
10 | import TagElementType from './TagElementType';
11 | import StyleElementType from './StyleElementType';
12 | import UnsupportedElementType from './UnsupportedElementType';
13 | 
14 | export default {
15 |   [ElementType.Text]: TextElementType,
16 |   [ElementType.Tag]: TagElementType,
17 |   [ElementType.Style]: StyleElementType,
18 |   [ElementType.Directive]: UnsupportedElementType,
19 |   [ElementType.Comment]: UnsupportedElementType,
20 |   [ElementType.Script]: UnsupportedElementType,
21 |   [ElementType.CDATA]: UnsupportedElementType,
22 |   [ElementType.Doctype]: UnsupportedElementType
23 | };
24 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import HtmlParser from './HtmlParser';
2 | export default HtmlParser;
3 | 
4 | export { default as processNodes } from './processNodes';
5 | export { default as convertNodeToElement } from './convertNodeToElement';
6 | 
7 | // expose htmlparser2 so it can be used if required
8 | export { default as htmlparser2 } from 'htmlparser2';
9 | 


--------------------------------------------------------------------------------
/src/processNodes.js:
--------------------------------------------------------------------------------
 1 | import isEmptyTextNode from './utils/isEmptyTextNode';
 2 | import convertNodeToElement from './convertNodeToElement';
 3 | 
 4 | /**
 5 |  * Processes the nodes generated by htmlparser2 and convert them all into React elements
 6 |  *
 7 |  * @param {Object[]} nodes List of nodes to process
 8 |  * @param {Function} transform Transform function to optionally apply to nodes
 9 |  * @returns {React.Element[]} The list of processed React elements
10 |  */
11 | export default function processNodes(nodes, transform) {
12 | 
13 |   return nodes
14 |     .filter(node => !isEmptyTextNode(node))
15 |     .map((node, index) => {
16 | 
17 |       // return the result of the transform function if applicable
18 |       let transformed;
19 |       if (typeof transform === 'function') {
20 |         transformed = transform(node, index);
21 |         if (transformed === null || !!transformed) {
22 |           return transformed;
23 |         }
24 |       }
25 | 
26 |       // otherwise convert the node as standard
27 |       return convertNodeToElement(node, index, transform);
28 | 
29 |     });
30 | 
31 | }
32 | 


--------------------------------------------------------------------------------
/src/utils/generatePropsFromAttributes.js:
--------------------------------------------------------------------------------
 1 | import htmlAttributesToReact from './htmlAttributesToReact';
 2 | import inlineStyleToObject from './inlineStyleToObject';
 3 | 
 4 | /**
 5 |  * Generates props for a React element from an object of HTML attributes
 6 |  *
 7 |  * @param {Object} attributes The HTML attributes
 8 |  * @param {String} key The key to give the react element
 9 |  */
10 | export default function generatePropsFromAttributes(attributes, key) {
11 | 
12 |   // generate props
13 |   const props = Object.assign({}, htmlAttributesToReact(attributes), { key });
14 | 
15 |   // if there is an inline/string style prop then convert it to a React style object
16 |   // otherwise, it is invalid and omitted
17 |   if (typeof props.style === 'string' || props.style instanceof String) {
18 |     props.style = inlineStyleToObject(props.style);
19 |   } else {
20 |     delete props.style;
21 |   }
22 | 
23 |   return props;
24 | 
25 | }
26 | 


--------------------------------------------------------------------------------
/src/utils/htmlAttributesToReact.js:
--------------------------------------------------------------------------------
 1 | import BooleanAttributes from '../dom/attributes/BooleanAttributes';
 2 | import ReactAttributes from '../dom/attributes/ReactAttributes';
 3 | import isValidTagOrAttributeName from './isValidTagOrAttributeName';
 4 | 
 5 | /**
 6 |  * Returns the parsed attribute value taking into account things like boolean attributes
 7 |  *
 8 |  * @param {String} attribute The name of the attribute
 9 |  * @param {*} value The value of the attribute from the HTML
10 |  * @returns {*} The parsed attribute value
11 |  */
12 | const getParsedAttributeValue = function(attribute, value) {
13 | 
14 |   // if the attribute if a boolean then it's value should be the same as it's name
15 |   // e.g. disabled="disabled"
16 |   let lowerBooleanAttributes = BooleanAttributes.map(attr => attr.toLowerCase());
17 |   if (lowerBooleanAttributes.indexOf(attribute.toLowerCase()) >= 0) {
18 |     value = attribute;
19 |   }
20 | 
21 |   return value;
22 | 
23 | };
24 | 
25 | /**
26 |  * Takes an object of standard HTML property names and converts them to their React counterpart. If the react
27 |  * version does not exist for an attribute then just use it as it is
28 |  *
29 |  * @param {Object} attributes The HTML attributes to convert
30 |  * @returns {Object} The React attributes
31 |  */
32 | export default function htmlAttributesToReact(attributes) {
33 | 
34 |   return Object
35 |     .keys(attributes)
36 |     .filter(attr => isValidTagOrAttributeName(attr))
37 |     .reduce(
38 |       (mappedAttributes, attribute) => {
39 | 
40 |         // lowercase the attribute name and find it in the react attribute map
41 |         const lowerCaseAttribute = attribute.toLowerCase();
42 | 
43 |         // format the attribute name
44 |         const name = ReactAttributes[lowerCaseAttribute] || lowerCaseAttribute;
45 | 
46 |         // add the parsed attribute value to the mapped attributes
47 |         mappedAttributes[name] = getParsedAttributeValue(name, attributes[attribute]);
48 | 
49 |         return mappedAttributes;
50 | 
51 |       },
52 |       {}
53 |     );
54 | 
55 | }
56 | 


--------------------------------------------------------------------------------
/src/utils/inlineStyleToObject.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Converts an inline style string into an object of React style properties
 3 |  *
 4 |  * @param {String} inlineStyle='' The inline style to convert
 5 |  * @returns {Object} The converted style
 6 |  */
 7 | export default function InlineStyleToObject(inlineStyle = '') {
 8 | 
 9 |   // just return empty object if the inlineStyle is empty
10 |   if (inlineStyle === '') {
11 |     return {};
12 |   }
13 | 
14 |   return inlineStyle
15 |     .split(';')
16 |     .reduce(
17 |       (styleObject, stylePropertyValue) => {
18 | 
19 |         // extract the style property name and value
20 |         let [property, value] = stylePropertyValue
21 |           .split(/^([^:]+):/)
22 |           .filter((val, i) => i > 0)
23 |           .map(item => item.trim().toLowerCase());
24 | 
25 |         // if there is no value (i.e. no : in the style) then ignore it
26 |         if (value === undefined) {
27 |           return styleObject;
28 |         }
29 | 
30 |         // convert the property name into the correct React format
31 |         // remove all hyphens and convert the letter immediately after each hyphen to upper case
32 |         // additionally don't uppercase any -ms- prefix
33 |         // e.g. -ms-style-property = msStyleProperty
34 |         //      -webkit-style-property = WebkitStyleProperty
35 |         property = property
36 |           .replace(/^-ms-/, 'ms-')
37 |           .replace(/-(.)/g, (_, character) => character.toUpperCase());
38 | 
39 |         // add the new style property and value to the style object
40 |         styleObject[property] = value;
41 | 
42 |         return styleObject;
43 | 
44 |       },
45 |       {}
46 |     );
47 | 
48 | }
49 | 


--------------------------------------------------------------------------------
/src/utils/isEmptyTextNode.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Tests a htmlparser2 node and returns whether is it a text node at the start and end of the line containing only
 3 |  * white space. This allows these node types to be excluded from the rendering because they are unnecessary.
 4 |  *
 5 |  * @param {Object} node The element object as created by htmlparser2
 6 |  * @returns {boolean} Whether the node is an empty text node
 7 |  */
 8 | export default function isEmptyTextNode(node) {
 9 |   return node.type === 'text' && /\r?\n/.test(node.data) && node.data.trim() === '';
10 | }
11 | 


--------------------------------------------------------------------------------
/src/utils/isValidTagOrAttributeName.js:
--------------------------------------------------------------------------------
 1 | const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/;
 2 | 
 3 | const nameCache = {};
 4 | 
 5 | export default function isValidTagOrAttributeName(tagName) {
 6 |   if (!nameCache.hasOwnProperty(tagName)) {
 7 |     nameCache[tagName] = VALID_TAG_REGEX.test(tagName);
 8 |   }
 9 |   return nameCache[tagName];
10 | }
11 | 


--------------------------------------------------------------------------------
/test/integration/integration.spec.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactDOMServer from 'react-dom/server';
  3 | import HtmlParser, { convertNodeToElement, htmlparser2 } from 'index';
  4 | 
  5 | const reactVersion = parseInt(require('react/package.json').version.match(/^(\d+)\./)[1], 10);
  6 | 
  7 | class HtmlParserComponent extends React.Component {
  8 |   render() {
  9 |     return <div>{HtmlParser(this.props.html, this.props.options)}</div>;
 10 |   }
 11 | }
 12 | 
 13 | const test = function(html, override=null, options={}) {
 14 |   const actual = ReactDOMServer.renderToStaticMarkup(<HtmlParserComponent html={html} options={options} />);
 15 |   const expected = `<div>${override === null && html || override}</div>`;
 16 |   expect(actual).toBe(expected);
 17 | };
 18 | 
 19 | describe('Integration tests: ', () => {
 20 | 
 21 |   it('should render a simple element', () => {
 22 |     test('<div>test</div>');
 23 |   });
 24 | 
 25 |   it('should render multiple sibling elements', () => {
 26 |     test('<div>test1</div><span>test2</span><footer>test3</footer>');
 27 |   });
 28 | 
 29 |   it('should render nested elements', () => {
 30 |     test('<div><span>test1</span><div><ul><li>test2</li><li>test3</li></ul></div></div>');
 31 |   });
 32 | 
 33 |   it('should handle bad html', () => {
 34 |     test(
 35 |       '<div class=test>test<ul><li>test1<li>test2</ul><span>test</span></div>',
 36 |       '<div class="test">test<ul><li>test1</li><li>test2</li></ul><span>test</span></div>'
 37 |     );
 38 |   });
 39 | 
 40 |   it('should ignore doctypes', () => {
 41 |     test(
 42 |       '<!doctype html><div>test</div>',
 43 |       '<div>test</div>'
 44 |     );
 45 |   });
 46 | 
 47 |   it('should ignore comments', () => {
 48 |     test('<div>test1</div><!-- comment --><div>test2</div>', '<div>test1</div><div>test2</div>');
 49 |   });
 50 | 
 51 |   it('should ignore script tags', () => {
 52 |     test('<script>alert(1)</script>', '');
 53 |   });
 54 | 
 55 |   it('should ignore event handlers', () => {
 56 |     test('<a href="#" onclick="alert(1)">test</a>', '<a href="#">test</a>');
 57 |   });
 58 | 
 59 |   it('should handle attributes', () => {
 60 |     test('<div class="test" id="test" aria-test="test" data-test="test">test</div>');
 61 |   });
 62 | 
 63 |   it('should handle inline styles', () => {
 64 | 
 65 |     // react 16 drops trailing semi commas from inline styles so we have to test for both
 66 |     const trailingSemiComma = reactVersion === 15 ? ';' : '';
 67 | 
 68 |     test(`<div style="border-radius:1px;background:red${trailingSemiComma}">test</div>`);
 69 |   });
 70 | 
 71 |   it('should ignore inline styles that are empty strings', () => {
 72 |     test('<div style="">test</div>', '<div>test</div>');
 73 |   });
 74 | 
 75 |   it('should not allow nesting of void elements', () => {
 76 |     test('<img><p>test</p></img>', '<img/><p>test</p>');
 77 |   });
 78 | 
 79 |   it('should convert boolean attribute values', () => {
 80 |     test('<input disabled>', '<input disabled=""/>');
 81 |     test('<input disabled="">', '<input disabled=""/>');
 82 |     test('<input disabled="disabled">', '<input disabled=""/>');
 83 |   });
 84 | 
 85 |   it('should decode html entities by default', () => {
 86 |     test('<span>&excl;</span>', '<span>!</span>');
 87 |   });
 88 | 
 89 |   it('should not decode html entities when the option is disabled', () => {
 90 |     test(
 91 |       '<span>&excl;</span>',
 92 |       '<span>&amp;excl;</span>',
 93 |       {
 94 |         decodeEntities: false
 95 |       }
 96 |     );
 97 |   });
 98 | 
 99 |   describe('transform function', () => {
100 | 
101 |     it('should use the response when it is not undefined', () => {
102 |       test(
103 |         '<span>test</span><div>another</div>',
104 |         '<p>transformed</p><p>transformed</p>',
105 |         {
106 |           transform(node, index) {
107 |             return <p key={index}>transformed</p>;
108 |           }
109 |         }
110 |       );
111 |     });
112 | 
113 |     it('should not render elements and children when returning null', () => {
114 |       test(
115 |         '<p>test<span>inner test<b>bold child</b></span></p>',
116 |         '<p>test</p>',
117 |         {
118 |           transform(node) {
119 |             if (node.type === 'tag' && node.name === 'span') {
120 |               return null;
121 |             }
122 |           }
123 |         }
124 |       );
125 |     });
126 | 
127 |     it('should allow modifying nodes', () => {
128 |       test(
129 |         '<a href="/test">test link</a>',
130 |         '<a href="/changed">test link</a>',
131 |         {
132 |           transform(node, index) {
133 |             node.attribs.href = '/changed';
134 |             return convertNodeToElement(node, index);
135 |           }
136 |         }
137 |       );
138 |     });
139 | 
140 |     it('should allow passing the transform function down to children', () => {
141 |       const transform = function(node, index) {
142 |         if (node.type === 'tag') {
143 |           if (node.name === 'ul') {
144 |             node.attribs.class = 'test';
145 |             return convertNodeToElement(node, index, transform);
146 |           }
147 |         }
148 |         if (node.type === 'text') {
149 |           return node.data.replace(/list/, 'changed');
150 |         }
151 |       };
152 |       test(
153 |         '<ul><li>list 1</li><li>list 2</li></ul>',
154 |         '<ul class="test"><li>changed 1</li><li>changed 2</li></ul>',
155 |         {
156 |           transform
157 |         }
158 |       );
159 |     });
160 | 
161 |   });
162 | 
163 |   it('should not render invalid tags', () => {
164 |     test(
165 |       '<div>test<test</div>',
166 |       '<div>test</div>'
167 |     );
168 |   });
169 | 
170 |   it('should not render invalid attributes', () => {
171 |     test(
172 |       '<div test<="test" class="test">content</div>',
173 |       '<div class="test">content</div>'
174 |     );
175 |   });
176 | 
177 |   it('should preprocess nodes correctly', () => {
178 |     test(
179 |       '<div>preprocess test</div>',
180 |       '<div>preprocess test</div><div>preprocess test</div>',
181 |       {
182 |         preprocessNodes(nodes) {
183 |           return [
184 |             ...nodes,
185 |             ...nodes
186 |           ];
187 |         }
188 |       }
189 |     );
190 |   });
191 | 
192 |   it('should expose htmlparser2', () => {
193 |     expect(htmlparser2).toBeDefined();
194 |   });
195 | 
196 | });
197 | 


--------------------------------------------------------------------------------
/test/unit/HtmlParser.spec.js:
--------------------------------------------------------------------------------
 1 | const htmlparser2 = {
 2 |   parseDOM: jasmine.createSpy('parseDOM').and.returnValue('parsed')
 3 | };
 4 | const processNodes = jasmine.createSpy('processNodes').and.returnValue('processed');
 5 | 
 6 | const HtmlParser = require('inject!HtmlParser')({
 7 |   htmlparser2,
 8 |   './processNodes': processNodes
 9 | }).default;
10 | 
11 | describe('Testing: `HtmlParser`', () => {
12 | 
13 |   beforeEach(() => {
14 |     processNodes.calls.reset();
15 |     htmlparser2.parseDOM.calls.reset();
16 |   });
17 | 
18 |   it('should parse the html string and process the resulting nodes with default options', () => {
19 |     expect(HtmlParser('html')).toBe('processed');
20 |     expect(htmlparser2.parseDOM).toHaveBeenCalledWith('html', {decodeEntities: true});
21 |     expect(processNodes).toHaveBeenCalledWith('parsed', undefined);
22 |   });
23 | 
24 |   it('should apply the options', () => {
25 |     const transform = jasmine.createSpy('transform');
26 |     const preprocessNodes = jasmine.createSpy('preprocessNodes').and.callFake(v => `preprocessed ${v}`);
27 |     expect(HtmlParser('html', { decodeEntities:false, transform, preprocessNodes })).toBe('processed');
28 |     expect(htmlparser2.parseDOM).toHaveBeenCalledWith('html', {decodeEntities: false});
29 |     expect(processNodes).toHaveBeenCalledWith('preprocessed parsed', transform);
30 |   });
31 | 
32 | });
33 | 


--------------------------------------------------------------------------------
/test/unit/convertNodeToElement.spec.js:
--------------------------------------------------------------------------------
 1 | const ElementTypes = {
 2 |   text: jasmine.createSpy('text'),
 3 |   type1: jasmine.createSpy('type1').and.returnValue('type1'),
 4 |   type2: jasmine.createSpy('type2').and.returnValue('type2')
 5 | };
 6 | 
 7 | const convertNodeToElement = require('inject!convertNodeToElement')({
 8 |   './elementTypes': ElementTypes
 9 | }).default;
10 | 
11 | describe('Testing `convertNodeToElement`', () => {
12 | 
13 |   let transform;
14 |   beforeEach(() => {
15 |     Object.keys(ElementTypes).forEach(type => {
16 |       ElementTypes[type].calls.reset();
17 |     });
18 |     transform = function() {};
19 |   });
20 | 
21 |   it('should convert each node to the correct element type', () => {
22 | 
23 |     const nodes = [
24 |       { type:'type1', data:'type1 1' },
25 |       { type:'type2', data:'type2 1' },
26 |       { type:'type1', data:'type1 2' }
27 |     ];
28 | 
29 |     const node1 = convertNodeToElement(nodes[0], 0, transform);
30 |     expect(node1).toBe('type1');
31 | 
32 |     const node2 = convertNodeToElement(nodes[1], 1, transform);
33 |     expect(node2).toBe('type2');
34 | 
35 |     const node3 = convertNodeToElement(nodes[2], 2, transform);
36 |     expect(node3).toBe('type1');
37 | 
38 |     expect(ElementTypes.type1.calls.count()).toBe(2);
39 |     expect(ElementTypes.type1.calls.argsFor(0)).toEqual([nodes[0], 0, transform]);
40 |     expect(ElementTypes.type1.calls.argsFor(1)).toEqual([nodes[2], 2, transform]);
41 | 
42 |     expect(ElementTypes.type2.calls.count()).toBe(1);
43 |     expect(ElementTypes.type2.calls.argsFor(0)).toEqual([nodes[1], 1, transform]);
44 | 
45 |   });
46 | 
47 | });
48 | 


--------------------------------------------------------------------------------
/test/unit/elementTypes/StyleElementType.spec.js:
--------------------------------------------------------------------------------
 1 | const props = {
 2 |   prop1: 'value1',
 3 |   prop2: 'value2'
 4 | };
 5 | const generatePropsFromAttributes = jasmine.createSpy('generatePropsFromAttributes');
 6 | 
 7 | const StyleElementType = require('inject!elementTypes/StyleElementType')({
 8 |   '../utils/generatePropsFromAttributes': generatePropsFromAttributes
 9 | }).default;
10 | 
11 | describe('Testing `elementTypes/StyleElementType', () => {
12 | 
13 |   beforeEach(() => {
14 |     generatePropsFromAttributes.calls.reset();
15 |     generatePropsFromAttributes.and.returnValue(props);
16 |   });
17 | 
18 |   it('should return a `style` element with a single text child if the node has children', () => {
19 |     const node = {
20 |       children: [
21 |         { data: 'style data' }
22 |       ]
23 |     };
24 |     const styleElement = StyleElementType(node, 'key');
25 |     expect(styleElement.type).toBe('style');
26 |     expect(styleElement.props).toEqual({
27 |       prop1: 'value1',
28 |       prop2: 'value2',
29 |       children: 'style data'
30 |     });
31 |   });
32 | 
33 |   it('should return a `style` element with no children if the node has no children', () => {
34 |     const node = {
35 |       children: []
36 |     };
37 |     const styleElement = StyleElementType(node, 'key');
38 |     expect(styleElement.type).toBe('style');
39 |     expect(styleElement.props).toEqual({
40 |       prop1: 'value1',
41 |       prop2: 'value2',
42 |       children: undefined
43 |     });
44 |   });
45 | 
46 | });
47 | 


--------------------------------------------------------------------------------
/test/unit/elementTypes/TagElementType.spec.js:
--------------------------------------------------------------------------------
 1 | const generatePropsFromAttributes = jasmine.createSpy('generatePropsFromAttributes');
 2 | const processNodes = jasmine.createSpy('processNodes');
 3 | const VoidElements = ['void'];
 4 | const isValidTagOrAttributeName = jasmine.createSpy('isValidTagOrAttributeName');
 5 | 
 6 | const TagElementType = require('inject!elementTypes/TagElementType')({
 7 |   '../utils/generatePropsFromAttributes': generatePropsFromAttributes,
 8 |   '../processNodes': processNodes,
 9 |   '../dom/elements/VoidElements': VoidElements,
10 |   '../utils/isValidTagOrAttributeName': isValidTagOrAttributeName
11 | }).default;
12 | 
13 | describe('Testing `elementTypes/TagElementType', () => {
14 | 
15 |   let transform;
16 |   beforeEach(() => {
17 |     generatePropsFromAttributes.calls.reset();
18 |     generatePropsFromAttributes.and.callFake(attrs => attrs);
19 |     processNodes.calls.reset();
20 |     processNodes.and.returnValue('children');
21 |     isValidTagOrAttributeName.calls.reset();
22 |     isValidTagOrAttributeName.and.returnValue(true);
23 |     transform = function() {};
24 |   });
25 | 
26 |   it('should return a React element corresponding to the node name', () => {
27 | 
28 |     const node1 = {
29 |       name: 'h1',
30 |       attribs: {
31 |         id: 'test'
32 |       },
33 |       children: 'node 1 children'
34 |     };
35 |     const node1Element = TagElementType(node1, 'key', transform);
36 |     expect(node1Element.type).toBe('h1');
37 |     expect(node1Element.props).toEqual({
38 |       id: 'test',
39 |       children: 'children'
40 |     });
41 |     expect(processNodes).toHaveBeenCalledWith('node 1 children', transform);
42 |     expect(generatePropsFromAttributes).toHaveBeenCalledWith(node1.attribs, 'key');
43 | 
44 |   });
45 | 
46 |   it('should not pass though children for void elements', () => {
47 | 
48 |     const voidNode = {
49 |       name: 'void',
50 |       attribs: {
51 |         id: 'test'
52 |       },
53 |       children: 'child'
54 |     };
55 | 
56 |     const voidElement = TagElementType(voidNode, 'key');
57 |     expect(voidElement.type).toBe('void');
58 |     expect(voidElement.props.children).toBe(null);
59 | 
60 |   });
61 | 
62 |   it('should return null for invalid tag types', () => {
63 |     isValidTagOrAttributeName.and.returnValue(false);
64 |     const invalidNode = {
65 |       name: 'invalid'
66 |     };
67 |     expect(TagElementType(invalidNode)).toBeNull();
68 |   });
69 | 
70 | });
71 | 


--------------------------------------------------------------------------------
/test/unit/elementTypes/TextElementType.spec.js:
--------------------------------------------------------------------------------
 1 | import TextElementType from 'elementTypes/TextElementType';
 2 | 
 3 | describe('Testing `elementTypes/TextElementType', () => {
 4 | 
 5 |   it('should return the value from the node data property', () => {
 6 |     const node = {
 7 |       data: 'test'
 8 |     };
 9 |     expect(TextElementType(node)).toBe('test');
10 |   });
11 | 
12 | });
13 | 


--------------------------------------------------------------------------------
/test/unit/elementTypes/UnsupportedElementType.spec.js:
--------------------------------------------------------------------------------
 1 | import UnsupportedElementType from 'elementTypes/UnsupportedElementType';
 2 | 
 3 | describe('Testing `elementTypes/UnsupportedElementType', () => {
 4 | 
 5 |   it('should always return null', () => {
 6 |     expect(UnsupportedElementType()).toBeNull();
 7 |     expect(UnsupportedElementType('test')).toBeNull();
 8 |     expect(UnsupportedElementType({}, 'test')).toBeNull();
 9 |   });
10 | 
11 | });
12 | 


--------------------------------------------------------------------------------
/test/unit/processNodes.spec.js:
--------------------------------------------------------------------------------
 1 | const isEmptyTextNode = jasmine.createSpy('isEmptyTextNode');
 2 | const convertNodeToElement = jasmine.createSpy('convertNodeToElement');
 3 | 
 4 | const processNodes = require('inject!processNodes')({
 5 |   './utils/isEmptyTextNode': isEmptyTextNode,
 6 |   './convertNodeToElement': convertNodeToElement
 7 | }).default;
 8 | 
 9 | describe('Testing `processNodes`', () => {
10 | 
11 |   beforeEach(() => {
12 |     isEmptyTextNode.calls.reset();
13 |     isEmptyTextNode.and.returnValue(false);
14 |     convertNodeToElement.calls.reset();
15 |     convertNodeToElement.and.callFake(node => node);
16 |   });
17 | 
18 |   it('should filter out empty text nodes', () => {
19 | 
20 |     isEmptyTextNode.and.callFake(node => node !== 'node2');
21 | 
22 |     const nodes = [
23 |       'node1',
24 |       'node2',
25 |       'node3'
26 |     ];
27 | 
28 |     expect(processNodes(nodes)).toEqual(['node2']);
29 | 
30 |   });
31 | 
32 |   it('should return the response from the transform function if it is not undefined', () => {
33 |     const nodes = [
34 |       'node1',
35 |       'node2'
36 |     ];
37 |     const transform = node => `${node}_transformed`;
38 |     expect(processNodes(nodes, transform)).toEqual([
39 |       'node1_transformed',
40 |       'node2_transformed'
41 |     ]);
42 |   });
43 | 
44 |   it('should return the response from the transform function if it is null', () => {
45 |     const nodes = [
46 |       'node1',
47 |       'node2'
48 |     ];
49 |     const transform = () => null;
50 |     expect(processNodes(nodes, transform)).toEqual([
51 |       null,
52 |       null
53 |     ]);
54 |   });
55 | 
56 |   it('should ignore the response from the transform function if it is undefined', () => {
57 |     const nodes = [
58 |       'node1',
59 |       'node2'
60 |     ];
61 |     const transform = () => {};
62 |     convertNodeToElement.and.callFake(node => `${node}_converted`);
63 |     expect(processNodes(nodes, transform)).toEqual([
64 |       'node1_converted',
65 |       'node2_converted'
66 |     ]);
67 |   });
68 | 
69 |   it('should convert the node to an element if there is no transform function', () => {
70 |     const nodes = [
71 |       'node1',
72 |       'node2'
73 |     ];
74 |     convertNodeToElement.and.callFake(node => `${node}_converted`);
75 |     expect(processNodes(nodes)).toEqual([
76 |       'node1_converted',
77 |       'node2_converted'
78 |     ]);
79 |   });
80 | 
81 | });
82 | 


--------------------------------------------------------------------------------
/test/unit/utils/generatePropsFromAttributes.spec.js:
--------------------------------------------------------------------------------
 1 | const htmlAttributesToReact = jasmine.createSpy('htmlAttributesToReact');
 2 | const inlineStyleToObject = jasmine.createSpy('inlineStyleToObject');
 3 | 
 4 | const generatePropsFromAttributes = require('inject!utils/generatePropsFromAttributes')({
 5 |   './htmlAttributesToReact': htmlAttributesToReact,
 6 |   './inlineStyleToObject': inlineStyleToObject
 7 | }).default;
 8 | 
 9 | describe('Testing `utils/generatePropsFromAttributes`', () => {
10 | 
11 |   beforeEach(() => {
12 |     htmlAttributesToReact.calls.reset();
13 |     htmlAttributesToReact.and.callFake(attribs => attribs);
14 |     inlineStyleToObject.calls.reset();
15 |     inlineStyleToObject.and.returnValue('converted-style');
16 |   });
17 | 
18 |   it('should return an object with the converted html attributes and key', () => {
19 | 
20 |     const attributes = {
21 |       attr1: 'one',
22 |       attr2: 'two'
23 |     };
24 | 
25 |     expect(generatePropsFromAttributes(attributes, 'the-key')).toEqual({
26 |       attr1: 'one',
27 |       attr2: 'two',
28 |       key: 'the-key'
29 |     });
30 |     expect(htmlAttributesToReact).toHaveBeenCalledWith(attributes);
31 | 
32 |   });
33 | 
34 |   it('should return an object containing the converted style prop if there is a style html attribute', () => {
35 | 
36 |     const attributes = {
37 |       style: 'style'
38 |     };
39 | 
40 |     expect(generatePropsFromAttributes(attributes, 'style-key')).toEqual({
41 |       style: 'converted-style',
42 |       key: 'style-key'
43 |     });
44 |     expect(inlineStyleToObject).toHaveBeenCalledWith('style');
45 | 
46 |   });
47 | 
48 |   it('should return an object containing the converted style prop when the style html attribute is an empty string', () => {
49 |     const attributes = {
50 |       style: ''
51 |     };
52 | 
53 |     expect(generatePropsFromAttributes(attributes, 'style-key')).toEqual({
54 |       style: 'converted-style',
55 |       key: 'style-key'
56 |     });
57 |     expect(inlineStyleToObject).toHaveBeenCalledWith('');
58 |   });
59 | 
60 | });
61 | 


--------------------------------------------------------------------------------
/test/unit/utils/htmlAttributesToReact.spec.js:
--------------------------------------------------------------------------------
 1 | const isValidTagOrAttributeName = jasmine.createSpy('isValidTagOrAttributeName');
 2 | 
 3 | const htmlAttributesToReact = require('inject!utils/htmlAttributesToReact')({
 4 |   './isValidTagOrAttributeName': isValidTagOrAttributeName
 5 | }).default;
 6 | 
 7 | describe('Testing `utils/htmlAttributesToReact`', () => {
 8 | 
 9 |   beforeEach(() => {
10 |     isValidTagOrAttributeName.calls.reset();
11 |     isValidTagOrAttributeName.and.returnValue(true);
12 |   });
13 | 
14 |   it('should return an object of react html attributes from an object of standard html attributes', () => {
15 | 
16 |     const htmlAttributes = {
17 |       // class and for have special mappings
18 |       class: 'testClass',
19 |       for: 'testFor',
20 |       // test a few other attributes
21 |       minlength: 1,
22 |       'accept-charset': 'testAcceptCharset',
23 |       formnovalidate: 'testFormNoValidate',
24 |       // it should also lowercase all attributes before using them
25 |       LABEL: 'testLabel',
26 |       // custom attributes - data-* & aria-*
27 |       'data-test': 'test',
28 |       'aria-role': 'role',
29 |       // it should also use non specified attributes (although react will filter these out)
30 |       testattribute: 'testAttribute',
31 |       'UPPER-CASE-TEST-ATTRIBUTE': 'upperTestAttribute',
32 |       // boolean attributes
33 |       disabled: '',
34 |       checked: '',
35 |       autoplay: ''
36 |     };
37 | 
38 |     const expectedReactAttributes = {
39 |       className: 'testClass',
40 |       htmlFor: 'testFor',
41 |       minLength: 1,
42 |       acceptCharset: 'testAcceptCharset',
43 |       formNoValidate: 'formNoValidate',
44 |       label: 'testLabel',
45 |       'data-test': 'test',
46 |       'aria-role': 'role',
47 |       testattribute: 'testAttribute',
48 |       'upper-case-test-attribute': 'upperTestAttribute',
49 |       disabled: 'disabled',
50 |       checked: 'checked',
51 |       autoPlay: 'autoPlay'
52 |     };
53 | 
54 |     expect(htmlAttributesToReact(htmlAttributes)).toEqual(expectedReactAttributes);
55 | 
56 |   });
57 | 
58 |   it('should filter out invalid attributes', () => {
59 |     isValidTagOrAttributeName.and.callFake(attribute => {
60 |       return attribute === 'attribute1' || attribute === 'attribute3';
61 |     });
62 |     const validKeys = htmlAttributesToReact({
63 |       attribute1: '',
64 |       attribute2: '',
65 |       attribute3: ''
66 |     });
67 |     expect(Object.keys(validKeys)).toEqual(['attribute1', 'attribute3']);
68 |   });
69 | 
70 | });
71 | 


--------------------------------------------------------------------------------
/test/unit/utils/inlineStyleToObject.spec.js:
--------------------------------------------------------------------------------
 1 | import inlineStyleToObject from 'utils/inlineStyleToObject';
 2 | 
 3 | describe('Testing `utils/inlineStyleToObject', () => {
 4 | 
 5 |   it('should return an empty object if the inline style is empty', () => {
 6 |     expect(inlineStyleToObject()).toEqual({});
 7 |     expect(inlineStyleToObject('')).toEqual({});
 8 |   });
 9 | 
10 |   it('should camelise each style whenever there is a hyphen', () => {
11 |     const inlineStyle = 'text-decoration:none;-webkit-border-radius:5px;';
12 |     const expectedStyleObject = {
13 |       textDecoration: 'none',
14 |       'WebkitBorderRadius': '5px'
15 |     };
16 |     expect(inlineStyleToObject(inlineStyle)).toEqual(expectedStyleObject);
17 |   });
18 | 
19 |   it('should ignore invalid style properties', () => {
20 |     const inlineStyle = 'font-color:red;invalid;color:blue;';
21 |     const expectedStyleObject = {
22 |       fontColor: 'red',
23 |       color: 'blue'
24 |     };
25 |     expect(inlineStyleToObject(inlineStyle)).toEqual(expectedStyleObject);
26 |   });
27 | 
28 |   it('should not upper case the beginning `m` when using the `-ms-` vendor prefix', () => {
29 |     const inlineStyle = '-ms-border-radius:10px';
30 |     const expectedStyleObject = {
31 |       'msBorderRadius': '10px'
32 |     };
33 |     expect(inlineStyleToObject(inlineStyle)).toEqual(expectedStyleObject);
34 |   });
35 | 
36 |   it('should parse styles containing multiple colons correctly', () => {
37 |     const inlineStyle = 'background:url(https://test.com/image.png);color:white;';
38 |     const expectedStyleObject = {
39 |       background: 'url(https://test.com/image.png)',
40 |       color: 'white'
41 |     };
42 |     expect(inlineStyleToObject(inlineStyle)).toEqual(expectedStyleObject);
43 |   });
44 | 
45 | });
46 | 


--------------------------------------------------------------------------------
/test/unit/utils/isEmptyTextNode.spec.js:
--------------------------------------------------------------------------------
 1 | import isEmptyTextNode from 'utils/isEmptyTextNode';
 2 | 
 3 | describe('Testing `utils/isEmptyTextNode`', () => {
 4 | 
 5 |   it('should return true for text nodes that contain a line break', () => {
 6 | 
 7 |     const nodes = [
 8 |       { type: 'text', data:'\n' },
 9 |       { type: 'text', data:'   \n' },
10 |       { type: 'text', data:'\n   ' },
11 |       { type: 'text', data:'    \n   ' },
12 |       { type: 'text', data:'\r\n' },
13 |       { type: 'text', data:'   \r\n' },
14 |       { type: 'text', data:'\r\n   ' },
15 |       { type: 'text', data:'    \r\n   ' }
16 |     ];
17 | 
18 |     nodes.forEach(node => {
19 |       expect(isEmptyTextNode(node)).toBe(true);
20 |     });
21 | 
22 |   });
23 | 
24 |   it('should return false for text nodes not containing a line break', () => {
25 |     expect(isEmptyTextNode({ type:'text', data: '' })).toBe(false);
26 |   });
27 | 
28 |   it('should return false for non text nodes', () => {
29 |     expect(isEmptyTextNode({ type:'tag' })).toBe(false);
30 |   });
31 | 
32 | });
33 | 


--------------------------------------------------------------------------------
/test/unit/utils/isValidTagOrAttributeName.spec.js:
--------------------------------------------------------------------------------
 1 | import isValidTagOrAttributeName from 'utils/isValidTagOrAttributeName';
 2 | 
 3 | describe('Testing `utils/isValidTagOrAttributeName`', () => {
 4 | 
 5 |   it('valid names must start with a letter', () => {
 6 |     expect(isValidTagOrAttributeName('1')).toBe(false);
 7 |     expect(isValidTagOrAttributeName(':')).toBe(false);
 8 |     expect(isValidTagOrAttributeName('asd')).toBe(true);
 9 |   });
10 | 
11 |   it('valid names can contain letters', () => {
12 |     expect(isValidTagOrAttributeName('abc')).toBe(true);
13 |   });
14 | 
15 |   it('valid names can contain numbers', () => {
16 |     expect(isValidTagOrAttributeName('a1')).toBe(true);
17 |   });
18 | 
19 |   it('valid names can contain colons', () => {
20 |     expect(isValidTagOrAttributeName('a:b')).toBe(true);
21 |   });
22 | 
23 |   it('valid names can contain underscores', () => {
24 |     expect(isValidTagOrAttributeName('a_b')).toBe(true);
25 |   });
26 | 
27 |   it('valid names can contain dots', () => {
28 |     expect(isValidTagOrAttributeName('a.b')).toBe(true);
29 |   });
30 | 
31 |   it('valid names can contain hyphens', () => {
32 |     expect(isValidTagOrAttributeName('a-b')).toBe(true);
33 |   });
34 | 
35 |   it('valid names cannot contain invalid characters', () => {
36 |     expect(isValidTagOrAttributeName('a!b')).toBe(false);
37 |     expect(isValidTagOrAttributeName('a/b')).toBe(false);
38 |   });
39 | 
40 | });
41 | 


--------------------------------------------------------------------------------
/tests.webpack.js:
--------------------------------------------------------------------------------
1 | // require all test files
2 | const testsContext = require.context('./test', true, /\.spec\.js$/);
3 | testsContext.keys().forEach(testsContext);
4 | 
5 | // require all src files
6 | const componentsContext = require.context('./src/', true, /\.js$/);
7 | componentsContext.keys().forEach(componentsContext);
8 | 


--------------------------------------------------------------------------------
/webpack.config.base.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | 
 3 | module.exports = {
 4 |   module: {
 5 |     loaders: [
 6 |       {
 7 |         test: /\.js$/,
 8 |         exclude: [
 9 |           /node_modules/
10 |         ],
11 |         loader: 'babel',
12 |         query: {
13 |           presets: [
14 |             'react',
15 |             'es2015'
16 |           ],
17 |           plugins: [
18 |             'transform-object-assign'
19 |           ]
20 |         }
21 |       },
22 |       {
23 |         test: /\.json$/,
24 |         loader: 'json'
25 |       }
26 |     ]
27 |   },
28 |   resolve: {
29 |     root: [
30 |       path.join(__dirname, 'src')
31 |     ],
32 |     extensions: ['', '.js']
33 |   },
34 |   output: {
35 |     library: 'ReactHtmlParser',
36 |     libraryTarget: 'umd'
37 |   },
38 |   externals: {
39 |     'react': 'React'
40 |   }
41 | };
42 | 


--------------------------------------------------------------------------------
/webpack.config.development.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var config = require('./webpack.config.base');
 3 | 
 4 | var config = Object.create(config);
 5 | 
 6 | config.plugins = [
 7 |   new webpack.optimize.OccurenceOrderPlugin(),
 8 |   new webpack.DefinePlugin({
 9 |     'process.env.NODE_ENV': JSON.stringify('development')
10 |   })
11 | ];
12 | 
13 | module.exports = config;


--------------------------------------------------------------------------------
/webpack.config.production.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var config = require('./webpack.config.base');
 3 | 
 4 | var config = Object.create(config);
 5 | 
 6 | config.plugins = [
 7 |   new webpack.optimize.OccurenceOrderPlugin(),
 8 |   new webpack.DefinePlugin({
 9 |     'process.env.NODE_ENV': JSON.stringify('production')
10 |   }),
11 |   new webpack.optimize.UglifyJsPlugin({
12 |     compressor: {
13 |       warnings: false
14 |     }
15 |   })
16 | ];
17 | 
18 | module.exports = config;


--------------------------------------------------------------------------------
/webpack.config.test.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpackConfig = require('./webpack.config.base');
 3 | webpackConfig.watch = true;
 4 | webpackConfig.isparta = {
 5 |   embedSource: true,
 6 |   noAutoWrap: true
 7 | };
 8 | webpackConfig.module.preLoaders = [
 9 |   {
10 |     test: /\.jsx?$/,
11 |     include: path.join(__dirname, 'src'),
12 |     loader: 'isparta'
13 |   }
14 | ];
15 | delete webpackConfig.externals;
16 | delete webpackConfig.output;
17 | 
18 | module.exports = webpackConfig;


--------------------------------------------------------------------------------