Added support for custom eventTarget

Author: AlemTuzlak

.changeset/flat-chefs-double.md

@@ -2,4 +2,6 @@
 "@forge42/web-events": patch
 ---
 
-Added support for custom event target
+Added support for custom event target in the `registerReactEvent` function.
+
+Made the registered events more performant by reusing the same event target for all events.

README.md

@@ -89,6 +89,18 @@ const unsubscribe = listener((data) => {
 unsubscribe()
 ```
 
+You can also pass in a third optional parameter to the `registerEvent` function to specify the event init options, such as `bubbles`, `cancelable`, or `composed`. This allows you to control the behavior of the event in the DOM.
+
+It also takes in an optional property `emitter` which can be used to specify the `EventTarget` that will emit the event. This is useful if you want to use a custom event target instead of the default one.
+
+```ts
+const [dispatch, listener] = registerEvent("user:logged-in", UserLoggedIn, {
+	bubbles: true,
+	composed: true,
+	emitter: document // or any other EventTarget
+})
+```
+
 ### React
 
 You can also use `@forge42/web-events` in a React application. It comes with a React specific API that allows you to register and listen to events in a more React-friendly way.

packages/web-events/README.md

@@ -89,6 +89,18 @@ const unsubscribe = listener((data) => {
 unsubscribe()
 ```
 
+You can also pass in a third optional parameter to the `registerEvent` function to specify the event init options, such as `bubbles`, `cancelable`, or `composed`. This allows you to control the behavior of the event in the DOM.
+
+It also takes in an optional property `emitter` which can be used to specify the `EventTarget` that will emit the event. This is useful if you want to use a custom event target instead of the default one.
+
+```ts
+const [dispatch, listener] = registerEvent("user:logged-in", UserLoggedIn, {
+	bubbles: true,
+	composed: true,
+	emitter: document // or any other EventTarget
+})
+```
+
 ### React
 
 You can also use `@forge42/web-events` in a React application. It comes with a React specific API that allows you to register and listen to events in a more React-friendly way.

packages/web-events/src/index.ts

@@ -3,12 +3,18 @@ import { standardValidate } from "./validate"
 
 export type EventCallback<T extends StandardSchemaV1> = (data: StandardSchemaV1.InferOutput<T>) => void
 
-export const registerEvent = <T extends StandardSchemaV1>(name: string, schema: T, eventInit?: CustomEventInit) => {
-	const emitter = new EventTarget()
+const defaultEmitter = new EventTarget()
+
+export interface ExtendedEventEmit extends EventInit {
+	emitter?: EventTarget
+}
+
+export const registerEvent = <T extends StandardSchemaV1>(name: string, schema: T, eventInit?: ExtendedEventEmit) => {
+	const { emitter = defaultEmitter, ...rest } = eventInit || {}
 	const dispatch = async (data: StandardSchemaV1.InferInput<typeof schema>) => {
 		const result = await standardValidate<T>(schema, data)
 		const event = new CustomEvent(name, {
-			...eventInit,
+			...rest,
 			detail: result,
 		})
 		emitter.dispatchEvent(event)

packages/web-events/src/react.ts

@@ -1,8 +1,12 @@
 import type { StandardSchemaV1 } from "@standard-schema/spec"
 import { useEffect, useState } from "react"
-import { type EventCallback, registerEvent } from "."
+import { type EventCallback, type ExtendedEventEmit, registerEvent } from "."
 
-export const registerReactEvent = <T extends StandardSchemaV1>(name: string, schema: T, eventInit?: EventInit) => {
+export const registerReactEvent = <T extends StandardSchemaV1>(
+	name: string,
+	schema: T,
+	eventInit?: ExtendedEventEmit
+) => {
 	const [dispatch, listener] = registerEvent(name, schema, eventInit)
 
 	const useEventListener = (args?: { onEvent?: EventCallback<T> }) => {