Address vhtml#11: Add ability to directly set innerHTML of a component using the dangerouslySetInnerHTML attribute. (#12)

* Address vhtml#11: Add ability to directly set innerHTML of a component using the `dangerouslySetInnerHTML` attribute.

* Remove check for valid `__html` property of `dangerouslySetInnerHTML

* Hoist line that is always executed out of conditional block
Saves 4 bytes.

* Hoist declaration of `s` to avoid extra `let` statement.
Saves 3 bytes.

* Hoist default assignment of `attrs` to the top of `h`.
This allows us to assume that `attrs` is a plain object, and remove multiple guards.
Saves 6B.

Author: pl12133

src/vhtml.js

@@ -3,6 +3,7 @@ import emptyTags from './empty-tags';
 // escape an attribute
 let esc = str => String(str).replace(/[&<>"']/g, s=>`&${map[s]};`);
 let map = {'&':'amp','<':'lt','>':'gt','"':'quot',"'":'apos'};
+let setInnerHTMLAttr = 'dangerouslySetInnerHTML';
 let DOMAttributeNames = {
 	className: 'class',
 	htmlFor: 'for'
@@ -12,29 +13,31 @@ let sanitized = {};
 
 /** Hyperscript reviver that constructs a sanitized HTML string. */
 export default function h(name, attrs) {
-	let stack=[];
+	let stack=[], s = `<${name}`;
+	attrs = attrs || {};
 	for (let i=arguments.length; i-- > 2; ) {
 		stack.push(arguments[i]);
 	}
 
 	// Sortof component support!
 	if (typeof name==='function') {
-		(attrs || (attrs = {})).children = stack.reverse();
+		attrs.children = stack.reverse();
 		return name(attrs);
 		// return name(attrs, stack.reverse());
 	}
 
-	let s = `<${name}`;
-	if (attrs) for (let i in attrs) {
-		if (attrs[i]!==false && attrs[i]!=null) {
+	for (let i in attrs) {
+		if (attrs[i]!==false && attrs[i]!=null && i !== setInnerHTMLAttr) {
 			s += ` ${DOMAttributeNames[i] ? DOMAttributeNames[i] : esc(i)}="${esc(attrs[i])}"`;
 		}
 	}
+	s += '>';
 
 	if (emptyTags.indexOf(name) === -1) {
-		s += '>';
-
-		while (stack.length) {
+		if (attrs[setInnerHTMLAttr]) {
+			s += attrs[setInnerHTMLAttr].__html;
+		}
+		else while (stack.length) {
 			let child = stack.pop();
 			if (child) {
 				if (child.pop) {
@@ -47,8 +50,6 @@ export default function h(name, attrs) {
 		}
 
 		s += `</${name}>`;
-	} else {
-		s += '>';
 	}
 
 	sanitized[s] = true;

test/vhtml.js

@@ -40,6 +40,14 @@ describe('vhtml', () => {
 		);
 	});
 
+	it('should not sanitize the "dangerouslySetInnerHTML" attribute, and directly set its `__html` property as innerHTML', () => {
+		expect(
+			<div dangerouslySetInnerHTML={{ __html: "<span>Injected HTML</span>" }} />
+		).to.equal(
+			`<div><span>Injected HTML</span></div>`
+		);
+	});
+
 	it('should flatten children', () => {
 		expect(
 			<div>