@bleedingdev/modern-js-runtime 3.4.0-ultramodern.2 → 3.4.0-ultramodern.20

package/dist/cjs/cli/index.js

@@ -50,7 +50,8 @@ __webpack_require__.d(__webpack_exports__, {
     makeLegalIdentifier: ()=>makeLegalIdentifier_js_namespaceObject.makeLegalIdentifier,
     routerPlugin: ()=>external_router_cli_index_js_namespaceObject.routerPlugin,
     runtimePlugin: ()=>runtimePlugin,
-    ssrPlugin: ()=>external_ssr_index_js_namespaceObject.ssrPlugin
+    ssrPlugin: ()=>external_ssr_index_js_namespaceObject.ssrPlugin,
+    updateNestedRoutesSpec: ()=>external_router_cli_index_js_namespaceObject.updateNestedRoutesSpec
 });
 const utils_namespaceObject = require("@modern-js/utils");
 const external_path_namespaceObject = require("path");
@@ -160,6 +161,7 @@ exports.makeLegalIdentifier = __webpack_exports__.makeLegalIdentifier;
 exports.routerPlugin = __webpack_exports__.routerPlugin;
 exports.runtimePlugin = __webpack_exports__.runtimePlugin;
 exports.ssrPlugin = __webpack_exports__.ssrPlugin;
+exports.updateNestedRoutesSpec = __webpack_exports__.updateNestedRoutesSpec;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "default",
     "documentPlugin",
@@ -174,7 +176,8 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "makeLegalIdentifier",
     "routerPlugin",
     "runtimePlugin",
-    "ssrPlugin"
+    "ssrPlugin",
+    "updateNestedRoutesSpec"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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

@@ -57,7 +57,7 @@ import {
   createRequestHandler,
 } from '@#metaName/runtime/ssr/server';
 import { RSCServerSlot } from '@#metaName/runtime/rsc/client';
