Support multiple arguments in event listeners (#598)

Author: igor10k

.changeset/rare-toys-develop.md

@@ -0,0 +1,5 @@
+---
+'@remote-dom/core': minor
+---
+
+Add support for multiple arguments in event listners

packages/core/source/elements/RemoteElement.ts

@@ -884,11 +884,11 @@ function getRemoteEventRecord(
       property,
       definition,
       listeners: new Set(),
-      dispatch: (arg: any) => {
+      dispatch: (...args: any[]) => {
         const event =
-          definition?.dispatchEvent?.call(this, arg) ??
+          definition?.dispatchEvent?.apply(this, args) ??
           new RemoteEvent(type, {
-            detail: arg,
+            detail: args[0],
             bubbles: definition?.bubbles,
           });
 

packages/core/source/elements/types.ts

@@ -9,7 +9,7 @@ export interface RemoteElementAttributeDefinition {}
 export interface RemoteElementEventListenerDefinition {
   bubbles?: boolean;
   property?: boolean | string;
-  dispatchEvent?(this: Element, arg: any): Event | undefined | void;
+  dispatchEvent?(this: Element, ...args: any[]): Event | undefined | void;
 }
 
 /**

packages/core/source/tests/elements.test.ts

@@ -991,6 +991,60 @@ describe('RemoteElement', () => {
       );
     });
 
+    it('passes all arguments to a custom event provided by a `dispatchEvent()` event listener description', async () => {
+      class CustomRemoteEvent extends RemoteEvent {}
+
+      const dispatchListener = vi.fn();
+
+      const ButtonElement = createRemoteElement({
+        events: {
+          press: {
+            dispatchEvent(...args: any[]) {
+              dispatchListener(this, ...args);
+
+              return new CustomRemoteEvent('press', {
+                detail: args,
+              });
+            },
+          },
+        },
+      });
+
+      const {element, receiver} = createAndConnectRemoteElement(ButtonElement);
+
+      const listener = vi.fn();
+
+      element.addEventListener('press', listener);
+
+      expect(receiver.connection.mutate).toHaveBeenLastCalledWith([
+        [
+          MUTATION_TYPE_UPDATE_PROPERTY,
+          remoteId(element),
+          'press',
+          expect.any(Function),
+          UPDATE_PROPERTY_TYPE_EVENT_LISTENER,
+        ],
+      ]);
+
+      const dispatchFunction = receiver.get<RemoteReceiverElement>({
+        id: remoteId(element),
+      })?.eventListeners.press;
+      await dispatchFunction?.('Hello', 'world', '!');
+
+      expect(dispatchListener).toHaveBeenCalledWith(
+        element,
+        'Hello',
+        'world',
+        '!',
+      );
+      expect(listener).toHaveBeenCalledWith(expect.any(CustomRemoteEvent));
+      expect(listener).toHaveBeenCalledWith(
+        expect.objectContaining({
+          detail: ['Hello', 'world', '!'],
+        }),
+      );
+    });
+
     it('removes an event listener when the last event listener is removed', () => {
       const ButtonElement = createRemoteElement({
         events: ['press'],