Merge pull request #665 from smapiot/fix/#644

Bind `this` In Pilet API Event Functions

src/framework/piral-base/src/api.test.ts

@@ -1,5 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
 import { describe, it, expect, vitest } from 'vitest';
 import { initializeApi, mergeApis } from './api';
+import { createListener } from './events';
 
 const moduleMetadata = {
   name: 'my-module',
@@ -14,6 +18,7 @@ describe('API Module', () => {
     const container = {
       on: vitest.fn(),
       off: vitest.fn(),
+      once: vitest.fn(),
       emit: vitest.fn(),
     };
     const api = initializeApi(moduleMetadata, container);
@@ -28,11 +33,32 @@ describe('API Module', () => {
     const baseApi: any = {
       a: 'foo',
     };
-    const newApi = mergeApis(baseApi, [() => ({ b: 'bar' }) as any], {} as any);
+    const newApi = mergeApis(baseApi, [() => ({ b: 'bar' } as any)], {} as any);
     expect(newApi).toEqual({
       a: 'foo',
       b: 'bar',
     });
     expect(newApi).toBe(baseApi);
   });
+
+  it('calling event APIs without this context does not throw', () => {
+    // This test case covers GH issue #664: https://github.com/smapiot/piral/issues/664
+    const events = createListener(undefined);
+    const api = initializeApi(moduleMetadata, events);
+
+    // These calls should not throw:
+    const { on, off, once, emit } = api;
+    on('foo', () => {});
+    off('foo', () => {});
+    once('foo', () => {});
+    emit('foo', {});
+
+    // Chaining should also work as each event fn returns this (i.e., the event emitter):
+    expect(
+      on('foo', () => {})
+        .off('foo', () => {})
+        .once('foo', () => {})
+        .emit('foo', {}),
+    ).not.toBeUndefined();
+  });
 });

src/framework/piral-base/src/events.ts

@@ -15,19 +15,19 @@ function nameOf(type: string | number) {
 export function createListener(state: any = {}): EventEmitter {
   const eventListeners: EventListeners = [];
 
-  return {
+  const events = {
     on(type, callback) {
       const listener = ({ detail }: CustomEvent) => detail && detail.state === state && callback(detail.arg);
       document.body.addEventListener(nameOf(type), listener);
       eventListeners.push([callback, listener]);
-      return this;
+      return events;
     },
     once(type, callback) {
       const cb = (ev: any) => {
-        this.off(type, cb);
+        events.off(type, cb);
         callback(ev);
       };
-      return this.on(type, cb);
+      return events.on(type, cb);
     },
     off(type, callback) {
       const [listener] = eventListeners.filter((m) => m[0] === callback);
@@ -37,7 +37,7 @@ export function createListener(state: any = {}): EventEmitter {
         eventListeners.splice(eventListeners.indexOf(listener), 1);
       }
 
-      return this;
+      return events;
     },
     emit(type, arg) {
       document.body.dispatchEvent(
@@ -50,7 +50,9 @@ export function createListener(state: any = {}): EventEmitter {
           },
         }),
       );
-      return this;
+      return events;
     },
   };
+
+  return events;
 }