@bleedingdev/modern-js-runtime 3.2.0-ultramodern.12 → 3.2.0-ultramodern.121

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

@@ -0,0 +1,66 @@
+import { getRouterRuntimeState } from "../../router/runtime/lifecycle.mjs";
+const ROUTER_CLEANUP_ERROR = 'An error occurs during router runtime cleanup';
+async function withRouterCleanup(runtimeContext, onError, callback) {
+    const routerCleanup = createRouterCleanup(runtimeContext, onError);
+    try {
+        return await callback(routerCleanup);
+    } finally{
+        if (!routerCleanup.deferred) await routerCleanup.run();
+    }
+}
+function createRouterCleanup(runtimeContext, onError) {
+    let deferred = false;
+    let finished = false;
+    const run = async ()=>{
+        if (finished) return;
+        finished = true;
+        try {
+            await getRouterRuntimeState(runtimeContext)?.cleanup?.();
+        } catch (error) {
+            onError(error, ROUTER_CLEANUP_ERROR);
+        }
+    };
+    const deferUntilBodyDone = (response)=>{
+        const { body } = response;
+        if (!body || body.locked) return response;
+        deferred = true;
+        const reader = body.getReader();
+        const wrappedBody = new ReadableStream({
+            async pull (controller) {
+                let result;
+                try {
+                    result = await reader.read();
+                } catch (error) {
+                    controller.error(error);
+                    await run();
+                    return;
+                }
+                if (result.done) {
+                    controller.close();
+                    await run();
+                    return;
+                }
+                controller.enqueue(result.value);
+            },
+            async cancel (reason) {
+                try {
+                    await reader.cancel(reason);
+                } catch  {}
+                await run();
+            }
+        });
+        return new Response(wrappedBody, {
+            status: response.status,
+            statusText: response.statusText,
+            headers: response.headers
+        });
+    };
+    return {
+        get deferred () {
+            return deferred;
+        },
+        run,
+        deferUntilBodyDone
+    };
+}
+export { ROUTER_CLEANUP_ERROR, createRouterCleanup, withRouterCleanup };

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

