templejs - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

bower.json

 {
 	"name": "temple",
-	"version": "0.3.0-alpha",
+	"version": "0.3.2",
 	"description": "A modern JavaScript view framework.",
@@ -5,0 +5,0 @@ "repo": "BeneathTheInk/Temple",

component.json

 {
 	"name": "temple",
-	"version": "0.3.0-alpha",
+	"version": "0.3.2",
 	"description": "A modern JavaScript view framework.",
@@ -5,0 +5,0 @@ "repository": "BeneathTheInk/Temple",

lib/binding.js

@@ -101,2 +101,7 @@ var Events = require("./events"),
 
+	append: function() {
+		util.flatten(util.toArray(arguments)).forEach(this.appendChild, this);
+		return this;
+	},
+
 	removeChild: function(child) {
@@ -274,3 +279,109 @@ var index = this.indexOf(child);
 		}).join("");
+	},
+
+	// a generalized reactive workflow helper
+	mount: function() {
+		var args = util.toArray(arguments), comp;
+
+		// stop existing mount
+		this.stop();
+
+		// init the function event methods
+		this._initEventMethods();
+
+		// the first event in the cycle, before everything else
+		this.trigger("mount:before", args);
+
+		// the autorun computation
+		this._mounting = true;
+		comp = this._comp = this.autorun(function(comp) {
+			// only render event without bindings
+			this.trigger("render:before", comp, args);
+
+			// run render and process the resulting bindings into an array
+			var bindings = this.render.apply(this, args);
+			if (Binding.isBinding(bindings)) bindings = [ bindings ];
+			if (!Array.isArray(bindings)) bindings = [];
+
+			// main render event execs after render but before appending
+			// the bindings array can be affected by this event
+			this.trigger("render", bindings, comp, args);
+
+			// append the bindings in order
+			bindings = bindings.map(this.appendChild, this);
+			
+			// the last render event
+			this.trigger("render:after", bindings, comp, args);
+
+			// auto clean up
+			comp.onInvalidate(function() {
+				// only invalidate event with bindings
+				this.trigger("invalidate:before", bindings, comp, args);
+				
+				// remove the bindings added before
+				bindings.forEach(this.removeChild, this);
+				
+				// remaining invalidate events
+				this.trigger("invalidate", comp, args);
+				this.trigger("invalidate:after", comp, args);
+
+				// detect if the computation stopped
+				if (comp.stopped) {
+					this.trigger("stop", args);
+					delete this._comp;
+				}
+			});
+		});
+
+		// remaining mount events happen after the first render
+		this.trigger("mount", comp, args);
+		delete this._mounting;
+
+		this.trigger("mount:after", comp, args);
+
+		return this;
+	},
+
+	render: function(){},
+
+	isMounted: function() {
+		return this._comp != null && !this._mounting;
+	},
+
+	isMounting: function() {
+		return this._comp != null && this._mounting;
+	},
+
+	getComputation: function() {
+		return this._comp;
+	},
+
+	invalidate: function() {
+		if (this._comp != null) this._comp.invalidate();
+		return this;
+	},
+
+	stop: function() {
+		if (this._comp != null) this._comp.stop();
+		return this;
+	},
+
+	// turns a few events into instance methods to make this class more functional
+	// but also to match closer to FB's React component API
+	_initEventMethods: function() {
+		if (this._eventMethods) return this;
+		this._eventMethods = true;
+
+		["mount","render","invalidate"].forEach(function(evt) {
+			var caps = evt[0].toUpperCase() + evt.substr(1);
+			this.on(evt + ":before", util.runIfExists(this, "before" + caps));
+			this.on(evt, util.runIfExists(this, "on" + caps));
+			this.on(evt + ":after", util.runIfExists(this, "after" + caps));
+		}, this);
+
+		this.on("stop", util.runIfExists(this, "onStop"));
+
+		return this;
 	}
+
 });
@@ -284,3 +395,2 @@
 util.extend(Binding, require("./node"));
-Binding.HTML = require("./html");
-Binding.React = require("./react");
+Binding.HTML = require("./html");

lib/deps.js

@@ -77,5 +77,16 @@ // Copy of https://github.com/meteor/meteor/commits/e78861b7d0dbb60e5e2bf59bab2cb06ce6596c04/packages/deps/deps.js
 
