@bleedingdev/modern-js-runtime 3.4.0-ultramodern.1 → 3.4.0-ultramodern.3

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/browser/index.mjs

@@ -1,6 +1,6 @@
 import "node:module";
 import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
-import { parse } from "cookie";
+import { parseCookie } from "cookie";
 import { getGlobalInternalRuntimeContext } from "../context/index.mjs";
 import { getInitialContext } from "../context/runtime.mjs";
 import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
@@ -12,7 +12,7 @@ const getQuery = ()=>window.location.search.substring(1).split('&').reduce((res,
         return res;
     }, {});
 const getCookieMap = ()=>{
-    const parsed = parse(document.cookie || '');
+    const parsed = parseCookie(document.cookie || '');
     return Object.fromEntries(Object.entries(parsed).filter((entry)=>'string' == typeof entry[1]));
 };
 function getSSRData() {

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;