@@ -0,0 +1,84 @@
+import { getRouterMatchedRouteIds } from "../../router/runtime/lifecycle.mjs";
+import { CHUNK_JS_PLACEHOLDER } from "./constants.mjs";
+import { safeReplace } from "./utils.mjs";
+function getScriptTags(template) {
+    const scriptRegExp = /<script\b[^>]*\bsrc=(["'])(.*?)\1[^>]*><\/script>/g;
+    return Array.from(template.matchAll(scriptRegExp)).map((match)=>({
+            index: match.index ?? 0,
+            tag: match[0],
+            src: match[2]
+        }));
+}
+function getAssetBasename(src) {
+    const withoutQuery = src.split(/[?#]/)[0];
+    return withoutQuery.split('/').pop() || withoutQuery;
+}
+function isEntryScript(src, entryName, asyncEntry) {
+    const basename = getAssetBasename(src);
+    const prefix = asyncEntry ? `async-${entryName}` : entryName;
+    return basename === `${prefix}.js` || basename.startsWith(`${prefix}.`) || basename.startsWith(`${prefix}-`);
+}
+const dedupeByUrl = (chunks)=>{
+    const seen = new Set();
+    return chunks.filter((chunk)=>{
+        if (void 0 === chunk.url || '' === chunk.url || seen.has(chunk.url)) return false;
+        seen.add(chunk.url);
+        return true;
+    });
+};
+const isAsyncEntryScriptChunk = (chunk, entryName)=>{
+    if (void 0 === chunk.url || !chunk.url.endsWith('.js')) return false;
+    const asyncEntryName = `async-${entryName}`;
+    const filename = chunk.filename ?? chunk.url;
+    const basename = filename.split('/').pop() ?? filename;
+    return basename === `${asyncEntryName}.js` || basename.startsWith(`${asyncEntryName}.`) || basename.startsWith(`${asyncEntryName}-`);
+};
+function getRouteAssets(runtimeContext, routeManifest = runtimeContext.routeManifest) {
+    return routeManifest?.routeAssets;
+}
+function getMatchedRouteAssets(runtimeContext, routeManifest) {
+    const routeAssets = getRouteAssets(runtimeContext, routeManifest);
+    if (void 0 === routeAssets) return [];
+    const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext) ?? [];
+    return matchedRouteIds.flatMap((routeId)=>routeAssets[routeId]?.assets ?? []);
+}
+const orderHydrationScriptChunks = ({ asyncEntryChunks, collectedChunks, matchedRouteChunks, entryName })=>{
+    const asyncEntryScriptChunks = [];
+    const asyncEntryDependencyChunks = [];
+    for (const chunk of asyncEntryChunks)if (isAsyncEntryScriptChunk(chunk, entryName)) asyncEntryScriptChunks.push(chunk);
+    else asyncEntryDependencyChunks.push(chunk);
+    return dedupeByUrl([
+        ...asyncEntryDependencyChunks,
+        ...collectedChunks,
+        ...matchedRouteChunks,
+        ...asyncEntryScriptChunks
+    ]);
+};
+function injectBeforeHydrationEntryScript(template, scripts, entryName = 'index') {
+    if ('' === scripts) return template;
+    const scriptTags = getScriptTags(template);
+    const target = scriptTags.find((match)=>isEntryScript(match.src, entryName, false)) ?? scriptTags.find((match)=>isEntryScript(match.src, entryName, true));
+    if (void 0 === target) return template;
+    return `${template.slice(0, target.index)}${scripts}${template.slice(target.index)}`;
+}
+function replaceChunkJsPlaceholder(template, scripts, entryName, placeholder = CHUNK_JS_PLACEHOLDER) {
+    if ('' === scripts) return safeReplace(template, placeholder, '');
+    const withoutPlaceholder = safeReplace(template, placeholder, '');
+    const withEarlyScripts = injectBeforeHydrationEntryScript(withoutPlaceholder, scripts, entryName);
+    if (withEarlyScripts !== withoutPlaceholder) return withEarlyScripts;
+    return safeReplace(template, placeholder, scripts);
+}
+function createRouteHydrationScriptTags(runtimeContext, entryName, options = {}) {
+    const { nonce, template } = options;
+    const routeAssets = getRouteAssets(runtimeContext);
+    if (void 0 === routeAssets) return '';
+    const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext) ?? [];
+    const assetEntries = [
+        ...matchedRouteIds.map((routeId)=>routeAssets[routeId]),
+        routeAssets[`async-${entryName}`]
+    ].filter((entry)=>void 0 !== entry);
+    const jsAssets = Array.from(new Set(assetEntries.flatMap((entry)=>(entry.assets ?? []).filter((asset)=>asset.endsWith('.js')))));
+    const nonceAttr = void 0 === nonce || '' === nonce ? '' : ` nonce="${nonce}"`;
+    return jsAssets.filter((asset)=>template?.includes(asset) !== true).map((asset)=>`<script src=${asset}${nonceAttr}></script>`).join(' ');
+}
+export { createRouteHydrationScriptTags, getMatchedRouteAssets, injectBeforeHydrationEntryScript, orderHydrationScriptChunks, replaceChunkJsPlaceholder };

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

@@ -2,6 +2,7 @@ import { serializeJson } from "@modern-js/runtime-utils/node";
 import { getRouterHydrationScripts } from "../../../router/runtime/lifecycle.mjs";
 import { SSR_DATA_JSON_ID } from "../../constants.mjs";
 import { SSR_DATA_PLACEHOLDER } from "../constants.mjs";
+import { createRouteHydrationScriptTags, replaceChunkJsPlaceholder } from "../scriptOrder.mjs";
 import { buildHtml } from "../shared.mjs";
 import { attributesToString, safeReplace } from "../utils.mjs";
 function buildShellAfterTemplate(afterAppTemplate, options) {
@@ -18,17 +19,12 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         (template)=>injectJs(template, entryName, config.nonce)
     ];
     async function injectJs(template, entryName, nonce) {
-        const { routeManifest } = runtimeContext;
-        if (!routeManifest) return template;
-        const { routeAssets } = routeManifest;
-        if (!routeAssets) return template;
-        const asyncEntry = routeAssets[`async-${entryName}`];
-        if (asyncEntry) {
-            const { assets } = asyncEntry;
-            const jsChunkStr = assets?.filter((asset)=>asset.endsWith('.js'))?.map((asset)=>`<script src=${asset} nonce="${nonce}"></script>`).join(' ');
-            if (jsChunkStr) return safeReplace(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
-        }
-        return template;
+        const jsChunkStr = createRouteHydrationScriptTags(runtimeContext, entryName, {
+            nonce,
+            template
+        });
+        if (!jsChunkStr) return template;
+        return replaceChunkJsPlaceholder(template, jsChunkStr, entryName);
     }
     return buildHtml(afterAppTemplate, callbacks);
 }

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

@@ -1,8 +1,8 @@
 import { matchRoutes } from "@modern-js/runtime-utils/router";
-import react_helmet from "react-helmet";
 import { getRouterMatchedRouteIds } from "../../../router/runtime/lifecycle.mjs";
 import { CHUNK_CSS_PLACEHOLDER } from "../constants.mjs";
-import { createReplaceHelemt } from "../helmet.mjs";
+import { createFederatedCssLinks } from "../federatedCss.mjs";
+import { createReplaceHelemt, getHelmetData } from "../helmet.mjs";
 import { buildHtml } from "../shared.mjs";
 import { checkIsNode, safeReplace } from "../utils.mjs";
 const readAsset = async (chunk)=>{
@@ -17,8 +17,8 @@ const checkIsInline = (chunk, enableInline)=>{
     return Boolean(enableInline);
 };
 async function buildShellBeforeTemplate(beforeAppTemplate, options) {
-    const { config, runtimeContext, styledComponentsStyleTags, entryName } = options;
-    const helmetData = react_helmet.renderStatic();
+    const { config, runtimeContext, styledComponentsStyleTags, entryName, moduleFederationCssAssets } = options;
+    const helmetData = getHelmetData(runtimeContext);
     const callbacks = [
         createReplaceHelemt(helmetData),
         (template)=>injectCss(template, entryName, styledComponentsStyleTags)
@@ -27,33 +27,36 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
     async function injectCss(template, entryName, styledComponentsStyleTags) {
         let css = await getCssChunks();
         if (styledComponentsStyleTags) css += styledComponentsStyleTags;
+        css += createFederatedCssLinks(moduleFederationCssAssets, {
+            template,
+            existingAssets: css.match(/href="([^"]+)"/g)?.map((item)=>item.replace(/^href="/, '').replace(/"$/, ''))
+        });
         return safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
         async function getCssChunks() {
             const { routeManifest, routerContext, routes } = runtimeContext;
             if (!routeManifest) return '';
             const { routeAssets } = routeManifest;
-            let matchedRouteManifests;
+            let matchedRouteManifests = [];
             const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext);
             if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);
-            else {
-                if (!routerContext || !routes) return '';
+            else if (routerContext && routes) {
                 const matches = matchRoutes(routes, routerContext.location, routerContext.basename);
                 matchedRouteManifests = matches?.map((match, index)=>{
                     if (!index) return;
                     const routeId = match.route.id;
                     if (routeId) return routeAssets[routeId];
-                }).filter(Boolean);
+                }).filter((routeManifest)=>void 0 !== routeManifest) ?? [];
             }
             const asyncEntry = routeAssets[`async-${entryName}`];
-            if (asyncEntry) matchedRouteManifests?.push(asyncEntry);
-            const cssChunks = matchedRouteManifests ? matchedRouteManifests.reduce((chunks, routeManifest)=>{
+            if (asyncEntry) matchedRouteManifests.push(asyncEntry);
+            const cssChunks = matchedRouteManifests.reduce((chunks, routeManifest)=>{
                 const { referenceCssAssets = [] } = routeManifest;
                 const _cssChunks = referenceCssAssets.filter((asset)=>asset?.endsWith('.css') && !template.includes(asset));
                 return [
                     ...chunks,
                     ..._cssChunks
                 ];
-            }, []) : [];
+            }, []);
             const { inlineStyles } = config;
             const styles = await Promise.all(cssChunks.map(async (chunk)=>{
                 const link = `<link href="${chunk}" rel="stylesheet" />`;

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

@@ -0,0 +1,64 @@
+import { matchRoutes } from "@modern-js/runtime-utils/router";
+import { getRouterMatchedRouteIds } from "../../../router/runtime/lifecycle.mjs";
+import { CHUNK_CSS_PLACEHOLDER } from "../constants.mjs";
+import { createFederatedCssLinks } from "../federatedCss.mjs";
+import { createReplaceHelemt, getHelmetData } from "../helmet.mjs";
+import { buildHtml } from "../shared.mjs";
+import { safeReplace } from "../utils.mjs";
+const checkIsInline = (chunk, enableInline)=>{
+    if ('production' !== process.env.NODE_ENV) return false;
+    if (enableInline instanceof RegExp) return enableInline.test(chunk);
+    return Boolean(enableInline);
+};
+async function buildShellBeforeTemplate(beforeAppTemplate, options) {
+    const { config, runtimeContext, styledComponentsStyleTags, entryName, moduleFederationCssAssets } = options;
+    const helmetData = getHelmetData(runtimeContext);
+    const callbacks = [
+        createReplaceHelemt(helmetData),
+        (template)=>injectCss(template, entryName, styledComponentsStyleTags)
+    ];
+    return buildHtml(beforeAppTemplate, callbacks);
+    async function injectCss(template, entryName, styledComponentsStyleTags) {
+        let css = await getCssChunks();
+        if (styledComponentsStyleTags) css += styledComponentsStyleTags;
+        css += createFederatedCssLinks(moduleFederationCssAssets, {
+            template,
+            existingAssets: css.match(/href="([^"]+)"/g)?.map((item)=>item.replace(/^href="/, '').replace(/"$/, ''))
+        });
+        return safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
+        async function getCssChunks() {
+            const { routeManifest, routerContext, routes } = runtimeContext;
+            if (!routeManifest) return '';
+            const { routeAssets } = routeManifest;
+            let matchedRouteManifests = [];
+            const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext);
+            if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);
+            else if (routerContext && routes) {
+                const matches = matchRoutes(routes, routerContext.location, routerContext.basename);
+                matchedRouteManifests = matches?.map((match, index)=>{
+                    if (!index) return;
+                    const routeId = match.route.id;
+                    if (routeId) return routeAssets[routeId];
+                }).filter((routeManifest)=>void 0 !== routeManifest) ?? [];
+            }
+            const asyncEntry = routeAssets[`async-${entryName}`];
+            if (asyncEntry) matchedRouteManifests.push(asyncEntry);
+            const cssChunks = matchedRouteManifests.reduce((chunks, routeManifest)=>{
+                const { referenceCssAssets = [] } = routeManifest;
+                const _cssChunks = referenceCssAssets.filter((asset)=>asset?.endsWith('.css') && !template.includes(asset));
+                return [
+                    ...chunks,
+                    ..._cssChunks
+                ];
+            }, []);
+            const { inlineStyles } = config;
+            const styles = cssChunks.map((chunk)=>{
+                const link = `<link href="${chunk}" rel="stylesheet" />`;
+                checkIsInline(chunk, inlineStyles);
+                return link;
+            });
+            return `${styles.join('')}`;
+        }
+    }
+}
+export { buildShellBeforeTemplate };

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

@@ -15,7 +15,7 @@ const defaultExtender = {
 };
 const createReadableStreamFromElement = async (request, rootElement, options)=>{
     const { renderToPipeableStream } = await import("react-dom/server");
-    const { runtimeContext, htmlTemplate, config, ssrConfig, entryName } = options;
+    const { runtimeContext, htmlTemplate, config, ssrConfig, entryName, moduleFederationCssAssets } = options;
     let shellChunkStatus = ShellChunkStatus.START;
     let renderLevel = RenderLevel.SERVER_RENDER;
     const forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
@@ -35,11 +35,14 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
         if (extender.modifyRootElement) processedRootElement = extender.modifyRootElement(processedRootElement);
     });
     const chunkVec = [];
+    let hasStartedPipe = false;
     return new Promise((resolve)=>{
         const { pipe: reactStreamingPipe } = renderToPipeableStream(processedRootElement, {
             nonce: config.nonce,
             identifierPrefix: SSR_HYDRATION_ID_PREFIX,
             [onReady] () {
+                if (hasStartedPipe) return;
+                hasStartedPipe = true;
                 let styledComponentsStyleTags = '';
                 extenders.forEach((extender)=>{
                     if (extender.getStyleTags) styledComponentsStyleTags += extender.getStyleTags();
@@ -52,6 +55,7 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
                     runtimeContext,
                     config,
                     entryName,
+                    moduleFederationCssAssets,
                     styledComponentsStyleTags
                 }).then(({ shellAfter, shellBefore })=>{
                     const pendingScripts = [];
@@ -109,7 +113,8 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
                     renderLevel,
                     runtimeContext,
                     entryName,
-                    config
+                    config,
+                    moduleFederationCssAssets
                 }).then(({ shellAfter, shellBefore })=>{
                     const fallbackHtml = `${shellBefore}${shellAfter}`;
                     const readableStream = getReadableStreamFromString(fallbackHtml);

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

@@ -8,19 +8,21 @@ import { getTemplates } from "./template.mjs";
 const createReadableStreamFromElement = async (request, rootElement, options)=>{
     let shellChunkStatus = ShellChunkStatus.START;
     const chunkVec = [];
-    const { htmlTemplate, runtimeContext, config, ssrConfig, entryName, rscRoot } = options;
+    const { htmlTemplate, runtimeContext, config, ssrConfig, entryName, moduleFederationCssAssets, rscManifest, rscRoot } = options;
     const { shellBefore, shellAfter } = await getTemplates(htmlTemplate, {
         renderLevel: RenderLevel.SERVER_RENDER,
         runtimeContext,
         ssrConfig,
         request,
         config,
-        entryName
+        entryName,
+        moduleFederationCssAssets
     });
     try {
         const readableOriginal = await renderSSRStream(rootElement, {
             request,
             nonce: config.nonce,
+            rscManifest,
             rscRoot: rscRoot,
             routes: runtimeContext.routes,
             onError (error) {

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

@@ -22,12 +22,15 @@ function isPromiseLike(value) {
     return !!value && 'function' == typeof value.then;
 }
 function toErrorInfo(error) {
+    if ('production' === process.env.NODE_ENV) return {
+        message: 'Unexpected Server Error'
+    };
     if (error && 'object' == typeof error) {
         const maybeMsg = error.message;
         const maybeStack = error.stack;
         return {
             message: 'string' == typeof maybeMsg ? maybeMsg : String(maybeMsg ?? error),
-            stack: 'production' !== process.env.NODE_ENV ? maybeStack : void 0
+            stack: maybeStack
         };
     }
     return {

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

@@ -63,7 +63,7 @@ function createRenderStreaming(createReadableStreamPromise) {
         const end = time();
         const { runtimeContext, config, resource } = options;
         const { onError, onTiming } = options;
-        const { htmlTemplate, entryName } = resource;
+        const { htmlTemplate, entryName, moduleFederationCssAssets } = resource;
         const ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
         const StreamServerRootWrapper = ({ children })=>/*#__PURE__*/ jsxs(Fragment, {
                 children: [
@@ -83,9 +83,11 @@ function createRenderStreaming(createReadableStreamPromise) {
             runtimeContext,
             ssrConfig,
             entryName,
+            moduleFederationCssAssets,
             rscClientManifest: options.rscClientManifest,
             rscSSRManifest: options.rscSSRManifest,
             rscServerManifest: options.rscServerManifest,
+            rscManifest: options.rscManifest,
             rscRoot: options.rscRoot,
             onShellReady () {
                 const cost = end();

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

@@ -1,12 +1,12 @@
 import { time } from "@modern-js/runtime-utils/time";
 import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
 import server from "react-dom/server";
-import react_helmet from "react-helmet";
 import { RenderLevel } from "../../constants.mjs";
 import { getGlobalInternalRuntimeContext } from "../../context/index.mjs";
 import { wrapRuntimeContextProvider } from "../../react/wrapper.mjs";
-import { CHUNK_CSS_PLACEHOLDER, CHUNK_JS_PLACEHOLDER, HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER } from "../constants.mjs";
-import { createReplaceHelemt } from "../helmet.mjs";
+import { CHUNK_CSS_PLACEHOLDER, HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER } from "../constants.mjs";
+import { createReplaceHelemt, getHelmetData } from "../helmet.mjs";
+import { replaceChunkJsPlaceholder } from "../scriptOrder.mjs";
 import { buildHtml } from "../shared.mjs";
 import { SSRErrors, SSRTimings } from "../tracer.mjs";
 import { getSSRConfigByEntry, safeReplace } from "../utils.mjs";
@@ -19,7 +19,7 @@ const renderString = async (request, serverRoot, options)=>{
         onTiming
     };
     const routerContext = runtimeContext.routerContext;
-    const { htmlTemplate, entryName, loadableStats, routeManifest } = resource;
+    const { htmlTemplate, entryName, loadableStats, routeManifest, moduleFederationCssAssets } = resource;
     const ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
     const chunkSet = {
         renderLevel: RenderLevel.CLIENT_RENDER,
@@ -32,8 +32,10 @@ const renderString = async (request, serverRoot, options)=>{
             stats: loadableStats,
             nonce: config.nonce,
             routeManifest,
+            runtimeContext,
             template: htmlTemplate,
             entryName,
+            moduleFederationCssAssets,
             chunkSet,
             config
         }),
@@ -57,10 +59,10 @@ const renderString = async (request, serverRoot, options)=>{
     const rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
         ssr: true
     }));
-    const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, runtimeContext.ssrContext?.htmlModifiers || [], tracer);
+    const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, runtimeContext.ssrContext?.htmlModifiers || [], runtimeContext, entryName, tracer);
     return html;
 };
-async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, { onError, onTiming }) {
+async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, runtimeContext, entryName, { onError, onTiming }) {
     let html = '';
     let helmetData;
     const finalApp = collectors.reduce((pre, creator)=>creator.collect?.(pre) || pre, App);
@@ -70,7 +72,7 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
             identifierPrefix: SSR_HYDRATION_ID_PREFIX
         });
         chunkSet.renderLevel = RenderLevel.SERVER_RENDER;
-        helmetData = react_helmet.renderStatic();
+        helmetData = getHelmetData(runtimeContext);
         const cost = end();
         onTiming(SSRTimings.RENDER_HTML, cost);
     } catch (e) {
@@ -81,7 +83,7 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
     const { ssrScripts, cssChunk, jsChunk } = chunkSet;
     const finalHtml = await buildHtml(htmlTemplate, [
         createReplaceHtml(html),
-        createReplaceChunkJs(jsChunk),
+        createReplaceChunkJs(jsChunk, entryName),
         createReplaceChunkCss(cssChunk),
         createReplaceSSRDataScript(ssrScripts),
         createReplaceHelemt(helmetData),
@@ -95,8 +97,8 @@ function createReplaceHtml(html) {
 function createReplaceSSRDataScript(data) {
     return (template)=>safeReplace(template, SSR_DATA_PLACEHOLDER, data);
 }
-function createReplaceChunkJs(js) {
-    return (template)=>safeReplace(template, CHUNK_JS_PLACEHOLDER, js);
+function createReplaceChunkJs(js, entryName) {
+    return (template)=>replaceChunkJsPlaceholder(template, js, entryName);
 }
 function createReplaceChunkCss(css) {
     return (template)=>safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);

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

@@ -1,10 +1,21 @@
 import { ChunkExtractor } from "@loadable/server";
+import { createFederatedCssLinks } from "../federatedCss.mjs";
+import { getMatchedRouteAssets, orderHydrationScriptChunks } from "../scriptOrder.mjs";
 import { attributesToString, checkIsNode } from "../utils.mjs";
 const extname = (uri)=>{
     if ('string' != typeof uri || !uri.includes('.')) return '';
     return `.${uri?.split('.').pop()}` || '';
 };
 const generateChunks = (chunks, ext)=>chunks.filter((chunk)=>Boolean(chunk.url)).filter((chunk)=>extname(chunk.url).slice(1) === ext);
+const routeAssetToChunk = (asset)=>({
+        chunk: asset,
+        filename: asset.replace(/^\//, ''),
+        linkType: 'preload',
+        path: asset,
+        scriptType: asset.endsWith('.css') ? 'style' : "script",
+        type: 'routeAsset',
+        url: asset
+    });
 const checkIsInline = (chunk, enableInline)=>{
     if ('production' !== process.env.NODE_ENV) return false;
     if (enableInline instanceof RegExp) return enableInline.test(chunk.url);
@@ -21,6 +32,11 @@ class LoadableCollector {
         const { routeManifest, entryName } = this.options;
         return routeManifest?.routeAssets?.[entryName]?.assets;
     }
+    getMatchedRouteChunks() {
+        const { routeManifest, runtimeContext } = this.options;
+        if (!routeManifest) return [];
+        return getMatchedRouteAssets(runtimeContext, routeManifest).map(routeAssetToChunk);
+    }
     collect(comopnent) {
         const { stats, entryName } = this.options;
         if (!stats) return comopnent;
@@ -33,20 +49,29 @@ class LoadableCollector {
         return this.extractor.collectChunks(comopnent);
     }
     async effect() {
-        if (!this.extractor) return;
         const { extractor, options } = this;
         const { entryName, config } = options;
         const asyncChunks = [];
-        if (config.enableAsyncEntry) try {
+        if (extractor && config.enableAsyncEntry) try {
             asyncChunks.push(...extractor.getChunkAssets([
                 `async-${entryName}`
             ]));
         } catch (e) {}
-        const chunks = [].concat(asyncChunks).concat(extractor.getChunkAssets(extractor.chunks));
-        const scriptChunks = generateChunks(chunks, 'js');
+        const collectedChunks = extractor ? extractor.getChunkAssets(extractor.chunks) : [];
+        const matchedRouteChunks = this.getMatchedRouteChunks();
+        const orderedScriptChunks = orderHydrationScriptChunks({
+            asyncEntryChunks: asyncChunks,
+            collectedChunks,
+            matchedRouteChunks,
+            entryName
+        });
+        const chunks = [].concat(asyncChunks).concat(collectedChunks).concat(matchedRouteChunks);
+        const scriptChunks = generateChunks(orderedScriptChunks, 'js');
         const styleChunks = generateChunks(chunks, 'css');
-        this.emitLoadableScripts(extractor);
-        await this.emitScriptAssets(scriptChunks);
+        if (extractor) {
+            this.emitLoadableScripts(extractor);
+            await this.emitScriptAssets(scriptChunks);
+        }
         await this.emitStyleAssets(styleChunks);
     }
     emitLoadableScripts(extractor) {
@@ -81,19 +106,28 @@ class LoadableCollector {
         chunkSet.jsChunk += scripts.filter((script)=>Boolean(script)).join('');
     }
     async emitStyleAssets(chunks) {
-        const { template, chunkSet, config, entryName } = this.options;
+        const { template, chunkSet, config, moduleFederationCssAssets } = this.options;
         const { inlineStyles } = config;
         const atrributes = attributesToString(this.generateAttributes());
         const linkRegExp = /<link .*?href="([^"]+)".*?>/g;
         const matchs = template.matchAll(linkRegExp);
         const existedLinks = [];
         for (const match of matchs)existedLinks.push(match[1]);
-        const css = await Promise.all(chunks.filter((chunk)=>!existedLinks.includes(chunk.url) && !this.existsAssets?.includes(chunk.path)).map(async (chunk)=>{
+        const emittedChunks = chunks.filter((chunk)=>!existedLinks.includes(chunk.url) && !this.existsAssets?.includes(chunk.path));
+        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);
             return link;
         }));
         chunkSet.cssChunk += css.filter((css)=>Boolean(css)).join('');
+        chunkSet.cssChunk += createFederatedCssLinks(moduleFederationCssAssets, {
+            template,
+            attributes: this.generateAttributes(),
+            existingAssets: [
+                ...existedLinks,
+                ...emittedChunks.map((chunk)=>chunk.url)
+            ]
+        });
     }
     generateAttributes(extraAtr = {}) {
         const { config } = this.options;
@@ -109,4 +143,4 @@ class LoadableCollector {
         this.options = options;
     }
 }
-export { LoadableCollector };
+export { LoadableCollector, orderHydrationScriptChunks };

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

@@ -1,5 +1,5 @@
 import { serializeJson } from "@modern-js/runtime-utils/node";
-import { getRouterHydrationScripts } from "../../../router/runtime/lifecycle.mjs";
+import { getRouterHydrationScripts, getRouterServerSnapshot } from "../../../router/runtime/lifecycle.mjs";
 import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "../../constants.mjs";
 import { attributesToString, serializeErrors } from "../utils.mjs";
 function _check_private_redeclaration(obj, privateCollection) {
@@ -89,7 +89,7 @@ function getSSRData() {
 }
 function getRouterData() {
     const { routerContext, runtimeContext } = _class_private_field_get(this, _options);
-    const snapshotRouterData = runtimeContext.routerServerSnapshot?.routerData;
+    const snapshotRouterData = getRouterServerSnapshot(runtimeContext)?.routerData;
     if (snapshotRouterData) return {
         loaderData: snapshotRouterData.loaderData,
         errors: serializeErrors(snapshotRouterData.errors || null)