feat(async): add async handling for dispatch event

Author: plusgut

src/index.ts

@@ -119,7 +119,10 @@ export function createComponent<
 const parentsCacheSymbol = Symbol("parentsCache");
 export const getParentSymbol = Symbol("getParent");
 
-export const active = { parentElement: null as null | Element };
+export const active = {
+  parentElement: null as null | Element,
+  eventPromises: null as null | Promise<unknown>[],
+};
 
 export function findParent<T = Element>(
   needle: { new (args: any): T } | string,
@@ -177,11 +180,17 @@ export function dispatchEvent<
   T extends HTMLElement,
   U extends keyof CustomEvents<T>,
 >(target: T, eventName: U, detail: CustomEvents<T>[U]): Promise<unknown>[] {
+  const previousEventPromises = active.eventPromises;
+  const eventPromises: Promise<unknown>[] = [];
+  active.eventPromises = eventPromises;
+
   target.dispatchEvent(
     new CustomEvent(eventName as string, { detail: detail }),
   );
 
-  return [];
+  active.eventPromises = previousEventPromises;
+
+  return eventPromises;
 }
 
 export function prop() {

src/reconciler/host.ts

@@ -35,6 +35,7 @@ export const hostReconcile: Reconciler = (opt) => {
     } else {
       // remove old element
       opt.shadowCache.remove();
+      opt.shadowCache.abortController = new AbortController();
 
       // create new element
       const element = untracked(() => {
@@ -51,20 +52,6 @@ export const hostReconcile: Reconciler = (opt) => {
         props: {},
         children: [],
       };
-      opt.shadowCache.unmount = function () {
-        delete (this.node as any)[getParentSymbol];
-        delete (this as any).unmount;
-        for (const propKey in (this.value as ShadowHostElement).props) {
-          if (propKey.startsWith(EVENT_PREFIX)) {
-            (this.node as any).removeEventListener(
-              propKey.slice(EVENT_PREFIX.length),
-              (this.value as ShadowHostElement).props[propKey],
-            );
-            delete (this.value as ShadowHostElement).props[propKey];
-          }
-        }
-        this.unmount();
-      };
 
       elementNeedsAppending = true;
     }
@@ -80,54 +67,38 @@ export const hostReconcile: Reconciler = (opt) => {
         opt.shadowElement.props[propKey]
       ) {
         if (propKey.startsWith(EVENT_PREFIX) === true) {
-          if (opt.shadowElement.type === "input" && propKey === "oninput") {
-            const callback = opt.shadowElement.props[propKey];
-            opt.shadowElement.props[propKey] = (
-              evt: KeyboardEvent,
-              ...args: any[]
-            ) => {
-              const newValue = (evt.currentTarget as HTMLInputElement).value;
-
-              callback(evt, ...args);
-
-              if (
-                (opt.shadowElement as ShadowHostElement).props.value !==
-                newValue
-              ) {
-                evt.preventDefault();
-                (evt.currentTarget as HTMLInputElement).value = (
-                  opt.shadowElement as ShadowHostElement
-                ).props.value;
-              }
-            };
-          }
+          if (
+            propKey in (opt.shadowCache.value as ShadowHostElement).props ===
+            false
+          ) {
+            const eventName = propKey.slice(EVENT_PREFIX.length);
 
-          const eventName = propKey.slice(EVENT_PREFIX.length);
-          if (propKey in (opt.shadowCache.value as ShadowHostElement).props) {
-            (opt.shadowCache.node as Element).removeEventListener(
+            (opt.shadowCache.node as Element).addEventListener(
               eventName,
-              (opt.shadowCache.value as ShadowHostElement).props[propKey], // @TODO doesnt work for oninput
-            );
-          }
+              (evt) => {
+                const shadowElement = opt.shadowElement as ShadowHostElement;
+                const result = shadowElement.props[propKey](evt);
 
-          (opt.shadowCache.node as Element).addEventListener(
-            eventName,
-            opt.shadowElement.type === "input" && propKey === "oninput"
-              ? (evt: KeyboardEvent, ...args: any[]) => {
-                  const shadowElement = opt.shadowElement as ShadowHostElement;
+                if (shadowElement.type === "input" && propKey === "oninput") {
                   const newValue = (evt.currentTarget as HTMLInputElement)
                     .value;
 
-                  shadowElement.props[propKey](evt, ...args);
-
                   if (shadowElement.props.value !== newValue) {
                     evt.preventDefault();
                     (evt.currentTarget as HTMLInputElement).value =
                       shadowElement.props.value;
                   }
                 }
-              : opt.shadowElement.props[propKey],
-          );
+
+                if (result instanceof Promise) {
+                  if (active.eventPromises !== null) {
+                    active.eventPromises.push(result);
+                  }
+                }
+              },
+              { signal: opt.shadowCache.abortController?.signal },
+            );
+          }
         } else {
           untracked(() => {
             if (propKey === "style") {

src/reconciler/utils.ts

@@ -6,6 +6,7 @@ export class ShadowCache {
   node: Node | null = null;
   nestedShadows: ShadowCache[] = [];
   getParentOverwrite: (() => Element) | null = null;
+  abortController: AbortController | null = null;
 
   constructor(value: ShadowElement) {
     this.value = value;
@@ -25,6 +26,13 @@ export class ShadowCache {
     this.nestedShadows = [];
   }
   unmount() {
+    if (this.abortController !== null) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+
+    this.value = false;
+
     for (const nestedShadow of this.nestedShadows) {
       nestedShadow.unmount();
     }

test/async.test.tsx

@@ -68,7 +68,14 @@ describe("webcomponent", () => {
 
     expect(element.classList.contains("loading")).to.eql(true);
 
+    const abortPromise = new Promise<void>((resolve) => {
+      abortController.signal.addEventListener("abort", async () => {
+        await Promise.resolve();
+        resolve();
+      });
+    });
     abortController.abort("abort");
+    await abortPromise;
 
     expect(element.classList.contains("loading")).to.eql(false);
   });