feat(fireEvent)!: add fireEvent to parent-class

src/index.ts

@@ -1,7 +1,7 @@
 import { effect, Signal, signal } from "@preact/signals-core";
 import { reconcile } from "./reconciler/index";
 import { ShadowCache } from "./reconciler/utils";
-import type { CustomEvents, PropertyDescriptor, ShadowElement } from "./types";
+import type { PropertyDescriptor, ShadowElement } from "./types";
 import { parentsCacheSymbol, active } from "./utils";
 
 export type { ShadowElement, PropertyDescriptor } from "./types";
@@ -115,22 +115,6 @@ export function findParent<T = Element>(
   return result;
 }
 
-export function dispatchEvent<T extends HTMLElement, U extends keyof CustomEvents<T>>(
-  target: T,
-  eventName: U,
-  customEventInit: CustomEventInit<CustomEvents<T>[U]>,
-): Promise<unknown>[] {
-  const previousEventPromises = active.eventPromises;
-  const eventPromises: Promise<unknown>[] = [];
-  active.eventPromises = eventPromises;
-  const customEvent = new CustomEvent(eventName as string, customEventInit);
-  target.dispatchEvent(customEvent);
-
-  active.eventPromises = previousEventPromises;
-
-  return eventPromises;
-}
-
 export function prop<T>(): () => PropertyDescriptor<T> {
   return () => {
     const signalValue = signal<T>() as Signal<T>;

src/utils.ts

@@ -1,6 +1,7 @@
 import { batch, effect, untracked } from "@preact/signals-core";
 import { ShadowCache } from "./reconciler/utils";
 import type {
+  CustomEvents,
   ForbiddenHTMLProperties,
   PropertyDescriptor,
   PropertyDescriptorType,
@@ -61,7 +62,13 @@ interface IComponent extends HTMLElement {
 
 export function WebComponent<T extends { [key: string]: () => PropertyDescriptor<any> } = {}>(
   props?: T,
-): abstract new (props: PropType<T> & BasePropsType) => PropType<T> & IComponent {
+): abstract new (props: PropType<T> & BasePropsType) => PropType<T> &
+  IComponent & {
+    fireEvent<E extends keyof CustomEvents<PropType<T>>>(
+      eventName: E,
+      customEventInit: CustomEventInit<CustomEvents<PropType<T>>[E]>,
+    ): Promise<unknown>[];
+  } {
   abstract class Component extends HTMLElement implements IComponent {
     constructor(_props: PropType<T> & BasePropsType) {
       super();
@@ -130,6 +137,18 @@ export function WebComponent<T extends { [key: string]: () => PropertyDescriptor
       }
     }
 
+    fireEvent(eventName: string, customEventInit: CustomEventInit<any>) {
+      const previousEventPromises = active.eventPromises;
+      const eventPromises: Promise<unknown>[] = [];
+      active.eventPromises = eventPromises;
+      const customEvent = new CustomEvent(eventName as string, customEventInit);
+      this.dispatchEvent(customEvent);
+
+      active.eventPromises = previousEventPromises;
+
+      return eventPromises;
+    }
+
     addEventListener(
       eventName: string,
       listener: (event: Event) => unknown,

test/async.test.tsx

@@ -1,12 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import {
-  createComponent,
-  mount,
-  dispatchEvent,
-  WebComponent,
-  prop,
-  define,
-} from "@plusnew/webcomponent";
+import { mount, WebComponent, prop, define } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -34,7 +27,7 @@ describe("webcomponent", () => {
             onclick={async () => {
               this.#loading.value = true;
               try {
-                await Promise.all(dispatchEvent(this, "foo", { detail: null }));
+                await Promise.all(this.fireEvent("foo", { detail: null }));
               } catch (_err) {}
               this.#loading.value = false;
             }}

test/events.test.tsx

@@ -1,12 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import {
-  createComponent,
-  define,
-  dispatchEvent,
-  mount,
-  prop,
-  WebComponent,
-} from "@plusnew/webcomponent";
+import { define, mount, prop, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -38,9 +31,11 @@ describe("webcomponent", () => {
     }
 
     @define("test-nested")
-    class NestedComponent extends WebComponent({ onfoo: prop<(evt: CustomEvent) => void>() }) {
+    class NestedComponent extends WebComponent({
+      onfoo: prop<(evt: CustomEvent<string>) => void>(),
+    }) {
       render(this: NestedComponent) {
-        return <button onclick={() => dispatchEvent(this, "foo", { detail: "mep" })} />;
+        return <button onclick={() => this.fireEvent("foo", { detail: "mep" })} />;
       }
     }
 
@@ -87,7 +82,7 @@ describe("webcomponent", () => {
     }) {
       render(this: NestedComponent) {
         const derefence = (value: number) => (
-          <button onclick={() => dispatchEvent(this, "foo", { detail: value + 1 })}>
+          <button onclick={() => this.fireEvent("foo", { detail: value + 1 })}>
             {value.toString()}
           </button>
         );