@modern-js/runtime 2.64.1 → 2.64.3

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

@@ -1,19 +1,59 @@
 import path from "path";
 import { JS_EXTENSIONS, findExists, formatImportPath } from "@modern-js/utils";
 import { ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME, ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME } from "./constants";
-const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId }) => {
+const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId, enableRsc }) => {
   if (customEntry) {
     return `import '${formatImportPath(entry.replace(srcDirectory, internalSrcAlias))}'`;
   }
   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 ? `const data = createFromReadableStream(rscStream, {
+    callServer: callServer,
+  });` : ""}
+
 ${customBootstrap ? `import customBootstrap from '${formatImportPath(customBootstrap.replace(srcDirectory, internalSrcAlias))}';` : ""}
 
+
+
 const ModernRoot = createRoot();
 
-${customBootstrap ? `customBootstrap(ModernRoot, () => render(<ModernRoot />, '${mountId || "root"}'));` : `render(<ModernRoot />, '${mountId || "root"}');`}`;
+${customBootstrap ? `customBootstrap(ModernRoot, () => render(<ModernRoot />, '${mountId || "root"}'));` : enableRsc ? `render(<ModernRoot>
+                  <RscClientRoot data={data} />
+                </ModernRoot>, '${mountId || "root"}');` : `render(<ModernRoot />, '${mountId || "root"}');`}`;
+};
+const entryForCSRWithRSC = ({ metaName, entryName, urlPath = "/", mountId = "root" }) => {
+  return `
+  import '@${metaName}/runtime/registry/${entryName}';
+  import { render } from '@${metaName}/runtime/browser';
+  import { createRoot } from '@${metaName}/runtime/react';
+
+  import {
+    RscClientRoot,
+    createFromFetch
+  } from '@${metaName}/runtime/rsc/client';
+
+  const content = createFromFetch(
+    fetch('${urlPath}', {
+      headers: {
+        'x-rsc-tree': 'true',
+      },
+    }),
+  );
+
+  const ModernRoot = createRoot();
+
+  render(
+    <ModernRoot>
+      <RscClientRoot data={content} />
+    </ModernRoot>,
+    '${mountId}',
+  );
+  `;
 };
