@modern-js/runtime 2.67.11 → 2.68.1

package/dist/cjs/router/cli/code/templates.js

@@ -121,7 +121,7 @@ const routesForServer = ({ routesForServerLoaderMatches }) => {
 };
 const createMatchReg = (keyword) => new RegExp(`("${keyword}":\\s)"([^
 ]+)"`, "g");
-const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, splitRouteChunks = true }) => {
+const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, splitRouteChunks = true, isRscClient = false }) => {
   const components = [];
   const loadings = [];
   const errors = [];
@@ -147,14 +147,14 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
     return "";
   };
   const createLazyImport = ({ componentPath, routeId, webpackChunkName, eager }) => {
-    const importOptions = webpackChunkName ? `/* webpackChunkName: "${routeId}" */ ` : eager ? `/* webpackMode: "eager" */ ` : "";
+    const importOptions = webpackChunkName ? `/* webpackChunkName: "${routeId}" */  ` : eager ? `/* webpackMode: "eager" */  ` : "";
     return `() => import(${importOptions}'${componentPath}').then(routeModule => handleRouteModule(routeModule, "${routeId}")).catch(handleRouteModuleError)`;
   };
-  const traverseRouteTree = (route) => {
+  const traverseRouteTree = (route, isRscClient2) => {
     let children;
     if ("children" in route && route.children) {
       var _route_children;
-      children = route === null || route === void 0 ? void 0 : (_route_children = route.children) === null || _route_children === void 0 ? void 0 : _route_children.map(traverseRouteTree);
+      children = route === null || route === void 0 ? void 0 : (_route_children = route.children) === null || _route_children === void 0 ? void 0 : _route_children.map((child) => traverseRouteTree(child, isRscClient2));
     }
     let loading;
     let error;
@@ -237,7 +237,6 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
     }
     const finalRoute = {
       ...route,
-      lazyImport,
       loading,
       loader,
       action,
@@ -245,7 +244,10 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
       error,
       children
     };
-    if (route._component) {
+    if (!isRscClient2) {
+      finalRoute.lazyImport = lazyImport;
+    }
+    if (route._component && !isRscClient2) {
       finalRoute.component = component;
     }
     if (route.type === "nested" && route._component && (route.loader || route.data)) {
@@ -258,7 +260,7 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
   `;
   for (const route of routes) {
     if ("type" in route) {
-      const newRoute = traverseRouteTree(route);
+      const newRoute = traverseRouteTree(route, isRscClient);
       const routeStr = JSON.stringify(newRoute, null, 2);
       const keywords = [
         "component",
@@ -357,9 +359,9 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
   `;
   return `
     ${importLazyCode}
-    ${importComponentsCode}
+    ${!isRscClient ? importComponentsCode : ""}
     ${importRuntimeRouterCode}
-    ${rootLayoutCode}
+    ${!isRscClient ? rootLayoutCode : ""}
     ${importLoadingCode}
     ${importErrorComponentsCode}
     ${importLoadersCode}
@@ -398,7 +400,7 @@ function ssrLoaderCombinedModule(entrypoints, entrypoint, config, appContext) {
   }
   return null;
 }
-const runtimeGlobalContext = async ({ entryName, metaName, srcDirectory, nestedRoutesEntry, internalSrcAlias, globalApp }) => {
+const runtimeGlobalContext = async ({ entryName, metaName, srcDirectory, nestedRoutesEntry, internalSrcAlias, globalApp, rscType = false }) => {
   const imports = [
     `import { setGlobalContext } from '@${metaName}/runtime/context';`
   ];
@@ -443,18 +445,40 @@ const runtimeGlobalContext = async ({ entryName, metaName, srcDirectory, nestedR
   } else {
     imports.push(`let layoutApp;`);
   }
-  return `${imports.join("\n")}
+  const isClient = rscType === "client";
+  const enableRsc = Boolean(rscType);
+  if (isClient) {
+    return `${imports.join("\n")}
+
+    import { routes } from './routes';
+
+    const entryName = '${entryName}';
+      setGlobalContext({
+        entryName,
+        layoutApp,
+        routes,
+        appInit,
+        appConfig,
+        isRscClient: true,
+        enableRsc: true,
+      });
+    `;
+  } else {
+    return `${imports.join("\n")}
 
-import { routes } from './routes';
+    import { routes } from './routes';
 
-const entryName = '${entryName}';
-setGlobalContext({
-  entryName,
-  layoutApp,
-  routes,
-  appInit,
-  appConfig,
-});`;
+    const entryName = '${entryName}';
+      setGlobalContext({
+        entryName,
+        layoutApp,
+        routes,
+        appInit,
+        appConfig,
+        enableRsc: ${enableRsc},
+      });
+    `;
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/router/cli/handler.js

@@ -43,11 +43,13 @@ async function handleModifyEntrypoints(isRouterV5, entrypoints) {
   return (0, import_entry.modifyEntrypoints)(entrypoints, isRouterV5);
 }
 async function handleGeneratorEntryCode(api, entrypoints, isRouterV5) {
+  var _resolvedConfig_server;
   const appContext = api.getAppContext();
   const { internalDirectory } = appContext;
   const resolvedConfig = api.getNormalizedConfig();
-  const { generatorRegisterCode, generateCode } = await Promise.resolve().then(() => __toESM(require("./code")));
+  const { generatorRegisterCode, generateCode, generatorServerRegisterCode } = await Promise.resolve().then(() => __toESM(require("./code")));
   originEntrypoints = (0, import_lodash.cloneDeep)(entrypoints);
+  const enableRsc = resolvedConfig === null || resolvedConfig === void 0 ? void 0 : (_resolvedConfig_server = resolvedConfig.server) === null || _resolvedConfig_server === void 0 ? void 0 : _resolvedConfig_server.rsc;
   await generateCode(appContext, resolvedConfig, entrypoints, api, isRouterV5);
   await Promise.all(entrypoints.map(async (entrypoint) => {
     if (entrypoint.nestedRoutesEntry || entrypoint.pageRoutesEntry) {
@@ -58,8 +60,21 @@ async function handleGeneratorEntryCode(api, entrypoints, isRouterV5) {
         srcDirectory: appContext.srcDirectory,
         nestedRoutesEntry: entrypoint.nestedRoutesEntry,
         internalSrcAlias: appContext.internalSrcAlias,
-        globalApp: (_entrypoint_fileSystemRoutes = entrypoint.fileSystemRoutes) === null || _entrypoint_fileSystemRoutes === void 0 ? void 0 : _entrypoint_fileSystemRoutes.globalApp
+        globalApp: (_entrypoint_fileSystemRoutes = entrypoint.fileSystemRoutes) === null || _entrypoint_fileSystemRoutes === void 0 ? void 0 : _entrypoint_fileSystemRoutes.globalApp,
+        rscType: enableRsc ? "client" : void 0
       }));
+      if (enableRsc) {
+        var _entrypoint_fileSystemRoutes1;
+        generatorServerRegisterCode(internalDirectory, entrypoint.entryName, await templates.runtimeGlobalContext({
+          entryName: entrypoint.entryName,
+          metaName: appContext.metaName,
+          srcDirectory: appContext.srcDirectory,
+          nestedRoutesEntry: entrypoint.nestedRoutesEntry,
+          internalSrcAlias: appContext.internalSrcAlias,
+          globalApp: (_entrypoint_fileSystemRoutes1 = entrypoint.fileSystemRoutes) === null || _entrypoint_fileSystemRoutes1 === void 0 ? void 0 : _entrypoint_fileSystemRoutes1.globalApp,
+          rscType: "server"
+        }));
+      }
     }
   }));
   return entrypoints;

package/dist/cjs/router/cli/index.js

@@ -62,7 +62,7 @@ const routerPlugin = () => ({
       if ((nestedRoutesEntry || pageRoutesEntry) && !isRouterV5) {
         plugins.push({
           name: "router",
-          path: `@${metaName2}/runtime/router`,
+          path: `@${metaName2}/runtime/router/internal`,
           config: typeof routerConfig === "boolean" ? {
             serverBase
           } : {
@@ -89,9 +89,10 @@ const routerPlugin = () => ({
             // react-router v6 is no longer support ie 11
             // so we need to compile these packages to ensure the compatibility
             // https://github.com/remix-run/react-router/commit/f6df0697e1b2064a2b3a12e8b39577326fdd945b
-            /node_modules\/react-router/,
-            /node_modules\/react-router-dom/,
-            /node_modules\/@remix-run\/router/
+            /[\\/]node_modules[\\/]react-router[\\/]/,
+            /[\\/]node_modules[\\/]react-router-dom[\\/]/,
+            /[\\/]node_modules[\\/]@remix-run[\\/]router[\\/]/,
+            import_node_path.default.resolve(__dirname, "../runtime").replace("cjs", "esm")
           ],
           globalVars: {
             "process.env._MODERN_ROUTER_VERSION": "v6"
@@ -112,7 +113,7 @@ const routerPlugin = () => ({
       const { internalDirectory, metaName: metaName2 } = api.useAppContext();
       const pluginsExportsUtils = (0, import_utils.createRuntimeExportsUtils)(internalDirectory, "plugins");
       if (!isRouterV5) {
-        pluginsExportsUtils.addExport(`export { default as router } from '@${metaName2}/runtime/router'`);
+        pluginsExportsUtils.addExport(`export { default as router } from '@${metaName2}/runtime/router/internal'`);
       }
     });
     api.onFileChanged(async (e) => {

package/dist/cjs/router/index.js

@@ -1,14 +1,8 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -18,26 +12,11 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var router_exports = {};
-__export(router_exports, {
-  default: () => import_runtime2.default,
-  router: () => import_runtime.default
-});
 module.exports = __toCommonJS(router_exports);
-var import_runtime = __toESM(require("./runtime"));
-var import_runtime2 = __toESM(require("./runtime"));
 __reExport(router_exports, require("./runtime"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  router,
   ...require("./runtime")
 });

package/dist/cjs/router/internal.js

@@ -0,0 +1,30 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var internal_exports = {};
+__export(internal_exports, {
+  default: () => import_internal.routerPlugin
+});
+module.exports = __toCommonJS(internal_exports);
+__reExport(internal_exports, require("./runtime/internal"), module.exports);
+var import_internal = require("./runtime/internal");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./runtime/internal")
+});

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -29,8 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var PrefetchLink_exports = {};
 __export(PrefetchLink_exports, {
   Link: () => Link,
-  NavLink: () => NavLink,
-  composeEventHandlers: () => composeEventHandlers
+  NavLink: () => NavLink
 });
 module.exports = __toCommonJS(PrefetchLink_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -223,6 +223,5 @@ NavLink.displayName = "NavLink";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Link,
-  NavLink,
-  composeEventHandlers
+  NavLink
 });

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

@@ -32,9 +32,9 @@ var import_constants = require("../../core/constants");
 const setupFnStr = `function s(r,e){_ROUTER_DATA.r=_ROUTER_DATA.r||{},_ROUTER_DATA.r[r]=_ROUTER_DATA.r[r]||{};return new Promise((function(A,R){_ROUTER_DATA.r[r][e]={resolve:A,reject:R}}))};`;
 const resolveFnStr = `function r(e,r,o,A){A?_ROUTER_DATA.r[e][r].reject(A):_ROUTER_DATA.r[e][r].resolve(o)};`;
 const preResolvedFnStr = `function p(e,r){return void 0!==r?Promise.reject(new Error(r.message)):Promise.resolve(e)};`;
-const mergeLoaderDataStr = `function mergeLoaderData(e,n){const r=n.reduce((function(e,{key:n,routerDataFnName:r,routerDataFnArgs:a}){const t=a.map((e=>{if("undefined"!==e&&null!==e)return JSON.parse(e)}));return console.info("args",t),{...e,[n]:_ROUTER_DATA[r](...t)}}),{});Object.assign(_ROUTER_DATA.loaderData[e],r)}`;
+const mergeLoaderDataStr = `function mergeLoaderData(e,n){var r=n.reduce((function(e,{key:n,routerDataFnName:r,routerDataFnArgs:a}){var t=a.map((e=>{if("undefined"!==e&&null!==e)return JSON.parse(e)}));return console.info("args",t),{...e,[n]:_ROUTER_DATA[r](...t)}}),{});Object.assign(_ROUTER_DATA.loaderData[e],r)}`;
 const initRouterDataAttrs = `_ROUTER_DATA.s = ${setupFnStr}_ROUTER_DATA.r = ${resolveFnStr}_ROUTER_DATA.p = ${preResolvedFnStr}${mergeLoaderDataStr}`;
-const modernInline = `function runWindowFn(){window[document.currentScript.getAttribute("data-fn-name")](...JSON.parse(document.currentScript.getAttribute("data-fn-args")))}function runRouterDataFn(){_ROUTER_DATA[document.currentScript.getAttribute("data-fn-name")](...JSON.parse(document.currentScript.getAttribute("data-fn-args")))}function initRouterData(e){var r=document.getElementById(e);if(r)try{_ROUTER_DATA=JSON.parse(r.textContent)}catch(r){console.error("parse ".concat(e," error"),t),_ROUTER_DATA={}}};initRouterData('${import_constants.ROUTER_DATA_JSON_ID}');${initRouterDataAttrs}`;
+const modernInline = `function runWindowFn(){window[document.currentScript.getAttribute("data-fn-name")].apply(window,JSON.parse(document.currentScript.getAttribute("data-fn-args")))}function runRouterDataFn(){_ROUTER_DATA[document.currentScript.getAttribute("data-fn-name")].apply(_ROUTER_DATA,JSON.parse(document.currentScript.getAttribute("data-fn-args")))}function initRouterData(e){var r=document.getElementById(e);if(r)try{_ROUTER_DATA=JSON.parse(r.textContent)}catch(r){console.error("parse ".concat(e," error"),t),_ROUTER_DATA={}}};initRouterData('${import_constants.ROUTER_DATA_JSON_ID}');${initRouterDataAttrs}`;
 const runRouterDataFnStr = `runRouterDataFn();`;
 const runWindowFnStr = `runWindowFn();`;
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -22,24 +22,16 @@ __export(runtime_exports, {
   Link: () => import_PrefetchLink.Link,
   NavLink: () => import_PrefetchLink.NavLink,
   createShouldRevalidate: () => import_routeModule.createShouldRevalidate,
-  default: () => runtime_default,
   handleRouteModule: () => import_routeModule.handleRouteModule,
   handleRouteModuleError: () => import_routeModule.handleRouteModuleError,
-  modifyRoutes: () => import_plugin2.modifyRoutes,
-  renderRoutes: () => import_utils.renderRoutes,
-  routerPlugin: () => import_plugin.routerPlugin,
   useRouteLoaderData: () => useRouteLoaderData
 });
 module.exports = __toCommonJS(runtime_exports);
 var import_router = require("@modern-js/runtime-utils/router");
-var import_plugin = require("./plugin");
 __reExport(runtime_exports, require("@modern-js/runtime-utils/router"), module.exports);
-var import_utils = require("./utils");
-var import_plugin2 = require("./plugin");
-__reExport(runtime_exports, require("./withRouter"), module.exports);
 var import_PrefetchLink = require("./PrefetchLink");
 var import_routeModule = require("./routeModule");
-var runtime_default = import_plugin.routerPlugin;
+__reExport(runtime_exports, require("./withRouter"), module.exports);
 const useRouteLoaderData = (routeId) => {
   const realRouteId = routeId.replace(/\[(.*?)\]/g, "($1)");
   return (0, import_router.useRouteLoaderData)(realRouteId);
@@ -51,9 +43,6 @@ const useRouteLoaderData = (routeId) => {
   createShouldRevalidate,
   handleRouteModule,
   handleRouteModuleError,
-  modifyRoutes,
-  renderRoutes,
-  routerPlugin,
   useRouteLoaderData,
   ...require("@modern-js/runtime-utils/router"),
   ...require("./withRouter")

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

@@ -0,0 +1,36 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var internal_exports = {};
+__export(internal_exports, {
+  default: () => internal_default,
+  modifyRoutes: () => import_plugin2.modifyRoutes,
+  renderRoutes: () => import_utils.renderRoutes,
+  routerPlugin: () => import_plugin.routerPlugin
+});
+module.exports = __toCommonJS(internal_exports);
+var import_plugin = require("./plugin");
+var import_utils = require("./utils");
+var import_plugin2 = require("./plugin");
+var internal_default = import_plugin.routerPlugin;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  modifyRoutes,
+  renderRoutes,
+  routerPlugin
+});

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

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var plugin_exports = {};
 __export(plugin_exports, {
@@ -28,10 +38,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_merge = require("@modern-js/runtime-utils/merge");
 var import_router = require("@modern-js/runtime-utils/router");
 var import_url = require("@modern-js/runtime-utils/url");
+var React = __toESM(require("react"));
 var import_react = require("react");
 var import_core = require("../../core");
 var import_context = require("../../core/context");
+var import_context2 = require("../../core/context");
 var import_hooks = require("./hooks");
+var import_rsc_router = require("./rsc-router");
 var import_utils = require("./utils");
 let finalRouteConfig = {
   routes: []
@@ -54,7 +67,9 @@ const routerPlugin = (userConfig = {}) => {
       onBeforeCreateRoutes: import_hooks.onBeforeCreateRoutes
     },
     setup: (api) => {
-      let routes = [];
+      const routesContainer = {
+        current: []
+      };
       api.onBeforeRender((context) => {
         if (window._SSR_DATA && userConfig.unstable_reloadOnURLMismatch) {
           var _ssrContext_request;
@@ -74,15 +89,14 @@ const routerPlugin = (userConfig = {}) => {
         };
         Object.defineProperty(context, "routes", {
           get() {
-            return routes;
+            return routesContainer.current;
           },
           enumerable: true
         });
       });
       api.wrapRoot((App) => {
-        const pluginConfig = api.getRuntimeConfig();
-        const { serverBase = [], supportHtml5History = true, basename = "", routesConfig, createRoutes, future } = (0, import_merge.merge)(pluginConfig.router || {}, userConfig);
-        const select = (pathname) => serverBase.find((baseUrl) => pathname.search(baseUrl) === 0) || "/";
+        const mergedConfig = (0, import_merge.merge)(api.getRuntimeConfig().router || {}, userConfig);
+        const { serverBase = [], supportHtml5History = true, basename = "", routesConfig, createRoutes, future } = mergedConfig;
         finalRouteConfig = {
           routes: (0, import_context.getGlobalRoutes)(),
           globalApp: (0, import_context.getGlobalLayoutApp)(),
@@ -91,82 +105,127 @@ const routerPlugin = (userConfig = {}) => {
         if (!finalRouteConfig.routes && !createRoutes) {
           return App;
         }
-        const getRouteApp = () => {
-          const useCreateRouter = (props) => {
-            const runtimeContext = (0, import_react.useContext)(import_core.RuntimeReactContext);
-            const baseUrl = select(location.pathname).replace(/^\/*/, "/");
-            const _basename = baseUrl === "/" ? (0, import_utils.urlJoin)(baseUrl, runtimeContext._internalRouterBaseName || basename) : baseUrl;
-            let hydrationData = window._ROUTER_DATA;
-            const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
-            return (0, import_react.useMemo)(() => {
-              if (hydrationData === null || hydrationData === void 0 ? void 0 : hydrationData.errors) {
-                hydrationData = {
-                  ...hydrationData,
-                  errors: (0, import_utils.deserializeErrors)(hydrationData.errors)
-                };
-              }
-              routes = createRoutes ? createRoutes() : (0, import_router.createRoutesFromElements)((0, import_utils.renderRoutes)({
-                routesConfig: finalRouteConfig,
-                props
-              }));
-              const hooks = api.getHooks();
-              routes = hooks.modifyRoutes.call(routes);
-              const router = supportHtml5History ? (0, import_router.createBrowserRouter)(routes, {
-                basename: _basename,
-                hydrationData
-              }) : (0, import_router.createHashRouter)(routes, {
-                basename: _basename,
-                hydrationData
-              });
-              const originSubscribe = router.subscribe;
-              router.subscribe = (listener) => {
-                const wrapedListener = (...args) => {
-                  const blockRoute = getBlockNavState ? getBlockNavState() : false;
-                  if (blockRoute) {
-                    return;
-                  }
-                  return listener(...args);
-                };
-                return originSubscribe(wrapedListener);
-              };
-              return router;
-            }, [
-              finalRouteConfig,
-              props,
-              _basename,
-              hydrationData,
-              getBlockNavState
-            ]);
-          };
-          const Null = () => null;
-          return (props) => {
-            beforeCreateRouter = false;
-            const router = useCreateRouter(props);
-            const routerWrapper = (
-              // To match the node tree about https://github.com/web-infra-dev/modern.js/blob/v2.59.0/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx#L150-L168
-              // According to react [useId generation algorithm](https://github.com/facebook/react/pull/22644), `useId` will generate id with the react node react struct.
-              // To void hydration failed, we must guarantee that the node tree when browser hydrate must have same struct with node tree when ssr render.
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_router.RouterProvider, {
-                    router,
-                    future
-                  }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Null, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Null, {})
-                ]
-              })
-            );
-            return App ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {
-              children: routerWrapper
-            }) : routerWrapper;
-          };
+        const selectBasePath = (pathname) => serverBase.find((baseUrl) => pathname.search(baseUrl) === 0) || "/";
+        const RouterWrapper = (props) => {
+          const { router, routes } = useRouterCreation({
+            ...props,
+            rscPayload: props === null || props === void 0 ? void 0 : props.rscPayload
+          }, {
+            api,
+            createRoutes,
+            supportHtml5History,
+            selectBasePath,
+            basename,
+            future
+          });
+          (0, import_react.useEffect)(() => {
+            routesContainer.current = routes;
+          }, [
+            routes
+          ]);
+          beforeCreateRouter = false;
+          const RouterContent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_router.RouterProvider, {
+                router,
+                future
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyComponent, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyComponent, {})
+            ]
+          });
+          return App ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterContent, {})
+          }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterContent, {});
         };
-        return getRouteApp();
+        return RouterWrapper;
       });
     }
   };
 };
+const EmptyComponent = () => null;
+const safeUse = (promise) => {
+  const useProp = "use";
+  const useHook = React && React[useProp];
+  if (typeof useHook === "function") {
+    return useHook(promise);
+  }
+  return null;
+};
+function useRouterCreation(props, options) {
+  const { api, createRoutes, supportHtml5History, selectBasePath, basename } = options;
+  const runtimeContext = (0, import_react.useContext)(import_core.RuntimeReactContext);
+  const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, "/");
+  const _basename = baseUrl === "/" ? (0, import_utils.urlJoin)(baseUrl, runtimeContext._internalRouterBaseName || basename) : baseUrl;
+  const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
+  const rscPayload = (props === null || props === void 0 ? void 0 : props.rscPayload) ? safeUse(props.rscPayload) : null;
+  let hydrationData = window._ROUTER_DATA || rscPayload;
+  return (0, import_react.useMemo)(() => {
+    if (hydrationData === null || hydrationData === void 0 ? void 0 : hydrationData.errors) {
+      hydrationData = {
+        ...hydrationData,
+        errors: (0, import_utils.deserializeErrors)(hydrationData.errors)
+      };
+    }
+    const isRscClient = (0, import_context2.getGlobalIsRscClient)();
+    let routes = null;
+    if (isRscClient) {
+      routes = createRoutes ? createRoutes() : (0, import_utils.createRouteObjectsFromConfig)({
+        routesConfig: finalRouteConfig
+      });
+    } else {
+      routes = createRoutes ? createRoutes() : (0, import_router.createRoutesFromElements)((0, import_utils.renderRoutes)({
+        routesConfig: finalRouteConfig,
+        props
+      }));
+    }
+    if (!routes) {
+      routes = [];
+    }
+    const hooks = api.getHooks();
+    if (rscPayload) {
+      try {
+        const router2 = (0, import_rsc_router.createClientRouterFromPayload)(rscPayload, routes, _basename);
+        return {
+          router: router2,
+          routes: router2.routes || []
+        };
+      } catch (e) {
+        console.error("Failed to create router from RSC payload:", e);
+      }
+    }
+    const modifiedRoutes = hooks.modifyRoutes.call(routes);
+    console.log("modifiedRoutes111111", modifiedRoutes, _basename, hydrationData);
+    const router = supportHtml5History ? (0, import_router.createBrowserRouter)(modifiedRoutes, {
+      basename: _basename,
+      hydrationData
+    }) : (0, import_router.createHashRouter)(modifiedRoutes, {
+      basename: _basename,
+      hydrationData
+    });
+    const originSubscribe = router.subscribe;
+    router.subscribe = (listener) => {
+      const wrappedListener = (...args) => {
+        const blockRoute = getBlockNavState ? getBlockNavState() : false;
+        if (blockRoute) {
+          return;
+        }
+        return listener(...args);
+      };
+      return originSubscribe(wrappedListener);
+    };
+    return {
+      router,
+      routes: modifiedRoutes
+    };
+  }, [
+    finalRouteConfig,
+    props,
+    _basename,
+    hydrationData,
+    getBlockNavState
+  ]);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   beforeCreateRouter,