@lolyjs/core 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/index.cjs

@@ -5499,34 +5499,112 @@ async function navigate(nextUrl, handlers, options) {
 }
 function createClickHandler(navigate2) {
   return function handleClick(ev) {
-    const path25 = ev.composedPath();
-    for (const element of path25) {
-      if (!(element instanceof HTMLElement)) continue;
-      const tagName = element.tagName.toLowerCase();
-      if (tagName === "input" || tagName === "textarea" || tagName === "button" || tagName === "select" || element.isContentEditable || tagName === "label" && element.control) {
+    const target = ev.target;
+    const tagName = target?.tagName.toLowerCase() || "unknown";
+    console.log("[loly:click] Click event received", {
+      type: ev.type,
+      tagName,
+      target: target?.tagName,
+      defaultPrevented: ev.defaultPrevented,
+      button: ev.button,
+      clientX: ev.clientX,
+      clientY: ev.clientY
+    });
+    try {
+      if (ev.defaultPrevented) {
+        console.log("[loly:click] Event already prevented, skipping");
+        return;
+      }
+      if (ev.type !== "click") {
+        console.log("[loly:click] Not a click event, skipping", { type: ev.type });
+        return;
+      }
+      if (ev.button !== 0) {
+        console.log("[loly:click] Not left button, skipping", { button: ev.button });
+        return;
+      }
+      if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) {
+        console.log("[loly:click] Modifier keys pressed, skipping");
+        return;
+      }
+      if (ev.clientX === 0 && ev.clientY === 0 && ev.detail === 0) {
+        if (target) {
+          const tagName3 = target.tagName.toLowerCase();
+          if (tagName3 === "input" || tagName3 === "textarea" || tagName3 === "button" || tagName3 === "select") {
+            console.log("[loly:click] Synthetic event on interactive element, skipping", { tagName: tagName3 });
+            return;
+          }
+        }
+      }
+      if (!target) {
+        console.log("[loly:click] No target, skipping");
+        return;
+      }
+      const tagName2 = target.tagName.toLowerCase();
+      if (tagName2 === "input" || tagName2 === "textarea" || tagName2 === "button" || tagName2 === "select" || target.isContentEditable || target.getAttribute("contenteditable") === "true") {
+        console.log("[loly:click] Target is interactive element, skipping", { tagName: tagName2 });
+        return;
+      }
+      const interactiveParent = target.closest("input, textarea, button, select, [contenteditable], label");
+      if (interactiveParent) {
+        if (interactiveParent.tagName.toLowerCase() === "label") {
+          const label = interactiveParent;
+          if (label.control) {
+            console.log("[loly:click] Inside label with control, skipping");
+            return;
+          }
+        } else {
+          console.log("[loly:click] Inside interactive parent, skipping", {
+            parentTag: interactiveParent.tagName.toLowerCase()
+          });
+          return;
+        }
+      }
+      const anchor = target.closest("a[href]");
+      if (!anchor) {
+        console.log("[loly:click] No anchor found, skipping");
+        return;
+      }
+      console.log("[loly:click] Anchor found, processing navigation", {
+        href: anchor.getAttribute("href")
+      });
+      const href = anchor.getAttribute("href");
+      if (!href) {
+        console.log("[loly:click] No href attribute, skipping");
+        return;
+      }
+      if (href.startsWith("#")) {
+        console.log("[loly:click] Hash link, skipping");
+        return;
+      }
+      const url = new URL(href, window.location.href);
+      if (url.origin !== window.location.origin) {
+        console.log("[loly:click] External link, skipping", { origin: url.origin });
+        return;
+      }
+      if (anchor.target && anchor.target !== "_self") {
+        console.log("[loly:click] Link has target, skipping", { target: anchor.target });
         return;
       }
+      ev.preventDefault();
+      console.log("[loly:click] Prevented default, navigating");
+      const nextUrl = url.pathname + url.search;
+      const currentUrl = window.location.pathname + window.location.search;
+      if (nextUrl === currentUrl) {
+        console.log("[loly:click] Same URL, skipping", { nextUrl });
+        return;
+      }
+      const shouldRevalidate = anchor.hasAttribute("data-revalidate") && anchor.getAttribute("data-revalidate") !== "false";
+      console.log("[loly:click] Pushing state and navigating", {
+        nextUrl,
+        currentUrl,
+        shouldRevalidate
+      });
+      window.history.pushState({}, "", nextUrl);
+      navigate2(nextUrl, shouldRevalidate ? { revalidate: true } : void 0);
+    } catch (error) {
+      console.error("[loly:click] Error in click handler:", error);
     }
-    const target = ev.target;
-    if (!target) return;
-    if (ev.defaultPrevented) return;
-    if (ev.button !== 0) return;
-    if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return;
-    const anchor = target.closest("a[href]");
-    if (!anchor) return;
-    const href = anchor.getAttribute("href");
-    if (!href) return;
-    if (href.startsWith("#")) return;
-    const url = new URL(href, window.location.href);
-    if (url.origin !== window.location.origin) return;
-    if (anchor.target && anchor.target !== "_self") return;
-    ev.preventDefault();
-    const nextUrl = url.pathname + url.search;
-    const currentUrl = window.location.pathname + window.location.search;
-    if (nextUrl === currentUrl) return;
-    const shouldRevalidate = anchor.hasAttribute("data-revalidate") && anchor.getAttribute("data-revalidate") !== "false";
-    window.history.pushState({}, "", nextUrl);
-    navigate2(nextUrl, shouldRevalidate ? { revalidate: true } : void 0);
   };
 }
 function createPopStateHandler(navigate2) {
@@ -5560,16 +5638,35 @@ function AppShell({
     };
   }, [routes, notFoundRoute, errorRoute]);
   (0, import_react2.useEffect)(() => {
+    console.log("[loly:AppShell] Setting up event listeners");
+    let isMounted = true;
+    let listenerCount = 0;
     async function handleNavigate(nextUrl, options) {
+      if (!isMounted) {
+        console.warn("[loly:AppShell] navigate called but component is unmounted");
+        return;
+      }
+      console.log("[loly:AppShell] Navigating to", nextUrl, options);
       await navigate(nextUrl, handlersRef.current, options);
     }
     const handleClick = createClickHandler(handleNavigate);
     const handlePopState = createPopStateHandler(handleNavigate);
-    window.addEventListener("click", handleClick, { capture: false });
-    window.addEventListener("popstate", handlePopState, { capture: false });
+    window.addEventListener("click", handleClick, false);
+    window.addEventListener("popstate", handlePopState, false);
+    listenerCount = 2;
+    console.log("[loly:AppShell] Event listeners added", {
+      clickListener: true,
+      popStateListener: true,
+      totalListeners: listenerCount
+    });
     return () => {
-      window.removeEventListener("click", handleClick, { capture: false });
-      window.removeEventListener("popstate", handlePopState, { capture: false });
+      console.log("[loly:AppShell] Cleaning up event listeners", {
+        wasMounted: isMounted,
+        listenersToRemove: listenerCount
+      });
+      isMounted = false;
+      window.removeEventListener("click", handleClick, false);
+      window.removeEventListener("popstate", handlePopState, false);
     };
   }, []);
   const isError = state.route === errorRoute;
@@ -5621,14 +5718,25 @@ async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute,
   };
 }
 function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
