chore: support handling multiple events with on-event modifier

Author: Tom Zellman

.npmignore

@@ -22,6 +22,7 @@
 /.prettierignore
 /.prettierrc
 /.template-lintrc.js
+/.tool-versions
 /.watchmanconfig
 /bower.json
 /CONTRIBUTING.md

addon/modifiers/on-event.js

@@ -7,27 +7,30 @@ import Modifier from 'ember-modifier';
 const modifierName = 'on-event';
 
 const cleanup = (instance) => {
-    const { eventName, events } = instance;
-    if (eventName) {
+    const { eventNames, events } = instance;
+    for (const eventName of eventNames ?? []) {
         events.off(eventName, instance, instance._handler);
     }
 };
 
 export default class OnEventModifier extends Modifier {
     @service events;
-    @tracked eventName;
+    @tracked eventNames;
     @tracked handler;
 
     modify(element, positionalArgs) {
         assert(`You must provide at least 2 arguments for {{${modifierName}}}`, positionalArgs.length > 1);
-        const [eventName, handler] = positionalArgs;
+        const [eventNameOrNames, handler] = positionalArgs;
+        const eventNames = Array.isArray(eventNameOrNames) ? eventNameOrNames : [eventNameOrNames];
         assert(
-            `You must provide a string as the first positional argument for {{${modifierName}}}`,
-            typeof eventName === 'string' && eventName.length > 0
+            `You must provide a string or array of strings as the first positional argument for {{${modifierName}}}`,
+            eventNames.every((eventName) => typeof eventName === 'string' && eventName.length > 0)
         );
-        this.eventName = eventName;
+        this.eventNames = eventNames;
         this.handler = handler;
-        this.events.on(this.eventName, this, this._handler);
+        for (const eventName of this.eventNames) {
+            this.events.on(eventName, this, this._handler);
+        }
         registerDestructor(this, cleanup);
     }
 

tests/dummy/app/controllers/index.js

@@ -2,14 +2,25 @@ import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import { TrackedArray } from 'tracked-built-ins';
 
 export default class IndexController extends Controller {
     @service events;
     @tracked hasClicked = false;
+    handledEvents = new TrackedArray([]);
 
     @action
     resetValue() {
         this.hasClicked = false;
         this.events.trigger('valueReset');
     }
+
+    @action
+    trackEvent(...args) {
+        if (args.length) {
+            this.handledEvents.push(`Set value to ${args[0]}`);
+        } else {
+            this.handledEvents.push(`Reset value`);
+        }
+    }
 }

tests/dummy/app/templates/index.hbs

@@ -21,6 +21,12 @@
                     </div>
                 {{/if}}
             </div>
+            <ul class="text-xs" {{on-event (array "valueSet" "valueReset") this.trackEvent}}>
+                {{#each this.handledEvents as |event|}}
+                    <li>{{event}}</li>
+                {{/each}}
+            </ul>
         </div>
     </div>
+
 </div>

tests/integration/modifiers/on-event-test.js

@@ -25,4 +25,17 @@ module('Integration | Modifier | on-event', function (hooks) {
         const service = this.owner.lookup('service:events');
         service.trigger('foo', 'link', 'zelda', 'ganon');
     });
+
+    test('handle multiple events', async function (assert) {
+        assert.expect(4);
+        this.set('handleEvent', (...args) => {
+            assert.strictEqual(args.length, 3);
+            assert.deepEqual(args, ['link', 'zelda', 'ganon']);
+        });
+        await render(hbs`<div {{on-event (array "foo" "bar") this.handleEvent}}></div>`);
+        const service = this.owner.lookup('service:events');
+        service.trigger('foo', 'link', 'zelda', 'ganon');
+        service.trigger('bar', 'link', 'zelda', 'ganon');
+        service.trigger('baz', 'link', 'zelda', 'ganon');
+    });
 });