add events

kbrsh · Apr 22, 2019 · 844ff1a · 844ff1a
1 parent 4008d25
commit 844ff1a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/packages/moon/dist/moon.js b/packages/moon/dist/moon.js
@@ -96,7 +96,7 @@
 	 * List of global variables to ignore in expression scoping
 	 */
 
-	var globals = ["NaN", "false", "in", "null", "this", "true", "typeof", "undefined", "window"];
+	var globals = ["NaN", "event", "false", "in", "null", "this", "true", "typeof", "undefined", "window"];
 	/**
 	 * Scope an expression to use variables within the `data` object.
 	 *
@@ -267,7 +267,11 @@
 					} else {
 						// Store the key/value pair using the matched value or
 						// expression.
-						attributes[attributeKey] = attributeExpression === undefined ? attributeValue : scopeExpression(attributeExpression);
+						attributes[attributeKey] = attributeExpression === undefined ? attributeValue : scopeExpression(attributeExpression); // Add a wrapper function for events.
+
+						if (attributeKey[0] === "@") {
+							attributes[attributeKey] = "function(event){" + attributes[attributeKey] + "}";
+						}
 					}
 				} // Append an opening tag token with the type, attributes, and optional
 				// self-closing slash.
@@ -645,14 +649,17 @@
 		var nodeNode;
 
 		if (nodeType === types.element) {
-			nodeNode = document.createElement(node.name); // Set data and attributes.
+			nodeNode = document.createElement(node.name); // Set data, events, and attributes.
 
 			var _data = node.data;
 
 			for (var key in _data) {
 				var value = _data[key];
 
-				if (key !== "children") {
+				if (key[0] === "@") {
+					nodeData[key] = value;
+					nodeNode.addEventListener(key.slice(1), value);
+				} else if (key !== "children") {
 					nodeData[key] = value;
 					nodeNode.setAttribute(key, value);
 				}
@@ -874,12 +881,12 @@
 						var nodeOldData = _nodeOld.data;
 						var nodeOldNode = _nodeOld.node;
 						var nodeNewData = patch.nodeNew.data; // Mutate the old node with the new node's data and set attributes
-						// on the DOM node.
+						// and events on the DOM node.
 
 						for (var key in nodeNewData) {
 							var value = nodeNewData[key];
 
-							if (key !== "children") {
+							if (key[0] !== "@" && key !== "children") {
 								nodeOldData[key] = value;
 								nodeOldNode.setAttribute(key, value);
 							}

diff --git a/packages/moon/dist/moon.min.js b/packages/moon/dist/moon.min.js
diff --git a/packages/moon/src/compiler/lexer/lexer.js b/packages/moon/src/compiler/lexer/lexer.js
@@ -22,7 +22,7 @@ const expressionRE = /"[^"]*"|'[^']*'|\d+[a-zA-Z$_]\w*|\.[a-zA-Z$_]\w*|[a-zA-Z$_
 /**
  * List of global variables to ignore in expression scoping
  */
-const globals = ["NaN", "false", "in", "null", "this", "true", "typeof", "undefined", "window"];
+const globals = ["NaN", "event", "false", "in", "null", "this", "true", "typeof", "undefined", "window"];
 
 /**
  * Scope an expression to use variables within the `data` object.
@@ -214,6 +214,11 @@ export function lex(input) {
 						attributeExpression === undefined ?
 							attributeValue :
 							scopeExpression(attributeExpression);
+
+					// Add a wrapper function for events.
+					if (attributeKey[0] === "@") {
+						attributes[attributeKey] = `function(event){${attributes[attributeKey]}}`;
+					}
 				}
 			}
 

diff --git a/packages/moon/src/executor/executor.js b/packages/moon/src/executor/executor.js
@@ -38,13 +38,16 @@ function executeCreate(node) {
 	if (nodeType === types.element) {
 		nodeNode = document.createElement(node.name);
 
-		// Set data and attributes.
+		// Set data, events, and attributes.
 		const data = node.data;
 
 		for (let key in data) {
 			const value = data[key];
 
-			if (key !== "children") {
+			if (key[0] === "@") {
+				nodeData[key] = value;
+				nodeNode.addEventListener(key.slice(1), value);
+			} else if (key !== "children") {
 				nodeData[key] = value;
 				nodeNode.setAttribute(key, value);
 			}
@@ -278,11 +281,11 @@ function executePatch(patches) {
 				const nodeNewData = patch.nodeNew.data;
 
 				// Mutate the old node with the new node's data and set attributes
-				// on the DOM node.
+				// and events on the DOM node.
 				for (let key in nodeNewData) {
 					const value = nodeNewData[key];
 
-					if (key !== "children") {
+					if (key[0] !== "@" && key !== "children") {
 						nodeOldData[key] = value;
 						nodeOldNode.setAttribute(key, value);
 					}