DON'T MERGE: point at can-observation-recorder

.jshintrc

@@ -21,7 +21,10 @@
 		"start": true,
 		"stop": true,
 		"global": true,
-		"Promise": true
+		"Promise": true,
+		"customElements": true,
+		"Reflect": true,
+		"WeakSet": true
 	},
 	"strict": false,
 	"curly": true,

.npmignore

@@ -1 +1,2 @@
-!dist/
+!dist/
+!test/

can-view-callbacks.js

@@ -1,14 +1,91 @@
-var Observation = require('can-observation');
+var ObservationRecorder = require('can-observation-recorder');
 
-var dev = require('can-util/js/dev/dev');
-var getGlobal = require('can-util/js/global/global');
-var domMutate = require('can-util/dom/mutate/mutate');
+var dev = require('can-log/dev/dev');
+var getGlobal = require('can-globals/global/global');
+var domMutate = require('can-dom-mutate/node');
 var namespace = require('can-namespace');
+var nodeLists = require('can-view-nodelist');
+var makeFrag = require("can-util/dom/frag/frag");
+var globals = require('can-globals');
 
 //!steal-remove-start
 var requestedAttributes = {};
 //!steal-remove-end
 
+var tags = {};
+
+// WeakSet containing elements that have been rendered already
+// and therefore do not need to be rendered again
+
+var automountEnabled = function(){
+	return globals.getKeyValue("document").documentElement.getAttribute("data-can-automount") !== "false";
+};
+
+var renderedElements = new WeakSet();
+
+var renderNodeAndChildren = function(node) {
+	var tagName = node.tagName && node.tagName.toLowerCase();
+	var tagHandler = tags[tagName];
+	var children;
+
+	// skip elements that already have a viewmodel or elements whose tags don't match a registered tag
+	// or elements that have already been rendered
+	if (tagHandler && !renderedElements.has(node)) {
+		tagHandler(node, {});
+	}
+
+	if (node.getElementsByTagName) {
+		children = node.getElementsByTagName("*");
+		for (var k=0, child; (child = children[k]) !== undefined; k++) {
+			renderNodeAndChildren(child);
+		}
+	}
+};
+
+var mutationObserverEnabled = false;
+var globalMutationObserver;
+var enableMutationObserver = function() {
+	if (mutationObserverEnabled) {
+		return;
+	}
+
+	var mutationHandler = function(mutationsList) {
+		var addedNodes;
+
+		for (var i=0, mutation; (mutation = mutationsList[i]) !== undefined; i++) {
+			if (mutation.type === "childList") {
+				addedNodes = mutation.addedNodes;
+
+				for (var j=0, addedNode; (addedNode = addedNodes[j]) !== undefined; j++) {
+					// skip elements that have already been rendered
+					if (!renderedElements.has(addedNode)) {
+						renderNodeAndChildren(addedNode);
+					}
+				}
+			}
+		}
+	};
+
+	var MutationObserver = globals.getKeyValue("MutationObserver");
+	if(MutationObserver) {
+		globalMutationObserver = new MutationObserver(mutationHandler);
+		globalMutationObserver.observe(getGlobal().document.documentElement, {
+			childList: true,
+			subtree: true
+		});
+
+		mutationObserverEnabled = true;
+	}
+};
+
+var renderTagsInDocument = function(tagName) {
+	var nodes = getGlobal().document.getElementsByTagName(tagName);
+
+	for (var i=0, node; (node = nodes[i]) !== undefined; i++) {
+		renderNodeAndChildren(node);
+	}
+};
+
 var attr = function (attributeName, attrHandler) {
 	if(attrHandler) {
 		if (typeof attributeName === "string") {
@@ -46,7 +123,7 @@ var attr = function (attributeName, attrHandler) {
 		//!steal-remove-start
 		requestedAttributes[attributeName] = true;
 		//!steal-remove-end
-		
+
 		return cb;
 	}
 };
@@ -60,21 +137,64 @@ var tag = function (tagName, tagHandler) {
 	if(tagHandler) {
 		var GLOBAL = getGlobal();
 
+		var validCustomElementName = automaticCustomElementCharacters.test(tagName),
+			tagExists = typeof tags[tagName.toLowerCase()] !== 'undefined',
+			customElementExists;
+
 		//!steal-remove-start
-		if (typeof tags[tagName.toLowerCase()] !== 'undefined') {
+		if (tagExists) {
 			dev.warn("Custom tag: " + tagName.toLowerCase() + " is already defined");
 		}
-		if (!automaticCustomElementCharacters.test(tagName) && tagName !== "content") {
+
+		if (!validCustomElementName && tagName !== "content") {
 			dev.warn("Custom tag: " + tagName.toLowerCase() + " hyphen missed");
 		}
 		//!steal-remove-end
+
 		// if we have html5shiv ... re-generate
 		if (GLOBAL.html5) {
 			GLOBAL.html5.elements += " " + tagName;
 			GLOBAL.html5.shivDocument();
 		}
 
 		tags[tagName.toLowerCase()] = tagHandler;
+
+		if(automountEnabled()) {
+			var customElements = globals.getKeyValue("customElements");
+
+			// automatically render elements that have tagHandlers
+			// If browser supports customElements, register the tag as a custom element
+			if (customElements) {
+				customElementExists = customElements.get(tagName.toLowerCase());
+
+				if (validCustomElementName && !customElementExists) {
+					var CustomElement = function() {
+						return Reflect.construct(HTMLElement, [], CustomElement);
+					};
+
+					CustomElement.prototype.connectedCallback = function() {
+						// don't re-render an element that has been rendered already
+						if (!renderedElements.has(this)) {
+							tags[tagName.toLowerCase()](this, {});
+						}
+					};
+
+					Object.setPrototypeOf(CustomElement.prototype, HTMLElement.prototype);
+					Object.setPrototypeOf(CustomElement, HTMLElement);
+
+					customElements.define(tagName, CustomElement);
+				}
+			}
+			// If browser doesn't support customElements, set up MutationObserver for
+			// rendering elements when they are inserted in the page
+			// and rendering elements that are already in the page
+			else {
+				enableMutationObserver();
+				renderTagsInDocument(tagName);
+			}
+		} else if(mutationObserverEnabled) {
+			globalMutationObserver.disconnect();
+		}
 	} else {
 		var cb;
 
@@ -93,7 +213,6 @@ var tag = function (tagName, tagHandler) {
 	}
 
 };
-var tags = {};
 
 var callbacks = {
 	_tags: tags,
@@ -104,15 +223,18 @@ var callbacks = {
 	attr: attr,
 	// handles calling back a tag callback
 	tagHandler: function(el, tagName, tagData){
-		var helperTagCallback = tagData.options.get('tags.' + tagName,{proxyMethods: false}),
-			tagCallback = helperTagCallback || tags[tagName];
-
-		// If this was an element like <foo-bar> that doesn't have a component, just render its content
 		var scope = tagData.scope,
+			helperTagCallback = scope && scope.templateContext.tags.get(tagName),
+			tagCallback = helperTagCallback || tags[tagName],
 			res;
 
+		// If this was an element like <foo-bar> that doesn't have a component, just render its content
 		if(tagCallback) {
-			res = Observation.ignore(tagCallback)(el, tagData);
+			res = ObservationRecorder.ignore(tagCallback)(el, tagData);
+
+			// add the element to the Set of elements that have had their handlers called
+			// this will prevent the handler from being called again when the element is inserted
+			renderedElements.add(el);
 		} else {
 			res = scope;
 		}
@@ -123,20 +245,23 @@ var callbacks = {
 			var ceConstructor = GLOBAL.document.createElement(tagName).constructor;
 			// If not registered as a custom element, the browser will use default constructors
 			if (ceConstructor === GLOBAL.HTMLElement || ceConstructor === GLOBAL.HTMLUnknownElement) {
-				dev.warn('can-view-callbacks: No custom element found for ' + tagName);	
+				dev.warn('can-view-callbacks: No custom element found for ' + tagName);
 			}
 		}
 		//!steal-remove-end
 
 		// If the tagCallback gave us something to render with, and there is content within that element
 		// render it!
 		if (res && tagData.subtemplate) {
-
 			if (scope !== res) {
 				scope = scope.add(res);
 			}
-			var result = tagData.subtemplate(scope, tagData.options);
-			var frag = typeof result === "string" ? can.view.frag(result) : result;
+
+			var nodeList = nodeLists.register([], undefined, tagData.parentNodeList || true, false);
+			nodeList.expression = "<" + el.tagName + ">";
+
+			var result = tagData.subtemplate(scope, tagData.options, nodeList);
+			var frag = typeof result === "string" ? makeFrag(result) : result;
 			domMutate.appendChild.call(el, frag);
 		}
 	}

docs/attr.md

@@ -12,6 +12,7 @@ Handlers must be registered before templates using them are parsed.
 
 ```js
 var canViewCallbacks = require("can-view-callbacks");
+var domEvents = require("can-util/dom/events/events");
 
 canViewCallbacks.attr("show-when", function(el, attrData){
 	var prop = el.getAttribute("show-when");
@@ -150,47 +151,46 @@ var showing = attrData.scope.compute("showing")
 This value can be written to by `toggle`:
 
 ```js
-canViewCallbacks.attr("toggle", function(el, attrData){
+canViewCallbacks.attr("toggle", function(el, attrData) {
+	var attrValue = el.getAttribute("toggle");
+	var toggleCompute = attrData.scope.compute(attrValue);
 
-	var attrValue = el.getAttribute("toggle")
-		toggleCompute = attrData.scope.compute(attrValue);
-
-	$(el).click(function(){
-		toggleCompute(! toggleCompute() )
-	})
-
-})
+	$(el).click(function() {
+		toggleCompute( ! toggleCompute() );
+	});
+});
 ```
 
 Or listened to by `fade-in-when`:
 
 ```js
-canViewCallbacks.attr("fade-in-when", function( el, attrData ) {
+canViewCallbacks.attr("fade-in-when", function(el, attrData) {
 	var attrValue = el.getAttribute("fade-in-when");
-		fadeInCompute = attrData.scope.compute(attrValue),
-		// handler for when the compute changes
-		handler = function(ev, newVal, oldVal){
-			if(newVal && !oldVal) {
-				$(el).fadeIn("slow")
-			} else if(!newVal){
-				$(el).hide()
-			}
+	var fadeInCompute = attrData.scope.compute(attrValue);
+
+	// handler for when the observable changes
+	var handler = function(event, newVal, oldVal) {
+		if (newVal && !oldVal) {
+			$(el).fadeIn("slow")
+		} else if (!newVal) {
+			$(el).hide()
 		}
+	};
 
-	fadeInCompute.on("change",handler);
+	fadeInCompute.on("change", handler);
 
 	...
 
-})
+});
 ```
 
 When you listen to something other than the attribute’s element, remember to
 unbind the event handler when the element is [can-util/dom/events/removed/removed removed] from the page:
 
 ```js
-domEvents.addEventListener.call(el,"removed", function(){
-	fadeInCompute.off(handler);
-});
+	domEvents.addEventListener.call(el, "removed", function() {
+		fadeInCompute.off("change", handler);
+	});
 ```
 
 @demo demos/can-view-callbacks/fade_in_when.html

package.json

@@ -1,8 +1,8 @@
 {
   "name": "can-view-callbacks",
-  "version": "3.2.5",
+  "version": "4.0.0-pre.17",
   "description": "Registered callbacks for behaviors",
-  "homepage": "http://canjs.com",
+  "homepage": "https://canjs.com/doc/can-view-callbacks.html",
   "repository": {
     "type": "git",
     "url": "git://github.com/canjs/can-view-callbacks.git"
@@ -13,9 +13,8 @@
     "url": "http://bitovi.com"
   },
   "scripts": {
-    "preversion": "npm test && npm run build",
-    "version": "git commit -am \"Update dist for release\" && git checkout -b release && git add -f dist/",
-    "postversion": "git push --tags && git checkout master && git branch -D release && git push",
+    "preversion": "npm test",
+    "postpublish": "git push --tags && git push",
     "testee": "testee test/test.html --browsers firefox",
     "test": "npm run detect-cycle && npm run jshint && npm run testee",
     "jshint": "jshint ./*.js --config",
@@ -24,7 +23,6 @@
     "release:minor": "npm version minor && npm publish",
     "release:major": "npm version major && npm publish",
     "build": "node build.js",
-    "develop": "done-serve --static --develop --port 8080",
     "detect-cycle": "detect-cyclic-packages --ignore done-serve"
   },
   "main": "can-view-callbacks",
@@ -33,18 +31,18 @@
     "canjs-plugin",
     "donejs"
   ],
-  "steal": {
-    "configDependencies": [
-      "live-reload"
-    ]
-  },
   "dependencies": {
+    "can-dom-mutate": "^1.0.0",
+    "can-globals": "^1.0.0",
+    "can-log": "^1.0.0",
     "can-namespace": "1.0.0",
-    "can-observation": "^3.3.1",
-    "can-util": "^3.9.5"
+    "can-observation-recorder": "^1.0.0",
+    "can-util": "^3.9.5",
+    "can-view-nodelist": "^4.0.0"
   },
   "devDependencies": {
     "can-test-helpers": "^1.0.1",
+    "can-view-scope": "^4.0.0-pre.34",
     "detect-cyclic-packages": "^1.1.0",
     "done-serve": "^1.2.0",
     "jshint": "^2.9.1",