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

package/dist/runtime.cjs

@@ -1,8 +1,13 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 });
@@ -15,8 +20,104 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// modules/runtime/client/mount-client-islands.ts
+var mount_client_islands_exports = {};
+__export(mount_client_islands_exports, {
+  mountClientIslands: () => mountClientIslands
+});
+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 = (0, import_client.createRoot)(placeholderElement);
+      root.render(import_react4.default.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 = (0, import_client.createRoot)(placeholderElement);
+      root.render(
+        import_react4.default.createElement(
+          "div",
+          { style: { padding: "1rem", border: "1px solid red", color: "red" } },
+          "Failed to load component"
+        )
+      );
+    }
+  });
+  await Promise.all(promises);
+}
+var import_react4, import_client;
+var init_mount_client_islands = __esm({
+  "modules/runtime/client/mount-client-islands.ts"() {
+    "use strict";
+    import_react4 = __toESM(require("react"));
+    import_client = require("react-dom/client");
+  }
+});
+
 // modules/runtime/client/index.tsx
 var client_exports = {};
 __export(client_exports, {
@@ -25,7 +126,7 @@ __export(client_exports, {
 module.exports = __toCommonJS(client_exports);
 
 // modules/runtime/client/bootstrap.tsx
-var import_client = require("react-dom/client");
+var import_client2 = require("react-dom/client");
 
 // modules/runtime/client/constants.ts
 var WINDOW_DATA_KEY = "__FW_DATA__";
@@ -285,9 +386,10 @@ function applyMetadata(md) {
 }
 
 // modules/runtime/client/AppShell.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // modules/runtime/client/RouterView.tsx
+var import_react = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function RouterView({ state }) {
   if (!state.route) {
@@ -299,12 +401,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__ */ (0, import_jsx_runtime.jsx)(Page, { params, ...props });
+  let element = isPageClientComponent && clientComponentFilePaths?.page ? null : import_react.default.createElement(Page, { params, ...props });
   const layoutChain = layouts.slice().reverse();
-  for (const Layout of layoutChain) {
-    element = /* @__PURE__ */ (0, import_jsx_runtime.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 : import_react.default.createElement(Layout, { params, ...props, children: element });
   }
   return element;
 }
@@ -468,9 +581,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=([^;]+)/);
@@ -591,7 +741,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,
@@ -676,9 +827,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,
@@ -840,8 +992,8 @@ function createPopStateHandler(navigate2) {
 }
 
 // modules/runtime/client/RouterContext.tsx
-var import_react = require("react");
-var RouterContext = (0, import_react.createContext)(null);
+var import_react2 = require("react");
+var RouterContext = (0, import_react2.createContext)(null);
 
 // modules/runtime/client/AppShell.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -851,14 +1003,14 @@ function AppShell({
   notFoundRoute,
   errorRoute
 }) {
-  const [state, setState] = (0, import_react2.useState)(initialState);
-  const handlersRef = (0, import_react2.useRef)({
+  const [state, setState] = (0, import_react3.useState)(initialState);
+  const handlersRef = (0, import_react3.useRef)({
     setState,
     routes,
     notFoundRoute,
     errorRoute
   });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     handlersRef.current = {
       setState,
       routes,
@@ -866,7 +1018,7 @@ function AppShell({
       errorRoute
     };
   }, [routes, notFoundRoute, errorRoute]);
-  const handleNavigate = (0, import_react2.useCallback)(
+  const handleNavigate = (0, import_react3.useCallback)(
     async (nextUrl, options) => {
       await navigate(nextUrl, handlersRef.current, {
         revalidate: options?.revalidate
@@ -874,7 +1026,7 @@ function AppShell({
     },
     []
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useLayoutEffect)(() => {
     if (typeof window !== "undefined") {
       window[ROUTER_NAVIGATE_KEY] = handleNavigate;
       return () => {
@@ -882,7 +1034,7 @@ function AppShell({
       };
     }
   }, [handleNavigate]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     let isMounted = true;
     async function handleNavigateInternal(nextUrl, options) {
       if (!isMounted) return;
@@ -901,7 +1053,7 @@ function AppShell({
       window.removeEventListener("mouseover", handleHover, false);
     };
   }, [routes, notFoundRoute]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const handleDataRefresh = () => {
       const freshData = window[WINDOW_DATA_KEY];
       if (!freshData) return;
@@ -1015,6 +1167,42 @@ function setupHotReload() {
 
 // modules/runtime/client/bootstrap.tsx
 var import_jsx_runtime3 = require("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;
@@ -1024,21 +1212,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:`,
@@ -1054,6 +1246,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) {
@@ -1083,7 +1281,7 @@ async function hydrateInitialRoute(container, initialUrl, initialData, routes, n
         console.warn("[client] Error applying metadata:", metadataError);
       }
     }
-    (0, import_client.hydrateRoot)(
+    (0, import_client2.hydrateRoot)(
       container,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         AppShell,
@@ -1125,6 +1323,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 = (0, import_client2.createRoot)(container);
+        root.render(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            AppShell,
+            {
+              initialState,
+              routes,
+              notFoundRoute,
+              errorRoute
+            }
+          )
+        );
+        return;
+      }
       await hydrateInitialRoute(
         container,
         initialUrl,
@@ -1133,6 +1364,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);