-import { renderRsc } from '@#metaName/runtime/rsc/server';
+import { renderCSRWithRSC, renderRsc } from '@#metaName/runtime/rsc/server';
 export { handleAction } from '@#metaName/runtime/rsc/server';
 
 const handleRequest = async (request, ServerRoot, options) => {
@@ -84,6 +84,17 @@ export const requestHandler = createRequestHandler(handleRequest, {
   enableRsc: true
 });
 
+const handleCSRRender = async (request, ServerRoot, options) => {
+  return renderCSRWithRSC({
+    html: options.html,
+    rscRoot: options.rscRoot,
+  });
+}
+
+export const renderRscStreamHandler = createRequestHandler(handleCSRRender, {
+  enableRsc: true
+});
+
 const handleRSCRequest = async (request, ServerRoot, options) => {
   const { serverPayload } = options;
   const stream = renderRsc({

package/dist/cjs/core/server/stream/beforeTemplate.js

@@ -66,8 +66,8 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
         return (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject.CHUNK_CSS_PLACEHOLDER, css);
         async function getCssChunks() {
             const { routeManifest, routerContext, routes } = runtimeContext;
-            if (!routeManifest) return '';
-            const { routeAssets } = routeManifest;
+            const routeAssets = routeManifest?.routeAssets;
+            if (!routeAssets) return '';
             let matchedRouteManifests = [];
             const matchedRouteIds = (0, lifecycle_js_namespaceObject.getRouterMatchedRouteIds)(runtimeContext);
             if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);

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

@@ -60,8 +60,8 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
         return (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject.CHUNK_CSS_PLACEHOLDER, css);
         async function getCssChunks() {
             const { routeManifest, routerContext, routes } = runtimeContext;
-            if (!routeManifest) return '';
-            const { routeAssets } = routeManifest;
+            const routeAssets = routeManifest?.routeAssets;
+            if (!routeAssets) return '';
             let matchedRouteManifests = [];
             const matchedRouteIds = (0, lifecycle_js_namespaceObject.getRouterMatchedRouteIds)(runtimeContext);
             if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);

package/dist/cjs/core/server/string/loadable.js

@@ -61,10 +61,6 @@ const readAsset = async (chunk)=>{
     return fs.readFile(filepath, 'utf-8');
 };
 class LoadableCollector {
-    get existsAssets() {
-        const { routeManifest, entryName } = this.options;
-        return routeManifest?.routeAssets?.[entryName]?.assets;
-    }
     getMatchedRouteChunks() {
         const { routeManifest, runtimeContext } = this.options;
         if (!routeManifest) return [];
@@ -131,7 +127,7 @@ class LoadableCollector {
         const matchs = template.matchAll(jsScriptRegExp);
         const existedScript = [];
         for (const match of matchs)existedScript.push(match[1]);
-        const scripts = await Promise.all(chunks.filter((chunk)=>!existedScript.includes(chunk.url) && !this.existsAssets?.includes(chunk.path)).map(async (chunk)=>{
+        const scripts = await Promise.all(chunks.filter((chunk)=>!existedScript.includes(chunk.url)).map(async (chunk)=>{
             const script = `<script${attributes} src="${chunk.url}"></script>`;
             if ((0, external_utils_js_namespaceObject.checkIsNode)() && checkIsInline(chunk, inlineStyles)) return readAsset(chunk).then((content)=>`<script>${content}</script>`).catch((_)=>script);
             return script;
@@ -142,7 +138,7 @@ class LoadableCollector {
         const { template, chunkSet, config, moduleFederationCssAssets } = this.options;
         const { inlineStyles } = config;
         const atrributes = (0, external_utils_js_namespaceObject.attributesToString)(this.generateAttributes());
-        const emittedChunks = chunks.filter((chunk)=>!(0, external_utils_js_namespaceObject.hasStylesheetLink)(template, chunk.url) && !this.existsAssets?.includes(chunk.path));
+        const emittedChunks = chunks.filter((chunk)=>!(0, external_utils_js_namespaceObject.hasStylesheetLink)(template, chunk.url));
         const css = await Promise.all(emittedChunks.map(async (chunk)=>{
             const link = `<link${atrributes} href="${chunk.url}" rel="stylesheet" />`;
             if ((0, external_utils_js_namespaceObject.checkIsNode)() && checkIsInline(chunk, inlineStyles)) return readAsset(chunk).then((content)=>`<style>${content}</style>`).catch((_)=>link);

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

@@ -214,14 +214,14 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
                     routeId: route.id,
                     webpackChunkName: true
                 });
-                component = 'string' === ssrMode ? `loadable(${lazyImport})` : `lazy(${lazyImport})`;
+                component = 'string' === ssrMode ? `loadable(${lazyImport}, { resolveComponent: resolveRouteComponent })` : `lazy(${lazyImport})`;
             } else {
                 components.push(route._component);
                 component = `component_${components.length - 1}`;
             }
         } else if (route._component) if (splitRouteChunks) {
             lazyImport = `() => import('${route._component}')`;
-            component = `loadable(${lazyImport})`;
+            component = `loadable(${lazyImport}, { resolveComponent: resolveRouteComponent })`;
         } else {
             components.push(route._component);
             component = `component_${components.length - 1}`;
@@ -269,7 +269,7 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
         const newRouteStr = regs.reduce((acc, reg)=>acc.replace(reg, '$1$2'), routeStr).replace(/"(RootLayout)"/g, '$1').replace(/\\"/g, '"');
         routeComponentsCode += `${newRouteStr},`;
     } else {
-        const component = `loadable(() => import('${route._component}'))`;
+        const component = `loadable(() => import('${route._component}'), { resolveComponent: resolveRouteComponent })`;
         const finalRoute = {
             ...route,
             component
@@ -319,7 +319,7 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
     await utils_namespaceObject.fs.ensureFile(loadersMapFile);
     await utils_namespaceObject.fs.writeJSON(loadersMapFile, loadersMap);
     const importRuntimeRouterCode = `
-    import { createShouldRevalidate, handleRouteModule,  handleRouteModuleError} from '@${metaName}/runtime/routerHelper';
+    import { createShouldRevalidate, handleRouteModule, handleRouteModuleError, resolveRouteComponent } from '@${metaName}/runtime/routerHelper';
   `;
     const routeModulesCode = `
     if(typeof document !== 'undefined'){
@@ -341,19 +341,19 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
 };
 function ssrLoaderCombinedModule(entrypoints, entrypoint, config, appContext) {
     const { entryName, isMainEntry } = entrypoint;
-    const { packageName, internalDirectory } = appContext;
+    const { packageName } = appContext;
     const ssr = (0, utils_namespaceObject.getEntryOptions)(entryName, isMainEntry, config.server.ssr, config.server.ssrByEntries, packageName);
     const ssg = (0, utils_namespaceObject.isSSGEntry)(config, entryName, entrypoints);
     if (entrypoint.nestedRoutesEntry && (ssr || ssg)) {
         const serverLoaderRuntime = require.resolve('@modern-js/plugin-data-loader/runtime');
-        const serverLoadersFile = (0, external_utils_js_namespaceObject.getServerLoadersFile)(internalDirectory, entryName);
-        const combinedModule = `export * from "${(0, utils_namespaceObject.slash)(serverLoaderRuntime)}"; export * from "${(0, utils_namespaceObject.slash)(serverLoadersFile)}"`;
+        const serverLoadersFile = './route-server-loaders.js';
+        const combinedModule = `export * from "${(0, utils_namespaceObject.slash)(serverLoaderRuntime)}"; export * from "${serverLoadersFile}"`;
         if (!config.source.enableAsyncEntry) return combinedModule;
         return `
     async function loadModules() {
       const [moduleA, moduleB] = await Promise.all([
         import("${(0, utils_namespaceObject.slash)(serverLoaderRuntime)}"),
-        import("${(0, utils_namespaceObject.slash)(serverLoadersFile)}")
+        import("${serverLoadersFile}")
       ]);
 
       return {

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

@@ -45,7 +45,8 @@ __webpack_require__.d(__webpack_exports__, {
     handleGeneratorEntryCode: ()=>external_handler_js_namespaceObject.handleGeneratorEntryCode,
     handleModifyEntrypoints: ()=>external_handler_js_namespaceObject.handleModifyEntrypoints,
     isRouteEntry: ()=>external_entry_js_namespaceObject.isRouteEntry,
-    routerPlugin: ()=>routerPlugin
+    routerPlugin: ()=>routerPlugin,
+    updateNestedRoutesSpec: ()=>external_nestedRoutesSpec_js_namespaceObject.updateNestedRoutesSpec
 });
 const external_node_path_namespaceObject = require("node:path");
 var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
@@ -53,6 +54,7 @@ const utils_namespaceObject = require("@modern-js/utils");
 const external_constants_js_namespaceObject = require("./constants.js");
 const external_entry_js_namespaceObject = require("./entry.js");
 const external_handler_js_namespaceObject = require("./handler.js");
+const external_nestedRoutesSpec_js_namespaceObject = require("./nestedRoutesSpec.js");
 function isBuiltInRouteEntrypoint(entrypoint) {
     const entrypointRoutesOwner = (0, external_entry_js_namespaceObject.getEntrypointRoutesOwner)(entrypoint);
     if (entrypointRoutesOwner) return entrypointRoutesOwner === external_entry_js_namespaceObject.BUILT_IN_ROUTES_OWNER;
@@ -137,11 +139,7 @@ const routerPlugin = ()=>({
                 if (isBuiltInRouteEntrypoint(entrypoint)) {
                     const { distDirectory } = api.getAppContext();
                     const nestedRoutesSpecPath = external_node_path_default().resolve(distDirectory, utils_namespaceObject.NESTED_ROUTE_SPEC_FILE);
-                    const existingNestedRoutes = await utils_namespaceObject.fs.pathExists(nestedRoutesSpecPath) ? await utils_namespaceObject.fs.readJSON(nestedRoutesSpecPath) : {};
-                    await utils_namespaceObject.fs.outputJSON(nestedRoutesSpecPath, {
-                        ...existingNestedRoutes,
-                        ...nestedRoutesForServer
-                    });
+                    await (0, external_nestedRoutesSpec_js_namespaceObject.updateNestedRoutesSpec)(nestedRoutesSpecPath, nestedRoutesForServer);
                 }
                 return {
                     entrypoint,
@@ -160,6 +158,7 @@ exports.handleGeneratorEntryCode = __webpack_exports__.handleGeneratorEntryCode;
 exports.handleModifyEntrypoints = __webpack_exports__.handleModifyEntrypoints;
 exports.isRouteEntry = __webpack_exports__.isRouteEntry;
 exports.routerPlugin = __webpack_exports__.routerPlugin;
+exports.updateNestedRoutesSpec = __webpack_exports__.updateNestedRoutesSpec;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "BUILT_IN_ROUTES_OWNER",
     "default",
@@ -169,7 +168,8 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "handleGeneratorEntryCode",
     "handleModifyEntrypoints",
     "isRouteEntry",
-    "routerPlugin"
+    "routerPlugin",
+    "updateNestedRoutesSpec"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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

@@ -0,0 +1,114 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __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__, {
+    updateNestedRoutesSpec: ()=>updateNestedRoutesSpec
+});
+const external_node_path_namespaceObject = require("node:path");
+var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
+const promises_namespaceObject = require("node:timers/promises");
+const utils_namespaceObject = require("@modern-js/utils");
+const lockPollIntervalMs = 25;
+const staleLockAgeMs = 120000;
+const pendingUpdates = new Map();
+let tempFileCounter = 0;
+async function acquireSpecLock(specPath) {
+    const lockDir = `${specPath}.lock`;
+    await utils_namespaceObject.fs.ensureDir(external_node_path_default().dirname(specPath));
+    while(true){
+        try {
+            await utils_namespaceObject.fs.mkdir(lockDir);
+            return async ()=>{
+                await utils_namespaceObject.fs.remove(lockDir);
+            };
+        } catch (error) {
+            if ('EEXIST' !== error.code) throw error;
+        }
+        try {
+            const stat = await utils_namespaceObject.fs.stat(lockDir);
+            if (performance.timeOrigin + performance.now() - stat.mtimeMs > staleLockAgeMs) {
+                await utils_namespaceObject.fs.remove(lockDir);
+                continue;
+            }
+        } catch (error) {
+            if ('ENOENT' !== error.code) throw error;
+            continue;
+        }
+        await (0, promises_namespaceObject.setTimeout)(lockPollIntervalMs);
+    }
+}
+async function writeJSONAtomically(filePath, value) {
+    const directory = external_node_path_default().dirname(filePath);
+    const tempPath = external_node_path_default().join(directory, `.${external_node_path_default().basename(filePath)}.${process.pid}.${tempFileCounter += 1}.tmp`);
+    try {
+        await utils_namespaceObject.fs.writeFile(tempPath, `${JSON.stringify(value)}\n`);
+        await utils_namespaceObject.fs.rename(tempPath, filePath);
+    } catch (error) {
+        await utils_namespaceObject.fs.remove(tempPath).catch(()=>{});
+        throw error;
+    }
+}
+async function updateNestedRoutesSpec(specPath, nextRoutes) {
+    const resolvedSpecPath = external_node_path_default().resolve(specPath);
+    const previousUpdate = pendingUpdates.get(resolvedSpecPath) ?? Promise.resolve();
+    const currentUpdate = previousUpdate.catch(()=>void 0).then(async ()=>{
+        const releaseLock = await acquireSpecLock(resolvedSpecPath);
+        try {
+            const existingRoutes = await utils_namespaceObject.fs.pathExists(resolvedSpecPath) ? await utils_namespaceObject.fs.readJSON(resolvedSpecPath) : {};
+            await writeJSONAtomically(resolvedSpecPath, {
+                ...existingRoutes,
+                ...nextRoutes
+            });
+        } finally{
+            await releaseLock();
+        }
+    });
+    pendingUpdates.set(resolvedSpecPath, currentUpdate);
+    try {
+        await currentUpdate;
+    } finally{
+        if (pendingUpdates.get(resolvedSpecPath) === currentUpdate) pendingUpdates.delete(resolvedSpecPath);
+    }
+}
+exports.updateNestedRoutesSpec = __webpack_exports__.updateNestedRoutesSpec;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "updateNestedRoutesSpec"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -30,17 +30,57 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     createShouldRevalidate: ()=>createShouldRevalidate,
     handleRouteModule: ()=>handleRouteModule,
-    handleRouteModuleError: ()=>handleRouteModuleError
+    handleRouteModuleError: ()=>handleRouteModuleError,
+    resolveRouteComponent: ()=>resolveRouteComponent
 });
 const constants_namespaceObject = require("@modern-js/utils/universal/constants");
+const isObjectLike = (value)=>'object' == typeof value && null !== value || 'function' == typeof value;
+const isRouteComponent = (value)=>'function' == typeof value || isObjectLike(value) && '$$typeof' in value;
+const getRouteModules = ()=>{
+    if ("u" < typeof window) return;
+    return window[constants_namespaceObject.ROUTE_MODULES];
+};
+const storeRouteModule = (routeModule, routeId)=>{
+    if ("u" < typeof document) return;
+    const routeModules = getRouteModules();
+    if (void 0 !== routeModules) routeModules[routeId] = routeModule;
+};
+const unwrapRspackAsyncModule = (routeModule)=>{
+    if (!isObjectLike(routeModule)) return routeModule;
+    const rspackExportsSymbol = Object.getOwnPropertySymbols(routeModule).find((symbol)=>'rspack exports' === symbol.description);
+    if (void 0 !== rspackExportsSymbol) return routeModule[rspackExportsSymbol];
+    if ('__webpack_exports__' in routeModule) return routeModule.__webpack_exports__;
+    return routeModule;
+};
 const createShouldRevalidate = (routeId)=>(arg)=>{
-        const routeModule = "u" > typeof window ? window?.[constants_namespaceObject.ROUTE_MODULES]?.[routeId] : void 0;
-        if (routeModule && 'function' == typeof routeModule.shouldRevalidate) return routeModule.shouldRevalidate(arg);
+        const routeModule = getRouteModules()?.[routeId];
+        if (isObjectLike(routeModule)) {
+            const shouldRevalidate = routeModule.shouldRevalidate;
+            if ('function' == typeof shouldRevalidate) return shouldRevalidate(arg);
+        }
         return arg.defaultShouldRevalidate;
     };
+const pickRouteModuleComponent = (routeModule, seen = new Set())=>{
+    const unwrappedRouteModule = unwrapRspackAsyncModule(routeModule);
+    if (isRouteComponent(unwrappedRouteModule)) return unwrappedRouteModule;
+    if (!isObjectLike(unwrappedRouteModule) || seen.has(unwrappedRouteModule)) return;
+    seen.add(unwrappedRouteModule);
+    const componentModule = unwrappedRouteModule;
+    for (const candidate of [
+        componentModule.default,
+        componentModule.Component
+    ]){
+        const component = pickRouteModuleComponent(candidate, seen);
+        if (void 0 !== component) return component;
+    }
+};
+const resolveRouteComponent = (routeModule)=>pickRouteModuleComponent(routeModule) ?? routeModule;
 const handleRouteModule = (routeModule, routeId)=>{
-    if ("u" > typeof document) window[constants_namespaceObject.ROUTE_MODULES][routeId] = routeModule;
-    return routeModule;
+    storeRouteModule(routeModule, routeId);
+    const component = pickRouteModuleComponent(routeModule);
+    return void 0 !== component ? {
+        default: component
+    } : routeModule;
 };
 const handleRouteModuleError = (error)=>{
     console.error(error);
@@ -49,10 +89,12 @@ const handleRouteModuleError = (error)=>{
 exports.createShouldRevalidate = __webpack_exports__.createShouldRevalidate;
 exports.handleRouteModule = __webpack_exports__.handleRouteModule;
 exports.handleRouteModuleError = __webpack_exports__.handleRouteModuleError;
+exports.resolveRouteComponent = __webpack_exports__.resolveRouteComponent;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "createShouldRevalidate",
     "handleRouteModule",
-    "handleRouteModuleError"
+    "handleRouteModuleError",
+    "resolveRouteComponent"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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

@@ -90,10 +90,10 @@ const createServerPayload = (routerContext, routes)=>{
         routes: routerContext.matches.map((match, index, matches)=>{
             const route = match.route;
             const element = route.element;
+            const Component = route.Component;
             const parentMatch = index > 0 ? matches[index - 1] : void 0;
             let processedElement;
-            if (element) {
-                const ElementComponent = element.type;
+            if (element || Component) {
                 const elementProps = {
                     loaderData: routerContext?.loaderData?.[route.id],
                     actionData: routerContext?.actionData?.[route.id],
@@ -106,7 +106,8 @@ const createServerPayload = (routerContext, routes)=>{
                             handle: m.route.handle
                         }))
                 };
-                const routeElement = /*#__PURE__*/ external_react_default().createElement(ElementComponent, elementProps);
+                const RouteComponent = Component;
+                const routeElement = element ? /*#__PURE__*/ external_react_default().cloneElement(element, elementProps) : /*#__PURE__*/ external_react_default().createElement(RouteComponent, elementProps);
                 processedElement = index === cssInjectionIndex ? /*#__PURE__*/ external_react_default().createElement(external_react_default().Fragment, null, /*#__PURE__*/ external_react_default().createElement(external_CSSLinks_js_namespaceObject.CSSLinks, {
                     cssFiles
                 }), routeElement) : routeElement;

package/dist/esm/cli/index.mjs

@@ -1,7 +1,7 @@
 import { cleanRequireCache, isReact18 as utils_isReact18 } from "@modern-js/utils";
 import path_0 from "path";
 import { documentPlugin } from "../document/cli/index.mjs";
-import { getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, routerPlugin } from "../router/cli/index.mjs";
+import { getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, routerPlugin, updateNestedRoutesSpec } from "../router/cli/index.mjs";
 import { builderPluginAlias } from "./alias.mjs";
 import { generateCode } from "./code.mjs";
 import { ENTRY_BOOTSTRAP_FILE_NAME, ENTRY_POINT_FILE_NAME } from "./constants.mjs";
@@ -92,4 +92,4 @@ const cli = runtimePlugin;
 export { makeLegalIdentifier } from "../router/cli/code/makeLegalIdentifier.mjs";
 export { getPathWithoutExt } from "../router/cli/code/utils.mjs";
 export default cli;
-export { documentPlugin, getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, isRuntimeEntry, routerPlugin, runtimePlugin, ssrPlugin };
+export { documentPlugin, getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, isRuntimeEntry, routerPlugin, runtimePlugin, ssrPlugin, updateNestedRoutesSpec };

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

@@ -24,7 +24,7 @@ import {
   createRequestHandler,
 } from '@#metaName/runtime/ssr/server';
 import { RSCServerSlot } from '@#metaName/runtime/rsc/client';
-import { renderRsc } from '@#metaName/runtime/rsc/server';
+import { renderCSRWithRSC, renderRsc } from '@#metaName/runtime/rsc/server';
 export { handleAction } from '@#metaName/runtime/rsc/server';
 
 const handleRequest = async (request, ServerRoot, options) => {
@@ -51,6 +51,17 @@ export const requestHandler = createRequestHandler(handleRequest, {
   enableRsc: true
 });
 
+const handleCSRRender = async (request, ServerRoot, options) => {
+  return renderCSRWithRSC({
+    html: options.html,
+    rscRoot: options.rscRoot,
+  });
+}
+
+export const renderRscStreamHandler = createRequestHandler(handleCSRRender, {
+  enableRsc: true
+});
+
 const handleRSCRequest = async (request, ServerRoot, options) => {
   const { serverPayload } = options;
   const stream = renderRsc({

package/dist/esm/core/server/stream/beforeTemplate.mjs

@@ -34,8 +34,8 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
         return safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
         async function getCssChunks() {
             const { routeManifest, routerContext, routes } = runtimeContext;
-            if (!routeManifest) return '';
-            const { routeAssets } = routeManifest;
+            const routeAssets = routeManifest?.routeAssets;
+            if (!routeAssets) return '';
             let matchedRouteManifests = [];
             const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext);
             if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);

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

@@ -28,8 +28,8 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
         return safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
         async function getCssChunks() {
             const { routeManifest, routerContext, routes } = runtimeContext;
-            if (!routeManifest) return '';
-            const { routeAssets } = routeManifest;
+            const routeAssets = routeManifest?.routeAssets;
+            if (!routeAssets) return '';
             let matchedRouteManifests = [];
             const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext);
             if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);

package/dist/esm/core/server/string/loadable.mjs

@@ -28,10 +28,6 @@ const readAsset = async (chunk)=>{
     return fs.readFile(filepath, 'utf-8');
 };
 class LoadableCollector {
-    get existsAssets() {
-        const { routeManifest, entryName } = this.options;
-        return routeManifest?.routeAssets?.[entryName]?.assets;
-    }
     getMatchedRouteChunks() {
         const { routeManifest, runtimeContext } = this.options;
         if (!routeManifest) return [];
@@ -98,7 +94,7 @@ class LoadableCollector {
         const matchs = template.matchAll(jsScriptRegExp);
         const existedScript = [];
         for (const match of matchs)existedScript.push(match[1]);
-        const scripts = await Promise.all(chunks.filter((chunk)=>!existedScript.includes(chunk.url) && !this.existsAssets?.includes(chunk.path)).map(async (chunk)=>{
+        const scripts = await Promise.all(chunks.filter((chunk)=>!existedScript.includes(chunk.url)).map(async (chunk)=>{
             const script = `<script${attributes} src="${chunk.url}"></script>`;
             if (checkIsNode() && checkIsInline(chunk, inlineStyles)) return readAsset(chunk).then((content)=>`<script>${content}</script>`).catch((_)=>script);
             return script;
@@ -109,7 +105,7 @@ class LoadableCollector {
         const { template, chunkSet, config, moduleFederationCssAssets } = this.options;
         const { inlineStyles } = config;
         const atrributes = attributesToString(this.generateAttributes());
-        const emittedChunks = chunks.filter((chunk)=>!hasStylesheetLink(template, chunk.url) && !this.existsAssets?.includes(chunk.path));
+        const emittedChunks = chunks.filter((chunk)=>!hasStylesheetLink(template, chunk.url));
         const css = await Promise.all(emittedChunks.map(async (chunk)=>{
             const link = `<link${atrributes} href="${chunk.url}" rel="stylesheet" />`;
             if (checkIsNode() && checkIsInline(chunk, inlineStyles)) return readAsset(chunk).then((content)=>`<style>${content}</style>`).catch((_)=>link);

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

@@ -3,7 +3,7 @@ import { JS_EXTENSIONS, findExists, formatImportPath, fs, getEntryOptions, isSSG
 import { ROUTE_MODULES } from "@modern-js/utils/universal/constants";
 import path from "path";
 import { APP_INIT_EXPORTED, TEMP_LOADERS_DIR } from "../constants.mjs";
-import { getPathWithoutExt, getServerLoadersFile, parseModule, replaceWithAlias } from "./utils.mjs";
+import { getPathWithoutExt, parseModule, replaceWithAlias } from "./utils.mjs";
 const routesForServer = ({ routesForServerLoaderMatches })=>{
     const loaders = [];
     const actions = [];
@@ -169,14 +169,14 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
                     routeId: route.id,
                     webpackChunkName: true
                 });
-                component = 'string' === ssrMode ? `loadable(${lazyImport})` : `lazy(${lazyImport})`;
+                component = 'string' === ssrMode ? `loadable(${lazyImport}, { resolveComponent: resolveRouteComponent })` : `lazy(${lazyImport})`;
             } else {
                 components.push(route._component);
                 component = `component_${components.length - 1}`;
             }
         } else if (route._component) if (splitRouteChunks) {
             lazyImport = `() => import('${route._component}')`;
-            component = `loadable(${lazyImport})`;
+            component = `loadable(${lazyImport}, { resolveComponent: resolveRouteComponent })`;
         } else {
             components.push(route._component);
             component = `component_${components.length - 1}`;
@@ -224,7 +224,7 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
         const newRouteStr = regs.reduce((acc, reg)=>acc.replace(reg, '$1$2'), routeStr).replace(/"(RootLayout)"/g, '$1').replace(/\\"/g, '"');
         routeComponentsCode += `${newRouteStr},`;
     } else {
-        const component = `loadable(() => import('${route._component}'))`;
+        const component = `loadable(() => import('${route._component}'), { resolveComponent: resolveRouteComponent })`;
         const finalRoute = {
             ...route,
             component
@@ -274,7 +274,7 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
     await fs.ensureFile(loadersMapFile);
     await fs.writeJSON(loadersMapFile, loadersMap);
     const importRuntimeRouterCode = `
-    import { createShouldRevalidate, handleRouteModule,  handleRouteModuleError} from '@${metaName}/runtime/routerHelper';
+    import { createShouldRevalidate, handleRouteModule, handleRouteModuleError, resolveRouteComponent } from '@${metaName}/runtime/routerHelper';
   `;
     const routeModulesCode = `
     if(typeof document !== 'undefined'){
@@ -296,19 +296,19 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
 };
 function ssrLoaderCombinedModule(entrypoints, entrypoint, config, appContext) {
     const { entryName, isMainEntry } = entrypoint;
-    const { packageName, internalDirectory } = appContext;
+    const { packageName } = appContext;
     const ssr = getEntryOptions(entryName, isMainEntry, config.server.ssr, config.server.ssrByEntries, packageName);
     const ssg = isSSGEntry(config, entryName, entrypoints);
     if (entrypoint.nestedRoutesEntry && (ssr || ssg)) {
         const serverLoaderRuntime = require.resolve('@modern-js/plugin-data-loader/runtime');
-        const serverLoadersFile = getServerLoadersFile(internalDirectory, entryName);
-        const combinedModule = `export * from "${slash(serverLoaderRuntime)}"; export * from "${slash(serverLoadersFile)}"`;
+        const serverLoadersFile = './route-server-loaders.js';
+        const combinedModule = `export * from "${slash(serverLoaderRuntime)}"; export * from "${serverLoadersFile}"`;
         if (!config.source.enableAsyncEntry) return combinedModule;
         return `
     async function loadModules() {
       const [moduleA, moduleB] = await Promise.all([
         import("${slash(serverLoaderRuntime)}"),
-        import("${slash(serverLoadersFile)}")
+        import("${serverLoadersFile}")
       ]);
 
       return {

package/dist/esm/router/cli/index.mjs

@@ -1,8 +1,9 @@
 import node_path from "node:path";
-import { NESTED_ROUTE_SPEC_FILE, filterRoutesForServer, fs } from "@modern-js/utils";
+import { NESTED_ROUTE_SPEC_FILE, filterRoutesForServer } from "@modern-js/utils";
 import { NESTED_ROUTES_DIR } from "./constants.mjs";
 import { BUILT_IN_ROUTES_OWNER, getEntrypointRoutesDir, getEntrypointRoutesOwner, isRouteEntry } from "./entry.mjs";
 import { handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints } from "./handler.mjs";
+import { updateNestedRoutesSpec } from "./nestedRoutesSpec.mjs";
 function isBuiltInRouteEntrypoint(entrypoint) {
     const entrypointRoutesOwner = getEntrypointRoutesOwner(entrypoint);
     if (entrypointRoutesOwner) return entrypointRoutesOwner === BUILT_IN_ROUTES_OWNER;
@@ -87,11 +88,7 @@ const routerPlugin = ()=>({
                 if (isBuiltInRouteEntrypoint(entrypoint)) {
                     const { distDirectory } = api.getAppContext();
                     const nestedRoutesSpecPath = node_path.resolve(distDirectory, NESTED_ROUTE_SPEC_FILE);
-                    const existingNestedRoutes = await fs.pathExists(nestedRoutesSpecPath) ? await fs.readJSON(nestedRoutesSpecPath) : {};
-                    await fs.outputJSON(nestedRoutesSpecPath, {
-                        ...existingNestedRoutes,
-                        ...nestedRoutesForServer
-                    });
+                    await updateNestedRoutesSpec(nestedRoutesSpecPath, nestedRoutesForServer);
                 }
                 return {
                     entrypoint,
@@ -102,4 +99,4 @@ const routerPlugin = ()=>({
     });
 const cli = routerPlugin;
 export default cli;
-export { BUILT_IN_ROUTES_OWNER, getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, routerPlugin };
+export { BUILT_IN_ROUTES_OWNER, getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, routerPlugin, updateNestedRoutesSpec };

package/dist/esm/router/cli/nestedRoutesSpec.mjs

@@ -0,0 +1,66 @@
+import node_path from "node:path";
+import { setTimeout as promises_setTimeout } from "node:timers/promises";
+import { fs } from "@modern-js/utils";
+const lockPollIntervalMs = 25;
+const staleLockAgeMs = 120000;
+const pendingUpdates = new Map();
+let tempFileCounter = 0;
+async function acquireSpecLock(specPath) {
+    const lockDir = `${specPath}.lock`;
+    await fs.ensureDir(node_path.dirname(specPath));
+    while(true){
+        try {
+            await fs.mkdir(lockDir);
+            return async ()=>{
+                await fs.remove(lockDir);
+            };
+        } catch (error) {
+            if ('EEXIST' !== error.code) throw error;
+        }
+        try {
+            const stat = await fs.stat(lockDir);
+            if (performance.timeOrigin + performance.now() - stat.mtimeMs > staleLockAgeMs) {
+                await fs.remove(lockDir);
+                continue;
+            }
+        } catch (error) {
+            if ('ENOENT' !== error.code) throw error;
+            continue;
+        }
+        await promises_setTimeout(lockPollIntervalMs);
+    }
+}
+async function writeJSONAtomically(filePath, value) {
+    const directory = node_path.dirname(filePath);
+    const tempPath = node_path.join(directory, `.${node_path.basename(filePath)}.${process.pid}.${tempFileCounter += 1}.tmp`);
+    try {
+        await fs.writeFile(tempPath, `${JSON.stringify(value)}\n`);
+        await fs.rename(tempPath, filePath);
+    } catch (error) {
+        await fs.remove(tempPath).catch(()=>{});
+        throw error;
+    }
+}
+async function updateNestedRoutesSpec(specPath, nextRoutes) {
+    const resolvedSpecPath = node_path.resolve(specPath);
+    const previousUpdate = pendingUpdates.get(resolvedSpecPath) ?? Promise.resolve();
+    const currentUpdate = previousUpdate.catch(()=>void 0).then(async ()=>{
+        const releaseLock = await acquireSpecLock(resolvedSpecPath);
+        try {
+            const existingRoutes = await fs.pathExists(resolvedSpecPath) ? await fs.readJSON(resolvedSpecPath) : {};
+            await writeJSONAtomically(resolvedSpecPath, {
+                ...existingRoutes,
+                ...nextRoutes
+            });
+        } finally{
+            await releaseLock();
+        }
+    });
+    pendingUpdates.set(resolvedSpecPath, currentUpdate);
+    try {
+        await currentUpdate;
+    } finally{
+        if (pendingUpdates.get(resolvedSpecPath) === currentUpdate) pendingUpdates.delete(resolvedSpecPath);
+    }
+}
+export { updateNestedRoutesSpec };

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

@@ -1,15 +1,54 @@
 import { ROUTE_MODULES } from "@modern-js/utils/universal/constants";
+const isObjectLike = (value)=>'object' == typeof value && null !== value || 'function' == typeof value;
+const isRouteComponent = (value)=>'function' == typeof value || isObjectLike(value) && '$$typeof' in value;
+const getRouteModules = ()=>{
+    if ("u" < typeof window) return;
+    return window[ROUTE_MODULES];
+};
+const storeRouteModule = (routeModule, routeId)=>{
+    if ("u" < typeof document) return;
+    const routeModules = getRouteModules();
+    if (void 0 !== routeModules) routeModules[routeId] = routeModule;
+};
+const unwrapRspackAsyncModule = (routeModule)=>{
+    if (!isObjectLike(routeModule)) return routeModule;
+    const rspackExportsSymbol = Object.getOwnPropertySymbols(routeModule).find((symbol)=>'rspack exports' === symbol.description);
+    if (void 0 !== rspackExportsSymbol) return routeModule[rspackExportsSymbol];
+    if ('__webpack_exports__' in routeModule) return routeModule.__webpack_exports__;
+    return routeModule;
+};
 const createShouldRevalidate = (routeId)=>(arg)=>{
-        const routeModule = "u" > typeof window ? window?.[ROUTE_MODULES]?.[routeId] : void 0;
-        if (routeModule && 'function' == typeof routeModule.shouldRevalidate) return routeModule.shouldRevalidate(arg);
+        const routeModule = getRouteModules()?.[routeId];
+        if (isObjectLike(routeModule)) {
+            const shouldRevalidate = routeModule.shouldRevalidate;
+            if ('function' == typeof shouldRevalidate) return shouldRevalidate(arg);
+        }
         return arg.defaultShouldRevalidate;
     };
+const pickRouteModuleComponent = (routeModule, seen = new Set())=>{
+    const unwrappedRouteModule = unwrapRspackAsyncModule(routeModule);
+    if (isRouteComponent(unwrappedRouteModule)) return unwrappedRouteModule;
+    if (!isObjectLike(unwrappedRouteModule) || seen.has(unwrappedRouteModule)) return;
+    seen.add(unwrappedRouteModule);
+    const componentModule = unwrappedRouteModule;
+    for (const candidate of [
+        componentModule.default,
+        componentModule.Component
+    ]){
+        const component = pickRouteModuleComponent(candidate, seen);
+        if (void 0 !== component) return component;
+    }
+};
+const resolveRouteComponent = (routeModule)=>pickRouteModuleComponent(routeModule) ?? routeModule;
 const handleRouteModule = (routeModule, routeId)=>{
-    if ("u" > typeof document) window[ROUTE_MODULES][routeId] = routeModule;
-    return routeModule;
+    storeRouteModule(routeModule, routeId);
+    const component = pickRouteModuleComponent(routeModule);
+    return void 0 !== component ? {
+        default: component
+    } : routeModule;
 };
 const handleRouteModuleError = (error)=>{
     console.error(error);
     return null;
 };
-export { createShouldRevalidate, handleRouteModule, handleRouteModuleError };
+export { createShouldRevalidate, handleRouteModule, handleRouteModuleError, resolveRouteComponent };

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

@@ -44,10 +44,10 @@ const createServerPayload = (routerContext, routes)=>{
         routes: routerContext.matches.map((match, index, matches)=>{
             const route = match.route;
             const element = route.element;
+            const Component = route.Component;
             const parentMatch = index > 0 ? matches[index - 1] : void 0;
             let processedElement;
-            if (element) {
-                const ElementComponent = element.type;
+            if (element || Component) {
                 const elementProps = {
                     loaderData: routerContext?.loaderData?.[route.id],
                     actionData: routerContext?.actionData?.[route.id],
@@ -60,7 +60,8 @@ const createServerPayload = (routerContext, routes)=>{
                             handle: m.route.handle
                         }))
                 };
-                const routeElement = /*#__PURE__*/ react.createElement(ElementComponent, elementProps);
+                const RouteComponent = Component;
+                const routeElement = element ? /*#__PURE__*/ react.cloneElement(element, elementProps) : /*#__PURE__*/ react.createElement(RouteComponent, elementProps);
                 processedElement = index === cssInjectionIndex ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CSSLinks, {
                     cssFiles
                 }), routeElement) : routeElement;

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

@@ -3,7 +3,7 @@ const require = /*#__PURE__*/ __rslib_shim_module__.createRequire(/*#__PURE__*/
 import { cleanRequireCache, isReact18 as utils_isReact18 } from "@modern-js/utils";
 import path_0 from "path";
 import { documentPlugin } from "../document/cli/index.mjs";
-import { getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, routerPlugin } from "../router/cli/index.mjs";
+import { getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, routerPlugin, updateNestedRoutesSpec } from "../router/cli/index.mjs";
 import { builderPluginAlias } from "./alias.mjs";
 import { generateCode } from "./code.mjs";
 import { ENTRY_BOOTSTRAP_FILE_NAME, ENTRY_POINT_FILE_NAME } from "./constants.mjs";
@@ -94,4 +94,4 @@ const cli = runtimePlugin;
 export { makeLegalIdentifier } from "../router/cli/code/makeLegalIdentifier.mjs";
 export { getPathWithoutExt } from "../router/cli/code/utils.mjs";
 export default cli;
-export { documentPlugin, getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, isRuntimeEntry, routerPlugin, runtimePlugin, ssrPlugin };
+export { documentPlugin, getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, isRuntimeEntry, routerPlugin, runtimePlugin, ssrPlugin, updateNestedRoutesSpec };

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

@@ -25,7 +25,7 @@ import {
   createRequestHandler,
 } from '@#metaName/runtime/ssr/server';
 import { RSCServerSlot } from '@#metaName/runtime/rsc/client';
-import { renderRsc } from '@#metaName/runtime/rsc/server';
+import { renderCSRWithRSC, renderRsc } from '@#metaName/runtime/rsc/server';
 export { handleAction } from '@#metaName/runtime/rsc/server';
 
 const handleRequest = async (request, ServerRoot, options) => {
@@ -52,6 +52,17 @@ export const requestHandler = createRequestHandler(handleRequest, {
   enableRsc: true
 });
 
+const handleCSRRender = async (request, ServerRoot, options) => {
+  return renderCSRWithRSC({
+    html: options.html,
+    rscRoot: options.rscRoot,
+  });
+}
+
+export const renderRscStreamHandler = createRequestHandler(handleCSRRender, {
+  enableRsc: true
+});
+
 const handleRSCRequest = async (request, ServerRoot, options) => {
   const { serverPayload } = options;
   const stream = renderRsc({

package/dist/esm-node/core/server/stream/beforeTemplate.mjs

@@ -38,8 +38,8 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
         return safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
         async function getCssChunks() {
             const { routeManifest, routerContext, routes } = runtimeContext;
-            if (!routeManifest) return '';
-            const { routeAssets } = routeManifest;
+            const routeAssets = routeManifest?.routeAssets;
+            if (!routeAssets) return '';
             let matchedRouteManifests = [];
             const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext);
             if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);

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

@@ -29,8 +29,8 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
         return safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
         async function getCssChunks() {
             const { routeManifest, routerContext, routes } = runtimeContext;
-            if (!routeManifest) return '';
-            const { routeAssets } = routeManifest;
+            const routeAssets = routeManifest?.routeAssets;
+            if (!routeAssets) return '';
             let matchedRouteManifests = [];
             const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext);
             if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);

package/dist/esm-node/core/server/string/loadable.mjs

@@ -32,10 +32,6 @@ const readAsset = async (chunk)=>{
     return fs.readFile(filepath, 'utf-8');
 };
 class LoadableCollector {
-    get existsAssets() {
-        const { routeManifest, entryName } = this.options;
-        return routeManifest?.routeAssets?.[entryName]?.assets;
-    }
     getMatchedRouteChunks() {
         const { routeManifest, runtimeContext } = this.options;
         if (!routeManifest) return [];
@@ -102,7 +98,7 @@ class LoadableCollector {
         const matchs = template.matchAll(jsScriptRegExp);
         const existedScript = [];
         for (const match of matchs)existedScript.push(match[1]);
-        const scripts = await Promise.all(chunks.filter((chunk)=>!existedScript.includes(chunk.url) && !this.existsAssets?.includes(chunk.path)).map(async (chunk)=>{
+        const scripts = await Promise.all(chunks.filter((chunk)=>!existedScript.includes(chunk.url)).map(async (chunk)=>{
             const script = `<script${attributes} src="${chunk.url}"></script>`;
             if (checkIsNode() && checkIsInline(chunk, inlineStyles)) return readAsset(chunk).then((content)=>`<script>${content}</script>`).catch((_)=>script);
             return script;
@@ -113,7 +109,7 @@ class LoadableCollector {
         const { template, chunkSet, config, moduleFederationCssAssets } = this.options;
         const { inlineStyles } = config;
         const atrributes = attributesToString(this.generateAttributes());
-        const emittedChunks = chunks.filter((chunk)=>!hasStylesheetLink(template, chunk.url) && !this.existsAssets?.includes(chunk.path));
+        const emittedChunks = chunks.filter((chunk)=>!hasStylesheetLink(template, chunk.url));
         const css = await Promise.all(emittedChunks.map(async (chunk)=>{
             const link = `<link${atrributes} href="${chunk.url}" rel="stylesheet" />`;
             if (checkIsNode() && checkIsInline(chunk, inlineStyles)) return readAsset(chunk).then((content)=>`<style>${content}</style>`).catch((_)=>link);

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

@@ -5,7 +5,7 @@ import { JS_EXTENSIONS, findExists, formatImportPath, fs, getEntryOptions, isSSG
 import { ROUTE_MODULES } from "@modern-js/utils/universal/constants";
 import path from "path";
 import { APP_INIT_EXPORTED, TEMP_LOADERS_DIR } from "../constants.mjs";
-import { getPathWithoutExt, getServerLoadersFile, parseModule, replaceWithAlias } from "./utils.mjs";
+import { getPathWithoutExt, parseModule, replaceWithAlias } from "./utils.mjs";
 const routesForServer = ({ routesForServerLoaderMatches })=>{
     const loaders = [];
     const actions = [];
@@ -171,14 +171,14 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
                     routeId: route.id,
                     webpackChunkName: true
                 });
-                component = 'string' === ssrMode ? `loadable(${lazyImport})` : `lazy(${lazyImport})`;
+                component = 'string' === ssrMode ? `loadable(${lazyImport}, { resolveComponent: resolveRouteComponent })` : `lazy(${lazyImport})`;
             } else {
                 components.push(route._component);
                 component = `component_${components.length - 1}`;
             }
         } else if (route._component) if (splitRouteChunks) {
             lazyImport = `() => import('${route._component}')`;
-            component = `loadable(${lazyImport})`;
+            component = `loadable(${lazyImport}, { resolveComponent: resolveRouteComponent })`;
         } else {
             components.push(route._component);
             component = `component_${components.length - 1}`;
@@ -226,7 +226,7 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
         const newRouteStr = regs.reduce((acc, reg)=>acc.replace(reg, '$1$2'), routeStr).replace(/"(RootLayout)"/g, '$1').replace(/\\"/g, '"');
         routeComponentsCode += `${newRouteStr},`;
     } else {
-        const component = `loadable(() => import('${route._component}'))`;
+        const component = `loadable(() => import('${route._component}'), { resolveComponent: resolveRouteComponent })`;
         const finalRoute = {
             ...route,
             component
@@ -276,7 +276,7 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
     await fs.ensureFile(loadersMapFile);
     await fs.writeJSON(loadersMapFile, loadersMap);
     const importRuntimeRouterCode = `
-    import { createShouldRevalidate, handleRouteModule,  handleRouteModuleError} from '@${metaName}/runtime/routerHelper';
+    import { createShouldRevalidate, handleRouteModule, handleRouteModuleError, resolveRouteComponent } from '@${metaName}/runtime/routerHelper';
   `;
     const routeModulesCode = `
     if(typeof document !== 'undefined'){
@@ -298,19 +298,19 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
 };
 function ssrLoaderCombinedModule(entrypoints, entrypoint, config, appContext) {
     const { entryName, isMainEntry } = entrypoint;
-    const { packageName, internalDirectory } = appContext;
+    const { packageName } = appContext;
     const ssr = getEntryOptions(entryName, isMainEntry, config.server.ssr, config.server.ssrByEntries, packageName);
     const ssg = isSSGEntry(config, entryName, entrypoints);
     if (entrypoint.nestedRoutesEntry && (ssr || ssg)) {
         const serverLoaderRuntime = require.resolve('@modern-js/plugin-data-loader/runtime');
-        const serverLoadersFile = getServerLoadersFile(internalDirectory, entryName);
-        const combinedModule = `export * from "${slash(serverLoaderRuntime)}"; export * from "${slash(serverLoadersFile)}"`;
+        const serverLoadersFile = './route-server-loaders.js';
+        const combinedModule = `export * from "${slash(serverLoaderRuntime)}"; export * from "${serverLoadersFile}"`;
         if (!config.source.enableAsyncEntry) return combinedModule;
         return `
     async function loadModules() {
       const [moduleA, moduleB] = await Promise.all([
         import("${slash(serverLoaderRuntime)}"),
-        import("${slash(serverLoadersFile)}")
+        import("${serverLoadersFile}")
       ]);
 
       return {

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

@@ -1,9 +1,10 @@
 import "node:module";
 import node_path from "node:path";
-import { NESTED_ROUTE_SPEC_FILE, filterRoutesForServer, fs } from "@modern-js/utils";
+import { NESTED_ROUTE_SPEC_FILE, filterRoutesForServer } from "@modern-js/utils";
 import { NESTED_ROUTES_DIR } from "./constants.mjs";
 import { BUILT_IN_ROUTES_OWNER, getEntrypointRoutesDir, getEntrypointRoutesOwner, isRouteEntry } from "./entry.mjs";
 import { handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints } from "./handler.mjs";
+import { updateNestedRoutesSpec } from "./nestedRoutesSpec.mjs";
 import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
 import { dirname as __rspack_dirname } from "node:path";
 var cli_dirname = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
@@ -91,11 +92,7 @@ const routerPlugin = ()=>({
                 if (isBuiltInRouteEntrypoint(entrypoint)) {
                     const { distDirectory } = api.getAppContext();
                     const nestedRoutesSpecPath = node_path.resolve(distDirectory, NESTED_ROUTE_SPEC_FILE);
-                    const existingNestedRoutes = await fs.pathExists(nestedRoutesSpecPath) ? await fs.readJSON(nestedRoutesSpecPath) : {};
-                    await fs.outputJSON(nestedRoutesSpecPath, {
-                        ...existingNestedRoutes,
-                        ...nestedRoutesForServer
-                    });
+                    await updateNestedRoutesSpec(nestedRoutesSpecPath, nestedRoutesForServer);
                 }
                 return {
                     entrypoint,
@@ -106,4 +103,4 @@ const routerPlugin = ()=>({
     });
 const cli = routerPlugin;
 export default cli;
-export { BUILT_IN_ROUTES_OWNER, getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, routerPlugin };
+export { BUILT_IN_ROUTES_OWNER, getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, routerPlugin, updateNestedRoutesSpec };

package/dist/esm-node/router/cli/nestedRoutesSpec.mjs

@@ -0,0 +1,67 @@
+import "node:module";
+import node_path from "node:path";
+import { setTimeout as promises_setTimeout } from "node:timers/promises";
+import { fs } from "@modern-js/utils";
+const lockPollIntervalMs = 25;
+const staleLockAgeMs = 120000;
+const pendingUpdates = new Map();
+let tempFileCounter = 0;
+async function acquireSpecLock(specPath) {
+    const lockDir = `${specPath}.lock`;
+    await fs.ensureDir(node_path.dirname(specPath));
+    while(true){
+        try {
+            await fs.mkdir(lockDir);
+            return async ()=>{
+                await fs.remove(lockDir);
+            };
+        } catch (error) {
+            if ('EEXIST' !== error.code) throw error;
+        }
+        try {
+            const stat = await fs.stat(lockDir);
+            if (performance.timeOrigin + performance.now() - stat.mtimeMs > staleLockAgeMs) {
+                await fs.remove(lockDir);
+                continue;
+            }
+        } catch (error) {
+            if ('ENOENT' !== error.code) throw error;
+            continue;
+        }
+        await promises_setTimeout(lockPollIntervalMs);
+    }
+}
+async function writeJSONAtomically(filePath, value) {
+    const directory = node_path.dirname(filePath);
+    const tempPath = node_path.join(directory, `.${node_path.basename(filePath)}.${process.pid}.${tempFileCounter += 1}.tmp`);
+    try {
+        await fs.writeFile(tempPath, `${JSON.stringify(value)}\n`);
+        await fs.rename(tempPath, filePath);
+    } catch (error) {
+        await fs.remove(tempPath).catch(()=>{});
+        throw error;
+    }
+}
+async function updateNestedRoutesSpec(specPath, nextRoutes) {
+    const resolvedSpecPath = node_path.resolve(specPath);
+    const previousUpdate = pendingUpdates.get(resolvedSpecPath) ?? Promise.resolve();
+    const currentUpdate = previousUpdate.catch(()=>void 0).then(async ()=>{
+        const releaseLock = await acquireSpecLock(resolvedSpecPath);
+        try {
+            const existingRoutes = await fs.pathExists(resolvedSpecPath) ? await fs.readJSON(resolvedSpecPath) : {};
+            await writeJSONAtomically(resolvedSpecPath, {
+                ...existingRoutes,
+                ...nextRoutes
+            });
+        } finally{
+            await releaseLock();
+        }
+    });
+    pendingUpdates.set(resolvedSpecPath, currentUpdate);
+    try {
+        await currentUpdate;
+    } finally{
+        if (pendingUpdates.get(resolvedSpecPath) === currentUpdate) pendingUpdates.delete(resolvedSpecPath);
+    }
+}
+export { updateNestedRoutesSpec };

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

@@ -1,16 +1,55 @@
 import "node:module";
 import { ROUTE_MODULES } from "@modern-js/utils/universal/constants";
+const isObjectLike = (value)=>'object' == typeof value && null !== value || 'function' == typeof value;
+const isRouteComponent = (value)=>'function' == typeof value || isObjectLike(value) && '$$typeof' in value;
+const getRouteModules = ()=>{
+    if ("u" < typeof window) return;
+    return window[ROUTE_MODULES];
+};
+const storeRouteModule = (routeModule, routeId)=>{
+    if ("u" < typeof document) return;
+    const routeModules = getRouteModules();
+    if (void 0 !== routeModules) routeModules[routeId] = routeModule;
+};
+const unwrapRspackAsyncModule = (routeModule)=>{
+    if (!isObjectLike(routeModule)) return routeModule;
+    const rspackExportsSymbol = Object.getOwnPropertySymbols(routeModule).find((symbol)=>'rspack exports' === symbol.description);
+    if (void 0 !== rspackExportsSymbol) return routeModule[rspackExportsSymbol];
+    if ('__webpack_exports__' in routeModule) return routeModule.__webpack_exports__;
+    return routeModule;
+};
 const createShouldRevalidate = (routeId)=>(arg)=>{
-        const routeModule = "u" > typeof window ? window?.[ROUTE_MODULES]?.[routeId] : void 0;
-        if (routeModule && 'function' == typeof routeModule.shouldRevalidate) return routeModule.shouldRevalidate(arg);
+        const routeModule = getRouteModules()?.[routeId];
+        if (isObjectLike(routeModule)) {
+            const shouldRevalidate = routeModule.shouldRevalidate;
+            if ('function' == typeof shouldRevalidate) return shouldRevalidate(arg);
+        }
         return arg.defaultShouldRevalidate;
     };
+const pickRouteModuleComponent = (routeModule, seen = new Set())=>{
+    const unwrappedRouteModule = unwrapRspackAsyncModule(routeModule);
+    if (isRouteComponent(unwrappedRouteModule)) return unwrappedRouteModule;
+    if (!isObjectLike(unwrappedRouteModule) || seen.has(unwrappedRouteModule)) return;
+    seen.add(unwrappedRouteModule);
+    const componentModule = unwrappedRouteModule;
+    for (const candidate of [
+        componentModule.default,
+        componentModule.Component
+    ]){
+        const component = pickRouteModuleComponent(candidate, seen);
+        if (void 0 !== component) return component;
+    }
+};
+const resolveRouteComponent = (routeModule)=>pickRouteModuleComponent(routeModule) ?? routeModule;
 const handleRouteModule = (routeModule, routeId)=>{
-    if ("u" > typeof document) window[ROUTE_MODULES][routeId] = routeModule;
-    return routeModule;
+    storeRouteModule(routeModule, routeId);
+    const component = pickRouteModuleComponent(routeModule);
+    return void 0 !== component ? {
+        default: component
+    } : routeModule;
 };
 const handleRouteModuleError = (error)=>{
     console.error(error);
     return null;
 };
-export { createShouldRevalidate, handleRouteModule, handleRouteModuleError };
+export { createShouldRevalidate, handleRouteModule, handleRouteModuleError, resolveRouteComponent };

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

@@ -45,10 +45,10 @@ const createServerPayload = (routerContext, routes)=>{
         routes: routerContext.matches.map((match, index, matches)=>{
             const route = match.route;
             const element = route.element;
+            const Component = route.Component;
             const parentMatch = index > 0 ? matches[index - 1] : void 0;
             let processedElement;
-            if (element) {
-                const ElementComponent = element.type;
+            if (element || Component) {
                 const elementProps = {
                     loaderData: routerContext?.loaderData?.[route.id],
                     actionData: routerContext?.actionData?.[route.id],
@@ -61,7 +61,8 @@ const createServerPayload = (routerContext, routes)=>{
                             handle: m.route.handle
                         }))
                 };
-                const routeElement = /*#__PURE__*/ react.createElement(ElementComponent, elementProps);
+                const RouteComponent = Component;
+                const routeElement = element ? /*#__PURE__*/ react.cloneElement(element, elementProps) : /*#__PURE__*/ react.createElement(RouteComponent, elementProps);
                 processedElement = index === cssInjectionIndex ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CSSLinks, {
                     cssFiles
                 }), routeElement) : routeElement;

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

@@ -2,7 +2,7 @@ import type { AppTools, CliPlugin } from '@modern-js/app-tools';
 import { documentPlugin } from '../document/cli';
 import { routerPlugin } from '../router/cli';
 import { ssrPlugin } from './ssr';
-export { getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, } from '../router/cli';
+export { getEntrypointRoutesDir, getEntrypointRoutesOwner, handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, isRouteEntry, updateNestedRoutesSpec, } from '../router/cli';
 export { makeLegalIdentifier } from '../router/cli/code/makeLegalIdentifier';
 export { getPathWithoutExt } from '../router/cli/code/utils';
 export { isRuntimeEntry } from './entry';

package/dist/types/core/server/string/loadable.d.ts

@@ -30,7 +30,6 @@ export declare class LoadableCollector implements Collector {
     private options;
     private extractor?;
     constructor(options: LoadableCollectorOptions);
-    private get existsAssets();
     private getMatchedRouteChunks;
     collect(comopnent: ReactElement): ReactElement;
     effect(): Promise<void>;

package/dist/types/router/cli/index.d.ts

@@ -1,5 +1,6 @@
 import type { AppTools, CliPlugin } from '@modern-js/app-tools';
 export { BUILT_IN_ROUTES_OWNER, getEntrypointRoutesDir, getEntrypointRoutesOwner, isRouteEntry, } from './entry';
 export { handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints, } from './handler';
+export { updateNestedRoutesSpec } from './nestedRoutesSpec';
 export declare const routerPlugin: () => CliPlugin<AppTools>;
 export default routerPlugin;

package/dist/types/router/cli/nestedRoutesSpec.d.ts

@@ -0,0 +1 @@
+export declare function updateNestedRoutesSpec(specPath: string, nextRoutes: Record<string, unknown>): Promise<void>;

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

@@ -1,5 +1,6 @@
 import type { ShouldRevalidateFunction } from '@modern-js/runtime-utils/router';
-import type Module from 'module';
+import type { ElementType } from 'react';
 export declare const createShouldRevalidate: (routeId: string) => ShouldRevalidateFunction;
-export declare const handleRouteModule: (routeModule: Module, routeId: string) => Module;
+export declare const resolveRouteComponent: (routeModule: unknown) => ElementType<Record<string, unknown>>;
+export declare const handleRouteModule: (routeModule: unknown, routeId: string) => unknown;
 export declare const handleRouteModuleError: (error: Error) => null;

package/package.json

@@ -17,7 +17,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.4.0-ultramodern.2",
+  "version": "3.4.0-ultramodern.20",
   "engines": {
     "node": ">=20"
   },
@@ -240,12 +240,12 @@
     "react-helmet": "^6.1.0",
     "react-helmet-async": "3.0.0",
     "react-is": "^19.2.7",
-    "@modern-js/plugin-data-loader": "npm:@bleedingdev/modern-js-plugin-data-loader@3.4.0-ultramodern.2",
-    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.4.0-ultramodern.2",
-    "@modern-js/render": "npm:@bleedingdev/modern-js-render@3.4.0-ultramodern.2",
-    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.4.0-ultramodern.2",
-    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.4.0-ultramodern.2",
-    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.4.0-ultramodern.2"
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.4.0-ultramodern.20",
+    "@modern-js/plugin-data-loader": "npm:@bleedingdev/modern-js-plugin-data-loader@3.4.0-ultramodern.20",
+    "@modern-js/render": "npm:@bleedingdev/modern-js-render@3.4.0-ultramodern.20",
+    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.4.0-ultramodern.20",
+    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.4.0-ultramodern.20",
+    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.4.0-ultramodern.20"
   },
   "peerDependencies": {
     "react": "^19.2.7",
@@ -265,8 +265,8 @@
     "react-dom": "^19.2.7",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.3",
-    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.4.0-ultramodern.2",
-    "@scripts/rstest-config": "2.66.0"
+    "@scripts/rstest-config": "2.66.0",
+    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.4.0-ultramodern.20"
   },
   "sideEffects": false,
   "publishConfig": {