@lolyjs/core 0.3.0-alpha.6 → 0.4.0-alpha.0

package/dist/runtime.mjs

@@ -1,5 +1,102 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// modules/runtime/client/mount-client-islands.ts
+var mount_client_islands_exports = {};
+__export(mount_client_islands_exports, {
+  mountClientIslands: () => mountClientIslands
+});
+import React2 from "react";
+import { createRoot } from "react-dom/client";
+function getClientComponentLoaders() {
+  if (typeof window === "undefined") return null;
+  return window.__LOLY_CLIENT_COMPONENT_LOADERS__ || null;
+}
+function normalizeClientFilePath(filePath) {
+  return filePath.replace(/\\/g, "/");
+}
+async function loadClientComponentModule(filePath) {
+  const loaders = getClientComponentLoaders();
+  if (!loaders) {
+    throw new Error(
+      `[client] Missing __LOLY_CLIENT_COMPONENT_LOADERS__. Expected bootstrap to register loaders from .loly/client-components-loaders.ts`
+    );
+  }
+  const normalized = normalizeClientFilePath(filePath);
+  const loader = loaders[normalized];
+  if (!loader) {
+    const known = Object.keys(loaders);
+    throw new Error(
+      `[client] No loader found for "${normalized}". Known loaders: ${known.slice(0, 10).join(", ")}${known.length > 10 ? "..." : ""}`
+    );
+  }
+  return loader();
+}
+async function loadClientComponentExport(filePath, exportName = "default") {
+  const mod = await loadClientComponentModule(filePath);
+  return exportName === "default" ? mod.default : mod[exportName];
+}
+async function mountClientIslands(container) {
+  const placeholders = container.querySelectorAll("[data-client-component]");
+  if (placeholders.length === 0) return;
+  const promises = Array.from(placeholders).map(async (placeholder) => {
+    const filePath = placeholder.getAttribute("data-client-file");
+    const exportName = placeholder.getAttribute("data-export-name") || "default";
+    const propsJson = placeholder.getAttribute("data-client-props");
+    if (!filePath) {
+      console.warn("[client] Missing filePath for component");
+      return;
+    }
+    let props = {};
+    if (propsJson) {
+      try {
+        props = JSON.parse(propsJson);
+      } catch (e) {
+        console.warn("[client] Failed to parse props", e);
+      }
+    }
+    try {
+      const Component = await loadClientComponentExport(filePath, exportName);
+      if (!Component) throw new Error(`Component export "${exportName}" not found`);
+      const placeholderElement = placeholder;
+      while (placeholderElement.firstChild) {
+        placeholderElement.removeChild(placeholderElement.firstChild);
+      }
+      const root = createRoot(placeholderElement);
+      root.render(React2.createElement(Component, props));
+    } catch (error) {
+      console.error("[client] Failed to mount component:", error);
+      const placeholderElement = placeholder;
+      while (placeholderElement.firstChild) {
+        placeholderElement.removeChild(placeholderElement.firstChild);
+      }
+      const root = createRoot(placeholderElement);
+      root.render(
+        React2.createElement(
+          "div",
+          { style: { padding: "1rem", border: "1px solid red", color: "red" } },
+          "Failed to load component"
+        )
+      );
+    }
+  });
+  await Promise.all(promises);
+}
+var init_mount_client_islands = __esm({
+  "modules/runtime/client/mount-client-islands.ts"() {
+    "use strict";
+  }
+});
+
 // modules/runtime/client/bootstrap.tsx
-import { hydrateRoot } from "react-dom/client";
+import { hydrateRoot, createRoot as createRoot2 } from "react-dom/client";
 
 // modules/runtime/client/constants.ts
 var WINDOW_DATA_KEY = "__FW_DATA__";
@@ -259,9 +356,10 @@ function applyMetadata(md) {
 }
 
 // modules/runtime/client/AppShell.tsx
-import { useEffect, useState, useRef, useCallback } from "react";
+import { useEffect, useState, useRef, useCallback, useLayoutEffect } from "react";
 
 // modules/runtime/client/RouterView.tsx
