@modern-js/runtime 3.0.4 → 3.0.5

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

@@ -4,8 +4,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) {
@@ -23,6 +24,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,
@@ -30,45 +42,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
             };
@@ -88,10 +97,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);
         }));
     };
@@ -108,12 +118,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;
             }
@@ -131,6 +143,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 [
@@ -147,42 +221,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');
@@ -190,10 +250,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-node/router/runtime/utils.mjs

@@ -68,7 +68,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/types/core/context/serverPayload/index.server.d.ts

@@ -1,10 +1,10 @@
-import type { RouterState } from '@modern-js/runtime-utils/router';
+import type { RouterState, ShouldRevalidateFunction } from '@modern-js/runtime-utils/router';
 export type PayloadRoute = {
-    clientAction?: any;
-    clientLoader?: any;
+    clientAction?: (...args: unknown[]) => unknown;
+    clientLoader?: (...args: unknown[]) => unknown;
     element?: React.ReactNode;
     errorElement?: React.ReactNode;
-    handle?: any;
+    handle?: unknown;
     hasAction: boolean;
     hasErrorBoundary: boolean;
     hasLoader: boolean;
@@ -16,7 +16,7 @@ export type PayloadRoute = {
     path?: string;
     pathname: string;
     pathnameBase: string;
-    shouldRevalidate?: any;
+    shouldRevalidate?: ShouldRevalidateFunction;
 };
 export type ServerPayload = {
     type: 'render';

package/dist/types/router/cli/code/templates.d.ts

@@ -3,7 +3,7 @@ import type { Entrypoint, NestedRouteForCli, PageRoute, RouteLegacy, SSRMode } f
 export declare const routesForServer: ({ routesForServerLoaderMatches, }: {
     routesForServerLoaderMatches: (NestedRouteForCli | PageRoute)[];
 }) => string;
-export declare const fileSystemRoutes: ({ metaName, routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, splitRouteChunks, isRscClient, }: {
+export declare const fileSystemRoutes: ({ metaName, routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, splitRouteChunks, isRscClientBundle, srcDirectory, internalSrcAlias, }: {
     metaName: string;
     routes: RouteLegacy[] | (NestedRouteForCli | PageRoute)[];
     ssrMode?: SSRMode;
@@ -11,7 +11,9 @@ export declare const fileSystemRoutes: ({ metaName, routes, ssrMode, nestedRoute
     entryName: string;
     internalDirectory: string;
     splitRouteChunks?: boolean;
-    isRscClient?: boolean;
+    isRscClientBundle?: boolean;
+    srcDirectory?: string;
+    internalSrcAlias?: string;
 }) => Promise<string>;
 export declare function ssrLoaderCombinedModule(entrypoints: Entrypoint[], entrypoint: Entrypoint, config: AppNormalizedConfig, appContext: AppToolsContext): string | null;
 export declare const runtimeGlobalContext: ({ entryName, metaName, srcDirectory, nestedRoutesEntry, internalSrcAlias, globalApp, rscType, basename, }: {

package/dist/types/router/runtime/rsc-router.d.ts

@@ -1,7 +1,13 @@
-import { type StaticHandlerContext } from '@modern-js/runtime-utils/router';
-import { type RouteObject } from '@modern-js/runtime-utils/router';
+import { type RouteObject, type StaticHandlerContext } from '@modern-js/runtime-utils/router';
 import React from 'react';
 import type { ServerPayload } from '../../core/context';
+import type { RouteManifest } from './types';
+declare global {
+    interface Window {
+        _MODERNJS_ROUTE_MANIFEST?: RouteManifest;
+        __webpack_public_path__?: string;
+    }
+}
 export declare const createServerPayload: (routerContext: StaticHandlerContext, routes: RouteObject[]) => ServerPayload;
 export declare const handleRSCRedirect: (headers: Headers, basename: string, status: number) => Response;
 export declare const prepareRSCRoutes: (routes: RouteObject[]) => Promise<void>;

package/dist/types/router/runtime/types.d.ts

@@ -43,8 +43,25 @@ export interface RouteAssets {
     [routeId: string]: {
         chunkIds?: (string | number)[];
         assets?: string[];
+        referenceCssAssets?: string[];
     };
 }
+export interface LazyComponentDescriptor {
+    _init: unknown;
+    _payload: unknown;
+}
+export type ModernRouteObject = RouteObject & {
+    isClientComponent?: boolean;
+    hasClientLoader?: boolean;
+    hasLoader?: boolean;
+    hasAction?: boolean;
+    parentId?: string;
+    lazyImport?: () => Promise<{
+        default: React.ComponentType;
+    }>;
+    component?: React.ComponentType | LazyComponentDescriptor;
+    entryCssFiles?: string[];
+};
 interface DataFunctionArgs<D = any> {
     request: Request;
     params: Params;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.0.4",
+  "version": "3.0.5",
   "engines": {
     "node": ">=20"
   },
@@ -215,12 +215,12 @@
     "isbot": "3.8.0",
     "react-helmet": "^6.1.0",
     "react-is": "^18.3.1",
-    "@modern-js/plugin": "3.0.4",
-    "@modern-js/plugin-data-loader": "3.0.4",
-    "@modern-js/render": "3.0.4",
-    "@modern-js/runtime-utils": "3.0.4",
-    "@modern-js/types": "3.0.4",
-    "@modern-js/utils": "3.0.4"
+    "@modern-js/plugin": "3.0.5",
+    "@modern-js/plugin-data-loader": "3.0.5",
+    "@modern-js/render": "3.0.5",
+    "@modern-js/types": "3.0.5",
+    "@modern-js/runtime-utils": "3.0.5",
+    "@modern-js/utils": "3.0.5"
   },
   "peerDependencies": {
     "react": ">=17.0.2",
@@ -240,7 +240,7 @@
     "react-dom": "^19.2.4",
     "ts-node": "^10.9.2",
     "typescript": "^5",
-    "@modern-js/app-tools": "3.0.4",
+    "@modern-js/app-tools": "3.0.5",
     "@modern-js/rslib": "2.68.10",
     "@scripts/rstest-config": "2.66.0"
   },