feat: pass CustomEvent directly

Author: arnoson

src/mountComponent.ts

@@ -3,16 +3,6 @@ import { getRefs } from './refs'
 import { getComponent } from './registerComponent'
 import { SimpleComponentEvent, SimpleElement } from './types'
 
-/**
- * Just a little syntactic sugar for `CustomEvent`. Passed to the component's
- * context as the fully typed `ComponentEvent`.
- * */
-export class CustomEventFactory {
-  constructor(name: string, detail?: any) {
-    return new CustomEvent(name, { detail })
-  }
-}
-
 const mountChildComponents = (el: HTMLElement) => {
   const elements = el.querySelectorAll<HTMLElement>('[data-simple-component]')
   for (let i = 0; i < elements.length; i++) {
@@ -35,7 +25,7 @@ export const mountComponent = (el: HTMLElement, isChild = false) => {
       : el.dataset
 
     const { refs, refsAll } = getRefs(el)
-    const ComponentEvent = CustomEventFactory as SimpleComponentEvent
+    const ComponentEvent = CustomEvent as SimpleComponentEvent
     const ctx = { el, props, refs, refsAll, ComponentEvent }
 
     simpleEl.$props = props

src/types.ts

@@ -1,3 +1,7 @@
+interface CustomEventInitRequired<T = any> extends CustomEventInit {
+  detail: T
+}
+
 type HTMLElementConstructor = typeof HTMLElement
 
 type HTMLElementType<T extends HTMLElementConstructor> = T['prototype']
@@ -72,12 +76,14 @@ export type SimpleEventMap<Definitions> = {
     : CustomEvent<Definitions[K]>
 }
 
-export type SimpleComponentEvent<
+export interface SimpleComponentEvent<
   Events extends Record<string, CustomEvent> = any
-> = {
-  new <K extends keyof Events, Detail = Events[K]['detail']>(
+> extends CustomEvent {
+  new <K extends keyof Events>(
     name: string,
-    ...args: Detail extends undefined | null ? [] : [detail: Detail]
+    ...args: Events[K]['detail'] extends undefined | null
+      ? [eventInitDict?: CustomEventInit]
+      : [eventInitDict: CustomEventInitRequired<Events[K]['detail']>]
   ): Events[K]
 }
 

tests/index.test.ts

@@ -5,7 +5,6 @@ import {
   registerComponent,
   SimpleElement
 } from '../src'
-import { CustomEventFactory } from '../src/mountComponent'
 
 it('mounts a component', () => {
   const setup = vi.fn()
@@ -20,7 +19,7 @@ it('mounts a component', () => {
     refs: {},
     refsAll: {},
     props: div.dataset,
-    ComponentEvent: CustomEventFactory
+    ComponentEvent: CustomEvent
   })
 })