feat(async-event-listener): add capability to listen to async-events

Author: plusgut

src/index.ts

@@ -7,7 +7,7 @@ import type {
   ReadonlyKeys,
   ShadowElement,
 } from "./types";
-import { dispatchError } from "./utils";
+import { dispatchError, PlusnewAsyncEvent, PlusnewErrorEvent } from "./utils";
 
 export type { ShadowElement } from "./types";
 
@@ -99,8 +99,8 @@ export function createComponent<
         }
     > & {
       children?: ShadowElement;
-      onplusnewerror?: (evt: CustomEvent<unknown>) => void;
-      onplusnewasyncevent?: (evt: CustomEvent<Promise<unknown>>) => void;
+      onplusnewerror?: (evt: PlusnewErrorEvent) => void;
+      onplusnewasyncevent?: (evt: PlusnewAsyncEvent) => void;
     },
   ): T;
 } {

src/reconciler/host.ts

@@ -91,7 +91,11 @@ export const hostReconcile: Reconciler = (opt) => {
                 }
 
                 if (result instanceof Promise) {
-                  dispatchAsyncEvent(opt.shadowCache.node as Element, result);
+                  dispatchAsyncEvent(
+                    opt.shadowCache.node as Element,
+                    evt,
+                    result,
+                  );
                   if (active.eventPromises !== null) {
                     active.eventPromises.push(result);
                   }

src/types.ts

@@ -1,3 +1,5 @@
+import type { PlusnewAsyncEvent, PlusnewErrorEvent } from "./utils";
+
 export const PLUSNEW_ELEMENT_TYPE = Symbol("plusnew-element-type");
 
 export function Fragment(props: { children: ShadowElement }) {
@@ -79,22 +81,22 @@ export namespace JSX {
       HTMLElementTagNameMap[Tag]
     > & {
       children?: ShadowElement;
-      onplusnewerror?: (evt: CustomEvent<unknown>) => void;
-      onplusnewasyncevent?: (evt: CustomEvent<Promise<unknown>>) => void;
+      onplusnewerror?: (evt: PlusnewErrorEvent) => void;
+      onplusnewasyncevent?: (evt: PlusnewAsyncEvent) => void;
     };
   } & {
     [Tag in keyof SVGElementTagNameMap]: IntrinsicElementAttributes<
       SVGElementTagNameMap[Tag]
     > & {
       children?: ShadowElement;
-      onplusnewerror?: (evt: CustomEvent<unknown>) => void;
-      onplusnewasyncevent?: (evt: CustomEvent<Promise<unknown>>) => void;
+      onplusnewerror?: (evt: PlusnewErrorEvent) => void;
+      onplusnewasyncevent?: (evt: PlusnewAsyncEvent) => void;
     };
   };
 
   export interface IntrinsicAttributes {
-    onplusnewerror?: () => void;
-    onplusnewasyncevent?: (evt: CustomEvent<Promise<unknown>>) => void;
+    onplusnewerror?: (evt: PlusnewErrorEvent) => void;
+    onplusnewasyncevent?: (evt: PlusnewAsyncEvent) => void;
   }
 }
 

src/utils.ts

@@ -1,15 +1,33 @@
 const ERROR = "plusnewerror";
 const ASYNC_EVENT = "plusnewasyncevent";
 
-export function dispatchError(element: Element, error: unknown) {
-  const result = element.dispatchEvent(
-    new CustomEvent(ERROR, {
+export class PlusnewErrorEvent extends CustomEvent<unknown> {
+  constructor(error: unknown) {
+    super(ERROR, {
       detail: error,
       cancelable: true,
       bubbles: true,
       composed: true,
-    }),
-  );
+    });
+  }
+}
+
+export class PlusnewAsyncEvent extends CustomEvent<{
+  promise: Promise<unknown>;
+  cause: Event;
+}> {
+  constructor(originalEvent: Event, promise: Promise<unknown>) {
+    super(ASYNC_EVENT, {
+      detail: { promise, cause: originalEvent },
+      cancelable: true,
+      bubbles: true,
+      composed: true,
+    });
+  }
+}
+
+export function dispatchError(element: Element, error: unknown) {
+  const result = element.dispatchEvent(new PlusnewErrorEvent(error));
 
   if (result === true) {
     throw error;
@@ -18,14 +36,8 @@ export function dispatchError(element: Element, error: unknown) {
 
 export function dispatchAsyncEvent(
   element: Element,
+  originalEvent: Event,
   promise: Promise<unknown>,
 ) {
-  element.dispatchEvent(
-    new CustomEvent(ASYNC_EVENT, {
-      detail: promise,
-      cancelable: true,
-      bubbles: true,
-      composed: true,
-    }),
-  );
+  element.dispatchEvent(new PlusnewAsyncEvent(originalEvent, promise));
 }

test/async.test.tsx

@@ -78,10 +78,13 @@ describe("webcomponent", () => {
             <span
               className={this.#loading.value === true ? "loading" : ""}
               onplusnewasyncevent={async (evt) => {
-                if ((evt.target as HTMLElement).tagName === "BUTTON") {
+                if (
+                  (evt.target as HTMLElement).tagName === "BUTTON" &&
+                  evt.detail.cause.type === "click"
+                ) {
                   this.#loading.value = true;
                   try {
-                    await evt.detail;
+                    await evt.detail.promise;
                   } catch (_err) {}
                   this.#loading.value = false;
                 }