fix: resolve deprecations

- https://deprecations.emberjs.com/v4.x/#toc_deprecate-auto-location
- updated to latest modifier API

Author: Tom Zellman

addon/modifiers/on-event.js

@@ -1,33 +1,34 @@
-import Modifier from 'ember-modifier';
-import { inject as service } from '@ember/service';
 import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import Modifier from 'ember-modifier';
 
 const modifierName = 'on-event';
 
+const cleanup = (instance) => {
+    const { eventName, events } = instance;
+    if (eventName) {
+        events.off(eventName, instance, instance._handler);
+    }
+};
+
 export default class OnEventModifier extends Modifier {
     @service events;
     @tracked eventName;
+    @tracked handler;
 
-    get handler() {
-        return this.args.positional[1];
-    }
-
-    didReceiveArguments() {
-        assert(`You must provide at least 2 arguments for {{${modifierName}}}`, this.args.positional.length > 1);
-        let eventName = this.args.positional[0];
+    modify(element, positionalArgs) {
+        assert(`You must provide at least 2 arguments for {{${modifierName}}}`, positionalArgs.length > 1);
+        const [eventName, handler] = positionalArgs;
         assert(
             `You must provide a string as the first positional argument for {{${modifierName}}}`,
             typeof eventName === 'string' && eventName.length > 0
         );
         this.eventName = eventName;
+        this.handler = handler;
         this.events.on(this.eventName, this, this._handler);
-    }
-
-    willRemove() {
-        if (this.eventName) {
-            this.events.off(this.eventName, this, this._handler);
-        }
+        registerDestructor(this, cleanup);
     }
 
     _handler() {

addon/modifiers/trigger-event.js

@@ -8,15 +8,15 @@ const modifierName = 'trigger-event';
 export default class TriggerEventModifier extends Modifier {
     @service events;
 
-    didReceiveArguments() {
-        assert(`You must provide at least 1 arguments for {{${modifierName}}}`, this.args.positional.length > 0);
-        const eventName = this.args.positional[0];
+    modify(element, positionalArgs) {
+        assert(`You must provide at least 1 argument for {{${modifierName}}}`, positionalArgs.length > 0);
+        const [eventName] = positionalArgs;
         assert(
             `You must provide a string as the first positional argument for {{${modifierName}}}`,
             typeof eventName === 'string' && eventName.length > 0
         );
         next(this, () => {
-            this.events.trigger(eventName, ...this.args.positional.slice(1));
+            this.events.trigger(eventName, ...positionalArgs.slice(1));
         });
     }
 }

tests/dummy/app/components/value-controls.js

@@ -1,7 +1,7 @@
-import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 export default class ValueDisplayComponent extends Component {
     @service events;
@@ -12,4 +12,10 @@ export default class ValueDisplayComponent extends Component {
         this.clicked++;
         this.events.trigger('valueSet', this.clicked);
     }
+
+    @action
+    resetValue() {
+        this.clicked = 0;
+        this.events.trigger('valueSet', this.clicked);
+    }
 }

tests/dummy/app/controllers/application.js

@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class IndexController extends Controller {
+    @service events;
+    @tracked hasClicked = false;
+
+    @action
+    resetValue() {
+        this.hasClicked = false;
+        this.events.trigger('valueReset');
+    }
+}

tests/dummy/app/controllers/index.js

@@ -1,19 +1,2 @@
 {{page-title "ember-events-modifier Demo"}}
-<div
-  class="fixed z-10 inset-0 overflow-y-auto"
-  {{on-event "hasClicked" (fn (mut this.hasClicked) true)}}
->
-    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-        <div
-          class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
-            <div class="flex flex-col justify-center space-y-3">
-                <ValueControls />
-                <ValueDisplay />
-                {{#if this.hasClicked}}
-                    <div class="text-red-500 text-center font-2xl">You clicked the button!</div>
-                {{/if}}
-            </div>
-        </div>
-    </div>
-</div>
+{{outlet}}

tests/dummy/app/templates/application.hbs

@@ -2,6 +2,7 @@
     type="button"
     class="bg-indigo-600 hover:bg-indigo-700 p-4 rounded text-white text-2xl"
     {{on "click" this.onClick}}
+    {{on-event "valueReset" this.resetValue}}
 >
     Click Me!
-</button>
+</button>

tests/dummy/app/templates/components/value-controls.hbs

@@ -0,0 +1,26 @@
+{{page-title "ember-events-modifier Demo"}}
+<div class="fixed z-10 inset-0 overflow-y-auto" {{on-event "hasClicked" (fn (mut this.hasClicked) true)}}>
+    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <div
+            class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+        >
+            <div class="flex flex-col justify-center space-y-3">
+                <ValueControls />
+                <ValueDisplay />
+                {{#if this.hasClicked}}
+                    <div class="flex-col flex space-y-2 items-center">
+                        <div class="text-red-500 font-2xl">You clicked the button!</div>
+                        <button
+                            type="button"
+                            class="bg-purple-600 text-white p-1 border-purple-700 border rounded text:md"
+                            {{on "click" this.resetValue}}
+                        >
+                            Reset Value
+                        </button>
+                    </div>
+                {{/if}}
+            </div>
+        </div>
+    </div>
+</div>

tests/dummy/app/templates/index.hbs

@@ -5,7 +5,7 @@ module.exports = function (environment) {
         modulePrefix: 'dummy',
         environment,
         rootURL: '/',
-        locationType: 'auto',
+        locationType: 'history',
         EmberENV: {
             FEATURES: {
                 // Here you can enable experimental features on an ember canary build