Add support for dangerouslySetInnerHTML

developit · ithinkihaveacat · Jan 17, 2019 · Jan 17, 2019 · May 23, 2019 · Jan 17, 2019
commit ac746b5cec54d439f793ce7188dea154e8138aa6
diff --git a/src/vhtml.js b/src/vhtml.js
@@ -24,26 +24,36 @@ export default function h(name, attrs) {
 		// return name(attrs, stack.reverse());
 	}
 
+	let innerHTML = null;
+
 	let s = `<${name}`;
 	if (attrs) for (let i in attrs) {
 		if (attrs[i]!==false && attrs[i]!=null) {
-			s += ` ${DOMAttributeNames[i] ? DOMAttributeNames[i] : esc(i)}="${esc(attrs[i])}"`;
+			if (i.toLowerCase() === 'dangerouslysetinnerhtml') {
+				innerHTML = attrs[i].__html ? attrs[i].__html : '';
+			} else {
+				s += ` ${DOMAttributeNames[i] ? DOMAttributeNames[i] : esc(i)}="${esc(attrs[i])}"`;
+			}
 		}
 	}
 
 	if (emptyTags.indexOf(name) === -1) {
 		s += '>';
 
-		while (stack.length) {
-			let child = stack.pop();
-			if (child) {
-				if (child.pop) {
-					for (let i=child.length; i--; ) stack.push(child[i]);
-				}
-				else {
-					s += sanitized[child]===true ? child : esc(child);
+		if (innerHTML === null) {
+			while (stack.length) {
+				let child = stack.pop();
+				if (child) {
+					if (child.pop) {
+						for (let i=child.length; i--; ) stack.push(child[i]);
+					}
+					else {
+						s += sanitized[child]===true ? child : esc(child);
+					}
 				}
 			}
+		} else {
+			s += innerHTML;
 		}
 
 		s += `</${name}>`;

diff --git a/test/vhtml.js b/test/vhtml.js
@@ -165,4 +165,20 @@ describe('vhtml', () => {
 			'<div class="my-class" for="id"></div>'
 		);
 	});
+
+	it('should support dangerouslySetInnerHTML', () => {
+		expect(
+			<div dangerouslySetInnerHTML={{__html: '<foo>&amp;</foo>'}}></div>
+		).to.equal(
+			'<div><foo>&amp;</foo></div>'
+		);
+	});
+
+	it('should support dangerouslySetInnerHTML (without __html)', () => {
+		expect(
+			<div dangerouslySetInnerHTML>foo</div>
+		).to.equal(
+			'<div></div>'
+		);
+	});
 });