From 26c484278408300cb5bbe09f0d96595163f66575 Mon Sep 17 00:00:00 2001
From: Nathan Cahill <nathan@nathancahill.com>
Date: Sat, 29 Apr 2017 23:00:03 -0700
Subject: [PATCH 1/3] create element stack, then resolve to strings

---
 src/vhtml.js  | 20 ++++++++++++++++----
 test/vhtml.js | 36 ++++++++++++++++++------------------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/vhtml.js b/src/vhtml.js
index d42d9c9..cabbbee 100644
--- a/src/vhtml.js
+++ b/src/vhtml.js
@@ -10,6 +10,12 @@ let DOMAttributeNames = {
 
 let sanitized = {};
 
+function Element(name, attrs, stack) {
+	this.type = typeof name === 'function' ? name.name : name;
+	this.props = attrs || {};
+	this.toString = _h.bind(this, name, stack);
+}
+
 /** Hyperscript reviver that constructs a sanitized HTML string. */
 export default function h(name, attrs) {
 	let stack=[];
@@ -17,11 +23,16 @@ export default function h(name, attrs) {
 		stack.push(arguments[i]);
 	}
 
+	return new Element(name, attrs, stack);
+}
+
+function _h(name, stack) {
+	let attrs = this.props;
+
 	// Sortof component support!
 	if (typeof name==='function') {
-		(attrs || (attrs = {})).children = stack.reverse();
-		return name(attrs);
-		// return name(attrs, stack.reverse());
+		attrs.children = stack.reverse();
+		return String(name(attrs));
 	}
 
 	let s = `<${name}`;
@@ -41,7 +52,8 @@ export default function h(name, attrs) {
 					for (let i=child.length; i--; ) stack.push(child[i]);
 				}
 				else {
-					s += sanitized[child]===true ? child : esc(child);
+					let resolved = String(child);
+					s += sanitized[resolved]===true ? resolved : esc(resolved);
 				}
 			}
 		}
