refactor: JIT registering events

PatrickJS · PatrickJS · commit ff9b685ceebb · 2024-10-31T13:53:19.000-07:00
diff --git a/packages/async-framework/async-loader.ts b/packages/async-framework/async-loader.ts
@@ -1,7 +1,20 @@
 // deno-lint-ignore-file no-explicit-any
 import { escapeSelector, isPromise } from "./utils.ts";
+
+export interface AsyncLoaderContext {
+  value: any;
+  attrValue: string;
+  dispatch: (eventName: string, detail?: any) => void;
+  element: Element;
+  event: Event;
+  eventName: string;
+  handlers: { handler: (context: AsyncLoaderContext) => Promise<any> | any };
+  container: Element;
+  stop: () => void;
+}
+
 export interface AsyncLoaderConfig {
-  handlerRegistry: { handler: (context: any) => Promise<any> | any };
+  handlerRegistry: { handler: (context: AsyncLoaderContext) => Promise<any> | any };
   containerAttribute?: string;
   eventPrefix?: string;
   containers?: Map<Element, Map<string, Map<Element, string>>>;
@@ -226,11 +239,16 @@ export class AsyncLoader {
     const listeners = new Map();
     this.containers.set(containerElement, listeners);
 
+    // TODO: We still need to parse the container for the event type
+    // even when doing lazy event registration
     this.events.forEach((eventName) => {
       // console.log('setupContainerListeners: adding event listener for', eventName);
       containerElement.addEventListener(
         eventName,
         (event) => {
+          // TODO: we may not need to parse the container anymore for the event type
+          // when doing lazy event registration
+
           // Lazy parse the element for the event type before handling the event
           this.parseContainerElement(containerElement, eventName);
           // Handle the event when it occurs
@@ -344,6 +362,7 @@ export class AsyncLoader {
   dispatch(eventName: string | CustomEvent, detail?: any) {
     // create the custom event
     let customEvent;
+    let result = false;
     if (eventName instanceof CustomEvent) {
       customEvent = eventName;
       detail = eventName.detail;
@@ -353,10 +372,30 @@ export class AsyncLoader {
     }
     // grab all listeners for the event and emit the event to all elements that have registered handlers for the event
     this.containers.forEach((listeners, containerElement) => {
+      // TODO: refactor code to avoid adding the same event listener multiple times
+      // this is now lazy registering
+      if (!this.events.includes(eventName)) {
+        this.events.push(eventName);
+        // add the event listener to the container
+        containerElement.addEventListener(
+          eventName,
+          (event) => {
+            // TODO: we don't need to parse the container for the event type
+            // when doing lazy event registration
+
+            // Lazy parse the element for the event type before handling the event
+            // this.parseContainerElement(containerElement, eventName);
+            // Handle the event when it occurs
+            this.handleContainerEvent(containerElement, event);
+            // console.log('setupContainerListeners: event handled', res);
+          },
+          true, // Use capturing phase to ensure the handler runs before other listeners
+        );
+        // add the event to the events array
+      }
       // console.log('dispatch: parsing container elements for event', eventName);
       // lazy parse the container for the event type
       this.parseContainerElement(containerElement, eventName);
-
       // if there are listeners for the event and rely on side effects
       if (listeners.has(eventName)) {
         // Parse the container for the event type before handling the event
@@ -366,6 +405,7 @@ export class AsyncLoader {
           eventListeners.forEach((_attrValue, element) => {
             if (element.isConnected) {
               element.dispatchEvent(customEvent);
+              result = true;
             } else {
               cleanup.push(element);
             }
@@ -377,6 +417,7 @@ export class AsyncLoader {
         }
       }
     });
+    return result;
   }
 
   // Handles an event occurring within a container
diff --git a/packages/async-framework/render.ts b/packages/async-framework/render.ts
@@ -19,16 +19,21 @@ export function render(
     config = document.querySelector("[data-container='root']") as HTMLElement;
   }
   // Handle case where config is just the root element
-  const domRoot = config instanceof HTMLElement ? config : config.root;
+  let domRoot = config instanceof HTMLElement ? config : config.root;
   const renderConfig = config instanceof HTMLElement ? {} : config;
   if (!domRoot) {
-    throw new Error("Root element is required for rendering");
+    domRoot = document.querySelector("[data-container='root']") as HTMLElement;
+    if (!domRoot) {
+      throw new Error("Root element is required for rendering");
+    }
   }
+  const currentPath = location.pathname;
   const containerAttribute = renderConfig.containerAttribute ??
     "data-container";
   const context = renderConfig.context ?? {};
   const events = renderConfig.events ?? [];
-  const basePath = renderConfig.basePath ?? "./handlers/";
+  // should be /handlers?
+  const basePath = renderConfig.basePath ?? currentPath;
   const origin = renderConfig.origin ?? "";
   const eventPrefix = renderConfig.eventPrefix ?? "on:";
 
@@ -61,13 +66,14 @@ export function render(
   loader.init();
 
   // Return utilities for cleanup and access to loader/registry
-  return {
+  const asyncFramework = {
     loader,
     handlers: registry,
     unmount: () => {
       domRoot.removeChild(element);
     },
   };
+  return asyncFramework;
 }
 
 // Example usage:
diff --git a/packages/dev/server-utils/bundler.ts b/packages/dev/server-utils/bundler.ts
@@ -42,13 +42,15 @@ export function createBundler(rootDir: string) {
         ...options,
         define: {
           ...options.define,
-          "import.meta.url": "import_meta_url",
+          // "import.meta.url": "import_meta_url",
         },
         write: false,
         jsxFactory: "jsx",
         jsxFragment: "Fragment",
         jsxImportSource: "async-framework",
         entryPoints: [absolutePath],
+        // format: "iife",
+        // format: "cjs",
         format: "esm",
         plugins: [
           {
diff --git a/packages/examples/jsx-client/App.tsx b/packages/examples/jsx-client/App.tsx
@@ -1,12 +1,16 @@
 // deno-lint-ignore no-unused-vars
-import { createSignal, jsx } from "async-framework";
+import { jsx, createSignal, AsyncLoaderContext } from "async-framework";
 import { Counter } from "./Counter.tsx";
 
+export function onUpdate(context: AsyncLoaderContext) {
+  console.log("onUpdate", context);
+}
+
 export function App() {
   const [name, setName, nameSig] = createSignal("World");
 
   return (
-    <div class="min-h-screen bg-gray-100 py-8 px-4">
+    <div class="min-h-screen bg-gray-100 py-8 px-4" on:update="App.tsx">
       <div class="max-w-3xl mx-auto space-y-8">
         <div class="bg-white rounded-lg shadow-md p-6">
           <h1 class="text-3xl font-bold text-gray-800 mb-4">Hello {nameSig}</h1>
@@ -18,6 +22,13 @@ export function App() {
             onInput={(e) => {
               if (e.target instanceof HTMLInputElement) {
                 setName(e.target.value);
+                const success = globalThis.framework.loader.dispatch(
+                  "update",
+                  e.target.value
+                );
+                if (!success) {
+                  console.error("Failed to dispatch update event");
+                }
               }
             }}
           />
diff --git a/packages/examples/jsx-client/Counter.tsx b/packages/examples/jsx-client/Counter.tsx
@@ -1,5 +1,5 @@
 // deno-lint-ignore no-unused-vars
-import { cls, computed, jsx, signal } from "async-framework";
+import { jsx, cls, computed, signal } from "async-framework";
 
 export function Counter() {
   const count = signal(0);
@@ -33,9 +33,9 @@ export function Counter() {
           Count: {count}
         </h2>
         <button
-          onClick={() => (theme.value = theme.value === "light"
-            ? "dark"
-            : "light")}
+          onClick={() =>
+            (theme.value = theme.value === "light" ? "dark" : "light")
+          }
           class="px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 transition-colors"
         >
           Toggle Theme
diff --git a/packages/examples/jsx-client/index.html b/packages/examples/jsx-client/index.html
@@ -19,7 +19,10 @@
       import { render } from "async-framework";
       import { App } from "./App.tsx";
 
-      render(App());
+      const framework = render(App(), {
+        // events: ["update"],
+      });
+      window.framework = framework;
     </script>
   </head>
   <body class="bg-gray-100 min-h-screen">
