Merge pull request #361 from canjs/major

Merge major branch for 6.0 release

Author: matthewp

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 node_js: node
 addons:
-  firefox: '57.0'
+  firefox: latest
 dist: xenial
 services:
   - xvfb

can-component.js

@@ -1,5 +1,4 @@
 "use strict";
-/* jshint -W079 */
 
 // # can-component.js
 // This implements the `Component` which allows you to create widgets
@@ -17,7 +16,6 @@ var stache = require("can-stache");
 var stacheBindings = require("can-stache-bindings");
 var Scope = require("can-view-scope");
 var viewCallbacks = require("can-view-callbacks");
-var nodeLists = require("can-view-nodelist");
 var canReflect = require("can-reflect");
 var SimpleObservable = require("can-simple-observable");
 var SimpleMap = require("can-simple-map");
@@ -28,7 +26,6 @@ var assign = require('can-assign');
 var ObservationRecorder = require("can-observation-recorder");
 var queues = require("can-queues");
 var domData = require('can-dom-data');
-var getChildNodes = require('can-child-nodes');
 var string = require("can-string");
 var domEvents = require('can-dom-events');
 var domMutate = require('can-dom-mutate');
@@ -57,7 +54,7 @@ var viewModelSymbol = canSymbol.for('can.viewModel');
 
 
 // ## Helpers
-var noop = function(){};
+
 // ### addContext
 // For replacement elements like `<can-slot>` and `<context>`, this is used to
 // figure out what data they should render with.  Slots can have bindings like
