@modern-js/runtime 3.0.1 → 3.0.2

package/dist/cjs/cli/template.js

@@ -60,7 +60,9 @@ const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, custom
     return `import { createRoot } from '@${metaName}/runtime/react';
 import { render } from '@${metaName}/runtime/browser';
 
-${enableRsc ? `import { RscClientRoot, createFromReadableStream, rscStream, callServer } from '@${metaName}/runtime/rsc/client';` : ''}
+${enableRsc ? `import { RscClientRoot, createFromReadableStream, rscStream, callServer, setServerCallback } from '@${metaName}/runtime/rsc/client';` : ''}
+
+${enableRsc ? "setServerCallback(callServer);" : ''}
 
 ${enableRsc ? `const data = createFromReadableStream(rscStream, {
     callServer: callServer,
@@ -85,9 +87,12 @@ const entryForCSRWithRSC = ({ metaName, entryName, urlPath = '/', mountId = 'roo
     isRedirectResponse,
     rscStream,
     callServer,
+    setServerCallback,
     createFromReadableStream
   } from '@${metaName}/runtime/rsc/client';
 
+  setServerCallback(callServer);
+
   const handleRedirectResponse = (res: Response) => {
     const { headers } = res;
     const location = headers.get('X-Modernjs-Redirect');

package/dist/cjs/cli/template.server.js

@@ -82,8 +82,7 @@ export const requestHandler = createRequestHandler(handleRequest, {
 const handleRSCRequest = async (request, ServerRoot, options) => {
   const { serverPayload } = options;
   const stream = renderRsc({
-    element: options.rscRoot,
-    clientManifest: options.rscClientManifest!,
+    element: options.rscRoot
   });
 
   return new Response(stream);
@@ -106,32 +105,13 @@ const entryForCSRWithRSC = ({ metaName, entryName })=>`
   import {
     createRequestHandler,
   } from '@${metaName}/runtime/ssr/server';
-  import { renderRsc, processRSCStream } from '@${metaName}/runtime/rsc/server'
+  import { renderCSRWithRSC, renderRsc } from '@${metaName}/runtime/rsc/server';
   export { handleAction } from '@${metaName}/runtime/rsc/server';
 
   const handleCSRRender = async (request, ServerRoot, options) => {
-    const rscPayloadStream = renderRsc({
-      element: options.rscRoot,
-      clientManifest: options.rscClientManifest!,
-    });
-    const stream = new ReadableStream({
-      start(controller) {
-        const encoder = new TextEncoder();
-
-        controller.enqueue(encoder.encode(options.html));
-
-      processRSCStream(rscPayloadStream, controller, encoder)
-        .catch(err => {
-          controller.error(err);
-        });
-      }
-    });
-
-    return new Response(stream, {
-      status: 200,
-      headers: new Headers({
-        'content-type': 'text/html; charset=UTF-8',
-      }),
+    return renderCSRWithRSC({
+      html: options.html,
+      rscRoot: options.rscRoot,
     });
   }
 
@@ -142,7 +122,6 @@ const entryForCSRWithRSC = ({ metaName, entryName })=>`
   const handleRequest = async (request, ServerRoot, options) => {
     const stream = renderRsc({
             element: options.rscRoot,
-      clientManifest: options.rscClientManifest!,
     });
 
     return new Response(stream);

package/dist/cjs/core/server/requestHandler.js

@@ -40,6 +40,7 @@ const node_namespaceObject = require("@modern-js/runtime-utils/node");
 const request_namespaceObject = require("@modern-js/runtime-utils/universal/request");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const rsc_router_js_namespaceObject = require("../../router/runtime/rsc-router.js");
 const index_js_namespaceObject = require("../context/index.js");
 const runtime_js_namespaceObject = require("../context/runtime.js");
 const serverPayload_index_js_namespaceObject = require("../context/serverPayload/index.js");
@@ -65,6 +66,14 @@ async function handleRSCRequest(request, Root, context, options, handleRequest)
         runtimeContext: context
     });
 }
+const isRedirectStatus = (status)=>status >= 300 && status <= 399;
+const processRedirect = (headers, status, ctx)=>{
+    if (ctx.enableRsc && ctx.isRSCNavigation) return (0, rsc_router_js_namespaceObject.handleRSCRedirect)(headers, ctx.basename, status);
+    return new Response(null, {
+        status,
+        headers
+    });
+};
 function createSSRContext(request, options) {
     const { config, loaderContext, onError, onTiming, locals, resource, params, responseProxy, reporter } = options;
     const { nonce, useJsonScript } = config;
@@ -155,26 +164,22 @@ const createRequestHandler = async (handleRequest, createRequestOptions)=>{
                 ssrContext,
                 isBrowser: false
             });
-            const getRedirectResponse = (result)=>{
-                if ("u" > typeof Response && result instanceof Response && result.status >= 300 && result.status <= 399) {
-                    const { status } = result;
-                    const redirectUrl = result.headers.get('Location') || '/';
-                    const { ssrContext } = context;
-                    if (ssrContext) return new Response(null, {
-                        status,
-                        headers: {
-                            Location: redirectUrl
-                        }
-                    });
-                }
+            const redirectCtx = {
+                enableRsc: !!createRequestOptions?.enableRsc,
+                isRSCNavigation: 'true' === request.headers.get('x-rsc-tree'),
+                basename: ssrContext.baseUrl || '/'
             };
             const beforeRenderResult = await runBeforeRender(context);
             if (context.routerContext?.statusCode && context.routerContext?.statusCode !== 200) context.ssrContext?.response.status(context.routerContext?.statusCode);
             const errors = Object.values(context.routerContext?.errors || {});
             if (errors.length > 0) options.onError(errors[0], external_tracer_js_namespaceObject.SSRErrors.LOADER_ERROR);
-            const redirectResponse = getRedirectResponse(beforeRenderResult);
-            if (redirectResponse) if (createRequestOptions?.enableRsc) return beforeRenderResult || redirectResponse;
-            else return redirectResponse;
+            if ("u" > typeof Response && beforeRenderResult instanceof Response && isRedirectStatus(beforeRenderResult.status)) {
+                if (beforeRenderResult.headers.has('X-Modernjs-Redirect')) return beforeRenderResult;
+                const redirectUrl = beforeRenderResult.headers.get('Location') || '/';
+                return processRedirect(new Headers({
+                    Location: redirectUrl
+                }), beforeRenderResult.status, redirectCtx);
+            }
             if (!createRequestOptions?.enableRsc) {
                 const { htmlTemplate } = options.resource;
                 options.resource.htmlTemplate = htmlTemplate.replace('</head>', `${external_constants_js_namespaceObject.CHUNK_CSS_PLACEHOLDER}</head>`);
@@ -184,6 +189,7 @@ const createRequestHandler = async (handleRequest, createRequestOptions)=>{
                 ...options,
                 runtimeContext: context
             });
+            if (-1 !== responseProxy.status && isRedirectStatus(responseProxy.status) && responseProxy.headers.Location) return processRedirect(new Headers(responseProxy.headers), responseProxy.status, redirectCtx);
             Object.entries(responseProxy.headers).forEach(([key, value])=>{
                 response.headers.set(key, value);
             });

package/dist/cjs/core/server/stream/createReadableStream.worker.js

@@ -48,10 +48,9 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
     try {
         const readableOriginal = await (0, ssr_namespaceObject.renderSSRStream)(rootElement, {
             request,
-            clientManifest: options.rscClientManifest,
-            ssrManifest: options.rscSSRManifest,
             nonce: config.nonce,
             rscRoot: rscRoot,
+            routes: runtimeContext.routes,
             onError (error) {
                 options.onError?.(error);
             }

package/dist/cjs/router/runtime/CSSLinks.js

@@ -0,0 +1,46 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    CSSLinks: ()=>CSSLinks
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+function CSSLinks({ cssFiles }) {
+    if (0 === cssFiles.length) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+        children: cssFiles.map((css)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("link", {
+                href: css,
+                rel: "stylesheet"
+            }, css))
+    });
+}
+exports.CSSLinks = __webpack_exports__.CSSLinks;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CSSLinks"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/router/runtime/rsc-router.js

@@ -44,11 +44,27 @@ const client_namespaceObject = require("@modern-js/render/client");
 const router_namespaceObject = require("@modern-js/runtime-utils/router");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const external_CSSLinks_js_namespaceObject = require("./CSSLinks.js");
 const safeUse = (promise)=>{
     if ('function' == typeof external_react_default().use) return external_react_default().use(promise);
     return null;
 };
-const createServerPayload = (routerContext, routes)=>({
+function collectCssFilesFromRoutes(matches, routes) {
+    const cssFiles = [];
+    for (const match of matches){
+        const route = findRouteInTree(routes, match.route.id);
+        if (!route) continue;
+        const component = route.Component;
+        if (component && 'function' == typeof component && 'entryCssFiles' in component) {
+            const css = component.entryCssFiles;
+            if (Array.isArray(css)) cssFiles.push(...css);
+        }
+    }
+    return Array.from(new Set(cssFiles));
+}
+const createServerPayload = (routerContext, routes)=>{
+    const cssFiles = collectCssFilesFromRoutes(routerContext.matches, routes);
+    return {
         type: 'render',
         actionData: routerContext.actionData,
         errors: routerContext.errors,
@@ -60,7 +76,7 @@ const createServerPayload = (routerContext, routes)=>({
             let processedElement;
             if (element) {
                 const ElementComponent = element.type;
-                processedElement = /*#__PURE__*/ external_react_default().createElement(ElementComponent, {
+                const elementProps = {
                     loaderData: routerContext?.loaderData?.[match.route.id],
                     actionData: routerContext?.actionData?.[match.route.id],
                     params: match.params,
@@ -74,7 +90,12 @@ const createServerPayload = (routerContext, routes)=>({
                             handle: route.handle
                         };
                     })
-                });
+                };
+                const routeElement = /*#__PURE__*/ external_react_default().createElement(ElementComponent, elementProps);
+                const isLeafRoute = index === routerContext.matches.length - 1;
+                processedElement = isLeafRoute && cssFiles.length > 0 ? /*#__PURE__*/ external_react_default().createElement(external_react_default().Fragment, null, /*#__PURE__*/ external_react_default().createElement(external_CSSLinks_js_namespaceObject.CSSLinks, {
+                    cssFiles
+                }), routeElement) : routeElement;
             }
             return {
                 element: processedElement,
@@ -93,7 +114,8 @@ const createServerPayload = (routerContext, routes)=>({
                 pathnameBase: match.pathnameBase
             };
         })
-    });
+    };
+};
 const handleRSCRedirect = (headers, basename, status)=>{
     const newHeaders = new Headers(headers);
     let redirectUrl = headers.get('Location');
@@ -202,17 +224,19 @@ const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>
             clientLoaderResults.forEach(({ routeId, result })=>{
                 results[routeId] = result;
             });
+            if (!res.body) throw new Error('Response body is null');
             const payload = await (0, client_namespaceObject.createFromReadableStream)(res.body);
-            if (void 0 === payload.type || 'render' !== payload.type) throw new Error('Unexpected payload type');
+            if ('object' != typeof payload || null === payload || void 0 === payload.type || 'render' !== payload.type) throw new Error('Unexpected payload type');
+            const serverPayload = payload;
             matches.forEach((match)=>{
                 const routeId = match.route.id;
-                const matchedRoute = payload.routes.find((route)=>route.id === routeId);
+                const matchedRoute = serverPayload.routes.find((route)=>route.id === routeId);
                 if (matchedRoute) router.patchRoutes(matchedRoute.parentId, [
                     matchedRoute
                 ], true);
-                if (payload.loaderData?.[routeId]) results[routeId] = {
+                if (serverPayload.loaderData?.[routeId]) results[routeId] = {
                     type: 'data',
-                    result: payload.loaderData[routeId]
+                    result: serverPayload.loaderData[routeId]
                 };
             });
             return results;

package/dist/esm/cli/template.mjs

@@ -15,7 +15,9 @@ const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, custom
     return `import { createRoot } from '@${metaName}/runtime/react';
 import { render } from '@${metaName}/runtime/browser';
 
-${enableRsc ? `import { RscClientRoot, createFromReadableStream, rscStream, callServer } from '@${metaName}/runtime/rsc/client';` : ''}
+${enableRsc ? `import { RscClientRoot, createFromReadableStream, rscStream, callServer, setServerCallback } from '@${metaName}/runtime/rsc/client';` : ''}
+
+${enableRsc ? "setServerCallback(callServer);" : ''}
 
 ${enableRsc ? `const data = createFromReadableStream(rscStream, {
     callServer: callServer,
@@ -40,9 +42,12 @@ const entryForCSRWithRSC = ({ metaName, entryName, urlPath = '/', mountId = 'roo
     isRedirectResponse,
     rscStream,
     callServer,
+    setServerCallback,
     createFromReadableStream
   } from '@${metaName}/runtime/rsc/client';
 
+  setServerCallback(callServer);
+
   const handleRedirectResponse = (res: Response) => {
     const { headers } = res;
     const location = headers.get('X-Modernjs-Redirect');

package/dist/esm/cli/template.server.mjs

@@ -53,8 +53,7 @@ export const requestHandler = createRequestHandler(handleRequest, {
 const handleRSCRequest = async (request, ServerRoot, options) => {
   const { serverPayload } = options;
   const stream = renderRsc({
-    element: options.rscRoot,
-    clientManifest: options.rscClientManifest!,
+    element: options.rscRoot
   });
 
   return new Response(stream);
@@ -77,32 +76,13 @@ const entryForCSRWithRSC = ({ metaName, entryName })=>`
   import {
     createRequestHandler,
   } from '@${metaName}/runtime/ssr/server';
-  import { renderRsc, processRSCStream } from '@${metaName}/runtime/rsc/server'
+  import { renderCSRWithRSC, renderRsc } from '@${metaName}/runtime/rsc/server';
   export { handleAction } from '@${metaName}/runtime/rsc/server';
 
   const handleCSRRender = async (request, ServerRoot, options) => {
-    const rscPayloadStream = renderRsc({
-      element: options.rscRoot,
-      clientManifest: options.rscClientManifest!,
-    });
-    const stream = new ReadableStream({
-      start(controller) {
-        const encoder = new TextEncoder();
-
-        controller.enqueue(encoder.encode(options.html));
-
-      processRSCStream(rscPayloadStream, controller, encoder)
-        .catch(err => {
-          controller.error(err);
-        });
-      }
-    });
-
-    return new Response(stream, {
-      status: 200,
-      headers: new Headers({
-        'content-type': 'text/html; charset=UTF-8',
-      }),
+    return renderCSRWithRSC({
+      html: options.html,
+      rscRoot: options.rscRoot,
     });
   }
 
@@ -113,7 +93,6 @@ const entryForCSRWithRSC = ({ metaName, entryName })=>`
   const handleRequest = async (request, ServerRoot, options) => {
     const stream = renderRsc({
             element: options.rscRoot,
-      clientManifest: options.rscClientManifest!,
     });
 
     return new Response(stream);

package/dist/esm/core/server/requestHandler.mjs

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { storage } from "@modern-js/runtime-utils/node";
 import { getPathname, parseCookie, parseHeaders, parseQuery } from "@modern-js/runtime-utils/universal/request";
 import react, { Fragment } from "react";
+import { handleRSCRedirect } from "../../router/runtime/rsc-router.mjs";
 import { getGlobalInternalRuntimeContext, getGlobalRSCRoot } from "../context/index.mjs";
 import { getInitialContext } from "../context/runtime.mjs";
 import { getServerPayload } from "../context/serverPayload/index.mjs";
@@ -27,6 +28,14 @@ async function handleRSCRequest(request, Root, context, options, handleRequest)
         runtimeContext: context
     });
 }
+const isRedirectStatus = (status)=>status >= 300 && status <= 399;
+const processRedirect = (headers, status, ctx)=>{
+    if (ctx.enableRsc && ctx.isRSCNavigation) return handleRSCRedirect(headers, ctx.basename, status);
+    return new Response(null, {
+        status,
+        headers
+    });
+};
 function createSSRContext(request, options) {
     const { config, loaderContext, onError, onTiming, locals, resource, params, responseProxy, reporter } = options;
     const { nonce, useJsonScript } = config;
@@ -117,26 +126,22 @@ const createRequestHandler = async (handleRequest, createRequestOptions)=>{
                 ssrContext,
                 isBrowser: false
             });
-            const getRedirectResponse = (result)=>{
-                if ("u" > typeof Response && result instanceof Response && result.status >= 300 && result.status <= 399) {
-                    const { status } = result;
-                    const redirectUrl = result.headers.get('Location') || '/';
-                    const { ssrContext } = context;
-                    if (ssrContext) return new Response(null, {
-                        status,
-                        headers: {
-                            Location: redirectUrl
-                        }
-                    });
-                }
+            const redirectCtx = {
+                enableRsc: !!createRequestOptions?.enableRsc,
+                isRSCNavigation: 'true' === request.headers.get('x-rsc-tree'),
+                basename: ssrContext.baseUrl || '/'
             };
             const beforeRenderResult = await runBeforeRender(context);
             if (context.routerContext?.statusCode && context.routerContext?.statusCode !== 200) context.ssrContext?.response.status(context.routerContext?.statusCode);
             const errors = Object.values(context.routerContext?.errors || {});
             if (errors.length > 0) options.onError(errors[0], SSRErrors.LOADER_ERROR);
-            const redirectResponse = getRedirectResponse(beforeRenderResult);
-            if (redirectResponse) if (createRequestOptions?.enableRsc) return beforeRenderResult || redirectResponse;
-            else return redirectResponse;
+            if ("u" > typeof Response && beforeRenderResult instanceof Response && isRedirectStatus(beforeRenderResult.status)) {
+                if (beforeRenderResult.headers.has('X-Modernjs-Redirect')) return beforeRenderResult;
+                const redirectUrl = beforeRenderResult.headers.get('Location') || '/';
+                return processRedirect(new Headers({
+                    Location: redirectUrl
+                }), beforeRenderResult.status, redirectCtx);
+            }
             if (!createRequestOptions?.enableRsc) {
                 const { htmlTemplate } = options.resource;
                 options.resource.htmlTemplate = htmlTemplate.replace('</head>', `${CHUNK_CSS_PLACEHOLDER}</head>`);
@@ -146,6 +151,7 @@ const createRequestHandler = async (handleRequest, createRequestOptions)=>{
                 ...options,
                 runtimeContext: context
             });
+            if (-1 !== responseProxy.status && isRedirectStatus(responseProxy.status) && responseProxy.headers.Location) return processRedirect(new Headers(responseProxy.headers), responseProxy.status, redirectCtx);
             Object.entries(responseProxy.headers).forEach(([key, value])=>{
                 response.headers.set(key, value);
             });

package/dist/esm/core/server/stream/createReadableStream.worker.mjs

@@ -20,10 +20,9 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
     try {
         const readableOriginal = await renderSSRStream(rootElement, {
             request,
-            clientManifest: options.rscClientManifest,
-            ssrManifest: options.rscSSRManifest,
             nonce: config.nonce,
             rscRoot: rscRoot,
+            routes: runtimeContext.routes,
             onError (error) {
                 options.onError?.(error);
             }

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

@@ -0,0 +1,12 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import "react";
+function CSSLinks({ cssFiles }) {
+    if (0 === cssFiles.length) return null;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: cssFiles.map((css)=>/*#__PURE__*/ jsx("link", {
+                href: css,
+                rel: "stylesheet"
+            }, css))
+    });
+}
+export { CSSLinks };

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

@@ -2,11 +2,27 @@ import { Fragment, jsx } from "react/jsx-runtime";
 import { ElementsContext, createFromReadableStream } from "@modern-js/render/client";
 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);
     return null;
 };
-const createServerPayload = (routerContext, routes)=>({
+function collectCssFilesFromRoutes(matches, routes) {
+    const cssFiles = [];
+    for (const match of matches){
+        const route = findRouteInTree(routes, match.route.id);
+        if (!route) continue;
+        const component = route.Component;
+        if (component && 'function' == typeof component && 'entryCssFiles' in component) {
+            const css = component.entryCssFiles;
+            if (Array.isArray(css)) cssFiles.push(...css);
+        }
+    }
+    return Array.from(new Set(cssFiles));
+}
+const createServerPayload = (routerContext, routes)=>{
+    const cssFiles = collectCssFilesFromRoutes(routerContext.matches, routes);
+    return {
         type: 'render',
         actionData: routerContext.actionData,
         errors: routerContext.errors,
@@ -18,7 +34,7 @@ const createServerPayload = (routerContext, routes)=>({
             let processedElement;
             if (element) {
                 const ElementComponent = element.type;
-                processedElement = /*#__PURE__*/ react.createElement(ElementComponent, {
+                const elementProps = {
                     loaderData: routerContext?.loaderData?.[match.route.id],
                     actionData: routerContext?.actionData?.[match.route.id],
                     params: match.params,
@@ -32,7 +48,12 @@ const createServerPayload = (routerContext, routes)=>({
                             handle: 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, {
+                    cssFiles
+                }), routeElement) : routeElement;
             }
             return {
                 element: processedElement,
@@ -51,7 +72,8 @@ const createServerPayload = (routerContext, routes)=>({
                 pathnameBase: match.pathnameBase
             };
         })
-    });
+    };
+};
 const handleRSCRedirect = (headers, basename, status)=>{
     const newHeaders = new Headers(headers);
     let redirectUrl = headers.get('Location');
@@ -160,17 +182,19 @@ const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>
             clientLoaderResults.forEach(({ routeId, result })=>{
                 results[routeId] = result;
             });
+            if (!res.body) throw new Error('Response body is null');
             const payload = await createFromReadableStream(res.body);
-            if (void 0 === payload.type || 'render' !== payload.type) throw new Error('Unexpected payload type');
+            if ('object' != typeof payload || null === payload || void 0 === payload.type || 'render' !== payload.type) throw new Error('Unexpected payload type');
+            const serverPayload = payload;
             matches.forEach((match)=>{
                 const routeId = match.route.id;
-                const matchedRoute = payload.routes.find((route)=>route.id === routeId);
+                const matchedRoute = serverPayload.routes.find((route)=>route.id === routeId);
                 if (matchedRoute) router.patchRoutes(matchedRoute.parentId, [
                     matchedRoute
                 ], true);
-                if (payload.loaderData?.[routeId]) results[routeId] = {
+                if (serverPayload.loaderData?.[routeId]) results[routeId] = {
                     type: 'data',
-                    result: payload.loaderData[routeId]
+                    result: serverPayload.loaderData[routeId]
                 };
             });
             return results;

package/dist/esm-node/cli/template.mjs

@@ -16,7 +16,9 @@ const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, custom
     return `import { createRoot } from '@${metaName}/runtime/react';
 import { render } from '@${metaName}/runtime/browser';
 
-${enableRsc ? `import { RscClientRoot, createFromReadableStream, rscStream, callServer } from '@${metaName}/runtime/rsc/client';` : ''}
+${enableRsc ? `import { RscClientRoot, createFromReadableStream, rscStream, callServer, setServerCallback } from '@${metaName}/runtime/rsc/client';` : ''}
+
+${enableRsc ? "setServerCallback(callServer);" : ''}
 
 ${enableRsc ? `const data = createFromReadableStream(rscStream, {
     callServer: callServer,
@@ -41,9 +43,12 @@ const entryForCSRWithRSC = ({ metaName, entryName, urlPath = '/', mountId = 'roo
     isRedirectResponse,
     rscStream,
     callServer,
+    setServerCallback,
     createFromReadableStream
   } from '@${metaName}/runtime/rsc/client';
 
+  setServerCallback(callServer);
+
   const handleRedirectResponse = (res: Response) => {
     const { headers } = res;
     const location = headers.get('X-Modernjs-Redirect');

package/dist/esm-node/cli/template.server.mjs

@@ -54,8 +54,7 @@ export const requestHandler = createRequestHandler(handleRequest, {
 const handleRSCRequest = async (request, ServerRoot, options) => {
   const { serverPayload } = options;
   const stream = renderRsc({
-    element: options.rscRoot,
-    clientManifest: options.rscClientManifest!,
+    element: options.rscRoot
   });
 
   return new Response(stream);
@@ -78,32 +77,13 @@ const entryForCSRWithRSC = ({ metaName, entryName })=>`
   import {
     createRequestHandler,
   } from '@${metaName}/runtime/ssr/server';
-  import { renderRsc, processRSCStream } from '@${metaName}/runtime/rsc/server'
+  import { renderCSRWithRSC, renderRsc } from '@${metaName}/runtime/rsc/server';
   export { handleAction } from '@${metaName}/runtime/rsc/server';
 
   const handleCSRRender = async (request, ServerRoot, options) => {
-    const rscPayloadStream = renderRsc({
-      element: options.rscRoot,
-      clientManifest: options.rscClientManifest!,
-    });
-    const stream = new ReadableStream({
-      start(controller) {
-        const encoder = new TextEncoder();
-
-        controller.enqueue(encoder.encode(options.html));
-
-      processRSCStream(rscPayloadStream, controller, encoder)
-        .catch(err => {
-          controller.error(err);
-        });
-      }
-    });
-
-    return new Response(stream, {
-      status: 200,
-      headers: new Headers({
-        'content-type': 'text/html; charset=UTF-8',
-      }),
+    return renderCSRWithRSC({
+      html: options.html,
+      rscRoot: options.rscRoot,
     });
   }
 
@@ -114,7 +94,6 @@ const entryForCSRWithRSC = ({ metaName, entryName })=>`
   const handleRequest = async (request, ServerRoot, options) => {
     const stream = renderRsc({
             element: options.rscRoot,
-      clientManifest: options.rscClientManifest!,
     });
 
     return new Response(stream);

package/dist/esm-node/core/server/requestHandler.mjs

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { storage } from "@modern-js/runtime-utils/node";
 import { getPathname, parseCookie, parseHeaders, parseQuery } from "@modern-js/runtime-utils/universal/request";
 import react, { Fragment } from "react";
+import { handleRSCRedirect } from "../../router/runtime/rsc-router.mjs";
 import { getGlobalInternalRuntimeContext, getGlobalRSCRoot } from "../context/index.mjs";
 import { getInitialContext } from "../context/runtime.mjs";
 import { getServerPayload } from "../context/serverPayload/index.mjs";
@@ -28,6 +29,14 @@ async function handleRSCRequest(request, Root, context, options, handleRequest)
         runtimeContext: context
     });
 }
+const isRedirectStatus = (status)=>status >= 300 && status <= 399;
+const processRedirect = (headers, status, ctx)=>{
+    if (ctx.enableRsc && ctx.isRSCNavigation) return handleRSCRedirect(headers, ctx.basename, status);
+    return new Response(null, {
+        status,
+        headers
+    });
+};
 function createSSRContext(request, options) {
     const { config, loaderContext, onError, onTiming, locals, resource, params, responseProxy, reporter } = options;
     const { nonce, useJsonScript } = config;
@@ -118,26 +127,22 @@ const createRequestHandler = async (handleRequest, createRequestOptions)=>{
                 ssrContext,
                 isBrowser: false
             });
-            const getRedirectResponse = (result)=>{
-                if ("u" > typeof Response && result instanceof Response && result.status >= 300 && result.status <= 399) {
-                    const { status } = result;
-                    const redirectUrl = result.headers.get('Location') || '/';
-                    const { ssrContext } = context;
-                    if (ssrContext) return new Response(null, {
-                        status,
-                        headers: {
-                            Location: redirectUrl
-                        }
-                    });
-                }
+            const redirectCtx = {
+                enableRsc: !!createRequestOptions?.enableRsc,
+                isRSCNavigation: 'true' === request.headers.get('x-rsc-tree'),
+                basename: ssrContext.baseUrl || '/'
             };
             const beforeRenderResult = await runBeforeRender(context);
             if (context.routerContext?.statusCode && context.routerContext?.statusCode !== 200) context.ssrContext?.response.status(context.routerContext?.statusCode);
             const errors = Object.values(context.routerContext?.errors || {});
             if (errors.length > 0) options.onError(errors[0], SSRErrors.LOADER_ERROR);
-            const redirectResponse = getRedirectResponse(beforeRenderResult);
-            if (redirectResponse) if (createRequestOptions?.enableRsc) return beforeRenderResult || redirectResponse;
-            else return redirectResponse;
+            if ("u" > typeof Response && beforeRenderResult instanceof Response && isRedirectStatus(beforeRenderResult.status)) {
+                if (beforeRenderResult.headers.has('X-Modernjs-Redirect')) return beforeRenderResult;
+                const redirectUrl = beforeRenderResult.headers.get('Location') || '/';
+                return processRedirect(new Headers({
+                    Location: redirectUrl
+                }), beforeRenderResult.status, redirectCtx);
+            }
             if (!createRequestOptions?.enableRsc) {
                 const { htmlTemplate } = options.resource;
                 options.resource.htmlTemplate = htmlTemplate.replace('</head>', `${CHUNK_CSS_PLACEHOLDER}</head>`);
@@ -147,6 +152,7 @@ const createRequestHandler = async (handleRequest, createRequestOptions)=>{
                 ...options,
                 runtimeContext: context
             });
+            if (-1 !== responseProxy.status && isRedirectStatus(responseProxy.status) && responseProxy.headers.Location) return processRedirect(new Headers(responseProxy.headers), responseProxy.status, redirectCtx);
             Object.entries(responseProxy.headers).forEach(([key, value])=>{
                 response.headers.set(key, value);
             });

package/dist/esm-node/core/server/stream/createReadableStream.worker.mjs

@@ -21,10 +21,9 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
     try {
         const readableOriginal = await renderSSRStream(rootElement, {
             request,
-            clientManifest: options.rscClientManifest,
-            ssrManifest: options.rscSSRManifest,
             nonce: config.nonce,
             rscRoot: rscRoot,
+            routes: runtimeContext.routes,
             onError (error) {
                 options.onError?.(error);
             }

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

@@ -0,0 +1,13 @@
+import "node:module";
+import { Fragment, jsx } from "react/jsx-runtime";
+import "react";
+function CSSLinks({ cssFiles }) {
+    if (0 === cssFiles.length) return null;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: cssFiles.map((css)=>/*#__PURE__*/ jsx("link", {
+                href: css,
+                rel: "stylesheet"
+            }, css))
+    });
+}
+export { CSSLinks };

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

@@ -3,11 +3,27 @@ import { Fragment, jsx } from "react/jsx-runtime";
 import { ElementsContext, createFromReadableStream } from "@modern-js/render/client";
 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);
     return null;
 };
-const createServerPayload = (routerContext, routes)=>({
+function collectCssFilesFromRoutes(matches, routes) {
+    const cssFiles = [];
+    for (const match of matches){
+        const route = findRouteInTree(routes, match.route.id);
+        if (!route) continue;
+        const component = route.Component;
+        if (component && 'function' == typeof component && 'entryCssFiles' in component) {
+            const css = component.entryCssFiles;
+            if (Array.isArray(css)) cssFiles.push(...css);
+        }
+    }
+    return Array.from(new Set(cssFiles));
+}
+const createServerPayload = (routerContext, routes)=>{
+    const cssFiles = collectCssFilesFromRoutes(routerContext.matches, routes);
+    return {
         type: 'render',
         actionData: routerContext.actionData,
         errors: routerContext.errors,
@@ -19,7 +35,7 @@ const createServerPayload = (routerContext, routes)=>({
             let processedElement;
             if (element) {
                 const ElementComponent = element.type;
-                processedElement = /*#__PURE__*/ react.createElement(ElementComponent, {
+                const elementProps = {
                     loaderData: routerContext?.loaderData?.[match.route.id],
                     actionData: routerContext?.actionData?.[match.route.id],
                     params: match.params,
@@ -33,7 +49,12 @@ const createServerPayload = (routerContext, routes)=>({
                             handle: 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, {
+                    cssFiles
+                }), routeElement) : routeElement;
             }
             return {
                 element: processedElement,
@@ -52,7 +73,8 @@ const createServerPayload = (routerContext, routes)=>({
                 pathnameBase: match.pathnameBase
             };
         })
-    });
+    };
+};
 const handleRSCRedirect = (headers, basename, status)=>{
     const newHeaders = new Headers(headers);
     let redirectUrl = headers.get('Location');
@@ -161,17 +183,19 @@ const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>
             clientLoaderResults.forEach(({ routeId, result })=>{
                 results[routeId] = result;
             });
+            if (!res.body) throw new Error('Response body is null');
             const payload = await createFromReadableStream(res.body);
-            if (void 0 === payload.type || 'render' !== payload.type) throw new Error('Unexpected payload type');
+            if ('object' != typeof payload || null === payload || void 0 === payload.type || 'render' !== payload.type) throw new Error('Unexpected payload type');
+            const serverPayload = payload;
             matches.forEach((match)=>{
                 const routeId = match.route.id;
-                const matchedRoute = payload.routes.find((route)=>route.id === routeId);
+                const matchedRoute = serverPayload.routes.find((route)=>route.id === routeId);
                 if (matchedRoute) router.patchRoutes(matchedRoute.parentId, [
                     matchedRoute
                 ], true);
-                if (payload.loaderData?.[routeId]) results[routeId] = {
+                if (serverPayload.loaderData?.[routeId]) results[routeId] = {
                     type: 'data',
-                    result: payload.loaderData[routeId]
+                    result: serverPayload.loaderData[routeId]
                 };
             });
             return results;

package/dist/types/core/context/serverPayload/index.server.d.ts

@@ -8,6 +8,7 @@ export type PayloadRoute = {
     hasAction: boolean;
     hasErrorBoundary: boolean;
     hasLoader: boolean;
+    hasClientLoader?: boolean;
     id: string;
     index?: boolean;
     params: Record<string, string>;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Server Component that renders CSS link tags
+ * These will be serialized into RSC payload and automatically handled by React on client
+ * React will automatically hoist these link tags to the head
+ */
+export declare function CSSLinks({ cssFiles }: {
+    cssFiles: string[];
+}): React.JSX.Element | null;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.0.1",
+  "version": "3.0.2",
   "engines": {
     "node": ">=20"
   },
@@ -28,6 +28,10 @@
       "react-server": "./dist/esm/react-server.mjs",
       "default": "./dist/esm/index.mjs"
     },
+    "./react-server": {
+      "types": "./dist/types/react-server.d.ts",
+      "default": "./dist/esm/react-server.mjs"
+    },
     "./internal": {
       "types": "./dist/types/internal.d.ts",
       "default": "./dist/esm/internal.mjs"
@@ -131,6 +135,9 @@
       ".": [
         "./dist/types/index.d.ts"
       ],
+      "react-server": [
+        "./dist/types/react-server.d.ts"
+      ],
       "internal": [
         "./dist/types/internal.d.ts"
       ],
@@ -197,7 +204,7 @@
     "@loadable/component": "5.16.7",
     "@loadable/server": "5.16.7",
     "@swc/helpers": "^0.5.17",
-    "@swc/plugin-loadable-components": "^11.4.0",
+    "@swc/plugin-loadable-components": "^11.5.0",
     "@types/loadable__component": "^5.13.10",
     "@types/react-helmet": "^6.1.11",
     "cookie": "0.7.2",
@@ -208,12 +215,12 @@
     "isbot": "3.8.0",
     "react-helmet": "^6.1.0",
     "react-is": "^18.3.1",
-    "@modern-js/plugin": "3.0.1",
-    "@modern-js/render": "3.0.1",
-    "@modern-js/plugin-data-loader": "3.0.1",
-    "@modern-js/runtime-utils": "3.0.1",
-    "@modern-js/types": "3.0.1",
-    "@modern-js/utils": "3.0.1"
+    "@modern-js/plugin": "3.0.2",
+    "@modern-js/render": "3.0.2",
+    "@modern-js/runtime-utils": "3.0.2",
+    "@modern-js/plugin-data-loader": "3.0.2",
+    "@modern-js/types": "3.0.2",
+    "@modern-js/utils": "3.0.2"
   },
   "peerDependencies": {
     "react": ">=17.0.2",
@@ -221,8 +228,8 @@
   },
   "devDependencies": {
     "@remix-run/web-fetch": "^4.1.3",
-    "@rsbuild/core": "2.0.0-beta.2",
-    "@rslib/core": "0.19.4",
+    "@rsbuild/core": "2.0.0-beta.4",
+    "@rslib/core": "0.19.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/cookie": "0.6.0",
@@ -233,7 +240,7 @@
     "react-dom": "^19.2.4",
     "ts-node": "^10.9.2",
     "typescript": "^5",
-    "@modern-js/app-tools": "3.0.1",
+    "@modern-js/app-tools": "3.0.2",
     "@modern-js/rslib": "2.68.10",
     "@scripts/rstest-config": "2.66.0"
   },