+import React from "react";
 import { jsx } from "react/jsx-runtime";
 function RouterView({ state }) {
   if (!state.route) {
@@ -273,12 +371,23 @@ function RouterView({ state }) {
   if (!state.components) {
     return null;
   }
-  const { Page, layouts } = state.components;
+  const {
+    Page,
+    layouts,
+    isPageClientComponent,
+    isLayoutClientComponent,
+    clientComponentFilePaths
+  } = state.components;
   const { params, props } = state;
-  let element = /* @__PURE__ */ jsx(Page, { params, ...props });
+  let element = isPageClientComponent && clientComponentFilePaths?.page ? null : React.createElement(Page, { params, ...props });
   const layoutChain = layouts.slice().reverse();
-  for (const Layout of layoutChain) {
-    element = /* @__PURE__ */ jsx(Layout, { params, ...props, children: element });
+  const isLayoutClientComponentReversed = (isLayoutClientComponent || []).slice().reverse();
+  const clientComponentLayoutPaths = (clientComponentFilePaths?.layouts || []).slice().reverse();
+  for (let i = 0; i < layoutChain.length; i++) {
+    const Layout = layoutChain[i];
+    const isClient = isLayoutClientComponentReversed[i];
+    const layoutPath = clientComponentLayoutPaths[i];
+    element = isClient && layoutPath ? element : React.createElement(Layout, { params, ...props, children: element });
   }
   return element;
 }
@@ -442,9 +551,46 @@ async function getRouteData(url, options) {
 }
 
 // modules/runtime/client/navigation.ts
+function detectClientComponents(routePattern, components) {
+  let dependenciesManifest = null;
+  if (typeof window !== "undefined" && window.__LOLY_ROUTE_DEPENDENCIES__) {
+    dependenciesManifest = window.__LOLY_ROUTE_DEPENDENCIES__;
+  }
+  if (!dependenciesManifest || !dependenciesManifest.routes) {
+    return components;
+  }
+  const routeDeps = dependenciesManifest.routes[routePattern];
+  if (!routeDeps) {
+    return components;
+  }
+  const isPageClientComponent = routeDeps.isPageClientComponent || false;
+  const pageFilePath = routeDeps.pageFilePath || (routePattern === "/" ? "app/page.tsx" : `app${routePattern}/page.tsx`);
+  const isLayoutClientComponent = routeDeps.isLayoutClientComponent ? routeDeps.isLayoutClientComponent.slice(0, components.layouts.length) : new Array(components.layouts.length).fill(false);
+  const layoutFilePaths = routeDeps.layoutFilePaths || [];
+  const clientComponentLayoutPaths = new Array(components.layouts.length).fill(void 0);
+  if (routeDeps.isLayoutClientComponent && routeDeps.layoutFilePaths) {
+    let layoutFilePathIndex = 0;
+    for (let i = 0; i < isLayoutClientComponent.length; i++) {
+      if (isLayoutClientComponent[i] && layoutFilePathIndex < routeDeps.layoutFilePaths.length) {
+        clientComponentLayoutPaths[i] = routeDeps.layoutFilePaths[layoutFilePathIndex];
+        layoutFilePathIndex++;
+      }
+    }
+  }
+  return {
+    ...components,
+    isPageClientComponent,
+    isLayoutClientComponent,
+    clientComponentFilePaths: {
+      page: isPageClientComponent ? pageFilePath : void 0,
+      layouts: clientComponentLayoutPaths.some((p) => p !== void 0) ? clientComponentLayoutPaths : void 0
+    }
+  };
+}
 async function handleErrorRoute(nextUrl, json, errorRoute, setState) {
   try {
-    const components = await errorRoute.load();
+    const loadedComponents = await errorRoute.load();
+    const components = detectClientComponents(errorRoute.pattern, loadedComponents);
     let theme = "light";
     if (typeof document !== "undefined") {
       const cookieMatch = document.cookie.match(/theme=([^;]+)/);
@@ -565,7 +711,8 @@ async function handleNotFoundRoute(nextUrl, json, notFoundRoute, setState) {
   };
   setRouterData(routerData);
   if (notFoundRoute) {
-    const components = await notFoundRoute.load();
+    const loadedComponents = await notFoundRoute.load();
+    const components = detectClientComponents(notFoundRoute.pattern, loadedComponents);
     setState({
       url: nextUrl,
       route: notFoundRoute,
@@ -650,9 +797,10 @@ async function handleNormalRoute(nextUrl, json, routes, setState) {
   };
   setRouterData(routerData);
   const prefetched = prefetchedRoutes.get(matched.route);
-  const components = prefetched ? await prefetched : await matched.route.load();
+  const loadedComponents = prefetched ? await prefetched : await matched.route.load();
+  const components = detectClientComponents(matched.route.pattern, loadedComponents);
   if (!prefetched) {
-    prefetchedRoutes.set(matched.route, Promise.resolve(components));
+    prefetchedRoutes.set(matched.route, Promise.resolve(loadedComponents));
   }
   window.scrollTo({
     top: 0,
@@ -848,7 +996,7 @@ function AppShell({
     },
     []
   );
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (typeof window !== "undefined") {
       window[ROUTER_NAVIGATE_KEY] = handleNavigate;
       return () => {
@@ -989,6 +1137,42 @@ function setupHotReload() {
 
 // modules/runtime/client/bootstrap.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
+function detectClientComponents2(routePattern, components) {
+  let dependenciesManifest = null;
+  if (typeof window !== "undefined" && window.__LOLY_ROUTE_DEPENDENCIES__) {
+    dependenciesManifest = window.__LOLY_ROUTE_DEPENDENCIES__;
+  }
+  if (!dependenciesManifest || !dependenciesManifest.routes) {
+    return components;
+  }
+  const routeDeps = dependenciesManifest.routes[routePattern];
+  if (!routeDeps) {
+    return components;
+  }
+  const isPageClientComponent = routeDeps.isPageClientComponent || false;
+  const pageFilePath = routeDeps.pageFilePath || (routePattern === "/" ? "app/page.tsx" : `app${routePattern}/page.tsx`);
+  const isLayoutClientComponent = routeDeps.isLayoutClientComponent ? routeDeps.isLayoutClientComponent.slice(0, components.layouts.length) : new Array(components.layouts.length).fill(false);
+  const layoutFilePaths = routeDeps.layoutFilePaths || [];
+  const clientComponentLayoutPaths = new Array(components.layouts.length).fill(void 0);
+  if (routeDeps.isLayoutClientComponent && routeDeps.layoutFilePaths) {
+    let layoutFilePathIndex = 0;
+    for (let i = 0; i < isLayoutClientComponent.length; i++) {
+      if (isLayoutClientComponent[i] && layoutFilePathIndex < routeDeps.layoutFilePaths.length) {
+        clientComponentLayoutPaths[i] = routeDeps.layoutFilePaths[layoutFilePathIndex];
+        layoutFilePathIndex++;
+      }
+    }
+  }
+  return {
+    ...components,
+    isPageClientComponent,
+    isLayoutClientComponent,
+    clientComponentFilePaths: {
+      page: isPageClientComponent ? pageFilePath : void 0,
+      layouts: clientComponentLayoutPaths.some((p) => p !== void 0) ? clientComponentLayoutPaths : void 0
+    }
+  };
+}
 async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute, errorRoute) {
   const isInitialNotFound = initialData?.notFound === true;
   const isInitialError = initialData?.error === true;
@@ -998,21 +1182,25 @@ async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute,
   if (isInitialError && errorRoute) {
     initialRoute = errorRoute;
     initialParams = initialData?.params ?? {};
-    initialComponents = await errorRoute.load();
+    const loaded = await errorRoute.load();
+    initialComponents = detectClientComponents2(errorRoute.pattern, loaded);
   } else if (isInitialNotFound && notFoundRoute) {
     initialRoute = notFoundRoute;
     initialParams = {};
-    initialComponents = await notFoundRoute.load();
+    const loaded = await notFoundRoute.load();
+    initialComponents = detectClientComponents2(notFoundRoute.pattern, loaded);
   } else {
     const match = matchRouteClient(initialUrl, routes);
     if (match) {
       initialRoute = match.route;
       initialParams = match.params;
-      initialComponents = await match.route.load();
+      const loaded = await match.route.load();
+      initialComponents = detectClientComponents2(match.route.pattern, loaded);
     } else if (notFoundRoute) {
       initialRoute = notFoundRoute;
       initialParams = {};
-      initialComponents = await notFoundRoute.load();
+      const loaded = await notFoundRoute.load();
+      initialComponents = detectClientComponents2(notFoundRoute.pattern, loaded);
     } else {
       console.warn(
         `[client] No route match found for ${initialUrl}. Available routes:`,
@@ -1028,6 +1216,12 @@ async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute,
     props: initialData?.props ?? {}
   };
 }
+function getRouteDependencies(routePattern) {
+  if (typeof window === "undefined") return null;
+  const deps = window.__LOLY_ROUTE_DEPENDENCIES__;
+  if (!deps || !deps.routes) return null;
+  return deps.routes[routePattern] || null;
+}
 function initializeRouterData(initialUrl, initialData) {
   let routerData = getRouterData();
   if (!routerData) {
@@ -1099,6 +1293,39 @@ function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
       }
       const routerPathname = initialData?.pathname || window.location.pathname;
       initializeRouterData(routerPathname + window.location.search, initialData);
+      const routePattern = initialData?.pathname || window.location.pathname;
+      const routeDeps = getRouteDependencies(routePattern);
+      const hasClientIslands = !!routeDeps && (routeDeps.isPageClientComponent === true || routeDeps.isLayoutClientComponent && routeDeps.isLayoutClientComponent.some((v) => v) || routeDeps.directClientComponents && routeDeps.directClientComponents.length > 0);
+      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);
+        }
+      }
+      if (hasClientIslands) {
+        container.innerHTML = "";
+        const root = createRoot2(container);
+        root.render(
+          /* @__PURE__ */ jsx3(
+            AppShell,
+            {
+              initialState,
+              routes,
+              notFoundRoute,
+              errorRoute
+            }
+          )
+        );
+        return;
+      }
       await hydrateInitialRoute(
         container,
         initialUrl,
@@ -1107,6 +1334,19 @@ function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
         notFoundRoute,
         errorRoute
       );
+      try {
+        await new Promise((resolve) => {
+          if (typeof queueMicrotask !== "undefined") {
+            queueMicrotask(resolve);
+          } else {
+            setTimeout(resolve, 0);
+          }
+        });
+        const { mountClientIslands: mountClientIslands2 } = await Promise.resolve().then(() => (init_mount_client_islands(), mount_client_islands_exports));
+        await mountClientIslands2(container);
+      } catch (error) {
+        console.warn("[client] Failed to mount client component islands:", error);
+      }
     } catch (error) {
       console.error("\n\u274C [client] Fatal error during bootstrap:");
       console.error(error);