@lolyjs/core 0.1.0-alpha.9 → 0.2.0-alpha.0

package/dist/index.cjs

@@ -1407,24 +1407,69 @@ function createClientConfig(projectRoot, mode) {
 var import_path15 = __toESM(require("path"));
 var import_fs12 = __toESM(require("fs"));
 init_globals();
-function startClientBundler(projectRoot) {
-  const { config, outDir } = createClientConfig(projectRoot, "production");
+function startClientBundler(projectRoot, mode = "development") {
+  const { config, outDir } = createClientConfig(projectRoot, mode);
   copyStaticAssets(projectRoot, outDir);
   const compiler = (0, import_core2.rspack)(config);
+  let isBuilding = false;
+  let buildResolve = null;
+  let buildPromise = null;
+  let lastBuildTime = Date.now();
+  compiler.hooks.compile.tap("HotReload", () => {
+    isBuilding = true;
+    buildPromise = new Promise((resolve3) => {
+      buildResolve = resolve3;
+    });
+  });
   compiler.watch({}, (err, stats) => {
     if (err) {
       console.error("[framework][client] Rspack error:", err);
+      isBuilding = false;
+      lastBuildTime = Date.now();
+      if (buildResolve) {
+        buildResolve();
+        buildResolve = null;
+        buildPromise = null;
+      }
+      return;
+    }
+    if (!stats) {
+      isBuilding = false;
+      lastBuildTime = Date.now();
       return;
     }
-    if (!stats) return;
     if (stats.hasErrors()) {
       console.error(
         "[framework][client] Build with errors:\n",
         stats.toString("errors-only")
       );
+    } else {
+      console.log("[framework][client] \u2713 Client bundle rebuilt successfully");
+    }
+    isBuilding = false;
+    lastBuildTime = Date.now();
+    if (buildResolve) {
+      buildResolve();
+      buildResolve = null;
+      buildPromise = null;
     }
   });
-  return { outDir };
+  return {
+    outDir,
+    waitForBuild: async () => {
+      if (isBuilding && buildPromise) {
+        await buildPromise;
+        await new Promise((resolve3) => setTimeout(resolve3, 100));
+        return;
+      }
+      const timeSinceLastBuild = Date.now() - lastBuildTime;
+      if (timeSinceLastBuild < 500) {
+        await new Promise((resolve3) => setTimeout(resolve3, 200));
+        return;
+      }
+      return Promise.resolve();
+    }
+  };
 }
 function buildClientBundle(projectRoot) {
   const { config, outDir } = createClientConfig(projectRoot, "production");
@@ -3155,7 +3200,9 @@ init_globals();
 function setupHotReload({
   app,
   appDir,
-  route = "/__fw/hot"
+  route = "/__fw/hot",
+  waitForBuild,
+  onFileChange
 }) {
   const clients = /* @__PURE__ */ new Set();
   app.get(route, (req, res) => {
@@ -3176,9 +3223,25 @@ data: connected
     ignoreInitial: true,
     ignored: ["**/node_modules/**", `**/${BUILD_FOLDER_NAME}/**`, "**/.git/**"]
   });
-  function broadcastReload(reason, filePath) {
+  async function broadcastReload(reason, filePath) {
     const rel = import_path16.default.relative(appDir, filePath);
     console.log(`[hot-reload] ${reason}: ${rel}`);
+    if (onFileChange) {
+      try {
+        await onFileChange(filePath);
+      } catch (error) {
+        console.warn("[hot-reload] Error in onFileChange callback:", error);
+      }
+    }
+    if (waitForBuild) {
+      try {
+        console.log("[hot-reload] Waiting for client bundle to finish...");
+        await waitForBuild();
+        console.log("[hot-reload] Client bundle ready, sending reload event");
+      } catch (error) {
+        console.warn("[hot-reload] Error waiting for build:", error);
+      }
+    }
     for (const res of clients) {
       res.write(`event: message
 data: reload:${rel}
@@ -3317,14 +3380,29 @@ function setupServer(app, options) {
       };
     };
     var getRoutes = getRoutes2;
-    setupHotReload({ app, appDir });
+    const { outDir, waitForBuild } = startClientBundler(projectRoot, "development");
+    const onFileChange = async (filePath) => {
+      const rel = import_path19.default.relative(appDir, filePath);
+      const isPageFile = filePath.includes("page.tsx") || filePath.includes("page.ts") || filePath.includes("layout.tsx") || filePath.includes("layout.ts") || filePath.includes("_not-found") || filePath.includes("_error");
+      const isTsFile = filePath.endsWith(".ts") || filePath.endsWith(".tsx");
+      if (isTsFile) {
+        clearAppRequireCache(appDir);
+        console.log(`[hot-reload] Cleared require cache for: ${rel}`);
+      }
+      if (isPageFile) {
+        const loader = new FilesystemRouteLoader(appDir);
+        const newRoutes = loader.loadRoutes();
+        writeClientRoutesManifest(newRoutes, projectRoot);
+        console.log("[hot-reload] Client routes manifest reloaded");
+      }
+    };
+    setupHotReload({ app, appDir, waitForBuild, onFileChange });
+    app.use("/static", import_express.default.static(outDir));
     const routes = routeLoader.loadRoutes();
     const wssRoutes = routeLoader.loadWssRoutes();
     const notFoundPage = routeLoader.loadNotFoundRoute();
     const errorPage = routeLoader.loadErrorRoute();
     writeClientRoutesManifest(routes, projectRoot);
-    const { outDir } = startClientBundler(projectRoot);
-    app.use("/static", import_express.default.static(outDir));
     return {
       routes,
       wssRoutes,
@@ -4022,7 +4100,7 @@ async function handlePageRequest(options) {
     const { errorPage, req, res, routeChunks, theme, projectRoot } = options;
     const reqLogger = getRequestLogger(req);
     if (errorPage) {
-      await renderErrorPageWithStream(errorPage, req, res, error, routeChunks || {}, theme, projectRoot);
+      await renderErrorPageWithStream(errorPage, req, res, error, routeChunks || {}, theme, projectRoot, options.env);
     } else {
       reqLogger.error("Unhandled error in page request", error, {
         urlPath: options.urlPath,
@@ -4050,9 +4128,9 @@ async function handlePageRequestInternal(options) {
     theme,
     projectRoot
   } = options;
-  const clientJsPath = projectRoot ? getClientJsPath(projectRoot) : "/static/client.js";
-  const clientCssPath = projectRoot ? getClientCssPath(projectRoot) : "/static/client.css";
-  const assetManifest = projectRoot ? loadAssetManifest(projectRoot) : null;
+  const clientJsPath = env === "dev" ? "/static/client.js" : projectRoot ? getClientJsPath(projectRoot) : "/static/client.js";
+  const clientCssPath = env === "dev" ? "/static/client.css" : projectRoot ? getClientCssPath(projectRoot) : "/static/client.css";
+  const assetManifest = env === "prod" && projectRoot ? loadAssetManifest(projectRoot) : null;
   const isDataReq = isDataRequest(req);
   if (env === "prod" && ssgOutDir) {
     if (isDataReq) {
@@ -4108,7 +4186,7 @@ async function handlePageRequestInternal(options) {
           const reqLogger = getRequestLogger(req);
           reqLogger.error("SSR shell error", err, { route: "not-found" });
           if (!res.headersSent && errorPage) {
-            renderErrorPageWithStream(errorPage, req, res, err, routeChunks);
+            renderErrorPageWithStream(errorPage, req, res, err, routeChunks, theme, projectRoot, env);
           } else if (!res.headersSent) {
             res.statusCode = 500;
             res.setHeader("Content-Type", "text/html; charset=utf-8");
@@ -4155,7 +4233,7 @@ async function handlePageRequestInternal(options) {
       return;
     } else {
       if (errorPage) {
-        await renderErrorPageWithStream(errorPage, req, res, error, routeChunks, theme, projectRoot);
+        await renderErrorPageWithStream(errorPage, req, res, error, routeChunks, theme, projectRoot, env);
         return;
       } else {
         throw error;
@@ -4217,7 +4295,7 @@ async function handlePageRequestInternal(options) {
       const reqLogger = getRequestLogger(req);
       reqLogger.error("SSR shell error", err, { route: matched?.route?.pattern || "unknown" });
       if (!res.headersSent && errorPage) {
-        renderErrorPageWithStream(errorPage, req, res, err, routeChunks, theme, projectRoot);
+        renderErrorPageWithStream(errorPage, req, res, err, routeChunks, theme, projectRoot, env);
       } else if (!res.headersSent) {
         res.statusCode = 500;
         res.setHeader("Content-Type", "text/html; charset=utf-8");
@@ -4235,7 +4313,7 @@ async function handlePageRequestInternal(options) {
     abort();
   });
 }
-async function renderErrorPageWithStream(errorPage, req, res, error, routeChunks, theme, projectRoot) {
+async function renderErrorPageWithStream(errorPage, req, res, error, routeChunks, theme, projectRoot, env = "dev") {
   try {
     const isDataReq = isDataRequest(req);
     const ctx = {
@@ -4264,9 +4342,9 @@ async function renderErrorPageWithStream(errorPage, req, res, error, routeChunks
       return;
     }
     const appTree = buildAppTree(errorPage, { error: String(error) }, initialData.props);
-    const clientJsPath = projectRoot ? getClientJsPath(projectRoot) : "/static/client.js";
-    const clientCssPath = projectRoot ? getClientCssPath(projectRoot) : "/static/client.css";
-    const assetManifest = projectRoot ? loadAssetManifest(projectRoot) : null;
+    const clientJsPath = env === "dev" ? "/static/client.js" : projectRoot ? getClientJsPath(projectRoot) : "/static/client.js";
+    const clientCssPath = env === "dev" ? "/static/client.css" : projectRoot ? getClientCssPath(projectRoot) : "/static/client.css";
+    const assetManifest = env === "prod" && projectRoot ? loadAssetManifest(projectRoot) : null;
     const chunkName = routeChunks[ERROR_CHUNK_KEY];
     let chunkHref = null;
     if (chunkName != null) {
@@ -5141,11 +5219,6 @@ var import_react2 = require("react");
 // modules/runtime/client/RouterView.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function RouterView({ state }) {
-  console.log("[loly:RouterView] Rendering", {
-    url: state.url,
-    hasRoute: !!state.route,
-    hasComponents: !!state.components
-  });
   if (!state.route) {
     if (state.components === null) {
       return null;
@@ -5157,11 +5230,6 @@ function RouterView({ state }) {
   }
   const { Page, layouts } = state.components;
   const { params, props } = state;
-  console.log("[loly:RouterView] Creating page element", {
-    hasPage: !!Page,
-    layoutsCount: layouts.length,
-    paramsKeys: Object.keys(params)
-  });
   let element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Page, { params, ...props });
   const layoutChain = layouts.slice().reverse();
   for (const Layout of layoutChain) {
@@ -5467,7 +5535,6 @@ async function navigate(nextUrl, handlers, options) {
       revalidate: options?.revalidate
     });
     if (json && json.error) {
-      console.log("[client] Error detected in response:", json);
       if (errorRoute) {
         const handled = await handleErrorRoute(
           nextUrl,
@@ -5509,50 +5576,23 @@ async function navigate(nextUrl, handlers, options) {
 }
 function createClickHandler(navigate2) {
   return function handleClick(ev) {
-    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.defaultPrevented) return;
+      if (ev.type !== "click") return;
+      if (ev.button !== 0) return;
+      if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return;
+      const target = ev.target;
       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 });
+          const tagName2 = target.tagName.toLowerCase();
+          if (tagName2 === "input" || tagName2 === "textarea" || tagName2 === "button" || tagName2 === "select") {
             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 });
+      if (!target) return;
+      const tagName = target.tagName.toLowerCase();
+      if (tagName === "input" || tagName === "textarea" || tagName === "button" || tagName === "select" || target.isContentEditable || target.getAttribute("contenteditable") === "true") {
         return;
       }
       const interactiveParent = target.closest("input, textarea, button, select, [contenteditable], label");
@@ -5560,60 +5600,29 @@ function createClickHandler(navigate2) {
         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")
-      });
+      if (!anchor) return;
       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;
-      }
+      if (!href) return;
+      if (href.startsWith("#")) 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;
-      }
+      if (url.origin !== window.location.origin) return;
+      if (anchor.target && anchor.target !== "_self") 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;
-      }
+      if (nextUrl === currentUrl) 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);
+      console.error("[navigation] Error in click handler:", error);
     }
   };
 }
@@ -5632,10 +5641,6 @@ function AppShell({
   notFoundRoute,
   errorRoute
 }) {
-  console.log("[loly:AppShell] Component rendering", {
-    url: initialState.url,
-    hasRoute: !!initialState.route
-  });
   const [state, setState] = (0, import_react2.useState)(initialState);
   const handlersRef = (0, import_react2.useRef)({
     setState,
@@ -5644,11 +5649,6 @@ function AppShell({
     errorRoute
   });
   (0, import_react2.useEffect)(() => {
-    console.log("[loly:AppShell] Updating handlersRef", {
-      routesCount: routes.length,
-      hasNotFound: !!notFoundRoute,
-      hasError: !!errorRoute
-    });
     handlersRef.current = {
       setState,
       routes,
@@ -5657,34 +5657,16 @@ function AppShell({
     };
   }, [routes, notFoundRoute, errorRoute]);
   (0, import_react2.useEffect)(() => {
-    const effectId = Math.random().toString(36).substring(7);
-    console.log("[loly:AppShell] Setting up event listeners", { effectId });
     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);
+      if (!isMounted) return;
       await navigate(nextUrl, handlersRef.current, options);
     }
     const handleClick = createClickHandler(handleNavigate);
     const handlePopState = createPopStateHandler(handleNavigate);
     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 () => {
-      console.log("[loly:AppShell] Cleaning up event listeners", {
-        effectId,
-        wasMounted: isMounted,
-        listenersToRemove: listenerCount
-      });
       isMounted = false;
       window.removeEventListener("click", handleClick, false);
       window.removeEventListener("popstate", handlePopState, false);
@@ -5699,7 +5681,6 @@ function AppShell({
 
 // modules/runtime/client/bootstrap.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var __loly_hydrated = false;
 async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute, errorRoute) {
   const isInitialNotFound = initialData?.notFound === true;
   const isInitialError = initialData?.error === true;
@@ -5726,7 +5707,7 @@ async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute,
       initialComponents = await notFoundRoute.load();
     } else {
       console.warn(
-        `[client] No route match found for ${initialUrl}. Routes:`,
+        `[client] No route match found for ${initialUrl}. Available routes:`,
         routes.map((r) => r.pattern)
       );
     }
@@ -5739,29 +5720,57 @@ async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute,
     props: initialData?.props ?? {}
   };
 }
-function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
-  if (__loly_hydrated) {
-    console.warn("[loly:runtime] bootstrapClient SKIPPED (already hydrated)");
-    return;
+function setupHotReload2() {
+  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, ")");
+      }
+    };
+  } catch (error) {
+    console.log("[hot-reload] EventSource not supported or error:", error);
   }
-  __loly_hydrated = true;
-  console.log("[loly:runtime] bootstrapClient START");
+}
+function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
+  console.log("[client] Bootstrap starting, setting up hot reload...");
+  setupHotReload2();
   (async function bootstrap() {
     const container = document.getElementById(APP_CONTAINER_ID2);
     const initialData = getWindowData();
-    console.log("[loly:runtime] bootstrap starting", {
-      hasContainer: !!container,
-      hasInitialData: !!initialData,
-      containerId: APP_CONTAINER_ID2
-    });
     if (!container) {
-      console.error(
-        `[loly:runtime] Container #${APP_CONTAINER_ID2} not found.`
-      );
+      console.error(`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,
@@ -5770,15 +5779,9 @@ 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)(
@@ -5791,9 +5794,12 @@ function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
           }
         )
       );
-      console.log("[loly:runtime] Hydrated successfully");
     } catch (error) {
-      console.error("[loly:runtime] Error during hydration:", error);
+      console.error(
+        "[client] Error loading initial route components for",
+        initialUrl,
+        error
+      );
       window.location.reload();
     }
   })();