diff --git a/test/vhtml.js b/test/vhtml.js
index 606d762..cc3ff39 100644
--- a/test/vhtml.js
+++ b/test/vhtml.js
@@ -6,7 +6,7 @@ import { expect } from 'chai';
 describe('vhtml', () => {
 	it('should stringify html', () => {
 		let items = ['one', 'two', 'three'];
-		expect(
+		expect(String(
 			<div class="foo">
 				<h1>Hi!</h1>
 				<p>Here is a list of {items.length} items:</p>
@@ -16,38 +16,38 @@ describe('vhtml', () => {
 					)) }
 				</ul>
 			</div>
-		).to.equal(
+		)).to.equal(
 			`<div class="foo"><h1>Hi!</h1><p>Here is a list of 3 items:</p><ul><li>one</li><li>two</li><li>three</li></ul></div>`
 		);
 	});
 
 	it('should sanitize children', () => {
-		expect(
+		expect(String(
 			<div>
 				{ `<strong>blocked</strong>` }
 				<em>allowed</em>
 			</div>
-		).to.equal(
+		)).to.equal(
 			`<div>&lt;strong&gt;blocked&lt;/strong&gt;<em>allowed</em></div>`
 		);
 	});
 
 	it('should sanitize attributes', () => {
-		expect(
+		expect(String(
 			<div onclick={`&<>"'`} />
-		).to.equal(
+		)).to.equal(
 			`<div onclick="&amp;&lt;&gt;&quot;&apos;"></div>`
 		);
 	});
 
 	it('should flatten children', () => {
-		expect(
+		expect(String(
 			<div>
 				{[['a','b']]}
 				<c>d</c>
 				{['e',['f'],[['g']]]}
 			</div>
-		).to.equal(
+		)).to.equal(
 			`<div>ab<c>d</c>efg</div>`
 		);
 	});
@@ -62,7 +62,7 @@ describe('vhtml', () => {
 			</li>
 		);
 
-		expect(
+		expect(String(
 			<div class="foo">
 				<h1>Hi!</h1>
 				<ul>
@@ -73,7 +73,7 @@ describe('vhtml', () => {
 					)) }
 				</ul>
 			</div>
-		).to.equal(
+		)).to.equal(
 			`<div class="foo"><h1>Hi!</h1><ul><li id="0"><h4>one</h4>This is item one!</li><li id="1"><h4>two</h4>This is item two!</li></ul></div>`
 		);
 	});
@@ -87,7 +87,7 @@ describe('vhtml', () => {
 	    </li>
 	  );
 
-	  expect(
+	  expect(String(
 	    <div class="foo">
 	      <h1>Hi!</h1>
 	      <ul>
@@ -98,7 +98,7 @@ describe('vhtml', () => {
 	        )) }
 	      </ul>
 	    </div>
-	  ).to.equal(
+	  )).to.equal(
 	    `<div class="foo"><h1>Hi!</h1><ul><li><h4></h4></li><li><h4></h4></li></ul></div>`
 	  );
 	});
@@ -113,7 +113,7 @@ describe('vhtml', () => {
 	    </li>
 	  );
 
-	  expect(
+	  expect(String(
 	    <div class="foo">
 	      <h1>Hi!</h1>
 	      <ul>
@@ -124,13 +124,13 @@ describe('vhtml', () => {
 	        )) }
 	      </ul>
 	    </div>
-	  ).to.equal(
+	  )).to.equal(
 	    `<div class="foo"><h1>Hi!</h1><ul><li><h4></h4>This is item one!</li><li><h4></h4>This is item two!</li></ul></div>`
 	  );
 	});
 
 	it('should support empty (void) tags', () => {
-		expect(
+		expect(String(
 			<div>
 				<area />
 				<base />
@@ -153,15 +153,15 @@ describe('vhtml', () => {
 				<span />
 				<p />
 			</div>
-		).to.equal(
+		)).to.equal(
 			`<div><area><base><br><col><command><embed><hr><img><input><keygen><link><meta><param><source><track><wbr><div></div><span></span><p></p></div>`
 		);
 	});
 
 	it('should handle special prop names', () => {
-		expect(
+		expect(String(
 			<div className="my-class" htmlFor="id" />
-		).to.equal(
+		)).to.equal(
 			'<div class="my-class" for="id"></div>'
 		);
 	});

From d0470962031f3449278aaeaf0828834b48da4e6e Mon Sep 17 00:00:00 2001
From: Nathan Cahill <nathan@nathancahill.com>
Date: Sun, 30 Apr 2017 15:49:22 -0700
Subject: [PATCH 2/3] misread react spec, type can actually be a function

---
 src/vhtml.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vhtml.js b/src/vhtml.js
index cabbbee..d9b2215 100644
--- a/src/vhtml.js
+++ b/src/vhtml.js
@@ -11,7 +11,7 @@ let DOMAttributeNames = {
 let sanitized = {};
 
 function Element(name, attrs, stack) {
-	this.type = typeof name === 'function' ? name.name : name;
+	this.type = name;
 	this.props = attrs || {};
 	this.toString = _h.bind(this, name, stack);
 }

From eb629883a13cc55f422d588a9c6ec1337bc215df Mon Sep 17 00:00:00 2001
From: Nathan Cahill <nathan@nathancahill.com>
Date: Tue, 2 May 2017 08:53:30 -0700
Subject: [PATCH 3/3] remove bind from _h

---
 src/vhtml.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/vhtml.js b/src/vhtml.js
index d9b2215..4b725cc 100644
--- a/src/vhtml.js
+++ b/src/vhtml.js
@@ -13,7 +13,9 @@ let sanitized = {};
 function Element(name, attrs, stack) {
 	this.type = name;
 	this.props = attrs || {};
-	this.toString = _h.bind(this, name, stack);
+	this.toString = function () {
+		return _h(this.type, this.props, stack);
+	};
 }
 
 /** Hyperscript reviver that constructs a sanitized HTML string. */
@@ -26,9 +28,7 @@ export default function h(name, attrs) {
 	return new Element(name, attrs, stack);
 }
 
-function _h(name, stack) {
-	let attrs = this.props;
-
+function _h(name, attrs, stack) {
 	// Sortof component support!
 	if (typeof name==='function') {
 		attrs.children = stack.reverse();