From ad8b58107700e62382ef770cee4171fe19877ea9 Mon Sep 17 00:00:00 2001
From: Leo Horie <leohorie@hotmail.com>
Date: Sat, 24 Jan 2015 18:09:28 -0500
Subject: [PATCH] proof of concept for components

---
 mithril.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/mithril.js b/mithril.js
index bfdcc2f6..2f9fd8e9 100644
--- a/mithril.js
+++ b/mithril.js
@@ -237,9 +237,10 @@ var m = (function app(window, undefined) {
 			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.join() != Object.keys(cached.attrs).join() || data.attrs.id != cached.attrs.id) {
+			if (data.tag != cached.tag || dataAttrKeys.join() != Object.keys(cached.attrs).join() || data.attrs.id != cached.attrs.id || data.attrs.key != cached.attrs.key) {
 				if (cached.nodes.length) clear(cached.nodes);
 				if (cached.configContext && typeof cached.configContext.onunload === FUNCTION) cached.configContext.onunload()
+				if (cached.controller && typeof cached.controller.onunload === FUNCTION) cached.controller.onunload({preventDefault: function() {}})
 			}
 			if (type.call(data.tag) != STRING) return;
 
@@ -247,7 +248,15 @@ var m = (function app(window, undefined) {
 			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) {
+				var module = m.tags[data.tag]
+				if (module) {
+					var constructor = module.controller || m.prop()
+					var controller = new constructor(data)
+					data = module.view(controller)
+				}
+				
 				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 = {
@@ -259,6 +268,9 @@ var m = (function app(window, undefined) {
 						data.children,
 					nodes: [node]
 				};
+				
+				if (module) cached.controller = controller
+				
 				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" && data.attrs.value) setAttributes(node, data.tag, {value: data.attrs.value}, {}, namespace);
@@ -391,6 +403,7 @@ var m = (function app(window, undefined) {
 	}
 	function unload(cached) {
 		if (cached.configContext && typeof cached.configContext.onunload === FUNCTION) cached.configContext.onunload();
+		if (cached.controller && typeof cached.controller.onunload === FUNCTION) cached.controller.onunload({preventDefault: function() {}});
 		if (cached.children) {
 			if (type.call(cached.children) === ARRAY) {
 				for (var i = 0, child; child = cached.children[i]; i++) unload(child)
@@ -446,6 +459,7 @@ var m = (function app(window, undefined) {
 		childNodes: []
 	};
 	var nodeCache = [], cellCache = {};
+	m.tags = {}
 	m.render = function(root, cell, forceRecreation) {
 		var configs = [];
 		if (!root) throw new Error("Please ensure the DOM element exists before rendering a template into it.");
@@ -509,7 +523,8 @@ var m = (function app(window, undefined) {
 			m.startComputation();
 			roots[index] = root;
 			var currentModule = topModule = module = module || {};
-			var controller = new (module.controller || function() {});
+			var constructor = module.controller || m.prop()
+			var controller = new constructor;
 			//controllers may call m.module recursively (via m.route redirects, for example)
 			//this conditional ensures only the last recursive m.module call is applied
 			if (currentModule === topModule) {