Runtime-deprecate ospec, change change-log to changelog, fix a few assorted bugs (#2578)

render/render.js

@@ -726,12 +726,18 @@ module.exports = function($window) {
 
 	//attrs
 	function setAttrs(vnode, attrs, ns) {
+		// If you assign an input type that is not supported by IE 11 with an assignment expression, an error will occur.
+		//
+		// Also, the DOM does things to inputs based on the value, so it needs set first.
+		// See: https://github.com/MithrilJS/mithril.js/issues/2622
+		if (vnode.tag === "input" && attrs.type != null) vnode.dom.setAttribute("type", attrs.type)
+		var isFileInput = attrs != null && vnode.tag === "input" && attrs.type === "file"
 		for (var key in attrs) {
-			setAttr(vnode, key, null, attrs[key], ns)
+			setAttr(vnode, key, null, attrs[key], ns, isFileInput)
 		}
 	}
-	function setAttr(vnode, key, old, value, ns) {
-		if (key === "key" || key === "is" || value == null || isLifecycleMethod(key) || (old === value && !isFormAttribute(vnode, key)) && typeof value !== "object") return
+	function setAttr(vnode, key, old, value, ns, isFileInput) {
+		if (key === "key" || key === "is" || value == null || isLifecycleMethod(key) || (old === value && !isFormAttribute(vnode, key)) && typeof value !== "object" || key === "type" && vnode.tag === "input") return
 		if (key[0] === "o" && key[1] === "n") return updateEvent(vnode, key, value)
 		if (key.slice(0, 6) === "xlink:") vnode.dom.setAttributeNS("http://www.w3.org/1999/xlink", key.slice(6), value)
 		else if (key === "style") updateStyle(vnode.dom, old, value)
@@ -740,16 +746,18 @@ module.exports = function($window) {
 				// Only do the coercion if we're actually going to check the value.
 				/* eslint-disable no-implicit-coercion */
 				//setting input[value] to same value by typing on focused element moves cursor to end in Chrome
-				if ((vnode.tag === "input" || vnode.tag === "textarea") && vnode.dom.value === "" + value && vnode.dom === activeElement()) return
+				//setting input[type=file][value] to same value causes an error to be generated if it's non-empty
+				if ((vnode.tag === "input" || vnode.tag === "textarea") && vnode.dom.value === "" + value && (isFileInput || vnode.dom === activeElement())) return
 				//setting select[value] to same value while having select open blinks select dropdown in Chrome
 				if (vnode.tag === "select" && old !== null && vnode.dom.value === "" + value) return
 				//setting option[value] to same value while having select open blinks select dropdown in Chrome
 				if (vnode.tag === "option" && old !== null && vnode.dom.value === "" + value) return
+				//setting input[type=file][value] to different value is an error if it's non-empty
+				// Not ideal, but it at least works around the most common source of uncaught exceptions for now.
+				if (isFileInput && "" + value !== "") { console.error("`value` is read-only on file inputs!"); return }
 				/* eslint-enable no-implicit-coercion */
 			}
-			// If you assign an input type that is not supported by IE 11 with an assignment expression, an error will occur.
-			if (vnode.tag === "input" && key === "type") vnode.dom.setAttribute(key, value)
-			else vnode.dom[key] = value
+			vnode.dom[key] = value
 		} else {
 			if (typeof value === "boolean") {
 				if (value) vnode.dom.setAttribute(key, "")
@@ -793,8 +801,14 @@ module.exports = function($window) {
 	}
 	function updateAttrs(vnode, old, attrs, ns) {
 		if (attrs != null) {
+			// If you assign an input type that is not supported by IE 11 with an assignment expression, an error will occur.
+			//
+			// Also, the DOM does things to inputs based on the value, so it needs set first.
+			// See: https://github.com/MithrilJS/mithril.js/issues/2622
+			if (vnode.tag === "input" && attrs.type != null) vnode.dom.setAttribute("type", attrs.type)
+			var isFileInput = vnode.tag === "input" && attrs.type === "file"
 			for (var key in attrs) {
-				setAttr(vnode, key, old && old[key], attrs[key], ns)
+				setAttr(vnode, key, old && old[key], attrs[key], ns, isFileInput)
 			}
 		}
 		var val
@@ -897,6 +911,7 @@ module.exports = function($window) {
 	//event
 	function updateEvent(vnode, key, value) {
 		if (vnode.events != null) {
+			vnode.events._ = currentRedraw
 			if (vnode.events[key] === value) return
 			if (value != null && (typeof value === "function" || typeof value === "object")) {
 				if (vnode.events[key] == null) vnode.dom.addEventListener(key.slice(2), vnode.events, false)

render/tests/test-attributes.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-component.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var components = require("../../test-utils/components")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")

render/tests/test-createElement.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-createFragment.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-createHTML.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-createNodes.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-createText.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-event.js

@@ -1,18 +1,18 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 
 o.spec("event", function() {
-	var $window, root, redraw, render
+	var $window, root, redraw, render, reallyRender
 	o.beforeEach(function() {
 		$window = domMock()
 		root = $window.document.body
 		redraw = o.spy()
-		var renderer = vdom($window)
+		reallyRender = vdom($window)
 		render = function(dom, vnode) {
-			return renderer(dom, vnode, redraw)
+			return reallyRender(dom, vnode, redraw)
 		}
 	})
 
@@ -355,4 +355,32 @@ o.spec("event", function() {
 		o(redraw.this).equals(undefined)
 		o(redraw.args.length).equals(0)
 	})
+
+	o("handles changed spy", function() {
+		var div1 = {tag: "div", attrs: {ontransitionend: function() {}}}
+
+		reallyRender(root, [div1], redraw)
+		var e = $window.document.createEvent("HTMLEvents")
+		e.initEvent("transitionend", true, true)
+		div1.dom.dispatchEvent(e)
+
+		o(redraw.callCount).equals(1)
+		o(redraw.this).equals(undefined)
+		o(redraw.args.length).equals(0)
+
+		var replacementRedraw = o.spy()
+		var div2 = {tag: "div", attrs: {ontransitionend: function() {}}}
+
+		reallyRender(root, [div2], replacementRedraw)
+		var e = $window.document.createEvent("HTMLEvents")
+		e.initEvent("transitionend", true, true)
+		div2.dom.dispatchEvent(e)
+
+		o(redraw.callCount).equals(1)
+		o(redraw.this).equals(undefined)
+		o(redraw.args.length).equals(0)
+		o(replacementRedraw.callCount).equals(1)
+		o(replacementRedraw.this).equals(undefined)
+		o(replacementRedraw.args.length).equals(0)
+	})
 })

render/tests/test-fragment.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var fragment = require("../../render/fragment")
 var m = require("../../render/hyperscript")
 

render/tests/test-hyperscript.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var m = require("../../render/hyperscript")
 
 o.spec("hyperscript", function() {

render/tests/test-input.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 
@@ -86,6 +86,89 @@ o.spec("form inputs", function() {
 
 			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 updated = {tag: "input", attrs: {type: "file", value: "", onclick: function() {}}}
+			var spy = o.spy()
+			var error = console.error
+
+			render(root, [input])
+
+			input.dom.value = "test.png"
+
+			try {
+				console.error = spy
+				render(root, [updated])
+			} finally {
+				console.error = error
+			}
+
+			o(updated.dom.value).equals("")
+			o(spy.callCount).equals(0)
+		})
+
+		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 updated = {tag: "input", attrs: {type: "file", value: "other.png", onclick: function() {}}}
+			var spy = o.spy()
+			var error = console.error
+
+			render(root, [input])
+
+			input.dom.value = "test.png"
+
+			try {
+				console.error = spy
+				render(root, [updated])
+			} finally {
+				console.error = error
+			}
+
+			o(updated.dom.value).equals("test.png")
+			o(spy.callCount).equals(1)
+		})
+
+		o("retains file input value attribute if DOM value is the same as vdom value and is non-empty", function() {
+			var $window = domMock(o)
+			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 updated1 = {tag: "input", attrs: {type: "file", value: "test.png", onclick: function() {}}}
+			var updated2 = {tag: "input", attrs: {type: "file", value: "test.png", onclick: function() {}}}
+			var spy = o.spy()
+			var error = console.error
+
+			render(root, [input])
+
+			// Verify our assumptions about the outer element state
+			o($window.__getSpies(input.dom).valueSetter.callCount).equals(0)
+			input.dom.value = "test.png"
+			o($window.__getSpies(input.dom).valueSetter.callCount).equals(1)
+
+			try {
+				console.error = spy
+				render(root, [updated1])
+			} finally {
+				console.error = error
+			}
+
+			o(updated1.dom.value).equals("test.png")
+			o(spy.callCount).equals(0)
+			o($window.__getSpies(updated1.dom).valueSetter.callCount).equals(1)
+
+			try {
+				console.error = spy
+				render(root, [updated2])
+			} finally {
+				console.error = error
+			}
+
+			o(updated2.dom.value).equals("test.png")
+			o(spy.callCount).equals(0)
+			o($window.__getSpies(updated2.dom).valueSetter.callCount).equals(1)
+		})
 	})
 
 	o.spec("select", function() {

render/tests/test-normalize.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var Vnode = require("../../render/vnode")
 
 o.spec("normalize", function() {

render/tests/test-normalizeChildren.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var Vnode = require("../../render/vnode")
 
 o.spec("normalizeChildren", function() {

render/tests/test-normalizeComponentChildren.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var m = require("../../render/hyperscript")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")

render/tests/test-onbeforeremove.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var callAsync = require("../../test-utils/callAsync")
 var components = require("../../test-utils/components")
 var domMock = require("../../test-utils/domMock")

render/tests/test-onbeforeupdate.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var components = require("../../test-utils/components")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")

render/tests/test-oncreate.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-oninit.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-onremove.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var components = require("../../test-utils/components")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")

render/tests/test-onupdate.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-render-hyperscript-integration.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var m = require("../../render/hyperscript")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")

render/tests/test-render.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-textContent.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-trust.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var trust = require("../../render/trust")
 
 o.spec("trust", function() {

render/tests/test-updateElement.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-updateFragment.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-updateHTML.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-updateNodes.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var components = require("../../test-utils/components")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")

render/tests/test-updateNodesFuzzer.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")
 

render/tests/test-updateText.js

@@ -1,6 +1,6 @@
 "use strict"
 
-var o = require("../../ospec/ospec")
+var o = require("ospec")
 var domMock = require("../../test-utils/domMock")
 var vdom = require("../../render/render")