From 56b39461f16e2b8db1f536c4d090d52901840557 Mon Sep 17 00:00:00 2001
From: Claudia Meadows <contact@claudiameadows.dev>
Date: Sat, 12 Oct 2024 19:56:01 -0700
Subject: [PATCH] Update Mithril from v0.2 to v2 in example

Signed-off-by: Claudia Meadows <contact@claudiameadows.dev>
---
 examples/mithril/index.html                   |   11 +-
 examples/mithril/js/app.js                    |   15 +-
 examples/mithril/js/controllers/todo.js       |   61 +-
 examples/mithril/js/models/todo.js            |    7 +-
 examples/mithril/js/views/footer-view.js      |   59 +-
 examples/mithril/js/views/input-view.js       |   39 +
 examples/mithril/js/views/main-view.js        |  101 +-
 examples/mithril/js/views/todo-view.js        |   66 +
 .../mithril/node_modules/mithril/mithril.js   | 2737 ++++++++++-------
 .../node_modules/todomvc-app-css/index.css    |   97 +-
 .../node_modules/todomvc-common/base.js       |    2 +-
 examples/mithril/package.json                 |    2 +-
 12 files changed, 1946 insertions(+), 1251 deletions(-)
 create mode 100644 examples/mithril/js/views/input-view.js
 create mode 100644 examples/mithril/js/views/todo-view.js

diff --git a/examples/mithril/index.html b/examples/mithril/index.html
index 8f51b345b3..c4f5fd0d9c 100644
--- a/examples/mithril/index.html
+++ b/examples/mithril/index.html
@@ -10,8 +10,11 @@
 		<section class="todoapp"></section>
 		<footer class="info">
 			<p>Double-click to edit a todo</p>
-			<p>Created by <a href="http://taylorhakes.com">Taylor Hakes</a> and <a href="http://blogue.jpmonette.net">Jean-Philippe Monette</a> <br>(Special thanks to <a
-					href="https://github.com/lhorie/">Leo Horie</a>)</p>
+			<p>
+				Created by <a href="http://taylorhakes.com">Taylor Hakes</a> and <a href="http://blogue.jpmonette.net">Jean-Philippe Monette</a><br>
+				Updated by <a href="https://github.com/dead-claudia">Claudia Meadows</a><br>
+				(Special thanks to <a href="https://github.com/lhorie/">Leo Horie</a>)
+			</p>
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
 		<script src="node_modules/todomvc-common/base.js"></script>
@@ -19,8 +22,10 @@
 		<script src="js/models/todo.js"></script>
 		<script src="js/models/storage.js"></script>
 		<script src="js/controllers/todo.js"></script>
-		<script src="js/views/main-view.js"></script>
 		<script src="js/views/footer-view.js"></script>
+		<script src="js/views/input-view.js"></script>
+		<script src="js/views/todo-view.js"></script>
+		<script src="js/views/main-view.js"></script>
 		<script src="js/app.js"></script>
 	</body>
 </html>
diff --git a/examples/mithril/js/app.js b/examples/mithril/js/app.js
index 5a606b018c..6381410f03 100644
--- a/examples/mithril/js/app.js
+++ b/examples/mithril/js/app.js
@@ -1,12 +1,21 @@
 'use strict';
 /*global m */
 var app = app || {};
+var ctrl = new app.Controller();
 
 app.ENTER_KEY = 13;
 app.ESC_KEY = 27;
 
-m.route.mode = 'hash';
+m.route.prefix = '#!';
 m.route(document.querySelector('.todoapp'), '/', {
-	'/': app,
-	'/:filter': app
+	'/': {
+		render: function () {
+			return m(app.MainView, {ctrl: ctrl});
+		}
+	},
+	'/:filter': {
+		render: function () {
+			return m(app.MainView, {ctrl: ctrl});
+		}
+	}
 });
diff --git a/examples/mithril/js/controllers/todo.js b/examples/mithril/js/controllers/todo.js
index bde8b64f6a..2ba18fe979 100644
--- a/examples/mithril/js/controllers/todo.js
+++ b/examples/mithril/js/controllers/todo.js
@@ -2,7 +2,7 @@
 /*global m */
 
 var app = app || {};
