Merge pull request #25 from elliotdavies/fix/close-void-elements

Close void tags with slashes to support XHTML

Author: developit

src/index.js

@@ -158,6 +158,10 @@ export default function renderToString(vnode, context, opts, inner, isSvgMode) {
 
 	s = `<${nodeName}${s}>`;
 
+	if (VOID_ELEMENTS.indexOf(nodeName)>-1) {
+		s = s.replace(/>$/, ' />');
+	}
+
 	if (html) {
 		// if multiline, indent.
 		if (pretty && isLargeString(html)) {

test/pretty.js

@@ -55,7 +55,7 @@ describe('pretty', () => {
 				<img src="b.jpg" />
 				<b>hi</b>
 			</div>
-		)).to.equal(`<div>\n\thi\n\t<img src="a.jpg">\n\t<img src="b.jpg">\n\t<b>hi</b>\n</div>`);
+		)).to.equal(`<div>\n\thi\n\t<img src="a.jpg" />\n\t<img src="b.jpg" />\n\t<b>hi</b>\n</div>`);
 	});
 
 	it('should support empty tags', () => {

test/render.js

@@ -51,16 +51,16 @@ describe('render', () => {
 			expect(rendered).to.equal(expected);
 		});
 
-		it('does not close void elements', () => {
-			let rendered, expected;
-
-			rendered = render(<div><input type='text' /><wbr /></div>);
-			expected = `<div><input type="text"><wbr></div>`;
+		it('should self-close void elements', () => {
+			let rendered = render(<div><input type='text' /><wbr /></div>),
+				expected = `<div><input type="text" /><wbr /></div>`;
 
 			expect(rendered).to.equal(expected);
+		});
 
-			rendered = render(<input><p>Hello World</p></input>);
-			expected = `<input><p>Hello World</p>`;
+		it('does not close void elements with closing tags', () => {
+			let rendered = render(<input><p>Hello World</p></input>),
+				expected = `<input /><p>Hello World</p>`;
 
 			expect(rendered).to.equal(expected);
 		});