@lolyjs/core 0.2.0-alpha.15 → 0.2.0-alpha.16

package/dist/runtime.js

@@ -85,22 +85,158 @@ function matchRouteClient(pathWithSearch, routes) {
 }
 
 // modules/runtime/client/metadata.ts
+function getOrCreateMeta(selector, attributes) {
+  let meta = document.querySelector(selector);
+  if (!meta) {
+    meta = document.createElement("meta");
+    if (attributes.name) meta.name = attributes.name;
+    if (attributes.property) meta.setAttribute("property", attributes.property);
+    if (attributes.httpEquiv) meta.httpEquiv = attributes.httpEquiv;
+    document.head.appendChild(meta);
+  }
+  return meta;
+}
+function getOrCreateLink(rel, href) {
+  const selector = `link[rel="${rel}"]`;
+  let link = document.querySelector(selector);
+  if (!link) {
+    link = document.createElement("link");
+    link.rel = rel;
+    link.href = href;
+    document.head.appendChild(link);
+  } else {
+    link.href = href;
+  }
+  return link;
+}
 function applyMetadata(md) {
   if (!md) return;
   if (md.title) {
     document.title = md.title;
   }
   if (md.description) {
-    let meta = document.querySelector(
-      'meta[name="description"]'
-    );
-    if (!meta) {
-      meta = document.createElement("meta");
-      meta.name = "description";
-      document.head.appendChild(meta);
-    }
+    const meta = getOrCreateMeta('meta[name="description"]', { name: "description" });
     meta.content = md.description;
   }
+  if (md.robots) {
+    const meta = getOrCreateMeta('meta[name="robots"]', { name: "robots" });
+    meta.content = md.robots;
+  }
+  if (md.themeColor) {
+    const meta = getOrCreateMeta('meta[name="theme-color"]', { name: "theme-color" });
+    meta.content = md.themeColor;
+  }
+  if (md.viewport) {
+    const meta = getOrCreateMeta('meta[name="viewport"]', { name: "viewport" });
+    meta.content = md.viewport;
+  }
+  if (md.canonical) {
+    getOrCreateLink("canonical", md.canonical);
+  }
+  if (md.openGraph) {
+    const og = md.openGraph;
+    if (og.title) {
+      const meta = getOrCreateMeta('meta[property="og:title"]', { property: "og:title" });
+      meta.content = og.title;
+    }
+    if (og.description) {
+      const meta = getOrCreateMeta('meta[property="og:description"]', { property: "og:description" });
+      meta.content = og.description;
+    }
+    if (og.type) {
+      const meta = getOrCreateMeta('meta[property="og:type"]', { property: "og:type" });
+      meta.content = og.type;
+    }
+    if (og.url) {
+      const meta = getOrCreateMeta('meta[property="og:url"]', { property: "og:url" });
+      meta.content = og.url;
+    }
+    if (og.image) {
+      if (typeof og.image === "string") {
+        const meta = getOrCreateMeta('meta[property="og:image"]', { property: "og:image" });
+        meta.content = og.image;
+      } else {
+        const meta = getOrCreateMeta('meta[property="og:image"]', { property: "og:image" });
+        meta.content = og.image.url;
+        if (og.image.width) {
+          const metaWidth = getOrCreateMeta('meta[property="og:image:width"]', { property: "og:image:width" });
+          metaWidth.content = String(og.image.width);
+        }
+        if (og.image.height) {
+          const metaHeight = getOrCreateMeta('meta[property="og:image:height"]', { property: "og:image:height" });
+          metaHeight.content = String(og.image.height);
+        }
+        if (og.image.alt) {
+          const metaAlt = getOrCreateMeta('meta[property="og:image:alt"]', { property: "og:image:alt" });
+          metaAlt.content = og.image.alt;
+        }
+      }
+    }
+    if (og.siteName) {
+      const meta = getOrCreateMeta('meta[property="og:site_name"]', { property: "og:site_name" });
+      meta.content = og.siteName;
+    }
+    if (og.locale) {
+      const meta = getOrCreateMeta('meta[property="og:locale"]', { property: "og:locale" });
+      meta.content = og.locale;
+    }
+  }
+  if (md.twitter) {
+    const twitter = md.twitter;
+    if (twitter.card) {
+      const meta = getOrCreateMeta('meta[name="twitter:card"]', { name: "twitter:card" });
+      meta.content = twitter.card;
+    }
+    if (twitter.title) {
+      const meta = getOrCreateMeta('meta[name="twitter:title"]', { name: "twitter:title" });
+      meta.content = twitter.title;
+    }
+    if (twitter.description) {
+      const meta = getOrCreateMeta('meta[name="twitter:description"]', { name: "twitter:description" });
+      meta.content = twitter.description;
+    }
+    if (twitter.image) {
+      const meta = getOrCreateMeta('meta[name="twitter:image"]', { name: "twitter:image" });
+      meta.content = twitter.image;
+    }
+    if (twitter.imageAlt) {
+      const meta = getOrCreateMeta('meta[name="twitter:image:alt"]', { name: "twitter:image:alt" });
+      meta.content = twitter.imageAlt;
+    }
+    if (twitter.site) {
+      const meta = getOrCreateMeta('meta[name="twitter:site"]', { name: "twitter:site" });
+      meta.content = twitter.site;
+    }
+    if (twitter.creator) {
+      const meta = getOrCreateMeta('meta[name="twitter:creator"]', { name: "twitter:creator" });
+      meta.content = twitter.creator;
+    }
+  }
+  if (md.metaTags && Array.isArray(md.metaTags)) {
+    md.metaTags.forEach((tag) => {
+      let selector = "";
+      if (tag.name) {
+        selector = `meta[name="${tag.name}"]`;
+      } else if (tag.property) {
+        selector = `meta[property="${tag.property}"]`;
+      } else if (tag.httpEquiv) {
+        selector = `meta[http-equiv="${tag.httpEquiv}"]`;
+      }
+      if (selector) {
+        const meta = getOrCreateMeta(selector, {
+          name: tag.name,
+          property: tag.property,
+          httpEquiv: tag.httpEquiv
+        });
+        meta.content = tag.content;
+      }
+    });
+  }
+  if (md.links && Array.isArray(md.links)) {
+    md.links.forEach((link) => {
+      getOrCreateLink(link.rel, link.href);
+    });
+  }
 }
 
 // modules/runtime/client/AppShell.tsx