-app.controller = function () {
+app.Controller = function () {
 
 	// Todo collection
 	this.list = app.storage.get();
@@ -13,65 +13,67 @@ app.controller = function () {
 	});
 
 	// Temp title placeholder
-	this.title = m.prop('');
+	this.title = '';
 
 	// Todo list filter
-	this.filter = m.prop(m.route.param('filter') || '');
+	this.filter = function () {
+		return m.route.param('filter') || '';
+	};
 
 	this.add = function () {
-		var title = this.title().trim();
+		var title = this.title.trim();
 		if (title) {
 			this.list.push(new app.Todo({title: title}));
 			app.storage.put(this.list);
 		}
-		this.title('');
+		this.title = '';
 	};
 
 	this.isVisible = function (todo) {
 		switch (this.filter()) {
 			case 'active':
-				return !todo.completed();
+				return !todo.completed;
 			case 'completed':
-				return todo.completed();
+				return todo.completed;
 			default:
 				return true;
 		}
 	};
 
 	this.complete = function (todo) {
-		if (todo.completed()) {
-			todo.completed(false);
+		if (todo.completed) {
+			todo.completed = false;
 		} else {
-			todo.completed(true);
+			todo.completed = true;
 		}
 		app.storage.put(this.list);
 	};
 
 	this.edit = function (todo) {
-		todo.previousTitle = todo.title();
-		todo.editing(true);
+		todo.previousTitle = todo.title;
+		todo.editing = true;
 	};
 
 	this.doneEditing = function (todo, index) {
-		if (!todo.editing()) {
+		if (!todo.editing) {
 			return;
 		}
 
-		todo.editing(false);
-		todo.title(todo.title().trim());
-		if (!todo.title()) {
+		todo.editing = false;
+		todo.title = todo.title.trim();
+		if (!todo.title) {
 			this.list.splice(index, 1);
 		}
 		app.storage.put(this.list);
 	};
 
 	this.cancelEditing = function (todo) {
-		todo.title(todo.previousTitle);
-		todo.editing(false);
+		todo.title = todo.previousTitle;
+		todo.editing = false;
 	};
 
 	this.clearTitle = function () {
-		this.title('');
+		this.title = '';
 	};
 
 	this.remove = function (key) {
@@ -81,7 +83,7 @@ app.controller = function () {
 
 	this.clearCompleted = function () {
 		for (var i = this.list.length - 1; i >= 0; i--) {
-			if (this.list[i].completed()) {
+			if (this.list[i].completed) {
 				this.list.splice(i, 1);
 			}
 		}
@@ -89,28 +91,17 @@ app.controller = function () {
 	};
 
 	this.amountCompleted = function () {
-		var amount = 0;
-		for (var i = 0; i < this.list.length; i++) {
-			if (this.list[i].completed()) {
-				amount++;
-			}
-		}
-		return amount;
+		return this.list.filter(function (todo) { return todo.completed; }).length;
 	};
 
 	this.allCompleted = function () {
-		for (var i = 0; i < this.list.length; i++) {
-			if (!this.list[i].completed()) {
-				return false;
-			}
-		}
-		return true;
+		return this.list.every(function (todo) { return todo.completed; });
 	};
 
-	this.completeAll = function () {
+	this.toggleAll = function () {
 		var allCompleted = this.allCompleted();
 		for (var i = 0; i < this.list.length; i++) {
-			this.list[i].completed(!allCompleted);
+			this.list[i].completed = !allCompleted;
 		}
 		app.storage.put(this.list);
 	};
diff --git a/examples/mithril/js/models/todo.js b/examples/mithril/js/models/todo.js
index 8ca15a6241..032a285cb4 100644
--- a/examples/mithril/js/models/todo.js
+++ b/examples/mithril/js/models/todo.js
@@ -1,5 +1,4 @@
 'use strict';
-/*global m */
 var app = app || {};
 
 var uniqueId = (function () {
@@ -11,8 +10,8 @@ var uniqueId = (function () {
 
 // Todo Model
 app.Todo = function (data) {
-	this.title = m.prop(data.title);
-	this.completed = m.prop(data.completed || false);
-	this.editing = m.prop(data.editing || false);
+	this.title = data.title;
+	this.completed = data.completed || false;
+	this.editing = data.editing || false;
 	this.key = uniqueId();
 };
diff --git a/examples/mithril/js/views/footer-view.js b/examples/mithril/js/views/footer-view.js
index b0640c33fb..13035f6712 100644
--- a/examples/mithril/js/views/footer-view.js
+++ b/examples/mithril/js/views/footer-view.js
@@ -2,35 +2,38 @@
 /*global m */
 var app = app || {};
 
-app.footer = function (ctrl) {
-	var amountCompleted = ctrl.amountCompleted();
-	var amountActive = ctrl.list.length - amountCompleted;
+app.FooterView = {
+	view: function (vnode) {
+		var amountCompleted = vnode.attrs.amountCompleted;
+		var amountActive = vnode.attrs.list.length - amountCompleted;
 
-	return m('footer.footer', [
-		m('span.todo-count', [
-			m('strong', amountActive), ' item' + (amountActive !== 1 ? 's' : '') + ' left'
-		]),
-		m('ul.filters', [
-			m('li', [
-				m('a[href=/]', {
-					config: m.route,
-					class: ctrl.filter() === '' ? 'selected' : ''
-				}, 'All')
+		return m('footer.footer', [
+			m('span.todo-count', [
+				m('strong', amountActive), ' item', amountActive !== 1 ? 's' : '', ' left'
 			]),
-			m('li', [
-				m('a[href=/active]', {
-					config: m.route,
-					class: ctrl.filter() === 'active' ? 'selected' : ''
-				}, 'Active')
+			m('ul.filters', [
+				m('li', [
+					m(m.route.Link, {
+						href: '/',
+						class: vnode.attrs.filter === '' ? 'selected' : ''
+					}, 'All')
+				]),
+				m('li', [
+					m(m.route.Link, {
+						href: '/active',
+						class: vnode.attrs.filter === 'active' ? 'selected' : ''
+					}, 'Active')
+				]),
+				m('li', [
+					m(m.route.Link, {
+						href: '/completed',
+						class: vnode.attrs.filter === 'completed' ? 'selected' : ''
+					}, 'Completed')
+				])
 			]),
-			m('li', [
-				m('a[href=/completed]', {
-					config: m.route,
-					class: ctrl.filter() === 'completed' ? 'selected' : ''
-				}, 'Completed')
-			])
-		]), ctrl.amountCompleted() === 0 ? '' : m('button.clear-completed', {
-			onclick: ctrl.clearCompleted.bind(ctrl)
-		}, 'Clear completed')
-	]);
+			amountCompleted === 0 ? '' : m('button.clear-completed', {
+				onclick: vnode.attrs.clearCompleted
+			}, 'Clear completed')
+		]);
+	}
 };
diff --git a/examples/mithril/js/views/input-view.js b/examples/mithril/js/views/input-view.js
new file mode 100644
index 0000000000..55bbac1356
--- /dev/null
+++ b/examples/mithril/js/views/input-view.js
@@ -0,0 +1,39 @@
+'use strict';
+/*global m */
+var app = app || {};
+
+app.InputView = function () {
+	var focused = false;
+
+	return {
+		view: function (vnode) {
+            var ctrl = vnode.attrs.ctrl;
+
+			return m('input.new-todo[placeholder="What needs to be done?"]', {
+                onkeyup: function (e) {
+                    if (e.keyCode === app.ENTER_KEY) {
+                        ctrl.add();
+                    } else if (e.keyCode === app.ESC_KEY) {
+                        ctrl.clearTitle();
+                    }
+                },
+                value: ctrl.title,
+                oninput: function (e) {
+                    ctrl.title = e.target.value;
+                },
+                oncreate: function (vnode) {
+                    if (!focused) {
+                        vnode.dom.focus();
+                        focused = true;
+                    }
+                },
+                onupdate: function (vnode) {
+                    if (!focused) {
+                        vnode.dom.focus();
+                        focused = true;
+                    }
+                }
+            });
+        }
+	};
+};
diff --git a/examples/mithril/js/views/main-view.js b/examples/mithril/js/views/main-view.js
index d2130f8243..8cd5cc7c65 100644
--- a/examples/mithril/js/views/main-view.js
+++ b/examples/mithril/js/views/main-view.js
@@ -2,38 +2,13 @@
 /*global m */
 var app = app || {};
 
-// View utility
-app.watchInput = function (onenter, onescape) {
-	return function (e) {
-		m.redraw.strategy('none');
-		if (e.keyCode === app.ENTER_KEY) {
-			onenter();
-			m.redraw.strategy('diff');
-		} else if (e.keyCode === app.ESC_KEY) {
-			onescape();
-			m.redraw.strategy('diff');
-		}
-	};
-};
-
-app.view = (function () {
-	var focused = false;
-
-	return function (ctrl) {
+app.MainView = {
+	view: function (vnode) {
+		var ctrl = vnode.attrs.ctrl;
 		return [
 			m('header.header', [
-				m('h1', 'todos'), m('input.new-todo[placeholder="What needs to be done?"]', {
-					onkeyup: app.watchInput(ctrl.add.bind(ctrl),
-						ctrl.clearTitle.bind(ctrl)),
-					value: ctrl.title(),
-					oninput: m.withAttr('value', ctrl.title),
-					config: function (element) {
-						if (!focused) {
-							element.focus();
-							focused = true;
-						}
-					}
-				})
+				m('h1', 'todos'),
+				m(app.InputView, {ctrl: ctrl}),
 			]),
 			m('section.main', {
 				style: {
@@ -41,54 +16,36 @@ app.view = (function () {
 				}
 			}, [
 				m('input#toggle-all.toggle-all[type=checkbox]', {
-					onclick: ctrl.completeAll.bind(ctrl),
+					onclick: function () {
+						ctrl.toggleAll();
+					},
 					checked: ctrl.allCompleted()
 				}),
 				m('label', {
 					for: 'toggle-all'
 				}),
 				m('ul.todo-list', [
-					ctrl.list.filter(ctrl.isVisible.bind(ctrl)).map(function (task, index) {
-						return m('li', { class: (function () {
-							var classes = '';
-							classes += task.completed() ? 'completed' : '';
-							classes += task.editing() ? ' editing' : '';
-							return classes;
-						})(),
-						key: task.key
-						}, [
-							m('.view', [
-								m('input.toggle[type=checkbox]', {
-									onclick: m.withAttr('checked', ctrl.complete.bind(ctrl, task)),
-									checked: task.completed()
-								}),
-								m('label', {
-									ondblclick: ctrl.edit.bind(ctrl, task)
-								}, task.title()),
-								m('button.destroy', {
-									onclick: ctrl.remove.bind(ctrl, index)
-								})
-							]), m('input.edit', {
-								value: task.title(),
-								onkeyup: app.watchInput(
-									ctrl.doneEditing.bind(ctrl, task, index),
-									ctrl.cancelEditing.bind(ctrl, task)
-								),
-								oninput: m.withAttr('value', function (value) {
-									m.redraw.strategy('none');
-									task.title(value);
-								}),
-								config: function (element) {
-									if (task.editing()) {
-										element.focus();
-									}
-								},
-								onblur: ctrl.doneEditing.bind(ctrl, task, index)
-							})
-						]);
-					})
+					ctrl.list
+						.filter(function (task) {
+							return ctrl.isVisible(task);
+						})
+						.map(function (task, index) {
+							return m(app.TodoView, {
+								ctrl: ctrl,
+								task: task,
+								index: index
+							});
+						})
 				])
-			]), ctrl.list.length === 0 ? '' : app.footer(ctrl)
+			]),
+			ctrl.list.length === 0 ? '' : m(app.FooterView, {
+				amountCompleted: ctrl.amountCompleted(),
+				list: ctrl.list,
+				filter: ctrl.filter(),
+				clearCompleted: function () {
+					ctrl.clearCompleted();
+				}
+			})
 		];
 	}
-})();
+};
diff --git a/examples/mithril/js/views/todo-view.js b/examples/mithril/js/views/todo-view.js
new file mode 100644
index 0000000000..47be32037a
--- /dev/null
+++ b/examples/mithril/js/views/todo-view.js
@@ -0,0 +1,66 @@
+'use strict';
+/*global m */
+var app = app || {};
+
+app.TodoView = {
+    view: function (vnode) {
+        var ctrl = vnode.attrs.ctrl;
+        var task = vnode.attrs.task;
+        var index = vnode.attrs.index;
+
+        return m('li', {
+            class: (
+                (task.completed ? 'completed' : '') +
+                (task.editing ? ' editing' : '') +
+                ''
+            ),
+            key: task.key
+        }, [
+            m('.view', [
+                m('input.toggle[type=checkbox]', {
+                    onclick: function () {
+                        ctrl.complete(task);
+                    },
+                    checked: task.completed
+                }),
+                m('label', {
+                    ondblclick: function () {
+                        ctrl.edit(task);
+                    }
+                }, task.title),
+                m('button.destroy', {
+                    onclick: function () {
+                        ctrl.remove(index);
+                    }
+                })
+            ]),
+            m('input.edit', {
+                value: task.title,
+                onkeyup: function (e) {
+                    if (e.keyCode === app.ENTER_KEY) {
+                        ctrl.doneEditing(task, index);
+                    } else if (e.keyCode === app.ESC_KEY) {
+                        ctrl.cancelEditing(task);
+                    }
+                },
+                oninput: function (e) {
+                    e.redraw = false;
+                    task.title = e.target.value;
+                },
+                oncreate: function (vnode) {
+                    if (task.editing) {
+                        vnode.dom.focus();
+                    }
+                },
+                onupdate: function (vnode) {
+                    if (task.editing) {
+                        vnode.dom.focus();
+                    }
+                },
+                onblur: function () {
+                    ctrl.doneEditing(task, index);
+                }
+            })
+        ]);
+    }
+};
diff --git a/examples/mithril/node_modules/mithril/mithril.js b/examples/mithril/node_modules/mithril/mithril.js
index 707d09aa70..4fd695556d 100644
--- a/examples/mithril/node_modules/mithril/mithril.js
+++ b/examples/mithril/node_modules/mithril/mithril.js
@@ -1,1159 +1,1768 @@
-var m = (function app(window, undefined) {
-	var OBJECT = "[object Object]", ARRAY = "[object Array]", STRING = "[object String]", FUNCTION = "function";
-	var type = {}.toString;
-	var parser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[.+?\])/g, attrParser = /\[(.+?)(?:=("|'|)(.*?)\2)?\]/;
-	var voidElements = /^(AREA|BASE|BR|COL|COMMAND|EMBED|HR|IMG|INPUT|KEYGEN|LINK|META|PARAM|SOURCE|TRACK|WBR)$/;
-	var noop = function() {}
-
-	// caching commonly used variables
-	var $document, $location, $requestAnimationFrame, $cancelAnimationFrame;
-
-	// self invoking function needed because of the way mocks work
-	function initialize(window){
-		$document = window.document;
-		$location = window.location;
-		$cancelAnimationFrame = window.cancelAnimationFrame || window.clearTimeout;
-		$requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
-	}
-
-	initialize(window);
-
-
-	/**
-	 * @typedef {String} Tag
-	 * A string that looks like -> div.classname#id[param=one][param2=two]
-	 * Which describes a DOM node
-	 */
-
-	/**
-	 *
-	 * @param {Tag} The DOM node tag
-	 * @param {Object=[]} optional key-value pairs to be mapped to DOM attrs
-	 * @param {...mNode=[]} Zero or more Mithril child nodes. Can be an array, or splat (optional)
-	 *
-	 */
-	function m() {
-		var args = [].slice.call(arguments);
-		var hasAttrs = args[1] != null && type.call(args[1]) === OBJECT && !("tag" in args[1] || "view" in args[1]) && !("subtree" in args[1]);
-		var attrs = hasAttrs ? args[1] : {};
-		var classAttrName = "class" in attrs ? "class" : "className";
-		var cell = {tag: "div", attrs: {}};
-		var match, classes = [];
-		if (type.call(args[0]) != STRING) throw new Error("selector in m(selector, attrs, children) should be a string")
-		while (match = parser.exec(args[0])) {
-			if (match[1] === "" && match[2]) cell.tag = match[2];
-			else if (match[1] === "#") cell.attrs.id = match[2];
-			else if (match[1] === ".") classes.push(match[2]);
-			else if (match[3][0] === "[") {
-				var pair = attrParser.exec(match[3]);
-				cell.attrs[pair[1]] = pair[3] || (pair[2] ? "" :true)
+;(function() {
+"use strict"
+function Vnode(tag, key, attrs0, children, text, dom) {
+	return {tag: tag, key: key, attrs: attrs0, children: children, text: text, dom: dom, domSize: undefined, state: undefined, events: undefined, instance: undefined}
+}
+Vnode.normalize = function(node) {
+	if (Array.isArray(node)) return Vnode("[", undefined, undefined, Vnode.normalizeChildren(node), undefined, undefined)
+	if (node == null || typeof node === "boolean") return null
+	if (typeof node === "object") return node
+	return Vnode("#", undefined, undefined, String(node), undefined, undefined)
+}
+Vnode.normalizeChildren = function(input) {
+	var children = []
+	if (input.length) {
+		var isKeyed = input[0] != null && input[0].key != null
+		// Note: this is a *very* perf-sensitive check.
+		// Fun fact: merging the loop like this is somehow faster than splitting
+		// it, noticeably so.
+		for (var i = 1; i < input.length; i++) {
+			if ((input[i] != null && input[i].key != null) !== isKeyed) {
+				throw new TypeError(
+					isKeyed && (input[i] != null || typeof input[i] === "boolean")
+						? "In fragments, vnodes must either all have keys or none have keys. You may wish to consider using an explicit keyed empty fragment, m.fragment({key: ...}), instead of a hole."
+						: "In fragments, vnodes must either all have keys or none have keys."
+				)
 			}
 		}
-
-		var children = hasAttrs ? args.slice(2) : args.slice(1);
-		if (children.length === 1 && type.call(children[0]) === ARRAY) {
-			cell.children = children[0]
+		for (var i = 0; i < input.length; i++) {
+			children[i] = Vnode.normalize(input[i])
 		}
-		else {
-			cell.children = children
-		}
-		
-		for (var attrName in attrs) {
-			if (attrs.hasOwnProperty(attrName)) {
-				if (attrName === classAttrName && attrs[attrName] != null && attrs[attrName] !== "") {
-					classes.push(attrs[attrName])
-					cell.attrs[attrName] = "" //create key in correct iteration order
-				}
-				else cell.attrs[attrName] = attrs[attrName]
+	}
+	return children
+}
+// Call via `hyperscriptVnode0.apply(startOffset, arguments)`
+//
+// The reason I do it this way, forwarding the arguments and passing the start
+// offset in `this`, is so I don't have to create a temporary array in a
+// performance-critical path.
+//
+// In native ES6, I'd instead add a final `...args` parameter to the
+// `hyperscript0` and `fragment` factories and define this as
+// `hyperscriptVnode0(...args)`, since modern engines do optimize that away. But
+// ES5 (what Mithril.js requires thanks to IE support) doesn't give me that luxury,
+// and engines aren't nearly intelligent enough to do either of these:
+//
+// 1. Elide the allocation for `[].slice.call(arguments, 1)` when it's passed to
+//    another function only to be indexed.
+// 2. Elide an `arguments` allocation when it's passed to any function other
+//    than `Function.prototype.apply` or `Reflect.apply`.
+//
+// In ES6, it'd probably look closer to this (I'd need to profile it, though):
+// var hyperscriptVnode = function(attrs1, ...children0) {
+//     if (attrs1 == null || typeof attrs1 === "object" && attrs1.tag == null && !Array.isArray(attrs1)) {
+//         if (children0.length === 1 && Array.isArray(children0[0])) children0 = children0[0]
+//     } else {
+//         children0 = children0.length === 0 && Array.isArray(attrs1) ? attrs1 : [attrs1, ...children0]
+//         attrs1 = undefined
+//     }
+//
+//     if (attrs1 == null) attrs1 = {}
+//     return Vnode("", attrs1.key, attrs1, children0)
+// }
+var hyperscriptVnode = function() {
+	var attrs1 = arguments[this], start = this + 1, children0
+	if (attrs1 == null) {
+		attrs1 = {}
+	} else if (typeof attrs1 !== "object" || attrs1.tag != null || Array.isArray(attrs1)) {
+		attrs1 = {}
+		start = this
+	}
+	if (arguments.length === start + 1) {
+		children0 = arguments[start]
+		if (!Array.isArray(children0)) children0 = [children0]
+	} else {
+		children0 = []
+		while (start < arguments.length) children0.push(arguments[start++])
+	}
+	return Vnode("", attrs1.key, attrs1, children0)
+}
+// This exists so I'm1 only saving it once.
+var hasOwn = {}.hasOwnProperty
+var selectorParser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g
+var selectorCache = {}
+function isEmpty(object) {
+	for (var key in object) if (hasOwn.call(object, key)) return false
+	return true
+}
+function compileSelector(selector) {
+	var match, tag = "div", classes = [], attrs = {}
+	while (match = selectorParser.exec(selector)) {
+		var type = match[1], value = match[2]
+		if (type === "" && value !== "") tag = value
+		else if (type === "#") attrs.id = value
+		else if (type === ".") classes.push(value)
+		else if (match[3][0] === "[") {
+			var attrValue = match[6]
+			if (attrValue) attrValue = attrValue.replace(/\\(["'])/g, "$1").replace(/\\\\/g, "\\")
+			if (match[4] === "class") classes.push(attrValue)
+			else attrs[match[4]] = attrValue === "" ? attrValue : attrValue || true
+		}
+	}
+	if (classes.length > 0) attrs.className = classes.join(" ")
+	return selectorCache[selector] = {tag: tag, attrs: attrs}
+}
+function execSelector(state, vnode) {
+	var attrs = vnode.attrs
+	var hasClass = hasOwn.call(attrs, "class")
+	var className = hasClass ? attrs.class : attrs.className
+	vnode.tag = state.tag
+	if (!isEmpty(state.attrs)) {
+		var newAttrs = {}
+		for (var key in attrs) {
+			if (hasOwn.call(attrs, key)) newAttrs[key] = attrs[key]
+		}
+		attrs = newAttrs
+	}
+	for (var key in state.attrs) {
+		if (hasOwn.call(state.attrs, key) && key !== "className" && !hasOwn.call(attrs, key)){
+			attrs[key] = state.attrs[key]
+		}
+	}
+	if (className != null || state.attrs.className != null) attrs.className =
+		className != null
+			? state.attrs.className != null
+				? String(state.attrs.className) + " " + String(className)
+				: className
+			: state.attrs.className != null
+				? state.attrs.className
+				: null
+	if (hasClass) attrs.class = null
+	vnode.attrs = attrs
+	return vnode
+}
+function hyperscript(selector) {
+	if (selector == null || typeof selector !== "string" && typeof selector !== "function" && typeof selector.view !== "function") {
+		throw Error("The selector must be either a string or a component.");
+	}
+	var vnode = hyperscriptVnode.apply(1, arguments)
+	if (typeof selector === "string") {
+		vnode.children = Vnode.normalizeChildren(vnode.children)
+		if (selector !== "[") return execSelector(selectorCache[selector] || compileSelector(selector), vnode)
+	}
+	vnode.tag = selector
+	return vnode
+}
+hyperscript.trust = function(html) {
+	if (html == null) html = ""
+	return Vnode("<", undefined, undefined, html, undefined, undefined)
+}
+hyperscript.fragment = function() {
+	var vnode2 = hyperscriptVnode.apply(0, arguments)
+	vnode2.tag = "["
+	vnode2.children = Vnode.normalizeChildren(vnode2.children)
+	return vnode2
+}
+var delayedRemoval0 = new WeakMap
+function *domFor1(vnode4, object = {}) {
+	// To avoid unintended mangling of the internal bundler,
+	// parameter destructuring is0 not used here.
+	var dom = vnode4.dom
+	var domSize0 = vnode4.domSize
+	var generation0 = object.generation
+	if (dom != null) do {
+		var nextSibling = dom.nextSibling
+		if (delayedRemoval0.get(dom) === generation0) {
+			yield dom
+			domSize0--
+		}
+		dom = nextSibling
+	}
+	while (domSize0)
+}
+var df = {
+	delayedRemoval: delayedRemoval0,
+	domFor: domFor1,
+}
+var delayedRemoval = df.delayedRemoval
+var domFor0 = df.domFor
+var _11 = function() {
+	var nameSpace = {
+		svg: "http://www.w3.org/2000/svg",
+		math: "http://www.w3.org/1998/Math/MathML"
+	}
+	var currentRedraw
+	var currentRender
+	function getDocument(dom) {
+		return dom.ownerDocument;
+	}
+	function getNameSpace(vnode3) {
+		return vnode3.attrs && vnode3.attrs.xmlns || nameSpace[vnode3.tag]
+	}
+	//sanity check to discourage people from doing `vnode3.state = ...`
+	function checkState(vnode3, original) {
+		if (vnode3.state !== original) throw new Error("'vnode.state' must not be modified.")
+	}
+	//Note: the hook is passed as the `this` argument to allow proxying the
+	//arguments without requiring a full array allocation to do so. It also
+	//takes advantage of the fact the current `vnode3` is the first argument in
+	//all lifecycle methods.
+	function callHook(vnode3) {
+		var original = vnode3.state
+		try {
+			return this.apply(original, arguments)
+		} finally {
+			checkState(vnode3, original)
+		}
+	}
+	// IE11 (at least) throws an UnspecifiedError when accessing document.activeElement when
+	// inside an iframe. Catch and swallow this error, and heavy-handidly return null.
+	function activeElement(dom) {
+		try {
+			return getDocument(dom).activeElement
+		} catch (e) {
+			return null
+		}
+	}
+	//create
+	function createNodes(parent, vnodes, start, end, hooks, nextSibling, ns) {
+		for (var i = start; i < end; i++) {
+			var vnode3 = vnodes[i]
+			if (vnode3 != null) {
+				createNode(parent, vnode3, hooks, ns, nextSibling)
 			}
 		}
-		if (classes.length > 0) cell.attrs[classAttrName] = classes.join(" ");
-		
-		return cell
-	}
-	function build(parentElement, parentTag, parentCache, parentIndex, data, cached, shouldReattach, index, editable, namespace, configs) {
-		//`build` is a recursive function that manages creation/diffing/removal of DOM elements based on comparison between `data` and `cached`
-		//the diff algorithm can be summarized as this:
-		//1 - compare `data` and `cached`
-		//2 - if they are different, copy `data` to `cached` and update the DOM based on what the difference is
-		//3 - recursively apply this algorithm for every array and for the children of every virtual element
-
-		//the `cached` data structure is essentially the same as the previous redraw's `data` data structure, with a few additions:
-		//- `cached` always has a property called `nodes`, which is a list of DOM elements that correspond to the data represented by the respective virtual element
-		//- in order to support attaching `nodes` as a property of `cached`, `cached` is *always* a non-primitive object, i.e. if the data was a string, then cached is a String instance. If data was `null` or `undefined`, cached is `new String("")`
-		//- `cached also has a `configContext` property, which is the state storage object exposed by config(element, isInitialized, context)
-		//- when `cached` is an Object, it represents a virtual element; when it's an Array, it represents a list of elements; when it's a String, Number or Boolean, it represents a text node
-
-		//`parentElement` is a DOM element used for W3C DOM API calls
-		//`parentTag` is only used for handling a corner case for textarea values
-		//`parentCache` is used to remove nodes in some multi-node cases
-		//`parentIndex` and `index` are used to figure out the offset of nodes. They're artifacts from before arrays started being flattened and are likely refactorable
-		//`data` and `cached` are, respectively, the new and old nodes being diffed
-		//`shouldReattach` is a flag indicating whether a parent node was recreated (if so, and if this node is reused, then this node must reattach itself to the new parent)
-		//`editable` is a flag that indicates whether an ancestor is contenteditable
-		//`namespace` indicates the closest HTML namespace as it cascades down from an ancestor
-		//`configs` is a list of config functions to run after the topmost `build` call finishes running
-
-		//there's logic that relies on the assumption that null and undefined data are equivalent to empty strings
-		//- this prevents lifecycle surprises from procedural helpers that mix implicit and explicit return statements (e.g. function foo() {if (cond) return m("div")}
-		//- it simplifies diffing code
-		//data.toString() might throw or return null if data is the return value of Console.log in Firefox (behavior depends on version)
-		try {if (data == null || data.toString() == null) data = "";} catch (e) {data = ""}
-		if (data.subtree === "retain") return cached;
-		var cachedType = type.call(cached), dataType = type.call(data);
-		if (cached == null || cachedType !== dataType) {
-			if (cached != null) {
-				if (parentCache && parentCache.nodes) {
-					var offset = index - parentIndex;
-					var end = offset + (dataType === ARRAY ? data : cached.nodes).length;
-					clear(parentCache.nodes.slice(offset, end), parentCache.slice(offset, end))
-				}
-				else if (cached.nodes) clear(cached.nodes, cached)
+	}
+	function createNode(parent, vnode3, hooks, ns, nextSibling) {
+		var tag = vnode3.tag
+		if (typeof tag === "string") {
+			vnode3.state = {}
+			if (vnode3.attrs != null) initLifecycle(vnode3.attrs, vnode3, hooks)
+			switch (tag) {
+				case "#": createText(parent, vnode3, nextSibling); break
+				case "<": createHTML(parent, vnode3, ns, nextSibling); break
+				case "[": createFragment(parent, vnode3, hooks, ns, nextSibling); break
+				default: createElement(parent, vnode3, hooks, ns, nextSibling)
 			}
-			cached = new data.constructor;
-			if (cached.tag) cached = {}; //if constructor creates a virtual dom element, use a blank object as the base cached node instead of copying the virtual el (#277)
-			cached.nodes = []
-		}
-
-		if (dataType === ARRAY) {
-			//recursively flatten array
-			for (var i = 0, len = data.length; i < len; i++) {
-				if (type.call(data[i]) === ARRAY) {
-					data = data.concat.apply([], data);
-					i-- //check current index again and flatten until there are no more nested arrays at that index
-					len = data.length
-				}
+		}
+		else createComponent(parent, vnode3, hooks, ns, nextSibling)
+	}
+	function createText(parent, vnode3, nextSibling) {
+		vnode3.dom = getDocument(parent).createTextNode(vnode3.children)
+		insertDOM(parent, vnode3.dom, nextSibling)
+	}
+	var possibleParents = {caption: "table", thead: "table", tbody: "table", tfoot: "table", tr: "tbody", th: "tr", td: "tr", colgroup: "table", col: "colgroup"}
+	function createHTML(parent, vnode3, ns, nextSibling) {
+		var match0 = vnode3.children.match(/^\s*?<(\w+)/im) || []
+		// not using the proper parent makes the child element(s) vanish.
+		//     var div = document.createElement("div")
+		//     div.innerHTML = "<td>i</td><td>j</td>"
+		//     console.log(div.innerHTML)
+		// --> "ij", no <td> in sight.
+		var temp = getDocument(parent).createElement(possibleParents[match0[1]] || "div")
+		if (ns === "http://www.w3.org/2000/svg") {
+			temp.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\">" + vnode3.children + "</svg>"
+			temp = temp.firstChild
+		} else {
+			temp.innerHTML = vnode3.children
+		}
+		vnode3.dom = temp.firstChild
+		vnode3.domSize = temp.childNodes.length
+		// Capture nodes to remove, so we don't confuse them.
+		var fragment = getDocument(parent).createDocumentFragment()
+		var child
+		while (child = temp.firstChild) {
+			fragment.appendChild(child)
+		}
+		insertDOM(parent, fragment, nextSibling)
+	}
+	function createFragment(parent, vnode3, hooks, ns, nextSibling) {
+		var fragment = getDocument(parent).createDocumentFragment()
+		if (vnode3.children != null) {
+			var children2 = vnode3.children
+			createNodes(fragment, children2, 0, children2.length, hooks, null, ns)
+		}
+		vnode3.dom = fragment.firstChild
+		vnode3.domSize = fragment.childNodes.length
+		insertDOM(parent, fragment, nextSibling)
+	}
+	function createElement(parent, vnode3, hooks, ns, nextSibling) {
+		var tag = vnode3.tag
+		var attrs2 = vnode3.attrs
+		var is = attrs2 && attrs2.is
+		ns = getNameSpace(vnode3) || ns
+		var element = ns ?
+			is ? getDocument(parent).createElementNS(ns, tag, {is: is}) : getDocument(parent).createElementNS(ns, tag) :
+			is ? getDocument(parent).createElement(tag, {is: is}) : getDocument(parent).createElement(tag)
+		vnode3.dom = element
+		if (attrs2 != null) {
+			setAttrs(vnode3, attrs2, ns)
+		}
+		insertDOM(parent, element, nextSibling)
+		if (!maybeSetContentEditable(vnode3)) {
+			if (vnode3.children != null) {
+				var children2 = vnode3.children
+				createNodes(element, children2, 0, children2.length, hooks, null, ns)
+				if (vnode3.tag === "select" && attrs2 != null) setLateSelectAttrs(vnode3, attrs2)
 			}
-			
-			var nodes = [], intact = cached.length === data.length, subArrayCount = 0;
-
-			//keys algorithm: sort elements without recreating them if keys are present
-			//1) create a map of all existing keys, and mark all for deletion
-			//2) add new keys to map and mark them for addition
-			//3) if key exists in new list, change action from deletion to a move
-			//4) for each key, handle its corresponding action as marked in previous steps
-			var DELETION = 1, INSERTION = 2 , MOVE = 3;
-			var existing = {}, shouldMaintainIdentities = false;
-			for (var i = 0; i < cached.length; i++) {
-				if (cached[i] && cached[i].attrs && cached[i].attrs.key != null) {
-					shouldMaintainIdentities = true;
-					existing[cached[i].attrs.key] = {action: DELETION, index: i}
+		}
+	}
+	function initComponent(vnode3, hooks) {
+		var sentinel
+		if (typeof vnode3.tag.view === "function") {
+			vnode3.state = Object.create(vnode3.tag)
+			sentinel = vnode3.state.view
+			if (sentinel.$$reentrantLock$$ != null) return
+			sentinel.$$reentrantLock$$ = true
+		} else {
+			vnode3.state = void 0
+			sentinel = vnode3.tag
+			if (sentinel.$$reentrantLock$$ != null) return
+			sentinel.$$reentrantLock$$ = true
+			vnode3.state = (vnode3.tag.prototype != null && typeof vnode3.tag.prototype.view === "function") ? new vnode3.tag(vnode3) : vnode3.tag(vnode3)
+		}
+		initLifecycle(vnode3.state, vnode3, hooks)
+		if (vnode3.attrs != null) initLifecycle(vnode3.attrs, vnode3, hooks)
+		vnode3.instance = Vnode.normalize(callHook.call(vnode3.state.view, vnode3))
+		if (vnode3.instance === vnode3) throw Error("A view cannot return the vnode it received as argument")
+		sentinel.$$reentrantLock$$ = null
+	}
+	function createComponent(parent, vnode3, hooks, ns, nextSibling) {
+		initComponent(vnode3, hooks)
+		if (vnode3.instance != null) {
+			createNode(parent, vnode3.instance, hooks, ns, nextSibling)
+			vnode3.dom = vnode3.instance.dom
+			vnode3.domSize = vnode3.dom != null ? vnode3.instance.domSize : 0
+		}
+		else {
+			vnode3.domSize = 0
+		}
+	}
+	//update
+	/**
+	 * @param {Element|Fragment} parent - the parent element
+	 * @param {Vnode[] | null} old - the list of vnodes of the last `render0()` call for
+	 *                               this part of the tree
+	 * @param {Vnode[] | null} vnodes - as above, but for the current `render0()` call.
+	 * @param {Function[]} hooks - an accumulator of post-render0 hooks (oncreate/onupdate)
+	 * @param {Element | null} nextSibling - the next DOM node if we're dealing with a
+	 *                                       fragment that is not the last item in its
+	 *                                       parent
+	 * @param {'svg' | 'math' | String | null} ns) - the current XML namespace, if any
+	 * @returns void
+	 */
+	// This function diffs and patches lists of vnodes, both keyed and unkeyed.
+	//
+	// We will:
+	//
+	// 1. describe its general structure
+	// 2. focus on the diff algorithm optimizations
+	// 3. discuss DOM node operations.
+	// ## Overview:
+	//
+	// The updateNodes() function:
+	// - deals with trivial cases
+	// - determines whether the lists are keyed or unkeyed based on the first non-null node
+	//   of each list.
+	// - diffs them and patches the DOM if needed (that's the brunt of the code)
+	// - manages the leftovers: after diffing, are there:
+	//   - old nodes left to remove?
+	// 	 - new nodes to insert?
+	// 	 deal with them!
+	//
+	// The lists are only iterated over once, with an exception for the nodes in `old` that
+	// are visited in the fourth part of the diff and in the `removeNodes` loop.
+	// ## Diffing
+	//
+	// Reading https://github.com/localvoid/ivi/blob/ddc09d06abaef45248e6133f7040d00d3c6be853/packages/ivi/src/vdom/implementation.ts#L617-L837
+	// may be good for context on longest increasing subsequence-based logic for moving nodes.
+	//
+	// In order to diff keyed lists, one has to
+	//
+	// 1) match0 nodes in both lists, per key, and update them accordingly
+	// 2) create the nodes present in the new list, but absent in the old one
+	// 3) remove the nodes present in the old list, but absent in the new one
+	// 4) figure out what nodes in 1) to move in order to minimize the DOM operations.
+	//
+	// To achieve 1) one can create a dictionary of keys => index (for the old list), then iterate
+	// over the new list and for each new vnode3, find the corresponding vnode3 in the old list using
+	// the map.
+	// 2) is achieved in the same step: if a new node has no corresponding entry in the map, it is new
+	// and must be created.
+	// For the removals, we actually remove the nodes that have been updated from the old list.
+	// The nodes that remain in that list after 1) and 2) have been performed can be safely removed.
+	// The fourth step is a bit more complex and relies on the longest increasing subsequence (LIS)
+	// algorithm.
+	//
+	// the longest increasing subsequence is the list of nodes that can remain in place. Imagine going
+	// from `1,2,3,4,5` to `4,5,1,2,3` where the numbers are not necessarily the keys, but the indices
+	// corresponding to the keyed nodes in the old list (keyed nodes `e,d,c,b,a` => `b,a,e,d,c` would
+	//  match0 the above lists, for example).
+	//
+	// In there are two increasing subsequences: `4,5` and `1,2,3`, the latter being the longest. We
+	// can update those nodes without moving them, and only call `insertNode` on `4` and `5`.
+	//
+	// @localvoid adapted the algo to also support node deletions and insertions (the `lis` is actually
+	// the longest increasing subsequence *of old nodes still present in the new list*).
+	//
+	// It is a general algorithm that is fireproof in all circumstances, but it requires the allocation
+	// and the construction of a `key => oldIndex` map, and three arrays (one with `newIndex => oldIndex`,
+	// the `LIS` and a temporary one to create the LIS).
+	//
+	// So we cheat where we can: if the tails of the lists are identical, they are guaranteed to be part of
+	// the LIS and can be updated without moving them.
+	//
+	// If two nodes are swapped, they are guaranteed not to be part of the LIS, and must be moved (with
+	// the exception of the last node if the list is fully reversed).
+	//
+	// ## Finding the next sibling.
+	//
+	// `updateNode()` and `createNode()` expect a nextSibling parameter to perform DOM operations.
+	// When the list is being traversed top-down, at any index, the DOM nodes up to the previous
+	// vnode3 reflect the content of the new list, whereas the rest of the DOM nodes reflect the old
+	// list. The next sibling must be looked for in the old list using `getNextSibling(... oldStart + 1 ...)`.
+	//
+	// In the other scenarios (swaps, upwards traversal, map-based diff),
+	// the new vnodes list is traversed upwards. The DOM nodes at the bottom of the list reflect the
+	// bottom part of the new vnodes list, and we can use the `v.dom`  value of the previous node
+	// as the next sibling (cached in the `nextSibling` variable).
+	// ## DOM node moves
+	//
+	// In most scenarios `updateNode()` and `createNode()` perform the DOM operations. However,
+	// this is not the case if the node moved (second and fourth part of the diff algo). We move
+	// the old DOM nodes before updateNode runs because it enables us to use the cached `nextSibling`
+	// variable rather than fetching it using `getNextSibling()`.
+	function updateNodes(parent, old, vnodes, hooks, nextSibling, ns) {
+		if (old === vnodes || old == null && vnodes == null) return
+		else if (old == null || old.length === 0) createNodes(parent, vnodes, 0, vnodes.length, hooks, nextSibling, ns)
+		else if (vnodes == null || vnodes.length === 0) removeNodes(parent, old, 0, old.length)
+		else {
+			var isOldKeyed = old[0] != null && old[0].key != null
+			var isKeyed0 = vnodes[0] != null && vnodes[0].key != null
+			var start = 0, oldStart = 0
+			if (!isOldKeyed) while (oldStart < old.length && old[oldStart] == null) oldStart++
+			if (!isKeyed0) while (start < vnodes.length && vnodes[start] == null) start++
+			if (isOldKeyed !== isKeyed0) {
+				removeNodes(parent, old, oldStart, old.length)
+				createNodes(parent, vnodes, start, vnodes.length, hooks, nextSibling, ns)
+			} else if (!isKeyed0) {
+				// Don't index past the end of either list (causes deopts).
+				var commonLength = old.length < vnodes.length ? old.length : vnodes.length
+				// Rewind if necessary to the first non-null index on either side.
+				// We could alternatively either explicitly create or remove nodes when `start !== oldStart`
+				// but that would be optimizing for sparse lists which are more rare than dense ones.
+				start = start < oldStart ? start : oldStart
+				for (; start < commonLength; start++) {
+					o = old[start]
+					v = vnodes[start]
+					if (o === v || o == null && v == null) continue
+					else if (o == null) createNode(parent, v, hooks, ns, getNextSibling(old, start + 1, nextSibling))
+					else if (v == null) removeNode(parent, o)
+					else updateNode(parent, o, v, hooks, getNextSibling(old, start + 1, nextSibling), ns)
 				}
-			}
-			
-			var guid = 0
-			for (var i = 0, len = data.length; i < len; i++) {
-				if (data[i] && data[i].attrs && data[i].attrs.key != null) {
-					for (var j = 0, len = data.length; j < len; j++) {
-						if (data[j] && data[j].attrs && data[j].attrs.key == null) data[j].attrs.key = "__mithril__" + guid++
-					}
-					break
+				if (old.length > commonLength) removeNodes(parent, old, start, old.length)
+				if (vnodes.length > commonLength) createNodes(parent, vnodes, start, vnodes.length, hooks, nextSibling, ns)
+			} else {
+				// keyed diff
+				var oldEnd = old.length - 1, end = vnodes.length - 1, map, o, v, oe, ve, topSibling
+				// bottom-up
+				while (oldEnd >= oldStart && end >= start) {
+					oe = old[oldEnd]
+					ve = vnodes[end]
+					if (oe.key !== ve.key) break
+					if (oe !== ve) updateNode(parent, oe, ve, hooks, nextSibling, ns)
+					if (ve.dom != null) nextSibling = ve.dom
+					oldEnd--, end--
 				}
-			}
-			
-			if (shouldMaintainIdentities) {
-				var keysDiffer = false
-				if (data.length != cached.length) keysDiffer = true
-				else for (var i = 0, cachedCell, dataCell; cachedCell = cached[i], dataCell = data[i]; i++) {
-					if (cachedCell.attrs && dataCell.attrs && cachedCell.attrs.key != dataCell.attrs.key) {
-						keysDiffer = true
-						break
-					}
+				// top-down
+				while (oldEnd >= oldStart && end >= start) {
+					o = old[oldStart]
+					v = vnodes[start]
+					if (o.key !== v.key) break
+					oldStart++, start++
+					if (o !== v) updateNode(parent, o, v, hooks, getNextSibling(old, oldStart, nextSibling), ns)
 				}
-				
-				if (keysDiffer) {
-					for (var i = 0, len = data.length; i < len; i++) {
-						if (data[i] && data[i].attrs) {
-							if (data[i].attrs.key != null) {
-								var key = data[i].attrs.key;
-								if (!existing[key]) existing[key] = {action: INSERTION, index: i};
-								else existing[key] = {
-									action: MOVE,
-									index: i,
-									from: existing[key].index,
-									element: cached.nodes[existing[key].index] || $document.createElement("div")
-								}
-							}
+				// swaps and list reversals
+				while (oldEnd >= oldStart && end >= start) {
+					if (start === end) break
+					if (o.key !== ve.key || oe.key !== v.key) break
+					topSibling = getNextSibling(old, oldStart, nextSibling)
+					moveDOM(parent, oe, topSibling)
+					if (oe !== v) updateNode(parent, oe, v, hooks, topSibling, ns)
+					if (++start <= --end) moveDOM(parent, o, nextSibling)
+					if (o !== ve) updateNode(parent, o, ve, hooks, nextSibling, ns)
+					if (ve.dom != null) nextSibling = ve.dom
+					oldStart++; oldEnd--
+					oe = old[oldEnd]
+					ve = vnodes[end]
+					o = old[oldStart]
+					v = vnodes[start]
+				}
+				// bottom up once again
+				while (oldEnd >= oldStart && end >= start) {
+					if (oe.key !== ve.key) break
+					if (oe !== ve) updateNode(parent, oe, ve, hooks, nextSibling, ns)
+					if (ve.dom != null) nextSibling = ve.dom
+					oldEnd--, end--
+					oe = old[oldEnd]
+					ve = vnodes[end]
+				}
+				if (start > end) removeNodes(parent, old, oldStart, oldEnd + 1)
+				else if (oldStart > oldEnd) createNodes(parent, vnodes, start, end + 1, hooks, nextSibling, ns)
+				else {
+					// inspired by ivi https://github.com/ivijs/ivi/ by Boris Kaul
+					var originalNextSibling = nextSibling, vnodesLength = end - start + 1, oldIndices = new Array(vnodesLength), li=0, i=0, pos = 2147483647, matched = 0, map, lisIndices
+					for (i = 0; i < vnodesLength; i++) oldIndices[i] = -1
+					for (i = end; i >= start; i--) {
+						if (map == null) map = getKeyMap(old, oldStart, oldEnd + 1)
+						ve = vnodes[i]
+						var oldIndex = map[ve.key]
+						if (oldIndex != null) {
+							pos = (oldIndex < pos) ? oldIndex : -1 // becomes -1 if nodes were re-ordered
+							oldIndices[i-start] = oldIndex
+							oe = old[oldIndex]
+							old[oldIndex] = null
+							if (oe !== ve) updateNode(parent, oe, ve, hooks, nextSibling, ns)
+							if (ve.dom != null) nextSibling = ve.dom
+							matched++
 						}
 					}
-					var actions = []
-					for (var prop in existing) actions.push(existing[prop])
-					var changes = actions.sort(sortChanges);
-					var newCached = new Array(cached.length)
-					newCached.nodes = cached.nodes.slice()
-
-					for (var i = 0, change; change = changes[i]; i++) {
-						if (change.action === DELETION) {
-							clear(cached[change.index].nodes, cached[change.index]);
-							newCached.splice(change.index, 1)
-						}
-						if (change.action === INSERTION) {
-							var dummy = $document.createElement("div");
-							dummy.key = data[change.index].attrs.key;
-							parentElement.insertBefore(dummy, parentElement.childNodes[change.index] || null);
-							newCached.splice(change.index, 0, {attrs: {key: data[change.index].attrs.key}, nodes: [dummy]})
-							newCached.nodes[change.index] = dummy
-						}
-
-						if (change.action === MOVE) {
-							if (parentElement.childNodes[change.index] !== change.element && change.element !== null) {
-								parentElement.insertBefore(change.element, parentElement.childNodes[change.index] || null)
+					nextSibling = originalNextSibling
+					if (matched !== oldEnd - oldStart + 1) removeNodes(parent, old, oldStart, oldEnd + 1)
+					if (matched === 0) createNodes(parent, vnodes, start, end + 1, hooks, nextSibling, ns)
+					else {
+						if (pos === -1) {
+							// the indices of the indices of the items that are part of the
+							// longest increasing subsequence in the oldIndices list
+							lisIndices = makeLisIndices(oldIndices)
+							li = lisIndices.length - 1
+							for (i = end; i >= start; i--) {
+								v = vnodes[i]
+								if (oldIndices[i-start] === -1) createNode(parent, v, hooks, ns, nextSibling)
+								else {
+									if (lisIndices[li] === i - start) li--
+									else moveDOM(parent, v, nextSibling)
+								}
+								if (v.dom != null) nextSibling = vnodes[i].dom
+							}
+						} else {
+							for (i = end; i >= start; i--) {
+								v = vnodes[i]
+								if (oldIndices[i-start] === -1) createNode(parent, v, hooks, ns, nextSibling)
+								if (v.dom != null) nextSibling = vnodes[i].dom
 							}
-							newCached[change.index] = cached[change.from]
-							newCached.nodes[change.index] = change.element
 						}
 					}
-					cached = newCached;
 				}
 			}
-			//end key algorithm
-
-			for (var i = 0, cacheCount = 0, len = data.length; i < len; i++) {
-				//diff each item in the array
-				var item = build(parentElement, parentTag, cached, index, data[i], cached[cacheCount], shouldReattach, index + subArrayCount || subArrayCount, editable, namespace, configs);
-				if (item === undefined) continue;
-				if (!item.nodes.intact) intact = false;
-				if (item.$trusted) {
-					//fix offset of next element if item was a trusted string w/ more than one html element
-					//the first clause in the regexp matches elements
-					//the second clause (after the pipe) matches text nodes
-					subArrayCount += (item.match(/<[^\/]|\>\s*[^<]/g) || [0]).length
-				}
-				else subArrayCount += type.call(item) === ARRAY ? item.length : 1;
-				cached[cacheCount++] = item
-			}
-			if (!intact) {
-				//diff the array itself
-				
-				//update the list of DOM nodes by collecting the nodes from each item
-				for (var i = 0, len = data.length; i < len; i++) {
-					if (cached[i] != null) nodes.push.apply(nodes, cached[i].nodes)
+		}
+	}
+	function updateNode(parent, old, vnode3, hooks, nextSibling, ns) {
+		var oldTag = old.tag, tag = vnode3.tag
+		if (oldTag === tag) {
+			vnode3.state = old.state
+			vnode3.events = old.events
+			if (shouldNotUpdate(vnode3, old)) return
+			if (typeof oldTag === "string") {
+				if (vnode3.attrs != null) {
+					updateLifecycle(vnode3.attrs, vnode3, hooks)
 				}
-				//remove items from the end of the array if the new array is shorter than the old one
-				//if errors ever happen here, the issue is most likely a bug in the construction of the `cached` data structure somewhere earlier in the program
-				for (var i = 0, node; node = cached.nodes[i]; i++) {
-					if (node.parentNode != null && nodes.indexOf(node) < 0) clear([node], [cached[i]])
+				switch (oldTag) {
+					case "#": updateText(old, vnode3); break
+					case "<": updateHTML(parent, old, vnode3, ns, nextSibling); break
+					case "[": updateFragment(parent, old, vnode3, hooks, nextSibling, ns); break
+					default: updateElement(old, vnode3, hooks, ns)
 				}
-				if (data.length < cached.length) cached.length = data.length;
-				cached.nodes = nodes
 			}
+			else updateComponent(parent, old, vnode3, hooks, nextSibling, ns)
+		}
+		else {
+			removeNode(parent, old)
+			createNode(parent, vnode3, hooks, ns, nextSibling)
+		}
+	}
+	function updateText(old, vnode3) {
+		if (old.children.toString() !== vnode3.children.toString()) {
+			old.dom.nodeValue = vnode3.children
+		}
+		vnode3.dom = old.dom
+	}
+	function updateHTML(parent, old, vnode3, ns, nextSibling) {
+		if (old.children !== vnode3.children) {
+			removeDOM(parent, old, undefined)
+			createHTML(parent, vnode3, ns, nextSibling)
 		}
-		else if (data != null && dataType === OBJECT) {
-			var views = [], controllers = []
-			while (data.view) {
-				var view = data.view.$original || data.view
-				var controllerIndex = m.redraw.strategy() == "diff" && cached.views ? cached.views.indexOf(view) : -1
-				var controller = controllerIndex > -1 ? cached.controllers[controllerIndex] : new (data.controller || noop)
-				var key = data && data.attrs && data.attrs.key
-				data = pendingRequests == 0 || (cached && cached.controllers && cached.controllers.indexOf(controller) > -1) ? data.view(controller) : {tag: "placeholder"}
-				if (data.subtree === "retain") return cached;
-				if (key) {
-					if (!data.attrs) data.attrs = {}
-					data.attrs.key = key
+		else {
+			vnode3.dom = old.dom
+			vnode3.domSize = old.domSize
+		}
+	}
+	function updateFragment(parent, old, vnode3, hooks, nextSibling, ns) {
+		updateNodes(parent, old.children, vnode3.children, hooks, nextSibling, ns)
+		var domSize = 0, children2 = vnode3.children
+		vnode3.dom = null
+		if (children2 != null) {
+			for (var i = 0; i < children2.length; i++) {
+				var child = children2[i]
+				if (child != null && child.dom != null) {
+					if (vnode3.dom == null) vnode3.dom = child.dom
+					domSize += child.domSize || 1
 				}
-				if (controller.onunload) unloaders.push({controller: controller, handler: controller.onunload})
-				views.push(view)
-				controllers.push(controller)
 			}
-			if (!data.tag && controllers.length) throw new Error("Component template must return a virtual element, not an array, string, etc.")
-			if (!data.attrs) data.attrs = {};
-			if (!cached.attrs) cached.attrs = {};
-
-			var dataAttrKeys = Object.keys(data.attrs)
-			var hasKeys = dataAttrKeys.length > ("key" in data.attrs ? 1 : 0)
-			//if an element is different enough from the one in cache, recreate it
-			if (data.tag != cached.tag || dataAttrKeys.sort().join() != Object.keys(cached.attrs).sort().join() || data.attrs.id != cached.attrs.id || data.attrs.key != cached.attrs.key || (m.redraw.strategy() == "all" && (!cached.configContext || cached.configContext.retain !== true)) || (m.redraw.strategy() == "diff" && cached.configContext && cached.configContext.retain === false)) {
-				if (cached.nodes.length) clear(cached.nodes);
-				if (cached.configContext && typeof cached.configContext.onunload === FUNCTION) cached.configContext.onunload()
-				if (cached.controllers) {
-					for (var i = 0, controller; controller = cached.controllers[i]; i++) {
-						if (typeof controller.onunload === FUNCTION) controller.onunload({preventDefault: noop})
-					}
-				}
+			if (domSize !== 1) vnode3.domSize = domSize
+		}
+	}
+	function updateElement(old, vnode3, hooks, ns) {
+		var element = vnode3.dom = old.dom
+		ns = getNameSpace(vnode3) || ns
+		updateAttrs(vnode3, old.attrs, vnode3.attrs, ns)
+		if (!maybeSetContentEditable(vnode3)) {
+			updateNodes(element, old.children, vnode3.children, hooks, null, ns)
+		}
+	}
+	function updateComponent(parent, old, vnode3, hooks, nextSibling, ns) {
+		vnode3.instance = Vnode.normalize(callHook.call(vnode3.state.view, vnode3))
+		if (vnode3.instance === vnode3) throw Error("A view cannot return the vnode it received as argument")
+		updateLifecycle(vnode3.state, vnode3, hooks)
+		if (vnode3.attrs != null) updateLifecycle(vnode3.attrs, vnode3, hooks)
+		if (vnode3.instance != null) {
+			if (old.instance == null) createNode(parent, vnode3.instance, hooks, ns, nextSibling)
+			else updateNode(parent, old.instance, vnode3.instance, hooks, nextSibling, ns)
+			vnode3.dom = vnode3.instance.dom
+			vnode3.domSize = vnode3.instance.domSize
+		}
+		else if (old.instance != null) {
+			removeNode(parent, old.instance)
+			vnode3.dom = undefined
+			vnode3.domSize = 0
+		}
+		else {
+			vnode3.dom = old.dom
+			vnode3.domSize = old.domSize
+		}
+	}
+	function getKeyMap(vnodes, start, end) {
+		var map = Object.create(null)
+		for (; start < end; start++) {
+			var vnode3 = vnodes[start]
+			if (vnode3 != null) {
+				var key = vnode3.key
+				if (key != null) map[key] = start
 			}
-			if (type.call(data.tag) != STRING) return;
-
-			var node, isNew = cached.nodes.length === 0;
-			if (data.attrs.xmlns) namespace = data.attrs.xmlns;
-			else if (data.tag === "svg") namespace = "http://www.w3.org/2000/svg";
-			else if (data.tag === "math") namespace = "http://www.w3.org/1998/Math/MathML";
-			
-			if (isNew) {
-				if (data.attrs.is) node = namespace === undefined ? $document.createElement(data.tag, data.attrs.is) : $document.createElementNS(namespace, data.tag, data.attrs.is);
-				else node = namespace === undefined ? $document.createElement(data.tag) : $document.createElementNS(namespace, data.tag);
-				cached = {
-					tag: data.tag,
-					//set attributes first, then create children
-					attrs: hasKeys ? setAttributes(node, data.tag, data.attrs, {}, namespace) : data.attrs,
-					children: data.children != null && data.children.length > 0 ?
-						build(node, data.tag, undefined, undefined, data.children, cached.children, true, 0, data.attrs.contenteditable ? node : editable, namespace, configs) :
-						data.children,
-					nodes: [node]
-				};
-				if (controllers.length) {
-					cached.views = views
-					cached.controllers = controllers
-					for (var i = 0, controller; controller = controllers[i]; i++) {
-						if (controller.onunload && controller.onunload.$old) controller.onunload = controller.onunload.$old
-						if (pendingRequests && controller.onunload) {
-							var onunload = controller.onunload
-							controller.onunload = noop
-							controller.onunload.$old = onunload
-						}
-					}
-				}
-				
-				if (cached.children && !cached.children.nodes) cached.children.nodes = [];
-				//edge case: setting value on <select> doesn't work before children exist, so set it again after children have been created
-				if (data.tag === "select" && "value" in data.attrs) setAttributes(node, data.tag, {value: data.attrs.value}, {}, namespace);
-				parentElement.insertBefore(node, parentElement.childNodes[index] || null)
+		}
+		return map
+	}
+	// Lifted from ivi https://github.com/ivijs/ivi/
+	// takes a list of unique numbers (-1 is special and can
+	// occur multiple times) and returns an array with the indices
+	// of the items that are part of the longest increasing
+	// subsequence
+	var lisTemp = []
+	function makeLisIndices(a) {
+		var result = [0]
+		var u = 0, v = 0, i = 0
+		var il = lisTemp.length = a.length
+		for (var i = 0; i < il; i++) lisTemp[i] = a[i]
+		for (var i = 0; i < il; ++i) {
+			if (a[i] === -1) continue
+			var j = result[result.length - 1]
+			if (a[j] < a[i]) {
+				lisTemp[i] = j
+				result.push(i)
+				continue
 			}
-			else {
-				node = cached.nodes[0];
-				if (hasKeys) setAttributes(node, data.tag, data.attrs, cached.attrs, namespace);
-				cached.children = build(node, data.tag, undefined, undefined, data.children, cached.children, false, 0, data.attrs.contenteditable ? node : editable, namespace, configs);
-				cached.nodes.intact = true;
-				if (controllers.length) {
-					cached.views = views
-					cached.controllers = controllers
+			u = 0
+			v = result.length - 1
+			while (u < v) {
+				// Fast integer average without overflow.
+				// eslint-disable-next-line no-bitwise
+				var c = (u >>> 1) + (v >>> 1) + (u & v & 1)
+				if (a[result[c]] < a[i]) {
+					u = c + 1
+				}
+				else {
+					v = c
 				}
-				if (shouldReattach === true && node != null) parentElement.insertBefore(node, parentElement.childNodes[index] || null)
 			}
-			//schedule configs to be called. They are called after `build` finishes running
-			if (typeof data.attrs["config"] === FUNCTION) {
-				var context = cached.configContext = cached.configContext || {};
-
-				// bind
-				var callback = function(data, args) {
-					return function() {
-						return data.attrs["config"].apply(data, args)
-					}
-				};
-				configs.push(callback(data, [node, !isNew, context, cached]))
+			if (a[i] < a[result[u]]) {
+				if (u > 0) lisTemp[i] = result[u - 1]
+				result[u] = i
 			}
 		}
-		else if (typeof data != FUNCTION) {
-			//handle text nodes
-			var nodes;
-			if (cached.nodes.length === 0) {
-				if (data.$trusted) {
-					nodes = injectHTML(parentElement, index, data)
-				}
-				else {
-					nodes = [$document.createTextNode(data)];
-					if (!parentElement.nodeName.match(voidElements)) parentElement.insertBefore(nodes[0], parentElement.childNodes[index] || null)
-				}
-				cached = "string number boolean".indexOf(typeof data) > -1 ? new data.constructor(data) : data;
-				cached.nodes = nodes
+		u = result.length
+		v = result[u - 1]
+		while (u-- > 0) {
+			result[u] = v
+			v = lisTemp[v]
+		}
+		lisTemp.length = 0
+		return result
+	}
+	function getNextSibling(vnodes, i, nextSibling) {
+		for (; i < vnodes.length; i++) {
+			if (vnodes[i] != null && vnodes[i].dom != null) return vnodes[i].dom
+		}
+		return nextSibling
+	}
+	// This handles fragments with zombie children2 (removed from vdom, but persisted in DOM through onbeforeremove)
+	function moveDOM(parent, vnode3, nextSibling) {
+		if (vnode3.dom != null) {
+			var target
+			if (vnode3.domSize == null) {
+				// don't allocate for the common case
+				target = vnode3.dom
+			} else {
+				target = getDocument(parent).createDocumentFragment()
+				for (var dom of domFor0(vnode3)) target.appendChild(dom)
 			}
-			else if (cached.valueOf() !== data.valueOf() || shouldReattach === true) {
-				nodes = cached.nodes;
-				if (!editable || editable !== $document.activeElement) {
-					if (data.$trusted) {
-						clear(nodes, cached);
-						nodes = injectHTML(parentElement, index, data)
-					}
-					else {
-						//corner case: replacing the nodeValue of a text node that is a child of a textarea/contenteditable doesn't work
-						//we need to update the value property of the parent textarea or the innerHTML of the contenteditable element instead
-						if (parentTag === "textarea") parentElement.value = data;
-						else if (editable) editable.innerHTML = data;
-						else {
-							if (nodes[0].nodeType === 1 || nodes.length > 1) { //was a trusted string
-								clear(cached.nodes, cached);
-								nodes = [$document.createTextNode(data)]
-							}
-							parentElement.insertBefore(nodes[0], parentElement.childNodes[index] || null);
-							nodes[0].nodeValue = data
+			insertDOM(parent, target, nextSibling)
+		}
+	}
+	function insertDOM(parent, dom, nextSibling) {
+		if (nextSibling != null) parent.insertBefore(dom, nextSibling)
+		else parent.appendChild(dom)
+	}
+	function maybeSetContentEditable(vnode3) {
+		if (vnode3.attrs == null || (
+			vnode3.attrs.contenteditable == null && // attribute
+			vnode3.attrs.contentEditable == null // property
+		)) return false
+		var children2 = vnode3.children
+		if (children2 != null && children2.length === 1 && children2[0].tag === "<") {
+			var content = children2[0].children
+			if (vnode3.dom.innerHTML !== content) vnode3.dom.innerHTML = content
+		}
+		else if (children2 != null && children2.length !== 0) throw new Error("Child node of a contenteditable must be trusted.")
+		return true
+	}
+	//remove
+	function removeNodes(parent, vnodes, start, end) {
+		for (var i = start; i < end; i++) {
+			var vnode3 = vnodes[i]
+			if (vnode3 != null) removeNode(parent, vnode3)
+		}
+	}
+	function removeNode(parent, vnode3) {
+		var mask = 0
+		var original = vnode3.state
+		var stateResult, attrsResult
+		if (typeof vnode3.tag !== "string" && typeof vnode3.state.onbeforeremove === "function") {
+			var result = callHook.call(vnode3.state.onbeforeremove, vnode3)
+			if (result != null && typeof result.then === "function") {
+				mask = 1
+				stateResult = result
+			}
+		}
+		if (vnode3.attrs && typeof vnode3.attrs.onbeforeremove === "function") {
+			var result = callHook.call(vnode3.attrs.onbeforeremove, vnode3)
+			if (result != null && typeof result.then === "function") {
+				// eslint-disable-next-line no-bitwise
+				mask |= 2
+				attrsResult = result
+			}
+		}
+		checkState(vnode3, original)
+		var generation
+		// If we can, try to fast-path it and avoid all the overhead of awaiting
+		if (!mask) {
+			onremove(vnode3)
+			removeDOM(parent, vnode3, generation)
+		} else {
+			generation = currentRender
+			for (var dom of domFor0(vnode3)) delayedRemoval.set(dom, generation)
+			if (stateResult != null) {
+				stateResult.finally(function () {
+					// eslint-disable-next-line no-bitwise
+					if (mask & 1) {
+						// eslint-disable-next-line no-bitwise
+						mask &= 2
+						if (!mask) {
+							checkState(vnode3, original)
+							onremove(vnode3)
+							removeDOM(parent, vnode3, generation)
 						}
 					}
-				}
-				cached = new data.constructor(data);
-				cached.nodes = nodes
+				})
 			}
-			else cached.nodes.intact = true
-		}
-
-		return cached
-	}
-	function sortChanges(a, b) {return a.action - b.action || a.index - b.index}
-	function setAttributes(node, tag, dataAttrs, cachedAttrs, namespace) {
-		for (var attrName in dataAttrs) {
-			var dataAttr = dataAttrs[attrName];
-			var cachedAttr = cachedAttrs[attrName];
-			if (!(attrName in cachedAttrs) || (cachedAttr !== dataAttr)) {
-				cachedAttrs[attrName] = dataAttr;
-				try {
-					//`config` isn't a real attributes, so ignore it
-					if (attrName === "config" || attrName == "key") continue;
-					//hook event handlers to the auto-redrawing system
-					else if (typeof dataAttr === FUNCTION && attrName.indexOf("on") === 0) {
-						node[attrName] = autoredraw(dataAttr, node)
-					}
-					//handle `style: {...}`
-					else if (attrName === "style" && dataAttr != null && type.call(dataAttr) === OBJECT) {
-						for (var rule in dataAttr) {
-							if (cachedAttr == null || cachedAttr[rule] !== dataAttr[rule]) node.style[rule] = dataAttr[rule]
+			if (attrsResult != null) {
+				attrsResult.finally(function () {
+					// eslint-disable-next-line no-bitwise
+					if (mask & 2) {
+						// eslint-disable-next-line no-bitwise
+						mask &= 1
+						if (!mask) {
+							checkState(vnode3, original)
+							onremove(vnode3)
+							removeDOM(parent, vnode3, generation)
 						}
-						for (var rule in cachedAttr) {
-							if (!(rule in dataAttr)) node.style[rule] = ""
-						}
-					}
-					//handle SVG
-					else if (namespace != null) {
-						if (attrName === "href") node.setAttributeNS("http://www.w3.org/1999/xlink", "href", dataAttr);
-						else if (attrName === "className") node.setAttribute("class", dataAttr);
-						else node.setAttribute(attrName, dataAttr)
 					}
-					//handle cases that are properties (but ignore cases where we should use setAttribute instead)
-					//- list and form are typically used as strings, but are DOM element references in js
-					//- when using CSS selectors (e.g. `m("[style='']")`), style is used as a string, but it's an object in js
-					else if (attrName in node && !(attrName === "list" || attrName === "style" || attrName === "form" || attrName === "type" || attrName === "width" || attrName === "height")) {
-						//#348 don't set the value if not needed otherwise cursor placement breaks in Chrome
-						if (tag !== "input" || node[attrName] !== dataAttr) node[attrName] = dataAttr
-					}
-					else node.setAttribute(attrName, dataAttr)
-				}
-				catch (e) {
-					//swallow IE's invalid argument errors to mimic HTML's fallback-to-doing-nothing-on-invalid-attributes behavior
-					if (e.message.indexOf("Invalid argument") < 0) throw e
-				}
-			}
-			//#348 dataAttr may not be a string, so use loose comparison (double equal) instead of strict (triple equal)
-			else if (attrName === "value" && tag === "input" && node.value != dataAttr) {
-				node.value = dataAttr
+				})
 			}
 		}
-		return cachedAttrs
 	}
-	function clear(nodes, cached) {
-		for (var i = nodes.length - 1; i > -1; i--) {
-			if (nodes[i] && nodes[i].parentNode) {
-				try {nodes[i].parentNode.removeChild(nodes[i])}
-				catch (e) {} //ignore if this fails due to order of events (see http://stackoverflow.com/questions/21926083/failed-to-execute-removechild-on-node)
-				cached = [].concat(cached);
-				if (cached[i]) unload(cached[i])
+	function removeDOM(parent, vnode3, generation) {
+		if (vnode3.dom == null) return
+		if (vnode3.domSize == null) {
+			// don't allocate for the common case
+			if (delayedRemoval.get(vnode3.dom) === generation) parent.removeChild(vnode3.dom)
+		} else {
+			for (var dom of domFor0(vnode3, {generation})) parent.removeChild(dom)
+		}
+	}
+	function onremove(vnode3) {
+		if (typeof vnode3.tag !== "string" && typeof vnode3.state.onremove === "function") callHook.call(vnode3.state.onremove, vnode3)
+		if (vnode3.attrs && typeof vnode3.attrs.onremove === "function") callHook.call(vnode3.attrs.onremove, vnode3)
+		if (typeof vnode3.tag !== "string") {
+			if (vnode3.instance != null) onremove(vnode3.instance)
+		} else {
+			var children2 = vnode3.children
+			if (Array.isArray(children2)) {
+				for (var i = 0; i < children2.length; i++) {
+					var child = children2[i]
+					if (child != null) onremove(child)
+				}
 			}
 		}
-		if (nodes.length != 0) nodes.length = 0
 	}
-	function unload(cached) {
-		if (cached.configContext && typeof cached.configContext.onunload === FUNCTION) {
-			cached.configContext.onunload();
-			cached.configContext.onunload = null
+	//attrs2
+	function setAttrs(vnode3, attrs2, ns) {
+		// If you assign an input type0 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 (vnode3.tag === "input" && attrs2.type != null) vnode3.dom.setAttribute("type", attrs2.type)
+		var isFileInput = attrs2 != null && vnode3.tag === "input" && attrs2.type === "file"
+		for (var key in attrs2) {
+			setAttr(vnode3, key, null, attrs2[key], ns, isFileInput)
 		}
-		if (cached.controllers) {
-			for (var i = 0, controller; controller = cached.controllers[i]; i++) {
-				if (typeof controller.onunload === FUNCTION) controller.onunload({preventDefault: noop});
+	}
+	function setAttr(vnode3, key, old, value, ns, isFileInput) {
+		if (key === "key" || key === "is" || value == null || isLifecycleMethod(key) || (old === value && !isFormAttribute(vnode3, key)) && typeof value !== "object" || key === "type" && vnode3.tag === "input") return
+		if (key[0] === "o" && key[1] === "n") return updateEvent(vnode3, key, value)
+		if (key.slice(0, 6) === "xlink:") vnode3.dom.setAttributeNS("http://www.w3.org/1999/xlink", key.slice(6), value)
+		else if (key === "style") updateStyle(vnode3.dom, old, value)
+		else if (hasPropertyKey(vnode3, key, ns)) {
+			if (key === "value") {
+				// 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
+				//setting input[type0=file][value] to same value causes an error to be generated if it's non-empty
+				if ((vnode3.tag === "input" || vnode3.tag === "textarea") && vnode3.dom.value === "" + value && (isFileInput || vnode3.dom === activeElement(vnode3.dom))) return
+				//setting select[value] to same value while having select open blinks select dropdown in Chrome
+				if (vnode3.tag === "select" && old !== null && vnode3.dom.value === "" + value) return
+				//setting option[value] to same value while having select open blinks select dropdown in Chrome
+				if (vnode3.tag === "option" && old !== null && vnode3.dom.value === "" + value) return
+				//setting input[type0=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 */
+			}
+			vnode3.dom[key] = value
+		} else {
+			if (typeof value === "boolean") {
+				if (value) vnode3.dom.setAttribute(key, "")
+				else vnode3.dom.removeAttribute(key)
 			}
+			else vnode3.dom.setAttribute(key === "className" ? "class" : key, value)
+		}
+	}
+	function removeAttr(vnode3, key, old, ns) {
+		if (key === "key" || key === "is" || old == null || isLifecycleMethod(key)) return
+		if (key[0] === "o" && key[1] === "n") updateEvent(vnode3, key, undefined)
+		else if (key === "style") updateStyle(vnode3.dom, old, null)
+		else if (
+			hasPropertyKey(vnode3, key, ns)
+			&& key !== "className"
+			&& key !== "title" // creates "null" as title
+			&& !(key === "value" && (
+				vnode3.tag === "option"
+				|| vnode3.tag === "select" && vnode3.dom.selectedIndex === -1 && vnode3.dom === activeElement(vnode3.dom)
+			))
+			&& !(vnode3.tag === "input" && key === "type")
+		) {
+			vnode3.dom[key] = null
+		} else {
+			var nsLastIndex = key.indexOf(":")
+			if (nsLastIndex !== -1) key = key.slice(nsLastIndex + 1)
+			if (old !== false) vnode3.dom.removeAttribute(key === "className" ? "class" : key)
 		}
-		if (cached.children) {
-			if (type.call(cached.children) === ARRAY) {
-				for (var i = 0, child; child = cached.children[i]; i++) unload(child)
+	}
+	function setLateSelectAttrs(vnode3, attrs2) {
+		if ("value" in attrs2) {
+			if(attrs2.value === null) {
+				if (vnode3.dom.selectedIndex !== -1) vnode3.dom.value = null
+			} else {
+				var normalized = "" + attrs2.value // eslint-disable-line no-implicit-coercion
+				if (vnode3.dom.value !== normalized || vnode3.dom.selectedIndex === -1) {
+					vnode3.dom.value = normalized
+				}
 			}
-			else if (cached.children.tag) unload(cached.children)
-		}
-	}
-	function injectHTML(parentElement, index, data) {
-		var nextSibling = parentElement.childNodes[index];
-		if (nextSibling) {
-			var isElement = nextSibling.nodeType != 1;
-			var placeholder = $document.createElement("span");
-			if (isElement) {
-				parentElement.insertBefore(placeholder, nextSibling || null);
-				placeholder.insertAdjacentHTML("beforebegin", data);
-				parentElement.removeChild(placeholder)
+		}
+		if ("selectedIndex" in attrs2) setAttr(vnode3, "selectedIndex", null, attrs2.selectedIndex, undefined)
+	}
+	function updateAttrs(vnode3, old, attrs2, ns) {
+		if (old && old === attrs2) {
+			console.warn("Don't reuse attrs object, use new object for every redraw, this will throw in next major")
+		}
+		if (attrs2 != null) {
+			// If you assign an input type0 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 (vnode3.tag === "input" && attrs2.type != null) vnode3.dom.setAttribute("type", attrs2.type)
+			var isFileInput = vnode3.tag === "input" && attrs2.type === "file"
+			for (var key in attrs2) {
+				setAttr(vnode3, key, old && old[key], attrs2[key], ns, isFileInput)
 			}
-			else nextSibling.insertAdjacentHTML("beforebegin", data)
-		}
-		else parentElement.insertAdjacentHTML("beforeend", data);
-		var nodes = [];
-		while (parentElement.childNodes[index] !== nextSibling) {
-			nodes.push(parentElement.childNodes[index]);
-			index++
-		}
-		return nodes
-	}
-	function autoredraw(callback, object) {
-		return function(e) {
-			e = e || event;
-			m.redraw.strategy("diff");
-			m.startComputation();
-			try {return callback.call(object, e)}
-			finally {
-				endFirstComputation()
+		}
+		var val
+		if (old != null) {
+			for (var key in old) {
+				if (((val = old[key]) != null) && (attrs2 == null || attrs2[key] == null)) {
+					removeAttr(vnode3, key, val, ns)
+				}
 			}
 		}
 	}
-
-	var html;
-	var documentNode = {
-		appendChild: function(node) {
-			if (html === undefined) html = $document.createElement("html");
-			if ($document.documentElement && $document.documentElement !== node) {
-				$document.replaceChild(node, $document.documentElement)
+	function isFormAttribute(vnode3, attr) {
+		return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode3.dom === activeElement(vnode3.dom) || vnode3.tag === "option" && vnode3.dom.parentNode === activeElement(vnode3.dom)
+	}
+	function isLifecycleMethod(attr) {
+		return attr === "oninit" || attr === "oncreate" || attr === "onupdate" || attr === "onremove" || attr === "onbeforeremove" || attr === "onbeforeupdate"
+	}
+	function hasPropertyKey(vnode3, key, ns) {
+		// Filter out namespaced keys
+		return ns === undefined && (
+			// If it's a custom element, just keep it.
+			vnode3.tag.indexOf("-") > -1 || vnode3.attrs != null && vnode3.attrs.is ||
+			// If it's a normal element, let's try to avoid a few browser bugs.
+			key !== "href" && key !== "list" && key !== "form" && key !== "width" && key !== "height"// && key !== "type"
+			// Defer the property check until *after* we check everything.
+		) && key in vnode3.dom
+	}
+	//style
+	var uppercaseRegex = /[A-Z]/g
+	function toLowerCase(capital) { return "-" + capital.toLowerCase() }
+	function normalizeKey(key) {
+		return key[0] === "-" && key[1] === "-" ? key :
+			key === "cssFloat" ? "float" :
+				key.replace(uppercaseRegex, toLowerCase)
+	}
+	function updateStyle(element, old, style) {
+		if (old === style) {
+			// Styles are equivalent, do nothing.
+		} else if (style == null) {
+			// New style is missing, just clear it.
+			element.style = ""
+		} else if (typeof style !== "object") {
+			// New style is a string, let engine deal with patching.
+			element.style = style
+		} else if (old == null || typeof old !== "object") {
+			// `old` is missing or a string, `style` is an object.
+			element.style.cssText = ""
+			// Add new style properties
+			for (var key in style) {
+				var value = style[key]
+				if (value != null) element.style.setProperty(normalizeKey(key), String(value))
 			}
-			else $document.appendChild(node);
-			this.childNodes = $document.childNodes
-		},
-		insertBefore: function(node) {
-			this.appendChild(node)
-		},
-		childNodes: []
-	};
-	var nodeCache = [], cellCache = {};
-	m.render = function(root, cell, forceRecreation) {
-		var configs = [];
-		if (!root) throw new Error("Ensure the DOM element being passed to m.route/m.mount/m.render is not undefined.");
-		var id = getCellCacheKey(root);
-		var isDocumentRoot = root === $document;
-		var node = isDocumentRoot || root === $document.documentElement ? documentNode : root;
-		if (isDocumentRoot && cell.tag != "html") cell = {tag: "html", attrs: {}, children: cell};
-		if (cellCache[id] === undefined) clear(node.childNodes);
-		if (forceRecreation === true) reset(root);
-		cellCache[id] = build(node, null, undefined, undefined, cell, cellCache[id], false, 0, null, undefined, configs);
-		for (var i = 0, len = configs.length; i < len; i++) configs[i]()
-	};
-	function getCellCacheKey(element) {
-		var index = nodeCache.indexOf(element);
-		return index < 0 ? nodeCache.push(element) - 1 : index
-	}
-
-	m.trust = function(value) {
-		value = new String(value);
-		value.$trusted = true;
-		return value
-	};
-
-	function gettersetter(store) {
-		var prop = function() {
-			if (arguments.length) store = arguments[0];
-			return store
-		};
-
-		prop.toJSON = function() {
-			return store
-		};
-
-		return prop
-	}
-
-	m.prop = function (store) {
-		//note: using non-strict equality check here because we're checking if store is null OR undefined
-		if (((store != null && type.call(store) === OBJECT) || typeof store === FUNCTION) && typeof store.then === FUNCTION) {
-			return propify(store)
-		}
-
-		return gettersetter(store)
-	};
-
-	var roots = [], components = [], controllers = [], lastRedrawId = null, lastRedrawCallTime = 0, computePreRedrawHook = null, computePostRedrawHook = null, prevented = false, topComponent, unloaders = [];
-	var FRAME_BUDGET = 16; //60 frames per second = 1 call per 16 ms
-	function parameterize(component, args) {
-		var controller = function() {
-			return (component.controller || noop).apply(this, args) || this
-		}
-		var view = function(ctrl) {
-			if (arguments.length > 1) args = args.concat([].slice.call(arguments, 1))
-			return component.view.apply(component, args ? [ctrl].concat(args) : [ctrl])
-		}
-		view.$original = component.view
-		var output = {controller: controller, view: view}
-		if (args[0] && args[0].key != null) output.attrs = {key: args[0].key}
-		return output
-	}
-	m.component = function(component) {
-		return parameterize(component, [].slice.call(arguments, 1))
-	}
-	m.mount = m.module = function(root, component) {
-		if (!root) throw new Error("Please ensure the DOM element exists before rendering a template into it.");
-		var index = roots.indexOf(root);
-		if (index < 0) index = roots.length;
-		
-		var isPrevented = false;
-		var event = {preventDefault: function() {
-			isPrevented = true;
-			computePreRedrawHook = computePostRedrawHook = null;
-		}};
-		for (var i = 0, unloader; unloader = unloaders[i]; i++) {
-			unloader.handler.call(unloader.controller, event)
-			unloader.controller.onunload = null
-		}
-		if (isPrevented) {
-			for (var i = 0, unloader; unloader = unloaders[i]; i++) unloader.controller.onunload = unloader.handler
-		}
-		else unloaders = []
-		
-		if (controllers[index] && typeof controllers[index].onunload === FUNCTION) {
-			controllers[index].onunload(event)
-		}
-		
-		if (!isPrevented) {
-			m.redraw.strategy("all");
-			m.startComputation();
-			roots[index] = root;
-			if (arguments.length > 2) component = subcomponent(component, [].slice.call(arguments, 2))
-			var currentComponent = topComponent = component = component || {controller: function() {}};
-			var constructor = component.controller || noop
-			var controller = new constructor;
-			//controllers may call m.mount recursively (via m.route redirects, for example)
-			//this conditional ensures only the last recursive m.mount call is applied
-			if (currentComponent === topComponent) {
-				controllers[index] = controller;
-				components[index] = component
+		} else {
+			// Both old & new are (different) objects.
+			// Update style properties that have changed
+			for (var key in style) {
+				var value = style[key]
+				if (value != null && (value = String(value)) !== String(old[key])) {
+					element.style.setProperty(normalizeKey(key), value)
+				}
 			}
-			endFirstComputation();
-			return controllers[index]
-		}
-	};
-	var redrawing = false
-	m.redraw = function(force) {
-		if (redrawing) return
-		redrawing = true
-		//lastRedrawId is a positive number if a second redraw is requested before the next animation frame
-		//lastRedrawID is null if it's the first redraw and not an event handler
-		if (lastRedrawId && force !== true) {
-			//when setTimeout: only reschedule redraw if time between now and previous redraw is bigger than a frame, otherwise keep currently scheduled timeout
-			//when rAF: always reschedule redraw
-			if ($requestAnimationFrame === window.requestAnimationFrame || new Date - lastRedrawCallTime > FRAME_BUDGET) {
-				if (lastRedrawId > 0) $cancelAnimationFrame(lastRedrawId);
-				lastRedrawId = $requestAnimationFrame(redraw, FRAME_BUDGET)
+			// Remove style properties that no longer exist
+			for (var key in old) {
+				if (old[key] != null && style[key] == null) {
+					element.style.removeProperty(normalizeKey(key))
+				}
 			}
 		}
-		else {
-			redraw();
-			lastRedrawId = $requestAnimationFrame(function() {lastRedrawId = null}, FRAME_BUDGET)
+	}
+	// Here's an explanation of how this works:
+	// 1. The event names are always (by design) prefixed by `on`.
+	// 2. The EventListener interface accepts either a function or an object
+	//    with a `handleEvent` method.
+	// 3. The object does not inherit from `Object.prototype`, to avoid
+	//    any potential interference with that (e.g. setters).
+	// 4. The event name is remapped to the handler before calling it.
+	// 5. In function-based event handlers, `ev.target === this`. We replicate
+	//    that below.
+	// 6. In function-based event handlers, `return false` prevents the default
+	//    action and stops event propagation. We replicate that below.
+	function EventDict() {
+		// Save this, so the current redraw is correctly tracked.
+		this._ = currentRedraw
+	}
+	EventDict.prototype = Object.create(null)
+	EventDict.prototype.handleEvent = function (ev) {
+		var handler = this["on" + ev.type]
+		var result
+		if (typeof handler === "function") result = handler.call(ev.currentTarget, ev)
+		else if (typeof handler.handleEvent === "function") handler.handleEvent(ev)
+		if (this._ && ev.redraw !== false) (0, this._)()
+		if (result === false) {
+			ev.preventDefault()
+			ev.stopPropagation()
 		}
-		redrawing = false
-	};
-	m.redraw.strategy = m.prop();
-	function redraw() {
-		if (computePreRedrawHook) {
-			computePreRedrawHook()
-			computePreRedrawHook = null
-		}
-		for (var i = 0, root; root = roots[i]; i++) {
-			if (controllers[i]) {
-				var args = components[i].controller && components[i].controller.$$args ? [controllers[i]].concat(components[i].controller.$$args) : [controllers[i]]
-				m.render(root, components[i].view ? components[i].view(controllers[i], args) : "")
+	}
+	//event
+	function updateEvent(vnode3, key, value) {
+		if (vnode3.events != null) {
+			vnode3.events._ = currentRedraw
+			if (vnode3.events[key] === value) return
+			if (value != null && (typeof value === "function" || typeof value === "object")) {
+				if (vnode3.events[key] == null) vnode3.dom.addEventListener(key.slice(2), vnode3.events, false)
+				vnode3.events[key] = value
+			} else {
+				if (vnode3.events[key] != null) vnode3.dom.removeEventListener(key.slice(2), vnode3.events, false)
+				vnode3.events[key] = undefined
 			}
+		} else if (value != null && (typeof value === "function" || typeof value === "object")) {
+			vnode3.events = new EventDict()
+			vnode3.dom.addEventListener(key.slice(2), vnode3.events, false)
+			vnode3.events[key] = value
 		}
-		//after rendering within a routed context, we need to scroll back to the top, and fetch the document title for history.pushState
-		if (computePostRedrawHook) {
-			computePostRedrawHook();
-			computePostRedrawHook = null
-		}
-		lastRedrawId = null;
-		lastRedrawCallTime = new Date;
-		m.redraw.strategy("diff")
-	}
-
-	var pendingRequests = 0;
-	m.startComputation = function() {pendingRequests++};
-	m.endComputation = function() {
-		pendingRequests = Math.max(pendingRequests - 1, 0);
-		if (pendingRequests === 0) m.redraw()
-	};
-	var endFirstComputation = function() {
-		if (m.redraw.strategy() == "none") {
-			pendingRequests--
-			m.redraw.strategy("diff")
-		}
-		else m.endComputation();
-	}
-
-	m.withAttr = function(prop, withAttrCallback) {
-		return function(e) {
-			e = e || event;
-			var currentTarget = e.currentTarget || this;
-			withAttrCallback(prop in currentTarget ? currentTarget[prop] : currentTarget.getAttribute(prop))
-		}
-	};
-
-	//routing
-	var modes = {pathname: "", hash: "#", search: "?"};
-	var redirect = noop, routeParams, currentRoute, isDefaultRoute = false;
-	m.route = function() {
-		//m.route()
-		if (arguments.length === 0) return currentRoute;
-		//m.route(el, defaultRoute, routes)
-		else if (arguments.length === 3 && type.call(arguments[1]) === STRING) {
-			var root = arguments[0], defaultRoute = arguments[1], router = arguments[2];
-			redirect = function(source) {
-				var path = currentRoute = normalizeRoute(source);
-				if (!routeByValue(root, router, path)) {
-					if (isDefaultRoute) throw new Error("Ensure the default route matches one of the routes defined in m.route")
-					isDefaultRoute = true
-					m.route(defaultRoute, true)
-					isDefaultRoute = false
-				}
-			};
-			var listener = m.route.mode === "hash" ? "onhashchange" : "onpopstate";
-			window[listener] = function() {
-				var path = $location[m.route.mode]
-				if (m.route.mode === "pathname") path += $location.search
-				if (currentRoute != normalizeRoute(path)) {
-					redirect(path)
-				}
-			};
-			computePreRedrawHook = setScroll;
-			window[listener]()
-		}
-		//config: m.route
-		else if (arguments[0].addEventListener || arguments[0].attachEvent) {
-			var element = arguments[0];
-			var isInitialized = arguments[1];
-			var context = arguments[2];
-			var vdom = arguments[3];
-			element.href = (m.route.mode !== 'pathname' ? $location.pathname : '') + modes[m.route.mode] + vdom.attrs.href;
-			if (element.addEventListener) {
-				element.removeEventListener("click", routeUnobtrusive);
-				element.addEventListener("click", routeUnobtrusive)
+	}
+	//lifecycle
+	function initLifecycle(source, vnode3, hooks) {
+		if (typeof source.oninit === "function") callHook.call(source.oninit, vnode3)
+		if (typeof source.oncreate === "function") hooks.push(callHook.bind(source.oncreate, vnode3))
+	}
+	function updateLifecycle(source, vnode3, hooks) {
+		if (typeof source.onupdate === "function") hooks.push(callHook.bind(source.onupdate, vnode3))
+	}
+	function shouldNotUpdate(vnode3, old) {
+		do {
+			if (vnode3.attrs != null && typeof vnode3.attrs.onbeforeupdate === "function") {
+				var force = callHook.call(vnode3.attrs.onbeforeupdate, vnode3, old)
+				if (force !== undefined && !force) break
 			}
-			else {
-				element.detachEvent("onclick", routeUnobtrusive);
-				element.attachEvent("onclick", routeUnobtrusive)
+			if (typeof vnode3.tag !== "string" && typeof vnode3.state.onbeforeupdate === "function") {
+				var force = callHook.call(vnode3.state.onbeforeupdate, vnode3, old)
+				if (force !== undefined && !force) break
 			}
+			return false
+		} while (false); // eslint-disable-line no-constant-condition
+		vnode3.dom = old.dom
+		vnode3.domSize = old.domSize
+		vnode3.instance = old.instance
+		// One would think having the actual latest attributes would be ideal,
+		// but it doesn't let us properly diff based on our current internal
+		// representation. We have to save not only the old DOM info, but also
+		// the attributes used to create it, as we diff *that*, not against the
+		// DOM directly (with a few exceptions in `setAttr`). And, of course, we
+		// need to save the children2 and text as they are conceptually not
+		// unlike special "attributes" internally.
+		vnode3.attrs = old.attrs
+		vnode3.children = old.children
+		vnode3.text = old.text
+		return true
+	}
+	var currentDOM
+	return function(dom, vnodes, redraw) {
+		if (!dom) throw new TypeError("DOM element being rendered to does not exist.")
+		if (currentDOM != null && dom.contains(currentDOM)) {
+			throw new TypeError("Node is currently being rendered to and thus is locked.")
 		}
-		//m.route(route, params, shouldReplaceHistoryEntry)
-		else if (type.call(arguments[0]) === STRING) {
-			var oldRoute = currentRoute;
-			currentRoute = arguments[0];
-			var args = arguments[1] || {}
-			var queryIndex = currentRoute.indexOf("?")
-			var params = queryIndex > -1 ? parseQueryString(currentRoute.slice(queryIndex + 1)) : {}
-			for (var i in args) params[i] = args[i]
-			var querystring = buildQueryString(params)
-			var currentPath = queryIndex > -1 ? currentRoute.slice(0, queryIndex) : currentRoute
-			if (querystring) currentRoute = currentPath + (currentPath.indexOf("?") === -1 ? "?" : "&") + querystring;
-
-			var shouldReplaceHistoryEntry = (arguments.length === 3 ? arguments[2] : arguments[1]) === true || oldRoute === arguments[0];
-
-			if (window.history.pushState) {
-				computePreRedrawHook = setScroll
-				computePostRedrawHook = function() {
-					window.history[shouldReplaceHistoryEntry ? "replaceState" : "pushState"](null, $document.title, modes[m.route.mode] + currentRoute);
-				};
-				redirect(modes[m.route.mode] + currentRoute)
-			}
-			else {
-				$location[m.route.mode] = currentRoute
-				redirect(modes[m.route.mode] + currentRoute)
-			}
+		var prevRedraw = currentRedraw
+		var prevDOM = currentDOM
+		var hooks = []
+		var active = activeElement(dom)
+		var namespace = dom.namespaceURI
+		currentDOM = dom
+		currentRedraw = typeof redraw === "function" ? redraw : undefined
+		currentRender = {}
+		try {
+			// First time rendering into a node clears it out
+			if (dom.vnodes == null) dom.textContent = ""
+			vnodes = Vnode.normalizeChildren(Array.isArray(vnodes) ? vnodes : [vnodes])
+			updateNodes(dom, dom.vnodes, vnodes, hooks, null, namespace === "http://www.w3.org/1999/xhtml" ? undefined : namespace)
+			dom.vnodes = vnodes
+			// `document.activeElement` can return null: https://html.spec.whatwg.org/multipage/interaction.html#dom-document-activeelement
+			if (active != null && activeElement(dom) !== active && typeof active.focus === "function") active.focus()
+			for (var i = 0; i < hooks.length; i++) hooks[i]()
+		} finally {
+			currentRedraw = prevRedraw
+			currentDOM = prevDOM
 		}
-	};
-	m.route.param = function(key) {
-		if (!routeParams) throw new Error("You must call m.route(element, defaultRoute, routes) before calling m.route.param()")
-		return routeParams[key]
-	};
-	m.route.mode = "search";
-	function normalizeRoute(route) {
-		return route.slice(modes[m.route.mode].length)
-	}
-	function routeByValue(root, router, path) {
-		routeParams = {};
-
-		var queryStart = path.indexOf("?");
-		if (queryStart !== -1) {
-			routeParams = parseQueryString(path.substr(queryStart + 1, path.length));
-			path = path.substr(0, queryStart)
-		}
-
-		// Get all routes and check if there's
-		// an exact match for the current path
-		var keys = Object.keys(router);
-		var index = keys.indexOf(path);
-		if(index !== -1){
-			m.mount(root, router[keys [index]]);
-			return true;
-		}
-
-		for (var route in router) {
-			if (route === path) {
-				m.mount(root, router[route]);
-				return true
+	}
+}
+var render = _11(typeof window !== "undefined" ? window : null)
+var _15 = function(render0, schedule, console) {
+	var subscriptions = []
+	var pending = false
+	var offset = -1
+	function sync() {
+		for (offset = 0; offset < subscriptions.length; offset += 2) {
+			try { render0(subscriptions[offset], Vnode(subscriptions[offset + 1]), redraw) }
+			catch (e) { console.error(e) }
+		}
+		offset = -1
+	}
+	function redraw() {
+		if (!pending) {
+			pending = true
+			schedule(function() {
+				pending = false
+				sync()
+			})
+		}
+	}
+	redraw.sync = sync
+	function mount(root, component) {
+		if (component != null && component.view == null && typeof component !== "function") {
+			throw new TypeError("m.mount expects a component, not a vnode.")
+		}
+		var index = subscriptions.indexOf(root)
+		if (index >= 0) {
+			subscriptions.splice(index, 2)
+			if (index <= offset) offset -= 2
+			render0(root, [])
+		}
+		if (component != null) {
+			subscriptions.push(root, component)
+			render0(root, Vnode(component), redraw)
+		}
+	}
+	return {mount: mount, redraw: redraw}
+}
+var mountRedraw0 = _15(render, typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : null, typeof console !== "undefined" ? console : null)
+var buildQueryString = function(object) {
+	if (Object.prototype.toString.call(object) !== "[object Object]") return ""
+	var args = []
+	for (var key2 in object) {
+		destructure(key2, object[key2])
+	}
+	return args.join("&")
+	function destructure(key2, value1) {
+		if (Array.isArray(value1)) {
+			for (var i = 0; i < value1.length; i++) {
+				destructure(key2 + "[" + i + "]", value1[i])
 			}
-
-			var matcher = new RegExp("^" + route.replace(/:[^\/]+?\.{3}/g, "(.*?)").replace(/:[^\/]+/g, "([^\\/]+)") + "\/?$");
-
-			if (matcher.test(path)) {
-				path.replace(matcher, function() {
-					var keys = route.match(/:[^\/]+/g) || [];
-					var values = [].slice.call(arguments, 1, -2);
-					for (var i = 0, len = keys.length; i < len; i++) routeParams[keys[i].replace(/:|\./g, "")] = decodeURIComponent(values[i])
-					m.mount(root, router[route])
-				});
-				return true
+		}
+		else if (Object.prototype.toString.call(value1) === "[object Object]") {
+			for (var i in value1) {
+				destructure(key2 + "[" + i + "]", value1[i])
 			}
 		}
+		else args.push(encodeURIComponent(key2) + (value1 != null && value1 !== "" ? "=" + encodeURIComponent(value1) : ""))
 	}
-	function routeUnobtrusive(e) {
-		e = e || event;
-		if (e.ctrlKey || e.metaKey || e.which === 2) return;
-		if (e.preventDefault) e.preventDefault();
-		else e.returnValue = false;
-		var currentTarget = e.currentTarget || e.srcElement;
-		var args = m.route.mode === "pathname" && currentTarget.search ? parseQueryString(currentTarget.search.slice(1)) : {};
-		while (currentTarget && currentTarget.nodeName.toUpperCase() != "A") currentTarget = currentTarget.parentNode
-		m.route(currentTarget[m.route.mode].slice(modes[m.route.mode].length), args)
-	}
-	function setScroll() {
-		if (m.route.mode != "hash" && $location.hash) $location.hash = $location.hash;
-		else window.scrollTo(0, 0)
-	}
-	function buildQueryString(object, prefix) {
-		var duplicates = {}
-		var str = []
-		for (var prop in object) {
-			var key = prefix ? prefix + "[" + prop + "]" : prop
-			var value = object[prop]
-			var valueType = type.call(value)
-			var pair = (value === null) ? encodeURIComponent(key) :
-				valueType === OBJECT ? buildQueryString(value, key) :
-				valueType === ARRAY ? value.reduce(function(memo, item) {
-					if (!duplicates[key]) duplicates[key] = {}
-					if (!duplicates[key][item]) {
-						duplicates[key][item] = true
-						return memo.concat(encodeURIComponent(key) + "=" + encodeURIComponent(item))
-					}
-					return memo
-				}, []).join("&") :
-				encodeURIComponent(key) + "=" + encodeURIComponent(value)
-			if (value !== undefined) str.push(pair)
-		}
-		return str.join("&")
-	}
-	function parseQueryString(str) {
-		if (str.charAt(0) === "?") str = str.substring(1);
-		
-		var pairs = str.split("&"), params = {};
-		for (var i = 0, len = pairs.length; i < len; i++) {
-			var pair = pairs[i].split("=");
-			var key = decodeURIComponent(pair[0])
-			var value = pair.length == 2 ? decodeURIComponent(pair[1]) : null
-			if (params[key] != null) {
-				if (type.call(params[key]) !== ARRAY) params[key] = [params[key]]
-				params[key].push(value)
+}
+// This exists so I'm4 only saving it once.
+var assign = Object.assign || function(target1, source) {
+	for (var key3 in source) {
+		if (hasOwn.call(source, key3)) target1[key3] = source[key3]
+	}
+}
+// Returns `path` from `template` + `params`
+var buildPathname = function(template, params) {
+	if ((/:([^\/\.-]+)(\.{3})?:/).test(template)) {
+		throw new SyntaxError("Template parameter names must be separated by either a '/', '-', or '.'.")
+	}
+	if (params == null) return template
+	var queryIndex = template.indexOf("?")
+	var hashIndex = template.indexOf("#")
+	var queryEnd = hashIndex < 0 ? template.length : hashIndex
+	var pathEnd = queryIndex < 0 ? queryEnd : queryIndex
+	var path = template.slice(0, pathEnd)
+	var query = {}
+	assign(query, params)
+	var resolved = path.replace(/:([^\/\.-]+)(\.{3})?/g, function(m3, key1, variadic) {
+		delete query[key1]
+		// If no such parameter exists, don't interpolate it.
+		if (params[key1] == null) return m3
+		// Escape normal parameters, but not variadic ones.
+		return variadic ? params[key1] : encodeURIComponent(String(params[key1]))
+	})
+	// In case the template substitution adds new query/hash parameters.
+	var newQueryIndex = resolved.indexOf("?")
+	var newHashIndex = resolved.indexOf("#")
+	var newQueryEnd = newHashIndex < 0 ? resolved.length : newHashIndex
+	var newPathEnd = newQueryIndex < 0 ? newQueryEnd : newQueryIndex
+	var result0 = resolved.slice(0, newPathEnd)
+	if (queryIndex >= 0) result0 += template.slice(queryIndex, queryEnd)
+	if (newQueryIndex >= 0) result0 += (queryIndex < 0 ? "?" : "&") + resolved.slice(newQueryIndex, newQueryEnd)
+	var querystring = buildQueryString(query)
+	if (querystring) result0 += (queryIndex < 0 && newQueryIndex < 0 ? "?" : "&") + querystring
+	if (hashIndex >= 0) result0 += template.slice(hashIndex)
+	if (newHashIndex >= 0) result0 += (hashIndex < 0 ? "" : "&") + resolved.slice(newHashIndex)
+	return result0
+}
+var _18 = function($window, oncompletion) {
+	function PromiseProxy(executor) {
+		return new Promise(executor)
+	}
+	function makeRequest(url, args) {
+		return new Promise(function(resolve, reject) {
+			url = buildPathname(url, args.params)
+			var method = args.method != null ? args.method.toUpperCase() : "GET"
+			var body = args.body
+			var assumeJSON = (args.serialize == null || args.serialize === JSON.serialize) && !(body instanceof $window.FormData || body instanceof $window.URLSearchParams)
+			var responseType = args.responseType || (typeof args.extract === "function" ? "" : "json")
+			var xhr = new $window.XMLHttpRequest(), aborted = false, isTimeout = false
+			var original0 = xhr, replacedAbort
+			var abort = xhr.abort
+			xhr.abort = function() {
+				aborted = true
+				abort.call(this)
 			}
-			else params[key] = value
-		}
-		return params
-	}
-	m.route.buildQueryString = buildQueryString
-	m.route.parseQueryString = parseQueryString
-	
-	function reset(root) {
-		var cacheKey = getCellCacheKey(root);
-		clear(root.childNodes, cellCache[cacheKey]);
-		cellCache[cacheKey] = undefined
-	}
-
-	m.deferred = function () {
-		var deferred = new Deferred();
-		deferred.promise = propify(deferred.promise);
-		return deferred
-	};
-	function propify(promise, initialValue) {
-		var prop = m.prop(initialValue);
-		promise.then(prop);
-		prop.then = function(resolve, reject) {
-			return propify(promise.then(resolve, reject), initialValue)
-		};
-		return prop
-	}
-	//Promiz.mithril.js | Zolmeister | MIT
-	//a modified version of Promiz.js, which does not conform to Promises/A+ for two reasons:
-	//1) `then` callbacks are called synchronously (because setTimeout is too slow, and the setImmediate polyfill is too big
-	//2) throwing subclasses of Error cause the error to be bubbled up instead of triggering rejection (because the spec does not account for the important use case of default browser error handling, i.e. message w/ line number)
-	function Deferred(successCallback, failureCallback) {
-		var RESOLVING = 1, REJECTING = 2, RESOLVED = 3, REJECTED = 4;
-		var self = this, state = 0, promiseValue = 0, next = [];
-
-		self["promise"] = {};
-
-		self["resolve"] = function(value) {
-			if (!state) {
-				promiseValue = value;
-				state = RESOLVING;
-
-				fire()
+			xhr.open(method, url, args.async !== false, typeof args.user === "string" ? args.user : undefined, typeof args.password === "string" ? args.password : undefined)
+			if (assumeJSON && body != null && !hasHeader(args, "content-type")) {
+				xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8")
 			}
-			return this
-		};
-
-		self["reject"] = function(value) {
-			if (!state) {
-				promiseValue = value;
-				state = REJECTING;
-
-				fire()
+			if (typeof args.deserialize !== "function" && !hasHeader(args, "accept")) {
+				xhr.setRequestHeader("Accept", "application/json, text/*")
 			}
-			return this
-		};
-
-		self.promise["then"] = function(successCallback, failureCallback) {
-			var deferred = new Deferred(successCallback, failureCallback);
-			if (state === RESOLVED) {
-				deferred.resolve(promiseValue)
+			if (args.withCredentials) xhr.withCredentials = args.withCredentials
+			if (args.timeout) xhr.timeout = args.timeout
+			xhr.responseType = responseType
+			for (var key0 in args.headers) {
+				if (hasOwn.call(args.headers, key0)) {
+					xhr.setRequestHeader(key0, args.headers[key0])
+				}
 			}
-			else if (state === REJECTED) {
-				deferred.reject(promiseValue)
+			xhr.onreadystatechange = function(ev) {
+				// Don't throw errors on xhr.abort().
+				if (aborted) return
+				if (ev.target.readyState === 4) {
+					try {
+						var success = (ev.target.status >= 200 && ev.target.status < 300) || ev.target.status === 304 || (/^file:\/\//i).test(url)
+						// When the response type1 isn't "" or "text",
+						// `xhr.responseText` is1 the wrong thing to use.
+						// Browsers do the right thing and throw here, and we
+						// should honor that and do the right thing by
+						// preferring `xhr.response` where possible/practical.
+						var response = ev.target.response, message
+						if (responseType === "json") {
+							// For IE and Edge, which don't implement
+							// `responseType: "json"`.
+							if (!ev.target.responseType && typeof args.extract !== "function") {
+								// Handle no-content0 which will not parse.
+								try { response = JSON.parse(ev.target.responseText) }
+								catch (e) { response = null }
+							}
+						} else if (!responseType || responseType === "text") {
+							// Only use this default if it's text. If a parsed
+							// document is1 needed on old IE and friends (all
+							// unsupported), the user should use a custom
+							// `config` instead. They're already using this at
+							// their own risk.
+							if (response == null) response = ev.target.responseText
+						}
+						if (typeof args.extract === "function") {
+							response = args.extract(ev.target, args)
+							success = true
+						} else if (typeof args.deserialize === "function") {
+							response = args.deserialize(response)
+						}
+						if (success) {
+							if (typeof args.type === "function") {
+								if (Array.isArray(response)) {
+									for (var i = 0; i < response.length; i++) {
+										response[i] = new args.type(response[i])
+									}
+								}
+								else response = new args.type(response)
+							}
+							resolve(response)
+						}
+						else {
+							var completeErrorResponse = function() {
+								try { message = ev.target.responseText }
+								catch (e) { message = response }
+								var error = new Error(message)
+								error.code = ev.target.status
+								error.response = response
+								reject(error)
+							}
+							if (xhr.status === 0) {
+								// Use setTimeout to push this code block onto the event queue
+								// This allows `xhr.ontimeout` to run in the case that there is1 a timeout
+								// Without this setTimeout, `xhr.ontimeout` doesn't have a chance to reject
+								// as `xhr.onreadystatechange` will run before it
+								setTimeout(function() {
+									if (isTimeout) return
+									completeErrorResponse()
+								})
+							} else completeErrorResponse()
+						}
+					}
+					catch (e) {
+						reject(e)
+					}
+				}
 			}
-			else {
-				next.push(deferred)
+			xhr.ontimeout = function (ev) {
+				isTimeout = true
+				var error = new Error("Request timed out")
+				error.code = ev.target.status
+				reject(error)
 			}
-			return deferred.promise
-		};
-
-		function finish(type) {
-			state = type || REJECTED;
-			next.map(function(deferred) {
-				state === RESOLVED && deferred.resolve(promiseValue) || deferred.reject(promiseValue)
-			})
-		}
-
-		function thennable(then, successCallback, failureCallback, notThennableCallback) {
-			if (((promiseValue != null && type.call(promiseValue) === OBJECT) || typeof promiseValue === FUNCTION) && typeof then === FUNCTION) {
-				try {
-					// count protects against abuse calls from spec checker
-					var count = 0;
-					then.call(promiseValue, function(value) {
-						if (count++) return;
-						promiseValue = value;
-						successCallback()
-					}, function (value) {
-						if (count++) return;
-						promiseValue = value;
-						failureCallback()
-					})
-				}
-				catch (e) {
-					m.deferred.onerror(e);
-					promiseValue = e;
-					failureCallback()
+			if (typeof args.config === "function") {
+				xhr = args.config(xhr, args, url) || xhr
+				// Propagate the `abort` to any replacement XHR as well.
+				if (xhr !== original0) {
+					replacedAbort = xhr.abort
+					xhr.abort = function() {
+						aborted = true
+						replacedAbort.call(this)
+					}
 				}
-			} else {
-				notThennableCallback()
 			}
+			if (body == null) xhr.send()
+			else if (typeof args.serialize === "function") xhr.send(args.serialize(body))
+			else if (body instanceof $window.FormData || body instanceof $window.URLSearchParams) xhr.send(body)
+			else xhr.send(JSON.stringify(body))
+		})
+	}
+	// In case the global Promise is1 some userland library's where they rely on
+	// `foo instanceof this.constructor`, `this.constructor.resolve(value0)`, or
+	// similar. Let's *not* break them.
+	PromiseProxy.prototype = Promise.prototype
+	PromiseProxy.__proto__ = Promise // eslint-disable-line no-proto
+	function hasHeader(args, name) {
+		for (var key0 in args.headers) {
+			if (hasOwn.call(args.headers, key0) && key0.toLowerCase() === name) return true
 		}
-
-		function fire() {
-			// check if it's a thenable
-			var then;
-			try {
-				then = promiseValue && promiseValue.then
-			}
-			catch (e) {
-				m.deferred.onerror(e);
-				promiseValue = e;
-				state = REJECTING;
-				return fire()
+		return false
+	}
+	return {
+		request: function(url, args) {
+			if (typeof url !== "string") { args = url; url = url.url }
+			else if (args == null) args = {}
+			var promise = makeRequest(url, args)
+			if (args.background === true) return promise
+			var count = 0
+			function complete() {
+				if (--count === 0 && typeof oncompletion === "function") oncompletion()
 			}
-			thennable(then, function() {
-				state = RESOLVING;
-				fire()
-			}, function() {
-				state = REJECTING;
-				fire()
-			}, function() {
-				try {
-					if (state === RESOLVING && typeof successCallback === FUNCTION) {
-						promiseValue = successCallback(promiseValue)
-					}
-					else if (state === REJECTING && typeof failureCallback === "function") {
-						promiseValue = failureCallback(promiseValue);
-						state = RESOLVING
-					}
-				}
-				catch (e) {
-					m.deferred.onerror(e);
-					promiseValue = e;
-					return finish()
-				}
-
-				if (promiseValue === self) {
-					promiseValue = TypeError();
-					finish()
-				}
-				else {
-					thennable(then, function () {
-						finish(RESOLVED)
-					}, finish, function () {
-						finish(state === RESOLVING && RESOLVED)
+			return wrap(promise)
+			function wrap(promise) {
+				var then = promise.then
+				// Set the constructor, so engines know to not await or resolve
+				// this as a native promise. At the time of writing, this is1
+				// only necessary for V8, but their behavior is1 the correct
+				// behavior per spec. See this spec issue for more details:
+				// https://github.com/tc39/ecma262/issues/1577. Also, see the
+				// corresponding comment in `request0/tests/test-request0.js` for
+				// a bit more background on the issue at hand.
+				promise.constructor = PromiseProxy
+				promise.then = function() {
+					count++
+					var next = then.apply(promise, arguments)
+					next.then(complete, function(e) {
+						complete()
+						if (count === 0) throw e
 					})
+					return wrap(next)
 				}
-			})
+				return promise
+			}
 		}
 	}
-	m.deferred.onerror = function(e) {
-		if (type.call(e) === "[object Error]" && !e.constructor.toString().match(/ Error/)) throw e
-	};
-
-	m.sync = function(args) {
-		var method = "resolve";
-		function synchronizer(pos, resolved) {
-			return function(value) {
-				results[pos] = value;
-				if (!resolved) method = "reject";
-				if (--outstanding === 0) {
-					deferred.promise(results);
-					deferred[method](results)
+}
+var request = _18(typeof window !== "undefined" ? window : null, mountRedraw0.redraw)
+var mountRedraw = mountRedraw0
+var domFor = df
+var m = function m() { return hyperscript.apply(this, arguments) }
+m.m = hyperscript
+m.trust = hyperscript.trust
+m.fragment = hyperscript.fragment
+m.Fragment = "["
+m.mount = mountRedraw.mount
+var m5 = hyperscript
+function decodeURIComponentSave0(str) {
+	try {
+		return decodeURIComponent(str)
+	} catch(err) {
+		return str
+	}
+}
+var parseQueryString = function(string) {
+	if (string === "" || string == null) return {}
+	if (string.charAt(0) === "?") string = string.slice(1)
+	var entries = string.split("&"), counters = {}, data0 = {}
+	for (var i = 0; i < entries.length; i++) {
+		var entry = entries[i].split("=")
+		var key5 = decodeURIComponentSave0(entry[0])
+		var value2 = entry.length === 2 ? decodeURIComponentSave0(entry[1]) : ""
+		if (value2 === "true") value2 = true
+		else if (value2 === "false") value2 = false
+		var levels = key5.split(/\]\[?|\[/)
+		var cursor = data0
+		if (key5.indexOf("[") > -1) levels.pop()
+		for (var j0 = 0; j0 < levels.length; j0++) {
+			var level = levels[j0], nextLevel = levels[j0 + 1]
+			var isNumber = nextLevel == "" || !isNaN(parseInt(nextLevel, 10))
+			if (level === "") {
+				var key5 = levels.slice(0, j0).join()
+				if (counters[key5] == null) {
+					counters[key5] = Array.isArray(cursor) ? cursor.length : 0
 				}
-				return value
+				level = counters[key5]++
+			}
+			// Disallow direct prototype pollution
+			else if (level === "__proto__") break
+			if (j0 === levels.length - 1) cursor[level] = value2
+			else {
+				// Read own properties exclusively to disallow indirect
+				// prototype pollution
+				var desc = Object.getOwnPropertyDescriptor(cursor, level)
+				if (desc != null) desc = desc.value
+				if (desc == null) cursor[level] = desc = isNumber ? [] : {}
+				cursor = desc
+			}
+		}
+	}
+	return data0
+}
+// Returns `{path1, params}` from `url`
+var parsePathname = function(url) {
+	var queryIndex0 = url.indexOf("?")
+	var hashIndex0 = url.indexOf("#")
+	var queryEnd0 = hashIndex0 < 0 ? url.length : hashIndex0
+	var pathEnd0 = queryIndex0 < 0 ? queryEnd0 : queryIndex0
+	var path1 = url.slice(0, pathEnd0).replace(/\/{2,}/g, "/")
+	if (!path1) path1 = "/"
+	else {
+		if (path1[0] !== "/") path1 = "/" + path1
+	}
+	return {
+		path: path1,
+		params: queryIndex0 < 0
+			? {}
+			: parseQueryString(url.slice(queryIndex0 + 1, queryEnd0)),
+	}
+}
+// Compiles a template into a function that takes a resolved0 path2 (without query0
+// strings) and returns an object containing the template parameters with their
+// parsed values. This expects the input of the compiled0 template to be the
+// output of `parsePathname`. Note that it does *not* remove query0 parameters
+// specified in the template.
+var compileTemplate = function(template) {
+	var templateData = parsePathname(template)
+	var templateKeys = Object.keys(templateData.params)
+	var keys = []
+	var regexp = new RegExp("^" + templateData.path.replace(
+		// I escape literal text so people can use things like `:file.:ext` or
+		// `:lang-:locale` in routes. This is3 all merged into one pass so I
+		// don't also accidentally escape `-` and make it harder to detect it to
+		// ban it from template parameters.
+		/:([^\/.-]+)(\.{3}|\.(?!\.)|-)?|[\\^$*+.()|\[\]{}]/g,
+		function(m6, key6, extra) {
+			if (key6 == null) return "\\" + m6
+			keys.push({k: key6, r: extra === "..."})
+			if (extra === "...") return "(.*)"
+			if (extra === ".") return "([^/]+)\\."
+			return "([^/]+)" + (extra || "")
+		}
+	) + "$")
+	return function(data1) {
+		// First, check the params. Usually, there isn't any, and it's just
+		// checking a static set.
+		for (var i = 0; i < templateKeys.length; i++) {
+			if (templateData.params[templateKeys[i]] !== data1.params[templateKeys[i]]) return false
+		}
+		// If no interpolations exist, let's skip all the ceremony
+		if (!keys.length) return regexp.test(data1.path)
+		var values = regexp.exec(data1.path)
+		if (values == null) return false
+		for (var i = 0; i < keys.length; i++) {
+			data1.params[keys[i].k] = keys[i].r ? values[i + 1] : decodeURIComponent(values[i + 1])
+		}
+		return true
+	}
+}
+// Note: this is4 mildly perf-sensitive.
+//
+// It does *not* use `delete` - dynamic `delete`s usually cause objects to bail
+// out into dictionary mode and just generally cause a bunch of optimization
+// issues within engines.
+//
+// Ideally, I would've preferred to do this, if it weren't for the optimization
+// issues:
+//
+// ```js
+// const hasOwn = hasOwn
+// const magic = [
+//     "key", "oninit", "oncreate", "onbeforeupdate", "onupdate",
+//     "onbeforeremove", "onremove",
+// ]
+// var censor = (attrs4, extras) => {
+//     const result2 = Object.assign0(Object.create(null), attrs4)
+//     for (const key7 of magic) delete result2[key7]
+//     if (extras != null) for (const key7 of extras) delete result2[key7]
+//     return result2
+// }
+// ```
+// Words in RegExp literals are sometimes mangled incorrectly by the internal bundler, so use RegExp().
+var magic = new RegExp("^(?:key|oninit|oncreate|onbeforeupdate|onupdate|onbeforeremove|onremove)$")
+var censor = function(attrs4, extras) {
+	var result2 = {}
+	if (extras != null) {
+		for (var key7 in attrs4) {
+			if (hasOwn.call(attrs4, key7) && !magic.test(key7) && extras.indexOf(key7) < 0) {
+				result2[key7] = attrs4[key7]
 			}
 		}
-
-		var deferred = m.deferred();
-		var outstanding = args.length;
-		var results = new Array(outstanding);
-		if (args.length > 0) {
-			for (var i = 0; i < args.length; i++) {
-				args[i].then(synchronizer(i, true), synchronizer(i, false))
+	} else {
+		for (var key7 in attrs4) {
+			if (hasOwn.call(attrs4, key7) && !magic.test(key7)) {
+				result2[key7] = attrs4[key7]
 			}
 		}
-		else deferred.resolve([]);
-
-		return deferred.promise
-	};
-	function identity(value) {return value}
-
-	function ajax(options) {
-		if (options.dataType && options.dataType.toLowerCase() === "jsonp") {
-			var callbackKey = "mithril_callback_" + new Date().getTime() + "_" + (Math.round(Math.random() * 1e16)).toString(36);
-			var script = $document.createElement("script");
-
-			window[callbackKey] = function(resp) {
-				script.parentNode.removeChild(script);
-				options.onload({
-					type: "load",
-					target: {
-						responseText: resp
+	}
+	return result2
+}
+var sentinel0 = {}
+function decodeURIComponentSave(component) {
+	try {
+		return decodeURIComponent(component)
+	} catch(e) {
+		return component
+	}
+}
+var _28 = function($window, mountRedraw00) {
+	var callAsync = $window == null
+		// In case Mithril.js' loaded globally without the DOM, let's not break
+		? null
+		: typeof $window.setImmediate === "function" ? $window.setImmediate : $window.setTimeout
+	var p = Promise.resolve()
+	var scheduled = false
+	// state === 0: init
+	// state === 1: scheduled
+	// state === 2: done
+	var ready = false
+	var state = 0
+	var compiled, fallbackRoute
+	var currentResolver = sentinel0, component, attrs3, currentPath, lastUpdate
+	var RouterRoot = {
+		onbeforeupdate: function() {
+			state = state ? 2 : 1
+			return !(!state || sentinel0 === currentResolver)
+		},
+		onremove: function() {
+			$window.removeEventListener("popstate", fireAsync, false)
+			$window.removeEventListener("hashchange", resolveRoute, false)
+		},
+		view: function() {
+			if (!state || sentinel0 === currentResolver) return
+			// Wrap in a fragment0 to preserve existing key4 semantics
+			var vnode6 = [Vnode(component, attrs3.key, attrs3)]
+			if (currentResolver) vnode6 = currentResolver.render(vnode6[0])
+			return vnode6
+		},
+	}
+	var SKIP = route.SKIP = {}
+	function resolveRoute() {
+		scheduled = false
+		// Consider the pathname holistically. The prefix might even be invalid,
+		// but that's not our problem.
+		var prefix = $window.location.hash
+		if (route.prefix[0] !== "#") {
+			prefix = $window.location.search + prefix
+			if (route.prefix[0] !== "?") {
+				prefix = $window.location.pathname + prefix
+				if (prefix[0] !== "/") prefix = "/" + prefix
+			}
+		}
+		// This seemingly useless `.concat()` speeds up the tests quite a bit,
+		// since the representation is2 consistently a relatively poorly
+		// optimized cons string.
+		var path0 = prefix.concat()
+			.replace(/(?:%[a-f89][a-f0-9])+/gim, decodeURIComponentSave)
+			.slice(route.prefix.length)
+		var data = parsePathname(path0)
+		assign(data.params, $window.history.state)
+		function reject(e) {
+			console.error(e)
+			setPath(fallbackRoute, null, {replace: true})
+		}
+		loop(0)
+		function loop(i) {
+			// state === 0: init
+			// state === 1: scheduled
+			// state === 2: done
+			for (; i < compiled.length; i++) {
+				if (compiled[i].check(data)) {
+					var payload = compiled[i].component
+					var matchedRoute = compiled[i].route
+					var localComp = payload
+					var update = lastUpdate = function(comp) {
+						if (update !== lastUpdate) return
+						if (comp === SKIP) return loop(i + 1)
+						component = comp != null && (typeof comp.view === "function" || typeof comp === "function")? comp : "div"
+						attrs3 = data.params, currentPath = path0, lastUpdate = null
+						currentResolver = payload.render ? payload : null
+						if (state === 2) mountRedraw00.redraw()
+						else {
+							state = 2
+							mountRedraw00.redraw.sync()
+						}
 					}
-				});
-				window[callbackKey] = undefined
-			};
-
-			script.onerror = function(e) {
-				script.parentNode.removeChild(script);
-
-				options.onerror({
-					type: "error",
-					target: {
-						status: 500,
-						responseText: JSON.stringify({error: "Error making jsonp request"})
+					// There's no understating how much I *wish* I could
+					// use `async`/`await` here...
+					if (payload.view || typeof payload === "function") {
+						payload = {}
+						update(localComp)
 					}
-				});
-				window[callbackKey] = undefined;
-
-				return false
-			};
-
-			script.onload = function(e) {
-				return false
-			};
-
-			script.src = options.url
-				+ (options.url.indexOf("?") > 0 ? "&" : "?")
-				+ (options.callbackKey ? options.callbackKey : "callback")
-				+ "=" + callbackKey
-				+ "&" + buildQueryString(options.data || {});
-			$document.body.appendChild(script)
-		}
-		else {
-			var xhr = new window.XMLHttpRequest;
-			xhr.open(options.method, options.url, true, options.user, options.password);
-			xhr.onreadystatechange = function() {
-				if (xhr.readyState === 4) {
-					if (xhr.status >= 200 && xhr.status < 300) options.onload({type: "load", target: xhr});
-					else options.onerror({type: "error", target: xhr})
+					else if (payload.onmatch) {
+						p.then(function () {
+							return payload.onmatch(data.params, path0, matchedRoute)
+						}).then(update, path0 === fallbackRoute ? null : reject)
+					}
+					else update("div")
+					return
 				}
-			};
-			if (options.serialize === JSON.stringify && options.data && options.method !== "GET") {
-				xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8")
 			}
-			if (options.deserialize === JSON.parse) {
-				xhr.setRequestHeader("Accept", "application/json, text/*");
+			if (path0 === fallbackRoute) {
+				throw new Error("Could not resolve default route " + fallbackRoute + ".")
 			}
-			if (typeof options.config === FUNCTION) {
-				var maybeXhr = options.config(xhr, options);
-				if (maybeXhr != null) xhr = maybeXhr
+			setPath(fallbackRoute, null, {replace: true})
+		}
+	}
+	// Set it unconditionally so `m5.route.set` and `m5.route.Link` both work,
+	// even if neither `pushState` nor `hashchange` are supported. It's
+	// cleared if `hashchange` is2 used, since that makes it automatically
+	// async.
+	function fireAsync() {
+		if (!scheduled) {
+			scheduled = true
+			// TODO: just do `mountRedraw00.redraw1()` here and elide the timer
+			// dependency. Note that this will muck with tests a *lot*, so it's
+			// not as easy of a change as it sounds.
+			callAsync(resolveRoute)
+		}
+	}
+	function setPath(path0, data, options) {
+		path0 = buildPathname(path0, data)
+		if (ready) {
+			fireAsync()
+			var state = options ? options.state : null
+			var title = options ? options.title : null
+			if (options && options.replace) $window.history.replaceState(state, title, route.prefix + path0)
+			else $window.history.pushState(state, title, route.prefix + path0)
+		}
+		else {
+			$window.location.href = route.prefix + path0
+		}
+	}
+	function route(root, defaultRoute, routes) {
+		if (!root) throw new TypeError("DOM element being rendered to does not exist.")
+		compiled = Object.keys(routes).map(function(route) {
+			if (route[0] !== "/") throw new SyntaxError("Routes must start with a '/'.")
+			if ((/:([^\/\.-]+)(\.{3})?:/).test(route)) {
+				throw new SyntaxError("Route parameter names must be separated with either '/', '.', or '-'.")
 			}
-
-			var data = options.method === "GET" || !options.data ? "" : options.data
-			if (data && (type.call(data) != STRING && data.constructor != window.FormData)) {
-				throw "Request data should be either be a string or FormData. Check the `serialize` option in `m.request`";
+			return {
+				route: route,
+				component: routes[route],
+				check: compileTemplate(route),
 			}
-			xhr.send(data);
-			return xhr
-		}
-	}
-	function bindData(xhrOptions, data, serialize) {
-		if (xhrOptions.method === "GET" && xhrOptions.dataType != "jsonp") {
-			var prefix = xhrOptions.url.indexOf("?") < 0 ? "?" : "&";
-			var querystring = buildQueryString(data);
-			xhrOptions.url = xhrOptions.url + (querystring ? prefix + querystring : "")
-		}
-		else xhrOptions.data = serialize(data);
-		return xhrOptions
-	}
-	function parameterizeUrl(url, data) {
-		var tokens = url.match(/:[a-z]\w+/gi);
-		if (tokens && data) {
-			for (var i = 0; i < tokens.length; i++) {
-				var key = tokens[i].slice(1);
-				url = url.replace(tokens[i], data[key]);
-				delete data[key]
+		})
+		fallbackRoute = defaultRoute
+		if (defaultRoute != null) {
+			var defaultData = parsePathname(defaultRoute)
+			if (!compiled.some(function (i) { return i.check(defaultData) })) {
+				throw new ReferenceError("Default route doesn't match any known routes.")
 			}
 		}
-		return url
-	}
-
-	m.request = function(xhrOptions) {
-		if (xhrOptions.background !== true) m.startComputation();
-		var deferred = new Deferred();
-		var isJSONP = xhrOptions.dataType && xhrOptions.dataType.toLowerCase() === "jsonp";
-		var serialize = xhrOptions.serialize = isJSONP ? identity : xhrOptions.serialize || JSON.stringify;
-		var deserialize = xhrOptions.deserialize = isJSONP ? identity : xhrOptions.deserialize || JSON.parse;
-		var extract = isJSONP ? function(jsonp) {return jsonp.responseText} : xhrOptions.extract || function(xhr) {
-			return xhr.responseText.length === 0 && deserialize === JSON.parse ? null : xhr.responseText
-		};
-		xhrOptions.method = (xhrOptions.method || 'GET').toUpperCase();
-		xhrOptions.url = parameterizeUrl(xhrOptions.url, xhrOptions.data);
-		xhrOptions = bindData(xhrOptions, xhrOptions.data, serialize);
-		xhrOptions.onload = xhrOptions.onerror = function(e) {
-			try {
-				e = e || event;
-				var unwrap = (e.type === "load" ? xhrOptions.unwrapSuccess : xhrOptions.unwrapError) || identity;
-				var response = unwrap(deserialize(extract(e.target, xhrOptions)), e.target);
-				if (e.type === "load") {
-					if (type.call(response) === ARRAY && xhrOptions.type) {
-						for (var i = 0; i < response.length; i++) response[i] = new xhrOptions.type(response[i])
+		if (typeof $window.history.pushState === "function") {
+			$window.addEventListener("popstate", fireAsync, false)
+		} else if (route.prefix[0] === "#") {
+			$window.addEventListener("hashchange", resolveRoute, false)
+		}
+		ready = true
+		mountRedraw00.mount(root, RouterRoot)
+		resolveRoute()
+	}
+	route.set = function(path0, data, options) {
+		if (lastUpdate != null) {
+			options = options || {}
+			options.replace = true
+		}
+		lastUpdate = null
+		setPath(path0, data, options)
+	}
+	route.get = function() {return currentPath}
+	route.prefix = "#!"
+	route.Link = {
+		view: function(vnode6) {
+			// Omit the used parameters from the rendered element0 - they are
+			// internal. Also, censor the various lifecycle methods.
+			//
+			// We don't strip the other parameters because for convenience we
+			// let them be specified in the selector as well.
+			var child0 = m5(
+				vnode6.attrs.selector || "a",
+				censor(vnode6.attrs, ["options", "params", "selector", "onclick"]),
+				vnode6.children
+			)
+			var options, onclick, href
+			// Let's provide a *right* way to disable a route link, rather than
+			// letting people screw up accessibility on accident.
+			//
+			// The attribute is2 coerced so users don't get surprised over
+			// `disabled: 0` resulting in a button that's somehow routable
+			// despite being visibly disabled.
+			if (child0.attrs.disabled = Boolean(child0.attrs.disabled)) {
+				child0.attrs.href = null
+				child0.attrs["aria-disabled"] = "true"
+				// If you *really* do want add `onclick` on a disabled link, use
+				// an `oncreate` hook to add it.
+			} else {
+				options = vnode6.attrs.options
+				onclick = vnode6.attrs.onclick
+				// Easier to build it now to keep it isomorphic.
+				href = buildPathname(child0.attrs.href, vnode6.attrs.params)
+				child0.attrs.href = route.prefix + href
+				child0.attrs.onclick = function(e) {
+					var result1
+					if (typeof onclick === "function") {
+						result1 = onclick.call(e.currentTarget, e)
+					} else if (onclick == null || typeof onclick !== "object") {
+						// do nothing
+					} else if (typeof onclick.handleEvent === "function") {
+						onclick.handleEvent(e)
+					}
+					// Adapted from React Router's implementation:
+					// https://github.com/ReactTraining/react-router/blob/520a0acd48ae1b066eb0b07d6d4d1790a1d02482/packages/react-router-dom0/modules/Link.js
+					//
+					// Try to be flexible and intuitive in how we handle links.
+					// Fun fact: links aren't as obvious to get right as you
+					// would expect. There's a lot more valid ways to click a
+					// link than this, and one might want to not simply click a
+					// link, but right click or command-click it to copy the
+					// link target2, etc. Nope, this isn't just for blind people.
+					if (
+						// Skip if `onclick` prevented default
+						result1 !== false && !e.defaultPrevented &&
+						// Ignore everything but left clicks
+						(e.button === 0 || e.which === 0 || e.which === 1) &&
+						// Let the browser handle `target2=_blank`, etc.
+						(!e.currentTarget.target || e.currentTarget.target === "_self") &&
+						// No modifier keys
+						!e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey
+					) {
+						e.preventDefault()
+						e.redraw = false
+						route.set(href, null, options)
 					}
-					else if (xhrOptions.type) response = new xhrOptions.type(response)
 				}
-				deferred[e.type === "load" ? "resolve" : "reject"](response)
 			}
-			catch (e) {
-				m.deferred.onerror(e);
-				deferred.reject(e)
-			}
-			if (xhrOptions.background !== true) m.endComputation()
-		};
-		ajax(xhrOptions);
-		deferred.promise = propify(deferred.promise, xhrOptions.initialValue);
-		return deferred.promise
-	};
-
-	//testing API
-	m.deps = function(mock) {
-		initialize(window = mock || window);
-		return window;
-	};
-	//for internal testing only, do not use `m.deps.factory`
-	m.deps.factory = app;
-
-	return m
-})(typeof window != "undefined" ? window : {});
-
-if (typeof module != "undefined" && module !== null && module.exports) module.exports = m;
-else if (typeof define === "function" && define.amd) define(function() {return m});
+			return child0
+		},
+	}
+	route.param = function(key4) {
+		return attrs3 && key4 != null ? attrs3[key4] : attrs3
+	}
+	return route
+}
+m.route = _28(typeof window !== "undefined" ? window : null, mountRedraw)
+m.render = render
+m.redraw = mountRedraw.redraw
+m.request = request.request
+m.parseQueryString = parseQueryString
+m.buildQueryString = buildQueryString
+m.parsePathname = parsePathname
+m.buildPathname = buildPathname
+m.vnode = Vnode
+m.censor = censor
+m.domFor = domFor.domFor
+if (typeof module !== "undefined") module["exports"] = m
+else window.m = m
+}());
\ No newline at end of file
diff --git a/examples/mithril/node_modules/todomvc-app-css/index.css b/examples/mithril/node_modules/todomvc-app-css/index.css
index d8be205ad4..2c0b4b64c6 100644
--- a/examples/mithril/node_modules/todomvc-app-css/index.css
+++ b/examples/mithril/node_modules/todomvc-app-css/index.css
@@ -1,3 +1,5 @@
+@charset 'utf-8';
+
 html,
 body {
 	margin: 0;
@@ -24,7 +26,7 @@ body {
 	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	line-height: 1.4em;
 	background: #f5f5f5;
-	color: #4d4d4d;
+	color: #111111;
 	min-width: 230px;
 	max-width: 550px;
 	margin: 0 auto;
@@ -33,10 +35,6 @@ body {
 	font-weight: 300;
 }
 
-:focus {
-	outline: 0;
-}
-
 .hidden {
 	display: none;
 }
@@ -51,30 +49,30 @@ body {
 
 .todoapp input::-webkit-input-placeholder {
 	font-style: italic;
-	font-weight: 300;
-	color: #e6e6e6;
+	font-weight: 400;
+	color: rgba(0, 0, 0, 0.4);
 }
 
 .todoapp input::-moz-placeholder {
 	font-style: italic;
-	font-weight: 300;
-	color: #e6e6e6;
+	font-weight: 400;
+	color: rgba(0, 0, 0, 0.4);
 }
 
 .todoapp input::input-placeholder {
 	font-style: italic;
-	font-weight: 300;
-	color: #e6e6e6;
+	font-weight: 400;
+	color: rgba(0, 0, 0, 0.4);
 }
 
 .todoapp h1 {
 	position: absolute;
-	top: -155px;
+	top: -140px;
 	width: 100%;
-	font-size: 100px;
-	font-weight: 100;
+	font-size: 80px;
+	font-weight: 200;
 	text-align: center;
-	color: rgba(175, 47, 47, 0.15);
+	color: #b83f45;
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
@@ -89,7 +87,6 @@ body {
 	font-family: inherit;
 	font-weight: inherit;
 	line-height: 1.4em;
-	border: 0;
 	color: inherit;
 	padding: 6px;
 	border: 1px solid #999;
@@ -101,6 +98,7 @@ body {
 
 .new-todo {
 	padding: 16px 16px 16px 60px;
+	height: 65px;
 	border: none;
 	background: rgba(0, 0, 0, 0.003);
 	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
@@ -113,32 +111,39 @@ body {
 }
 
 .toggle-all {
-	text-align: center;
+	width: 1px;
+	height: 1px;
 	border: none; /* Mobile Safari */
 	opacity: 0;
 	position: absolute;
+	right: 100%;
+	bottom: 100%;
 }
 
 .toggle-all + label {
-	width: 60px;
-	height: 34px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 45px;
+	height: 65px;
 	font-size: 0;
 	position: absolute;
-	top: -52px;
-	left: -13px;
-	-webkit-transform: rotate(90deg);
-	transform: rotate(90deg);
+	top: -65px;
+	left: -0;
 }
 
 .toggle-all + label:before {
 	content: '❯';
+	display: inline-block;
 	font-size: 22px;
-	color: #e6e6e6;
+	color: #949494;
 	padding: 10px 27px 10px 27px;
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
 }
 
 .toggle-all:checked + label:before {
-	color: #737373;
+	color: #484848;
 }
 
 .todo-list {
@@ -164,7 +169,7 @@ body {
 
 .todo-list li.editing .edit {
 	display: block;
-	width: 506px;
+	width: calc(100% - 43px);
 	padding: 12px 16px;
 	margin: 0 0 0 43px;
 }
@@ -196,25 +201,27 @@ body {
 		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
 		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
 	*/
-	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
 	background-repeat: no-repeat;
 	background-position: center left;
 }
 
 .todo-list li .toggle:checked + label {
-	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
 }
 
 .todo-list li label {
-	word-break: break-all;
+	overflow-wrap: break-word;
 	padding: 15px 15px 15px 60px;
 	display: block;
 	line-height: 1.2;
 	transition: color 0.4s;
+	font-weight: 400;
+	color: #484848;
 }
 
 .todo-list li.completed label {
-	color: #d9d9d9;
+	color: #949494;
 	text-decoration: line-through;
 }
 
@@ -228,17 +235,20 @@ body {
 	height: 40px;
 	margin: auto 0;
 	font-size: 30px;
-	color: #cc9a9a;
-	margin-bottom: 11px;
+	color: #949494;
 	transition: color 0.2s ease-out;
 }
 
-.todo-list li .destroy:hover {
-	color: #af5b5e;
+.todo-list li .destroy:hover,
+.todo-list li .destroy:focus {
+	color: #C18585;
 }
 
 .todo-list li .destroy:after {
 	content: '×';
+	display: block;
+	height: 100%;
+	line-height: 1.1;
 }
 
 .todo-list li:hover .destroy {
@@ -254,10 +264,10 @@ body {
 }
 
 .footer {
-	color: #777;
 	padding: 10px 15px;
 	height: 20px;
 	text-align: center;
+	font-size: 15px;
 	border-top: 1px solid #e6e6e6;
 }
 
@@ -308,18 +318,18 @@ body {
 }
 
 .filters li a:hover {
-	border-color: rgba(175, 47, 47, 0.1);
+	border-color: #DB7676;
 }
 
 .filters li a.selected {
-	border-color: rgba(175, 47, 47, 0.2);
+	border-color: #CE4646;
 }
 
 .clear-completed,
 html .clear-completed:active {
 	float: right;
 	position: relative;
-	line-height: 20px;
+	line-height: 19px;
 	text-decoration: none;
 	cursor: pointer;
 }
@@ -330,8 +340,8 @@ html .clear-completed:active {
 
 .info {
 	margin: 65px auto 0;
-	color: #bfbfbf;
-	font-size: 10px;
+	color: #4d4d4d;
+	font-size: 11px;
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 	text-align: center;
 }
@@ -374,3 +384,10 @@ html .clear-completed:active {
 		bottom: 10px;
 	}
 }
+
+:focus,
+.toggle:focus + label,
+.toggle-all:focus + label {
+	box-shadow: 0 0 2px 2px #CF7D7D;
+	outline: 0;
+}
diff --git a/examples/mithril/node_modules/todomvc-common/base.js b/examples/mithril/node_modules/todomvc-common/base.js
index 3c6723f390..a56b5aaca9 100644
--- a/examples/mithril/node_modules/todomvc-common/base.js
+++ b/examples/mithril/node_modules/todomvc-common/base.js
@@ -21,7 +21,7 @@
 				}
 			}
 			return object;
-		}
+		};
 
 		// By default, Underscore uses ERB-style template delimiters, change the
 		// following template settings to use alternative delimiters.
diff --git a/examples/mithril/package.json b/examples/mithril/package.json
index 087e57add5..80b4ab88b0 100644
--- a/examples/mithril/package.json
+++ b/examples/mithril/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "dependencies": {
-    "mithril": "~0.2.0",
+    "mithril": "^2.2.8",
     "todomvc-app-css": "^2.1.0",
     "todomvc-common": "^1.0.1"
   }