@bleedingdev/modern-js-runtime 3.2.0-ultramodern.11 → 3.2.0-ultramodern.111

package/dist/esm-node/core/server/federatedCss.mjs

@@ -0,0 +1,14 @@
+import "node:module";
+import { attributesToString } from "./utils.mjs";
+const createFederatedCssLinks = (assets, options)=>{
+    if (void 0 === assets || 0 === assets.length) return '';
+    const seen = new Set(options.existingAssets || []);
+    const attributes = attributesToString(options.attributes || {});
+    const links = [];
+    for (const asset of assets)if (!('' === asset || seen.has(asset) || options.template.includes(asset))) {
+        seen.add(asset);
+        links.push(`<link${attributes} href="${asset}" rel="stylesheet" />`);
+    }
+    return links.join('');
+};
+export { createFederatedCssLinks };

package/dist/esm-node/core/server/helmet.mjs

@@ -1,11 +1,14 @@
 import "node:module";
-import { EOL } from "os";
 import { safeReplace } from "./utils.mjs";
+const EOL = '\n';
 const RE_HTML_ATTR = /<html[^>]*>/;
 const RE_BODY_ATTR = /<body[^>]*>/;
 const RE_LAST_IN_HEAD = /<\/head>/;
 const RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/;
 const TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/;
+function getHelmetData(runtimeContext) {
+    return runtimeContext._helmetContext?.helmet ?? void 0;
+}
 function createReplaceHelemt(helmetData) {
     return helmetData ? (template)=>helmetReplace(template, helmetData) : (tempalte)=>tempalte;
 }
@@ -36,4 +39,4 @@ function helmetReplace(content, helmetData) {
     ].reduce((pre, cur)=>pre + (cur.length > 0 ? `  ${cur}${EOL}` : ''), '');
     return safeReplace(result, RE_LAST_IN_HEAD, `${helmetStr}</head>`);
 }
-export { createReplaceHelemt, helmetReplace };
+export { createReplaceHelemt, getHelmetData, helmetReplace };

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

@@ -0,0 +1,26 @@
+import "node:module";
+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}-`);
+}
+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)}`;
+}
+export { injectBeforeHydrationEntryScript };

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

@@ -1,8 +1,9 @@
 import "node:module";
 import { serializeJson } from "@modern-js/runtime-utils/node";
-import { getRouterHydrationScripts } from "../../../router/runtime/lifecycle.mjs";
+import { getRouterHydrationScripts, getRouterMatchedRouteIds } from "../../../router/runtime/lifecycle.mjs";
 import { SSR_DATA_JSON_ID } from "../../constants.mjs";
 import { SSR_DATA_PLACEHOLDER } from "../constants.mjs";
+import { injectBeforeHydrationEntryScript } from "../scriptOrder.mjs";
 import { buildHtml } from "../shared.mjs";
 import { attributesToString, safeReplace } from "../utils.mjs";
 function buildShellAfterTemplate(afterAppTemplate, options) {
@@ -23,11 +24,18 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         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);
+        const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext) ?? [];
+        const assetEntries = [
+            ...matchedRouteIds.map((routeId)=>routeAssets[routeId]),
+            routeAssets[`async-${entryName}`]
+        ].filter(Boolean);
+        const jsAssets = Array.from(new Set(assetEntries.flatMap((entry)=>(entry.assets ?? []).filter((asset)=>asset.endsWith('.js')))));
+        const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
+        const jsChunkStr = jsAssets.filter((asset)=>!template.includes(asset)).map((asset)=>`<script src=${asset}${nonceAttr}></script>`).join(' ');
+        if (jsChunkStr) {
+            const withoutPlaceholder = safeReplace(template, '<!--<?- chunksMap.js ?>-->', '');
+            const withEarlyScripts = injectBeforeHydrationEntryScript(withoutPlaceholder, jsChunkStr, entryName);
+            return withEarlyScripts !== withoutPlaceholder ? withEarlyScripts : safeReplace(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
         }
         return template;
     }

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

@@ -1,9 +1,9 @@
 import "node:module";
 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";
 import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
@@ -21,8 +21,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)
@@ -31,33 +31,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-node/core/server/stream/beforeTemplate.worker.mjs

@@ -0,0 +1,65 @@
+import "node:module";
+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-node/core/server/stream/createReadableStream.mjs

@@ -16,7 +16,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);
@@ -36,11 +36,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();
@@ -53,6 +56,7 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
                     runtimeContext,
                     config,
                     entryName,
