@bleedingdev/modern-js-runtime 3.2.0-ultramodern.1 → 3.2.0-ultramodern.100

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

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -36,10 +27,9 @@ __webpack_require__.d(__webpack_exports__, {
     buildShellBeforeTemplate: ()=>buildShellBeforeTemplate
 });
 const router_namespaceObject = require("@modern-js/runtime-utils/router");
-const external_react_helmet_namespaceObject = require("react-helmet");
-var external_react_helmet_default = /*#__PURE__*/ __webpack_require__.n(external_react_helmet_namespaceObject);
 const lifecycle_js_namespaceObject = require("../../../router/runtime/lifecycle.js");
 const external_constants_js_namespaceObject = require("../constants.js");
+const external_federatedCss_js_namespaceObject = require("../federatedCss.js");
 const external_helmet_js_namespaceObject = require("../helmet.js");
 const external_shared_js_namespaceObject = require("../shared.js");
 const external_utils_js_namespaceObject = require("../utils.js");
@@ -55,8 +45,8 @@ const checkIsInline = (chunk, enableInline)=>{
     return Boolean(enableInline);
 };
 async function buildShellBeforeTemplate(beforeAppTemplate, options) {
-    const { config, runtimeContext, styledComponentsStyleTags, entryName } = options;
-    const helmetData = external_react_helmet_default().renderStatic();
+    const { config, runtimeContext, styledComponentsStyleTags, entryName, moduleFederationCssAssets } = options;
+    const helmetData = (0, external_helmet_js_namespaceObject.getHelmetData)(runtimeContext);
     const callbacks = [
         (0, external_helmet_js_namespaceObject.createReplaceHelemt)(helmetData),
         (template)=>injectCss(template, entryName, styledComponentsStyleTags)
@@ -65,33 +55,36 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
     async function injectCss(template, entryName, styledComponentsStyleTags) {
         let css = await getCssChunks();
         if (styledComponentsStyleTags) css += styledComponentsStyleTags;
+        css += (0, external_federatedCss_js_namespaceObject.createFederatedCssLinks)(moduleFederationCssAssets, {
+            template,
+            existingAssets: css.match(/href="([^"]+)"/g)?.map((item)=>item.replace(/^href="/, '').replace(/"$/, ''))
+        });
         return (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject.CHUNK_CSS_PLACEHOLDER, css);
         async function getCssChunks() {
             const { routeManifest, routerContext, routes } = runtimeContext;
             if (!routeManifest) return '';
             const { routeAssets } = routeManifest;
-            let matchedRouteManifests;
+            let matchedRouteManifests = [];
             const matchedRouteIds = (0, lifecycle_js_namespaceObject.getRouterMatchedRouteIds)(runtimeContext);
             if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);
-            else {
-                if (!routerContext || !routes) return '';
+            else if (routerContext && routes) {
                 const matches = (0, router_namespaceObject.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(Boolean) ?? [];
             }
             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/cjs/core/server/stream/beforeTemplate.worker.js

@@ -0,0 +1,98 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    buildShellBeforeTemplate: ()=>buildShellBeforeTemplate
+});
+const router_namespaceObject = require("@modern-js/runtime-utils/router");
+const lifecycle_js_namespaceObject = require("../../../router/runtime/lifecycle.js");
+const external_constants_js_namespaceObject = require("../constants.js");
+const external_federatedCss_js_namespaceObject = require("../federatedCss.js");
+const external_helmet_js_namespaceObject = require("../helmet.js");
+const external_shared_js_namespaceObject = require("../shared.js");
+const external_utils_js_namespaceObject = require("../utils.js");
+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 = (0, external_helmet_js_namespaceObject.getHelmetData)(runtimeContext);
+    const callbacks = [
+        (0, external_helmet_js_namespaceObject.createReplaceHelemt)(helmetData),
+        (template)=>injectCss(template, entryName, styledComponentsStyleTags)
+    ];
+    return (0, external_shared_js_namespaceObject.buildHtml)(beforeAppTemplate, callbacks);
+    async function injectCss(template, entryName, styledComponentsStyleTags) {
+        let css = await getCssChunks();
+        if (styledComponentsStyleTags) css += styledComponentsStyleTags;
+        css += (0, external_federatedCss_js_namespaceObject.createFederatedCssLinks)(moduleFederationCssAssets, {
+            template,
+            existingAssets: css.match(/href="([^"]+)"/g)?.map((item)=>item.replace(/^href="/, '').replace(/"$/, ''))
+        });
+        return (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject.CHUNK_CSS_PLACEHOLDER, css);
+        async function getCssChunks() {
+            const { routeManifest, routerContext, routes } = runtimeContext;
+            if (!routeManifest) return '';
+            const { routeAssets } = routeManifest;
+            let matchedRouteManifests = [];
+            const matchedRouteIds = (0, lifecycle_js_namespaceObject.getRouterMatchedRouteIds)(runtimeContext);
+            if (matchedRouteIds?.length) matchedRouteManifests = matchedRouteIds.map((routeId)=>routeAssets[routeId]).filter(Boolean);
+            else if (routerContext && routes) {
+                const matches = (0, router_namespaceObject.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) ?? [];
+            }
+            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('')}`;
+        }
+    }
+}
+exports.buildShellBeforeTemplate = __webpack_exports__.buildShellBeforeTemplate;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "buildShellBeforeTemplate"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -43,7 +43,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 = external_shared_js_namespaceObject.ShellChunkStatus.START;
     let renderLevel = external_constants_js_namespaceObject.RenderLevel.SERVER_RENDER;
     const forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
@@ -63,11 +63,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: constants_namespaceObject.SSR_HYDRATION_ID_PREFIX,
             [onReady] () {
+                if (hasStartedPipe) return;
+                hasStartedPipe = true;
                 let styledComponentsStyleTags = '';
                 extenders.forEach((extender)=>{
                     if (extender.getStyleTags) styledComponentsStyleTags += extender.getStyleTags();
@@ -80,6 +83,7 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
                     runtimeContext,
                     config,
                     entryName,
+                    moduleFederationCssAssets,
                     styledComponentsStyleTags
                 }).then(({ shellAfter, shellBefore })=>{
                     const pendingScripts = [];
@@ -137,7 +141,8 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
                     renderLevel,
                     runtimeContext,
                     entryName,
-                    config
+                    config,
+                    moduleFederationCssAssets
                 }).then(({ shellAfter, shellBefore })=>{
                     const fallbackHtml = `${shellBefore}${shellAfter}`;
                     const readableStream = (0, external_shared_js_namespaceObject.getReadableStreamFromString)(fallbackHtml);

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

@@ -36,19 +36,21 @@ const external_template_js_namespaceObject = require("./template.js");
 const createReadableStreamFromElement = async (request, rootElement, options)=>{
     let shellChunkStatus = external_shared_js_namespaceObject.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 (0, external_template_js_namespaceObject.getTemplates)(htmlTemplate, {
         renderLevel: external_constants_js_namespaceObject.RenderLevel.SERVER_RENDER,
         runtimeContext,
         ssrConfig,
         request,
         config,
-        entryName
+        entryName,
+        moduleFederationCssAssets
     });
     try {
         const readableOriginal = await (0, ssr_namespaceObject.renderSSRStream)(rootElement, {
             request,
             nonce: config.nonce,
+            rscManifest,
             rscRoot: rscRoot,
             routes: runtimeContext.routes,
             onError (error) {

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

@@ -95,7 +95,7 @@ function createRenderStreaming(createReadableStreamPromise) {
         const end = (0, time_namespaceObject.time)();
         const { runtimeContext, config, resource } = options;
         const { onError, onTiming } = options;
-        const { htmlTemplate, entryName } = resource;
+        const { htmlTemplate, entryName, moduleFederationCssAssets } = resource;
         const ssrConfig = (0, external_utils_js_namespaceObject.getSSRConfigByEntry)(entryName, config.ssr, config.ssrByEntries);
         const StreamServerRootWrapper = ({ children })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                 children: [
@@ -115,9 +115,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/cjs/core/server/string/index.js

@@ -39,13 +39,12 @@ const time_namespaceObject = require("@modern-js/runtime-utils/time");
 const constants_namespaceObject = require("@modern-js/utils/universal/constants");
 const server_namespaceObject = require("react-dom/server");
 var server_default = /*#__PURE__*/ __webpack_require__.n(server_namespaceObject);
-const external_react_helmet_namespaceObject = require("react-helmet");
-var external_react_helmet_default = /*#__PURE__*/ __webpack_require__.n(external_react_helmet_namespaceObject);
 const external_constants_js_namespaceObject = require("../../constants.js");
 const index_js_namespaceObject = require("../../context/index.js");
 const wrapper_js_namespaceObject = require("../../react/wrapper.js");
 const external_constants_js_namespaceObject_1 = require("../constants.js");
 const external_helmet_js_namespaceObject = require("../helmet.js");
+const external_scriptOrder_js_namespaceObject = require("../scriptOrder.js");
 const external_shared_js_namespaceObject = require("../shared.js");
 const external_tracer_js_namespaceObject = require("../tracer.js");
 const external_utils_js_namespaceObject = require("../utils.js");
@@ -58,7 +57,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 = (0, external_utils_js_namespaceObject.getSSRConfigByEntry)(entryName, config.ssr, config.ssrByEntries);
     const chunkSet = {
         renderLevel: external_constants_js_namespaceObject.RenderLevel.CLIENT_RENDER,
@@ -71,8 +70,10 @@ const renderString = async (request, serverRoot, options)=>{
             stats: loadableStats,
             nonce: config.nonce,
             routeManifest,
+            runtimeContext,
             template: htmlTemplate,
             entryName,
+            moduleFederationCssAssets,
             chunkSet,
             config
         }),
@@ -96,10 +97,10 @@ const renderString = async (request, serverRoot, options)=>{
     const rootElement = (0, wrapper_js_namespaceObject.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);
@@ -109,7 +110,7 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
             identifierPrefix: constants_namespaceObject.SSR_HYDRATION_ID_PREFIX
         });
         chunkSet.renderLevel = external_constants_js_namespaceObject.RenderLevel.SERVER_RENDER;
-        helmetData = external_react_helmet_default().renderStatic();
+        helmetData = (0, external_helmet_js_namespaceObject.getHelmetData)(runtimeContext);
         const cost = end();
         onTiming(external_tracer_js_namespaceObject.SSRTimings.RENDER_HTML, cost);
     } catch (e) {
@@ -120,7 +121,7 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
     const { ssrScripts, cssChunk, jsChunk } = chunkSet;
     const finalHtml = await (0, external_shared_js_namespaceObject.buildHtml)(htmlTemplate, [
         createReplaceHtml(html),
-        createReplaceChunkJs(jsChunk),
+        createReplaceChunkJs(jsChunk, entryName),
         createReplaceChunkCss(cssChunk),
         createReplaceSSRDataScript(ssrScripts),
         (0, external_helmet_js_namespaceObject.createReplaceHelemt)(helmetData),
@@ -134,8 +135,14 @@ function createReplaceHtml(html) {
 function createReplaceSSRDataScript(data) {
     return (template)=>(0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.SSR_DATA_PLACEHOLDER, data);
 }
-function createReplaceChunkJs(js) {
-    return (template)=>(0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_JS_PLACEHOLDER, js);
+function createReplaceChunkJs(js, entryName) {
+    return (template)=>{
+        if (!js) return (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_JS_PLACEHOLDER, '');
+        const withoutPlaceholder = (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_JS_PLACEHOLDER, '');
+        const withEarlyScripts = (0, external_scriptOrder_js_namespaceObject.injectBeforeHydrationEntryScript)(withoutPlaceholder, js, entryName);
+        if (withEarlyScripts !== withoutPlaceholder) return withEarlyScripts;
+        return (0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_JS_PLACEHOLDER, js);
+    };
 }
 function createReplaceChunkCss(css) {
     return (template)=>(0, external_utils_js_namespaceObject.safeReplace)(template, external_constants_js_namespaceObject_1.CHUNK_CSS_PLACEHOLDER, css);

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

@@ -24,15 +24,45 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    LoadableCollector: ()=>LoadableCollector
+    LoadableCollector: ()=>LoadableCollector,
+    orderHydrationScriptChunks: ()=>orderHydrationScriptChunks
 });
 const server_namespaceObject = require("@loadable/server");
+const lifecycle_js_namespaceObject = require("../../../router/runtime/lifecycle.js");
+const external_federatedCss_js_namespaceObject = require("../federatedCss.js");
 const external_utils_js_namespaceObject = require("../utils.js");
 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 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);
@@ -49,6 +79,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 = (0, lifecycle_js_namespaceObject.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;
@@ -61,20 +105,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) {
@@ -109,19 +162,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 = (0, external_utils_js_namespaceObject.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 ((0, external_utils_js_namespaceObject.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 += (0, external_federatedCss_js_namespaceObject.createFederatedCssLinks)(moduleFederationCssAssets, {
+            template,
+            attributes: this.generateAttributes(),
+            existingAssets: [
+                ...existedLinks,
+                ...emittedChunks.map((chunk)=>chunk.url)
+            ]
+        });
     }
     generateAttributes(extraAtr = {}) {
         const { config } = this.options;
@@ -138,8 +200,10 @@ class LoadableCollector {
     }
 }
 exports.LoadableCollector = __webpack_exports__.LoadableCollector;
+exports.orderHydrationScriptChunks = __webpack_exports__.orderHydrationScriptChunks;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "LoadableCollector"
+    "LoadableCollector",
+    "orderHydrationScriptChunks"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true