initial release

docs/layout/tools/template-compiler.sjs

@@ -0,0 +1,64 @@
+/*
+Compiles Mithril templates
+
+Requires sweet.js (https://github.com/mozilla/sweet.js)
+Installation: npm install -g sweet.js
+Usage: sjs --module /mithril.compile.sjs --output <output-filename>.js <input-filename>.js
+*/
+
+macro m {
+	case { _ ($selector) } => {
+		return #{m($selector, {}, [])};
+	}
+	case { _ ($selector, $partial) } => {
+		var partialSyntax = #{$partial};
+		var partial = unwrapSyntax(partialSyntax);
+		return partial.value == "{}" ? #{m($selector, $partial, [])} : #{m($selector, {}, partial)};
+	}
+	case { _ ($selector, $dynAttrs, $children) } => { 
+		var selectorSyntax = #{$selector};
+		var selector = unwrapSyntax(selectorSyntax);
+		
+		var dynAttrsSyntax = #{$dynAttrs};
+		var dynAttrs = unwrapSyntax(dynAttrsSyntax);
+		
+		var parser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[.+?\])/g;
+		var attrParser = /\[(.+?)=("|'|)(.+?)\2\]/;
+		var _match = null;
+		var classes = [];
+		var cell = {tag: "div", attrs: {}, children: []};
+		
+		while (_match = parser.exec(selector)) {
+			if (_match[1] == "") 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];
+			}
+		}
+		if (classes.length > 0) cell.attrs["class"] = classes.join(" ");
+		
+		var tag = makeValue(cell.tag, #{here});
+		var attrsBody = Object.keys(cell.attrs).reduce(function(memo, attrName) {
+			return memo.concat([
+				makeValue(attrName, #{here}),
+				makePunc(":", #{here}),
+				makeValue(cell.attrs[attrName], #{here}),
+				makePunc(",", #{here})
+			]);
+		}, []).concat(dynAttrs.inner);
+		var attrs = [makeDelim("{}", attrsBody, #{here})];
+		var children = cell.children.map(function(child) {
+			return makeValue(child, #{here});
+		})
+		letstx $tag = [tag], $attrs = attrs;
+		
+		return #{ ({tag: $tag, attrs: $attrs , children: $children}) };
+	}
+	case { _ } => {
+		return #{Mithril};
+	}
+}
+
+export m;

docs/layout/tools/template-converter.html

@@ -0,0 +1,9 @@
+<p>If you already have your HTML written and want to convert it into a Mithril template, paste the HTML below and press the "Convert" button.</p>
+
+<div id="converter"></div>
+
+<script src="../mithril.min.js"></script>
+<script src="template-converter.js"></script>
+<script>
+m.module(document.getElementById("converter"), templateConverter);
+</script>

docs/layout/tools/template-converter.js

@@ -0,0 +1,89 @@
+var templateConverter = {};
+
+templateConverter.DOMFragment = function(markup) {
+	if (markup.indexOf("<!doctype") > -1) return [new DOMParser().parseFromString(markup, "text/html").childNodes[1]]
+	var container = document.createElement("div");
+	container.insertAdjacentHTML("beforeend", markup);
+	return container.childNodes;
+}
+templateConverter.VirtualFragment = function recurse(domFragment) {
+	var virtualFragment = [];
+	for (var i = 0, el; el = domFragment[i]; i++) {
+		if (el.nodeType == 3) {
+			virtualFragment.push(el.nodeValue);
+		}
+		else {
+			var attrs = {};
+			for (var j = 0, attr; attr = el.attributes[j]; j++) {
+				attrs[attr.name] = attr.value;
+			}
+			
+			virtualFragment.push({tag: el.tagName.toLowerCase(), attrs: attrs, children: recurse(el.childNodes)});
+		}
+	}
+	return virtualFragment;
+}
+templateConverter.Template = function recurse() {
+	if (Object.prototype.toString.call(arguments[0]) == "[object String]") {
+		return new recurse(new templateConverter.VirtualFragment(new templateConverter.DOMFragment(arguments[0])));
+	}
+	
+	var virtualFragment = arguments[0], level = arguments[1]
+	if (!level) level = 1;
+	
+	var tab = "\n" + new Array(level + 1).join("\t");
+	var virtuals = [];
+	for (var i = 0, el; el = virtualFragment[i]; i++) {
+		if (typeof el == "string") {
+			if (el.match(/\t| {2,}/g) && el.trim().length == 0) virtuals.indented = true;
+			else virtuals.push('"' + el.replace(/"/g, '\\"').replace(/\r/g, "\\r").replace(/\n/g, "\\n") + '"');
+		}
+		else {
+			var virtual = "";
+			if (el.tag != "div") virtual += el.tag;
+			if (el.attrs["class"]) {
+				virtual += "." + el.attrs["class"].replace(/\t+/g, " ").split(" ").join(".");
+				delete el.attrs["class"];
+			}
+			var attrNames = Object.keys(el.attrs).sort()
+			for (var j = 0, attrName; attrName = attrNames[j]; j++) {
+				if (attrName != "style") virtual += "[" + attrName + "='" + el.attrs[attrName].replace(/'/g, "\\'") + "']";
+			}
+			virtual = '"' + virtual + '"';
+			
+			var style = ""
+			if (el.attrs.style) {
+				virtual += ", {style: " + ("{\"" + el.attrs.style.replace(/:/g, "\": \"").replace(/;/g, "\", \"") + "}").replace(/, "}|"}/, "}") + "}"
+			}
+			
+			if (el.children.length > 0) {
+				virtual += ", " + recurse(el.children, level + 1);
+			}
+			virtual = "m(" + virtual + ")";
+			virtuals.push(virtual);
+		}
+	}
+	if (!virtuals.indented) tab = "";
+	
+	var isInline = virtuals.length == 1 && virtuals[0].charAt(0) == '"';
+	var template = isInline ? virtuals.join(", ") : "[" + tab + virtuals.join("," + tab) + tab.slice(0, -1) + "]";
+	return new String(template);
+}
+
+templateConverter.controller = function() {
+	this.source = m.prop("");
+	this.output = m.prop("");
+	
+	this.convert = function() {
+		return this.output(new templateConverter.Template(this.source()));
+	};
+	
+};
+
+templateConverter.view = function(ctrl) {
+	return [
+		m("textarea", {autofocus: true, style: {width:"100%", height: "40%"}, onchange: m.withAttr("value", ctrl.source)}, ctrl.source()),
+		m("button", {onclick: ctrl.convert.bind(ctrl)}, "Convert"),
+		m("textarea", {style: {width:"100%", height: "40%"}}, ctrl.output())
+	];
+};