Add auto-map routing, clean up, style.

app.js

@@ -9,7 +9,17 @@ var express = require('express'),
 app.use(express.static(path.join(__dirname, '/client')));
 
 //	Create our app
-mvc(app, routeConfig, true);
+mvc(app, {
+	routeConfig: routeConfig,
+	throwUnmappedActions: true,
+	verbose: true
+});
+
+//	Basic default error handling
+app.use(function(err, req, res, next){
+	console.error(err.stack);
+	res.status(500).send('Something broke!');
+});
 
 //	Run the server
 var server = app.listen(server.port, function () {

client/css/style.css

@@ -1 +1,30 @@
-html,body 		{ font-family: sans-serif }
+/* Reset: http://yuilibrary.com/yui/docs/cssreset/ */
+html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
+
+/* Clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ */
+.cf:before, .cf:after {content: " "; display: table; }
+.cf:after {clear: both; }
+.cf { *zoom: 1; }
+
+/* Natural box layout model to all elements: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
+*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+/* Adjustment for 3rd party content that doesn't work with border-box */
+.contentBoxSized { box-sizing: content-box; }
+
+/* Example styles - you should make your own here... */
+html,body { background: #f3f3f3; font-family: sans-serif; height: 100%; }
+h1 { font-size: 2em }
+h2 { font-size: 1.5em }
+h3 { font-size: 1.17em }
+h4 { font-size: 1em }
+h5 { font-size: 0.83em }
+h6 { font-size: 0.67em }
+
+/* Center content wrappers: http://www.thesitewizard.com/css/center-div-block.shtml */
+.cw { width: 60em; margin-left: auto ; margin-right: auto; padding: 0 1em; }
+
+header 	{ padding: 1.25em 0; box-shadow: 0 0 0.25em #999; margin-bottom: 1em; background: #fff }
+
+#content { background: #f3f3f3; }
+#content .cw { background: #fff; padding: 1.2em 1em; }
+#footer { background: #ccc; padding: 1.2em 0; }

client/miso.js

@@ -72,7 +72,7 @@ module.exports.index = {
 				DIV("G'day ", ctrl.name, { rotate: ctrl.rotate }),
 				UL([
 					LI(A({ href: '/user/1', config: m.route}, "User view example")),
-					LI(A({ href: '/todo', config: m.route}, "Todos example"))
+					LI(A({ href: '/todos', config: m.route}, "Todos example"))
 				])
 			]);
 		}
@@ -93,11 +93,11 @@ if(typeof window !== 'undefined') {
 }
 
 m.route.mode = 'pathname';
-m.route(document.getElementById('misoAttachment'), '/', {
+m.route(document.getElementById('misoAttachmentNode'), '/', {
 '/': home.index,
 '/user/:user_id': user.edit,
-'/todo': todo.index,
-'/user': user.index
+'/todos': todo.index,
+'/users': user.index
 });
 },{"../mvc/home.js":3,"../mvc/todo.js":5,"../mvc/user.js":6,"../server/mithril.bindings.node.js":8,"../server/mithril.sugartags.node.js":9,"../server/store.js":2,"mithril":7}],5:[function(require,module,exports){
 var m = require('mithril'),

mvc/home.js

@@ -20,7 +20,7 @@ module.exports.index = {
 				DIV("G'day ", ctrl.name, { rotate: ctrl.rotate }),
 				UL([
 					LI(A({ href: '/user/1', config: m.route}, "User view example")),
-					LI(A({ href: '/todo', config: m.route}, "Todos example"))
+					LI(A({ href: '/todos', config: m.route}, "Todos example"))
 				])
 			]);
 		}

mvc/index.js

@@ -1,5 +1,7 @@
 /*
-	Main Miso MVC generator
+	Main Miso MVC generator - this is a singleton to load all controllers
+	and map their routes on startup of app. If a route is unmapped, we throw an
+	error
 */
 var fs			= require('fs'),
 	path		= require('path'),
@@ -13,9 +15,9 @@ var fs			= require('fs'),
 	exec = require('child_process').exec,
 	render = require('mithril-node-render'),
 
-	//	Force the browserify to run?
+	//	Force the browserify to run? (Note: this usually makes it loop a couple of times)
 	forceBrowserify = true,
-	attachmentNode = "document.getElementById('misoAttachment')",
+	attachmentNode = "document.getElementById('misoAttachmentNode')",
 
 	//	TODO: below belongs in layout templates
 	//  Puts the lotion on its...
@@ -27,10 +29,14 @@ var fs			= require('fs'),
 			'<link rel="stylesheet" href="/css/style.css"/>',
 			'</head>',
 			'<body>',
-			'<header><a href="/">MISO</a> - Mithril ISOmetric Javascript</header>',
-			'<div id="misoAttachment">',
-			content,
+			'<header>',
+			'<div class="cw cf">',
+			'<a href="/">MISO</a>',
 			'</div>',
+			'</header>',
+			'<section id="misoAttachmentNode" class="cw">',
+			content,
+			'</section>',
 			//	The generated client script
 			'<script src="/miso.js"></script>',
 			'</body>',
@@ -46,11 +52,10 @@ var fs			= require('fs'),
 
 //	Map the routes for the controllers
 //	This generates the client side code from our routes/controller/views
-module.exports = function(app, routeConfig, verbose) {
-
+module.exports = function(app, options) {
 	//	Add configured routes
-	if(routeConfig) {
-		_.forOwn(routeConfig, function(routeObj, routePath){
+	if(options.routeConfig) {
+		_.forOwn(options.routeConfig, function(routeObj, routePath){
 			var file = routeObj.name + ".js",
 				routeFile = path.join(__dirname, file),
 				route = require(routeFile),
@@ -85,23 +90,71 @@ module.exports = function(app, routeConfig, verbose) {
 				route = require(routeFile),
 				routeStats = fs.statSync(routeFile),
 				routeName = file.substr(0, file.lastIndexOf(".")),
-				routePath = "/" + routeName;
+				routePath = "/" + routeName,
+				method = "get",
+				//	TODO: The id, delete, new can be translated perhaps?
+				idPostfix = "_id",
+				deleteKeyword = "delete",
+				newKeyword = "new";
 
 			//	Create routes using path as key
 			//	TODO: different methods would change the key
 			_.forOwn(route, function(idx, action){
 				if(!hasMappedRouteActions[routeName + "." + action]) {
+
+					//	Note: The list is pluralised with an s always, 
+					//	so name your controller accordingly, eg: don't 
+					//	name it 'users', it should be 'user'
+					//	TODO: provide international pluralisation via
+					//	i18next or similar
+					switch (action) {
+						//	Display an index page with a list of items
+						case 'index':
+							method = 'get';
+							routePath = '/' + routeName + 's';
+							break;
+						//	An item to edit
+						case 'edit':
+							method = 'get';
+							routePath = '/' + routeName + '/:' + routeName + idPostfix;
+							break;
+						//	Delete an item
+						case 'delete':
+							method = 'post';
+							routePath = '/' + routeName + '/:' + routeName + idPostfix + '/' + deleteKeyword;
+							break;
+						case 'new':
+							method = 'get';
+							routePath = '/' + routeName + '/' + newKeyword;
+							break;
+						//	Create an item
+						case 'create':
+							method = 'post';
+							routePath = '/' + routeName;
+							break;
+						//	Update an item
+						case 'update':
+							method = 'post';
+							routePath = '/' + routeName + '/:' + routeName + idPostfix;
+							break;
+						default:
+							var message = 'ERROR: unmapped action: "' + routeName + '.' + action + '" - please map it or make it a private function';
+							if(options.throwUnmappedActions) {
+								throw new Error(message);
+							} else {
+								options.verbose && console.log(message);
+							}
+					}
+
 					routes[routePath] = {
 						route: route,
-						method: 'get',
+						method: method,
 						name: routeName,
 						action: action,
 						path: routePath,
 						file: file,
 						stats: routeStats
 					};
-				} else {
-					verbose && console.log('skip', routeName + "." + action);
 				}
 			});
 		});
@@ -131,7 +184,7 @@ module.exports = function(app, routeConfig, verbose) {
 				}
 			});
 
-			verbose && console.log('     %s %s -> %s.%s', args.method.toUpperCase(), args.path, args.name, args.action);
+			options.verbose && console.log('     %s %s -> %s.%s', args.method.toUpperCase(), args.path, args.name, args.action);
 
 			routeMap[args.path] = args;
 		};

mvc/mvcmain.js

@@ -12,9 +12,9 @@ if(typeof window !== 'undefined') {
 }
 
 m.route.mode = 'pathname';
-m.route(document.getElementById('misoAttachment'), '/', {
+m.route(document.getElementById('misoAttachmentNode'), '/', {
 '/': home.index,
 '/user/:user_id': user.edit,
-'/todo': todo.index,
-'/user': user.index
+'/todos': todo.index,
+'/users': user.index
 });