+var requestAnimationFrame = typeof window !== "undefined" ?
+  window.requestAnimationFrame ||
+  window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.oRequestAnimationFrame :
+  function(f) {
+    setTimeout(function() {
+      f(Date.now());
+    }, 1000 / 30);
+  };
+
 var requireFlush = function () {
   if (! willFlush) {
-    setTimeout(Deps.flush, 0);
+    requestAnimationFrame(Deps.flush);
     willFlush = true;
@@ -82,0 +93,0 @@ }

lib/index.js

@@ -6,8 +6,17 @@ var Binding = require("./binding"),
 var Temple =
-module.exports = Binding;
+module.exports = Binding.extend({
+	constructor: function() {
+		Binding.call(this);
+		this.initialize.apply(this, arguments);
+	},
+	initialize: function() {
+		this.append(util.toArray(arguments));
+	}
+});
 
 // static properties/methods
-Temple.VERSION = "0.3.1";
+Temple.VERSION = "0.3.2";
 Temple.util = util;
 Temple.Events = require("./events");
+Temple.Binding = Binding;
 
@@ -17,2 +26,3 @@ // deps setup
 Temple.autorun = Deps.autorun;
+Temple.nonreactive = Deps.nonreactive;
 Temple.Dependency = Deps.Dependency;

lib/node.js

@@ -70,2 +70,36 @@ var Binding = require("./binding"),
 
+var Comment =
+exports.Comment = Node.extend({
+	constructor: function(nodeOrValue) {
+		// comment node
+		if (nodeOrValue instanceof window.Node && nodeOrValue.nodeType === 8) {
+			this.node = nodeOrValue;
+			this.value = nodeOrValue.nodeValue;
+		}
+
+		// anything else
+		else {
+			this.node = document.createComment("");
+			this.setValue(nodeOrValue);
+		}
+
+		Node.call(this);
+	},
+
+	insertBefore: function() {
+		throw new Error("Comment bindings can't have children.");
+	},
+
+	setValue: function(value) {
+		value = value != null ? value.toString() : "";
+		if (value !== this.node.nodeValue) this.node.nodeValue = value;
+		this.value = value;
+		return this;
+	},
+
+	toString: function() {
+		return this.node.nodeValue;
+	}
+});
+
 var Element =
@@ -83,3 +117,3 @@ exports.Element = Node.extend({
 			// note: this may affect the original node's children
-			wrapNode(util.toArray(nodeOrTagName.childNodes))
+			fromNode(util.toArray(nodeOrTagName.childNodes))
 				.forEach(function(b) { children.push(b); });
@@ -236,6 +270,6 @@ }
 // converts dom nodes into binding equivalents
-var wrapNode =
-exports.wrapNode = function(node) {
+var fromNode =
+exports.fromNode = function(node) {
 	if (Array.isArray(node)) {
-		return node.map(wrapNode)
+		return node.map(fromNode)
 			.filter(function(b) { return b != null; });
@@ -250,2 +284,5 @@ }
 		case 3: return new Text(node);
+		
+		// Comment Node
+		case 8: return new Comment(node);
 
@@ -256,3 +293,3 @@ // Document Fragment
 
-			wrapNode(util.toArray(node.childNodes))
+			fromNode(util.toArray(node.childNodes))
 				.forEach(binding.appendChild, binding);
@@ -265,3 +302,3 @@
 // converts a string of HTML into a set of static bindings
-exports.parseHTML = function(html) {
+exports.fromHTML = function(html) {
 	var cont = document.createElement("div"),
@@ -272,3 +309,3 @@ binding = new Binding;
 
-	wrapNode(util.toArray(cont.childNodes))
+	fromNode(util.toArray(cont.childNodes))
 		.forEach(binding.appendChild, binding);
@@ -275,0 +312,0 @@

lib/util.js

@@ -115,6 +115,8 @@ var toArray =
 
-var matchesSelector = Element.prototype.matches ||
+var matchesSelector = typeof Element !== "undefined" ?
+	Element.prototype.matches ||
 	Element.prototype.webkitMatchesSelector ||
 	Element.prototype.mozMatchesSelector ||
-	Element.prototype.msMatchesSelector;
+	Element.prototype.msMatchesSelector :
+	function() { return false; };
 
@@ -198,1 +200,9 @@ exports.matchesSelector = function(elem, selector) {
 }
+
+exports.runIfExists = function(obj, method) {
+	return function() {
+		if (typeof obj[method] === "function") {
+			return obj[method].apply(obj, arguments);
+		}
+	}
+}

package.json

 {
 	"name": "templejs",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"description": "A modern JavaScript view framework.",
@@ -5,0 +5,0 @@ "author": "Beneath the Ink <[e-mail]>",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47250

increased by3.72%

Lines of code

1373

increased by4.57%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

13

decreased by-7.14%

No dependency changes