` elements with a React component would end up with multiple top-level React components
31 | that have no common parent.
32 |
33 | The **html-to-react** module solves this problem by parsing each DOM element and converting it to a React tree with one
34 | single parent.
35 |
36 | ## Installation
37 |
38 | `$ npm install --save html-to-react`
39 |
40 | ## Examples
41 |
42 | ### Simple
43 |
44 | The following example parses each node and its attributes and returns a tree of React components.
45 |
46 | ```javascript
47 | var React = require('react');
48 | var HtmlToReact = new require('html-to-react');
49 |
50 | var htmlInput = '';
51 | var htmlToReactParser = new HtmlToReact.Parser(React);
52 | var reactComponent = htmlToReactParser.parse(htmlInput);
53 | var reactHtml = React.renderToStaticMarkup(reactComponent);
54 |
55 | assert.equal(reactHtml, htmlInput); // true
56 | ```
57 |
58 | ### With custom processing instructions
59 |
60 | If certain DOM nodes require specific processing, for example if you want to capitalize each `` tag, the following
61 | example demonstrates this:
62 |
63 | ```javascript
64 | var React = require('react');
65 | var HtmlToReact = new require('html-to-react');
66 |
67 | var htmlInput = '
Title
A paragraph
` tag, the following
61 | example demonstrates this:
62 |
63 | ```javascript
64 | var React = require('react');
65 | var HtmlToReact = new require('html-to-react');
66 |
67 | var htmlInput = 'Title
Paragraph
Another title
';
68 | var htmlExpected = 'TITLE
Paragraph
ANOTHER TITLE
';
69 |
70 | var isValidNode = function() {
71 | return true;
72 | };
73 |
74 | // Order matters. Instructions are processed in the order they're defined
75 | var processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
76 | var processingInstructions = [
77 | {
78 | // Custom processing
79 | shouldProcessNode: function(node) {
80 | return node.parent && node.parent.name && node.parent.name === 'h1';
81 | },
82 | processNode: function(node, children) {
83 | return node.data.toUpperCase();
84 | }
85 | }, {
86 | // Anything else
87 | shouldProcessNode: function(node) {
88 | return true;
89 | },
90 | processNode: processNodeDefinitions.processDefaultNode
91 | }];
92 | var htmlToReactParser = new HtmlToReact.Parser(React);
93 | var reactComponent = htmlToReactParser.parseWithInstructions(htmlInput, isValidNode, processingInstructions);
94 | var reactHtml = React.renderToStaticMarkup(reactComponent);
95 | assert.equal(reactHtml, htmlExpected);
96 | ```
97 |
98 | ## Tests & Coverage
99 |
100 | `$ npm run test-locally`
101 |
102 | `$ npm run test-html-coverage`
103 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var parser = require('./lib/parser');
4 | var processingInstructions = require('./lib/processing-instructions');
5 | var isValidNodeDefinitions = require('./lib/is-valid-node-definitions');
6 | var processNodeDefinitions = require('./lib/process-node-definitions');
7 |
8 | module.exports = {
9 | Parser: parser,
10 | ProcessingInstructions: processingInstructions,
11 | IsValidNodeDefinitions: isValidNodeDefinitions,
12 | ProcessNodeDefinitions: processNodeDefinitions,
13 | };
14 |
--------------------------------------------------------------------------------
/lib/camel-case-attribute-names.js:
--------------------------------------------------------------------------------
1 | // These are all sourced from https://facebook.github.io/react/docs/tags-and-attributes.html -
2 | // all attributes regardless of whether they have a different case to their HTML equivalents are
3 | // listed to reduce the chance of human error and make it easier to just copy-paste the new list if
4 | // it changes.
5 | 'use strict';
6 | var HTML_ATTRIBUTES = [
7 | 'accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'allowTransparency',
8 | 'alt', 'async', 'autoComplete', 'autoFocus', 'autoPlay', 'capture', 'cellPadding',
9 | 'cellSpacing', 'challenge', 'charSet', 'checked', 'cite', 'classID', 'className',
10 | 'colSpan', 'cols', 'content', 'contentEditable', 'contextMenu', 'controls', 'coords',
11 | 'crossOrigin', 'data', 'dateTime', 'default', 'defer', 'dir', 'disabled', 'download',
12 | 'draggable', 'encType', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate',
13 | 'formTarget', 'frameBorder', 'headers', 'height', 'hidden', 'high', 'href', 'hrefLang',
14 | 'htmlFor', 'httpEquiv', 'icon', 'id', 'inputMode', 'integrity', 'is', 'keyParams', 'keyType',
15 | 'kind', 'label', 'lang', 'list', 'loop', 'low', 'manifest', 'marginHeight', 'marginWidth',
16 | 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'minLength', 'multiple', 'muted',
17 | 'name', 'noValidate', 'nonce', 'open', 'optimum', 'pattern', 'placeholder', 'poster',
18 | 'preload', 'profile', 'radioGroup', 'readOnly', 'rel', 'required', 'reversed', 'role',
19 | 'rowSpan', 'rows', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected',
20 | 'shape', 'size', 'sizes', 'span', 'spellCheck', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start',
21 | 'step', 'style', 'summary', 'tabIndex', 'target', 'title', 'type', 'useMap', 'value', 'width',
22 | 'wmode', 'wrap',
23 | ];
24 |
25 | var NON_STANDARD_ATTRIBUTES = [
26 | 'autoCapitalize', 'autoCorrect', 'color', 'itemProp', 'itemScope', 'itemType', 'itemRef',
27 | 'itemID', 'security', 'unselectable', 'results', 'autoSave',
28 | ];
29 |
30 | var SVG_ATTRIBUTES = [
31 | 'accentHeight', 'accumulate', 'additive', 'alignmentBaseline', 'allowReorder', 'alphabetic',
32 | 'amplitude', 'arabicForm', 'ascent', 'attributeName', 'attributeType', 'autoReverse',
33 | 'azimuth', 'baseFrequency', 'baseProfile', 'baselineShift', 'bbox', 'begin', 'bias', 'by',
34 | 'calcMode', 'capHeight', 'clip', 'clipPath', 'clipPathUnits', 'clipRule', 'colorInterpolation',
35 | 'colorInterpolationFilters', 'colorProfile', 'colorRendering', 'contentScriptType',
36 | 'contentStyleType', 'cursor', 'cx', 'cy', 'd', 'decelerate', 'descent', 'diffuseConstant',
37 | 'direction', 'display', 'divisor', 'dominantBaseline', 'dur', 'dx', 'dy', 'edgeMode',
38 | 'elevation', 'enableBackground', 'end', 'exponent', 'externalResourcesRequired', 'fill',
39 | 'fillOpacity', 'fillRule', 'filter', 'filterRes', 'filterUnits', 'floodColor', 'floodOpacity',
40 | 'focusable', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle',
41 | 'fontVariant', 'fontWeight', 'format', 'from', 'fx', 'fy', 'g1', 'g2', 'glyphName',
42 | 'glyphOrientationHorizontal', 'glyphOrientationVertical', 'glyphRef', 'gradientTransform',
43 | 'gradientUnits', 'hanging', 'horizAdvX', 'horizOriginX', 'ideographic', 'imageRendering',
44 | 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kernelMatrix', 'kernelUnitLength',
45 | 'kerning', 'keyPoints', 'keySplines', 'keyTimes', 'lengthAdjust', 'letterSpacing',
46 | 'lightingColor', 'limitingConeAngle', 'local', 'markerEnd', 'markerHeight', 'markerMid',
47 | 'markerStart', 'markerUnits', 'markerWidth', 'mask', 'maskContentUnits', 'maskUnits',
48 | 'mathematical', 'mode', 'numOctaves', 'offset', 'opacity', 'operator', 'order',
49 | 'orient', 'orientation', 'origin', 'overflow', 'overlinePosition', 'overlineThickness',
50 | 'paintOrder', 'panose1', 'pathLength', 'patternContentUnits', 'patternTransform',
51 | 'patternUnits', 'pointerEvents', 'points', 'pointsAtX', 'pointsAtY', 'pointsAtZ',
52 | 'preserveAlpha', 'preserveAspectRatio', 'primitiveUnits', 'r', 'radius', 'refX', 'refY',
53 | 'renderingIntent', 'repeatCount', 'repeatDur', 'requiredExtensions', 'requiredFeatures',
54 | 'restart', 'result', 'rotate', 'rx', 'ry', 'scale', 'seed', 'shapeRendering', 'slope',
55 | 'spacing', 'specularConstant', 'specularExponent', 'speed', 'spreadMethod', 'startOffset',
56 | 'stdDeviation', 'stemh', 'stemv', 'stitchTiles', 'stopColor', 'stopOpacity',
57 | 'strikethroughPosition', 'strikethroughThickness', 'string', 'stroke', 'strokeDasharray',
58 | 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit',
59 | 'strokeOpacity', 'strokeWidth', 'surfaceScale', 'systemLanguage', 'tableValues', 'targetX',
60 | 'targetY', 'textAnchor', 'textDecoration', 'textLength', 'textRendering', 'to', 'transform',
61 | 'u1', 'u2', 'underlinePosition', 'underlineThickness', 'unicode', 'unicodeBidi',
62 | 'unicodeRange', 'unitsPerEm', 'vAlphabetic', 'vHanging', 'vIdeographic', 'vMathematical',
63 | 'values', 'vectorEffect', 'version', 'vertAdvY', 'vertOriginX', 'vertOriginY', 'viewBox',
64 | 'viewTarget', 'visibility', 'widths', 'wordSpacing', 'writingMode', 'x', 'x1', 'x2',
65 | 'xChannelSelector', 'xHeight', 'xlinkActuate', 'xlinkArcrole', 'xlinkHref', 'xlinkRole',
66 | 'xlinkShow', 'xlinkTitle', 'xlinkType', 'xmlBase', 'xmlLang', 'xmlSpace', 'y', 'y1', 'y2',
67 | 'yChannelSelector', 'z', 'zoomAndPan',
68 | ];
69 |
70 | var camelCaseMap = HTML_ATTRIBUTES
71 | .concat(NON_STANDARD_ATTRIBUTES)
72 | .concat(SVG_ATTRIBUTES)
73 | .reduce(function (soFar, attr) {
74 | var lower = attr.toLowerCase();
75 | if (lower !== attr) {
76 | soFar[lower] = attr;
77 | }
78 | return soFar;
79 | }, {});
80 |
81 | module.exports = camelCaseMap;
82 |
--------------------------------------------------------------------------------
/lib/is-valid-node-definitions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function alwaysValid() {
4 | return true;
5 | }
6 |
7 | module.exports = {
8 | alwaysValid: alwaysValid
9 | };
10 |
--------------------------------------------------------------------------------
/lib/parser.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | var find = require('lodash.find');
3 | var map = require('lodash.map');
4 | var htmlParser = require('htmlparser2');
5 | var ProcessingInstructions = require('./processing-instructions');
6 | var IsValidNodeDefinitions = require('./is-valid-node-definitions');
7 |
8 | var Html2React = function(React, options) {
9 | var parseHtmlToTree = function(html) {
10 | var handler = new htmlParser.DomHandler();
11 | var parser = new htmlParser.Parser(handler, options);
12 | parser.parseComplete(html);
13 | return handler.dom;
14 | };
15 |
16 | var traverseDom = function(node, isValidNode, processingInstructions, index) {
17 | if (isValidNode(node)) {
18 | var processingInstruction = find(processingInstructions || [],
19 | function (processingInstruction) {
20 | return processingInstruction.shouldProcessNode(node);
21 | });
22 | if (processingInstruction != null) {
23 | var children = map(node.children || [], function (child, i) {
24 | return traverseDom(child, isValidNode, processingInstructions, i);
25 | }).filter(function (x) {
26 | return x != null;
27 | });
28 | return processingInstruction.processNode(node, children, index);
29 | } else {
30 | return false;
31 | }
32 | } else {
33 | return false;
34 | }
35 | };
36 |
37 | var parseWithInstructions = function(html, isValidNode, processingInstructions) {
38 | var domTree = parseHtmlToTree(html);
39 | // TODO: Deal with HTML that contains more than one root level node
40 | if (domTree && domTree.length !== 1) {
41 | throw new Error(
42 | 'html-to-react currently only supports HTML with one single root element. ' +
43 | 'The HTML provided contains ' + domTree.length +
44 | ' root elements. You can fix that by simply wrapping your HTML ' +
45 | 'in a element.');
46 | }
47 | return traverseDom(domTree[0], isValidNode, processingInstructions, 0);
48 | };
49 |
50 | var parse = function(html) {
51 | var processingInstructions = new ProcessingInstructions(React);
52 | return parseWithInstructions(html,
53 | IsValidNodeDefinitions.alwaysValid,
54 | processingInstructions.defaultProcessingInstructions);
55 | };
56 |
57 | return {
58 | parse: parse,
59 | parseWithInstructions: parseWithInstructions,
60 | };
61 | };
62 |
63 | module.exports = Html2React;
64 |
--------------------------------------------------------------------------------
/lib/process-node-definitions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var isEmpty = require('lodash.isempty');
4 | var map = require('lodash.map');
5 | var fromPairs = require('lodash.frompairs');
6 | var camelCase = require('lodash.camelcase');
7 | var includes = require('lodash.includes');
8 | var merge = require('lodash.merge');
9 | var ent = require('ent');
10 | var camelCaseAttrMap = require('./camel-case-attribute-names');
11 |
12 | // https://github.com/facebook/react/blob/15.0-stable/src/renderers/dom/shared/ReactDOMComponent.js#L457
13 | var voidElementTags = [
14 | 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param',
15 | 'source', 'track', 'wbr', 'menuitem', 'textarea',
16 | ];
17 |
18 | function createStyleJsonFromString(styleString) {
19 | if (!styleString) {
20 | return {};
21 | }
22 | var styles = styleString.split(';');
23 | var singleStyle, key, value, jsonStyles = {};
24 | for (var i = 0; i < styles.length; i++) {
25 | singleStyle = styles[i].split(':');
26 | key = camelCase(singleStyle[0]);
27 | value = singleStyle[1];
28 | if (key.length > 0 && value.length > 0) {
29 | jsonStyles[key] = value;
30 | }
31 | }
32 | return jsonStyles;
33 | }
34 |
35 | var ProcessNodeDefinitions = function(React) {
36 | function processDefaultNode(node, children, index) {
37 | if (node.type === 'text') {
38 | return ent.decode(node.data);
39 | } else if (node.type === 'comment') {
40 | // FIXME: The following doesn't work as the generated HTML results in "<!-- This is a comment -->"
41 | //return '';
42 | return false;
43 | }
44 |
45 | var elementProps = {
46 | key: index,
47 | };
48 | // Process attributes
49 | if (!isEmpty(node.attribs)) {
50 | elementProps = merge(elementProps, fromPairs(map(node.attribs, function (value, key) {
51 | if (key === 'style') {
52 | value = createStyleJsonFromString(node.attribs.style);
53 | } else if (key === 'class') {
54 | key = 'className';
55 | } else if (camelCaseAttrMap[key]) {
56 | key = camelCaseAttrMap[key];
57 | }
58 |
59 | return [key, value || key,];
60 | })));
61 | }
62 |
63 | if (includes(voidElementTags, node.name)) {
64 | return React.createElement(node.name, elementProps)
65 | } else {
66 | var allChildren = node.data != null ? [node.data,].concat(children) : children;
67 | return React.createElement.apply(
68 | this, [node.name, elementProps,].concat(allChildren)
69 | );
70 | }
71 | }
72 |
73 | return {
74 | processDefaultNode: processDefaultNode,
75 | };
76 | };
77 |
78 | module.exports = ProcessNodeDefinitions;
79 |
--------------------------------------------------------------------------------
/lib/processing-instructions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var ShouldProcessNodeDefinitions = require('./should-process-node-definitions');
4 | var ProcessNodeDefinitions = require('./process-node-definitions');
5 |
6 | var ProcessingInstructions = function(React) {
7 | var processNodeDefinitions = new ProcessNodeDefinitions(React);
8 |
9 | return {
10 | defaultProcessingInstructions: [{
11 | shouldProcessNode: ShouldProcessNodeDefinitions.shouldProcessEveryNode,
12 | processNode: processNodeDefinitions.processDefaultNode,
13 | },],
14 | };
15 | };
16 |
17 | module.exports = ProcessingInstructions;
18 |
--------------------------------------------------------------------------------
/lib/should-process-node-definitions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function shouldProcessEveryNode(node) {
4 | return true;
5 | }
6 |
7 | module.exports = {
8 | shouldProcessEveryNode: shouldProcessEveryNode
9 | };
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "html-to-react",
3 | "version": "1.0.0",
4 | "description": "A lightweight library that converts raw HTML to a React DOM structure.",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage",
8 | "test-html-coverage": "istanbul cover ./node_modules/mocha/bin/_mocha; open coverage/lcov-report/index.html"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/mikenikles/html-to-react.git"
13 | },
14 | "keywords": [
15 | "react",
16 | "react-component",
17 | "html"
18 | ],
19 | "author": "Mike Nikles",
20 | "license": "MIT",
21 | "bugs": {
22 | "url": "https://github.com/mikenikles/html-to-react/issues"
23 | },
24 | "homepage": "https://github.com/mikenikles/html-to-react",
25 | "config": {
26 | "blanket": {
27 | "pattern": [
28 | ""
29 | ],
30 | "data-cover-never": [
31 | "node_modules",
32 | "test"
33 | ]
34 | }
35 | },
36 | "dependencies": {
37 | "ent": "^2.2.0",
38 | "htmlparser2": "^3.8.3",
39 | "lodash.camelcase": "^4.3.0",
40 | "lodash.find": "^4.6.0",
41 | "lodash.frompairs": "^4.0.1",
42 | "lodash.includes": "^4.3.0",
43 | "lodash.isempty": "^4.4.0",
44 | "lodash.map": "^4.6.0",
45 | "lodash.merge": "^4.6.0"
46 | },
47 | "devDependencies": {
48 | "coveralls": "2.11.9",
49 | "istanbul": "0.4.3",
50 | "lodash": "^4.16.1",
51 | "mocha": "2.4.5",
52 | "mocha-lcov-reporter": "1.2.0",
53 | "react": "^15.0",
54 | "react-dom": "^15.0"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/test/html-to-react-tests.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var assert = require('assert');
4 | var React = require('react');
5 | var ReactDOMServer = require('react-dom/server')
6 | var _ = require('lodash');
7 |
8 | var Parser = require('../index').Parser;
9 | var ProcessNodeDefinitions = require('../index').ProcessNodeDefinitions;
10 |
11 | describe('Html2React', function() {
12 | var parser = new Parser(React);
13 |
14 | describe('parse valid HTML', function() {
15 | it('should return a valid HTML string', function() {
16 | var htmlInput = 'Does this work?
';
17 |
18 | var reactComponent = parser.parse(htmlInput);
19 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
20 |
21 | assert.equal(reactHtml, htmlInput);
22 | });
23 |
24 | it('should return a valid HTML string with nested elements', function() {
25 | var htmlInput = 'Heading
';
26 |
27 | var reactComponent = parser.parse(htmlInput);
28 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
29 |
30 | assert.equal(reactHtml, htmlInput);
31 | });
32 |
33 | it('should return a valid HTML string with inline styles', function() {
34 | var htmlInput = '';
35 |
36 | var reactComponent = parser.parse(htmlInput);
37 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
38 |
39 | assert.equal(reactHtml, htmlInput);
40 | });
41 |
42 | it('should return a valid HTML string with empty inline styles', function() {
43 | var htmlInput = '';
44 | var htmlExpected = '';
45 |
46 | var reactComponent = parser.parse(htmlInput);
47 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
48 |
49 | assert.equal(reactHtml, htmlExpected);
50 | });
51 |
52 | it('should return a valid HTML string with data attributes', function() {
53 | var htmlInput = '';
54 |
55 | var reactComponent = parser.parse(htmlInput);
56 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
57 |
58 | assert.equal(reactHtml, htmlInput);
59 | });
60 |
61 | it('should return a valid HTML string with aria attributes', function() {
62 | var htmlInput = '';
63 |
64 | var reactComponent = parser.parse(htmlInput);
65 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
66 |
67 | assert.equal(reactHtml, htmlInput);
68 | });
69 |
70 | it('should return a valid HTML string with a class attribute', function() {
71 | var htmlInput = '';
72 |
73 | var reactComponent = parser.parse(htmlInput);
74 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
75 |
76 | assert.equal(reactHtml, htmlInput);
77 | });
78 |
79 | it('should return a valid HTML string with a react camelCase attribute', function() {
80 | var htmlInput = '';
81 |
82 | var reactComponent = parser.parse(htmlInput);
83 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
84 |
85 | assert.equal(reactHtml, htmlInput);
86 | });
87 |
88 | // FIXME: See lib/process-node-definitions.js -> processDefaultNode()
89 | it.skip('should return a valid HTML string with comments', function() {
90 | var htmlInput = '';
91 |
92 | var reactComponent = parser.parse(htmlInput);
93 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
94 |
95 | assert.equal(reactHtml, htmlInput);
96 | });
97 |
98 | // FIXME: If / when React implements HTML comments, this test can be removed
99 | it('should return a valid HTML string without comments', function() {
100 | var htmlInput = '';
101 | var htmlExpected = '';
102 |
103 | var reactComponent = parser.parse(htmlInput);
104 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
105 |
106 | assert.equal(reactHtml, htmlExpected);
107 | });
108 |
109 | it('should parse br elements without warnings', function() {
110 | var htmlInput = 'Line one
Line two
Line three
';
111 | var htmlExpected = 'Line one
Line two
Line three
';
112 |
113 | var reactComponent = parser.parse(htmlInput);
114 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
115 |
116 | assert.equal(reactHtml, htmlExpected);
117 | });
118 |
119 | it('should not generate children for br tags', function() {
120 | var htmlInput = '
';
121 |
122 | var reactComponent = parser.parse(htmlInput);
123 | assert.strictEqual((reactComponent.props.children || []).length, 0);
124 | });
125 |
126 | it('should parse void elements with all attributes and no warnings', function() {
127 | var htmlInput = '
';
128 |
129 | var reactComponent = parser.parse(htmlInput);
130 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
131 |
132 | assert.equal(reactHtml, htmlInput);
133 | });
134 |
135 | // Covers issue #9
136 | it('should parse textarea elements', function() {
137 | var htmlInput = '';
138 |
139 | var reactComponent = parser.parse(htmlInput);
140 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
141 |
142 | assert.equal(reactHtml, htmlInput);
143 | });
144 |
145 | it('should decode character entities in text nodes', function () {
146 | var htmlInput = '1 < 2';
147 |
148 | var reactComponent = parser.parse(htmlInput);
149 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
150 |
151 | assert.equal(reactHtml, htmlInput);
152 | });
153 |
154 | it('should not generate children for childless elements', function () {
155 | var htmlInput = '';
156 |
157 | var reactComponent = parser.parse(htmlInput);
158 |
159 | assert.strictEqual((reactComponent.props.children || []).length, 0);
160 | });
161 |
162 | it('should fill in the key name with boolean attribute', function() {
163 | var htmlInput = '';
164 | var htmlExpected = ''
165 |
166 | var reactComponent = parser.parse(htmlInput);
167 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
168 |
169 | assert.equal(reactHtml, htmlExpected);
170 | });
171 | });
172 |
173 | describe('parse invalid HTML', function() {
174 | it('should throw an error when trying parsing multiple root elements', function() {
175 | var htmlInput = '';
176 |
177 | assert.throws(function() {
178 | parser.parse(htmlInput);
179 | }, Error);
180 | });
181 |
182 | it('should throw an error with a specific message when parsing multiple root elements', function() {
183 | var htmlInput = '';
184 |
185 | assert.throws(function() {
186 | parser.parse(htmlInput);
187 | }, /contains 3 root elements/);
188 | });
189 |
190 | it('should fix missing closing tags', function() {
191 | var htmlInput = '';
192 | var htmlExpected = '';
193 |
194 | var reactComponent = parser.parse(htmlInput);
195 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
196 |
197 | assert.equal(reactHtml, htmlExpected);
198 | });
199 | });
200 |
201 | describe('with custom processing instructions', function() {
202 | var parser = new Parser(React);
203 | var processNodeDefinitions = new ProcessNodeDefinitions(React);
204 |
205 | describe('parse valid HTML', function() {
206 | it('should return nothing with only a single element', function() {
207 | var htmlInput = '
Does this work?
';
208 | var isValidNode = function() {
209 | return true;
210 | };
211 | var processingInstructions = [{
212 | shouldProcessNode: function(node) {
213 | return node.name && node.name !== 'p';
214 | },
215 | processNode: processNodeDefinitions.processDefaultNode,
216 | },];
217 | var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions);
218 |
219 | // With only 1 element, nothing is rendered
220 | assert.equal(reactComponent, false);
221 | });
222 |
223 | it('should return a single
element within a div of and
as siblings', function() {
224 | var htmlInput = '
Title
Paragraph
';
225 | var htmlExpected = 'Title
';
226 |
227 | var isValidNode = function() {
228 | return true;
229 | };
230 |
231 | var processingInstructions = [{
232 | shouldProcessNode: function(node) {
233 | return node.type === 'text' || node.name !== 'p';
234 | },
235 | processNode: processNodeDefinitions.processDefaultNode,
236 | },];
237 | var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions);
238 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
239 | assert.equal(reactHtml, htmlExpected);
240 | });
241 |
242 | it('should return capitalized content for all elements', function() {
243 | var htmlInput = 'Title
Paragraph
Another title
';
244 | var htmlExpected = 'TITLE
Paragraph
ANOTHER TITLE
';
245 |
246 | var isValidNode = function() {
247 | return true;
248 | };
249 |
250 | var processingInstructions = [
251 | {
252 | // Custom processing
253 | shouldProcessNode: function(node) {
254 | return node.parent && node.parent.name && node.parent.name === 'h1';
255 | },
256 | processNode: function(node, children) {
257 | return node.data.toUpperCase();
258 | },
259 | }, {
260 | // Anything else
261 | shouldProcessNode: function(node) {
262 | return true;
263 | },
264 | processNode: processNodeDefinitions.processDefaultNode,
265 | },];
266 | var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions);
267 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
268 | assert.equal(reactHtml, htmlExpected);
269 | });
270 |
271 | it('should generate keys for sequence items', function () {
272 | var htmlInput = '- Item 1
- Item 2
<
';
273 |
274 | var reactComponent = parser.parse(htmlInput);
275 |
276 | var children = _.filter(_.flatten(reactComponent.props.children), function (c) {
277 | return _.has(c, 'key');
278 | });
279 | var keys = _.map(children, function (child) {
280 | return child.key;
281 | });
282 | assert.deepStrictEqual(keys, ['0', '1', ]);
283 | });
284 |
285 | it('should return false in case of invalid node', function() {
286 | var htmlInput = '
';
287 | var processingInstructions = [{
288 | shouldProcessNode: function(node) { return true; },
289 | processNode: processNodeDefinitions.processDefaultNode,
290 | }, ];
291 | var reactComponent = parser.parseWithInstructions(htmlInput,
292 | function () { return false }, processingInstructions);
293 |
294 | assert.equal(reactComponent, false);
295 | });
296 | });
297 | });
298 | });
299 |
--------------------------------------------------------------------------------
Title
Paragraph
Another title
TITLE
Paragraph
ANOTHER TITLE
element.');
46 | }
47 | return traverseDom(domTree[0], isValidNode, processingInstructions, 0);
48 | };
49 |
50 | var parse = function(html) {
51 | var processingInstructions = new ProcessingInstructions(React);
52 | return parseWithInstructions(html,
53 | IsValidNodeDefinitions.alwaysValid,
54 | processingInstructions.defaultProcessingInstructions);
55 | };
56 |
57 | return {
58 | parse: parse,
59 | parseWithInstructions: parseWithInstructions,
60 | };
61 | };
62 |
63 | module.exports = Html2React;
64 |
--------------------------------------------------------------------------------
/lib/process-node-definitions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var isEmpty = require('lodash.isempty');
4 | var map = require('lodash.map');
5 | var fromPairs = require('lodash.frompairs');
6 | var camelCase = require('lodash.camelcase');
7 | var includes = require('lodash.includes');
8 | var merge = require('lodash.merge');
9 | var ent = require('ent');
10 | var camelCaseAttrMap = require('./camel-case-attribute-names');
11 |
12 | // https://github.com/facebook/react/blob/15.0-stable/src/renderers/dom/shared/ReactDOMComponent.js#L457
13 | var voidElementTags = [
14 | 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param',
15 | 'source', 'track', 'wbr', 'menuitem', 'textarea',
16 | ];
17 |
18 | function createStyleJsonFromString(styleString) {
19 | if (!styleString) {
20 | return {};
21 | }
22 | var styles = styleString.split(';');
23 | var singleStyle, key, value, jsonStyles = {};
24 | for (var i = 0; i < styles.length; i++) {
25 | singleStyle = styles[i].split(':');
26 | key = camelCase(singleStyle[0]);
27 | value = singleStyle[1];
28 | if (key.length > 0 && value.length > 0) {
29 | jsonStyles[key] = value;
30 | }
31 | }
32 | return jsonStyles;
33 | }
34 |
35 | var ProcessNodeDefinitions = function(React) {
36 | function processDefaultNode(node, children, index) {
37 | if (node.type === 'text') {
38 | return ent.decode(node.data);
39 | } else if (node.type === 'comment') {
40 | // FIXME: The following doesn't work as the generated HTML results in "<!-- This is a comment -->"
41 | //return '';
42 | return false;
43 | }
44 |
45 | var elementProps = {
46 | key: index,
47 | };
48 | // Process attributes
49 | if (!isEmpty(node.attribs)) {
50 | elementProps = merge(elementProps, fromPairs(map(node.attribs, function (value, key) {
51 | if (key === 'style') {
52 | value = createStyleJsonFromString(node.attribs.style);
53 | } else if (key === 'class') {
54 | key = 'className';
55 | } else if (camelCaseAttrMap[key]) {
56 | key = camelCaseAttrMap[key];
57 | }
58 |
59 | return [key, value || key,];
60 | })));
61 | }
62 |
63 | if (includes(voidElementTags, node.name)) {
64 | return React.createElement(node.name, elementProps)
65 | } else {
66 | var allChildren = node.data != null ? [node.data,].concat(children) : children;
67 | return React.createElement.apply(
68 | this, [node.name, elementProps,].concat(allChildren)
69 | );
70 | }
71 | }
72 |
73 | return {
74 | processDefaultNode: processDefaultNode,
75 | };
76 | };
77 |
78 | module.exports = ProcessNodeDefinitions;
79 |
--------------------------------------------------------------------------------
/lib/processing-instructions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var ShouldProcessNodeDefinitions = require('./should-process-node-definitions');
4 | var ProcessNodeDefinitions = require('./process-node-definitions');
5 |
6 | var ProcessingInstructions = function(React) {
7 | var processNodeDefinitions = new ProcessNodeDefinitions(React);
8 |
9 | return {
10 | defaultProcessingInstructions: [{
11 | shouldProcessNode: ShouldProcessNodeDefinitions.shouldProcessEveryNode,
12 | processNode: processNodeDefinitions.processDefaultNode,
13 | },],
14 | };
15 | };
16 |
17 | module.exports = ProcessingInstructions;
18 |
--------------------------------------------------------------------------------
/lib/should-process-node-definitions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function shouldProcessEveryNode(node) {
4 | return true;
5 | }
6 |
7 | module.exports = {
8 | shouldProcessEveryNode: shouldProcessEveryNode
9 | };
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "html-to-react",
3 | "version": "1.0.0",
4 | "description": "A lightweight library that converts raw HTML to a React DOM structure.",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage",
8 | "test-html-coverage": "istanbul cover ./node_modules/mocha/bin/_mocha; open coverage/lcov-report/index.html"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/mikenikles/html-to-react.git"
13 | },
14 | "keywords": [
15 | "react",
16 | "react-component",
17 | "html"
18 | ],
19 | "author": "Mike Nikles",
20 | "license": "MIT",
21 | "bugs": {
22 | "url": "https://github.com/mikenikles/html-to-react/issues"
23 | },
24 | "homepage": "https://github.com/mikenikles/html-to-react",
25 | "config": {
26 | "blanket": {
27 | "pattern": [
28 | ""
29 | ],
30 | "data-cover-never": [
31 | "node_modules",
32 | "test"
33 | ]
34 | }
35 | },
36 | "dependencies": {
37 | "ent": "^2.2.0",
38 | "htmlparser2": "^3.8.3",
39 | "lodash.camelcase": "^4.3.0",
40 | "lodash.find": "^4.6.0",
41 | "lodash.frompairs": "^4.0.1",
42 | "lodash.includes": "^4.3.0",
43 | "lodash.isempty": "^4.4.0",
44 | "lodash.map": "^4.6.0",
45 | "lodash.merge": "^4.6.0"
46 | },
47 | "devDependencies": {
48 | "coveralls": "2.11.9",
49 | "istanbul": "0.4.3",
50 | "lodash": "^4.16.1",
51 | "mocha": "2.4.5",
52 | "mocha-lcov-reporter": "1.2.0",
53 | "react": "^15.0",
54 | "react-dom": "^15.0"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/test/html-to-react-tests.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var assert = require('assert');
4 | var React = require('react');
5 | var ReactDOMServer = require('react-dom/server')
6 | var _ = require('lodash');
7 |
8 | var Parser = require('../index').Parser;
9 | var ProcessNodeDefinitions = require('../index').ProcessNodeDefinitions;
10 |
11 | describe('Html2React', function() {
12 | var parser = new Parser(React);
13 |
14 | describe('parse valid HTML', function() {
15 | it('should return a valid HTML string', function() {
16 | var htmlInput = '';
26 |
27 | var reactComponent = parser.parse(htmlInput);
28 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
29 |
30 | assert.equal(reactHtml, htmlInput);
31 | });
32 |
33 | it('should return a valid HTML string with inline styles', function() {
34 | var htmlInput = '';
35 |
36 | var reactComponent = parser.parse(htmlInput);
37 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
38 |
39 | assert.equal(reactHtml, htmlInput);
40 | });
41 |
42 | it('should return a valid HTML string with empty inline styles', function() {
43 | var htmlInput = '';
44 | var htmlExpected = '';
45 |
46 | var reactComponent = parser.parse(htmlInput);
47 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
48 |
49 | assert.equal(reactHtml, htmlExpected);
50 | });
51 |
52 | it('should return a valid HTML string with data attributes', function() {
53 | var htmlInput = '';
54 |
55 | var reactComponent = parser.parse(htmlInput);
56 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
57 |
58 | assert.equal(reactHtml, htmlInput);
59 | });
60 |
61 | it('should return a valid HTML string with aria attributes', function() {
62 | var htmlInput = '';
63 |
64 | var reactComponent = parser.parse(htmlInput);
65 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
66 |
67 | assert.equal(reactHtml, htmlInput);
68 | });
69 |
70 | it('should return a valid HTML string with a class attribute', function() {
71 | var htmlInput = '';
72 |
73 | var reactComponent = parser.parse(htmlInput);
74 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
75 |
76 | assert.equal(reactHtml, htmlInput);
77 | });
78 |
79 | it('should return a valid HTML string with a react camelCase attribute', function() {
80 | var htmlInput = '';
81 |
82 | var reactComponent = parser.parse(htmlInput);
83 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
84 |
85 | assert.equal(reactHtml, htmlInput);
86 | });
87 |
88 | // FIXME: See lib/process-node-definitions.js -> processDefaultNode()
89 | it.skip('should return a valid HTML string with comments', function() {
90 | var htmlInput = '';
91 |
92 | var reactComponent = parser.parse(htmlInput);
93 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
94 |
95 | assert.equal(reactHtml, htmlInput);
96 | });
97 |
98 | // FIXME: If / when React implements HTML comments, this test can be removed
99 | it('should return a valid HTML string without comments', function() {
100 | var htmlInput = '';
101 | var htmlExpected = '';
102 |
103 | var reactComponent = parser.parse(htmlInput);
104 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
105 |
106 | assert.equal(reactHtml, htmlExpected);
107 | });
108 |
109 | it('should parse br elements without warnings', function() {
110 | var htmlInput = '';
111 | var htmlExpected = '';
112 |
113 | var reactComponent = parser.parse(htmlInput);
114 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
115 |
116 | assert.equal(reactHtml, htmlExpected);
117 | });
118 |
119 | it('should not generate children for br tags', function() {
120 | var htmlInput = '
'; 121 | 122 | var reactComponent = parser.parse(htmlInput); 123 | assert.strictEqual((reactComponent.props.children || []).length, 0); 124 | }); 125 | 126 | it('should parse void elements with all attributes and no warnings', function() { 127 | var htmlInput = ' element within a div of
';
225 | var htmlExpected = '';
226 |
227 | var isValidNode = function() {
228 | return true;
229 | };
230 |
231 | var processingInstructions = [{
232 | shouldProcessNode: function(node) {
233 | return node.type === 'text' || node.name !== 'p';
234 | },
235 | processNode: processNodeDefinitions.processDefaultNode,
236 | },];
237 | var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions);
238 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
239 | assert.equal(reactHtml, htmlExpected);
240 | });
241 |
242 | it('should return capitalized content for all elements', function() {
243 | var htmlInput = '
';
287 | var processingInstructions = [{
288 | shouldProcessNode: function(node) { return true; },
289 | processNode: processNodeDefinitions.processDefaultNode,
290 | }, ];
291 | var reactComponent = parser.parseWithInstructions(htmlInput,
292 | function () { return false }, processingInstructions);
293 |
294 | assert.equal(reactComponent, false);
295 | });
296 | });
297 | });
298 | });
299 |
--------------------------------------------------------------------------------
Does this work?
'; 17 | 18 | var reactComponent = parser.parse(htmlInput); 19 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent); 20 | 21 | assert.equal(reactHtml, htmlInput); 22 | }); 23 | 24 | it('should return a valid HTML string with nested elements', function() { 25 | var htmlInput = 'Heading
Line one
Line two
Line three
Line one
Line two
Line three
'; 121 | 122 | var reactComponent = parser.parse(htmlInput); 123 | assert.strictEqual((reactComponent.props.children || []).length, 0); 124 | }); 125 | 126 | it('should parse void elements with all attributes and no warnings', function() { 127 | var htmlInput = '
1 < 2
';
147 |
148 | var reactComponent = parser.parse(htmlInput);
149 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
150 |
151 | assert.equal(reactHtml, htmlInput);
152 | });
153 |
154 | it('should not generate children for childless elements', function () {
155 | var htmlInput = '';
156 |
157 | var reactComponent = parser.parse(htmlInput);
158 |
159 | assert.strictEqual((reactComponent.props.children || []).length, 0);
160 | });
161 |
162 | it('should fill in the key name with boolean attribute', function() {
163 | var htmlInput = '';
164 | var htmlExpected = ''
165 |
166 | var reactComponent = parser.parse(htmlInput);
167 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
168 |
169 | assert.equal(reactHtml, htmlExpected);
170 | });
171 | });
172 |
173 | describe('parse invalid HTML', function() {
174 | it('should throw an error when trying parsing multiple root elements', function() {
175 | var htmlInput = '';
176 |
177 | assert.throws(function() {
178 | parser.parse(htmlInput);
179 | }, Error);
180 | });
181 |
182 | it('should throw an error with a specific message when parsing multiple root elements', function() {
183 | var htmlInput = '';
184 |
185 | assert.throws(function() {
186 | parser.parse(htmlInput);
187 | }, /contains 3 root elements/);
188 | });
189 |
190 | it('should fix missing closing tags', function() {
191 | var htmlInput = '';
192 | var htmlExpected = '
';
193 |
194 | var reactComponent = parser.parse(htmlInput);
195 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
196 |
197 | assert.equal(reactHtml, htmlExpected);
198 | });
199 | });
200 |
201 | describe('with custom processing instructions', function() {
202 | var parser = new Parser(React);
203 | var processNodeDefinitions = new ProcessNodeDefinitions(React);
204 |
205 | describe('parse valid HTML', function() {
206 | it('should return nothing with only a single
element', function() { 207 | var htmlInput = '
Does this work?
'; 208 | var isValidNode = function() { 209 | return true; 210 | }; 211 | var processingInstructions = [{ 212 | shouldProcessNode: function(node) { 213 | return node.name && node.name !== 'p'; 214 | }, 215 | processNode: processNodeDefinitions.processDefaultNode, 216 | },]; 217 | var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions); 218 | 219 | // With only 1element, nothing is rendered 220 | assert.equal(reactComponent, false); 221 | }); 222 | 223 | it('should return a single
element within a div of and
as siblings', function() { 224 | var htmlInput = '
Title
Paragraph
Title
elements', function() {
243 | var htmlInput = 'Title
Paragraph
Another title
';
244 | var htmlExpected = 'TITLE
Paragraph
ANOTHER TITLE
';
245 |
246 | var isValidNode = function() {
247 | return true;
248 | };
249 |
250 | var processingInstructions = [
251 | {
252 | // Custom processing
253 | shouldProcessNode: function(node) {
254 | return node.parent && node.parent.name && node.parent.name === 'h1';
255 | },
256 | processNode: function(node, children) {
257 | return node.data.toUpperCase();
258 | },
259 | }, {
260 | // Anything else
261 | shouldProcessNode: function(node) {
262 | return true;
263 | },
264 | processNode: processNodeDefinitions.processDefaultNode,
265 | },];
266 | var reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions);
267 | var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
268 | assert.equal(reactHtml, htmlExpected);
269 | });
270 |
271 | it('should generate keys for sequence items', function () {
272 | var htmlInput = '- Item 1
- Item 2
<
';
273 |
274 | var reactComponent = parser.parse(htmlInput);
275 |
276 | var children = _.filter(_.flatten(reactComponent.props.children), function (c) {
277 | return _.has(c, 'key');
278 | });
279 | var keys = _.map(children, function (child) {
280 | return child.key;
281 | });
282 | assert.deepStrictEqual(keys, ['0', '1', ]);
283 | });
284 |
285 | it('should return false in case of invalid node', function() {
286 | var htmlInput = '
';
287 | var processingInstructions = [{
288 | shouldProcessNode: function(node) { return true; },
289 | processNode: processNodeDefinitions.processDefaultNode,
290 | }, ];
291 | var reactComponent = parser.parseWithInstructions(htmlInput,
292 | function () { return false }, processingInstructions);
293 |
294 | assert.equal(reactComponent, false);
295 | });
296 | });
297 | });
298 | });
299 |
--------------------------------------------------------------------------------
Title
Paragraph
Another title
TITLE
Paragraph
ANOTHER TITLE
- Item 1
- Item 2 <