[BUGFIX beta] Cleanup view teardown.

packages/ember-glimmer/lib/renderer.js

@@ -192,7 +192,9 @@ class Renderer {
       _renderResult.destroy();
     }
 
-    view.destroy();
+    if (!view.isDestroying) {
+      view.destroy();
+    }
   }
 
   componentInitAttrs() {

packages/ember-glimmer/lib/syntax/curly-component.js

@@ -72,6 +72,7 @@ class CurlyComponentManager {
 
     aliasIdToElementId(args, props);
 
+    props.parentView = parentView;
     props.renderer = parentView.renderer;
     props[HAS_BLOCK] = hasBlock;
 

packages/ember-glimmer/tests/integration/components/dynamic-components-test.js

@@ -310,10 +310,15 @@ moduleFor('Components test: dynamic components', class extends RenderingTest {
 
   ['@test component helper destroys underlying component when it is swapped out'](assert) {
     let destroyed = { 'foo-bar': 0, 'foo-bar-baz': 0 };
+    let testContext = this;
 
     this.registerComponent('foo-bar', {
       template: 'hello from foo-bar',
       ComponentClass: Component.extend({
+        willDestroyElement() {
+          assert.equal(testContext.$(`#${this.elementId}`).length, 1, 'element is still attached to the document');
+        },
+
         willDestroy() {
           this._super();
           destroyed['foo-bar']++;

packages/ember-glimmer/tests/integration/components/life-cycle-test.js

@@ -8,16 +8,15 @@ class LifeCycleHooksTest extends RenderingTest {
     super();
     this.hooks = [];
     this.components = {};
+    this.teardownAssertions = [];
   }
 
   teardown() {
-    super();
-    this.assertHooks(
-      'destroy',
-      ['the-top', 'willDestroyElement'],
-      ['the-middle', 'willDestroyElement'],
-      ['the-bottom', 'willDestroyElement']
-    );
+    super.teardown();
+
+    for (let i = 0; i < this.teardownAssertions.length; i++) {
+      this.teardownAssertions[i]();
+    }
   }
 
   /* abstract */
@@ -51,49 +50,90 @@ class LifeCycleHooksTest extends RenderingTest {
       this.hooks.push(hook(name, hookName, args));
     };
 
+    let assertParentView = (hookName, instance) => {
+      if (!instance.parentView) {
+        this.assert.ok(false, `parentView should be present in ${hookName}`);
+      }
+    };
+
+    let assertElement = (hookName, instance) => {
+      if (instance.tagName === '') { return; }
+
+      if (!instance.element) {
+        this.assert.ok(false, `element property should be present on ${instance} during ${hookName}`);
+      }
+
+      let inDOM = this.$(`#${instance.elementId}`)[0];
+      if (!inDOM) {
+        this.assert.ok(false, `element for ${instance} should be in the DOM during ${hookName}`);
+      }
+    };
+
+    let assertNoElement = (hookName, instance) => {
+      if (instance.element) {
+        this.assert.ok(false, `element should not be present in ${hookName}`);
+      }
+    };
+
     let ComponentClass = this.ComponentClass.extend({
       init() {
         expectDeprecation(() => { this._super(...arguments); },
           /didInitAttrs called/);
 
         pushHook('init');
         pushComponent(this);
+        assertParentView('init', this);
+        assertNoElement('init', this);
       },
 
       didInitAttrs(options) {
         pushHook('didInitAttrs', options);
+        assertParentView('didInitAttrs', this);
+        assertNoElement('didInitAttrs', this);
       },
 
       didUpdateAttrs(options) {
         pushHook('didUpdateAttrs', options);
+        assertParentView('didUpdateAttrs', this);
       },
 
       willUpdate(options) {
         pushHook('willUpdate', options);
+        assertParentView('willUpdate', this);
       },
 
       didReceiveAttrs(options) {
         pushHook('didReceiveAttrs', options);
+        assertParentView('didReceiveAttrs', this);
       },
 
       willRender() {
         pushHook('willRender');
+        assertParentView('willRender', this);
       },
 
       didRender() {
         pushHook('didRender');
+        assertParentView('didRender', this);
+        assertElement('didRender', this);
       },
 
       didInsertElement() {
         pushHook('didInsertElement');
+        assertParentView('didInsertElement', this);
+        assertElement('didInsertElement', this);
       },
 
       didUpdate(options) {
         pushHook('didUpdate', options);
+        assertParentView('didUpdate', this);
+        assertElement('didUpdate', this);
       },
 
       willDestroyElement() {
         pushHook('willDestroyElement');
+        assertParentView('willDestroyElement', this);
+        assertElement('willDestroyElement', this);
       }
     });
 
@@ -341,6 +381,15 @@ class LifeCycleHooksTest extends RenderingTest {
       ['the-top', 'didRender']
 
     );
+
+    this.teardownAssertions.push(() => {
+      this.assertHooks(
+        'destroy',
+        ['the-top', 'willDestroyElement'],
+        ['the-middle', 'willDestroyElement'],
+        ['the-bottom', 'willDestroyElement']
+      );
+    });
   }
 
   ['@test passing values through attrs causes lifecycle hooks to fire if the attribute values have changed']() {
@@ -504,8 +553,105 @@ class LifeCycleHooksTest extends RenderingTest {
     } else {
       this.assertHooks('after no-op rernder (root)');
     }
+
+    this.teardownAssertions.push(() => {
+      this.assertHooks(
+        'destroy',
+        ['the-top', 'willDestroyElement'],
+        ['the-middle', 'willDestroyElement'],
+        ['the-bottom', 'willDestroyElement']
+      );
+    });
   }
 
+  ['@test components rendered from `{{each}}` have correct life-cycle hooks to be called']() {
+    let { invoke } = this.boundHelpers;
+
+    this.registerComponent('an-item', { template: strip`
+      <div>Item: {{count}}</div>
+    ` });
+
+    this.registerComponent('no-items', { template: strip`
+      <div>Nothing to see here</div>
+    ` });
+
+    this.render(strip`
+      {{#each items as |item|}}
+        ${invoke('an-item', { count: expr('item') })}
+      {{else}}
+        ${invoke('no-items')}
+      {{/each}}
+    `, {
+      items: [1, 2, 3, 4, 5]
+    });
+
+    this.assertText('Item: 1Item: 2Item: 3Item: 4Item: 5');
+
+    let initialHooks = (count) => {
+      return [
+        ['an-item', 'init'],
+        ['an-item', 'didInitAttrs',       { attrs: { count } }],
+        ['an-item', 'didReceiveAttrs',    { newAttrs: { count } }],
+        ['an-item', 'willRender']
+      ];
+    };
+
+    let initialAfterRenderHooks = (count) => {
+      return [
+        ['an-item', 'didInsertElement'],
+        ['an-item', 'didRender']
+      ];
+    };
+
+    this.assertHooks(
+
+      'after initial render',
+
+      // Sync hooks
+        ...initialHooks(1),
+        ...initialHooks(2),
+        ...initialHooks(3),
+        ...initialHooks(4),
+        ...initialHooks(5),
+
+      // Async hooks
+        ...initialAfterRenderHooks(5),
+        ...initialAfterRenderHooks(4),
+        ...initialAfterRenderHooks(3),
+        ...initialAfterRenderHooks(2),
+        ...initialAfterRenderHooks(1)
+    );
+
+    this.runTask(() => set(this.context, 'items', []));
+
+    this.assertText('Nothing to see here');
+
+    this.assertHooks(
+      'reset to empty array',
+
+      ['an-item', 'willDestroyElement'],
+      ['an-item', 'willDestroyElement'],
+      ['an-item', 'willDestroyElement'],
+      ['an-item', 'willDestroyElement'],
+      ['an-item', 'willDestroyElement'],
+
+      ['no-items', 'init'],
+      ['no-items', 'didInitAttrs',       { attrs: { } }],
+      ['no-items', 'didReceiveAttrs',    { newAttrs: { } }],
+      ['no-items', 'willRender'],
+
+      ['no-items', 'didInsertElement'],
+      ['no-items', 'didRender']
+    );
+
+    this.teardownAssertions.push(() => {
+      this.assertHooks(
+        'destroy',
+
+        ['no-items', 'willDestroyElement']
+      );
+    });
+  }
 }
 
 moduleFor('Components test: lifecycle hooks (curly components)', class extends LifeCycleHooksTest {

packages/ember-htmlbars/lib/component.js

@@ -193,7 +193,7 @@ const Component = View.extend(TargetActionSupport, ActionSupport, {
     let attr = this._renderNode.childNodes.filter(node => node.attrName === name)[0];
     if (!attr) { return null; }
     return attr.getContent();
-  }
+  },
 
   /**
     Returns true when the component was invoked with a block template.
@@ -359,6 +359,7 @@ const Component = View.extend(TargetActionSupport, ActionSupport, {
     @public
     @since 1.13.0
   */
+  didReceiveAttrs() {},
 
   /**
     Called when the attributes passed into the component have been updated.
@@ -379,6 +380,7 @@ const Component = View.extend(TargetActionSupport, ActionSupport, {
     @public
     @since 1.13.0
   */
+  didRender() {},
 
   /**
     Called after a component has been rendered, both on initial render and
@@ -397,6 +399,7 @@ const Component = View.extend(TargetActionSupport, ActionSupport, {
     @public
     @since 1.13.0
   */
+  willRender() {},
 
   /**
     Called before a component has been rendered, both on initial render and
@@ -415,6 +418,7 @@ const Component = View.extend(TargetActionSupport, ActionSupport, {
     @public
     @since 1.13.0
   */
+  didUpdateAttrs() {},
 
   /**
     Called when the attributes passed into the component have been changed.
@@ -433,6 +437,7 @@ const Component = View.extend(TargetActionSupport, ActionSupport, {
     @public
     @since 1.13.0
   */
+  willUpdate() {},
 
   /**
     Called when the component is about to update and rerender itself.
@@ -447,10 +452,11 @@ const Component = View.extend(TargetActionSupport, ActionSupport, {
     Called when the component has updated and rerendered itself.
     Called only during a rerender, not during an initial render.
 
-    @event didUpdate
+    @method didUpdate
     @public
     @since 1.13.0
   */
+  didUpdate() {}
 
   /**
     Called when the component has updated and rerendered itself.
@@ -465,7 +471,8 @@ const Component = View.extend(TargetActionSupport, ActionSupport, {
 Component[NAME_KEY] = 'Ember.Component';
 
 Component.reopenClass({
-  isComponentFactory: true
+  isComponentFactory: true,
+  positionalParams: []
 });
 
 export default Component;

packages/ember-htmlbars/lib/hooks/destroy-render-node.js

@@ -2,10 +2,10 @@
 @module ember
 @submodule ember-htmlbars
 */
-
 export default function destroyRenderNode(renderNode) {
-  if (renderNode.emberView) {
-    renderNode.emberView.destroy();
+  let view = renderNode.emberView;
+  if (view) {
+    view.renderer.remove(view, true);
   }
 
   let streamUnsubscribers = renderNode.streamUnsubscribers;

packages/ember-htmlbars/lib/morphs/morph.js

@@ -29,21 +29,12 @@ proto.HTMLBarsMorph$constructor = HTMLBarsMorph;
 proto.HTMLBarsMorph$clear = HTMLBarsMorph.prototype.clear;
 
 proto.addDestruction = function(toDestroy) {
+  // called from Router.prototype._connectActiveComponentNode for {{render}}
   this.emberToDestroy = this.emberToDestroy || [];
   this.emberToDestroy.push(toDestroy);
 };
 
 proto.cleanup = function() {
-  let view = this.emberView;
-
-  if (view) {
-    let parentView = view.parentView;
-
-    if (parentView && view.ownerView._destroyingSubtreeForView === parentView) {
-      parentView.removeChild(view);
-    }
-  }
-
   let toDestroy = this.emberToDestroy;
 
   if (toDestroy) {