+  console.log("[loly:runtime] bootstrapClient called", {
+    routesCount: routes.length,
+    hasNotFound: !!notFoundRoute,
+    hasError: !!errorRoute
+  });
   (async function bootstrap() {
     const container = document.getElementById(APP_CONTAINER_ID2);
     const initialData = getWindowData();
+    console.log("[loly:runtime] bootstrap starting", {
+      hasContainer: !!container,
+      containerId: APP_CONTAINER_ID2,
+      hasInitialData: !!initialData
+    });
     if (!container) {
-      console.error(`Container #${APP_CONTAINER_ID2} not found for hydration`);
+      console.error(`[loly:runtime] Container #${APP_CONTAINER_ID2} not found for hydration`);
       return;
     }
     const initialUrl = window.location.pathname + window.location.search;
+    console.log("[loly:runtime] Loading initial route", { initialUrl });
     try {
       const initialState = await loadInitialRoute(
         initialUrl,
@@ -5637,9 +5745,15 @@ function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
         notFoundRoute,
         errorRoute
       );
+      console.log("[loly:runtime] Initial route loaded", {
+        url: initialState.url,
+        hasRoute: !!initialState.route,
+        hasComponents: !!initialState.components
+      });
       if (initialData?.metadata) {
         applyMetadata(initialData.metadata);
       }
+      console.log("[loly:runtime] Hydrating React app");
       (0, import_client5.hydrateRoot)(
         container,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -5652,9 +5766,10 @@ function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
           }
         )
       );
+      console.log("[loly:runtime] React app hydrated successfully");
     } catch (error) {
       console.error(
-        "[client] Error loading initial route components for",
+        "[loly:runtime] Error loading initial route components for",
         initialUrl,
         error
       );