Use CustomEvent for PubSub and TypedEventTarget impl (#1761)

* Use CustomEvent for PubSub and TypedEventTarget impl

* :sweaty_face:

* chore(dependencies): updated changesets for modified dependencies

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: ardatan

.changeset/@graphql-yoga_redis-event-target-1761-dependencies.md

@@ -0,0 +1,7 @@
+---
+"@graphql-yoga/redis-event-target": patch
+---
+
+dependencies updates: 
+
+- Added dependency [`@whatwg-node/[email protected]` ↗︎](https://www.npmjs.com/package/@whatwg-node/events/v/0.0.1) (to `dependencies`)

.changeset/@graphql-yoga_subscription-1761-dependencies.md

@@ -0,0 +1,7 @@
+---
+"@graphql-yoga/subscription": patch
+---
+
+dependencies updates: 
+
+- Added dependency [`@whatwg-node/[email protected]` ↗︎](https://www.npmjs.com/package/@whatwg-node/events/v/0.0.1) (to `dependencies`)

.changeset/sour-apricots-move.md

@@ -0,0 +1,10 @@
+---
+'@graphql-yoga/redis-event-target': major
+'@graphql-yoga/typed-event-target': major
+'@graphql-yoga/subscription': major
+---
+
+Breaking changes;
+
+- Drop `TypedEvent` in favor of [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)
+- Use `@whatwg-node/events` as a ponyfill instead of `@whatwg-node/fetch`

packages/event-target/redis-event-target/__tests__/redis-event-target.spec.ts

@@ -1,7 +1,6 @@
-import type { TypedEvent } from '@graphql-yoga/typed-event-target'
 import Redis from 'ioredis-mock'
 import { createRedisEventTarget } from '../src'
-import { Event, EventTarget } from '@whatwg-node/fetch'
+import { CustomEvent } from '@whatwg-node/events'
 
 describe('createRedisEventTarget', () => {
   it('can listen to a simple publish', (done) => {
@@ -10,16 +9,19 @@ describe('createRedisEventTarget', () => {
       subscribeClient: new Redis({}),
     })
 
-    eventTarget.addEventListener('a', (event: TypedEvent) => {
+    eventTarget.addEventListener('a', (event: CustomEvent) => {
       expect(event.type).toEqual('a')
-      expect(event.data).toEqual({
+      expect(event.detail).toEqual({
         hi: 1,
       })
       done()
     })
 
-    const event = new Event('a') as TypedEvent
-    event.data = { hi: 1 }
+    const event = new CustomEvent('a', {
+      detail: {
+        hi: 1,
+      },
+    })
     eventTarget.dispatchEvent(event)
   })
 
@@ -29,19 +31,22 @@ describe('createRedisEventTarget', () => {
       subscribeClient: new Redis({}),
     })
 
-    eventTarget.addEventListener('a', (_event: TypedEvent) => {
+    eventTarget.addEventListener('a', (_event: CustomEvent) => {
       done(new Error('This should not be invoked'))
     })
-    eventTarget.addEventListener('b', (event: TypedEvent) => {
+    eventTarget.addEventListener('b', (event: CustomEvent) => {
       expect(event.type).toEqual('b')
-      expect(event.data).toEqual({
+      expect(event.detail).toEqual({
         hi: 1,
       })
       done()
     })
 
-    const event = new Event('b') as TypedEvent
-    event.data = { hi: 1 }
+    const event = new CustomEvent('b', {
+      detail: {
+        hi: 1,
+      },
+    })
     eventTarget.dispatchEvent(event)
   })
   it('distributes the event to all event listeners', (done) => {
@@ -51,15 +56,18 @@ describe('createRedisEventTarget', () => {
     })
 
     let counter = 0
-    eventTarget.addEventListener('b', (_event: TypedEvent) => {
+    eventTarget.addEventListener('b', (_event: CustomEvent) => {
       counter++
     })
-    eventTarget.addEventListener('b', (_event: TypedEvent) => {
+    eventTarget.addEventListener('b', (_event: CustomEvent) => {
       counter++
     })
 
-    const event = new Event('b') as TypedEvent
-    event.data = { hi: 1 }
+    const event = new CustomEvent('b', {
+      detail: {
+        hi: 1,
+      },
+    })
     eventTarget.dispatchEvent(event)
 
     setImmediate(() => {

packages/event-target/redis-event-target/package.json

@@ -19,14 +19,14 @@
   "author": "Laurin Quast <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "@whatwg-node/events": "0.0.1",
     "@graphql-yoga/typed-event-target": "^0.1.1"
   },
   "peerDependencies": {
     "ioredis": "^5.0.6"
   },
   "devDependencies": {
     "@types/ioredis-mock": "5.6.0",
-    "event-target-polyfill": "0.0.3",
     "ioredis": "5.2.3",
     "ioredis-mock": "8.2.2"
   },

packages/event-target/redis-event-target/src/index.ts

@@ -1,13 +1,13 @@
 import type { TypedEventTarget } from '@graphql-yoga/typed-event-target'
-import { Event } from '@whatwg-node/fetch'
+import { CustomEvent } from '@whatwg-node/events'
 import type { Redis, Cluster } from 'ioredis'
 
 export type CreateRedisEventTargetArgs = {
   publishClient: Redis | Cluster
   subscribeClient: Redis | Cluster
 }
 
-export function createRedisEventTarget<TEvent extends Event>(
+export function createRedisEventTarget<TEvent extends CustomEvent>(
   args: CreateRedisEventTargetArgs,
 ): TypedEventTarget<TEvent> {
   const { publishClient, subscribeClient } = args
@@ -19,10 +19,10 @@ export function createRedisEventTarget<TEvent extends Event>(
     if (callbacks === undefined) {
       return
     }
-    const event = new Event(channel) as TEvent & {
-      data: unknown
-    }
-    event.data = message === '' ? undefined : JSON.parse(message)
+
+    const event = new CustomEvent(channel, {
+      detail: message === '' ? undefined : JSON.parse(message),
+    }) as TEvent
     for (const callback of callbacks) {
       callback(event)
     }
@@ -56,27 +56,29 @@ export function createRedisEventTarget<TEvent extends Event>(
 
   return {
     addEventListener(topic, callbackOrOptions) {
-      const callback =
-        'handleEvent' in callbackOrOptions
-          ? callbackOrOptions.handleEvent
-          : callbackOrOptions
-      addCallback(topic, callback)
+      if (callbackOrOptions != null) {
+        const callback =
+          'handleEvent' in callbackOrOptions
+            ? callbackOrOptions.handleEvent
+            : callbackOrOptions
+        addCallback(topic, callback)
+      }
     },
     dispatchEvent(event: TEvent) {
       publishClient.publish(
         event.type,
-        (event as any).data === undefined
-          ? ''
-          : JSON.stringify((event as any).data),
+        event.detail === undefined ? '' : JSON.stringify(event.detail),
       )
       return true
     },
     removeEventListener(topic, callbackOrOptions) {
-      const callback =
-        'handleEvent' in callbackOrOptions
-          ? callbackOrOptions.handleEvent
-          : callbackOrOptions
-      removeCallback(topic, callback)
+      if (callbackOrOptions != null) {
+        const callback =
+          'handleEvent' in callbackOrOptions
+            ? callbackOrOptions.handleEvent
+            : callbackOrOptions
+        removeCallback(topic, callback)
+      }
     },
   }
 }

packages/event-target/typed-event-target/src/index.ts

@@ -1,31 +1,26 @@
-export type TypedEvent = Event & {
-  data?: unknown
-}
-
-export interface TypedEventListener<TEvent extends TypedEvent>
-  extends EventListener {
+export interface TypedEventListener<TEvent extends CustomEvent> {
   (evt: TEvent): void
 }
 
-export interface TypedEventListenerObject<TEvent extends TypedEvent>
-  extends EventListener {
+export interface TypedEventListenerObject<TEvent extends CustomEvent> {
   handleEvent(object: TEvent): void
 }
 
-export type TypedEventListenerOrEventListenerObject<TEvent extends TypedEvent> =
-  TypedEventListener<TEvent> | TypedEventListenerObject<TEvent>
+export type TypedEventListenerOrEventListenerObject<
+  TEvent extends CustomEvent,
+> = TypedEventListener<TEvent> | TypedEventListenerObject<TEvent>
 
-export interface TypedEventTarget<TEvent extends TypedEvent>
+export interface TypedEventTarget<TEvent extends CustomEvent>
   extends EventTarget {
   addEventListener(
     type: string,
-    callback: TypedEventListenerOrEventListenerObject<TEvent>,
+    callback: TypedEventListenerOrEventListenerObject<TEvent> | null,
     options?: AddEventListenerOptions | boolean,
   ): void
   dispatchEvent(event: TEvent): boolean
   removeEventListener(
     type: string,
-    callback: TypedEventListenerOrEventListenerObject<TEvent>,
+    callback: TypedEventListenerOrEventListenerObject<TEvent> | null,
     options?: EventListenerOptions | boolean,
   ): void
 }

packages/subscription/package.json

@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "@graphql-yoga/typed-event-target": "^0.1.1",
+    "@whatwg-node/events": "0.0.1",
     "@repeaterjs/repeater": "^3.0.4",
     "tslib": "^2.3.1"
   },

packages/subscription/src/createPubSub.ts

@@ -1,6 +1,6 @@
 import { Repeater } from '@repeaterjs/repeater'
 import type { TypedEventTarget } from '@graphql-yoga/typed-event-target'
-import { Event, EventTarget } from '@whatwg-node/fetch'
+import { CustomEvent, EventTarget } from '@whatwg-node/events'
 
 type PubSubPublishArgsByKey = {
   [key: string]: [] | [any] | [number | string, any]
@@ -9,11 +9,11 @@ type PubSubPublishArgsByKey = {
 export type PubSubEvent<
   TPubSubPublishArgsByKey extends PubSubPublishArgsByKey,
   TKey extends Extract<keyof TPubSubPublishArgsByKey, string>,
-> = Event & {
-  data?: TPubSubPublishArgsByKey[TKey][1] extends undefined
+> = CustomEvent<
+  TPubSubPublishArgsByKey[TKey][1] extends undefined
     ? TPubSubPublishArgsByKey[TKey][0]
     : TPubSubPublishArgsByKey[TKey][1]
-}
+>
 
 export type PubSubEventTarget<
   TPubSubPublishArgsByKey extends PubSubPublishArgsByKey,
@@ -66,7 +66,9 @@ export const createPubSub = <
 >(
   config?: ChannelPubSubConfig<TPubSubPublishArgsByKey>,
 ): PubSub<TPubSubPublishArgsByKey> => {
-  const target = config?.eventTarget ?? new EventTarget()
+  const target =
+    config?.eventTarget ??
+    (new EventTarget() as PubSubEventTarget<TPubSubPublishArgsByKey>)
 
   return {
     publish<TKey extends Extract<keyof TPubSubPublishArgsByKey, string>>(
@@ -79,8 +81,12 @@ export const createPubSub = <
           ? routingKey
           : `${routingKey}:${args[0] as number}`
 
-      const event: PubSubEvent<TPubSubPublishArgsByKey, TKey> = new Event(topic)
-      event.data = payload
+      const event: PubSubEvent<TPubSubPublishArgsByKey, TKey> = new CustomEvent(
+        topic,
+        {
+          detail: payload,
+        },
+      )
       target.dispatchEvent(event)
     },
     subscribe<TKey extends Extract<keyof TPubSubPublishArgsByKey, string>>(
@@ -105,7 +111,7 @@ export const createPubSub = <
         function pubsubEventListener(
           event: PubSubEvent<TPubSubPublishArgsByKey, TKey>,
         ) {
-          next(event.data)
+          next(event.detail)
         }
       })
     },

website/src/pages/v3/features/subscriptions.mdx

@@ -405,7 +405,7 @@ The `createPubSub` function allows you to specify a custom [`EventTarget`](https
 
 The minimal `EventTarget` implementation is described by the [`TypedEventTarget` interface](https://github.com/dotansimha/graphql-yoga/blob/master/packages/event-target/typed-event-target/src/typed-event-target.ts).
 
-Yoga comes with an `EventTarget` implementation for [Redis Pub/Sub](https://redis.io/docs/manual/pubsub/).import { PackageCmd } from '@theguild/components';
+Yoga comes with an `EventTarget` implementation for [Redis Pub/Sub](https://redis.io/docs/manual/pubsub/).
 
 <PackageCmd packages={['@graphql-yoga/redis-event-target ioredis']} />