feat(modifier-managers): use 3.22 capabilities

BREAKING CHANGE: destruction behavior changed to use new args proxy from 3.22

Resolves the issue
  described by: emberjs/ember.js#19162
  fixed by: emberjs/ember.js#19163

addon/modifiers/did-insert.js

@@ -1,3 +1,4 @@
+import { gte } from 'ember-compatibility-helpers';
 import { setModifierManager, capabilities } from '@ember/modifier';
 
 /**
@@ -46,7 +47,7 @@ import { setModifierManager, capabilities } from '@ember/modifier';
 */
 export default setModifierManager(
   () => ({
-    capabilities: capabilities('3.13', { disableAutoTracking: true }),
+    capabilities: capabilities(gte('3.22.0') ? '3.22' : '3.13', { disableAutoTracking: true }),
 
     createModifier() {},
 

addon/modifiers/did-update.js

@@ -1,3 +1,4 @@
+import { gte } from 'ember-compatibility-helpers';
 import { setModifierManager, capabilities } from '@ember/modifier';
 
 /**
@@ -58,14 +59,30 @@ import { setModifierManager, capabilities } from '@ember/modifier';
 */
 export default setModifierManager(
   () => ({
-    capabilities: capabilities('3.13', { disableAutoTracking: true }),
+    capabilities: capabilities(gte('3.22.0') ? '3.22' : '3.13', {
+      disableAutoTracking: gte('3.22.0') ? false : true,
+    }),
 
     createModifier() {
       return { element: null };
     },
-    installModifier(state, element) {
+
+    installModifier(state, element, args) {
       // save element into state bucket
       state.element = element;
+
+      if (gte('3.22.0')) {
+        // consume all args
+        for (let i = 0; i < args.positional.length; i++) {
+          // "noop" / consume the arg
+          args.positional[i];
+        }
+
+        for (let key of Object.keys(args.named)) {
+          // "noop" / consume the arg
+          args.named[key];
+        }
+      }
     },
 
     updateModifier({ element }, args) {

addon/modifiers/will-destroy.js

@@ -1,3 +1,4 @@
+import { gte } from 'ember-compatibility-helpers';
 import { setModifierManager, capabilities } from '@ember/modifier';
 
 /**
@@ -40,7 +41,7 @@ import { setModifierManager, capabilities } from '@ember/modifier';
 */
 export default setModifierManager(
   () => ({
-    capabilities: capabilities('3.13', { disableAutoTracking: true }),
+    capabilities: capabilities(gte('3.22.0') ? '3.22' : '3.13', { disableAutoTracking: true }),
 
     createModifier() {
       return { element: null };

package.json

@@ -23,7 +23,8 @@
   },
   "dependencies": {
     "ember-cli-babel": "^7.10.0",
-    "ember-modifier-manager-polyfill": "^1.1.0"
+    "ember-compatibility-helpers": "^1.2.1",
+    "ember-modifier-manager-polyfill": "^1.2.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^0.7.0",
@@ -37,7 +38,7 @@
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.2.0",
     "ember-resolver": "^5.0.1",
-    "ember-source": "~3.7.0",
+    "ember-source": "~3.22.0",
     "ember-source-channel-url": "^1.1.0",
     "ember-template-lint": "^1.1.0",
     "ember-try": "^1.0.0",

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

@@ -1,27 +1,69 @@
+import { gte } from 'ember-compatibility-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, settled } from '@ember/test-helpers';
+import { tracked } from '@glimmer/tracking';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Modifier | did-update', function(hooks) {
   setupRenderingTest(hooks);
 
-  test('it basically works', async function(assert) {
-    assert.expect(4);
+  if (gte('3.22.0')) {
+    module('capabilities(3.22)', function() {
+      class Context {
+        @tracked boundValue = 'initial';
+      }
 
-    this.someMethod = (element, positional, named) => {
-      assert.equal(element.tagName, 'DIV', 'correct element tagName');
-      assert.dom(element).hasAttribute('data-foo', 'some-thing');
+      test('it basically works', async function(assert) {
+        assert.expect(5);
 
-      assert.namedArgsEqual(named, {}, 'named args match');
-      assert.deepEqual(positional, ['update'], 'positional args match');
-    };
+        this.setProperties({
+          ctx: new Context() ,
+          someMethod(element, positional, named) {
+            assert.equal(element.tagName, 'DIV', 'correct element tagName');
+            assert.dom(element).hasAttribute('data-foo', 'some-thing');
 
-    this.set('boundValue', 'initial');
-    await render(
-      hbs`<div data-foo="some-thing" {{did-update this.someMethod this.boundValue}}></div>`
-    );
+            assert.namedArgsEqual(named, {}, 'named args match');
+            assert.equal(positional.length, 1);
+            assert.equal(positional[0], 'update', 'positional args match');
+          },
+        });
 
-    this.set('boundValue', 'update');
-  });
+
+        await render(
+          hbs`
+            <div
+              data-foo="some-thing"
+              {{did-update this.someMethod this.ctx.boundValue}}
+            >
+            </div>`
+        );
+
+        this.set('ctx.boundValue', 'update');
+
+        await settled();
+      });
+    });
+  } else {
+    module('capabilities(3.13)', function() {
+      test('it basically works', async function(assert) {
+        assert.expect(4);
+
+        this.someMethod = (element, positional, named) => {
+          assert.equal(element.tagName, 'DIV', 'correct element tagName');
+          assert.dom(element).hasAttribute('data-foo', 'some-thing');
+
+          assert.namedArgsEqual(named, {}, 'named args match');
+          assert.deepEqual(positional, ['update'], 'positional args match');
+        };
+
+        this.set('boundValue', 'initial');
+        await render(
+          hbs`<div data-foo="some-thing" {{did-update this.someMethod this.boundValue}}></div>`
+        );
+
+        this.set('boundValue', 'update');
+      });
+    });
+  }
 });