+ slot event handlers

Author: tenbits

README.md

@@ -253,8 +253,9 @@ Most simple MaskJS sample to show where you could start from:
 ###Changelog
 ------------
 - 0.12.2
-	- `style` node syntax support with
-		- `:host` support
+	- `slot` and `event` javascript handlers ([handler](/test/dom/handler.test))
+	- `style` node syntax support with ([style](/test/dom/style.test))
+		- `:host`, `:host()` support
 		- scoped css support (IE6+)
 		```sass
 		section {

lib/mask.js

@@ -304,6 +304,55 @@
 		};
 	}());
 	// end:source /src/fn.js
+	// source /src/class.js
+	var class_create;
+	(function(){
+		class_create = function () {
+			var args = _Array_slice.call(arguments),
+				Proto = args.pop();
+			if (Proto == null) {
+				Proto = {};
+			}
+			var Ctor = Proto.hasOwnProperty('constructor')
+					? Proto.constructor
+					: null,
+				BaseCtor;
+			
+			
+			var i = args.length, x, Parent;
+			while ( --i > -1 ) {
+				x = args[i];
+				if (typeof x === 'function') {
+					if (Ctor == null && BaseCtor == null) 
+						BaseCtor = x;
+					
+					x = x.prototype;
+				}
+				for(var key in x){
+					if (Proto[key] == null) {
+						Proto[key] = x[key];
+					}
+				}
+				if (Parent == null) {
+					Parent = x;
+				}
+			}
+			
+			Proto.Parent = Parent
+			
+			if (Ctor == null)  {
+				Ctor = function(){
+					var args = _Array_slice.call(arguments);
+					if (BaseCtor)
+						return BaseCtor.apply(this, args);
+				};
+			}
+			
+			Ctor.prototype = Proto;
+			return Ctor;
+		};
+	}());
+	// end:source /src/class.js
 
 	// source /src/refs.js
 	var _Array_slice = Array.prototype.slice,
@@ -3604,6 +3653,90 @@
 			}
 		}());
 		// end:source ./parsers/var.js
+		// source ./parsers/slot.js
+		(function(){
+			
+			function create(Ctor){
+				return function(str, i, imax, parent) {
+					var start = str.indexOf('{', i) + 1,
+						head = parseHead(
+							str.substring(i, start - 1)
+						),
+						end = cursor_groupEnd(str, start, imax, 123, 125),
+						body = str.substring(start, end)
+						;
+					
+					return [ new Ctor(head, body, parent), end + 1 ];
+				};
+			}
+			
+			function parseHead(head) {
+				var parts = /(\w+)\s*\(([^\)]*)\)/.exec(head);
+				if (parts == null) {
+					log_error('`slot` has invalid head syntax', head);
+					return null;
+				}
+				var arr = [ parts[1] ];
+				arr = arr.concat(
+					parts[2].replace(/\s/g, '').split(',')
+				);
+				return arr;
+			}
+			
+			function Handler(head, body, parent) {
+				this.name = head.shift();
+				this.args = head;
+				this.body = body;
+				this.fn = this.compile();
+				this.parent	= parent;
+			}
+			Handler.prototype = {
+				type: Dom.COMPONENT,
+				controller: null,
+				elements: null,
+				model: null,
+				stringify: function(){
+					return this.tagName
+						+ this.name
+						+ '('
+						+ this.args.join(',')
+						+ ') {'
+						+ this.body
+						+ '}'
+						;
+				},
+				compile: function(){
+					var arr = _Array_slice.call(this.args);
+					arr.push(this.body);
+					
+					return new (Function.bind.apply(Function, [null].concat(arr)));
+				},
+				render: function() {}
+			};
+			
+			var Slot = class_create(Handler, {
+				tagName: 'slot',
+				render: function(model, ctx, container, ctr) {
+					var slots = ctr.slots;
+					if (slots == null) {
+						slots = ctr.slots = {};
+					}
+					
+					slots[this.name] = this.fn;
+				}
+			});
+			var Event = class_create(Handler, {
+				tagName: 'event',
+				render: function(model, ctx, container) {
+					container.addEventListener(this.name, this.fn, false);
+				}
+			});
+			
+			custom_Parsers['slot' ] =  create(Slot);
+			custom_Parsers['event'] =  create(Event);
+			
+		}());
+		// end:source ./parsers/slot.js
 		// source ./parsers/style.js
 		(function(){
 			custom_Parsers['style'] =  function(str, i, imax, parent){
@@ -3722,8 +3855,6 @@
 		}());
 		// end:source ./parsers/style.js
 
-		
-	
 		var go_tag = 2,
 			state_tag = 3,
 			state_attr = 5,

lib/mask.min.js

@@ -27,10 +27,9 @@ var parser_parse,
 	// import ./cursor.js
 	// import ./function.js
 	// import ./parsers/var.js
+	// import ./parsers/slot.js
 	// import ./parsers/style.js
 
-	
-
 	var go_tag = 2,
 		state_tag = 3,
 		state_attr = 5,

lib/mask.min.js.map

@@ -0,0 +1,82 @@
+(function(){
+	
+	function create(Ctor){
+		return function(str, i, imax, parent) {
+			var start = str.indexOf('{', i) + 1,
+				head = parseHead(
+					str.substring(i, start - 1)
+				),
+				end = cursor_groupEnd(str, start, imax, 123, 125),
+				body = str.substring(start, end)
+				;
+			
+			return [ new Ctor(head, body, parent), end + 1 ];
+		};
+	}
+	
+	function parseHead(head) {
+		var parts = /(\w+)\s*\(([^\)]*)\)/.exec(head);
+		if (parts == null) {
+			log_error('`slot` has invalid head syntax', head);
+			return null;
+		}
+		var arr = [ parts[1] ];
+		arr = arr.concat(
+			parts[2].replace(/\s/g, '').split(',')
+		);
+		return arr;
+	}
+	
+	function Handler(head, body, parent) {
+		this.name = head.shift();
+		this.args = head;
+		this.body = body;
+		this.fn = this.compile();
+		this.parent	= parent;
+	}
+	Handler.prototype = {
+		type: Dom.COMPONENT,
+		controller: null,
+		elements: null,
+		model: null,
+		stringify: function(){
+			return this.tagName
+				+ this.name
+				+ '('
+				+ this.args.join(',')
+				+ ') {'
+				+ this.body
+				+ '}'
+				;
+		},
+		compile: function(){
+			var arr = _Array_slice.call(this.args);
+			arr.push(this.body);
+			
+			return new (Function.bind.apply(Function, [null].concat(arr)));
+		},
+		render: function() {}
+	};
+	
+	var Slot = class_create(Handler, {
+		tagName: 'slot',
+		render: function(model, ctx, container, ctr) {
+			var slots = ctr.slots;
+			if (slots == null) {
+				slots = ctr.slots = {};
+			}
+			
+			slots[this.name] = this.fn;
+		}
+	});
+	var Event = class_create(Handler, {
+		tagName: 'event',
+		render: function(model, ctx, container) {
+			container.addEventListener(this.name, this.fn, false);
+		}
+	});
+	
+	custom_Parsers['slot' ] =  create(Slot);
+	custom_Parsers['event'] =  create(Event);
+	
+}());

ref-utils

@@ -0,0 +1,48 @@
+UTest({
+	'slot test' () {
+		mask.registerHandler(':foo', Compo({}));
+		
+		var template = `
+			section {
+				:foo {
+					slot fooTest (event) {
+						$(event.currentTarget).text('Baz');
+					}
+					
+					button x-signal='click: fooTest' > 'Foo'
+				}
+			}
+		`
+		
+		var $dom = $(mask.render(template)).appendTo('body');
+		
+		$dom
+			.find('button')
+			.eq_('text', 'Foo')
+			.click()
+			.eq_('text', 'Baz')
+			.remove();
+	},
+	
+	'event test' () {
+		var template = `
+			section {
+				button {
+					event click (event) {
+						this.textContent = 'Baz'
+					}
+					'Foo'
+				}
+			}
+		`
+		
+		var $dom = $(mask.render(template)).appendTo('body');
+		
+		$dom
+			.find('button')
+			.eq_('text', 'Foo')
+			.click()
+			.eq_('text', 'Baz')
+			.remove();
+	}
+})