+                    moduleFederationCssAssets,
                     styledComponentsStyleTags
                 }).then(({ shellAfter, shellBefore })=>{
                     const pendingScripts = [];
@@ -110,7 +114,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-node/core/server/stream/createReadableStream.worker.mjs

@@ -9,19 +9,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-node/core/server/stream/shared.mjs

@@ -64,7 +64,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: [
@@ -84,9 +84,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-node/core/server/string/index.mjs

@@ -2,12 +2,12 @@ import "node:module";
 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 { createReplaceHelemt, getHelmetData } from "../helmet.mjs";
+import { injectBeforeHydrationEntryScript } from "../scriptOrder.mjs";
 import { buildHtml } from "../shared.mjs";
 import { SSRErrors, SSRTimings } from "../tracer.mjs";
 import { getSSRConfigByEntry, safeReplace } from "../utils.mjs";
@@ -20,7 +20,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,
@@ -33,8 +33,10 @@ const renderString = async (request, serverRoot, options)=>{
             stats: loadableStats,
             nonce: config.nonce,
             routeManifest,
+            runtimeContext,
             template: htmlTemplate,
             entryName,
+            moduleFederationCssAssets,
             chunkSet,
             config
         }),
@@ -58,10 +60,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);
@@ -71,7 +73,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) {
@@ -82,7 +84,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),
@@ -96,8 +98,14 @@ 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)=>{
+        if (!js) return safeReplace(template, CHUNK_JS_PLACEHOLDER, '');
+        const withoutPlaceholder = safeReplace(template, CHUNK_JS_PLACEHOLDER, '');
+        const withEarlyScripts = injectBeforeHydrationEntryScript(withoutPlaceholder, js, entryName);
+        if (withEarlyScripts !== withoutPlaceholder) return withEarlyScripts;
+        return safeReplace(template, CHUNK_JS_PLACEHOLDER, js);
+    };
 }
 function createReplaceChunkCss(css) {
     return (template)=>safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);

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

@@ -1,5 +1,7 @@
 import "node:module";
 import { ChunkExtractor } from "@loadable/server";
+import { getRouterMatchedRouteIds } from "../../../router/runtime/lifecycle.mjs";
+import { createFederatedCssLinks } from "../federatedCss.mjs";
 import { attributesToString, checkIsNode } from "../utils.mjs";
 import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
 import { dirname as __rspack_dirname } from "node:path";
@@ -9,6 +11,33 @@ const extname = (uri)=>{
     return `.${uri?.split('.').pop()}` || '';
 };
 const generateChunks = (chunks, ext)=>chunks.filter((chunk)=>Boolean(chunk.url)).filter((chunk)=>extname(chunk.url).slice(1) === ext);
+const dedupeChunksByUrl = (chunks)=>{
+    const seen = new Set();
+    return chunks.filter((chunk)=>{
+        if (!chunk.url || seen.has(chunk.url)) return false;
+        seen.add(chunk.url);
+        return true;
+    });
+};
+const isAsyncEntryScriptChunk = (chunk, entryName)=>{
+    if (!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}-`);
+};
+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 dedupeChunksByUrl([
+        ...asyncEntryDependencyChunks,
+        ...collectedChunks,
+        ...matchedRouteChunks,
+        ...asyncEntryScriptChunks
+    ]);
+};
 const checkIsInline = (chunk, enableInline)=>{
     if ('production' !== process.env.NODE_ENV) return false;
     if (enableInline instanceof RegExp) return enableInline.test(chunk.url);
@@ -25,6 +54,20 @@ class LoadableCollector {
         const { routeManifest, entryName } = this.options;
         return routeManifest?.routeAssets?.[entryName]?.assets;
     }
+    getMatchedRouteChunks() {
+        const { routeManifest, runtimeContext } = this.options;
+        const routeAssets = routeManifest?.routeAssets;
+        if (!routeAssets) return [];
+        const matchedRouteIds = getRouterMatchedRouteIds(runtimeContext) ?? [];
+        return matchedRouteIds.flatMap((routeId)=>{
+            const routeAsset = routeAssets[routeId];
+            return (routeAsset?.assets ?? []).map((asset)=>({
+                    filename: asset.replace(/^\//, ''),
+                    path: asset,
+                    url: asset
+                }));
+        });
+    }
     collect(comopnent) {
         const { stats, entryName } = this.options;
         if (!stats) return comopnent;
@@ -37,20 +80,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) {
@@ -85,19 +137,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;
@@ -113,4 +174,4 @@ class LoadableCollector {
         this.options = options;
     }
 }
-export { LoadableCollector };
+export { LoadableCollector, orderHydrationScriptChunks };

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

@@ -301,7 +301,7 @@ const documentPlugin = ()=>({
                 const { entrypoints, internalDirectory, appDirectory } = api.getAppContext();
                 const documentFilePath = getDocumentByEntryName(entrypoints, entryName, appDirectory);
                 if (!documentFilePath) return null;
-                return async ({ htmlPlugin })=>{
+                return async (templateData)=>{
                     const config = api.getNormalizedConfig();
                     const documentParams = getDocParams({
                         config: config,
@@ -320,6 +320,8 @@ const documentPlugin = ()=>({
                     debug("entry %s's document jsx rendered html: %o", entryName, html);
                     const { partialsByEntrypoint } = api.getAppContext();
                     html = processPartials(html, entryName, partialsByEntrypoint || {});
+                    const htmlPlugin = templateData.htmlPlugin || templateData.htmlWebpackPlugin || templateData.htmlRspackPlugin;
+                    if (!htmlPlugin) throw new Error('Failed to get HTML plugin tags from template parameters.');
                     const { scripts, links, metas, titles } = extractHtmlTags(htmlPlugin, templateParameters);
                     return processPlaceholders(html, config, scripts, links, metas, titles);
                 };