@modern-js/runtime 3.0.4 → 3.0.5

package/dist/esm/router/runtime/rsc-router.mjs

@@ -3,8 +3,9 @@ import { ElementsContext, createFromReadableStream } from "@modern-js/render/cli
 import { StaticRouterProvider, createBrowserRouter, createStaticRouter, redirect } from "@modern-js/runtime-utils/router";
 import react from "react";
 import { CSSLinks } from "./CSSLinks.mjs";
-const safeUse = (promise)=>{
-    if ('function' == typeof react.use) return react.use(promise);
+const safeUse = (value)=>{
+    const reactUse = react.use;
+    if ('function' == typeof reactUse) return reactUse(value);
     return null;
 };
 function collectCssFilesFromRoutes(matches, routes) {
@@ -22,6 +23,17 @@ function collectCssFilesFromRoutes(matches, routes) {
 }
 const createServerPayload = (routerContext, routes)=>{
     const cssFiles = collectCssFilesFromRoutes(routerContext.matches, routes);
+    let cssInjectionIndex = -1;
+    if (cssFiles.length > 0) {
+        for(let i = routerContext.matches.length - 1; i >= 0; i--){
+            const matchRoute = findRouteInTree(routes, routerContext.matches[i].route.id);
+            if (matchRoute && !matchRoute.isClientComponent) {
+                cssInjectionIndex = i;
+                break;
+            }
+        }
+        if (-1 === cssInjectionIndex) cssInjectionIndex = routerContext.matches.length - 1;
+    }
     return {
         type: 'render',
         actionData: routerContext.actionData,
@@ -29,45 +41,42 @@ const createServerPayload = (routerContext, routes)=>{
         loaderData: routerContext.loaderData,
         location: routerContext.location,
         routes: routerContext.matches.map((match, index, matches)=>{
-            const element = match.route.element;
+            const route = match.route;
+            const element = route.element;
             const parentMatch = index > 0 ? matches[index - 1] : void 0;
             let processedElement;
             if (element) {
                 const ElementComponent = element.type;
                 const elementProps = {
-                    loaderData: routerContext?.loaderData?.[match.route.id],
-                    actionData: routerContext?.actionData?.[match.route.id],
+                    loaderData: routerContext?.loaderData?.[route.id],
+                    actionData: routerContext?.actionData?.[route.id],
                     params: match.params,
-                    matches: routerContext.matches.map((m)=>{
-                        const { route, pathname, params } = m;
-                        return {
-                            id: route.id,
-                            pathname,
-                            params,
-                            data: routerContext?.loaderData?.[route.id],
-                            handle: route.handle
-                        };
-                    })
+                    matches: routerContext.matches.map((m)=>({
+                            id: m.route.id,
+                            pathname: m.pathname,
+                            params: m.params,
+                            data: routerContext?.loaderData?.[m.route.id],
+                            handle: m.route.handle
+                        }))
                 };
                 const routeElement = /*#__PURE__*/ react.createElement(ElementComponent, elementProps);
-                const isLeafRoute = index === routerContext.matches.length - 1;
-                processedElement = isLeafRoute && cssFiles.length > 0 ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CSSLinks, {
+                processedElement = index === cssInjectionIndex ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CSSLinks, {
                     cssFiles
                 }), routeElement) : routeElement;
             }
             return {
                 element: processedElement,
-                errorElement: match.route.errorElement,
-                handle: match.route.handle,
-                hasAction: !!match.route.action,
-                hasErrorBoundary: !!match.route.hasErrorBoundary,
-                hasLoader: !!match.route.loader,
-                hasClientLoader: !!match.route.hasClientLoader,
-                id: match.route.id,
-                index: match.route.index,
+                errorElement: route.errorElement,
+                handle: route.handle,
+                hasAction: !!route.action,
+                hasErrorBoundary: !!route.hasErrorBoundary,
+                hasLoader: !!route.loader,
+                hasClientLoader: !!route.hasClientLoader,
+                id: route.id,
+                index: route.index,
                 params: match.params,
-                parentId: parentMatch?.route.id || match.route.parentId,
-                path: match.route.path,
+                parentId: parentMatch?.route.id || route.parentId,
+                path: route.path,
                 pathname: match.pathname,
                 pathnameBase: match.pathnameBase
             };
@@ -87,10 +96,11 @@ const handleRSCRedirect = (headers, basename, status)=>{
     });
 };
 const prepareRSCRoutes = async (routes)=>{
-    const isLazyComponent = (component)=>component && 'object' == typeof component && void 0 !== component._init && void 0 !== component._payload;
+    const isLazyComponent = (component)=>null != component && 'object' == typeof component && '_init' in component && '_payload' in component;
     const processRoutes = async (routesList)=>{
         await Promise.all(routesList.map(async (route)=>{
-            if ('lazyImport' in route && isLazyComponent(route.component)) route.component = (await route.lazyImport()).default;
+            const modernRoute = route;
+            if ('lazyImport' in modernRoute && isLazyComponent(modernRoute.component)) modernRoute.component = (await modernRoute.lazyImport()).default;
             if (route.children && Array.isArray(route.children)) await processRoutes(route.children);
         }));
     };
@@ -107,12 +117,14 @@ const mergeRoutes = (routes, originalRoutes)=>{
     };
     buildRoutesMap(routes);
     const mergeRoutesRecursive = (origRoutes)=>origRoutes.map((origRoute)=>{
-            if (origRoute.id && routesMap.has(origRoute.id)) {
-                const matchedRoute = routesMap.get(origRoute.id);
+            const modernOrig = origRoute;
+            if (modernOrig.id && routesMap.has(modernOrig.id)) {
+                const matchedRoute = routesMap.get(modernOrig.id);
                 const result = {
-                    loader: origRoute.hasClientLoader ? origRoute.loader : void 0,
+                    loader: modernOrig.hasClientLoader ? modernOrig.loader : void 0,
                     ...matchedRoute
                 };
+                if (modernOrig.isClientComponent) result.isClientComponent = true;
                 if (origRoute.children && Array.isArray(origRoute.children)) result.children = mergeRoutesRecursive(origRoute.children);
                 return result;
             }
@@ -130,6 +142,68 @@ const findRouteInTree = (routes, routeId)=>{
     }
     return null;
 };
+function getChangedMatches(matches, currentMatches) {
+    const currentById = new Map();
+    for (const m of currentMatches)if (m.route?.id) currentById.set(m.route.id, m);
+    return matches.filter((match)=>{
+        const current = currentById.get(match.route?.id);
+        return !current || JSON.stringify(current.params) !== JSON.stringify(match.params);
+    });
+}
+function canSkipRscFetch(matches, routerState) {
+    const changedMatches = getChangedMatches(matches, routerState?.matches || []);
+    return changedMatches.length > 0 && changedMatches.every((m)=>{
+        const route = m.route;
+        return route.isClientComponent && !(route.hasLoader && !route.hasClientLoader);
+    });
+}
+function injectRouteCss(routeId) {
+    if ("u" < typeof window) return;
+    const cssAssets = window._MODERNJS_ROUTE_MANIFEST?.routeAssets?.[routeId]?.referenceCssAssets;
+    if (!cssAssets) return;
+    const publicPath = window.__webpack_public_path__ || '/';
+    for (const css of cssAssets){
+        const href = css.startsWith('http') || css.startsWith('/') ? css : publicPath + css;
+        if (!document.querySelector(`link[href="${CSS.escape(href)}"]`)) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = href;
+            document.head.appendChild(link);
+        }
+    }
+}
+function ensureClientComponent(route, originalRoutes) {
+    if (route.isClientComponent && !route.Component) {
+        const origRoute = findRouteInTree(originalRoutes, route.id);
+        if (origRoute?.Component) {
+            route.Component = origRoute.Component;
+            delete route.element;
+        }
+    }
+}
+function resolveClientLoaders(matches, originalRoutes) {
+    const clientMatches = matches.filter((m)=>m.route.hasClientLoader);
+    if (0 === clientMatches.length) return Promise.resolve([]);
+    return Promise.all(clientMatches.map(async (clientMatch)=>{
+        const origRoute = findRouteInTree(originalRoutes, clientMatch.route.id);
+        clientMatch.route.loader = origRoute?.loader;
+        const result = await clientMatch.resolve();
+        return {
+            routeId: clientMatch.route.id,
+            result
+        };
+    }));
+}
+function applyLoaderResults(results, loaderResults) {
+    for (const { routeId, result } of loaderResults)results[routeId] = result;
+}
+async function resolveClientOnlyNavigation(matches, results, originalRoutes, routerState) {
+    const changedMatches = getChangedMatches(matches, routerState?.matches || []);
+    for (const match of changedMatches)ensureClientComponent(match.route, originalRoutes);
+    applyLoaderResults(results, await resolveClientLoaders(changedMatches, originalRoutes));
+    for (const match of changedMatches)if (match.route.id) injectRouteCss(match.route.id);
+    return results;
+}
 const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>{
     const processedRoutes = payload.routes.reduceRight((previous, route)=>{
         if (previous.length > 0) return [
@@ -146,42 +220,28 @@ const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>
     const router = createBrowserRouter(mergedRoutes, {
         hydrationData: payload,
         basename: basename,
-        dataStrategy: async (context)=>{
-            const { request, matches } = context;
+        dataStrategy: async ({ request, matches })=>{
             const results = {};
-            const clientMatches = matches.filter((match)=>match.route.hasClientLoader);
+            if (canSkipRscFetch(matches, router.state)) return resolveClientOnlyNavigation(matches, results, originalRoutes, router.state);
             const fetchPromise = fetch(request.url, {
                 headers: {
                     'x-rsc-tree': 'true'
                 }
             });
-            const clientLoadersPromise = clientMatches.length > 0 ? Promise.all(clientMatches.map(async (clientMatch)=>{
-                const foundRoute = findRouteInTree(originalRoutes, clientMatch.route.id);
-                clientMatch.route.loader = foundRoute?.loader;
-                const res = await clientMatch.resolve();
-                return {
-                    routeId: clientMatch.route.id,
-                    result: res
-                };
-            })) : Promise.resolve([]);
+            const clientLoadersPromise = resolveClientLoaders(matches, originalRoutes);
             const res = await fetchPromise;
             const redirectLocation = res.headers.get('X-Modernjs-Redirect');
             if (redirectLocation) {
                 matches.forEach((match)=>{
                     const routeId = match.route.id;
                     if (routeId) results[routeId] = {
-                        type: 'redirect',
+                        type: 'data',
                         result: redirect(redirectLocation)
                     };
                 });
                 return results;
             }
-            const [clientLoaderResults] = await Promise.all([
-                clientLoadersPromise
-            ]);
-            clientLoaderResults.forEach(({ routeId, result })=>{
-                results[routeId] = result;
-            });
+            applyLoaderResults(results, await clientLoadersPromise);
             if (!res.body) throw new Error('Response body is null');
             const payload = await createFromReadableStream(res.body);
             if ('object' != typeof payload || null === payload || void 0 === payload.type || 'render' !== payload.type) throw new Error('Unexpected payload type');
@@ -189,10 +249,14 @@ const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>
             matches.forEach((match)=>{
                 const routeId = match.route.id;
                 const matchedRoute = serverPayload.routes.find((route)=>route.id === routeId);
-                if (matchedRoute) router.patchRoutes(matchedRoute.parentId, [
-                    matchedRoute
-                ], true);
-                if (serverPayload.loaderData?.[routeId]) results[routeId] = {
+                if (matchedRoute) {
+                    const modernMatch = match.route;
+                    router.patchRoutes(matchedRoute.parentId ?? null, [
+                        matchedRoute
+                    ], true);
+                    if (modernMatch.isClientComponent && modernMatch.Component) delete modernMatch.Component;
+                }
+                if (serverPayload.loaderData && routeId in serverPayload.loaderData) results[routeId] = {
                     type: 'data',
                     result: serverPayload.loaderData[routeId]
                 };

package/dist/esm/router/runtime/utils.mjs

@@ -67,7 +67,12 @@ function getRouteObjects(routes, { globalApp, ssrMode, props }) {
                 ...'object' == typeof route.config ? route.config?.handle : {}
             },
             index: route.index,
+            hasLoader: !!route.loader,
             hasClientLoader: !!route.clientData,
+            hasAction: !!route.action,
+            ...route.isClientComponent ? {
+                isClientComponent: true
+            } : {},
             Component: route.component ? route.component : void 0,
             errorElement: route.error ? /*#__PURE__*/ jsx(route.error, {}) : void 0,
             children: route.children ? route.children.map((child)=>getRouteObjects([

package/dist/esm-node/router/cli/code/index.mjs

@@ -90,7 +90,9 @@ const generateCode = async (appContext, config, entrypoints, api)=>{
                         entryName: entrypoint.entryName,
                         internalDirectory,
                         splitRouteChunks: config?.output?.splitRouteChunks,
-                        isRscClient: isUseRsc(config)
+                        isRscClientBundle: isUseRsc(config),
+                        srcDirectory,
+                        internalSrcAlias: appContext.internalSrcAlias
                     })
                 });
                 if (entrypoint.nestedRoutesEntry && (isUseSSRBundle(config) || isUseRsc(config))) {
@@ -110,7 +112,9 @@ const generateCode = async (appContext, config, entrypoints, api)=>{
                         entryName: entrypoint.entryName,
                         internalDirectory,
                         splitRouteChunks: config?.output?.splitRouteChunks,
-                        isRscClient: false
+                        isRscClientBundle: false,
+                        srcDirectory,
+                        internalSrcAlias: appContext.internalSrcAlias
                     });
                     await fs.outputFile(path.resolve(internalDirectory, `./${entryName}/routes.server.js`), serverRoutesCode, 'utf8');
                 }

package/dist/esm-node/router/cli/code/templates.mjs

@@ -1,7 +1,8 @@
 import __rslib_shim_module__ from "node:module";
 const require = /*#__PURE__*/ __rslib_shim_module__.createRequire(/*#__PURE__*/ (()=>import.meta.url)());
+import { open as promises_open } from "node:fs/promises";
 import path from "path";
-import { findExists, formatImportPath, fs, getEntryOptions, isSSGEntry, slash } from "@modern-js/utils";
+import { JS_EXTENSIONS, findExists, formatImportPath, fs, getEntryOptions, isSSGEntry, slash } from "@modern-js/utils";
 import { ROUTE_MODULES } from "@modern-js/utils/universal/constants";
 import { APP_INIT_EXPORTED, TEMP_LOADERS_DIR } from "../constants.mjs";
 import { getPathWithoutExt, getServerLoadersFile, parseModule, replaceWithAlias } from "./utils.mjs";
@@ -72,7 +73,25 @@ const routesForServer = ({ routesForServerLoaderMatches })=>{
   `;
 };
 const createMatchReg = (keyword)=>new RegExp(`("${keyword}":\\s)"([^\n]+)"`, 'g');
-const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, splitRouteChunks = true, isRscClient = false })=>{
+async function hasUseClientDirective(componentPath, srcDirectory, internalSrcAlias) {
+    let realPath = componentPath;
+    if (internalSrcAlias && srcDirectory && realPath.startsWith(internalSrcAlias)) realPath = path.join(srcDirectory, realPath.slice(internalSrcAlias.length));
+    const filePath = findExists(JS_EXTENSIONS.map((ext)=>`${realPath}${ext}`));
+    if (!filePath) return false;
+    let fh;
+    try {
+        fh = await promises_open(filePath, 'r');
+        const buf = Buffer.alloc(64);
+        const { bytesRead } = await fh.read(buf, 0, 64, 0);
+        const content = buf.toString('utf-8', 0, bytesRead).trimStart();
+        return content.startsWith("'use client'") || content.startsWith('"use client"');
+    } catch  {
+        return false;
+    } finally{
+        await fh?.close();
+    }
+}
+const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, splitRouteChunks = true, isRscClientBundle = false, srcDirectory, internalSrcAlias })=>{
     const components = [];
     const loadings = [];
     const errors = [];
@@ -97,9 +116,9 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
         const importOptions = webpackChunkName ? `/* webpackChunkName: "${routeId}" */  ` : eager ? '/* webpackMode: "eager" */  ' : '';
         return `() => import(${importOptions}'${componentPath}').then(routeModule => handleRouteModule(routeModule, "${routeId}")).catch(handleRouteModuleError)`;
     };
-    const traverseRouteTree = (route, isRscClient)=>{
+    const traverseRouteTree = async (route, isRscClientBundle)=>{
         let children;
-        if ('children' in route && route.children) children = route?.children?.map((child)=>traverseRouteTree(child, isRscClient));
+        if ('children' in route && route.children) children = await Promise.all(route.children.map((child)=>traverseRouteTree(child, isRscClientBundle)));
         let loading;
         let error;
         let loader;
@@ -171,6 +190,8 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
             components.push(route._component);
             component = `component_${components.length - 1}`;
         }
+        const isClientComponent = 'nested' === route.type && Boolean(route._component) && Boolean(srcDirectory) && Boolean(internalSrcAlias) && await hasUseClientDirective(route._component, srcDirectory, internalSrcAlias);
+        const shouldIncludeClientBundle = !isRscClientBundle || isClientComponent;
         const finalRoute = {
             ...route,
             loading,
@@ -178,10 +199,17 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
             action,
             config,
             error,
-            children
+            children,
+            ...isClientComponent && {
+                isClientComponent: true
+            },
+            ...shouldIncludeClientBundle && {
+                lazyImport
+            },
+            ...shouldIncludeClientBundle && route._component && {
+                component
+            }
         };
-        if (!isRscClient) finalRoute.lazyImport = lazyImport;
-        if (route._component && !isRscClient) finalRoute.component = component;
         if ('nested' === route.type && route._component && (route.loader || route.data)) finalRoute.shouldRevalidate = `createShouldRevalidate("${route.id}")`;
         return finalRoute;
     };
@@ -189,7 +217,7 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
     export const routes = [
   `;
     for (const route of routes)if ('type' in route) {
-        const newRoute = traverseRouteTree(route, isRscClient);
+        const newRoute = await traverseRouteTree(route, isRscClientBundle);
         const routeStr = JSON.stringify(newRoute, null, 2);
         const keywords = [
             'component',
@@ -264,9 +292,9 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
   `;
     return `
     ${importLazyCode}
-    ${!isRscClient ? importComponentsCode : ''}
+    ${!isRscClientBundle ? importComponentsCode : ''}
     ${importRuntimeRouterCode}
-    ${!isRscClient ? rootLayoutCode : ''}
+    ${!isRscClientBundle ? rootLayoutCode : ''}
     ${importLoadingCode}
     ${importErrorComponentsCode}
     ${importLoadersCode}