Typesafe CustomEvents on your Frontend - StrictCustomEvent proxy

strictCustomEvent.ts

export const strictCustomEvent = <
  T extends keyof Omit<DocumentEventMap, defaultDocumentEventNames>,
  D extends UnpackCustomEventPayload<DocumentEventMap[T]>
>(
  name: T,
  payload: Omit<CustomEventInit<D>, "detail"> & {
    detail: D
  }
): CustomEvent<D> => new CustomEvent(name, payload)

/**
 * Extracts the detail type from a custom event type
 */
type UnpackCustomEventPayload<T> = T extends CustomEvent<infer U> ? U : never

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>

type defaultDocumentEventNames = 
 | "animationcancel" 
 | "animationend" 
 | ... // all keys from plain `DocumentEventMap` type