Tests use hyperscript instead of manually constructing nodes

render/tests/test-attributes.js

@@ -3,6 +3,8 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.trust = require("../../render/trust")
 
 o.spec("attributes", function() {
 	var $window, root, render
@@ -14,38 +16,38 @@ o.spec("attributes", function() {
 	o.spec("basics", function() {
 		o("works (create/update/remove)", function() {
 
-			var a = {tag: "div", attrs: {}}
+			var a = m("div")
-			var b = {tag: "div", attrs: {id: "test"}}
+			var b = m("div", {id: "test"})
-			var c = {tag: "div", attrs: {}}
+			var c = m("div")
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.hasAttribute("id")).equals(false)
 
-			render(root, [b]);
+			render(root, b);
 
 			o(b.dom.getAttribute("id")).equals("test")
 
-			render(root, [c]);
+			render(root, c);
 
 			o(c.dom.hasAttribute("id")).equals(false)
 		})
 		o("undefined attr is equivalent to a lack of attr", function() {
-			var a = {tag: "div", attrs: {id: undefined}}
+			var a = m("div", {id: undefined})
-			var b = {tag: "div", attrs: {id: "test"}}
+			var b = m("div", {id: "test"})
-			var c = {tag: "div", attrs: {id: undefined}}
+			var c = m("div", {id: undefined})
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.hasAttribute("id")).equals(false)
 
-			render(root, [b]);
+			render(root, b);
 
 			o(b.dom.hasAttribute("id")).equals(true)
 			o(b.dom.getAttribute("id")).equals("test")
 
 			// #1804
-			render(root, [c]);
+			render(root, c);
 
 			o(c.dom.hasAttribute("id")).equals(false)
 		})
@@ -66,16 +68,16 @@ o.spec("attributes", function() {
 			}
 
 			render(root, [
-				{tag: "input", attrs: {value: "hello"}},
+				m("input", {value: "hello"}),
-				{tag: "input", attrs: {value: "hello"}},
+				m("input", {value: "hello"}),
-				{tag: "input", attrs: {value: "hello"}},
+				m("input", {value: "hello"}),
-				{tag: "custom-element", attrs: {custom: "x"}},
+				m("custom-element", {custom: "x"}),
-				{tag: "input", attrs: {is: "something-special", custom: "x"}},
+				m("input", {is: "something-special", custom: "x"}),
-				{tag: "custom-element", attrs: {is: "something-special", custom: "x"}}
+				m("custom-element", {is: "something-special", custom: "x"})
 			])
 
-			o(spies[0].callCount).equals(0)
 			o(spies[1].callCount).equals(0)
+			o(spies[0].callCount).equals(0)
 			o(spies[2].callCount).equals(0)
 			o(spies[3].calls).deepEquals([{this: spies[3].elem, args: ["custom", "x"]}])
 			o(spies[4].calls).deepEquals([{this: spies[4].elem, args: ["custom", "x"]}])
@@ -110,12 +112,12 @@ o.spec("attributes", function() {
 			}
 
 			render(root, [
-				{tag: "input", attrs: {value: "hello"}},
+				m("input", {value: "hello"}),
-				{tag: "input", attrs: {value: "hello"}},
+				m("input", {value: "hello"}),
-				{tag: "input", attrs: {value: "hello"}},
+				m("input", {value: "hello"}),
-				{tag: "custom-element", attrs: {custom: "x"}},
+				m("custom-element", {custom: "x"}),
-				{tag: "input", attrs: {is: "something-special", custom: "x"}},
+				m("input", {is: "something-special", custom: "x"}),
-				{tag: "custom-element", attrs: {is: "something-special", custom: "x"}}
+				m("custom-element", {is: "something-special", custom: "x"})
 			])
 
 			o(spies[0].callCount).equals(0)
@@ -135,47 +137,47 @@ o.spec("attributes", function() {
 	})
 	o.spec("input readonly", function() {
 		o("when input readonly is true, attribute is present", function() {
-			var a = {tag: "input", attrs: {readonly: true}}
+			var a = m("input", {readonly: true})
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.attributes["readonly"].value).equals("")
 		})
 		o("when input readonly is false, attribute is not present", function() {
-			var a = {tag: "input", attrs: {readonly: false}}
+			var a = m("input", {readonly: false})
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.attributes["readonly"]).equals(undefined)
 		})
 	})
 	o.spec("input checked", function() {
 		o("when input checked is true, attribute is not present", function() {
-			var a = {tag: "input", attrs: {checked: true}}
+			var a = m("input", {checked: true})
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.checked).equals(true)
 			o(a.dom.attributes["checked"]).equals(undefined)
 		})
 		o("when input checked is false, attribute is not present", function() {
-			var a = {tag: "input", attrs: {checked: false}}
+			var a = m("input", {checked: false})
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.checked).equals(false)
 			o(a.dom.attributes["checked"]).equals(undefined)
 		})
 		o("after input checked is changed by 3rd party, it can still be changed by render", function() {
-			var a = {tag: "input", attrs: {checked: false}}
+			var a = m("input", {checked: false})
-			var b = {tag: "input", attrs: {checked: true}}
+			var b = m("input", {checked: true})
 
-			render(root, [a])
+			render(root, a)
 
 			a.dom.checked = true //setting the javascript property makes the value no longer track the state of the attribute
 			a.dom.checked = false
 
-			render(root, [b])
+			render(root, b)
 
 			o(a.dom.checked).equals(true)
 			o(a.dom.attributes["checked"]).equals(undefined)
@@ -183,72 +185,72 @@ o.spec("attributes", function() {
 	})
 	o.spec("input.value", function() {
 		o("can be set as text", function() {
-			var a = {tag: "input", attrs: {value: "test"}}
+			var a = m("input", {value: "test"})
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.value).equals("test")
 		})
 		o("a lack of attribute removes `value`", function() {
-			var a = {tag: "input", attrs: {}}
+			var a = m("input")
-			var b = {tag: "input", attrs: {value: "test"}}
+			var b = m("input", {value: "test"})
-			var c = {tag: "input", attrs: {}}
+			var c = m("input")
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.value).equals("")
 
-			render(root, [b])
+			render(root, b)
 
 			o(a.dom.value).equals("test")
 
 			// https://github.com/MithrilJS/mithril.js/issues/1804#issuecomment-304521235
-			render(root, [c])
+			render(root, c)
 
 			o(a.dom.value).equals("")
 		})
 		o("can be set as number", function() {
-			var a = {tag: "input", attrs: {value: 1}}
+			var a = m("input", {value: 1})
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.value).equals("1")
 		})
 		o("null becomes the empty string", function() {
-			var a = {tag: "input", attrs: {value: null}}
+			var a = m("input", {value: null})
-			var b = {tag: "input", attrs: {value: "test"}}
+			var b = m("input", {value: "test"})
-			var c = {tag: "input", attrs: {value: null}}
+			var c = m("input", {value: null})
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.value).equals("")
 			o(a.dom.getAttribute("value")).equals(null)
 
-			render(root, [b]);
+			render(root, b);
 
 			o(b.dom.value).equals("test")
 			o(b.dom.getAttribute("value")).equals(null)
 
-			render(root, [c]);
+			render(root, c);
 
 			o(c.dom.value).equals("")
 			o(c.dom.getAttribute("value")).equals(null)
 		})
 		o("'' and 0 are different values", function() {
-			var a = {tag: "input", attrs: {value: 0}, children:[{tag:"#", children:""}]}
+			var a = m("input", {value: 0})
-			var b = {tag: "input", attrs: {value: ""}, children:[{tag:"#", children:""}]}
+			var b = m("input", {value: ""})
-			var c = {tag: "input", attrs: {value: 0}, children:[{tag:"#", children:""}]}
+			var c = m("input", {value: 0})
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.value).equals("0")
 
-			render(root, [b]);
+			render(root, b);
 
 			o(b.dom.value).equals("")
 
 			// #1595 redux
-			render(root, [c]);
+			render(root, c);
 
 			o(c.dom.value).equals("0")
 		})
@@ -257,34 +259,34 @@ o.spec("attributes", function() {
 			var root = $window.document.body
 			var render = vdom($window)
 
-			var a = {tag: "input"}
+			var a =m("input")
-			var b = {tag: "input", attrs: {value: "1"}}
+			var b = m("input", {value: "1"})
-			var c = {tag: "input", attrs: {value: "1"}}
+			var c = m("input", {value: "1"})
-			var d = {tag: "input", attrs: {value: 1}}
+			var d = m("input", {value: 1})
-			var e = {tag: "input", attrs: {value: 2}}
+			var e = m("input", {value: 2})
 
-			render(root, [a])
+			render(root, a)
 			var spies = $window.__getSpies(a.dom)
 			a.dom.focus()
 
 			o(spies.valueSetter.callCount).equals(0)
 
-			render(root, [b])
+			render(root, b)
 
 			o(b.dom.value).equals("1")
 			o(spies.valueSetter.callCount).equals(1)
 
-			render(root, [c])
+			render(root, c)
 
 			o(c.dom.value).equals("1")
 			o(spies.valueSetter.callCount).equals(1)
 
-			render(root, [d])
+			render(root, d)
 
 			o(d.dom.value).equals("1")
 			o(spies.valueSetter.callCount).equals(1)
 
-			render(root, [e])
+			render(root, e)
 
 			o(d.dom.value).equals("2")
 			o(spies.valueSetter.callCount).equals(2)
@@ -296,22 +298,22 @@ o.spec("attributes", function() {
 			var root = $window.document.body
 			var render = vdom($window)
 
-			var a = {tag: "input", attrs: {type: "radio"}}
+			var a = m("input", {type: "radio"})
-			var b = {tag: "input", attrs: {type: "text"}}
+			var b = m("input", {type: "text"})
-			var c = {tag: "input", attrs: {}}
+			var c = m("input")
 
-			render(root, [a])
+			render(root, a)
 			var spies = $window.__getSpies(a.dom)
 
 			o(spies.typeSetter.callCount).equals(0)
 			o(a.dom.getAttribute("type")).equals("radio")
 
-			render(root, [b])
+			render(root, b)
 
 			o(spies.typeSetter.callCount).equals(0)
 			o(b.dom.getAttribute("type")).equals("text")
 
-			render(root, [c])
+			render(root, c)
 
 			o(spies.typeSetter.callCount).equals(0)
 			o(c.dom.hasAttribute("type")).equals(false)
@@ -319,15 +321,15 @@ o.spec("attributes", function() {
 	})
 	o.spec("textarea.value", function() {
 		o("can be removed by not passing a value", function() {
-			var a = {tag: "textarea", attrs: {value:"x"}}
+			var a = m("textarea", {value:"x"})
-			var b = {tag: "textarea", attrs: {}}
+			var b = m("textarea")
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.value).equals("x")
 
 			// https://github.com/MithrilJS/mithril.js/issues/1804#issuecomment-304521235
-			render(root, [b])
+			render(root, b)
 
 			o(b.dom.value).equals("")
 		})
@@ -336,34 +338,34 @@ o.spec("attributes", function() {
 			var root = $window.document.body
 			var render = vdom($window)
 
-			var a = {tag: "textarea"}
+			var a = m("textarea")
-			var b = {tag: "textarea", attrs: {value: "1"}}
+			var b = m("textarea", {value: "1"})
-			var c = {tag: "textarea", attrs: {value: "1"}}
+			var c = m("textarea", {value: "1"})
-			var d = {tag: "textarea", attrs: {value: 1}}
+			var d = m("textarea", {value: 1})
-			var e = {tag: "textarea", attrs: {value: 2}}
+			var e = m("textarea", {value: 2})
 
-			render(root, [a])
+			render(root, a)
 			var spies = $window.__getSpies(a.dom)
 			a.dom.focus()
 
 			o(spies.valueSetter.callCount).equals(0)
 
-			render(root, [b])
+			render(root, b)
 
 			o(b.dom.value).equals("1")
 			o(spies.valueSetter.callCount).equals(1)
 
-			render(root, [c])
+			render(root, c)
 
 			o(c.dom.value).equals("1")
 			o(spies.valueSetter.callCount).equals(1)
 
-			render(root, [d])
+			render(root, d)
 
 			o(d.dom.value).equals("1")
 			o(spies.valueSetter.callCount).equals(1)
 
-			render(root, [e])
+			render(root, e)
 
 			o(d.dom.value).equals("2")
 			o(spies.valueSetter.callCount).equals(2)
@@ -371,23 +373,23 @@ o.spec("attributes", function() {
 	})
 	o.spec("link href", function() {
 		o("when link href is true, attribute is present", function() {
-			var a = {tag: "a", attrs: {href: true}}
+			var a = m("a", {href: true})
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.attributes["href"]).notEquals(undefined)
 		})
 		o("when link href is false, attribute is not present", function() {
-			var a = {tag: "a", attrs: {href: false}}
+			var a = m("a", {href: false})
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.attributes["href"]).equals(undefined)
 		})
 	})
 	o.spec("canvas width and height", function() {
 		o("uses attribute API", function() {
-			var canvas = {tag: "canvas", attrs: {width: "100%"}}
+			var canvas = m("canvas", {width: "100%"})
 
 			render(root, canvas)
 
@@ -397,27 +399,27 @@ o.spec("attributes", function() {
 	})
 	o.spec("svg", function() {
 		o("when className is specified then it should be added as a class", function() {
-			var a = {tag: "svg", attrs: {className: "test"}}
+			var a = m("svg", {className: "test"})
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.attributes["class"].value).equals("test")
 		})
 		/* eslint-disable no-script-url */
 		o("handles xlink:href", function() {
-			var vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [
+			var vnode = m("svg", {ns: "http://www.w3.org/2000/svg"},
-				{tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {"xlink:href": "javascript:;"}}
+				m("a", {ns: "http://www.w3.org/2000/svg", "xlink:href": "javascript:;"})
-			]}
+			)
-			render(root, [vnode])
+			render(root, vnode)
 
 			o(vnode.dom.nodeName).equals("svg")
 			o(vnode.dom.firstChild.attributes["href"].value).equals("javascript:;")
 			o(vnode.dom.firstChild.attributes["href"].namespaceURI).equals("http://www.w3.org/1999/xlink")
 
-			vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [
+			vnode = m("svg", {ns: "http://www.w3.org/2000/svg"},
-				{tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {}}
+				m("a", {ns: "http://www.w3.org/2000/svg"})
-			]}
+			)
-			render(root, [vnode])
+			render(root, vnode)
 
 			o(vnode.dom.nodeName).equals("svg")
 			o("href" in vnode.dom.firstChild.attributes).equals(false)
@@ -426,54 +428,54 @@ o.spec("attributes", function() {
 	})
 	o.spec("option.value", function() {
 		o("can be set as text", function() {
-			var a = {tag: "option", attrs: {value: "test"}}
+			var a = m("option", {value: "test"})
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.value).equals("test")
 		})
 		o("can be set as number", function() {
-			var a = {tag: "option", attrs: {value: 1}}
+			var a = m("option", {value: 1})
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.value).equals("1")
 		})
 		o("null removes the attribute", function() {
-			var a = {tag: "option", attrs: {value: null}}
+			var a = m("option", {value: null})
-			var b = {tag: "option", attrs: {value: "test"}}
+			var b = m("option", {value: "test"})
-			var c = {tag: "option", attrs: {value: null}}
+			var c = m("option", {value: null})
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.value).equals("")
 			o(a.dom.hasAttribute("value")).equals(false)
 
-			render(root, [b]);
+			render(root, b);
 
 			o(b.dom.value).equals("test")
 			o(b.dom.getAttribute("value")).equals("test")
 
-			render(root, [c]);
+			render(root, c);
 
 			o(c.dom.value).equals("")
 			o(c.dom.hasAttribute("value")).equals(false)
 		})
 		o("'' and 0 are different values", function() {
-			var a = {tag: "option", attrs: {value: 0}, children:[{tag:"#", children:""}]}
+			var a = m("option", {value: 0}, "")
-			var b = {tag: "option", attrs: {value: ""}, children:[{tag:"#", children:""}]}
+			var b = m("option", {value: ""}, "")
-			var c = {tag: "option", attrs: {value: 0}, children:[{tag:"#", children:""}]}
+			var c = m("option", {value: 0}, "")
 
-			render(root, [a]);
+			render(root, a);
 
 			o(a.dom.value).equals("0")
 
-			render(root, [b]);
+			render(root, b);
 
 			o(a.dom.value).equals("")
 
 			// #1595 redux
-			render(root, [c]);
+			render(root, c);
 
 			o(c.dom.value).equals("0")
 		})
@@ -482,33 +484,33 @@ o.spec("attributes", function() {
 			var root = $window.document.body
 			var render = vdom($window)
 
-			var a = {tag: "option"}
+			var a = m("option")
-			var b = {tag: "option", attrs: {value: "1"}}
+			var b = m("option", {value: "1"})
-			var c = {tag: "option", attrs: {value: "1"}}
+			var c = m("option", {value: "1"})
-			var d = {tag: "option", attrs: {value: 1}}
+			var d = m("option", {value: 1})
-			var e = {tag: "option", attrs: {value: 2}}
+			var e = m("option", {value: 2})
 
-			render(root, [a])
+			render(root, a)
 			var spies = $window.__getSpies(a.dom)
 
 			o(spies.valueSetter.callCount).equals(0)
 
-			render(root, [b])
+			render(root, b)
 
 			o(b.dom.value).equals("1")
 			o(spies.valueSetter.callCount).equals(1)
 
-			render(root, [c])
+			render(root, c)
 
 			o(c.dom.value).equals("1")
 			o(spies.valueSetter.callCount).equals(1)
 
-			render(root, [d])
+			render(root, d)
 
 			o(d.dom.value).equals("1")
 			o(spies.valueSetter.callCount).equals(1)
 
-			render(root, [e])
+			render(root, e)
 
 			o(d.dom.value).equals("2")
 			o(spies.valueSetter.callCount).equals(2)
@@ -517,13 +519,13 @@ o.spec("attributes", function() {
 	o.spec("select.value", function() {
 		function makeSelect(value) {
 			var attrs = (arguments.length === 0) ? {} : {value: value}
-			return {tag: "select", attrs: attrs, children: [
+			return m("select", attrs,
-				{tag:"option", attrs: {value: "1"}},
+				m("option", {value: "1"}),
-				{tag:"option", attrs: {value: "2"}},
+				m("option", {value: "2"}),
-				{tag:"option", attrs: {value: "a"}},
+				m("option", {value: "a"}),
-				{tag:"option", attrs: {value: "0"}},
+				m("option", {value: "0"}),
-				{tag:"option", attrs: {value: ""}}
+				m("option", {value: ""})
-			]}
+			)
 		}
 		/* FIXME
 		   This incomplete test is meant for testing #1916.
@@ -532,9 +534,9 @@ o.spec("attributes", function() {
 		   attribute. Ask isiahmeadows.
 
 		o("render select options", function() {
-			var select = {tag: "select", selectedIndex: 0, children: [
+			var select = m("select", {selectedIndex: 0}, 
-				{tag:"option", attrs: {value: "1", selected: ""}}
+				m("option", {value: "1", selected: ""})
-			]}
+			)
 			render(root, select)
 		})
 		*/
@@ -543,17 +545,17 @@ o.spec("attributes", function() {
 			var b = makeSelect("2")
 			var c = makeSelect("a")
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.value).equals("1")
 			o(a.dom.selectedIndex).equals(0)
 
-			render(root, [b])
+			render(root, b)
 
 			o(b.dom.value).equals("2")
 			o(b.dom.selectedIndex).equals(1)
 
-			render(root, [c])
+			render(root, c)
 
 			o(c.dom.value).equals("a")
 			o(c.dom.selectedIndex).equals(2)
@@ -561,7 +563,7 @@ o.spec("attributes", function() {
 		o("setting null unsets the value", function() {
 			var a = makeSelect(null)
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.value).equals("")
 			o(a.dom.selectedIndex).equals(-1)
@@ -570,12 +572,12 @@ o.spec("attributes", function() {
 			var a = makeSelect(1)
 			var b = makeSelect(2)
 
-			render(root, [a])
+			render(root, a)
 
 			o(a.dom.value).equals("1")
 			o(a.dom.selectedIndex).equals(0)
 
-			render(root, [b])
+			render(root, b)
 
 			o(b.dom.value).equals("2")
 			o(b.dom.selectedIndex).equals(1)
@@ -584,13 +586,13 @@ o.spec("attributes", function() {
 			var a = makeSelect("")
 			var b = makeSelect(0)
 
-			render(root, [a])
+			render(root, a)
 			a.dom.focus()
 
 			o(a.dom.value).equals("")
 
 			// #1595 redux
-			render(root, [b])
+			render(root, b)
 
 			o(b.dom.value).equals("0")
 		})
@@ -599,18 +601,18 @@ o.spec("attributes", function() {
 			var b = makeSelect(null)
 			var c = makeSelect("")
 
-			render(root, [a])
+			render(root, a)
 			a.dom.focus()
 
 			o(a.dom.value).equals("")
 			o(a.dom.selectedIndex).equals(4)
 
-			render(root, [b])
+			render(root, b)
 
 			o(b.dom.value).equals("")
 			o(b.dom.selectedIndex).equals(-1)
 
-			render(root, [c])
+			render(root, c)
 
 			o(c.dom.value).equals("")
 			o(c.dom.selectedIndex).equals(4)
@@ -625,45 +627,32 @@ o.spec("attributes", function() {
 			var c = makeSelect(1)
 			var d = makeSelect("2")
 
-			render(root, [a])
+			render(root, a)
 			var spies = $window.__getSpies(a.dom)
 			a.dom.focus()
 
 			o(spies.valueSetter.callCount).equals(0)
 			o(a.dom.value).equals("1")
 
-			render(root, [b])
+			render(root, b)
 
 			o(spies.valueSetter.callCount).equals(0)
 			o(b.dom.value).equals("1")
 
-			render(root, [c])
+			render(root, c)
 
 			o(spies.valueSetter.callCount).equals(0)
 			o(c.dom.value).equals("1")
 
-			render(root, [d])
+			render(root, d)
 
 			o(spies.valueSetter.callCount).equals(1)
 			o(d.dom.value).equals("2")
 		})
 	})
-	o.spec("contenteditable attr throws on untrusted children", function() {
+	o.spec("contenteditable throws on untrusted children", function() {
-		o("including text nodes", function() {
-			var div = {tag: "div", attrs: {contenteditable: true}, text: ""}
-			var succeeded = false
-
-			try {
-				render(root, div)
-
-				succeeded = true
-			}
-			catch(e){/* ignore */}
-
-			o(succeeded).equals(false)
-		})
 		o("including elements", function() {
-			var div = {tag: "div", attrs: {contenteditable: true}, children: [{tag: "script", attrs: {src: "http://evil.com"}}]}
+			var div = m("div", {contenteditable: true}, m("script", {src: "http://evil.com"}))
 			var succeeded = false
 
 			try {
@@ -676,7 +665,7 @@ o.spec("attributes", function() {
 			o(succeeded).equals(false)
 		})
 		o("tolerating empty children", function() {
-			var div = {tag: "div", attrs: {contenteditable: true}, children: []}
+			var div = m("div", {contenteditable: true})
 			var succeeded = false
 
 			try {
@@ -689,61 +678,7 @@ o.spec("attributes", function() {
 			o(succeeded).equals(true)
 		})
 		o("tolerating trusted content", function() {
-			var div = {tag: "div", attrs: {contenteditable: true}, children: [{tag: "<", children: "<a></a>"}]}
+			var div = m("div", {contenteditable: true}, m.trust("<a></a>"))
-			var succeeded = false
-
-			try {
-				render(root, div)
-
-				succeeded = true
-			}
-			catch(e){/* ignore */}
-
-			o(succeeded).equals(true)
-		})
-	})
-	o.spec("contentEditable prop throws on untrusted children", function() {
-		o("including text nodes", function() {
-			var div = {tag: "div", attrs: {contentEditable: true}, text: ""}
-			var succeeded = false
-
-			try {
-				render(root, div)
-
-				succeeded = true
-			}
-			catch(e){/* ignore */}
-
-			o(succeeded).equals(false)
-		})
-		o("including elements", function() {
-			var div = {tag: "div", attrs: {contentEditable: true}, children: [{tag: "script", attrs: {src: "http://evil.com"}}]}
-			var succeeded = false
-
-			try {
-				render(root, div)
-
-				succeeded = true
-			}
-			catch(e){/* ignore */}
-
-			o(succeeded).equals(false)
-		})
-		o("tolerating empty children", function() {
-			var div = {tag: "div", attrs: {contentEditable: true}, children: []}
-			var succeeded = false
-
-			try {
-				render(root, div)
-
-				succeeded = true
-			}
-			catch(e){/* ignore */}
-
-			o(succeeded).equals(true)
-		})
-		o("tolerating trusted content", function() {
-			var div = {tag: "div", attrs: {contentEditable: true}, children: [{tag: "<", children: "<a></a>"}]}
 			var succeeded = false
 
 			try {

render/tests/test-component.js

@@ -4,6 +4,7 @@ var o = require("ospec")
 var components = require("../../test-utils/components")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
 
 o.spec("component", function() {
 	var $window, root, render
@@ -22,12 +23,12 @@ o.spec("component", function() {
 				o("works", function() {
 					var component = createComponent({
 						view: function() {
-							return {tag: "div", attrs: {id: "a"}, text: "b"}
+							return m("div", {id: "a"}, "b")
 						}
 					})
-					var node = {tag: component}
+					var node = m(component)
 
-					render(root, [node])
+					render(root, node)
 
 					o(root.firstChild.nodeName).equals("DIV")
 					o(root.firstChild.attributes["id"].value).equals("a")
@@ -36,12 +37,12 @@ o.spec("component", function() {
 				o("receives arguments", function() {
 					var component = createComponent({
 						view: function(vnode) {
-							return {tag: "div", attrs: vnode.attrs, text: vnode.text}
+							return m("div", vnode.attrs, vnode.children)
 						}
 					})
-					var node = {tag: component, attrs: {id: "a"}, text: "b"}
+					var node = m(component, {id: "a"}, "b")
 
-					render(root, [node])
+					render(root, node)
 
 					o(root.firstChild.nodeName).equals("DIV")
 					o(root.firstChild.attributes["id"].value).equals("a")
@@ -50,11 +51,11 @@ o.spec("component", function() {
 				o("updates", function() {
 					var component = createComponent({
 						view: function(vnode) {
-							return {tag: "div", attrs: vnode.attrs, text: vnode.text}
+							return m("div", vnode.attrs, vnode.children)
 						}
 					})
-					render(root, [{tag: component, attrs: {id: "a"}, text: "b"}])
+					render(root, [m(component, {id: "a"}, "b")])
-					render(root, [{tag: component, attrs: {id: "c"}, text: "d"}])
+					render(root, [m(component, {id: "c"}, "d")])
 
 					o(root.firstChild.nodeName).equals("DIV")
 					o(root.firstChild.attributes["id"].value).equals("c")
@@ -64,12 +65,12 @@ o.spec("component", function() {
 					var visible = false
 					var component = createComponent({
 						view: function() {
-							return visible ? {tag: "div"} : null
+							return visible ? m("div") : null
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 					visible = true
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.firstChild.nodeName).equals("DIV")
 				})
@@ -77,12 +78,12 @@ o.spec("component", function() {
 					var visible = false
 					var component = createComponent({
 						view: function() {
-							return visible ? {tag: "div"} : false
+							return visible ? m("div") : false
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 					visible = true
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.firstChild.nodeName).equals("DIV")
 				})
@@ -90,12 +91,12 @@ o.spec("component", function() {
 					var visible = true
 					var component = createComponent({
 						view: function() {
-							return visible ? {tag: "div"} : null
+							return visible ? m("div") : null
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 					visible = false
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(0)
 				})
@@ -103,12 +104,12 @@ o.spec("component", function() {
 					var visible = true
 					var component = createComponent({
 						view: function() {
-							return visible ? {tag: "div"} : false
+							return visible ? m("div") : false
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 					visible = false
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(0)
 				})
@@ -118,20 +119,20 @@ o.spec("component", function() {
 							return null
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(0)
 				})
 				o("removes", function() {
 					var component = createComponent({
 						view: function() {
-							return {tag: "div"}
+							return m("div")
 						}
 					})
-					var div = {tag: "div", key: 2}
+					var div = m("div", {key: 2})
-					render(root, [{tag: component, key: 1}, div])
+					render(root, [m(component, {key: 1}), div])
-					render(root, [{tag: "div", key: 2}])
+					render(root, div)
 
 					o(root.childNodes.length).equals(1)
 					o(root.firstChild).equals(div.dom)
@@ -139,21 +140,21 @@ o.spec("component", function() {
 				o("svg works when creating across component boundary", function() {
 					var component = createComponent({
 						view: function() {
-							return {tag: "g"}
+							return m("g")
 						}
 					})
-					render(root, [{tag: "svg", children: [{tag: component}]}])
+					render(root, m("svg", m(component)))
 
 					o(root.firstChild.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg")
 				})
 				o("svg works when updating across component boundary", function() {
 					var component = createComponent({
 						view: function() {
-							return {tag: "g"}
+							return m("g")
 						}
 					})
-					render(root, [{tag: "svg", children: [{tag: component}]}])
+					render(root, m("svg", m(component)))
-					render(root, [{tag: "svg", children: [{tag: component}]}])
+					render(root, m("svg", m(component)))
 
 					o(root.firstChild.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg")
 				})
@@ -163,12 +164,12 @@ o.spec("component", function() {
 					var component = createComponent({
 						view: function() {
 							return [
-								{tag: "label"},
+								m("label"),
-								{tag: "input"},
+								m("input"),
 							]
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(2)
 					o(root.childNodes[0].nodeName).equals("LABEL")
@@ -180,7 +181,7 @@ o.spec("component", function() {
 							return "a"
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.firstChild.nodeType).equals(3)
 					o(root.firstChild.nodeValue).equals("a")
@@ -191,7 +192,7 @@ o.spec("component", function() {
 							return ""
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.firstChild.nodeType).equals(3)
 					o(root.firstChild.nodeValue).equals("")
@@ -202,7 +203,7 @@ o.spec("component", function() {
 							return 1
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.firstChild.nodeType).equals(3)
 					o(root.firstChild.nodeValue).equals("1")
@@ -213,7 +214,7 @@ o.spec("component", function() {
 							return 0
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.firstChild.nodeType).equals(3)
 					o(root.firstChild.nodeValue).equals("0")
@@ -224,7 +225,7 @@ o.spec("component", function() {
 							return true
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(0)
 				})
@@ -234,7 +235,7 @@ o.spec("component", function() {
 							return false
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(0)
 				})
@@ -244,7 +245,7 @@ o.spec("component", function() {
 							return null
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(0)
 				})
@@ -254,7 +255,7 @@ o.spec("component", function() {
 							return undefined
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(0)
 				})
@@ -267,7 +268,7 @@ o.spec("component", function() {
 						}
 					})
 					try {
-						render(root, [{tag: component}])
+						render(root, m(component))
 					}
 					catch (e) {
 						threw = true
@@ -289,12 +290,12 @@ o.spec("component", function() {
 							else return vnode
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(0)
 
 					try {
-						render(root, [{tag: component}])
+						render(root, m(component))
 					}
 					catch (e) {
 						threw = true
@@ -309,13 +310,13 @@ o.spec("component", function() {
 					var component = createComponent({
 						view: function() {
 							return [
-								{tag: "label"},
+								m("label"),
-								{tag: "input"},
+								m("input"),
 							]
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(2)
 					o(root.childNodes[0].nodeName).equals("LABEL")
@@ -327,8 +328,8 @@ o.spec("component", function() {
 							return "a"
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.firstChild.nodeType).equals(3)
 					o(root.firstChild.nodeValue).equals("a")
@@ -339,8 +340,8 @@ o.spec("component", function() {
 							return null
 						}
 					})
-					render(root, [{tag: component}])
+					render(root, m(component))
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(root.childNodes.length).equals(0)
 				})
@@ -348,15 +349,15 @@ o.spec("component", function() {
 					var component = createComponent({
 						view: function() {
 							return [
-								{tag: "label"},
+								m("label"),
-								{tag: "input"},
+								m("input"),
 							]
 						}
 					})
-					var div = {tag: "div", key: 2}
+					var div = m("div", {key: 2})
-					render(root, [{tag: component, key: 1}, div])
+					render(root, [m(component, {key: 1}), div])
 
-					render(root, [{tag: "div", key: 2}])
+					render(root, [m("div", {key: 2})])
 
 					o(root.childNodes.length).equals(1)
 					o(root.firstChild).equals(div.dom)
@@ -367,10 +368,10 @@ o.spec("component", function() {
 							return "a"
 						}
 					})
-					var div = {tag: "div", key: 2}
+					var div = m("div", {key: 2})
-					render(root, [{tag: component, key: 1}, div])
+					render(root, [m(component, {key: 1}), div])
 
-					render(root, [{tag: "div", key: 2}])
+					render(root, [m("div", {key: 2})])
 
 					o(root.childNodes.length).equals(1)
 					o(root.firstChild).equals(div.dom)
@@ -388,12 +389,11 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(0)
 						},
 						view: function() {
-							return {tag: "div", attrs: {id: "a"}, text: "b"}
+							return m("div", {id: "a"}, "b")
 						}
 					})
-					var node = {tag: component}
 
-					render(root, [node])
+					render(root, m(component))
 
 					o(called).equals(1)
 					o(root.firstChild.nodeName).equals("DIV")
@@ -411,12 +411,11 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(0)
 						},
 						view: function() {
-							return [{tag: "div", attrs: {id: "a"}, text: "b"}]
+							return [m("div", {id: "a"}, "b")]
 						}
 					})
-					var node = {tag: component}
 
-					render(root, [node])
+					render(root, m(component))
 
 					o(called).equals(1)
 					o(root.firstChild.nodeName).equals("DIV")
@@ -425,30 +424,29 @@ o.spec("component", function() {
 				})
 				o("calls oninit before view", function() {
 					var viewCalled = false
+					var component = createComponent({
+						view: function() {
+							viewCalled = true
+							return m("div", {id: "a"}, "b")
+						},
+						oninit: function() {
+							o(viewCalled).equals(false)
+						},
+					})
 
-					render(root, createComponent({
+					render(root, m(component))
-						tag: {
-							view: function() {
-								viewCalled = true
-								return [{tag: "div", attrs: {id: "a"}, text: "b"}]
-							},
-							oninit: function() {
-								o(viewCalled).equals(false)
-							},
-						}
-					}))
 				})
 				o("does not calls oninit on redraw", function() {
 					var init = o.spy()
 					var component = createComponent({
 						view: function() {
-							return {tag: "div", attrs: {id: "a"}, text: "b"}
+							return m("div", {id: "a"}, "b")
 						},
 						oninit: init,
 					})
 
 					function view() {
-						return {tag: component}
+						return m(component)
 					}
 
 					render(root, view())
@@ -467,12 +465,11 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(1)
 						},
 						view: function() {
-							return {tag: "div", attrs: {id: "a"}, text: "b"}
+							return m("div", {id: "a"}, "b")
 						}
 					})
-					var node = {tag: component}
 
-					render(root, [node])
+					render(root, m(component))
 
 					o(called).equals(1)
 					o(root.firstChild.nodeName).equals("DIV")
@@ -483,13 +480,13 @@ o.spec("component", function() {
 					var create = o.spy()
 					var component = createComponent({
 						view: function() {
-							return {tag: "div", attrs: {id: "a"}, text: "b"}
+							return m("div", {id: "a"}, "b")
 						},
 						oncreate: create,
 					})
 
 					function view() {
-						return {tag: component}
+						return m(component)
 					}
 
 					render(root, view())
@@ -508,12 +505,11 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(1)
 						},
 						view: function() {
-							return [{tag: "div", attrs: {id: "a"}, text: "b"}]
+							return m("div", {id: "a"}, "b")
 						}
 					})
-					var node = {tag: component}
 
-					render(root, [node])
+					render(root, m(component))
 
 					o(called).equals(1)
 					o(root.firstChild.nodeName).equals("DIV")
@@ -531,15 +527,15 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(1)
 						},
 						view: function() {
-							return {tag: "div", attrs: {id: "a"}, text: "b"}
+							return m("div", {id: "a"}, "b")
 						}
 					})
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(called).equals(0)
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(called).equals(1)
 					o(root.firstChild.nodeName).equals("DIV")
@@ -557,15 +553,15 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(1)
 						},
 						view: function() {
-							return [{tag: "div", attrs: {id: "a"}, text: "b"}]
+							return [m("div", {id: "a"}, "b")]
 						}
 					})
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(called).equals(0)
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(called).equals(1)
 					o(root.firstChild.nodeName).equals("DIV")
@@ -583,11 +579,11 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(1)
 						},
 						view: function() {
-							return {tag: "div", attrs: {id: "a"}, text: "b"}
+							return m("div", {id: "a"}, "b")
 						}
 					})
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(called).equals(0)
 
@@ -607,11 +603,11 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(1)
 						},
 						view: function() {
-							return [{tag: "div", attrs: {id: "a"}, text: "b"}]
+							return [m("div", {id: "a"}, "b")]
 						}
 					})
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(called).equals(0)
 
@@ -631,11 +627,11 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(1)
 						},
 						view: function() {
-							return {tag: "div", attrs: {id: "a"}, text: "b"}
+							return m("div", {id: "a"}, "b")
 						}
 					})
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(called).equals(0)
 
@@ -655,11 +651,11 @@ o.spec("component", function() {
 							o(root.childNodes.length).equals(1)
 						},
 						view: function() {
-							return [{tag: "div", attrs: {id: "a"}, text: "b"}]
+							return [m("div", {id: "a"}, "b")]
 						}
 					})
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					o(called).equals(0)
 
@@ -672,15 +668,15 @@ o.spec("component", function() {
 					var component = createComponent({
 						onupdate: function() {},
 						view: function() {
-							return {tag: "div"}
+							return m("div")
 						}
 					})
-					var vnode = {tag: component, key: 1}
+					var vnode = m(component, {key: 1})
-					var updated = {tag: component, key: 1}
+					var updated = m(component, {key: 1})
 
-					render(root, [vnode])
+					render(root, vnode)
 					render(root, [])
-					render(root, [updated])
+					render(root, updated)
 
 					o(vnode.dom).notEquals(updated.dom)
 				})
@@ -729,7 +725,7 @@ o.spec("component", function() {
 						o(attrs[hook].callCount).equals(methods[hook].callCount)(hook)
 					})
 
-					render(root, [{tag: component, attrs: attrs}])
+					render(root, [m(component, attrs)])
 
 					o(methods.view.callCount).equals(1)
 					o(methods.oninit.callCount).equals(1)
@@ -743,7 +739,7 @@ o.spec("component", function() {
 						o(attrs[hook].callCount).equals(methods[hook].callCount)(hook)
 					})
 
-					render(root, [{tag: component, attrs: attrs}])
+					render(root, [m(component, attrs)])
 
 					o(methods.view.callCount).equals(2)
 					o(methods.oninit.callCount).equals(1)
@@ -794,8 +790,8 @@ o.spec("component", function() {
 
 					var component = createComponent(methods)
 
-					render(root, [{tag: component, attrs: attrs}])
+					render(root, [m(component, attrs)])
-					render(root, [{tag: component, attrs: attrs}])
+					render(root, [m(component, attrs)])
 					render(root, [])
 
 					hooks.forEach(function(hook) {
@@ -824,15 +820,15 @@ o.spec("component", function() {
 						} else {
 							o(vnode.state).notEquals(firstState)
 						}
-						return {tag: "div"}
+						return m("div")
 					})
 					var component = createComponent({view: view})
 
-					render(root, [{tag: "div", children: [{tag: component, key: 1}]}])
+					render(root, [m("div", m(component, {key: 1}))])
 					var child = root.firstChild.firstChild
 					render(root, [])
 					step = 1
-					render(root, [{tag: "div", children: [{tag: component, key: 1}]}])
+					render(root, [m("div", m(component, {key: 1}))])
 
 					o(child).notEquals(root.firstChild.firstChild) // this used to be a recycling pool test
 					o(view.callCount).equals(2)
@@ -849,7 +845,7 @@ o.spec("component", function() {
 						}
 					}))
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					function init(vnode) {
 						o(vnode.state.data).equals(data)
@@ -866,7 +862,7 @@ o.spec("component", function() {
 						}
 					}))
 
-					render(root, [{tag: component}])
+					render(root, m(component))
 
 					function init(vnode) {
 						o(vnode.state.data).equals(data)
@@ -888,7 +884,7 @@ o.spec("component", function() {
 					}
 				}
 
-				render(root, [{tag: component}])
+				render(root, m(component))
 
 				function init(vnode) {
 					o(vnode.state.data).equals(data)
@@ -911,8 +907,8 @@ o.spec("component", function() {
 				component.prototype.view = view
 				component.prototype.oninit = oninit
 
-				render(root, [{tag: component, attrs: {oninit: oninit}}])
+				render(root, [m(component, {oninit: oninit})])
-				render(root, [{tag: component, attrs: {oninit: oninit}}])
+				render(root, [m(component, {oninit: oninit})])
 				render(root, [])
 
 				o(component.callCount).equals(1)
@@ -934,8 +930,8 @@ o.spec("component", function() {
 					}
 				})
 
-				render(root, [{tag: component, attrs: {oninit: oninit}}])
+				render(root, [m(component, {oninit: oninit})])
-				render(root, [{tag: component, attrs: {oninit: oninit}}])
+				render(root, [m(component, {oninit: oninit})])
 				render(root, [])
 
 				o(component.callCount).equals(1)

render/tests/test-createElement.js

@@ -3,6 +3,7 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
 
 o.spec("createElement", function() {
 	var $window, root, render
@@ -13,48 +14,48 @@ o.spec("createElement", function() {
 	})
 
 	o("creates element", function() {
-		var vnode = {tag: "div"}
+		var vnode = m("div")
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeName).equals("DIV")
 	})
 	o("creates attr", function() {
-		var vnode = {tag: "div", attrs: {id: "a", title: "b"}}
+		var vnode = m("div", {id: "a", title: "b"})
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeName).equals("DIV")
 		o(vnode.dom.attributes["id"].value).equals("a")
 		o(vnode.dom.attributes["title"].value).equals("b")
 	})
 	o("creates style", function() {
-		var vnode = {tag: "div", attrs: {style: {backgroundColor: "red"}}}
+		var vnode = m("div", {style: {backgroundColor: "red"}})
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeName).equals("DIV")
 		o(vnode.dom.style.backgroundColor).equals("red")
 	})
 	o("allows css vars in style", function() {
-		var vnode = {tag: "div", attrs: {style: {"--css-var": "red"}}}
+		var vnode = m("div", {style: {"--css-var": "red"}})
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.style["--css-var"]).equals("red")
 	})
 	o("allows css vars in style with uppercase letters", function() {
-		var vnode = {tag: "div", attrs: {style: {"--cssVar": "red"}}}
+		var vnode = m("div", {style: {"--cssVar": "red"}})
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.style["--cssVar"]).equals("red")
 	})
 	o("censors cssFloat to float", function() {
-		var vnode = {tag: "a", attrs: {style: {cssFloat: "left"}}}
+		var vnode = m("a", {style: {cssFloat: "left"}})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.style.float).equals("left")
 	})
 	o("creates children", function() {
-		var vnode = {tag: "div", children: [{tag: "a"}, {tag: "b"}]}
+		var vnode = m("div", m("a"), m("b"))
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeName).equals("DIV")
 		o(vnode.dom.childNodes.length).equals(2)
@@ -62,8 +63,8 @@ o.spec("createElement", function() {
 		o(vnode.dom.childNodes[1].nodeName).equals("B")
 	})
 	o("creates attrs and children", function() {
-		var vnode = {tag: "div", attrs: {id: "a", title: "b"}, children: [{tag: "a"}, {tag: "b"}]}
+		var vnode = m("div", {id: "a", title: "b"}, m("a"), m("b"))
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeName).equals("DIV")
 		o(vnode.dom.attributes["id"].value).equals("a")
@@ -74,11 +75,11 @@ o.spec("createElement", function() {
 	})
 	/* eslint-disable no-script-url */
 	o("creates svg", function() {
-		var vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [
+		var vnode = m("svg",
-			{tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {"xlink:href": "javascript:;"}},
+			m("a", {"xlink:href": "javascript:;"}),
-			{tag: "foreignObject", children: [{tag: "body", attrs: {xmlns: "http://www.w3.org/1999/xhtml"}}]}
+			m("foreignObject", m("body", {xmlns: "http://www.w3.org/1999/xhtml"}))
-		]}
+		)
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeName).equals("svg")
 		o(vnode.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
@@ -92,14 +93,14 @@ o.spec("createElement", function() {
 	})
 	/* eslint-enable no-script-url */
 	o("sets attributes correctly for svg", function() {
-		var vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", attrs: {viewBox: "0 0 100 100"}}
+		var vnode = m("svg", {viewBox: "0 0 100 100"})
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.attributes["viewBox"].value).equals("0 0 100 100")
 	})
 	o("creates mathml", function() {
-		var vnode = {tag: "math", ns: "http://www.w3.org/1998/Math/MathML", children: [{tag: "mrow", ns: "http://www.w3.org/1998/Math/MathML"}]}
+		var vnode = m("math", m("mrow"))
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeName).equals("math")
 		o(vnode.dom.namespaceURI).equals("http://www.w3.org/1998/Math/MathML")

render/tests/test-createFragment.js

@@ -3,6 +3,8 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.fragment = require("../../render/fragment")
 
 o.spec("createFragment", function() {
 	var $window, root, render
@@ -13,36 +15,36 @@ o.spec("createFragment", function() {
 	})
 
 	o("creates fragment", function() {
-		var vnode = {tag: "[", children: [{tag: "a"}]}
+		var vnode = m.fragment(m("a"))
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeName).equals("A")
 	})
 	o("handles empty fragment", function() {
-		var vnode = {tag: "[", children: []}
+		var vnode = m.fragment()
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom).equals(null)
 		o(vnode.domSize).equals(0)
 	})
 	o("handles childless fragment", function() {
-		var vnode = {tag: "["}
+		var vnode = m.fragment()
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom).equals(null)
 		o(vnode.domSize).equals(0)
 	})
 	o("handles multiple children", function() {
-		var vnode = {tag: "[", children: [{tag: "a"}, {tag: "b"}]}
+		var vnode = m.fragment(m("a"), m("b"))
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.domSize).equals(2)
 		o(vnode.dom.nodeName).equals("A")
 		o(vnode.dom.nextSibling.nodeName).equals("B")
 	})
 	o("handles td", function() {
-		var vnode = {tag: "[", children: [{tag: "td"}]}
+		var vnode = m.fragment(m("td"))
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom).notEquals(null)
 		o(vnode.dom.nodeName).equals("TD")

render/tests/test-createHTML.js

@@ -3,6 +3,8 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.trust = require("../../render/trust")
 
 o.spec("createHTML", function() {
 	var $window, root, render
@@ -13,27 +15,27 @@ o.spec("createHTML", function() {
 	})
 
 	o("creates HTML", function() {
-		var vnode = {tag: "<", children: "<a></a>"}
+		var vnode = m.trust("<a></a>")
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeName).equals("A")
 	})
 	o("creates text HTML", function() {
-		var vnode = {tag: "<", children: "a"}
+		var vnode = m.trust("a")
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.nodeValue).equals("a")
 	})
 	o("handles empty HTML", function() {
-		var vnode = {tag: "<", children: ""}
+		var vnode = m.trust("")
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom).equals(null)
 		o(vnode.domSize).equals(0)
 	})
 	o("handles multiple children in HTML", function() {
-		var vnode = {tag: "<", children: "<a></a><b></b>"}
+		var vnode = m.trust("<a></a><b></b>")
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.domSize).equals(2)
 		o(vnode.dom.nodeName).equals("A")
@@ -45,35 +47,35 @@ o.spec("createHTML", function() {
 		var tags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "big", "blockquote", /*"body",*/ "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", /*"frame", "frameset",*/ "h1", "h2", "h3", "h4", "h5", "h6", /*"head",*/ "header", "hr", /*"html",*/ "i", "iframe", "img", "input", "ins", "kbd", /*"keygen", */"label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"]
 
 		tags.forEach(function(tag) {
-			var vnode = {tag: "<", children: "<" + tag + " />"}
+			var vnode = m.trust("<" + tag + " />")
-			render(root, [vnode])
+			render(root, vnode)
 
 			o(vnode.dom.nodeName).equals(tag.toUpperCase())
 		})
 	})
 	o("creates SVG", function() {
-		var vnode = {tag: "<", children: "<g></g>"}
+		var vnode = m.trust("<g></g>")
-		render(root, [{tag:"svg", children: [vnode]}])
+		render(root, m("svg", vnode))
 
 		o(vnode.dom.nodeName).equals("g")
 		o(vnode.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
 	})
 	o("creates text SVG", function() {
-		var vnode = {tag: "<", children: "a"}
+		var vnode = m.trust("a")
-		render(root, [{tag:"svg", children: [vnode]}])
+		render(root, m("svg", vnode))
 
 		o(vnode.dom.nodeValue).equals("a")
 	})
 	o("handles empty SVG", function() {
-		var vnode = {tag: "<", children: ""}
+		var vnode = m.trust("")
-		render(root, [{tag:"svg", children: [vnode]}])
+		render(root, m("svg", vnode))
 
 		o(vnode.dom).equals(null)
 		o(vnode.domSize).equals(0)
 	})
 	o("handles multiple children in SVG", function() {
-		var vnode = {tag: "<", children: "<g></g><text></text>"}
+		var vnode = m.trust("<g></g><text></text>")
-		render(root, [{tag:"svg", children: [vnode]}])
+		render(root, m("svg", vnode))
 
 		o(vnode.domSize).equals(2)
 		o(vnode.dom.nodeName).equals("g")
@@ -82,7 +84,7 @@ o.spec("createHTML", function() {
 		o(vnode.dom.nextSibling.namespaceURI).equals("http://www.w3.org/2000/svg")
 	})
 	o("creates the dom correctly with a contenteditable parent", function() {
-		var div = {tag: "div", attrs: {contenteditable: true}, children: [{tag: "<", children: "<a></a>"}]}
+		var div = m("div", {contenteditable: true}, m.trust("<a></a>"))
 
 		render(root, div)
 		var tags = []

render/tests/test-createNodes.js

@@ -3,6 +3,9 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.fragment = require("../../render/fragment")
+m.trust = require("../../render/trust")
 
 o.spec("createNodes", function() {
 	var $window, root, render
@@ -14,10 +17,10 @@ o.spec("createNodes", function() {
 
 	o("creates nodes", function() {
 		var vnodes = [
-			{tag: "a"},
+			m("a"),
-			{tag: "#", children: "b"},
+			"b",
-			{tag: "<", children: "c"},
+			m.trust("c"),
-			{tag: "[", children: [{tag: "#", children: "d"}]},
+			m.fragment("d"),
 		]
 		render(root, vnodes)
 
@@ -29,11 +32,11 @@ o.spec("createNodes", function() {
 	})
 	o("ignores null", function() {
 		var vnodes = [
-			{tag: "a"},
+			m("a"),
-			{tag: "#", children: "b"},
+			"b",
 			null,
-			{tag: "<", children: "c"},
+			m.trust("c"),
-			{tag: "[", children: [{tag: "#", children: "d"}]},
+			m.fragment("d"),
 		]
 		render(root, vnodes)
 
@@ -45,11 +48,11 @@ o.spec("createNodes", function() {
 	})
 	o("ignores undefined", function() {
 		var vnodes = [
-			{tag: "a"},
+			m("a"),
-			{tag: "#", children: "b"},
+			"b",
 			undefined,
-			{tag: "<", children: "c"},
+			m.trust("c"),
-			{tag: "[", children: [{tag: "#", children: "d"}]},
+			m.fragment("d"),
 		]
 		render(root, vnodes)
 

render/tests/test-createText.js

@@ -13,59 +13,57 @@ o.spec("createText", function() {
 	})
 
 	o("creates string", function() {
-		var vnode = {tag: "#", children: "a"}
+		var vnode = "a"
-		render(root, [vnode])
+		render(root, vnode)
 
-		o(vnode.dom.nodeName).equals("#text")
+		o(root.firstChild.nodeName).equals("#text")
-		o(vnode.dom.nodeValue).equals("a")
+		o(root.firstChild.nodeValue).equals("a")
 	})
 	o("creates falsy string", function() {
-		var vnode = {tag: "#", children: ""}
+		var vnode = ""
-		render(root, [vnode])
+		render(root, vnode)
 
-		o(vnode.dom.nodeName).equals("#text")
+		o(root.firstChild.nodeName).equals("#text")
-		o(vnode.dom.nodeValue).equals("")
+		o(root.firstChild.nodeValue).equals("")
 	})
 	o("creates number", function() {
-		var vnode = {tag: "#", children: 1}
+		var vnode = 1
-		render(root, [vnode])
+		render(root, vnode)
 
-		o(vnode.dom.nodeName).equals("#text")
+		o(root.firstChild.nodeName).equals("#text")
-		o(vnode.dom.nodeValue).equals("1")
+		o(root.firstChild.nodeValue).equals("1")
 	})
 	o("creates falsy number", function() {
-		var vnode = {tag: "#", children: 0}
+		var vnode = 0
-		render(root, [vnode])
+		render(root, vnode)
 
-		o(vnode.dom.nodeName).equals("#text")
+		o(root.firstChild.nodeName).equals("#text")
-		o(vnode.dom.nodeValue).equals("0")
+		o(root.firstChild.nodeValue).equals("0")
 	})
-	o("creates boolean", function() {
+	o("ignores true boolean", function() {
-		var vnode = {tag: "#", children: true}
+		var vnode = true
-		render(root, [vnode])
+		render(root, vnode)
 
-		o(vnode.dom.nodeName).equals("#text")
+		o(root.childNodes.length).equals(0)
-		o(vnode.dom.nodeValue).equals("true")
 	})
-	o("creates falsy boolean", function() {
+	o("creates false boolean", function() {
-		var vnode = {tag: "#", children: false}
+		var vnode = false
-		render(root, [vnode])
+		render(root, vnode)
 
-		o(vnode.dom.nodeName).equals("#text")
+		o(root.childNodes.length).equals(0)
-		o(vnode.dom.nodeValue).equals("false")
 	})
 	o("creates spaces", function() {
-		var vnode = {tag: "#", children: "   "}
+		var vnode = "   "
-		render(root, [vnode])
+		render(root, vnode)
 
-		o(vnode.dom.nodeName).equals("#text")
+		o(root.firstChild.nodeName).equals("#text")
-		o(vnode.dom.nodeValue).equals("   ")
+		o(root.firstChild.nodeValue).equals("   ")
 	})
 	o("ignores html", function() {
-		var vnode = {tag: "#", children: "<a></a>&trade;"}
+		var vnode = "<a></a>&trade;"
-		render(root, [vnode])
+		render(root, vnode)
 
-		o(vnode.dom.nodeName).equals("#text")
+		o(root.firstChild.nodeName).equals("#text")
-		o(vnode.dom.nodeValue).equals("<a></a>&trade;")
+		o(root.firstChild.nodeValue).equals("<a></a>&trade;")
 	})
 })

render/tests/test-event.js

@@ -3,6 +3,7 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
 
 o.spec("event", function() {
 	var $window, root, redraw, render, reallyRender
@@ -31,12 +32,12 @@ o.spec("event", function() {
 	o("handles onclick", function() {
 		var spyDiv = eventSpy()
 		var spyParent = eventSpy()
-		var div = {tag: "div", attrs: {onclick: spyDiv}}
+		var div = m("div", {onclick: spyDiv})
-		var parent = {tag: "div", attrs: {onclick: spyParent}, children: [div]}
+		var parent = m("div", {onclick: spyParent}, div)
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
 
-		render(root, [parent])
+		render(root, parent)
 		div.dom.dispatchEvent(e)
 
 		o(spyDiv.calls.length).equals(1)
@@ -58,12 +59,12 @@ o.spec("event", function() {
 	o("handles onclick returning false", function() {
 		var spyDiv = eventSpy(function() { return false })
 		var spyParent = eventSpy()
-		var div = {tag: "div", attrs: {onclick: spyDiv}}
+		var div = m("div", {onclick: spyDiv})
-		var parent = {tag: "div", attrs: {onclick: spyParent}, children: [div]}
+		var parent = m("div", {onclick: spyParent}, div)
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
 
-		render(root, [parent])
+		render(root, parent)
 		div.dom.dispatchEvent(e)
 
 		o(spyDiv.calls.length).equals(1)
@@ -83,12 +84,12 @@ o.spec("event", function() {
 		var spyParent = eventSpy()
 		var listenerDiv = {handleEvent: spyDiv}
 		var listenerParent = {handleEvent: spyParent}
-		var div = {tag: "div", attrs: {onclick: listenerDiv}}
+		var div = m("div", {onclick: listenerDiv})
-		var parent = {tag: "div", attrs: {onclick: listenerParent}, children: [div]}
+		var parent = m("div", {onclick: listenerParent}, div)
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
 
-		render(root, [parent])
+		render(root, parent)
 		div.dom.dispatchEvent(e)
 
 		o(spyDiv.calls.length).equals(1)
@@ -112,12 +113,12 @@ o.spec("event", function() {
 		var spyParent = eventSpy()
 		var listenerDiv = {handleEvent: spyDiv}
 		var listenerParent = {handleEvent: spyParent}
-		var div = {tag: "div", attrs: {onclick: listenerDiv}}
+		var div = m("div", {onclick: listenerDiv})
-		var parent = {tag: "div", attrs: {onclick: listenerParent}, children: [div]}
+		var parent = m("div", {onclick: listenerParent}, div)
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
 
-		render(root, [parent])
+		render(root, parent)
 		div.dom.dispatchEvent(e)
 
 		o(spyDiv.calls.length).equals(1)
@@ -138,11 +139,11 @@ o.spec("event", function() {
 
 	o("removes event", function() {
 		var spy = o.spy()
-		var vnode = {tag: "a", attrs: {onclick: spy}}
+		var vnode = m("a", {onclick: spy})
-		var updated = {tag: "a", attrs: {}}
+		var updated = m("a")
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
@@ -153,11 +154,11 @@ o.spec("event", function() {
 
 	o("removes event when null", function() {
 		var spy = o.spy()
-		var vnode = {tag: "a", attrs: {onclick: spy}}
+		var vnode = m("a", {onclick: spy})
-		var updated = {tag: "a", attrs: {onclick: null}}
+		var updated = m("a", {onclick: null})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
@@ -168,11 +169,11 @@ o.spec("event", function() {
 
 	o("removes event when undefined", function() {
 		var spy = o.spy()
-		var vnode = {tag: "a", attrs: {onclick: spy}}
+		var vnode = m("a", {onclick: spy})
-		var updated = {tag: "a", attrs: {onclick: undefined}}
+		var updated = m("a", {onclick: undefined})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
@@ -183,11 +184,11 @@ o.spec("event", function() {
 
 	o("removes event added via addEventListener when null", function() {
 		var spy = o.spy()
-		var vnode = {tag: "a", attrs: {ontouchstart: spy}}
+		var vnode = m("a", {ontouchstart: spy})
-		var updated = {tag: "a", attrs: {ontouchstart: null}}
+		var updated = m("a", {ontouchstart: null})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		var e = $window.document.createEvent("TouchEvents")
 		e.initEvent("touchstart", true, true)
@@ -198,11 +199,11 @@ o.spec("event", function() {
 
 	o("removes event added via addEventListener", function() {
 		var spy = o.spy()
-		var vnode = {tag: "a", attrs: {ontouchstart: spy}}
+		var vnode = m("a", {ontouchstart: spy})
-		var updated = {tag: "a", attrs: {}}
+		var updated = m("a")
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		var e = $window.document.createEvent("TouchEvents")
 		e.initEvent("touchstart", true, true)
@@ -213,11 +214,11 @@ o.spec("event", function() {
 
 	o("removes event added via addEventListener when undefined", function() {
 		var spy = o.spy()
-		var vnode = {tag: "a", attrs: {ontouchstart: spy}}
+		var vnode = m("a", {ontouchstart: spy})
-		var updated = {tag: "a", attrs: {ontouchstart: undefined}}
+		var updated = m("a", {ontouchstart: undefined})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		var e = $window.document.createEvent("TouchEvents")
 		e.initEvent("touchstart", true, true)
@@ -229,11 +230,11 @@ o.spec("event", function() {
 	o("removes EventListener object", function() {
 		var spy = o.spy()
 		var listener = {handleEvent: spy}
-		var vnode = {tag: "a", attrs: {onclick: listener}}
+		var vnode = m("a", {onclick: listener})
-		var updated = {tag: "a", attrs: {}}
+		var updated = m("a")
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
@@ -245,11 +246,11 @@ o.spec("event", function() {
 	o("removes EventListener object when null", function() {
 		var spy = o.spy()
 		var listener = {handleEvent: spy}
-		var vnode = {tag: "a", attrs: {onclick: listener}}
+		var vnode = m("a", {onclick: listener})
-		var updated = {tag: "a", attrs: {onclick: null}}
+		var updated = m("a", {onclick: null})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
@@ -261,11 +262,11 @@ o.spec("event", function() {
 	o("removes EventListener object when undefined", function() {
 		var spy = o.spy()
 		var listener = {handleEvent: spy}
-		var vnode = {tag: "a", attrs: {onclick: listener}}
+		var vnode = m("a", {onclick: listener})
-		var updated = {tag: "a", attrs: {onclick: undefined}}
+		var updated = m("a", {onclick: undefined})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
@@ -276,13 +277,13 @@ o.spec("event", function() {
 
 	o("fires onclick only once after redraw", function() {
 		var spy = o.spy()
-		var div = {tag: "div", attrs: {id: "a", onclick: spy}}
+		var div = m("div", {id: "a", onclick: spy})
-		var updated = {tag: "div", attrs: {id: "b", onclick: spy}}
+		var updated = m("div", {id: "b", onclick: spy})
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
 
-		render(root, [div])
+		render(root, div)
-		render(root, [updated])
+		render(root, updated)
 		div.dom.dispatchEvent(e)
 
 		o(spy.callCount).equals(1)
@@ -299,13 +300,13 @@ o.spec("event", function() {
 	o("fires click EventListener object only once after redraw", function() {
 		var spy = o.spy()
 		var listener = {handleEvent: spy}
-		var div = {tag: "div", attrs: {id: "a", onclick: listener}}
+		var div = m("div", {id: "a", onclick: listener})
-		var updated = {tag: "div", attrs: {id: "b", onclick: listener}}
+		var updated = m("div", {id: "b", onclick: listener})
 		var e = $window.document.createEvent("MouseEvents")
 		e.initEvent("click", true, true)
 
-		render(root, [div])
+		render(root, div)
-		render(root, [updated])
+		render(root, updated)
 		div.dom.dispatchEvent(e)
 
 		o(spy.callCount).equals(1)
@@ -321,11 +322,11 @@ o.spec("event", function() {
 
 	o("handles ontransitionend", function() {
 		var spy = o.spy()
-		var div = {tag: "div", attrs: {ontransitionend: spy}}
+		var div = m("div", {ontransitionend: spy})
 		var e = $window.document.createEvent("HTMLEvents")
 		e.initEvent("transitionend", true, true)
 
-		render(root, [div])
+		render(root, div)
 		div.dom.dispatchEvent(e)
 
 		o(spy.callCount).equals(1)
@@ -340,11 +341,11 @@ o.spec("event", function() {
 	o("handles transitionend EventListener object", function() {
 		var spy = o.spy()
 		var listener = {handleEvent: spy}
-		var div = {tag: "div", attrs: {ontransitionend: listener}}
+		var div = m("div", {ontransitionend: listener})
 		var e = $window.document.createEvent("HTMLEvents")
 		e.initEvent("transitionend", true, true)
 
-		render(root, [div])
+		render(root, div)
 		div.dom.dispatchEvent(e)
 
 		o(spy.callCount).equals(1)
@@ -357,7 +358,7 @@ o.spec("event", function() {
 	})
 
 	o("handles changed spy", function() {
-		var div1 = {tag: "div", attrs: {ontransitionend: function() {}}}
+		var div1 = m("div", {ontransitionend: function() {}})
 
 		reallyRender(root, [div1], redraw)
 		var e = $window.document.createEvent("HTMLEvents")
@@ -369,7 +370,7 @@ o.spec("event", function() {
 		o(redraw.args.length).equals(0)
 
 		var replacementRedraw = o.spy()
-		var div2 = {tag: "div", attrs: {ontransitionend: function() {}}}
+		var div2 = m("div", {ontransitionend: function() {}})
 
 		reallyRender(root, [div2], replacementRedraw)
 		var e = $window.document.createEvent("HTMLEvents")

render/tests/test-fragment.js

@@ -14,8 +14,8 @@ function runTest(name, fragment) {
 	o.spec(name, function() {
 		o("works", function() {
 			var attrs = {foo: 5}
-			var child = {tag: "p"}
+			var child = m("p")
-			var frag = fragment(attrs, [child])
+			var frag = fragment(attrs, child)
 
 			o(frag.tag).equals("[")
 

render/tests/test-hyperscript.js

@@ -372,22 +372,22 @@ o.spec("hyperscript", function() {
 		o("handles string single child", function() {
 			var vnode = m("div", {}, ["a"])
 
-			o(vnode.text).equals("a")
+			o(vnode.children[0].children).equals("a")
 		})
 		o("handles falsy string single child", function() {
 			var vnode = m("div", {}, [""])
 
-			o(vnode.text).equals("")
+			o(vnode.children[0].children).equals("")
 		})
 		o("handles number single child", function() {
 			var vnode = m("div", {}, [1])
 
-			o(vnode.text).equals("1")
+			o(vnode.children[0].children).equals("1")
 		})
 		o("handles falsy number single child", function() {
 			var vnode = m("div", {}, [0])
 
-			o(vnode.text).equals("0")
+			o(vnode.children[0].children).equals("0")
 		})
 		o("handles boolean single child", function() {
 			var vnode = m("div", {}, [true])
@@ -438,7 +438,7 @@ o.spec("hyperscript", function() {
 		o("handles falsy number single child without attrs", function() {
 			var vnode = m("div", 0)
 
-			o(vnode.text).equals("0")
+			o(vnode.children[0].children).equals("0")
 		})
 	})
 	o.spec("permutations", function() {
@@ -495,25 +495,25 @@ o.spec("hyperscript", function() {
 			var vnode = m("div", {a: "b"}, ["c"])
 
 			o(vnode.attrs.a).equals("b")
-			o(vnode.text).equals("c")
+			o(vnode.children[0].children).equals("c")
 		})
 		o("handles attr and single falsy string text child", function() {
 			var vnode = m("div", {a: "b"}, [""])
 
 			o(vnode.attrs.a).equals("b")
-			o(vnode.text).equals("")
+			o(vnode.children[0].children).equals("")
 		})
 		o("handles attr and single number text child", function() {
 			var vnode = m("div", {a: "b"}, [1])
 
 			o(vnode.attrs.a).equals("b")
-			o(vnode.text).equals("1")
+			o(vnode.children[0].children).equals("1")
 		})
 		o("handles attr and single falsy number text child", function() {
 			var vnode = m("div", {a: "b"}, [0])
 
 			o(vnode.attrs.a).equals("b")
-			o(vnode.text).equals("0")
+			o(vnode.children[0].children).equals("0")
 		})
 		o("handles attr and single boolean text child", function() {
 			var vnode = m("div", {a: "b"}, [true])
@@ -525,7 +525,7 @@ o.spec("hyperscript", function() {
 			var vnode = m("div", {a: "b"}, [0])
 
 			o(vnode.attrs.a).equals("b")
-			o(vnode.text).equals("0")
+			o(vnode.children[0].children).equals("0")
 		})
 		o("handles attr and single false boolean text child", function() {
 			var vnode = m("div", {a: "b"}, [false])
@@ -537,7 +537,7 @@ o.spec("hyperscript", function() {
 			var vnode = m("div", {a: "b"}, "c")
 
 			o(vnode.attrs.a).equals("b")
-			o(vnode.text).equals("c")
+			o(vnode.children[0].children).equals("c")
 		})
 		o("handles attr and text children unwrapped", function() {
 			var vnode = m("div", {a: "b"}, "c", "d")

render/tests/test-input.js

@@ -3,6 +3,7 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
 
 o.spec("form inputs", function() {
 	var $window, root, render
@@ -19,9 +20,9 @@ o.spec("form inputs", function() {
 
 	o.spec("input", function() {
 		o("maintains focus after move", function() {
-			var input = {tag: "input", key: 1}
+			var input = m("input", {key: 1})
-			var a = {tag: "a", key: 2}
+			var a = m("a", {key: 2})
-			var b = {tag: "b", key: 3}
+			var b = m("b", {key: 3})
 
 			render(root, [input, a, b])
 			input.dom.focus()
@@ -31,20 +32,20 @@ o.spec("form inputs", function() {
 		})
 
 		o("maintains focus when changed manually in hook", function() {
-			var input = {tag: "input", attrs: {oncreate: function() {
+			var input = m("input", {oncreate: function() {
 				input.dom.focus();
-			}}};
+			}});
 
-			render(root, [input])
+			render(root, input)
 
 			o($window.document.activeElement).equals(input.dom)
 		})
 
 		o("syncs input value if DOM value differs from vdom value", function() {
-			var input = {tag: "input", attrs: {value: "aaa", oninput: function() {}}}
+			var input = m("input", {value: "aaa", oninput: function() {}})
-			var updated = {tag: "input", attrs: {value: "aaa", oninput: function() {}}}
+			var updated = m("input", {value: "aaa", oninput: function() {}})
 
-			render(root, [input])
+			render(root, input)
 
 			//simulate user typing
 			var e = $window.document.createEvent("KeyboardEvent")
@@ -54,26 +55,26 @@ o.spec("form inputs", function() {
 			input.dom.dispatchEvent(e)
 
 			//re-render may use same vdom value as previous render call
-			render(root, [updated])
+			render(root, updated)
 
 			o(updated.dom.value).equals("aaa")
 		})
 
 		o("clear element value if vdom value is set to undefined (aka removed)", function() {
-			var input = {tag: "input", attrs: {value: "aaa", oninput: function() {}}}
+			var input = m("input", {value: "aaa", oninput: function() {}})
-			var updated = {tag: "input", attrs: {value: undefined, oninput: function() {}}}
+			var updated = m("input", {value: undefined, oninput: function() {}})
 
-			render(root, [input])
+			render(root, input)
-			render(root, [updated])
+			render(root, updated)
 
 			o(updated.dom.value).equals("")
 		})
 
 		o("syncs input checked attribute if DOM value differs from vdom value", function() {
-			var input = {tag: "input", attrs: {type: "checkbox", checked: true, onclick: function() {}}}
+			var input = m("input", {type: "checkbox", checked: true, onclick: function() {}})
-			var updated = {tag: "input", attrs: {type: "checkbox", checked: true, onclick: function() {}}}
+			var updated = m("input", {type: "checkbox", checked: true, onclick: function() {}})
 
-			render(root, [input])
+			render(root, input)
 
 			//simulate user clicking checkbox
 			var e = $window.document.createEvent("MouseEvents")
@@ -82,24 +83,24 @@ o.spec("form inputs", function() {
 			input.dom.dispatchEvent(e)
 
 			//re-render may use same vdom value as previous render call
-			render(root, [updated])
+			render(root, updated)
 
 			o(updated.dom.checked).equals(true)
 		})
 
 		o("syncs file input value attribute if DOM value differs from vdom value and is empty", function() {
-			var input = {tag: "input", attrs: {type: "file", value: "", onclick: function() {}}}
+			var input = m("input", {type: "file", value: "", onclick: function() {}})
-			var updated = {tag: "input", attrs: {type: "file", value: "", onclick: function() {}}}
+			var updated = m("input", {type: "file", value: "", onclick: function() {}})
 			var spy = o.spy()
 			var error = console.error
 
-			render(root, [input])
+			render(root, input)
 
 			input.dom.value = "test.png"
 
 			try {
 				console.error = spy
-				render(root, [updated])
+				render(root, updated)
 			} finally {
 				console.error = error
 			}
@@ -109,18 +110,18 @@ o.spec("form inputs", function() {
 		})
 
 		o("warns and ignores file input value attribute if DOM value differs from vdom value and is non-empty", function() {
-			var input = {tag: "input", attrs: {type: "file", value: "", onclick: function() {}}}
+			var input = m("input", {type: "file", value: "", onclick: function() {}})
-			var updated = {tag: "input", attrs: {type: "file", value: "other.png", onclick: function() {}}}
+			var updated = m("input", {type: "file", value: "other.png", onclick: function() {}})
 			var spy = o.spy()
 			var error = console.error
 
-			render(root, [input])
+			render(root, input)
 
 			input.dom.value = "test.png"
 
 			try {
 				console.error = spy
-				render(root, [updated])
+				render(root, updated)
 			} finally {
 				console.error = error
 			}
@@ -134,13 +135,13 @@ o.spec("form inputs", function() {
 			var render = vdom($window)
 			var root = $window.document.createElement("div")
 			$window.document.body.appendChild(root)
-			var input = {tag: "input", attrs: {type: "file", value: "", onclick: function() {}}}
+			var input = m("input", {type: "file", value: "", onclick: function() {}})
-			var updated1 = {tag: "input", attrs: {type: "file", value: "test.png", onclick: function() {}}}
+			var updated1 = m("input", {type: "file", value: "test.png", onclick: function() {}})
-			var updated2 = {tag: "input", attrs: {type: "file", value: "test.png", onclick: function() {}}}
+			var updated2 = m("input", {type: "file", value: "test.png", onclick: function() {}})
 			var spy = o.spy()
 			var error = console.error
 
-			render(root, [input])
+			render(root, input)
 
 			// Verify our assumptions about the outer element state
 			o($window.__getSpies(input.dom).valueSetter.callCount).equals(0)
@@ -149,7 +150,7 @@ o.spec("form inputs", function() {
 
 			try {
 				console.error = spy
-				render(root, [updated1])
+				render(root, updated1)
 			} finally {
 				console.error = error
 			}
@@ -160,7 +161,7 @@ o.spec("form inputs", function() {
 
 			try {
 				console.error = spy
-				render(root, [updated2])
+				render(root, updated2)
 			} finally {
 				console.error = error
 			}
@@ -173,84 +174,84 @@ o.spec("form inputs", function() {
 
 	o.spec("select", function() {
 		o("select works without attributes", function() {
-			var select = {tag: "select", children: [
+			var select = m("select", 
-				{tag: "option", attrs: {value: "a"}, text: "aaa"},
+				m("option", {value: "a"}, "aaa"),
-			]}
+			)
 
-			render(root, [select])
+			render(root, select)
 
 			o(select.dom.value).equals("a")
 			o(select.dom.selectedIndex).equals(0)
 		})
 
 		o("select option can have empty string value", function() {
-			var select = {tag: "select", children :[
+			var select = m("select",
-				{tag: "option", attrs: {value: ""}, text: "aaa"}
+				m("option", {value: ""}, "aaa")
-			]}
+			)
 
-			render(root, [select])
+			render(root, select)
 
 			o(select.dom.firstChild.value).equals("")
 		})
 
 		o("option value defaults to textContent unless explicitly set", function() {
-			var select = {tag: "select", children :[
+			var select = m("select",
-				{tag: "option", text: "aaa"}
+				m("option", "aaa")
-			]}
+			)
 
-			render(root, [select])
+			render(root, select)
 
 			o(select.dom.firstChild.value).equals("aaa")
 			o(select.dom.value).equals("aaa")
 
 			//test that value changes when content changes
-			select = {tag: "select", children :[
+			select = m("select",
-				{tag: "option", text: "bbb"}
+				m("option", "bbb")
-			]}
+			)
 
-			render(root, [select])
+			render(root, select)
 
 			o(select.dom.firstChild.value).equals("bbb")
 			o(select.dom.value).equals("bbb")
 
 			//test that value can be set to "" in subsequent render
-			select = {tag: "select", children :[
+			select = m("select",
-				{tag: "option", attrs: {value: ""}, text: "aaa"}
+				m("option", {value: ""}, "aaa")
-			]}
+			)
 
-			render(root, [select])
+			render(root, select)
 
 			o(select.dom.firstChild.value).equals("")
 			o(select.dom.value).equals("")
 
 			//test that value reverts to textContent when value omitted
-			select = {tag: "select", children :[
+			select = m("select",
-				{tag: "option", text: "aaa"}
+				m("option", "aaa")
-			]}
+			)
 
-			render(root, [select])
+			render(root, select)
 
 			o(select.dom.firstChild.value).equals("aaa")
 			o(select.dom.value).equals("aaa")
 		})
 
 		o("select yields invalid value without children", function() {
-			var select = {tag: "select", attrs: {value: "a"}}
+			var select = m("select", {value: "a"})
 
-			render(root, [select])
+			render(root, select)
 
 			o(select.dom.value).equals("")
 			o(select.dom.selectedIndex).equals(-1)
 		})
 
 		o("select value is set correctly on first render", function() {
-			var select = {tag: "select", attrs: {value: "b"}, children: [
+			var select = m("select", {value: "b"},
-				{tag: "option", attrs: {value: "a"}, text: "aaa"},
+				m("option", {value: "a"}, "aaa"),
-				{tag: "option", attrs: {value: "b"}, text: "bbb"},
+				m("option", {value: "b"}, "bbb"),
-				{tag: "option", attrs: {value: "c"}, text: "ccc"},
+				m("option", {value: "c"}, "ccc"),
-			]}
+			)
 
-			render(root, [select])
+			render(root, select)
 
 			o(select.dom.value).equals("b")
 			o(select.dom.selectedIndex).equals(1)
@@ -258,21 +259,21 @@ o.spec("form inputs", function() {
 
 		o("syncs select value if DOM value differs from vdom value", function() {
 			function makeSelect() {
-				return {tag: "select", attrs: {value: "b"}, children: [
+				return m("select", {value: "b"},
-					{tag: "option", attrs: {value: "a"}, text: "aaa"},
+					m("option", {value: "a"}, "aaa"),
-					{tag: "option", attrs: {value: "b"}, text: "bbb"},
+					m("option", {value: "b"}, "bbb"),
-					{tag: "option", attrs: {value: "c"}, text: "ccc"},
+					m("option", {value: "c"}, "ccc"),
-				]}
+				)
 			}
 
-			render(root, [makeSelect()])
+			render(root, makeSelect())
 
 			//simulate user selecting option
 			root.firstChild.value = "c"
 			root.firstChild.focus()
 
 			//re-render may use same vdom value as previous render call
-			render(root, [makeSelect()])
+			render(root, makeSelect())
 
 			o(root.firstChild.value).equals("b")
 			o(root.firstChild.selectedIndex).equals(1)
@@ -281,13 +282,13 @@ o.spec("form inputs", function() {
 
 	o.spec("textarea", function() {
 		o("updates after user input", function() {
-			render(root, [{tag: "textarea", text: "aaa"}])
+			render(root, m("textarea", "aaa"))
 
 			//simulate typing
 			root.firstChild.value = "bbb"
 
 			//re-render may occur after value attribute is touched
-			render(root, [{tag: "textarea", text: "ccc"}])
+			render(root, m("textarea", "ccc"))
 
 			o(root.firstChild.value).equals("ccc")
 			//FIXME should fail if fix is commented out

render/tests/test-onbeforeremove.js

@@ -6,6 +6,8 @@ var components = require("../../test-utils/components")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 var Promise = require("../../promise/promise")
+var m = require("../../render/hyperscript")
+m.fragment = require("../../render/fragment")
 
 o.spec("onbeforeremove", function() {
 	var $window, root, render
@@ -17,28 +19,28 @@ o.spec("onbeforeremove", function() {
 
 	o("does not call onbeforeremove when creating", function() {
 		var create = o.spy()
-		var vnode = {tag: "div", attrs: {onbeforeremove: create}}
+		var vnode = m("div", {onbeforeremove: create})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(create.callCount).equals(0)
 	})
 	o("does not call onbeforeremove when updating", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {onbeforeremove: create}}
+		var vnode = m("div", {onbeforeremove: create})
-		var updated = {tag: "div", attrs: {onbeforeremove: update}}
+		var updated = m("div", {onbeforeremove: update})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(0)
 	})
 	o("calls onbeforeremove when removing element", function(done) {
-		var vnode = {tag: "div", attrs: {onbeforeremove: remove}}
+		var vnode = m("div", {onbeforeremove: remove})
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
 
 		function remove(node) {
@@ -55,46 +57,10 @@ o.spec("onbeforeremove", function() {
 			})
 		}
 	})
-	o("calls onbeforeremove when removing text", function(done) {
-		var vnode = {tag: "#", attrs: {onbeforeremove: remove}, children: "a"}
-
-		render(root, [vnode])
-		render(root, [])
-
-		function remove(node) {
-			o(node).equals(vnode)
-			o(root.childNodes.length).equals(1)
-			o(root.firstChild).equals(vnode.dom)
-
-			callAsync(function() {
-				o(root.childNodes.length).equals(0)
-
-				done()
-			})
-		}
-	})
 	o("calls onbeforeremove when removing fragment", function(done) {
-		var vnode = {tag: "[", attrs: {onbeforeremove: remove}, children: [{tag: "div"}]}
+		var vnode = m.fragment({onbeforeremove: remove}, m("div"))
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [])
-
-		function remove(node) {
-			o(node).equals(vnode)
-			o(root.childNodes.length).equals(1)
-			o(root.firstChild).equals(vnode.dom)
-
-			callAsync(function() {
-				o(root.childNodes.length).equals(0)
-
-				done()
-			})
-		}
-	})
-	o("calls onbeforeremove when removing html", function(done) {
-		var vnode = {tag: "<", attrs: {onbeforeremove: remove}, children: "a"}
-
-		render(root, [vnode])
 		render(root, [])
 
 		function remove(node) {
@@ -111,9 +77,9 @@ o.spec("onbeforeremove", function() {
 	})
 	o("calls remove after onbeforeremove resolves", function(done) {
 		var spy = o.spy()
-		var vnode = {tag: "<", attrs: {onbeforeremove: remove, onremove: spy}, children: "a"}
+		var vnode = m.fragment({onbeforeremove: remove, onremove: spy}, "a")
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
 
 		function remove(node) {
@@ -131,28 +97,28 @@ o.spec("onbeforeremove", function() {
 	})
 	o("does not set onbeforeremove as an event handler", function() {
 		var remove = o.spy()
-		var vnode = {tag: "div", attrs: {onbeforeremove: remove}, children: []}
+		var vnode = m("div", {onbeforeremove: remove})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.onbeforeremove).equals(undefined)
 		o(vnode.dom.attributes["onbeforeremove"]).equals(undefined)
 	})
 	o("does not recycle when there's an onbeforeremove", function() {
 		var remove = function() {}
-		var vnode = {tag: "div", key: 1, attrs: {onbeforeremove: remove}}
+		var vnode = m("div", {key: 1, onbeforeremove: remove})
-		var updated = {tag: "div", key: 1, attrs: {onbeforeremove: remove}}
+		var updated = m("div", {key: 1, onbeforeremove: remove})
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
-		render(root, [updated])
+		render(root, updated)
 
 		o(vnode.dom).notEquals(updated.dom)
 	})
 	o("does not leave elements out of order during removal", function(done) {
 		var remove = function() {return Promise.resolve()}
-		var vnodes = [{tag: "div", key: 1, attrs: {onbeforeremove: remove}, text: "1"}, {tag: "div", key: 2, attrs: {onbeforeremove: remove}, text: "2"}]
+		var vnodes = [m("div", {key: 1, onbeforeremove: remove}, "1"), m("div", {key: 2, onbeforeremove: remove}, "2")]
-		var updated = {tag: "div", key: 2, attrs: {onbeforeremove: remove}, text: "2"}
+		var updated = m("div", {key: 2, onbeforeremove: remove}, "2")
 
 		render(root, vnodes)
 		render(root, updated)
@@ -178,7 +144,7 @@ o.spec("onbeforeremove", function() {
 					onremove: onremove,
 					view: function() {},
 				})
-				render(root, [{tag: component, attrs: {onbeforeremove: onbeforeremove, onremove: onremove}}])
+				render(root, m(component, {onbeforeremove: onbeforeremove, onremove: onremove}))
 				render(root, [])
 				callAsync(function() {
 					o(onremove.callCount).equals(2) // once for `tag`, once for `attrs`
@@ -194,7 +160,7 @@ o.spec("onbeforeremove", function() {
 					onremove: onremove,
 					view: view,
 				})
-				render(root, [{tag: component}])
+				render(root, m(component))
 				render(root, [])
 
 				o(onremove.callCount).equals(0)

render/tests/test-onbeforeupdate.js

@@ -4,6 +4,8 @@ var o = require("ospec")
 var components = require("../../test-utils/components")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.fragment = require("../../render/hyperscript")
 
 o.spec("onbeforeupdate", function() {
 	var $window, root, render
@@ -15,66 +17,44 @@ o.spec("onbeforeupdate", function() {
 
 	o("prevents update in element", function() {
 		var onbeforeupdate = function() {return false}
-		var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
+		var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
-		var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}}
+		var updated = m("div", {id: "b", onbeforeupdate: onbeforeupdate})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(root.firstChild.attributes["id"].value).equals("a")
 	})
 
-	o("prevents update in text", function() {
-		var onbeforeupdate = function() {return false}
-		var vnode = {tag: "#", attrs: {onbeforeupdate: onbeforeupdate}, children: "a"}
-		var updated = {tag: "#", attrs: {onbeforeupdate: onbeforeupdate}, children: "b"}
-
-		render(root, [vnode])
-		render(root, [updated])
-
-		o(root.firstChild.nodeValue).equals("a")
-	})
-
-	o("prevents update in html", function() {
-		var onbeforeupdate = function() {return false}
-		var vnode = {tag: "<", attrs: {onbeforeupdate: onbeforeupdate}, children: "a"}
-		var updated = {tag: "<", attrs: {onbeforeupdate: onbeforeupdate}, children: "b"}
-
-		render(root, [vnode])
-		render(root, [updated])
-
-		o(root.firstChild.nodeValue).equals("a")
-	})
-
 	o("prevents update in fragment", function() {
 		var onbeforeupdate = function() {return false}
-		var vnode = {tag: "[", attrs: {onbeforeupdate: onbeforeupdate}, children: [{tag: "#", children: "a"}]}
+		var vnode = m.fragment({onbeforeupdate: onbeforeupdate}, "a")
-		var updated = {tag: "[", attrs: {onbeforeupdate: onbeforeupdate}, children: [{tag: "#", children: "b"}]}
+		var updated = m.fragment({onbeforeupdate: onbeforeupdate}, "b")
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(root.firstChild.nodeValue).equals("a")
 	})
 
 	o("does not prevent update if returning true", function() {
 		var onbeforeupdate = function() {return true}
-		var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
+		var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
-		var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}}
+		var updated = m("div", {id: "b", onbeforeupdate: onbeforeupdate})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(root.firstChild.attributes["id"].value).equals("b")
 	})
 
 	o("accepts arguments for comparison", function() {
 		var count = 0
-		var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
+		var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
-		var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}}
+		var updated = m("div", {id: "b", onbeforeupdate: onbeforeupdate})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		function onbeforeupdate(vnode, old) {
 			count++
@@ -91,9 +71,9 @@ o.spec("onbeforeupdate", function() {
 
 	o("is not called on creation", function() {
 		var count = 0
-		var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
+		var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		function onbeforeupdate() {
 			count++
@@ -105,11 +85,11 @@ o.spec("onbeforeupdate", function() {
 
 	o("is called only once on update", function() {
 		var count = 0
-		var vnode = {tag: "div", attrs: {id: "a", onbeforeupdate: onbeforeupdate}}
+		var vnode = m("div", {id: "a", onbeforeupdate: onbeforeupdate})
-		var updated = {tag: "div", attrs: {id: "b", onbeforeupdate: onbeforeupdate}}
+		var updated = m("div", {id: "b", onbeforeupdate: onbeforeupdate})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		function onbeforeupdate() {
 			count++
@@ -121,9 +101,9 @@ o.spec("onbeforeupdate", function() {
 
 	o("doesn't fire on recycled nodes", function() {
 		var onbeforeupdate = o.spy()
-		var vnodes = [{tag: "div", key: 1}]
+		var vnodes = [m("div", {key: 1})]
 		var temp = []
-		var updated = [{tag: "div", key: 1, attrs: {onbeforeupdate: onbeforeupdate}}]
+		var updated = [m("div", {key: 1, onbeforeupdate: onbeforeupdate})]
 
 		render(root, vnodes)
 		render(root, temp)
@@ -142,14 +122,14 @@ o.spec("onbeforeupdate", function() {
 				var component = createComponent({
 					onbeforeupdate: function() {return false},
 					view: function(vnode) {
-						return {tag: "div", children: vnode.children}
+						return m("div", vnode.children)
 					},
 				})
-				var vnode = {tag: component, children: [{tag: "#", children: "a"}]}
+				var vnode = m(component, "a")
-				var updated = {tag: component, children: [{tag: "#", children: "b"}]}
+				var updated = m(component, "b")
 
-				render(root, [vnode])
+				render(root, vnode)
-				render(root, [updated])
+				render(root, updated)
 
 				o(root.firstChild.firstChild.nodeValue).equals("a")
 			})
@@ -158,14 +138,14 @@ o.spec("onbeforeupdate", function() {
 				var component = createComponent({
 					onbeforeupdate: function() {return false},
 					view: function(vnode) {
-						return {tag: "div", attrs: {id: vnode.attrs.id}}
+						return m("div", {id: vnode.attrs.id})
 					},
 				})
-				var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}}
+				var vnode = m(component, {id: "a", onbeforeupdate: function() {return false}})
-				var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}}
+				var updated = m(component, {id: "b", onbeforeupdate: function() {return false}})
 
-				render(root, [vnode])
+				render(root, vnode)
-				render(root, [updated])
+				render(root, updated)
 
 				o(root.firstChild.attributes["id"].value).equals("a")
 			})
@@ -174,14 +154,14 @@ o.spec("onbeforeupdate", function() {
 				var component = createComponent({
 					onbeforeupdate: function() {return true},
 					view: function(vnode) {
-						return {tag: "div", attrs: {id: vnode.attrs.id}}
+						return m("div", {id: vnode.attrs.id})
 					},
 				})
-				var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}}
+				var vnode = m(component, {id: "a", onbeforeupdate: function() {return true}})
-				var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}}
+				var updated = m(component, {id: "b", onbeforeupdate: function() {return true}})
 
-				render(root, [vnode])
+				render(root, vnode)
-				render(root, [updated])
+				render(root, updated)
 
 				o(root.firstChild.attributes["id"].value).equals("b")
 			})
@@ -190,14 +170,14 @@ o.spec("onbeforeupdate", function() {
 				var component = createComponent({
 					onbeforeupdate: function() {return false},
 					view: function(vnode) {
-						return {tag: "div", attrs: {id: vnode.attrs.id}}
+						return m("div", {id: vnode.attrs.id})
 					},
 				})
-				var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return true}}}
+				var vnode = m(component, {id: "a", onbeforeupdate: function() {return true}})
-				var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return true}}}
+				var updated = m(component, {id: "b", onbeforeupdate: function() {return true}})
 
-				render(root, [vnode])
+				render(root, vnode)
-				render(root, [updated])
+				render(root, updated)
 
 				o(root.firstChild.attributes["id"].value).equals("a")
 			})
@@ -206,14 +186,14 @@ o.spec("onbeforeupdate", function() {
 				var component = createComponent({
 					onbeforeupdate: function() {return true},
 					view: function(vnode) {
-						return {tag: "div", attrs: {id: vnode.attrs.id}}
+						return m("div", {id: vnode.attrs.id})
 					},
 				})
-				var vnode = {tag: component, attrs: {id: "a", onbeforeupdate: function() {return false}}}
+				var vnode = m(component, {id: "a", onbeforeupdate: function() {return false}})
-				var updated = {tag: component, attrs: {id: "b", onbeforeupdate: function() {return false}}}
+				var updated = m(component, {id: "b", onbeforeupdate: function() {return false}})
 
-				render(root, [vnode])
+				render(root, vnode)
-				render(root, [updated])
+				render(root, updated)
 
 				o(root.firstChild.attributes["id"].value).equals("a")
 			})
@@ -222,14 +202,14 @@ o.spec("onbeforeupdate", function() {
 				var component = createComponent({
 					onbeforeupdate: function() {return true},
 					view: function(vnode) {
-						return {tag: "div", attrs: vnode.attrs}
+						return m("div", vnode.attrs)
 					},
 				})
-				var vnode = {tag: component, attrs: {id: "a"}}
+				var vnode = m(component, {id: "a"})
-				var updated = {tag: component, attrs: {id: "b"}}
+				var updated = m(component, {id: "b"})
 
-				render(root, [vnode])
+				render(root, vnode)
-				render(root, [updated])
+				render(root, updated)
 
 				o(root.firstChild.attributes["id"].value).equals("b")
 			})
@@ -238,15 +218,15 @@ o.spec("onbeforeupdate", function() {
 				var component = createComponent({
 					onbeforeupdate: onbeforeupdate,
 					view: function(vnode) {
-						return {tag: "div", attrs: vnode.attrs}
+						return m("div", vnode.attrs)
 					},
 				})
 				var count = 0
-				var vnode = {tag: component, attrs: {id: "a"}}
+				var vnode = m(component, {id: "a"})
-				var updated = {tag: component, attrs: {id: "b"}}
+				var updated = m(component, {id: "b"})
 
-				render(root, [vnode])
+				render(root, vnode)
-				render(root, [updated])
+				render(root, updated)
 
 				function onbeforeupdate(vnode, old) {
 					count++
@@ -265,14 +245,14 @@ o.spec("onbeforeupdate", function() {
 				createComponent({
 					onbeforeupdate: onbeforeupdate,
 					view: function(vnode) {
-						return {tag: "div", attrs: vnode.attrs}
+						return m("div", vnode.attrs)
 					},
 				})
 
 				var count = 0
-				var vnode = {tag: "div", attrs: {id: "a"}}
+				var vnode = m("div", {id: "a"})
 
-				render(root, [vnode])
+				render(root, vnode)
 
 				function onbeforeupdate() {
 					count++
@@ -286,16 +266,16 @@ o.spec("onbeforeupdate", function() {
 				var component = createComponent({
 					onbeforeupdate: onbeforeupdate,
 					view: function(vnode) {
-						return {tag: "div", attrs: vnode.attrs}
+						return m("div", vnode.attrs)
 					},
 				})
 
 				var count = 0
-				var vnode = {tag: component, attrs: {id: "a"}}
+				var vnode = m(component, {id: "a"})
-				var updated = {tag: component, attrs: {id: "b"}}
+				var updated = m(component, {id: "b"})
 
-				render(root, [vnode])
+				render(root, vnode)
-				render(root, [updated])
+				render(root, updated)
 
 				function onbeforeupdate() {
 					count++
@@ -311,94 +291,94 @@ o.spec("onbeforeupdate", function() {
 	o.spec("after prevented update", function() {
 		o("old attributes are retained", function() {
 			render(root, [
-				{tag: "div", attrs: {"id": "foo", onbeforeupdate: function() { return true }}, children: []},
+				m("div", {"id": "foo", onbeforeupdate: function() { return true }})
 			])
 			render(root, [
-				{tag: "div", attrs: {"id": "bar", onbeforeupdate: function() { return false }}, children: []},
+				m("div", {"id": "bar", onbeforeupdate: function() { return false }})
 			])
 			render(root, [
-				{tag: "div", attrs: {"id": "bar", onbeforeupdate: function() { return true }}, children: []},
+				m("div", {"id": "bar", onbeforeupdate: function() { return true }})
 			])
 			o(root.firstChild.attributes["id"].value).equals("bar")
 		})
 		o("old children is retained", function() {
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
+				m("div", {onbeforeupdate: function() { return true }},
-					{tag: "div", attrs: {}, children: []}
+					m("div")
-				]},
+				),
-			])
+			)
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return false }}, children: [
+				m("div", {onbeforeupdate: function() { return false }},
-					{tag: "div", attrs: {}, children: [{tag: "div", attrs: {}, children: []}]}
+					m("div", m("div"))
-				]},
+				),
-			])
+			)
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
+				m("div", {onbeforeupdate: function() { return true }},
-					{tag: "div", attrs: {}, children: [{tag: "div", attrs: {}, children: []}]}
+					m("div", m("div"))
-				]},
+				),
-			])
+			)
 			o(root.firstChild.firstChild.childNodes.length).equals(1)
 		})
 		o("old text is retained", function() {
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
+				m("div", {onbeforeupdate: function() { return true }},
-					{tag: "div", attrs: {}, text: ""}
+					m("div")
-				]},
+				),
-			])
+			)
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return false }}, children: [
+				m("div", {onbeforeupdate: function() { return false }},
-					{tag: "div", attrs: {}, text: "foo"}
+					m("div", "foo")
-				]},
+				),
-			])
+			)
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
+				m("div", {onbeforeupdate: function() { return true }},
-					{tag: "div", attrs: {}, text: "foo"}
+					m("div", "foo")
-				]},
+				),
-			])
+			)
 			o(root.firstChild.firstChild.firstChild.nodeValue).equals("foo")
 		})
 		o("updating component children doesn't error", function() {
 			var Child = {
 				view(v) {
-					return {tag: "div", attrs: {}, children: [
+					return m("div",
-						v.attrs.foo ? {tag: "div", attrs: {}, children: []} : null
+						v.attrs.foo ? m("div") : null
-					]}
+					)
 				}
 			}
 
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
+				m("div", {onbeforeupdate: function() { return true }},
-					{tag: Child, attrs: {foo: false}, children: []},
+					m(Child, {foo: false})
-				]},
+				),
-			])
+			)
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return false }}, children: [
+				m("div", {onbeforeupdate: function() { return false }},
-					{tag: Child, attrs: {foo: false}, children: []},
+					m(Child, {foo: false})
-				]},
+				),
-			])
+			)
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
+				m("div", {onbeforeupdate: function() { return true }},
-					{tag: Child, attrs: {foo: true}, children: []},
+					m(Child, {foo: true})
-				]},
+				),
-			])
+			)
 			o(root.firstChild.firstChild.childNodes.length).equals(1)
 		})
 		o("adding dom children doesn't error", function() {
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
+				m("div", {onbeforeupdate: function() { return true }},
-					{tag: "div", attrs: {}, children: []}
+					m("div")
-				]},
+				),
-			])
+			)
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return false }}, children: [
+				m("div", {onbeforeupdate: function() { return false }},
-					{tag: "div", attrs: {}, children: []}
+					m("div")
-				]},
+				),
-			])
+			)
-			render(root, [
+			render(root, 
-				{tag: "div", attrs: {onbeforeupdate: function() { return true }}, children: [
+				m("div", {onbeforeupdate: function() { return true }},
-					{tag: "div", attrs: {}, children: [{tag: "div", attrs: {}, children: []}]}
+					m("div", m("div"))
-				]},
+				),
-			])
+			)
 			o(root.firstChild.firstChild.childNodes.length).equals(1)
 		})
 	})

render/tests/test-oncreate.js

@@ -3,6 +3,8 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.fragment = require("../../render/fragment")
 
 o.spec("oncreate", function() {
 	var $window, root, render
@@ -14,19 +16,9 @@ o.spec("oncreate", function() {
 
 	o("calls oncreate when creating element", function() {
 		var callback = o.spy()
-		var vnode = {tag: "div", attrs: {oncreate: callback}, state: {}}
+		var vnode = m("div", {oncreate: callback})
 
-		render(root, [vnode])
+		render(root, vnode)
-
-		o(callback.callCount).equals(1)
-		o(callback.this).equals(vnode.state)
-		o(callback.args[0]).equals(vnode)
-	})
-	o("calls oncreate when creating text", function() {
-		var callback = o.spy()
-		var vnode = {tag: "#", attrs: {oncreate: callback}, children: "a", state: {}}
-
-		render(root, [vnode])
 
 		o(callback.callCount).equals(1)
 		o(callback.this).equals(vnode.state)
@@ -34,19 +26,9 @@ o.spec("oncreate", function() {
 	})
 	o("calls oncreate when creating fragment", function() {
 		var callback = o.spy()
-		var vnode = {tag: "[", attrs: {oncreate: callback}, children: [], state: {}}
+		var vnode = m.fragment({oncreate: callback})
 
-		render(root, [vnode])
+		render(root, vnode)
-
-		o(callback.callCount).equals(1)
-		o(callback.this).equals(vnode.state)
-		o(callback.args[0]).equals(vnode)
-	})
-	o("calls oncreate when creating html", function() {
-		var callback = o.spy()
-		var vnode = {tag: "<", attrs: {oncreate: callback}, children: "a", state: {}}
-
-		render(root, [vnode])
 
 		o(callback.callCount).equals(1)
 		o(callback.this).equals(vnode.state)
@@ -55,11 +37,11 @@ o.spec("oncreate", function() {
 	o("calls oncreate when replacing keyed", function() {
 		var createDiv = o.spy()
 		var createA = o.spy()
-		var vnode = {tag: "div", key: 1, attrs: {oncreate: createDiv}, state: {}}
+		var vnode = m("div", {key: 1, oncreate: createDiv})
-		var updated = {tag: "a", key: 1, attrs: {oncreate: createA}, state: {}}
+		var updated = m("a", {key: 1, oncreate: createA})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(createDiv.callCount).equals(1)
 		o(createDiv.this).equals(vnode.state)
@@ -71,11 +53,11 @@ o.spec("oncreate", function() {
 	o("does not call oncreate when noop", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {oncreate: create}, state: {}}
+		var vnode = m("div", {oncreate: create})
-		var updated = {tag: "div", attrs: {oncreate: update}, state: {}}
+		var updated = m("div", {oncreate: update})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(1)
 		o(create.this).equals(vnode.state)
@@ -85,11 +67,11 @@ o.spec("oncreate", function() {
 	o("does not call oncreate when updating attr", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {oncreate: create}, state: {}}
+		var vnode = m("div", {oncreate: create})
-		var updated = {tag: "div", attrs: {oncreate: update, id: "a"}, state: {}}
+		var updated = m("div", {oncreate: update, id: "a"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(1)
 		o(create.this).equals(vnode.state)
@@ -99,11 +81,11 @@ o.spec("oncreate", function() {
 	o("does not call oncreate when updating children", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {oncreate: create}, children: [{tag: "a"}], state: {}}
+		var vnode = m("div", {oncreate: create}, m("a"))
-		var updated = {tag: "div", attrs: {oncreate: update}, children: [{tag: "b"}], state: {}}
+		var updated = m("div", {oncreate: update}, m("b"))
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(1)
 		o(create.this).equals(vnode.state)
@@ -113,10 +95,10 @@ o.spec("oncreate", function() {
 	o("does not call oncreate when updating keyed", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", key: 1, attrs: {oncreate: create}, state: {}}
+		var vnode = m("div", {key: 1, oncreate: create})
-		var otherVnode = {tag: "a", key: 2}
+		var otherVnode = m("a", {key: 2})
-		var updated = {tag: "div", key: 1, attrs: {oncreate: update}, state: {}}
+		var updated = m("div", {key: 1, oncreate: update})
-		var otherUpdated = {tag: "a", key: 2}
+		var otherUpdated = m("a", {key: 2})
 
 		render(root, [vnode, otherVnode])
 		render(root, [otherUpdated, updated])
@@ -128,9 +110,9 @@ o.spec("oncreate", function() {
 	})
 	o("does not call oncreate when removing", function() {
 		var create = o.spy()
-		var vnode = {tag: "div", attrs: {oncreate: create}, state: {}}
+		var vnode = m("div", {oncreate: create})
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
 
 		o(create.callCount).equals(1)
@@ -140,12 +122,12 @@ o.spec("oncreate", function() {
 	o("does not recycle when there's an oncreate", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", key: 1, attrs: {oncreate: create}, state: {}}
+		var vnode = m("div", {key: 1, oncreate: create})
-		var updated = {tag: "div", key: 1, attrs: {oncreate: update}, state: {}}
+		var updated = m("div", {key: 1, oncreate: update})
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
-		render(root, [updated])
+		render(root, updated)
 
 		o(vnode.dom).notEquals(updated.dom)
 		o(create.callCount).equals(1)
@@ -159,11 +141,11 @@ o.spec("oncreate", function() {
 		var create = o.spy()
 		var update = o.spy()
 		var callback = o.spy()
-		var vnode = {tag: "div", attrs: {onupdate: create}, children: [], state: {}}
+		var vnode = m("div", {onupdate: create})
-		var updated = {tag: "div", attrs: {onupdate: update}, children: [{tag: "a", attrs: {oncreate: callback}, state: {}}], state: {}}
+		var updated = m("div", {onupdate: update}, m("a", {oncreate: callback}))
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(1)
@@ -175,27 +157,27 @@ o.spec("oncreate", function() {
 	})
 	o("calls oncreate on unkeyed that falls into reverse list diff code path", function() {
 		var create = o.spy()
-		render(root, [{tag: "p"}, {tag: "div"}])
+		render(root, m("p", m("div")))
-		render(root, [{tag: "div", attrs: {oncreate: create}}, {tag: "div"}])
+		render(root, m("div", {oncreate: create}, m("div")))
 
 		o(create.callCount).equals(1)
 	})
 	o("calls oncreate on unkeyed that falls into forward list diff code path", function() {
 		var create = o.spy()
-		render(root, [{tag: "div"}, {tag: "p"}])
+		render(root, [m("div"), m("p")])
-		render(root, [{tag: "div"}, {tag: "div", attrs: {oncreate: create}}])
+		render(root, [m("div"), m("div", {oncreate: create})])
 
 		o(create.callCount).equals(1)
 	})
 	o("calls oncreate after full DOM creation", function() {
 		var created = false
-		var vnode = {tag: "div", children: [
+		var vnode = m("div",
-			{tag: "a", attrs: {oncreate: create}, children: [
+			m("a", {oncreate: create},
-				{tag: "b"}
+				m("b")
-			]}
+			)
-		]}
+		)
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		function create(vnode) {
 			created = true
@@ -207,18 +189,18 @@ o.spec("oncreate", function() {
 	})
 	o("does not set oncreate as an event handler", function() {
 		var create = o.spy()
-		var vnode = {tag: "div", attrs: {oncreate: create}, children: []}
+		var vnode = m("div", {oncreate: create})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.oncreate).equals(undefined)
 		o(vnode.dom.attributes["oncreate"]).equals(undefined)
 	})
 	o("calls oncreate on recycle", function() {
 		var create = o.spy()
-		var vnodes = [{tag: "div", key: 1, attrs: {oncreate: create}}]
+		var vnodes = m("div", {key: 1, oncreate: create})
 		var temp = []
-		var updated = [{tag: "div", key: 1, attrs: {oncreate: create}}]
+		var updated = m("div", {key: 1, oncreate: create})
 
 		render(root, vnodes)
 		render(root, temp)

render/tests/test-oninit.js

@@ -3,6 +3,8 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.fragment = require("../../render/hyperscript")
 
 o.spec("oninit", function() {
 	var $window, root, render
@@ -14,19 +16,9 @@ o.spec("oninit", function() {
 
 	o("calls oninit when creating element", function() {
 		var callback = o.spy()
-		var vnode = {tag: "div", attrs: {oninit: callback}, state: {}}
+		var vnode = m("div", {oninit: callback})
 
-		render(root, [vnode])
+		render(root, vnode)
-
-		o(callback.callCount).equals(1)
-		o(callback.this).equals(vnode.state)
-		o(callback.args[0]).equals(vnode)
-	})
-	o("calls oninit when creating text", function() {
-		var callback = o.spy()
-		var vnode = {tag: "#", attrs: {oninit: callback}, children: "a", state: {}}
-
-		render(root, [vnode])
 
 		o(callback.callCount).equals(1)
 		o(callback.this).equals(vnode.state)
@@ -34,19 +26,9 @@ o.spec("oninit", function() {
 	})
 	o("calls oninit when creating fragment", function() {
 		var callback = o.spy()
-		var vnode = {tag: "[", attrs: {oninit: callback}, children: [], state: {}}
+		var vnode = m.fragment({oninit: callback})
 
-		render(root, [vnode])
+		render(root, vnode)
-
-		o(callback.callCount).equals(1)
-		o(callback.this).equals(vnode.state)
-		o(callback.args[0]).equals(vnode)
-	})
-	o("calls oninit when creating html", function() {
-		var callback = o.spy()
-		var vnode = {tag: "<", attrs: {oninit: callback}, children: "a", state: {}}
-
-		render(root, [vnode])
 
 		o(callback.callCount).equals(1)
 		o(callback.this).equals(vnode.state)
@@ -55,11 +37,11 @@ o.spec("oninit", function() {
 	o("calls oninit when replacing keyed", function() {
 		var createDiv = o.spy()
 		var createA = o.spy()
-		var vnode = {tag: "div", key: 1, attrs: {oninit: createDiv}, state: {}}
+		var vnode = m("div", {key: 1, oninit: createDiv})
-		var updated = {tag: "a", key: 1, attrs: {oninit: createA}, state: {}}
+		var updated = m("a", {key: 1, oninit: createA})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(createDiv.callCount).equals(1)
 		o(createDiv.this).equals(vnode.state)
@@ -71,11 +53,11 @@ o.spec("oninit", function() {
 	o("does not call oninit when noop", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {oninit: create}, state: {}}
+		var vnode = m("div", {oninit: create})
-		var updated = {tag: "div", attrs: {oninit: update}, state: {}}
+		var updated = m("div", {oninit: update})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(1)
 		o(create.this).equals(vnode.state)
@@ -85,11 +67,11 @@ o.spec("oninit", function() {
 	o("does not call oninit when updating attr", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {oninit: create}, state: {}}
+		var vnode = m("div", {oninit: create})
-		var updated = {tag: "div", attrs: {oninit: update, id: "a"}, state: {}}
+		var updated = m("div", {oninit: update, id: "a"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(1)
 		o(create.this).equals(vnode.state)
@@ -99,11 +81,11 @@ o.spec("oninit", function() {
 	o("does not call oninit when updating children", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {oninit: create}, children: [{tag: "a"}], state: {}}
+		var vnode = m("div", {oninit: create}, m("a"))
-		var updated = {tag: "div", attrs: {oninit: update}, children: [{tag: "b"}], state: {}}
+		var updated = m("div", {oninit: update}, m("b"))
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(1)
 		o(create.this).equals(vnode.state)
@@ -113,10 +95,10 @@ o.spec("oninit", function() {
 	o("does not call oninit when updating keyed", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", key: 1, attrs: {oninit: create}, state: {}}
+		var vnode = m("div", {key: 1, oninit: create})
-		var otherVnode = {tag: "a", key: 2}
+		var otherVnode = m("a", {key: 2})
-		var updated = {tag: "div", key: 1, attrs: {oninit: update}, state: {}}
+		var updated = m("div", {key: 1, oninit: update})
-		var otherUpdated = {tag: "a", key: 2}
+		var otherUpdated = m("a", {key: 2})
 
 		render(root, [vnode, otherVnode])
 		render(root, [otherUpdated, updated])
@@ -128,9 +110,9 @@ o.spec("oninit", function() {
 	})
 	o("does not call oninit when removing", function() {
 		var create = o.spy()
-		var vnode = {tag: "div", attrs: {oninit: create}, state: {}}
+		var vnode = m("div", {oninit: create})
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
 
 		o(create.callCount).equals(1)
@@ -140,12 +122,12 @@ o.spec("oninit", function() {
 	o("calls oninit when recycling", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", key: 1, attrs: {oninit: create}, state: {}}
+		var vnode = m("div", {key: 1, oninit: create})
-		var updated = {tag: "div", key: 1, attrs: {oninit: update}, state: {}}
+		var updated = m("div", {key: 1, oninit: update})
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(1)
 		o(create.this).equals(vnode.state)
@@ -158,11 +140,11 @@ o.spec("oninit", function() {
 		var create = o.spy()
 		var update = o.spy()
 		var callback = o.spy()
-		var vnode = {tag: "div", attrs: {onupdate: create}, children: [], state: {}}
+		var vnode = m("div", {onupdate: create})
-		var updated = {tag: "div", attrs: {onupdate: update}, children: [{tag: "a", attrs: {oninit: callback}, state: {}}], state: {}}
+		var updated = m("div", {onupdate: update}, m("a", {oninit: callback}))
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(1)
@@ -174,13 +156,13 @@ o.spec("oninit", function() {
 	})
 	o("calls oninit before full DOM creation", function() {
 		var called = false
-		var vnode = {tag: "div", children: [
+		var vnode = m("div",
-			{tag: "a", attrs: {oninit: create}, children: [
+			m("a", {oninit: create},
-				{tag: "b"}
+				m("b")
-			]}
+			)
-		]}
+		)
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		function create(vnode) {
 			called = true
@@ -192,9 +174,9 @@ o.spec("oninit", function() {
 	})
 	o("does not set oninit as an event handler", function() {
 		var create = o.spy()
-		var vnode = {tag: "div", attrs: {oninit: create}, children: []}
+		var vnode = m("div", {oninit: create})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.oninit).equals(undefined)
 		o(vnode.dom.attributes["oninit"]).equals(undefined)
@@ -206,16 +188,16 @@ o.spec("oninit", function() {
 		var oninit3 = o.spy()
 
 		render(root, [
-			{tag: "p", key: 1, attrs: {oninit: oninit1}},
+			m("p", {key: 1, oninit: oninit1}),
-			{tag: "p", key: 2, attrs: {oninit: oninit2}},
+			m("p", {key: 2, oninit: oninit2}),
-			{tag: "p", key: 3, attrs: {oninit: oninit3}},
+			m("p", {key: 3, oninit: oninit3}),
 		])
 		render(root, [
-			{tag: "p", key: 1, attrs: {oninit: oninit1}},
+			m("p", {key: 1, oninit: oninit1}),
-			{tag: "p", key: 3, attrs: {oninit: oninit3}},
+			m("p", {key: 3, oninit: oninit3}),
 		])
 		render(root, [
-			{tag: "p", key: 3, attrs: {oninit: oninit3}},
+			m("p", {key: 3, oninit: oninit3}),
 		])
 
 		o(oninit1.callCount).equals(1)

render/tests/test-onremove.js

@@ -5,6 +5,7 @@ var components = require("../../test-utils/components")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 var m = require("../../render/hyperscript")
+m.fragment = require("../../render/fragment")
 
 o.spec("onremove", function() {
 	var $window, root, render
@@ -17,42 +18,31 @@ o.spec("onremove", function() {
 	o("does not call onremove when creating", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {onremove: create}}
+		var vnode = m("div", {onremove: create})
-		var updated = {tag: "div", attrs: {onremove: update}}
+		var updated = m("div", {onremove: update})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 	})
 	o("does not call onremove when updating", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {onremove: create}}
+		var vnode = m("div", {onremove: create})
-		var updated = {tag: "div", attrs: {onremove: update}}
+		var updated = m("div", {onremove: update})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(0)
 	})
 	o("calls onremove when removing element", function() {
 		var remove = o.spy()
-		var vnode = {tag: "div", attrs: {onremove: remove}, state: {}}
+		var vnode = m("div", {onremove: remove})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [])
-
-		o(remove.callCount).equals(1)
-		o(remove.this).equals(vnode.state)
-		o(remove.args[0]).equals(vnode)
-	})
-	o("calls onremove when removing text", function() {
-		var remove = o.spy()
-		var vnode = {tag: "#", attrs: {onremove: remove}, children: "a", state: {}}
-
-		render(root, [vnode])
 		render(root, [])
 
 		o(remove.callCount).equals(1)
@@ -61,20 +51,9 @@ o.spec("onremove", function() {
 	})
 	o("calls onremove when removing fragment", function() {
 		var remove = o.spy()
-		var vnode = {tag: "[", attrs: {onremove: remove}, children: [], state: {}}
+		var vnode = m.fragment({onremove: remove})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [])
-
-		o(remove.callCount).equals(1)
-		o(remove.this).equals(vnode.state)
-		o(remove.args[0]).equals(vnode)
-	})
-	o("calls onremove when removing html", function() {
-		var remove = o.spy()
-		var vnode = {tag: "<", attrs: {onremove: remove}, children: "a", state: {}}
-
-		render(root, [vnode])
 		render(root, [])
 
 		o(remove.callCount).equals(1)
@@ -83,9 +62,9 @@ o.spec("onremove", function() {
 	})
 	o("does not set onremove as an event handler", function() {
 		var remove = o.spy()
-		var vnode = {tag: "div", attrs: {onremove: remove}, children: []}
+		var vnode = m("div", {onremove: remove})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.onremove).equals(undefined)
 		o(vnode.dom.attributes["onremove"]).equals(undefined)
@@ -93,9 +72,9 @@ o.spec("onremove", function() {
 	})
 	o("calls onremove on keyed nodes", function() {
 		var remove = o.spy()
-		var vnodes = [{tag: "div", key: 1}]
+		var vnodes = [m("div", {key: 1})]
-		var temp = [{tag: "div", key: 2, attrs: {onremove: remove}}]
+		var temp = [m("div", {key: 2, onremove: remove})]
-		var updated = [{tag: "div", key: 1}]
+		var updated = [m("div", {key: 1})]
 
 		render(root, vnodes)
 		render(root, temp)
@@ -106,12 +85,12 @@ o.spec("onremove", function() {
 	})
 	o("does not recycle when there's an onremove", function() {
 		var remove = o.spy()
-		var vnode = {tag: "div", key: 1, attrs: {onremove: remove}}
+		var vnode = m("div", {key: 1, onremove: remove})
-		var updated = {tag: "div", key: 1, attrs: {onremove: remove}}
+		var updated = m("div", {key: 1, onremove: remove})
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
-		render(root, [updated])
+		render(root, updated)
 
 		o(vnode.dom).notEquals(updated.dom)
 	})
@@ -131,7 +110,7 @@ o.spec("onremove", function() {
 					onremove: spy,
 					view: function() {return m("div")}
 				})
-				render(root, {tag: comp})
+				render(root, m(comp))
 				render(root, null)
 
 				o(spy.callCount).equals(1)
@@ -147,7 +126,7 @@ o.spec("onremove", function() {
 				var inner = createComponent({
 					view: function(vnode) {return m("div", vnode.children)}
 				})
-				render(root, {tag: comp})
+				render(root, m(comp))
 				render(root, null)
 
 				o(spy.callCount).equals(1)
@@ -162,7 +141,7 @@ o.spec("onremove", function() {
 					view: function() {},
 					onremove: spy
 				})
-				render(root, {tag: parent, children: [child]})
+				render(root, m(parent, m(child)))
 				try {
 					render(root, null)
 				} catch (e) {
@@ -182,9 +161,9 @@ o.spec("onremove", function() {
 					view: function() {},
 					onremove: spy
 				})
-				render(root, {tag: parent, children: [child]})
+				render(root, m(parent, m(child)))
 				try {
-					render(root, {tag: parent})
+					render(root, m(parent))
 				} catch (e) {
 					threw = true
 				}
@@ -203,13 +182,13 @@ o.spec("onremove", function() {
 			})
 			o("doesn't fire when removing the children of a node that's brought back from the pool (#1991 part 2)", function() {
 				var onremove = o.spy()
-				var vnode = {tag: "div", key: 1, children: [{tag: "div", attrs: {onremove: onremove}}]}
+				var vnode = m("div", {key: 1}, m("div", {onremove: onremove}))
-				var temp = {tag: "div", key: 2}
+				var temp = m("div", {key: 2})
-				var updated = {tag: "div", key: 1, children: [{tag: "p"}]}
+				var updated = m("div", {key: 1}, m("p"))
 
-				render(root, [vnode])
+				render(root, vnode)
-				render(root, [temp])
+				render(root, temp)
-				render(root, [updated])
+				render(root, updated)
 
 				o(vnode.dom).notEquals(updated.dom) // this used to be a recycling pool test
 				o(onremove.callCount).equals(1)
@@ -250,20 +229,20 @@ o.spec("onremove", function() {
 				var resolve
 
 				function update(id, showParent, showChild) {
-					render(root, [
+					render(root,
-						{tag: "div", children: [
+						m("div",
-							showParent ? {tag: "[", children: [
+							showParent && m.fragment(
-								{tag: "#", children: ""}, // Required
+								"", // Required
-								showChild ? {tag: "[", attrs: {
+								showChild && m.fragment({
 									onbeforeremove: function () {
 										return {then: function (r) { resolve = r }}
 									},
-								}, children: [
+								},
-									{tag: "div", text: id},
+									m("div", id),
-								]} : undefined,
+								)
-							]} : undefined,
+							),
-						]}
+						)
-					])
+					)
 				}
 
 				update("1", true, true)
@@ -353,23 +332,23 @@ o.spec("onremove", function() {
 				var resolve, reject
 
 				function update(id, showParent, showChild) {
-					render(root, [
+					render(root,
-						{tag: "div", children: [
+						m("div",
-							showParent ? {tag: "[", children: [
+							showParent && m.fragment(
-								{tag: "#", children: ""}, // Required
+								"", // Required
-								showChild ? {tag: "[", attrs: {
+								showChild && m.fragment({
 									onbeforeremove: function () {
 										return {then: function (res, rej) {
 											resolve = res
 											reject = rej
 										}}
 									},
-								}, children: [
+								},
-									{tag: "div", text: id},
+									m("div", id),
-								]} : undefined,
+								)
-							]} : undefined,
+							),
-						]}
+						)
-					])
+					)
 				}
 
 				update("1", true, true)

render/tests/test-onupdate.js

@@ -3,6 +3,8 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.fragment = require("../../render/fragment")
 
 o.spec("onupdate", function() {
 	var $window, root, render
@@ -15,11 +17,11 @@ o.spec("onupdate", function() {
 	o("does not call onupdate when creating element", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {onupdate: create}, state: {}}
+		var vnode = m("div", {onupdate: create})
-		var updated = {tag: "div", attrs: {onupdate: update}, state: {}}
+		var updated = m("div", {onupdate: update})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(1)
@@ -28,9 +30,9 @@ o.spec("onupdate", function() {
 	})
 	o("does not call onupdate when removing element", function() {
 		var create = o.spy()
-		var vnode = {tag: "div", attrs: {onupdate: create}}
+		var vnode = m("div", {onupdate: create})
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
 
 		o(create.callCount).equals(0)
@@ -38,43 +40,43 @@ o.spec("onupdate", function() {
 	o("does not call onupdate when replacing keyed element", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", key: 1, attrs: {onupdate: create}}
+		var vnode = m("div", {key: 1, onupdate: create})
-		var updated = {tag: "a", key: 1, attrs: {onupdate: update}}
+		var updated = m("a", {key: 1, onupdate: update})
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(0)
 	})
 	o("does not recycle when there's an onupdate", function() {
 		var update = o.spy()
-		var vnode = {tag: "div", key: 1, attrs: {onupdate: update}}
+		var vnode = m("div", {key: 1, onupdate: update})
-		var updated = {tag: "div", key: 1, attrs: {onupdate: update}}
+		var updated = m("div", {key: 1, onupdate: update})
 
-		render(root, [vnode])
+		render(root, vnode)
 		render(root, [])
-		render(root, [updated])
+		render(root, updated)
 
 		o(vnode.dom).notEquals(updated.dom)
 	})
 	o("does not call old onupdate when removing the onupdate property in new vnode", function() {
 		var create = o.spy()
-		var vnode = {tag: "a", attrs: {onupdate: create}}
+		var vnode = m("a", {onupdate: create})
-		var updated = {tag: "a"}
+		var updated = m("a")
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 	})
 	o("calls onupdate when noop", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {onupdate: create}, state: {}}
+		var vnode = m("div", {onupdate: create})
-		var updated = {tag: "div", attrs: {onupdate: update}, state: {}}
+		var updated = m("div", {onupdate: update})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(1)
@@ -84,11 +86,11 @@ o.spec("onupdate", function() {
 	o("calls onupdate when updating attr", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {onupdate: create}, state: {}}
+		var vnode = m("div", {onupdate: create})
-		var updated = {tag: "div", attrs: {onupdate: update, id: "a"}, state: {}}
+		var updated = m("div", {onupdate: update, id: "a"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(1)
@@ -98,25 +100,11 @@ o.spec("onupdate", function() {
 	o("calls onupdate when updating children", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {onupdate: create}, children: [{tag: "a"}], state: {}}
+		var vnode = m("div", {onupdate: create}, m("a"))
-		var updated = {tag: "div", attrs: {onupdate: update}, children: [{tag: "b"}], state: {}}
+		var updated = m("div", {onupdate: update}, m("b"))
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
-
-		o(create.callCount).equals(0)
-		o(update.callCount).equals(1)
-		o(update.this).equals(vnode.state)
-		o(update.args[0]).equals(updated)
-	})
-	o("calls onupdate when updating text", function() {
-		var create = o.spy()
-		var update = o.spy()
-		var vnode = {tag: "#", attrs: {onupdate: create}, children: "a", state: {}}
-		var updated = {tag: "#", attrs: {onupdate: update}, children: "a", state: {}}
-
-		render(root, [vnode])
-		render(root, [updated])
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(1)
@@ -126,25 +114,11 @@ o.spec("onupdate", function() {
 	o("calls onupdate when updating fragment", function() {
 		var create = o.spy()
 		var update = o.spy()
-		var vnode = {tag: "[", attrs: {onupdate: create}, children: [], state: {}}
+		var vnode = m.fragment({onupdate: create})
-		var updated = {tag: "[", attrs: {onupdate: update}, children: [], state: {}}
+		var updated = m.fragment({onupdate: update})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
-
-		o(create.callCount).equals(0)
-		o(update.callCount).equals(1)
-		o(update.this).equals(vnode.state)
-		o(update.args[0]).equals(updated)
-	})
-	o("calls onupdate when updating html", function() {
-		var create = o.spy()
-		var update = o.spy()
-		var vnode = {tag: "<", attrs: {onupdate: create}, children: "a", state: {}}
-		var updated = {tag: "<", attrs: {onupdate: update}, children: "a", state: {}}
-
-		render(root, [vnode])
-		render(root, [updated])
 
 		o(create.callCount).equals(0)
 		o(update.callCount).equals(1)
@@ -153,19 +127,19 @@ o.spec("onupdate", function() {
 	})
 	o("calls onupdate after full DOM update", function() {
 		var called = false
-		var vnode = {tag: "div", attrs: {id: "1"}, children: [
+		var vnode = m("div", {id: "1"},
-			{tag: "a", attrs: {id: "2"}, children: [
+			m("a", {id: "2"},
-				{tag: "b", attrs: {id: "3"}}
+				m("b", {id: "3"})
-			]}
+			)
-		]}
+		)
-		var updated = {tag: "div", attrs: {id: "11"}, children: [
+		var updated = m("div", {id: "11"},
-			{tag: "a", attrs: {onupdate: update, id: "22"}, children: [
+			m("a", {id: "22", onupdate: update},
-				{tag: "b", attrs: {id: "33"}}
+				m("b", {id: "33"})
-			]}
+			)
-		]}
+		)
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		function update(vnode) {
 			called = true
@@ -178,9 +152,9 @@ o.spec("onupdate", function() {
 	})
 	o("does not set onupdate as an event handler", function() {
 		var update = o.spy()
-		var vnode = {tag: "div", attrs: {onupdate: update}, children: []}
+		var vnode = m("div", {onupdate: update})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o(vnode.dom.onupdate).equals(undefined)
 		o(vnode.dom.attributes["onupdate"]).equals(undefined)

render/tests/test-render.js

@@ -3,6 +3,7 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
 
 o.spec("render", function() {
 	var $window, root, render
@@ -68,7 +69,7 @@ o.spec("render", function() {
 			view: function() {throw new Error("error")}
 		}
 		function run() {
-			render(root, {tag: A})
+			render(root, m(A))
 		}
 		function init() {
 			setTimeout(function() {
@@ -94,13 +95,13 @@ o.spec("render", function() {
 		A.prototype.onbeforeupdate = onbeforeupdate
 		var throwCount = 0
 
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(1)
 		o(onbeforeupdate.callCount).equals(0)
 
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(1)
@@ -115,13 +116,13 @@ o.spec("render", function() {
 		A.prototype.onbeforeupdate = onbeforeupdate
 		var throwCount = 0
 
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(1)
 		o(onbeforeupdate.callCount).equals(0)
 
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(1)
@@ -136,13 +137,13 @@ o.spec("render", function() {
 		A.prototype.onbeforeupdate = onbeforeupdate
 		var throwCount = 0
 
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(0)
 		o(onbeforeupdate.callCount).equals(0)
 
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(0)
@@ -159,13 +160,13 @@ o.spec("render", function() {
 			}
 		}
 		var throwCount = 0
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(1)
 		o(onbeforeupdate.callCount).equals(0)
 
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(1)
@@ -182,13 +183,13 @@ o.spec("render", function() {
 			}
 		}
 		var throwCount = 0
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(1)
 		o(onbeforeupdate.callCount).equals(0)
 
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 		o(oninit.callCount).equals(1)
@@ -199,11 +200,11 @@ o.spec("render", function() {
 			throw new Error("error")
 		}
 		var throwCount = 0
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 
-		try {render(root, {tag: A})} catch (e) {throwCount++}
+		try {render(root, m(A))} catch (e) {throwCount++}
 
 		o(throwCount).equals(1)
 	})
@@ -215,16 +216,16 @@ o.spec("render", function() {
 		var updateB = o.spy()
 		var removeB = o.spy()
 		var a = function() {
-			return {tag: "div", key: 1, children: [
+			return m("div", {key: 1},
-				{tag: "div", key: 11, attrs: {oncreate: createA, onupdate: updateA, onremove: removeA}},
+				m("div", {key: 11, oncreate: createA, onupdate: updateA, onremove: removeA}),
-				{tag: "div", key: 12}
+				m("div", {key: 12}),
-			]}
+			)
 		}
 		var b = function() {
-			return {tag: "div", key: 2, children: [
+			return m("div", {key: 2},
-				{tag: "div", key: 21, attrs: {oncreate: createB, onupdate: updateB, onremove: removeB}},
+				m("div", {key: 21, oncreate: createB, onupdate: updateB, onremove: removeB}),
-				{tag: "div", key: 22}
+				m("div", {key: 22}),
-			]}
+			)
 		}
 		render(root, a())
 		render(root, b())
@@ -245,14 +246,14 @@ o.spec("render", function() {
 		var updateB = o.spy()
 		var removeB = o.spy()
 		var a = function() {
-			return {tag: "div", key: 1, children: [
+			return m("div", {key: 1},
-				{tag: "div", attrs: {oncreate: createA, onupdate: updateA, onremove: removeA}},
+				m("div", {oncreate: createA, onupdate: updateA, onremove: removeA}),
-			]}
+			)
 		}
 		var b = function() {
-			return {tag: "div", key: 2, children: [
+			return m("div", {key: 2},
-				{tag: "div", attrs: {oncreate: createB, onupdate: updateB, onremove: removeB}},
+				m("div", {oncreate: createB, onupdate: updateB, onremove: removeB}),
-			]}
+			)
 		}
 		render(root, a())
 		render(root, b())
@@ -274,14 +275,14 @@ o.spec("render", function() {
 		var removeB = o.spy()
 
 		var a = function() {
-			return {tag: "div", key: 1, children: [
+			return m("div", {key: 1},
-				{tag: "div", attrs: {oncreate: createA, onupdate: updateA, onremove: removeA}},
+				m("div", {oncreate: createA, onupdate: updateA, onremove: removeA}),
-			]}
+			)
 		}
 		var b = function() {
-			return {tag: "div", key: 2, children: [
+			return m("div", {key: 2},
-				{tag: "div", attrs: {oncreate: createB, onupdate: updateB, onremove: removeB}},
+				m("div", {oncreate: createB, onupdate: updateB, onremove: removeB}),
-			]}
+			)
 		}
 		render(root, a())
 		render(root, a())
@@ -303,71 +304,71 @@ o.spec("render", function() {
 	})
 	o("svg namespace is preserved in keyed diff (#1820)", function(){
 		// note that this only exerciese one branch of the keyed diff algo
-		var svg = {tag:"svg", children: [
+		var svg = m("svg", 
-			{tag:"g", key: 0},
+			m("g", {key: 0}),
-			{tag:"g", key: 1}
+			m("g", {key: 1}),
-		]}
+		)
-		render(root, [svg])
+		render(root, svg)
 
 		o(svg.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
 		o(svg.dom.childNodes[0].namespaceURI).equals("http://www.w3.org/2000/svg")
 		o(svg.dom.childNodes[1].namespaceURI).equals("http://www.w3.org/2000/svg")
 
-		svg = {tag:"svg", children: [
+		svg = m("svg", 
-			{tag:"g", key: 1, attrs: {x: 1}},
+			m("g", {key: 1, x: 1}),
-			{tag:"g", key: 2, attrs: {x: 2}}
+			m("g", {key: 2, x: 2}),
-		]}
+		)
-		render(root, [svg])
+		render(root, svg)
 
 		o(svg.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
 		o(svg.dom.childNodes[0].namespaceURI).equals("http://www.w3.org/2000/svg")
 		o(svg.dom.childNodes[1].namespaceURI).equals("http://www.w3.org/2000/svg")
 	})
 	o("the namespace of the root is passed to children", function() {
-		render(root, [{tag: "svg"}])
+		render(root, m("svg"))
 		o(root.childNodes[0].namespaceURI).equals("http://www.w3.org/2000/svg")
-		render(root.childNodes[0], [{tag: "g"}])
+		render(root.childNodes[0], m("g"))
 		o(root.childNodes[0].childNodes[0].namespaceURI).equals("http://www.w3.org/2000/svg")
 	})
 	o("does not allow reentrant invocations", function() {
 		var thrown = []
 		function A() {
 			var updated = false
-			try {render(root, {tag: A})} catch (e) {thrown.push("construct")}
+			try {render(root, m(A))} catch (e) {thrown.push("construct")}
 			return {
 				oninit: function() {
-					try {render(root, {tag: A})} catch (e) {thrown.push("oninit")}
+					try {render(root, m(A))} catch (e) {thrown.push("oninit")}
 				},
 				oncreate: function() {
-					try {render(root, {tag: A})} catch (e) {thrown.push("oncreate")}
+					try {render(root, m(A))} catch (e) {thrown.push("oncreate")}
 				},
 				onbeforeupdate: function() {
-					try {render(root, {tag: A})} catch (e) {thrown.push("onbeforeupdate")}
+					try {render(root, m(A))} catch (e) {thrown.push("onbeforeupdate")}
 				},
 				onupdate: function() {
 					if (updated) return
 					updated = true
-					try {render(root, {tag: A})} catch (e) {thrown.push("onupdate")}
+					try {render(root, m(A))} catch (e) {thrown.push("onupdate")}
 				},
 				onbeforeremove: function() {
-					try {render(root, {tag: A})} catch (e) {thrown.push("onbeforeremove")}
+					try {render(root, m(A))} catch (e) {thrown.push("onbeforeremove")}
 				},
 				onremove: function() {
-					try {render(root, {tag: A})} catch (e) {thrown.push("onremove")}
+					try {render(root, m(A))} catch (e) {thrown.push("onremove")}
 				},
 				view: function() {
-					try {render(root, {tag: A})} catch (e) {thrown.push("view")}
+					try {render(root, m(A))} catch (e) {thrown.push("view")}
 				},
 			}
 		}
-		render(root, {tag: A})
+		render(root, m(A))
 		o(thrown).deepEquals([
 			"construct",
 			"oninit",
 			"view",
 			"oncreate",
 		])
-		render(root, {tag: A})
+		render(root, m(A))
 		o(thrown).deepEquals([
 			"construct",
 			"oninit",

render/tests/test-textContent.js

@@ -3,6 +3,7 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
 
 o.spec("textContent", function() {
 	var $window, root, render
@@ -13,188 +14,184 @@ o.spec("textContent", function() {
 	})
 
 	o("ignores null", function() {
-		var vnodes = [{tag: "a", text: null}]
+		var vnode = m("a", null)
 
-		render(root, vnodes)
+		render(root, vnode)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(0)
+		o(vnode.dom.childNodes.length).equals(0)
-		o(vnodes[0].dom).equals(root.childNodes[0])
+		o(vnode.dom).equals(root.childNodes[0])
 	})
 	o("ignores undefined", function() {
-		var vnodes = [{tag: "a", text: undefined}]
+		var vnode = m("a", undefined)
 
-		render(root, vnodes)
+		render(root, vnode)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(0)
+		o(vnode.dom.childNodes.length).equals(0)
-		o(vnodes[0].dom).equals(root.childNodes[0])
+		o(vnode.dom).equals(root.childNodes[0])
 	})
 	o("creates string", function() {
-		var vnodes = [{tag: "a", text: "a"}]
+		var vnode = m("a", "a")
 
-		render(root, vnodes)
+		render(root, vnode)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("a")
+		o(vnode.dom.childNodes[0].nodeValue).equals("a")
-		o(vnodes[0].dom).equals(root.childNodes[0])
+		o(vnode.dom).equals(root.childNodes[0])
 	})
 	o("creates falsy string", function() {
-		var vnodes = [{tag: "a", text: ""}]
+		var vnode = m("a", "")
 
-		render(root, vnodes)
+		render(root, vnode)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("")
+		o(vnode.dom.childNodes[0].nodeValue).equals("")
-		o(vnodes[0].dom).equals(root.childNodes[0])
+		o(vnode.dom).equals(root.childNodes[0])
 	})
 	o("creates number", function() {
-		var vnodes = [{tag: "a", text: 1}]
+		var vnode = m("a", 1)
 
-		render(root, vnodes)
+		render(root, vnode)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("1")
+		o(vnode.dom.childNodes[0].nodeValue).equals("1")
-		o(vnodes[0].dom).equals(root.childNodes[0])
+		o(vnode.dom).equals(root.childNodes[0])
 	})
 	o("creates falsy number", function() {
-		var vnodes = [{tag: "a", text: 0}]
+		var vnode = m("a", 0)
 
-		render(root, vnodes)
+		render(root, vnode)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("0")
+		o(vnode.dom.childNodes[0].nodeValue).equals("0")
-		o(vnodes[0].dom).equals(root.childNodes[0])
+		o(vnode.dom).equals(root.childNodes[0])
 	})
 	o("creates boolean", function() {
-		var vnodes = [{tag: "a", text: true}]
+		var vnode = m("a", true)
 
-		render(root, vnodes)
+		render(root, vnode)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(0)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("true")
+		o(vnode.dom).equals(root.childNodes[0])
-		o(vnodes[0].dom).equals(root.childNodes[0])
 	})
 	o("creates falsy boolean", function() {
-		var vnodes = [{tag: "a", text: false}]
+		var vnode = m("a", false)
 
-		render(root, vnodes)
+		render(root, vnode)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(0)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("false")
+		o(vnode.dom).equals(root.childNodes[0])
-		o(vnodes[0].dom).equals(root.childNodes[0])
 	})
 	o("updates to string", function() {
-		var vnodes = [{tag: "a", text: "a"}]
+		var vnode = m("a", "a")
-		var updated = [{tag: "a", text: "b"}]
+		var updated = m("a", "b")
 
-		render(root, vnodes)
+		render(root, vnode)
 		render(root, updated)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("b")
+		o(vnode.dom.childNodes[0].nodeValue).equals("b")
-		o(updated[0].dom).equals(root.childNodes[0])
+		o(updated.dom).equals(root.childNodes[0])
 	})
 	o("updates to falsy string", function() {
-		var vnodes = [{tag: "a", text: "a"}]
+		var vnode = m("a", "a")
-		var updated = [{tag: "a", text: ""}]
+		var updated = m("a", "")
 
-		render(root, vnodes)
+		render(root, vnode)
 		render(root, updated)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("")
+		o(vnode.dom.childNodes[0].nodeValue).equals("")
-		o(updated[0].dom).equals(root.childNodes[0])
+		o(updated.dom).equals(root.childNodes[0])
 	})
 	o("updates to number", function() {
-		var vnodes = [{tag: "a", text: "a"}]
+		var vnode = m("a", "a")
-		var updated = [{tag: "a", text: 1}]
+		var updated = m("a", 1)
 
-		render(root, vnodes)
+		render(root, vnode)
 		render(root, updated)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("1")
+		o(vnode.dom.childNodes[0].nodeValue).equals("1")
-		o(updated[0].dom).equals(root.childNodes[0])
+		o(updated.dom).equals(root.childNodes[0])
 	})
 	o("updates to falsy number", function() {
-		var vnodes = [{tag: "a", text: "a"}]
+		var vnode = m("a", "a")
-		var updated = [{tag: "a", text: 0}]
+		var updated = m("a", 0)
 
-		render(root, vnodes)
+		render(root, vnode)
 		render(root, updated)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("0")
+		o(vnode.dom.childNodes[0].nodeValue).equals("0")
-		o(updated[0].dom).equals(root.childNodes[0])
+		o(updated.dom).equals(root.childNodes[0])
 	})
-	o("updates to boolean", function() {
+	o("updates true to nothing", function() {
-		var vnodes = [{tag: "a", text: "a"}]
+		var vnode = m("a", "a")
-		var updated = [{tag: "a", text: true}]
+		var updated = m("a", true)
 
-		render(root, vnodes)
+		render(root, vnode)
 		render(root, updated)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(0)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("true")
+		o(updated.dom).equals(root.childNodes[0])
-		o(updated[0].dom).equals(root.childNodes[0])
 	})
-	o("updates to falsy boolean", function() {
+	o("updates false to nothing", function() {
-		var vnodes = [{tag: "a", text: "a"}]
+		var vnode = m("a", "a")
-		var updated = [{tag: "a", text: false}]
+		var updated = m("a", false)
 
-		render(root, vnodes)
+		render(root, vnode)
 		render(root, updated)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(0)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("false")
+		o(updated.dom).equals(root.childNodes[0])
-		o(updated[0].dom).equals(root.childNodes[0])
 	})
 	o("updates with typecasting", function() {
-		var vnodes = [{tag: "a", text: "1"}]
+		var vnode = m("a", "1")
-		var updated = [{tag: "a", text: 1}]
+		var updated = m("a", 1)
 
-		render(root, vnodes)
+		render(root, vnode)
 		render(root, updated)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("1")
+		o(vnode.dom.childNodes[0].nodeValue).equals("1")
-		o(updated[0].dom).equals(root.childNodes[0])
+		o(updated.dom).equals(root.childNodes[0])
 	})
 	o("updates from without text to with text", function() {
-		var vnodes = [{tag: "a"}]
+		var vnode = m("a")
-		var updated = [{tag: "a", text: "b"}]
+		var updated = m("a", "b")
 
-		render(root, vnodes)
+		render(root, vnode)
 		render(root, updated)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(1)
+		o(vnode.dom.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes[0].nodeValue).equals("b")
+		o(vnode.dom.childNodes[0].nodeValue).equals("b")
-		o(updated[0].dom).equals(root.childNodes[0])
+		o(updated.dom).equals(root.childNodes[0])
 	})
 	o("updates from with text to without text", function() {
-		var vnodes = [{tag: "a", text: "a"}]
+		var vnode = m("a", "a")
-		var updated = [{tag: "a"}]
+		var updated = m("a")
 
-		render(root, vnodes)
+		render(root, vnode)
 		render(root, updated)
 
 		o(root.childNodes.length).equals(1)
-		o(vnodes[0].dom.childNodes.length).equals(0)
+		o(vnode.dom.childNodes.length).equals(0)
-		o(updated[0].dom).equals(root.childNodes[0])
+		o(updated.dom).equals(root.childNodes[0])
 	})
 })

render/tests/test-updateElement.js

@@ -3,6 +3,7 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
 
 o.spec("updateElement", function() {
 	var $window, root, render
@@ -13,217 +14,215 @@ o.spec("updateElement", function() {
 	})
 
 	o("updates attr", function() {
-		var vnode = {tag: "a", attrs: {id: "b"}}
+		var vnode = m("a", {id: "b"})
-		var updated = {tag: "a", attrs: {id: "c"}}
+		var updated = m("a", {id: "c"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(vnode.dom)
 		o(updated.dom).equals(root.firstChild)
 		o(updated.dom.attributes["id"].value).equals("c")
 	})
 	o("adds attr", function() {
-		var vnode = {tag: "a", attrs: {id: "b"}}
+		var vnode = m("a", {id: "b"})
-		var updated = {tag: "a", attrs: {id: "c", title: "d"}}
+		var updated = m("a", {id: "c", title: "d"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(vnode.dom)
 		o(updated.dom).equals(root.firstChild)
 		o(updated.dom.attributes["title"].value).equals("d")
 	})
 	o("adds attr from empty attrs", function() {
-		var vnode = {tag: "a"}
+		var vnode = m("a")
-		var updated = {tag: "a", attrs: {title: "d"}}
+		var updated = m("a", {title: "d"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(vnode.dom)
 		o(updated.dom).equals(root.firstChild)
 		o(updated.dom.attributes["title"].value).equals("d")
 	})
 	o("removes attr", function() {
-		var vnode = {tag: "a", attrs: {id: "b", title: "d"}}
+		var vnode = m("a", {id: "b", title: "d"})
-		var updated = {tag: "a", attrs: {id: "c"}}
+		var updated = m("a", {id: "c"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(vnode.dom)
 		o(updated.dom).equals(root.firstChild)
 		o("title" in updated.dom.attributes).equals(false)
 	})
 	o("removes class", function() {
-		var vnode = {tag: "a", attrs: {id: "b", className: "d"}}
+		var vnode = m("a", {id: "b", className: "d"})
-		var updated = {tag: "a", attrs: {id: "c"}}
+		var updated = m("a", {id: "c"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(vnode.dom)
 		o(updated.dom).equals(root.firstChild)
 		o("class" in updated.dom.attributes).equals(false)
 	})
 	o("creates style object", function() {
-		var vnode = {tag: "a", attrs: {}}
+		var vnode = m("a")
-		var updated = {tag: "a", attrs: {style: {backgroundColor: "green"}}}
+		var updated = m("a", {style: {backgroundColor: "green"}})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("green")
 	})
 	o("creates style string", function() {
-		var vnode = {tag: "a", attrs: {}}
+		var vnode = m("a")
-		var updated = {tag: "a", attrs: {style: "background-color:green"}}
+		var updated = m("a", {style: "background-color:green"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("green")
 	})
 	o("updates style from object to object", function() {
-		var vnode = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
+		var vnode = m("a", {style: {backgroundColor: "red"}})
-		var updated = {tag: "a", attrs: {style: {backgroundColor: "green"}}}
+		var updated = m("a", {style: {backgroundColor: "green"}})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("green")
 	})
 	o("updates style from object to string", function() {
-		var vnode = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
+		var vnode = m("a", {style: {backgroundColor: "red"}})
-		var updated = {tag: "a", attrs: {style: "background-color:green;"}}
+		var updated = m("a", {style: "background-color:green;"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("green")
 	})
 	o("handles noop style change when style is string", function() {
-		var vnode = {tag: "a", attrs: {style: "background-color:green;"}}
+		var vnode = m("a", {style: "background-color:green;"})
-		var updated = {tag: "a", attrs: {style: "background-color:green;"}}
+		var updated = m("a", {style: "background-color:green;"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("green")
 	})
 	o("handles noop style change when style is object", function() {
-		var vnode = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
+		var vnode = m("a", {style: {backgroundColor: "red"}})
-		var updated = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
+		var updated = m("a", {style: {backgroundColor: "red"}})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("red")
 	})
 	o("updates style from string to object", function() {
-		var vnode = {tag: "a", attrs: {style: "background-color:red;"}}
+		var vnode = m("a", {style: "background-color:red;"})
-		var updated = {tag: "a", attrs: {style: {backgroundColor: "green"}}}
+		var updated = m("a", {style: {backgroundColor: "green"}})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("green")
 	})
 	o("updates style from string to string", function() {
-		var vnode = {tag: "a", attrs: {style: "background-color:red;"}}
+		var vnode = m("a", {style: "background-color:red;"})
-		var updated = {tag: "a", attrs: {style: "background-color:green;"}}
+		var updated = m("a", {style: "background-color:green;"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("green")
 	})
 	o("removes style from object to object", function() {
-		var vnode = {tag: "a", attrs: {style: {backgroundColor: "red", border: "1px solid red"}}}
+		var vnode = m("a", {style: {backgroundColor: "red", border: "1px solid red"}})
-		var updated = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
+		var updated = m("a", {style: {backgroundColor: "red"}})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("red")
 		o(updated.dom.style.border).equals("")
 	})
 	o("removes style from string to object", function() {
-		var vnode = {tag: "a", attrs: {style: "background-color:red;border:1px solid red"}}
+		var vnode = m("a", {style: "background-color:red;border:1px solid red"})
-		var updated = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
+		var updated = m("a", {style: {backgroundColor: "red"}})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("red")
 		o(updated.dom.style.border).notEquals("1px solid red")
 	})
 	o("removes style from object to string", function() {
-		var vnode = {tag: "a", attrs: {style: {backgroundColor: "red", border: "1px solid red"}}}
+		var vnode = m("a", {style: {backgroundColor: "red", border: "1px solid red"}})
-		var updated = {tag: "a", attrs: {style: "background-color:red"}}
+		var updated = m("a", {style: "background-color:red"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("red")
 		o(updated.dom.style.border).equals("")
 	})
 	o("removes style from string to string", function() {
-		var vnode = {tag: "a", attrs: {style: "background-color:red;border:1px solid red"}}
+		var vnode = m("a", {style: "background-color:red;border:1px solid red"})
-		var updated = {tag: "a", attrs: {style: "background-color:red"}}
+		var updated = m("a", {style: "background-color:red"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.backgroundColor).equals("red")
 		o(updated.dom.style.border).equals("")
 	})
 	o("does not re-render element styles for equivalent style objects", function() {
 		var style = {color: "gold"}
-		var vnode = {tag: "a", attrs: {style: style}}
+		var vnode = m("a", {style: style})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		root.firstChild.style.color = "red"
 		style = {color: "gold"}
-		var updated = {tag: "a", attrs: {style: style}}
+		var updated = m("a", {style: style})
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.style.color).equals("red")
 	})
 	o("setting style to `null` removes all styles", function() {
-		var vnode = {"tag": "p", attrs: {style: "background-color: red"}}
+		var vnode = m("p", {style: "background-color: red"})
-		var updated = {"tag": "p", attrs: {style: null}}
+		var updated = m("p", {style: null})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o("style" in vnode.dom.attributes).equals(true)
 		o(vnode.dom.attributes.style.value).equals("background-color: red;")
 
-		render(root, [updated])
+		render(root, updated)
 
 		//browsers disagree here
 		try {
-
 			o(updated.dom.attributes.style.value).equals("")
 
 		} catch (e) {
-
 			o("style" in updated.dom.attributes).equals(false)
 
 		}
 	})
 	o("setting style to `undefined` removes all styles", function() {
-		var vnode = {"tag": "p", attrs: {style: "background-color: red"}}
+		var vnode = m("p", {style: "background-color: red"})
-		var updated = {"tag": "p", attrs: {style: undefined}}
+		var updated = m("p", {style: undefined})
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o("style" in vnode.dom.attributes).equals(true)
 		o(vnode.dom.attributes.style.value).equals("background-color: red;")
 
-		render(root, [updated])
+		render(root, updated)
 
 		//browsers disagree here
 		try {
@@ -237,15 +236,15 @@ o.spec("updateElement", function() {
 		}
 	})
 	o("not setting style removes all styles", function() {
-		var vnode = {"tag": "p", attrs: {style: "background-color: red"}}
+		var vnode = m("p", {style: "background-color: red"})
-		var updated = {"tag": "p", attrs: {}}
+		var updated = m("p")
 
-		render(root, [vnode])
+		render(root, vnode)
 
 		o("style" in vnode.dom.attributes).equals(true)
 		o(vnode.dom.attributes.style.value).equals("background-color: red;")
 
-		render(root, [updated])
+		render(root, updated)
 
 		//browsers disagree here
 		try {
@@ -259,64 +258,60 @@ o.spec("updateElement", function() {
 		}
 	})
 	o("replaces el", function() {
-		var vnode = {tag: "a"}
+		var vnode = m("a")
-		var updated = {tag: "b"}
+		var updated = m("b")
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(root.firstChild)
 		o(updated.dom.nodeName).equals("B")
 	})
 	o("updates svg class", function() {
-		var vnode = {tag: "svg", attrs: {className: "a"}}
+		var vnode = m("svg", {className: "a"})
-		var updated = {tag: "svg", attrs: {className: "b"}}
+		var updated = m("svg", {className: "b"})
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.attributes["class"].value).equals("b")
 	})
 	o("updates svg child", function() {
-		var vnode = {tag: "svg", children: [{
+		var vnode = m("svg", m("circle"))
-			tag: "circle"
+		var updated = m("svg", m("line"))
-		}]}
-		var updated = {tag: "svg", children: [{
-			tag: "line"
-		}]}
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg")
 	})
 	o("doesn't restore since we're not recycling", function() {
-		var vnode = {tag: "div", key: 1}
+		var vnode = m("div", {key: 1})
-		var updated = {tag: "div", key: 2}
+		var updated = m("div", {key: 2})
 
-		render(root, [vnode])
+		render(root, vnode)
 		var a = vnode.dom
 
-		render(root, [updated])
+		render(root, updated)
 
-		render(root, [vnode])
+		render(root, vnode)
 		var c = vnode.dom
 
 		o(root.childNodes.length).equals(1)
 		o(a).notEquals(c) // this used to be a recycling pool test
 	})
 	o("doesn't restore since we're not recycling (via map)", function() {
-		var a = {tag: "div", key: 1}
+		var a = m("div", {key: 1})
-		var b = {tag: "div", key: 2}
+		var b = m("div", {key: 2})
-		var c = {tag: "div", key: 3}
+		var c = m("div", {key: 3})
-		var d = {tag: "div", key: 4}
+		var d = m("div", {key: 4})
-		var e = {tag: "div", key: 5}
+		var e = m("div", {key: 5})
-		var f = {tag: "div", key: 6}
+		var f = m("div", {key: 6})
 
 		render(root, [a, b, c])
 		var x = root.childNodes[1]
 
-		render(root, [d])
+		render(root, d)
 
 		render(root, [e, b, f])
 		var y = root.childNodes[1]

render/tests/test-updateFragment.js

@@ -3,6 +3,8 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.fragment = require("../../render/fragment")
 
 o.spec("updateFragment", function() {
 	var $window, root, render
@@ -13,21 +15,21 @@ o.spec("updateFragment", function() {
 	})
 
 	o("updates fragment", function() {
-		var vnode = {tag: "[", children: [{tag: "a"}]}
+		var vnode = m.fragment(m("a"))
-		var updated = {tag: "[", children: [{tag: "b"}]}
+		var updated = m.fragment(m("b"))
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(root.firstChild)
 		o(updated.dom.nodeName).equals("B")
 	})
 	o("adds els", function() {
-		var vnode = {tag: "[", children: []}
+		var vnode = m.fragment()
-		var updated = {tag: "[", children: [{tag: "a"}, {tag: "b"}]}
+		var updated = m.fragment(m("a"), m("b"))
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(root.firstChild)
 		o(updated.domSize).equals(2)
@@ -36,32 +38,32 @@ o.spec("updateFragment", function() {
 		o(root.childNodes[1].nodeName).equals("B")
 	})
 	o("removes els", function() {
-		var vnode = {tag: "[", children: [{tag: "a"}, {tag: "b"}]}
+		var vnode = m.fragment(m("a"), m("b"))
-		var updated = {tag: "[", children: []}
+		var updated = m.fragment()
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(null)
 		o(updated.domSize).equals(0)
 		o(root.childNodes.length).equals(0)
 	})
 	o("updates from childless fragment", function() {
-		var vnode = {tag: "["}
+		var vnode = m.fragment()
-		var updated = {tag: "[", children: [{tag: "a"}]}
+		var updated = m.fragment(m("a"))
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(root.firstChild)
 		o(updated.dom.nodeName).equals("A")
 	})
 	o("updates to childless fragment", function() {
-		var vnode = {tag: "[", children: [{tag: "a"}]}
+		var vnode = m.fragment(m("a"))
-		var updated = {tag: "["}
+		var updated = m.fragment()
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(null)
 		o(root.childNodes.length).equals(0)

render/tests/test-updateHTML.js

@@ -3,6 +3,8 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
+m.trust = require("../../render/trust")
 
 o.spec("updateHTML", function() {
 	var $window, root, render
@@ -13,22 +15,22 @@ o.spec("updateHTML", function() {
 	})
 
 	o("updates html", function() {
-		var vnode = {tag: "<", children: "a"}
+		var vnode = m.trust("a")
-		var updated = {tag: "<", children: "b"}
+		var updated = m.trust("b")
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(root.firstChild)
 		o(updated.domSize).equals(1)
 		o(updated.dom.nodeValue).equals("b")
 	})
 	o("adds html", function() {
-		var vnode = {tag: "<", children: ""}
+		var vnode = m.trust("")
-		var updated = {tag: "<", children: "<a></a><b></b>"}
+		var updated = m.trust("<a></a><b></b>")
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.domSize).equals(2)
 		o(updated.dom).equals(root.firstChild)
@@ -37,11 +39,11 @@ o.spec("updateHTML", function() {
 		o(root.childNodes[1].nodeName).equals("B")
 	})
 	o("removes html", function() {
-		var vnode = {tag: "<", children: "<a></a><b></b>"}
+		var vnode = m.trust("<a></a><b></b>")
-		var updated = {tag: "<", children: ""}
+		var updated = m.trust("")
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
 		o(updated.dom).equals(null)
 		o(updated.domSize).equals(0)
@@ -58,14 +60,14 @@ o.spec("updateHTML", function() {
 		return result
 	}
 	o("updates the dom correctly with a contenteditable parent", function() {
-		var div = {tag: "div", attrs: {contenteditable: true}, children: [{tag: "<", children: "<a></a>"}]}
+		var div = m("div", {contenteditable: true}, m.trust("<a></a>"))
 
 		render(root, div)
 		o(childKeysOf(div.dom, "nodeName")).deepEquals(["A"])
 	})
 	o("updates dom with multiple text children", function() {
-		var vnode = [{tag: "#", children: "a"}, {tag: "<", children: "<a></a>"}, {tag: "<", children: "<b></b>"}]
+		var vnode = ["a", m.trust("<a></a>"), m.trust("<b></b>")]
-		var replacement = [{tag: "#", children: "a"}, {tag: "<", children: "<c></c>"}, {tag: "<", children: "<d></d>"}]
+		var replacement = ["a", m.trust("<c></c>"), m.trust("<d></d>")]
 
 		render(root, vnode)
 		render(root, replacement)
@@ -74,12 +76,12 @@ o.spec("updateHTML", function() {
 	})
 	o("updates dom with multiple text children in other parents", function() {
 		var vnode = [
-			{tag: "div", attrs: {}, children: [{tag: "#", children: "a"}, {tag: "<", children: "<a></a>"}]},
+			m("div", "a", m.trust("<a></a>")),
-			{tag: "div", attrs: {}, children: [{tag: "#", children: "b"}, {tag: "<", children: "<b></b>"}]},
+			m("div", "b", m.trust("<b></b>")),
 		]
 		var replacement = [
-			{tag: "div", attrs: {}, children: [{tag: "#", children: "c"}, {tag: "<", children: "<c></c>"}]},
+			m("div", "c", m.trust("<c></c>")),
-			{tag: "div", attrs: {}, children: [{tag: "#", children: "d"}, {tag: "<", children: "<d></d>"}]},
+			m("div", "d", m.trust("<d></d>")),
 		]
 
 		render(root, vnode)
@@ -93,20 +95,20 @@ o.spec("updateHTML", function() {
 	})
 	o("correctly diffs if followed by another trusted vnode", function() {
 		render(root, [
-			{tag: "<", children: "<span>A</span>"},
+			m.trust("<span>A</span>"),
-			{tag: "<", children: "<span>A</span>"},
+			m.trust("<span>A</span>"),
 		])
 		o(childKeysOf(root, "nodeName")).deepEquals(["SPAN", "SPAN"])
 		o(childKeysOf(root, "firstChild.nodeValue")).deepEquals(["A", "A"])
 		render(root, [
-			{tag: "<", children: "<span>B</span>"},
+			m.trust("<span>B</span>"),
-			{tag: "<", children: "<span>A</span>"},
+			m.trust("<span>A</span>"),
 		])
 		o(childKeysOf(root, "nodeName")).deepEquals(["SPAN", "SPAN"])
 		o(childKeysOf(root, "firstChild.nodeValue")).deepEquals(["B", "A"])
 		render(root, [
-			{tag: "<", children: "<span>B</span>"},
+			m.trust("<span>B</span>"),
-			{tag: "<", children: "<span>B</span>"},
+			m.trust("<span>B</span>"),
 		])
 		o(childKeysOf(root, "nodeName")).deepEquals(["SPAN", "SPAN"])
 		o(childKeysOf(root, "firstChild.nodeValue")).deepEquals(["B", "B"])

render/tests/test-updateNodesFuzzer.js

@@ -3,6 +3,7 @@
 var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
+var m = require("../../render/hyperscript")
 
 // pilfered and adapted from https://github.com/domvm/domvm/blob/7aaec609e4c625b9acf9a22d035d6252a5ca654f/test/src/flat-list-keyed-fuzz.js
 o.spec("updateNodes keyed list Fuzzer", function() {
@@ -26,9 +27,9 @@ o.spec("updateNodes keyed list Fuzzer", function() {
 		while (tests--) {
 			var test = fuzzTest(c.delMax, c.movMax, c.insMax)
 			o(i++ + ": " + test.list.join() + " -> " + test.updated.join(), function() {
-				render(root, test.list.map(function(x){return {tag: x, key: x}}))
+				render(root, test.list.map(function(x){return m(x, {key: x})}))
 				addSpies(root)
-				render(root, test.updated.map(function(x){return {tag: x, key: x}}))
+				render(root, test.updated.map(function(x){return m(x, {key: x})}))
 
 				if (root.appendChild.callCount + root.insertBefore.callCount !== test.expected.creations + test.expected.moves) console.log(test, {aC: root.appendChild.callCount, iB: root.insertBefore.callCount}, [].map.call(root.childNodes, function(n){return n.nodeName.toLowerCase()}))
 

render/tests/test-updateText.js

@@ -13,102 +13,84 @@ o.spec("updateText", function() {
 	})
 
 	o("updates to string", function() {
-		var vnode = {tag: "#", children: "a"}
+		var vnode = "a"
-		var updated = {tag: "#", children: "b"}
+		var updated = "b"
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
-		o(updated.dom).equals(vnode.dom)
+		o(root.firstChild.nodeValue).equals("b")
-		o(updated.dom).equals(root.firstChild)
-		o(updated.dom.nodeValue).equals("b")
 	})
 	o("updates to falsy string", function() {
-		var vnode = {tag: "#", children: "a"}
+		var vnode = "a"
-		var updated = {tag: "#", children: ""}
+		var updated = ""
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
-		o(updated.dom).equals(vnode.dom)
+		o(root.firstChild.nodeValue).equals("")
-		o(updated.dom).equals(root.firstChild)
-		o(updated.dom.nodeValue).equals("")
 	})
 	o("updates from falsy string", function() {
-		var vnode = {tag: "#", children: ""}
+		var vnode = ""
-		var updated = {tag: "#", children: "b"}
+		var updated = "b"
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
-		o(updated.dom).equals(vnode.dom)
+		o(root.firstChild.nodeValue).equals("b")
-		o(updated.dom).equals(root.firstChild)
-		o(updated.dom.nodeValue).equals("b")
 	})
 	o("updates to number", function() {
-		var vnode = {tag: "#", children: "a"}
+		var vnode = "a"
-		var updated = {tag: "#", children: 1}
+		var updated = 1
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
-		o(updated.dom).equals(vnode.dom)
+		o(root.firstChild.nodeValue).equals("1")
-		o(updated.dom).equals(root.firstChild)
-		o(updated.dom.nodeValue).equals("1")
 	})
 	o("updates to falsy number", function() {
-		var vnode = {tag: "#", children: "a"}
+		var vnode = "a"
-		var updated = {tag: "#", children: 0}
+		var updated = 0
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
-		o(updated.dom).equals(vnode.dom)
+		o(root.firstChild.nodeValue).equals("0")
-		o(updated.dom).equals(root.firstChild)
-		o(updated.dom.nodeValue).equals("0")
 	})
 	o("updates from falsy number", function() {
-		var vnode = {tag: "#", children: 0}
+		var vnode = 0
-		var updated = {tag: "#", children: "b"}
+		var updated = "b"
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
-		o(updated.dom).equals(vnode.dom)
+		o(root.firstChild.nodeValue).equals("b")
-		o(updated.dom).equals(root.firstChild)
-		o(updated.dom.nodeValue).equals("b")
 	})
 	o("updates to boolean", function() {
-		var vnode = {tag: "#", children: "a"}
+		var vnode = "a"
-		var updated = {tag: "#", children: true}
+		var updated = true
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
-		o(updated.dom).equals(vnode.dom)
+		o(root.childNodes.length).equals(0)
-		o(updated.dom).equals(root.firstChild)
-		o(updated.dom.nodeValue).equals("true")
 	})
 	o("updates to falsy boolean", function() {
-		var vnode = {tag: "#", children: "a"}
+		var vnode = "a"
-		var updated = {tag: "#", children: false}
+		var updated = false
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
-		o(updated.dom).equals(vnode.dom)
+		o(root.childNodes.length).equals(0)
-		o(updated.dom).equals(root.firstChild)
-		o(updated.dom.nodeValue).equals("false")
 	})
 	o("updates from falsy boolean", function() {
-		var vnode = {tag: "#", children: false}
+		var vnode = false
-		var updated = {tag: "#", children: "b"}
+		var updated = "b"
 
-		render(root, [vnode])
+		render(root, vnode)
-		render(root, [updated])
+		render(root, updated)
 
-		o(updated.dom).equals(vnode.dom)
+		o(root.firstChild.nodeValue).equals("b")
-		o(updated.dom).equals(root.firstChild)
-		o(updated.dom.nodeValue).equals("b")
 	})
 })

test-utils/components.js

@@ -1,10 +1,12 @@
 "use strict"
 
+var m = require("../render/hyperscript")
+
 module.exports = [
 	{
 		kind: "POJO",
 		create: function(methods) {
-			var res = {view: function() {return {tag:"div"}}}
+			var res = {view: function() {return m("div")}}
 			Object.keys(methods || {}).forEach(function(m){res[m] = methods[m]})
 			return res
 		}
@@ -12,7 +14,7 @@ module.exports = [
 		kind: "constructible",
 		create: function(methods) {
 			function res(){}
-			res.prototype.view = function() {return {tag:"div"}}
+			res.prototype.view = function() {return m("div")}
 			Object.keys(methods || {}).forEach(function(m){res.prototype[m] = methods[m]})
 			return res
 		}
@@ -20,7 +22,7 @@ module.exports = [
 		kind: "closure",
 		create: function(methods) {
 			return function() {
-				var res = {view: function() {return {tag:"div"}}}
+				var res = {view: function() {return m("div")}}
 				Object.keys(methods || {}).forEach(function(m){res[m] = methods[m]})
 				return res
 			}

test-utils/tests/test-components.js

@@ -2,6 +2,7 @@
 
 var o = require("ospec")
 var components = require("../../test-utils/components")
+var m = require("../../render/hyperscript")
 
 o.spec("test-utils/components", function() {
 	var test = o.spy(function(component) {
@@ -32,7 +33,7 @@ o.spec("test-utils/components", function() {
 				var vnode = cmp1.view()
 
 				o(vnode != null).equals(true)
-				o(vnode).deepEquals({tag: "div"})
+				o(vnode).deepEquals(m("div"))
 
 				if (component.kind !== "constructible") {
 					o(cmp2).deepEquals(methods)