@@ -317,10 +453,15 @@ async function handleErrorRoute(nextUrl, json, errorRoute, setState) {
     });
     return true;
   } catch (loadError) {
-    console.error(
-      "[client] Error loading error route components:",
-      loadError
-    );
+    console.error("\n\u274C [client] Error loading error route components:");
+    console.error(loadError);
+    if (loadError instanceof Error) {
+      console.error(`   Message: ${loadError.message}`);
+      if (loadError.stack) {
+        console.error(`   Stack: ${loadError.stack.split("\n").slice(0, 3).join("\n   ")}`);
+      }
+    }
+    console.error("\u{1F4A1} Falling back to full page reload\n");
     window.location.href = nextUrl;
     return false;
   }
@@ -425,7 +566,11 @@ async function handleNormalRoute(nextUrl, json, routes, setState) {
     searchParams: Object.fromEntries(url.searchParams.entries())
   };
   setRouterData(routerData);
-  const components = await matched.route.load();
+  const prefetched = prefetchedRoutes.get(matched.route);
+  const components = prefetched ? await prefetched : await matched.route.load();
+  if (!prefetched) {
+    prefetchedRoutes.set(matched.route, Promise.resolve(components));
+  }
   window.scrollTo({
     top: 0,
     behavior: "smooth"
@@ -464,7 +609,7 @@ async function navigate(nextUrl, handlers, options) {
       }
     }
     if (!ok) {
-      if (json && json.redirect) {
+      if (json?.redirect) {
         window.location.href = json.redirect.destination;
         return;
       }
@@ -485,6 +630,47 @@ async function navigate(nextUrl, handlers, options) {
     window.location.href = nextUrl;
   }
 }
+var prefetchedRoutes = /* @__PURE__ */ new WeakMap();
+function prefetchRoute(url, routes, notFoundRoute) {
+  const [pathname] = url.split("?");
+  const matched = matchRouteClient(pathname, routes);
+  if (!matched) {
+    if (notFoundRoute) {
+      const existing2 = prefetchedRoutes.get(notFoundRoute);
+      if (!existing2) {
+        const promise = notFoundRoute.load();
+        prefetchedRoutes.set(notFoundRoute, promise);
+      }
+    }
+    return;
+  }
+  const existing = prefetchedRoutes.get(matched.route);
+  if (!existing) {
+    const promise = matched.route.load();
+    prefetchedRoutes.set(matched.route, promise);
+  }
+}
+function createHoverHandler(routes, notFoundRoute) {
+  return function handleHover(ev) {
+    try {
+      const target = ev.target;
+      if (!target) 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;
+      const nextUrl = url.pathname + url.search;
+      const currentUrl = window.location.pathname + window.location.search;
+      if (nextUrl === currentUrl) return;
+      prefetchRoute(nextUrl, routes, notFoundRoute);
+    } catch (error) {
+    }
+  };
+}
 function createClickHandler(navigate2) {
   return function handleClick(ev) {
     try {
@@ -595,17 +781,20 @@ function AppShell({
     }
     const handleClick = createClickHandler(handleNavigateInternal);
     const handlePopState = createPopStateHandler(handleNavigateInternal);
+    const handleHover = createHoverHandler(routes, notFoundRoute);
     window.addEventListener("click", handleClick, false);
     window.addEventListener("popstate", handlePopState, false);
+    window.addEventListener("mouseover", handleHover, false);
     return () => {
       isMounted = false;
       window.removeEventListener("click", handleClick, false);
       window.removeEventListener("popstate", handlePopState, false);
+      window.removeEventListener("mouseover", handleHover, false);
     };
-  }, []);
+  }, [routes, notFoundRoute]);
   useEffect(() => {
     const handleDataRefresh = () => {
-      const freshData = window?.__FW_DATA__;
+      const freshData = window[WINDOW_DATA_KEY];
       if (!freshData) return;
       const currentPathname = window.location.pathname;
       const freshPathname = freshData.pathname;
@@ -632,6 +821,91 @@ function AppShell({
   return /* @__PURE__ */ jsx2(RouterContext.Provider, { value: { navigate: handleNavigate }, children: /* @__PURE__ */ jsx2(RouterView, { state }, routeKey) });
 }
 
+// modules/runtime/client/hot-reload.ts
+function setupHotReload() {
+  const nodeEnv = process.env.NODE_ENV || "production";
+  const isDev = nodeEnv === "development";
+  console.log(`[hot-reload] NODE_ENV: ${nodeEnv}, isDev: ${isDev}`);
+  if (!isDev) {
+    console.log("[hot-reload] Skipping hot reload setup (not in development mode)");
+    return;
+  }
+  console.log("[hot-reload] Setting up hot reload client...");
+  let eventSource = null;
+  let reloadTimeout = null;
+  let reconnectTimeout = null;
+  let reconnectAttempts = 0;
+  const MAX_RECONNECT_ATTEMPTS = 10;
+  const RECONNECT_DELAY = 1e3;
+  const RELOAD_DELAY = 100;
+  function connect() {
+    try {
+      if (eventSource) {
+        console.log("[hot-reload] Closing existing EventSource connection");
+        eventSource.close();
+      }
+      const endpoint = "/__fw/hot";
+      eventSource = new EventSource(endpoint);
+      eventSource.addEventListener("ping", (event) => {
+        if ("data" in event) {
+          console.log("[hot-reload] \u2705 Connected to hot reload server");
+        }
+        reconnectAttempts = 0;
+      });
+      eventSource.addEventListener("message", (event) => {
+        const data = event.data;
+        if (data && typeof data === "string" && data.startsWith("reload:")) {
+          const filePath = data.slice(7);
+          console.log(`[hot-reload] \u{1F4DD} File changed: ${filePath}, reloading...`);
+          if (reloadTimeout) {
+            clearTimeout(reloadTimeout);
+          }
+          reloadTimeout = setTimeout(() => {
+            try {
+              window.location.reload();
+            } catch (error) {
+              console.error("[hot-reload] \u274C Error reloading page:", error);
+              setTimeout(() => window.location.reload(), 100);
+            }
+          }, RELOAD_DELAY);
+        }
+      });
+      eventSource.onopen = () => {
+        reconnectAttempts = 0;
+      };
+      eventSource.onerror = (error) => {
+        const states = ["CONNECTING", "OPEN", "CLOSED"];
+        const state = states[eventSource?.readyState ?? 0] || "UNKNOWN";
+        if (eventSource?.readyState === EventSource.CONNECTING) {
+          console.log("[hot-reload] \u23F3 Still connecting...");
+          return;
+        } else if (eventSource?.readyState === EventSource.OPEN) {
+          console.warn("[hot-reload] \u26A0\uFE0F Connection error (but connection is open):", error);
+        } else {
+          console.warn(`[hot-reload] \u274C Connection closed (readyState: ${state})`);
+          if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+            reconnectAttempts++;
+            const delay = RECONNECT_DELAY * reconnectAttempts;
+            if (reconnectTimeout) {
+              clearTimeout(reconnectTimeout);
+            }
+            reconnectTimeout = setTimeout(() => {
+              console.log(`[hot-reload] \u{1F504} Reconnecting... (attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`);
+              connect();
+            }, delay);
+          } else {
+            console.error("[hot-reload] \u274C Max reconnect attempts reached. Please refresh the page manually.");
+          }
+        }
+      };
+    } catch (error) {
+      console.error("[hot-reload] \u274C Failed to create EventSource:", error);
+      console.error("[hot-reload] EventSource may not be supported in this browser.");
+    }
+  }
+  connect();
+}
+
 // modules/runtime/client/bootstrap.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute, errorRoute) {
@@ -673,101 +947,91 @@ async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute,
     props: initialData?.props ?? {}
   };
 }
-function setupHotReload() {
-  const nodeEnv = typeof process !== "undefined" && process.env?.NODE_ENV || "production";
-  const isDev = nodeEnv !== "production";
-  if (!isDev) {
-    return;
+function initializeRouterData(initialUrl, initialData) {
+  let routerData = getRouterData();
+  if (!routerData) {
+    const url = new URL(initialUrl, window.location.origin);
+    routerData = {
+      pathname: url.pathname,
+      params: initialData?.params || {},
+      searchParams: Object.fromEntries(url.searchParams.entries())
+    };
+    setRouterData(routerData);
   }
+}
+async function hydrateInitialRoute(container, initialUrl, initialData, routes, notFoundRoute, errorRoute) {
   try {
-    console.log("[hot-reload] Attempting to connect to /__fw/hot...");
-    const eventSource = new EventSource("/__fw/hot");
-    let reloadTimeout = null;
-    eventSource.addEventListener("message", (event) => {
-      const data = event.data;
-      if (data && data.startsWith("reload:")) {
-        const filePath = data.slice(7);
-        console.log(`[hot-reload] File changed: ${filePath}`);
-        if (reloadTimeout) {
-          clearTimeout(reloadTimeout);
-        }
-        reloadTimeout = setTimeout(() => {
-          console.log("[hot-reload] Reloading page...");
-          window.location.reload();
-        }, 500);
-      }
-    });
-    eventSource.addEventListener("ping", () => {
-      console.log("[hot-reload] \u2713 Connected to hot reload server");
-    });
-    eventSource.onopen = () => {
-      console.log("[hot-reload] \u2713 SSE connection opened");
-    };
-    eventSource.onerror = (error) => {
-      const states = ["CONNECTING", "OPEN", "CLOSED"];
-      const state = states[eventSource.readyState] || "UNKNOWN";
-      if (eventSource.readyState === EventSource.CONNECTING) {
-        console.log("[hot-reload] Connecting...");
-      } else if (eventSource.readyState === EventSource.OPEN) {
-        console.warn("[hot-reload] Connection error (but connection is open):", error);
-      } else {
-        console.log("[hot-reload] Connection closed (readyState:", state, ")");
+    const initialState = await loadInitialRoute(
+      initialUrl,
+      initialData,
+      routes,
+      notFoundRoute,
+      errorRoute
+    );
+    if (initialData?.metadata) {
+      try {
+        applyMetadata(initialData.metadata);
+      } catch (metadataError) {
+        console.warn("[client] Error applying metadata:", metadataError);
       }
-    };
+    }
+    hydrateRoot(
+      container,
+      /* @__PURE__ */ jsx3(
+        AppShell,
+        {
+          initialState,
+          routes,
+          notFoundRoute,
+          errorRoute
+        }
+      )
+    );
   } catch (error) {
-    console.log("[hot-reload] EventSource not supported or error:", error);
+    console.error(
+      "[client] Error loading initial route components for",
+      initialUrl,
+      error
+    );
+    throw error;
   }
 }
 function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
-  console.log("[client] Bootstrap starting, setting up hot reload...");
   setupHotReload();
-  (async function bootstrap() {
-    const container = document.getElementById(APP_CONTAINER_ID);
-    const initialData = getWindowData();
-    if (!container) {
-      console.error(`Container #${APP_CONTAINER_ID} not found for hydration`);
-      return;
-    }
-    const initialUrl = window.location.pathname + window.location.search;
-    let routerData = getRouterData();
-    if (!routerData) {
-      const url = new URL(initialUrl, window.location.origin);
-      routerData = {
-        pathname: url.pathname,
-        params: initialData?.params || {},
-        searchParams: Object.fromEntries(url.searchParams.entries())
-      };
-      setRouterData(routerData);
-    }
+  (async () => {
     try {
-      const initialState = await loadInitialRoute(
+      const container = document.getElementById(APP_CONTAINER_ID);
+      if (!container) {
+        console.error(`
+\u274C [client] Hydration failed: Container #${APP_CONTAINER_ID} not found`);
+        console.error("\u{1F4A1} This usually means:");
+        console.error("  \u2022 The HTML structure doesn't match what React expects");
+        console.error("  \u2022 The container was removed before hydration");
+        console.error("  \u2022 There's a mismatch between SSR and client HTML\n");
+        return;
+      }
+      const initialData = getWindowData();
+      const initialUrl = window.location.pathname + window.location.search;
+      initializeRouterData(initialUrl, initialData);
+      await hydrateInitialRoute(
+        container,
         initialUrl,
         initialData,
         routes,
         notFoundRoute,
         errorRoute
       );
-      if (initialData?.metadata) {
-        applyMetadata(initialData.metadata);
-      }
-      hydrateRoot(
-        container,
-        /* @__PURE__ */ jsx3(
-          AppShell,
-          {
-            initialState,
-            routes,
-            notFoundRoute,
-            errorRoute
-          }
-        )
-      );
     } catch (error) {
-      console.error(
-        "[client] Error loading initial route components for",
-        initialUrl,
-        error
-      );
+      console.error("\n\u274C [client] Fatal error during bootstrap:");
+      console.error(error);
+      if (error instanceof Error) {
+        console.error("\nError details:");
+        console.error(`  Message: ${error.message}`);
+        if (error.stack) {
+          console.error(`  Stack: ${error.stack}`);
+        }
+      }
+      console.error("\n\u{1F4A1} Attempting page reload to recover...\n");
       window.location.reload();
     }
   })();