@@ -176,19 +173,31 @@ function makeReplacementTagCallback(tagName, componentTagData, shadowTagData, le
 			// Now we need to render the right template and insert its result in the page.
 			// We need to teardown any bindings created too so we create a nodeList
 			// to do this.
+			var fragment = template(tagData.scope, tagData.options);
+			if(tagData.teardown) {
 
+				var placeholder = el.ownerDocument.createComment(tagName);
+				fragment.insertBefore(placeholder, fragment.firstChild);
+				domMutate.onNodeRemoved(placeholder, tagData.teardown);
+			}
 
-
+			el.parentNode.replaceChild(
+				fragment,
+				el
+			);
+			/*
 			var nodeList = nodeLists.register([el], tagData.teardown || noop,
 				insertionElementTagData.parentNodeList || true,
 				insertionElementTagData.directlyNested);
 
 			nodeList.expression = "<can-slot name='"+el.getAttribute('name')+"'/>";
 
-			var frag = template(tagData.scope, tagData.options, nodeList);
+			var frag = template(tagData.scope, tagData.options);
+
+
 			var newNodes = canReflect.toArray( getChildNodes(frag) );
 			var oldNodes = nodeLists.update(nodeList, newNodes);
-			nodeLists.replace(oldNodes, frag);
+			nodeLists.replace(oldNodes, frag);*/
 
 			// Restore the proper tag function so it could potentially be used again (as in lists)
 			options.tags[tagName] = replacementTag;
@@ -236,7 +245,8 @@ function getSetupFunctionForComponentVM(componentInitVM) {
 				var canBinding = new Bind({
 					child: child,
 					parent: parent,
-					queue: "domUI",
+					queue: "dom",
+					element: el,
 
 					//!steal-remove-start
 					// For debugging: the names that will be assigned to the updateChild
@@ -539,13 +549,30 @@ var Component = Construct.extend(
 			el.viewModel = viewModel;
 			domData.set(el, "preventDataBindings", true);
 
-			// an array of teardown stuff that should happen when the element is removed
-			var teardownFunctions = [];
-			var callTeardownFunctions = function() {
-					for (var i = 0, len = teardownFunctions.length; i < len; i++) {
-						teardownFunctions[i]();
-					}
-				};
+			// TEARDOWN SETUP
+			var removedDisposal,
+				connectedDisposal,
+				viewModelDisconnectedCallback;
+			function teardownComponent(){
+				if(removedDisposal) {
+					removedDisposal();
+					removedDisposal = null;
+				}
+				component._torndown = true;
+				domEvents.dispatch(el, "beforeremove", false);
+				if(teardownBindings) {
+					teardownBindings();
+				}
+				if(viewModelDisconnectedCallback) {
+					viewModelDisconnectedCallback(el);
+				} else if(typeof viewModel.stopListening === "function"){
+					viewModel.stopListening();
+				}
+				if(connectedDisposal) {
+					connectedDisposal();
+					connectedDisposal = null;
+				}
+			}
 
 			// #### Helpers
 			// TODO: remove in next release
@@ -558,33 +585,25 @@ var Component = Construct.extend(
 				});
 			}
 
-
 			// #### `events` control
 			// TODO: remove in next release
 			// Create a control to listen to events
 			if(this.constructor.Control) {
 				this._control = new this.constructor.Control(el, {
 					// Pass the viewModel to the control so we can listen to it's changes from the controller.
 					scope: this.viewModel,
-					viewModel: this.viewModel,
-					destroy: callTeardownFunctions
-				});
-			} else {
-				var removalDisposal = domMutate.onNodeRemoval(el, function () {
-					var doc = el.ownerDocument;
-					var rootNode = doc.contains ? doc : doc.documentElement;
-					if (!rootNode || !rootNode.contains(el)) {
-						if(removalDisposal) {
-							nodeRemoved = true;
-							removalDisposal();
-							callTeardownFunctions();
-							removalDisposal = null;
-							callTeardownFunctions = null;
-						}
-					}
+					viewModel: this.viewModel
 				});
 			}
 
+			removedDisposal = domMutate.onNodeRemoved(el, function () {
+				var doc = el.ownerDocument;
+				var rootNode = doc.contains ? doc : doc.documentElement;
+				if (!rootNode || !rootNode.contains(el)) {
+					teardownComponent();
+				}
+			});
+
 			// #### Rendering
 
 			var leakScope = {
@@ -644,61 +663,32 @@ var Component = Construct.extend(
 				betweenTagsTagData = lightTemplateTagData;
 				betweenTagsView = componentTagData.subtemplate || el.ownerDocument.createDocumentFragment.bind(el.ownerDocument);
 			}
-			var viewModelDisconnectedCallback,
-				insertionDisposal,
-				componentInPage,
-				nodeRemoved;
+
+
+
 
 			// Keep a nodeList so we can kill any directly nested nodeLists within this component
-			var nodeList = nodeLists.register([], function() {
-				if(removalDisposal && !nodeRemoved) {
-					removalDisposal();
-					callTeardownFunctions();
-					removalDisposal = null;
-					callTeardownFunctions = null;
-				}
-				component._torndown = true;
-				domEvents.dispatch(el, "beforeremove", false);
-				if(teardownBindings) {
-					teardownBindings();
-				}
-				if(viewModelDisconnectedCallback) {
-					viewModelDisconnectedCallback(el);
-				} else if(typeof viewModel.stopListening === "function"){
-					viewModel.stopListening();
-				}
-				if(insertionDisposal) {
-					insertionDisposal();
-					insertionDisposal = null;
-				}
-			}, componentTagData.parentNodeList || true, false);
-			nodeList.expression = "<" + this.tag + ">";
-			teardownFunctions.push(function() {
-				nodeLists.unregister(nodeList);
-			});
-			this.nodeList = nodeList;
 
-			shadowFragment = betweenTagsView(betweenTagsTagData.scope, betweenTagsTagData.options, nodeList);
+
+
+			shadowFragment = betweenTagsView(betweenTagsTagData.scope, betweenTagsTagData.options);
 
 			// TODO: afterRender
 
 			// Append the resulting document fragment to the element
 			domMutateNode.appendChild.call(el, shadowFragment);
 
-			// update the nodeList with the new children so the mapping gets applied
-			nodeLists.update(nodeList, getChildNodes(el));
-
 			// Call connectedCallback
 			if(viewModel && viewModel.connectedCallback) {
 				var body = DOCUMENT().body;
-				componentInPage = body && body.contains(el);
+				var componentInPage = body && body.contains(el);
 
 				if(componentInPage) {
 					viewModelDisconnectedCallback = viewModel.connectedCallback(el);
 				} else {
-					insertionDisposal = domMutate.onNodeInsertion(el, function () {
-						insertionDisposal();
-						insertionDisposal = null;
+					connectedDisposal = domMutate.onNodeConnected(el, function () {
+						connectedDisposal();
+						connectedDisposal = null;
 						viewModelDisconnectedCallback = viewModel.connectedCallback(el);
 					});
 				}
@@ -713,7 +703,6 @@ Component.prototype[viewInsertSymbol] = function(viewData) {
 	if(this._torndown) {
 		this.setup.apply(this,this._initialArgs);
 	}
-	viewData.nodeList.newDeepChildren.push(this.nodeList);
 	return this.element;
 };
 

control/control.js

@@ -61,10 +61,11 @@ var ComponentControl = Control.extend({
 			this._bindings.readyComputes = {};
 		},
 		destroy: function() {
-			Control.prototype.destroy.apply(this, arguments);
 			if (typeof this.options.destroy === 'function') {
 				this.options.destroy.apply(this, arguments);
 			}
+			Control.prototype.destroy.apply(this, arguments);
+
 		}
 	});
 

docs/component.md

@@ -2,7 +2,7 @@
 @download can/component
 @test can/component/test.html
 @parent can-views
-@collection can-core
+@collection can-legacy
 @release 2.0
 @link ../docco/component/component.html docco
 @group can-component.define 0 define

package.json

@@ -1,6 +1,6 @@
 {
   "name": "can-component",
-  "version": "4.6.3",
+  "version": "5.0.0-pre.5",
   "description": "Custom elements for CanJS",
   "homepage": "https://canjs.com/doc/can-component.html",
   "repository": {
@@ -40,44 +40,45 @@
   },
   "dependencies": {
     "can-assign": "^1.1.1",
-    "can-bind": "^1.4.0",
+    "can-bind": "^1.5.0",
     "can-child-nodes": "^1.0.0",
     "can-construct": "^3.2.0",
-    "can-control": "^4.0.0",
+    "can-control": "^5.0.0-pre.0",
     "can-define": "^2.0.0",
     "can-dom-data": "^1.0.1",
     "can-dom-events": "^1.1.0",
-    "can-dom-mutate": "^1.0.0",
+    "can-dom-mutate": "^2.0.0",
     "can-fragment": "^1.0.0",
     "can-globals": "^1.0.0",
     "can-log": "^1.0.0",
     "can-namespace": "1.0.0",
     "can-observation": "^4.0.0",
     "can-observation-recorder": "^1.2.0",
-    "can-queues": "^1.0.0",
+    "can-queues": "^1.3.0",
     "can-reflect": "^1.6.0",
     "can-simple-map": "^4.1.0",
     "can-simple-observable": "^2.0.0",
-    "can-stache": "^4.10.0",
-    "can-stache-bindings": "^4.9.0",
+    "can-stache": "^5.0.0-pre.3",
+    "can-stache-bindings": "^5.0.0-pre.3",
     "can-stache-key": "^1.0.0",
     "can-string": "<2.0.0",
     "can-symbol": "^1.4.1",
-    "can-view-callbacks": "^4.2.0",
+    "can-view-callbacks": "^5.0.0-pre.1",
     "can-view-model": "^4.0.0",
-    "can-view-nodelist": "^4.1.0",
     "can-view-scope": "^4.7.0"
   },
   "devDependencies": {
+    "can-diff": "^1.5.0",
     "can-observe": "^2.0.0",
     "can-test-helpers": "^1.1.2",
     "can-value": "<2.0.0",
     "can-vdom": "^4.0.0",
+    "can-simple-dom": "^1.7.0",
     "detect-cyclic-packages": "^1.1.0",
     "docco": "^0.8.0",
-    "highlight.js": "^9.15.7",
     "done-serve": "^2.0.0",
     "gh-pages": "^2.0.1",
+    "highlight.js": "^9.15.7",
     "jshint": "^2.9.1",
     "steal": "^1.0.0",
     "steal-qunit": "^2.0.0",

test/component-can-bind-test.js

@@ -4,6 +4,7 @@ var helpers = require("./helpers");
 var QUnit = require("steal-qunit");
 var SimpleMap = require("can-simple-map");
 var value = require("can-value");
+var domMutateNode = require("can-dom-mutate/node/node");
 var queues = require("can-queues");
 var testHelpers = require("can-test-helpers");
 
@@ -52,7 +53,7 @@ QUnit.test("Using can-bind in connectedCallback works as documented", function(a
 
 	// Insert the component into the page; connectedCallback will run
 	var fixture = document.getElementById("qunit-fixture");
-	fixture.appendChild(element);
+	domMutateNode.appendChild.call(fixture, element);
 	helpers.afterMutation(function() {
 
 		// Because this is a one-way parent-to-child binding, the child will be set

test/component-events-test.js

@@ -98,8 +98,8 @@ helpers.makeTests("can-component events", function(){
         });
 
         var renderer = stache("<can-parent-stache></can-parent-stache>");
-
-        domMutateNode.appendChild.call(this.fixture, renderer());
+		var frag = renderer();
+        domMutateNode.appendChild.call(this.fixture, frag);
         var done = assert.async();
         setTimeout(function () {
 			undo();
@@ -147,7 +147,7 @@ helpers.makeTests("can-component events", function(){
         HANDLER.call(Test,{type:"something"});
     });
 
-    QUnit.test('removing bound viewModel properties on destroy #1415', function(assert) {
+    QUnit.test('removing bound viewModel properties on connectedCallback #1415', function(assert) {
         var state = new SimpleMap({
             product: new SimpleMap({
                 id: 1,
@@ -157,9 +157,9 @@ helpers.makeTests("can-component events", function(){
 
         Component.extend({
             tag: 'destroyable-component',
-            events: {
-                destroy: function(){
-                    this.viewModel.set("product" , null);
+            ViewModel: {
+                connectedCallback: function(){
+                    this.set("product" , null);
                 }
             }
         });
@@ -249,7 +249,7 @@ helpers.makeTests("can-component events", function(){
 			undo();
         }], done);
 
-        
+
 
     });