Merge pull request #19193 from emberjs/bugfix/ensure-user-lifecycle-h…

…ooks-are-untracked [BUGFIX release] Ensure user lifecycle hooks are untracked
emberjs · Oct 13, 2020 · ae672e5 · ae672e5
2 parents b8502c0 + 35ca781
commit ae672e5
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
@@ -430,7 +430,9 @@ export default class CurlyComponentManager
     component._transitionTo('hasElement');
 
     if (environment.isInteractive) {
+      beginUntrackFrame();
       component.trigger('willInsertElement');
+      endUntrackFrame();
     }
   }
 

diff --git a/packages/@ember/-internals/glimmer/lib/utils/curly-component-state-bucket.ts b/packages/@ember/-internals/glimmer/lib/utils/curly-component-state-bucket.ts
@@ -2,7 +2,7 @@ import { clearElementView, clearViewElement, getViewElement } from '@ember/-inte
 import { CapturedNamedArguments } from '@glimmer/interfaces';
 import { createConstRef, Reference } from '@glimmer/reference';
 import { registerDestructor } from '@glimmer/runtime';
-import { Revision, Tag, valueForTag } from '@glimmer/validator';
+import { beginUntrackFrame, endUntrackFrame, Revision, Tag, valueForTag } from '@glimmer/validator';
 import { EmberVMEnvironment } from '../environment';
 import { Renderer } from '../renderer';
 import { Factory as TemplateFactory, OwnedTemplate } from '../template';
@@ -64,8 +64,10 @@ export default class ComponentStateBucket {
     let { component, environment } = this;
 
     if (environment.isInteractive) {
+      beginUntrackFrame();
       component.trigger('willDestroyElement');
       component.trigger('willClearRender');
+      endUntrackFrame();
 
       let element = getViewElement(component);
 

diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
@@ -12,7 +12,7 @@ import {
 
 import { run } from '@ember/runloop';
 import { DEBUG } from '@glimmer/env';
-import { alias, set, get, observer, on, computed } from '@ember/-internals/metal';
+import { alias, set, get, observer, on, computed, tracked } from '@ember/-internals/metal';
 import Service, { inject as injectService } from '@ember/service';
 import { Object as EmberObject, A as emberA } from '@ember/-internals/runtime';
 import { jQueryDisabled } from '@ember/-internals/views';
@@ -3732,6 +3732,75 @@ moduleFor(
 
       this.assertComponentElement(this.firstChild, { content: 'hello' });
     }
+
+    '@test lifecycle hooks are not tracked'() {
+      this.registerComponent('foo-bar', {
+        ComponentClass: class extends Component {
+          @tracked foo;
+
+          willInsertElement() {
+            this.foo;
+            this.foo = 123;
+          }
+
+          willRender() {
+            this.foo;
+            this.foo = 123;
+          }
+
+          didRender() {
+            this.foo;
+            this.foo = 123;
+          }
+
+          didReceiveAttrs() {
+            this.foo;
+            this.foo = 123;
+          }
+
+          didUpdate() {
+            this.foo;
+            this.foo = 123;
+          }
+
+          didUpdateAttrs() {
+            this.foo;
+            this.foo = 123;
+          }
+
+          didInsertElement() {
+            this.foo;
+            this.foo = 123;
+          }
+
+          willClearRender() {
+            this.foo;
+            this.foo = 123;
+          }
+
+          willDestroyElement() {
+            this.foo;
+            this.foo = 123;
+          }
+
+          didDestroyElement() {
+            this.foo;
+            this.foo = 123;
+          }
+        },
+        template: '{{this.baz}}',
+      });
+
+      this.render('{{#if cond}}{{foo-bar baz=this.value}}{{/if}}', { cond: true, value: 'hello' });
+
+      this.assertComponentElement(this.firstChild, { content: 'hello' });
+
+      runTask(() => set(this.context, 'value', 'world'));
+
+      this.assertComponentElement(this.firstChild, { content: 'world' });
+
+      runTask(() => set(this.context, 'cond', false));
+    }
   }
 );