Skip to content
This repository has been archived by the owner on Dec 22, 2023. It is now read-only.

Deal with void element tags #17

Merged
merged 3 commits into from
Apr 25, 2016
Merged

Deal with void element tags #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e78b9e2
Deal with void element tags
Jan 31, 2016
c3f0433
Update based on feedback
Feb 6, 2016
39ea155
Merge branch 'master' into feature-add-more-tests
Apr 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions lib/process-node-definitions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

var _ = require('lodash');

// https://github.com/facebook/react/blob/0.14-stable/src/renderers/dom/shared/ReactDOMComponent.js#L457
var voidElementTags = [
'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
];

function createStyleJsonFromString(styleString) {
if (_.isNull(styleString) || _.isUndefined(styleString) || styleString === '') {
return {};
Expand Down Expand Up @@ -51,7 +57,12 @@ var ProcessNodeDefinitions = function(React) {
});
}

return React.createElement(node.name, elementProps, node.data, children);
if (_.contains(voidElementTags, node.name)) {
return React.createElement(node.name, elementProps)
} else {
return React.createElement(node.name, elementProps, node.data, children);
}

}

return {
Expand All @@ -60,4 +71,3 @@ var ProcessNodeDefinitions = function(React) {
};

module.exports = ProcessNodeDefinitions;

26 changes: 26 additions & 0 deletions test/html-to-react-tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,32 @@ describe('Html2React', function() {

assert.equal(reactHtml, htmlExpected);
});

it('should parse br elements without warnings', function() {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you should've kept the wording in my PR, e.g. that the test asserts that children aren't created for void elements, as this is more direct.

var htmlInput = '<div><p>Line one<br>Line two<br/>Line three</p></div>';
var htmlExpected = '<div><p>Line one<br/>Line two<br/>Line three</p></div>';

var reactComponent = parser.parse(htmlInput);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also think you should've kept the assertion that React children aren't created, as it is extremely unclear from the test what is asserted now and how (the assertion is all implicit).

var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);

assert.equal(reactHtml, htmlExpected);
});

it('should not generate children for br tags', function() {
var htmlInput = '<br/>';

var reactComponent = parser.parse(htmlInput);
assert.strictEqual((reactComponent.props.children || []).length, 0);
});

it('should parse void elements with all attributes and no warnings', function() {
var htmlInput = '<p><img src="www.google.ca/logo.png"/></p>';

var reactComponent = parser.parse(htmlInput);
var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);

assert.equal(reactHtml, htmlInput);
});
});

describe('parse invalid HTML', function() {
Expand Down