Destroy components when changed on re-render

Most of the infrastructure around components assumes they are static
(e.g. <my-component> cannot become a <foo-component> after it is
rendered). As such, there were some holes in destruction for the one
dynamic case (the {{component}} helper).

This commit detects when the underlying component has changed and
ensures that the component is scheduled for destruction before the new
component is swapped in.

It also fixes a similar issue with the view helper.

packages/ember-htmlbars/lib/keywords/component.js

@@ -7,6 +7,10 @@ export default {
   },
 
   render(morph, ...rest) {
+    if (morph.state.manager) {
+      morph.state.manager.destroy();
+    }
+
     // Force the component hook to treat this as a first-time render,
     // because normal components (`<foo-bar>`) cannot change at runtime,
     // but the `{{component}}` helper can.

packages/ember-htmlbars/lib/keywords/view.js

@@ -70,6 +70,11 @@ export default {
       options.createOptions._targetObject = node.state.targetObject;
     }
 
+    if (state.manager) {
+      state.manager.destroy();
+      state.manager = null;
+    }
+
     var nodeManager = ViewNodeManager.create(node, env, hash, options, parentView, null, scope, template);
     state.manager = nodeManager;
 

packages/ember-htmlbars/lib/node-managers/component-node-manager.js

@@ -264,6 +264,15 @@ ComponentNodeManager.prototype.rerender = function(_env, attrs, visitor) {
   }, this);
 };
 
+ComponentNodeManager.prototype.destroy = function() {
+  let component = this.component;
+
+  // Clear component's render node. Normally this gets cleared
+  // during view destruction, but in this case we're re-assigning the
+  // node to a different view and it will get cleaned up automatically.
+  component._renderNode = null;
+  component.destroy();
+};
 
 export function createComponent(_component, isAngleBracket, _props, renderNode, env, attrs = {}) {
   let props = assign({}, _props);
@@ -298,9 +307,6 @@ export function createComponent(_component, isAngleBracket, _props, renderNode,
   }
 
   component._renderNode = renderNode;
-  if (renderNode.emberView && renderNode.emberView !== component) {
-    throw new Error('Need to clean up this view before blindly reassigning.');
-  }
   renderNode.emberView = component;
   return component;
 }

packages/ember-htmlbars/lib/node-managers/view-node-manager.js

@@ -149,6 +149,10 @@ ViewNodeManager.prototype.rerender = function(env, attrs, visitor) {
   }, this);
 };
 
+ViewNodeManager.prototype.destroy = function() {
+  this.component.destroy();
+};
+
 function getTemplate(componentOrView) {
   return componentOrView.isComponent ? get(componentOrView, '_template') : get(componentOrView, 'template');
 }
@@ -192,9 +196,6 @@ export function createOrUpdateComponent(component, options, createOptions, rende
 
   component._renderNode = renderNode;
 
-  if (renderNode.emberView && renderNode.emberView !== component) {
-    throw new Error('Need to clean up this view before blindly reassigning.');
-  }
   renderNode.emberView = component;
   return component;
 }