[BUGFIX release] Ensure component creation issues deprecation for tra…

…cked property mutation
emberjs · Nov 19, 2020 · 6f00b74 · 6f00b74
1 parent ab92dea
commit 6f00b74
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts b/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts
@@ -1,5 +1,6 @@
 import { Factory } from '@ember/-internals/owner';
 import { assert } from '@ember/debug';
+import { DEBUG } from '@glimmer/env';
 import {
   Arguments,
   ComponentCapabilities,
@@ -24,6 +25,7 @@ import {
   buildCapabilities,
   registerDestructor,
 } from '@glimmer/runtime';
+import { deprecateMutationsInTrackingTransaction } from '@glimmer/validator';
 import { argsProxyFor } from '../utils/args-proxy';
 
 const CAPABILITIES = {
@@ -136,11 +138,19 @@ export default class CustomComponentManager<ComponentInstance>
     let { delegate } = definition;
     let args = argsProxyFor(vmArgs.capture(), 'component');
 
-    let component = delegate.createComponent(definition.ComponentClass.class!, args);
+    let component;
+
+    if (DEBUG && deprecateMutationsInTrackingTransaction !== undefined) {
+      deprecateMutationsInTrackingTransaction(() => {
+        component = delegate.createComponent(definition.ComponentClass.class!, args);
+      });
+    } else {
+      component = delegate.createComponent(definition.ComponentClass.class!, args);
+    }
 
     let bucket = new CustomComponentState(delegate, component, args, env);
 
-    return bucket;
+    return bucket as CustomComponentState<ComponentInstance>;
   }
 
   getDebugName({ name }: CustomComponentDefinitionState<ComponentInstance>): string {

diff --git a/packages/@ember/-internals/glimmer/tests/integration/custom-component-manager-test.js b/packages/@ember/-internals/glimmer/tests/integration/custom-component-manager-test.js
@@ -2,7 +2,7 @@ import { DEBUG } from '@glimmer/env';
 import { moduleFor, RenderingTestCase, runTask, strip } from 'internal-test-helpers';
 
 import { Object as EmberObject } from '@ember/-internals/runtime';
-import { set, setProperties, computed } from '@ember/-internals/metal';
+import { set, setProperties, computed, tracked } from '@ember/-internals/metal';
 import { setComponentManager, capabilities } from '@ember/-internals/glimmer';
 
 const BasicComponentManager = EmberObject.extend({
@@ -897,5 +897,35 @@ moduleFor(
 
       assert.verifySteps([]);
     }
+
+    '@test tracked property mutation in constructor issues a deprecation'() {
+      let ComponentClass = setComponentManager(
+        createBasicManager,
+        class extends EmberObject {
+          @tracked itemCount = 0;
+
+          init() {
+            super.init(...arguments);
+
+            // first read the tracked property
+            let { itemCount } = this;
+
+            // then attempt to update the tracked property
+            this.itemCount = itemCount + 1;
+          }
+        }
+      );
+
+      this.registerComponent('foo-bar', {
+        template: `{{this.itemCount}}`,
+        ComponentClass,
+      });
+
+      expectDeprecation(() => {
+        this.render('<FooBar />');
+      }, /asdf/);
+
+      this.assertHTML(`1`);
+    }
   }
 );