-const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId }) => `import '@${metaName}/runtime/registry/${entryName}';
+const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, enableRsc }) => `import '@${metaName}/runtime/registry/${entryName}';
 ${genRenderCode({
   srcDirectory,
   internalSrcAlias,
@@ -21,7 +61,8 @@ ${genRenderCode({
   entry,
   customEntry,
   customBootstrap,
-  mountId
+  mountId,
+  enableRsc
 })}
 `;
 const register = () => `import './${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}';
@@ -59,9 +100,51 @@ setGlobalContext({
   App,
 });`;
 };
+const runtimeGlobalContextForRSCServer = ({ metaName }) => {
+  return `
+  import { createElement, Fragment } from 'react';
+  import { setGlobalContext } from '@${metaName}/runtime/context';
+  import AppProxy from './AppProxy';
+
+  const DefaultRoot = ({ children }: { children?: ReactNode }) =>
+    createElement(Fragment, null, children);
+
+
+  setGlobalContext({
+    App: DefaultRoot,
+    RSCRoot: AppProxy,
+  });`;
+};
+const runtimeGlobalContextForRSCClient = ({ metaName }) => {
+  return `
+  import { createElement, Fragment } from 'react';
+  import { setGlobalContext } from '@${metaName}/runtime/context';
+
+  const DefaultRoot = ({ children }: { children?: ReactNode }) =>
+    createElement(Fragment, null, children);
+
+  setGlobalContext({
+    App: DefaultRoot
+  });`;
+};
+const AppProxyForRSC = ({ srcDirectory, internalSrcAlias, entry, customEntry }) => {
+  return `
+  import App from '${// We need to get the path of App.tsx here, but the entry is `src/entry.tsx`
+  formatImportPath(customEntry ? entry.replace(/entry\.[tj]sx/, "App").replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias).replace(".tsx", ""))}';
+  import React from 'react';
+
+  export default function Root() {
+    return React.createElement(App, null);
+  }
+  `;
+};
 export {
+  AppProxyForRSC,
+  entryForCSRWithRSC,
   index,
   register,
   runtimeGlobalContext,
+  runtimeGlobalContextForRSCClient,
+  runtimeGlobalContextForRSCServer,
   runtimeRegister
 };

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

@@ -19,6 +19,38 @@ const handleRequest = async (request, ServerRoot, options) => {
 
 export const requestHandler = createRequestHandler(handleRequest);
 `;
+const SERVER_ENTRY_RSC = `
+import {
+  renderStreaming,
+  createRequestHandler,
+} from '@#metaName/runtime/ssr/server';
+import { RSCServerSlot } from '@#metaName/runtime/rsc/client';
+export { handleAction } from '@#metaName/runtime/rsc/server';
+
+const handleRequest = async (request, ServerRoot, options) => {
+
+  const body = await renderStreaming(request,
+    <ServerRoot>
+      <RSCServerSlot />
+    </ServerRoot>,
+    {
+      ...options,
+      rscRoot: <options.RSCRoot />,
+    },
+  );
+
+  return new Response(body, {
+    headers: {
+      'content-type': 'text/html; charset=utf-8',
+      #headers
+    },
+  })
+};
+
+export const requestHandler = createRequestHandler(handleRequest, {
+  enableRsc: true,
+});
+`;
 const serverIndex = (options) => {
   const { metaName = "modern-js", entryName } = options;
   return `
@@ -26,11 +58,39 @@ const serverIndex = (options) => {
     ${genHandlerCode(options)}
   `;
 };
-function genHandlerCode({ mode, metaName, customServerEntry, srcDirectory, internalSrcAlias }) {
+const entryForCSRWithRSC = ({ metaName }) => {
+  return `
+  import App from './AppProxy';
+  import { renderRsc } from '@${metaName}/runtime/rsc/server'
+  export { handleAction } from '@${metaName}/runtime/rsc/server';
+
+
+  export const rscRequestHandler = ({
+    clientManifest
+  }) => {
+    const stream = renderRsc({
+      element: <App/>,
+      clientManifest,
+    })
+
+    const response = new Response(stream, {
+      headers: {
+        'Transfer-Encoding': 'chunked',
+      },
+    });
+    return response
+  }
+`;
+};
+function genHandlerCode({ mode, metaName, customServerEntry, srcDirectory, internalSrcAlias, enableRsc }) {
   if (customServerEntry) {
-    return `export { default as requestHandler } from '${formatImportPath(customServerEntry.replace(srcDirectory, internalSrcAlias))}'`;
+    const realEntryPath = formatImportPath(customServerEntry.replace(srcDirectory, internalSrcAlias));
+    return `
+      export * from '${realEntryPath}';
+      export { default as requestHandler } from '${realEntryPath}'`;
   } else {
-    const serverEntry = transformServerEntry(SERVER_ENTRY, {
+    const entrySource = enableRsc ? SERVER_ENTRY_RSC : SERVER_ENTRY;
+    const serverEntry = transformServerEntry(entrySource, {
       metaName: metaName || "modern-js",
       mode
     });
@@ -43,5 +103,6 @@ function transformServerEntry(source, options) {
   return output;
 }
 export {
+  entryForCSRWithRSC,
   serverIndex
 };

package/dist/esm-node/core/context/index.js

@@ -6,6 +6,10 @@ function setGlobalContext(context) {
   globalContext.appInit = context.appInit;
   globalContext.appConfig = typeof context.appConfig === "function" ? context.appConfig() : context.appConfig;
   globalContext.layoutApp = context.layoutApp;
+  globalContext.RSCRoot = context.RSCRoot;
+}
+function getGlobalRSCRoot() {
+  return globalContext.RSCRoot;
 }
 function setGlobalInternalRuntimeContext(context) {
   globalContext.internalRuntimeContext = context;
@@ -37,6 +41,7 @@ export {
   getGlobalAppInit,
   getGlobalInternalRuntimeContext,
   getGlobalLayoutApp,
+  getGlobalRSCRoot,
   getGlobalRoutes,
   getInitialContext,
   setGlobalContext,

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

@@ -1,9 +1,10 @@
 import { getPathname, parseCookie, parseHeaders, parseQuery } from "@modern-js/runtime-utils/universal/request";
-import { getGlobalAppInit, getGlobalInternalRuntimeContext } from "../context";
+import { getGlobalAppInit, getGlobalInternalRuntimeContext, getGlobalRSCRoot } from "../context";
 import { getInitialContext } from "../context/runtime";
 import { createLoaderManager } from "../loader/loaderManager";
 import { createRoot } from "../react";
 import { CHUNK_CSS_PLACEHOLDER } from "./constants";
+import { SSRErrors } from "./tracer";
 import { getSSRConfigByEntry, getSSRMode } from "./utils";
 function createSSRContext(request, options) {
   const { config, loaderContext, onError, onTiming, locals, resource, params, responseProxy, logger, metrics, reporter } = options;
@@ -61,9 +62,9 @@ function createSSRContext(request, options) {
     loaderFailureMode
   };
 }
-const createRequestHandler = async (handleRequest) => {
+const createRequestHandler = async (handleRequest, createRequestOptions) => {
   const requestHandler = async (request, options) => {
-    var _context_routerContext, _context_routerContext1;
+    var _context_routerContext, _context_routerContext1, _context_routerContext2;
     const Root = createRoot();
     const internalRuntimeContext = getGlobalInternalRuntimeContext();
     const hooks = internalRuntimeContext.hooks;
@@ -113,8 +114,12 @@ const createRequestHandler = async (handleRequest) => {
     };
     const initialData = await runBeforeRender(context);
     if (((_context_routerContext = context.routerContext) === null || _context_routerContext === void 0 ? void 0 : _context_routerContext.statusCode) && ((_context_routerContext1 = context.routerContext) === null || _context_routerContext1 === void 0 ? void 0 : _context_routerContext1.statusCode) !== 200) {
-      var _context_routerContext2, _context_ssrContext;
-      (_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.response.status((_context_routerContext2 = context.routerContext) === null || _context_routerContext2 === void 0 ? void 0 : _context_routerContext2.statusCode);
+      var _context_routerContext3, _context_ssrContext;
+      (_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.response.status((_context_routerContext3 = context.routerContext) === null || _context_routerContext3 === void 0 ? void 0 : _context_routerContext3.statusCode);
+    }
+    const errors = Object.values(((_context_routerContext2 = context.routerContext) === null || _context_routerContext2 === void 0 ? void 0 : _context_routerContext2.errors) || {});
+    if (errors.length > 0) {
+      options.onError(errors[0], SSRErrors.LOADER_ERROR);
     }
     context.initialData = initialData;
     const redirectResponse = getRedirectResponse(initialData);
@@ -125,7 +130,8 @@ const createRequestHandler = async (handleRequest) => {
     options.resource.htmlTemplate = htmlTemplate.replace("</head>", `${CHUNK_CSS_PLACEHOLDER}</head>`);
     const response = await handleRequest(request, Root, {
       ...options,
-      runtimeContext: context
+      runtimeContext: context,
+      RSCRoot: (createRequestOptions === null || createRequestOptions === void 0 ? void 0 : createRequestOptions.enableRsc) && getGlobalRSCRoot()
     });
     Object.entries(responseProxy.headers).forEach(([key, value]) => {
       response.headers.set(key, value);

package/dist/esm-node/core/server/stream/afterTemplate.js

@@ -19,6 +19,8 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
   async function injectJs(template, entryName2, nonce) {
     const { routeManifest } = runtimeContext;
     const { routeAssets } = routeManifest;
+    if (!routeAssets)
+      return template;
     const asyncEntry = routeAssets[`async-${entryName2}`];
     if (asyncEntry) {
       var _assets_filter;

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

@@ -1,5 +1,5 @@
+import { renderSSRStream } from "@modern-js/render/ssr";
 import checkIsBot from "isbot";
-import { renderToReadableStream } from "react-dom/server";
 import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { RenderLevel } from "../../constants";
 import { ShellChunkStatus, encodeForWebStream, getReadableStreamFromString } from "./shared";
@@ -7,7 +7,7 @@ import { getTemplates } from "./template";
 const createReadableStreamFromElement = async (request, rootElement, options) => {
   let shellChunkStatus = ShellChunkStatus.START;
   const chunkVec = [];
-  const { htmlTemplate, runtimeContext, config, ssrConfig, entryName } = options;
+  const { htmlTemplate, runtimeContext, config, ssrConfig, entryName, rscRoot } = options;
   const { shellBefore, shellAfter } = await getTemplates(htmlTemplate, {
     renderLevel: RenderLevel.SERVER_RENDER,
     runtimeContext,
@@ -18,8 +18,12 @@ const createReadableStreamFromElement = async (request, rootElement, options) =>
   });
   try {
     var _options_onShellReady;
-    const readableOriginal = await renderToReadableStream(rootElement, {
+    const readableOriginal = await renderSSRStream(rootElement, {
+      request,
+      clientManifest: options.rscClientManifest,
+      ssrManifest: options.rscSSRManifest,
       nonce: config.nonce,
+      rscRoot,
       onError(error) {
         var _options_onError;
         (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
@@ -47,7 +51,7 @@ const createReadableStreamFromElement = async (request, rootElement, options) =>
             const chunk = new TextDecoder().decode(value);
             chunkVec.push(chunk);
             let concatedChunk = chunkVec.join("");
-            if (concatedChunk.endsWith(ESCAPED_SHELL_STREAM_END_MARK)) {
+            if (concatedChunk.includes(ESCAPED_SHELL_STREAM_END_MARK)) {
               concatedChunk = concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, "");
               shellChunkStatus = ShellChunkStatus.FINISH;
               controller.enqueue(encodeForWebStream(`${shellBefore}${concatedChunk}${shellAfter}`));

package/dist/esm-node/core/server/stream/index.js

@@ -1,5 +1,5 @@
-import { createReadableStreamFromElement } from "./createReadableStream";
 import { createRenderStreaming } from "./shared";
+const createReadableStreamFromElement = process.env.MODERN_SSR_ENV === "edge" ? import("./createReadableStream.worker").then((m) => m.createReadableStreamFromElement) : import("./createReadableStream").then((m) => m.createReadableStreamFromElement);
 const renderStreaming = createRenderStreaming(createReadableStreamFromElement);
 export {
   renderStreaming

package/dist/esm-node/core/server/stream/shared.js

@@ -1,8 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { run } from "@modern-js/runtime-utils/node";
 import { time } from "@modern-js/runtime-utils/time";
 import { parseHeaders } from "@modern-js/runtime-utils/universal/request";
 import { wrapRuntimeContextProvider } from "../../react/wrapper";
-import { SSRErrors, SSRTimings, createOnError, createOnTiming } from "../tracer";
+import { SSRErrors, SSRTimings } from "../tracer";
 import { getSSRConfigByEntry } from "../utils";
 var ShellChunkStatus;
 (function(ShellChunkStatus2) {
@@ -28,25 +29,37 @@ function getReadableStreamFromString(content) {
   });
   return readableStream;
 }
-function createRenderStreaming(createReadableStreamFromElement) {
+function createRenderStreaming(createReadableStreamPromise) {
   return async (request, serverRoot, options) => {
+    const createReadableStreamFromElement = await createReadableStreamPromise;
     const headersData = parseHeaders(request);
     return run(headersData, async () => {
       const end = time();
       const { runtimeContext, config, resource } = options;
-      const onError = createOnError(options.onError);
-      const onTiming = createOnTiming(options.onTiming);
+      const { onError, onTiming } = options;
       const { htmlTemplate, entryName } = resource;
       const ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
-      const rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
+      const RSCServerRoot = ({ children }) => {
+        return /* @__PURE__ */ _jsx(_Fragment, {
+          children
+        });
+      };
+      let rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
         ssr: true
       }));
+      rootElement = /* @__PURE__ */ _jsx(RSCServerRoot, {
+        children: rootElement
+      });
       const stream = await createReadableStreamFromElement(request, rootElement, {
         config,
         htmlTemplate,
         runtimeContext,
         ssrConfig,
         entryName,
+        rscClientManifest: options.rscClientManifest,
+        rscSSRManifest: options.rscSSRManifest,
+        rscServerManifest: options.rscServerManifest,
+        rscRoot: options.rscRoot,
         onShellReady() {
           const cost = end();
           onTiming(SSRTimings.RENDER_SHELL, cost);
@@ -56,10 +69,10 @@ function createRenderStreaming(createReadableStreamFromElement) {
           onTiming(SSRTimings.RENDER_HTML, cost);
         },
         onShellError(error) {
-          onError(SSRErrors.RENDER_SHELL, error);
+          onError(error, SSRErrors.RENDER_SHELL);
         },
         onError(error) {
-          onError(SSRErrors.RENDER_STREAM, error);
+          onError(error, SSRErrors.RENDER_STREAM);
         }
       });
       return stream;

package/dist/esm-node/core/server/string/index.js

@@ -8,7 +8,7 @@ import { wrapRuntimeContextProvider } from "../../react/wrapper";
 import { CHUNK_CSS_PLACEHOLDER, CHUNK_JS_PLACEHOLDER, HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER } from "../constants";
 import { createReplaceHelemt } from "../helmet";
 import { buildHtml } from "../shared";
-import { SSRErrors, SSRTimings, createOnError, createOnTiming } from "../tracer";
+import { SSRErrors, SSRTimings } from "../tracer";
 import { getSSRConfigByEntry, safeReplace } from "../utils";
 import { LoadableCollector } from "./loadable";
 import { prefetch } from "./prefetch";
@@ -20,8 +20,8 @@ const renderString = async (request, serverRoot, options) => {
     var _runtimeContext_ssrContext;
     const { resource, runtimeContext, config, onError, onTiming } = options;
     const tracer = {
-      onError: createOnError(onError),
-      onTiming: createOnTiming(onTiming)
+      onError,
+      onTiming
     };
     const routerContext = runtimeContext.routerContext;
     const { htmlTemplate, entryName, loadableStats, routeManifest } = resource;
@@ -38,7 +38,7 @@ const renderString = async (request, serverRoot, options) => {
       chunkSet.renderLevel = RenderLevel.SERVER_PREFETCH;
     } catch (e) {
       chunkSet.renderLevel = RenderLevel.CLIENT_RENDER;
-      tracer.onError(SSRErrors.PRERENDER, e);
+      tracer.onError(e, SSRErrors.PRERENDER);
     }
     const collectors = [
       new StyledCollector(chunkSet),
@@ -87,7 +87,7 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
     onTiming(SSRTimings.RENDER_HTML, cost);
   } catch (e) {
     chunkSet.renderLevel = RenderLevel.CLIENT_RENDER;
-    onError(SSRErrors.RENDER_HTML, e);
+    onError(e, SSRErrors.RENDER_HTML);
   }
   await Promise.all(collectors.map((component) => component.effect()));
   const { ssrScripts, cssChunk, jsChunk } = chunkSet;

package/dist/esm-node/core/server/string/prefetch.js

@@ -33,7 +33,7 @@ const prefetch = async (App, request, options, ssrConfig, { onError, onTiming })
         onTiming(SSRTimings.PRERENDER, cost);
       } catch (e) {
         const error = e;
-        onError(SSRErrors.PRERENDER, error);
+        onError(error, SSRErrors.PRERENDER);
         throw e;
       }
     }
@@ -50,13 +50,13 @@ const prefetch = async (App, request, options, ssrConfig, { onError, onTiming })
       const cost = end();
       onTiming(SSRTimings.USE_LOADER, cost);
     } catch (e) {
-      onError(SSRErrors.USE_LOADER, e);
+      onError(e, SSRErrors.USE_LOADER);
       throw e;
     }
     Object.keys(loadersData).forEach((id) => {
       const data = loadersData[id];
       if (data._error) {
-        onError(SSRErrors.USE_LOADER, data._error);
+        onError(data._error, SSRErrors.USE_LOADER);
         delete data._error;
       }
     });

package/dist/esm-node/core/server/tracer.js

@@ -12,22 +12,9 @@ var SSRErrors;
   SSRErrors2["RENDER_HTML"] = "App Render To HTML";
   SSRErrors2["RENDER_STREAM"] = "An error occurs during streaming SSR";
   SSRErrors2["RENDER_SHELL"] = "An error occurs during streaming render shell";
+  SSRErrors2["LOADER_ERROR"] = "App error occurs during data loader";
 })(SSRErrors || (SSRErrors = {}));
-function createOnError(onError) {
-  return (key, e) => {
-    const error = e instanceof Error ? e : new Error("Unexpected Server Error");
-    error.name = key;
-    onError === null || onError === void 0 ? void 0 : onError(e);
-  };
-}
-function createOnTiming(onTiming) {
-  return (key, cost) => {
-    onTiming === null || onTiming === void 0 ? void 0 : onTiming(key, cost);
-  };
-}
 export {
   SSRErrors,
-  SSRTimings,
-  createOnError,
-  createOnTiming
+  SSRTimings
 };

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

@@ -113,7 +113,7 @@ const generateCode = async (appContext, config, entrypoints, api) => {
   }
 };
 function generatorRegisterCode(internalDirectory, entryName, code) {
-  fs.outputFileSync(path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}`), code, "utf8");
+  fs.outputFileSync(path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}.js`), code, "utf8");
 }
 export {
   generateCode,

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

@@ -110,6 +110,10 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
     }
     return "";
   };
+  const createLazyImport = ({ componentPath, routeId, webpackChunkName, eager }) => {
+    const importOptions = webpackChunkName ? `/* webpackChunkName: "${routeId}" */ ` : eager ? `/* webpackMode: "eager" */ ` : "";
+    return `() => import(${importOptions}'${componentPath}').then(routeModule => handleRouteModule(routeModule, "${routeId}")).catch(handleRouteModuleError)`;
+  };
   const traverseRouteTree = (route) => {
     let children;
     if ("children" in route && route.children) {
@@ -158,24 +162,32 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
         configsMap[config] = route.config;
       }
       if (route._component) {
-        if (splitRouteChunks) {
-          if (route.isRoot) {
-            lazyImport = `() => import('${route._component}').then(routeModule => handleRouteModule(routeModule, "${route.id}")).catch(handleRouteModuleError) `;
-            rootLayoutCode = `import RootLayout from '${route._component}'`;
-            component = `RootLayout`;
-          } else if (ssrMode === "string") {
-            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}').then(routeModule => handleRouteModule(routeModule, "${route.id}")).catch(handleRouteModuleError) `;
-            component = `loadable(${lazyImport})`;
+        if (route.isRoot) {
+          lazyImport = createLazyImport({
+            componentPath: route._component,
+            routeId: route.id
+          });
+          rootLayoutCode = `import RootLayout from '${route._component}'`;
+          component = "RootLayout";
+        } else if (splitRouteChunks) {
+          lazyImport = createLazyImport({
+            componentPath: route._component,
+            routeId: route.id,
+            webpackChunkName: true
+          });
+          component = ssrMode === "string" ? `loadable(${lazyImport})` : `lazy(${lazyImport})`;
+        } else {
+          if (ssrMode === "string") {
+            components.push(route._component);
+            component = `component_${components.length - 1}`;
           } else {
-            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}').then(routeModule => handleRouteModule(routeModule, "${route.id}")).catch(handleRouteModuleError) `;
+            lazyImport = createLazyImport({
+              componentPath: route._component,
+              routeId: route.id,
+              eager: true
+            });
             component = `lazy(${lazyImport})`;
           }
-        } else if (ssrMode === "string") {
-          components.push(route._component);
-          component = `component_${components.length - 1}`;
-        } else {
-          lazyImport = `() => import(/* webpackMode: "eager" */  '${route._component}').then(routeModule => handleRouteModule(routeModule, "${route.id}")).catch(handleRouteModuleError) `;
-          component = `lazy(${lazyImport})`;
         }
       }
     } else if (route._component) {

package/dist/esm-node/rsc/client.js

@@ -0,0 +1 @@
+export * from "@modern-js/render/client";

package/dist/esm-node/rsc/server.js

@@ -0,0 +1 @@
+export * from "@modern-js/render/rsc";

package/dist/types/cli/constants.d.ts

@@ -5,5 +5,5 @@ export declare const INDEX_FILE_NAME = "index";
 export declare const ENTRY_BOOTSTRAP_FILE_NAME = "bootstrap.jsx";
 export declare const ENTRY_SERVER_BOOTSTRAP_FILE_NAME = "bootstrap.server.jsx";
 export declare const ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME = "runtime-register.js";
-export declare const ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME = "runtime-global-context.js";
+export declare const ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME = "runtime-global-context";
 export declare const ENTRY_POINT_REGISTER_FILE_NAME = "register.js";

package/dist/types/cli/template.d.ts

@@ -1,5 +1,11 @@
 import type { RuntimePluginConfig } from '@modern-js/app-tools';
-export declare const index: ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, }: {
+export declare const entryForCSRWithRSC: ({ metaName, entryName, urlPath, mountId, }: {
+    metaName: string;
+    entryName: string;
+    urlPath?: string | undefined;
+    mountId?: string | undefined;
+}) => string;
+export declare const index: ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, enableRsc, }: {
     srcDirectory: string;
     internalSrcAlias: string;
     metaName: string;
@@ -8,6 +14,7 @@ export declare const index: ({ srcDirectory, internalSrcAlias, metaName, entry,
     customEntry?: boolean | undefined;
     customBootstrap?: string | false | undefined;
     mountId?: string | undefined;
+    enableRsc?: boolean | undefined;
 }) => string;
 export declare const register: () => string;
 export declare const runtimeRegister: ({ entryName, srcDirectory, internalSrcAlias, metaName, runtimeConfigFile, runtimePlugins, }: {
@@ -25,3 +32,15 @@ export declare const runtimeGlobalContext: ({ srcDirectory, internalSrcAlias, me
     entry: string;
     customEntry?: boolean | undefined;
 }) => string;
+export declare const runtimeGlobalContextForRSCServer: ({ metaName, }: {
+    metaName: string;
+}) => string;
+export declare const runtimeGlobalContextForRSCClient: ({ metaName, }: {
+    metaName: string;
+}) => string;
+export declare const AppProxyForRSC: ({ srcDirectory, internalSrcAlias, entry, customEntry, }: {
+    srcDirectory: string;
+    internalSrcAlias: string;
+    entry: string;
+    customEntry?: boolean | undefined;
+}) => string;

package/dist/types/cli/template.server.d.ts

@@ -2,11 +2,15 @@ type ServerIndexOptinos = GenHandlerCodeOptions & {
     entryName: string;
 };
 export declare const serverIndex: (options: ServerIndexOptinos) => string;
+export declare const entryForCSRWithRSC: ({ metaName, }: {
+    metaName: string;
+}) => string;
 type GenHandlerCodeOptions = {
     customServerEntry?: string | false;
     srcDirectory: string;
     internalSrcAlias: string;
     entry: string;
+    enableRsc?: boolean;
 } & TransformServerEntryOptions;
 type TransformServerEntryOptions = {
     metaName?: string;

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

@@ -26,10 +26,15 @@ interface GlobalContext {
      */
     layoutApp?: React.ComponentType;
     internalRuntimeContext?: InternalRuntimeContext<RuntimeExtends>;
+    /**
+     * RSCRoot
+     */
+    RSCRoot?: React.ComponentType;
 }
 export declare function setGlobalContext(context: Omit<GlobalContext, 'appConfig' | 'internalRuntimeContext'> & {
     appConfig?: () => AppConfig;
 }): void;
+export declare function getGlobalRSCRoot(): import("react").ComponentType<{}> | undefined;
 export declare function setGlobalInternalRuntimeContext(context: InternalRuntimeContext<RuntimeExtends>): void;
 export declare function getGlobalInternalRuntimeContext(): InternalRuntimeContext<Required<import("@modern-js/plugin-v2").RuntimePluginExtends<import("../plugin/types").RuntimeConfig, import("./runtime").RuntimeContext, {}, {}>>>;
 export declare function getGlobalApp(): import("react").ComponentType<{}> | undefined;

package/dist/types/core/server/requestHandler.d.ts

@@ -7,5 +7,7 @@ export type HandleRequestOptions = Exclude<RequestHandlerOptions, 'staticGenerat
 };
 export type HandleRequest = (request: Request, ServerRoot: React.ComponentType, // App, routes,
 options: HandleRequestOptions) => Promise<Response>;
-export type CreateRequestHandler = (handleRequest: HandleRequest) => Promise<RequestHandler>;
+export type CreateRequestHandler = (handleRequest: HandleRequest, options?: {
+    enableRsc: boolean;
+}) => Promise<RequestHandler>;
 export declare const createRequestHandler: CreateRequestHandler;