Run did-update callback in an untracked frame

Modifier capabillities in 3.22, requires all arguments to be consumed,
to be tracked. This meant `disableAutoTracking` had to be set to `false`
for the modifier to work with 3.22 capabillities. This had the
sideeffect that any other consumed tags ended up being tracked. Meaning
the `did-update` callback was invoked whenever those tags changed.

Author: mogstad

addon/modifiers/did-update.js

@@ -1,5 +1,6 @@
 import { setModifierManager, capabilities } from '@ember/modifier';
 import { gte } from 'ember-compatibility-helpers';
+import { untrack } from '@glimmer/validator';
 
 /**
   The `{{did-update}}` element modifier is activated when any of its arguments
@@ -80,17 +81,20 @@ export default setModifierManager(
     },
 
     updateModifier({ element }, args) {
+      let [fn, ...positional] = args.positional;
+
       if (gte('3.22.0')) {
         // Consume individual properties to entangle tracking.
         // https://github.com/emberjs/ember.js/issues/19277
         // https://github.com/ember-modifier/ember-modifier/pull/63#issuecomment-815908201
         args.positional.forEach(() => {});
         args.named && Object.values(args.named);
+        untrack(() => {
+          fn(element, positional, args.named);
+        });
+      } else {
+        fn(element, positional, args.named);
       }
-
-      let [fn, ...positional] = args.positional;
-
-      fn(element, positional, args.named);
     },
 
     destroyModifier() {},

tests/integration/modifiers/did-update-test.js

@@ -1,6 +1,7 @@
 import { module, test } from 'qunit';
+import { tracked } from '@glimmer/tracking';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, settled } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Modifier | did-update', function (hooks) {
@@ -24,4 +25,26 @@ module('Integration | Modifier | did-update', function (hooks) {
 
     this.set('boundValue', 'update');
   });
+
+  test('it consumes tracked properties without re-invoking', async function (assert) {
+    class Context {
+      @tracked boundValue = 'initial';
+      @tracked secondaryValue = 'initial';
+    }
+
+    assert.expect(1);
+    this.context = new Context();
+
+    this.someMethod = () => {
+      // This assertion works as an assurance that we render before `secondaryValue` changes,
+      // and consumes its tag to ensure reading tracked properties won't re-trigger the modifier
+      assert.equal(this.context.secondaryValue, 'initial');
+    };
+
+    await render(hbs`<div {{did-update this.someMethod this.context.boundValue}}></div>`);
+
+    this.context.boundValue = 'update';
+    await settled();
+    this.context.secondaryValue = 'update';
+  });
 });