@bleedingdev/modern-js-runtime 3.2.0-ultramodern.8 → 3.2.0-ultramodern.80

package/dist/esm/boundary-debugger/index.mjs

@@ -0,0 +1,262 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+const defaultStorageKey = 'modernjs:boundary-debugger:enabled';
+const queryParamName = 'modern-boundaries';
+const boundarySelector = '[data-modern-boundary-id]';
+const defaultLabels = {
+    cs: {
+        toggle: 'zobrazit hranice týmů'
+    },
+    en: {
+        toggle: 'show team boundaries'
+    }
+};
+const palette = [
+    '#ff5a5f',
+    '#30e27a',
+    '#f6cf45',
+    '#7c8cff',
+    '#29b6f6'
+];
+const readStoredEnabled = (storageKey, fallback)=>{
+    if ("u" < typeof window) return fallback;
+    try {
+        const stored = window.localStorage.getItem(storageKey);
+        return null === stored ? fallback : 'true' === stored;
+    } catch  {
+        return fallback;
+    }
+};
+const writeStoredEnabled = (storageKey, enabled)=>{
+    if ("u" < typeof window) return;
+    try {
+        window.localStorage.setItem(storageKey, String(enabled));
+    } catch  {}
+};
+const parseEnabledOverride = (value)=>{
+    if (null === value) return;
+    const normalized = value.toLowerCase();
+    if ('1' === normalized || 'true' === normalized) return true;
+    if ('0' === normalized || 'false' === normalized) return false;
+};
+const readQueryEnabledOverride = ()=>{
+    if ("u" < typeof window) return;
+    try {
+        return parseEnabledOverride(new URLSearchParams(window.location.search).get(queryParamName));
+    } catch  {
+        return;
+    }
+};
+const detectLanguage = ()=>{
+    if ("u" < typeof document) return 'en';
+    const htmlLanguage = document.documentElement.lang;
+    if (htmlLanguage) return htmlLanguage.split('-')[0] || 'en';
+    if ("u" < typeof window) return 'en';
+    return window.location.pathname.split('/').filter(Boolean)[0] || 'en';
+};
+const hashBoundaryId = (id)=>{
+    let hash = 0;
+    for(let index = 0; index < id.length; index++)hash = 31 * hash + id.charCodeAt(index) >>> 0;
+    return hash;
+};
+const formatRectKey = (rect)=>[
+        Math.round(100 * rect.left) / 100,
+        Math.round(100 * rect.top) / 100,
+        Math.round(100 * rect.width) / 100,
+        Math.round(100 * rect.height) / 100
+    ].join(':');
+const getBoundaryId = (element)=>element.dataset.modernBoundaryId ?? element.dataset.mfRemote ?? element.getAttribute('data-mf-remote') ?? void 0;
+const collectBoundaryElements = (legacySelector)=>{
+    const elements = new Set();
+    for (const element of document.querySelectorAll(boundarySelector))elements.add(element);
+    if (!legacySelector) return Array.from(elements);
+    try {
+        for (const element of document.querySelectorAll(legacySelector))elements.add(element);
+    } catch  {}
+    return Array.from(elements);
+};
+function BoundaryDebugger({ controlMode = 'visible', enabledByDefault = false, labels = defaultLabels, legacySelector, metadata, storageKey = defaultStorageKey }) {
+    const [mounted, setMounted] = useState(false);
+    const [enabled, setEnabled] = useState(false);
+    const [boxes, setBoxes] = useState([]);
+    const boundaries = useMemo(()=>new Map(metadata.boundaries.map((entry, index)=>[
+                entry.mfName,
+                {
+                    ...entry,
+                    color: entry.color ?? palette[index % palette.length],
+                    label: entry.label ?? entry.appId
+                }
+            ])), [
+        metadata
+    ]);
+    const language = mounted ? detectLanguage() : 'en';
+    const toggleLabel = labels[language]?.toggle ?? labels.en?.toggle ?? defaultLabels.en?.toggle ?? 'show team boundaries';
+    useEffect(()=>{
+        setMounted(true);
+        const queryOverride = readQueryEnabledOverride();
+        setEnabled(queryOverride ?? readStoredEnabled(storageKey, enabledByDefault));
+    }, [
+        enabledByDefault,
+        storageKey
+    ]);
+    useEffect(()=>{
+        if (!mounted) return;
+        writeStoredEnabled(storageKey, enabled);
+    }, [
+        enabled,
+        mounted,
+        storageKey
+    ]);
+    useEffect(()=>{
+        if (!enabled) return void setBoxes([]);
+        const readBoxes = ()=>{
+            const seenBoxes = new Set();
+            const nextBoxes = collectBoundaryElements(legacySelector).map((element)=>{
+                const boundaryId = getBoundaryId(element);
+                if (!boundaryId) return;
+                const rect = element.getBoundingClientRect();
+                if (rect.width <= 0 || rect.height <= 0) return;
+                const rectKey = formatRectKey(rect);
+                const boxKey = `${boundaryId}:${rectKey}`;
+                if (seenBoxes.has(boxKey)) return;
+                seenBoxes.add(boxKey);
+                const boundary = boundaries.get(boundaryId);
+                const color = boundary?.color ?? palette[hashBoundaryId(boundaryId) % palette.length];
+                const label = boundary?.label ?? boundary?.appId ?? boundaryId;
+                const expose = element.dataset.modernMfExpose;
+                const detail = expose && expose !== label && expose !== boundaryId ? expose : void 0;
+                const box = {
+                    color,
+                    height: rect.height,
+                    id: boxKey,
+                    label,
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width
+                };
+                if (detail) box.detail = detail;
+                return box;
+            }).filter((box)=>void 0 !== box);
+            setBoxes(nextBoxes);
+        };
+        readBoxes();
+        const resizeObserver = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(readBoxes);
+        for (const element of collectBoundaryElements(legacySelector))resizeObserver?.observe(element);
+        const mutationObserver = new MutationObserver(readBoxes);
+        mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        window.addEventListener('resize', readBoxes);
+        window.addEventListener('scroll', readBoxes, true);
+        return ()=>{
+            mutationObserver.disconnect();
+            resizeObserver?.disconnect();
+            window.removeEventListener('resize', readBoxes);
+            window.removeEventListener('scroll', readBoxes, true);
+        };
+    }, [
+        boundaries,
+        enabled,
+        legacySelector
+    ]);
+    if (!mounted) return null;
+    const shouldRenderToggle = 'visible' === controlMode || 'hidden-when-off' === controlMode && enabled;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            shouldRenderToggle ? /*#__PURE__*/ jsxs("label", {
+                style: {
+                    alignItems: 'center',
+                    background: 'rgba(255, 255, 255, 0.96)',
+                    border: '1px solid rgba(0, 0, 0, 0.1)',
+                    borderRadius: 12,
+                    bottom: 20,
+                    boxShadow: '0 16px 40px rgba(0, 0, 0, 0.16)',
+                    color: '#111827',
+                    display: 'flex',
+                    font: '600 14px/1.2 system-ui, sans-serif',
+                    gap: 8,
+                    left: 20,
+                    padding: '12px 14px',
+                    position: 'fixed',
+                    zIndex: 2147483000
+                },
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        checked: enabled,
+                        onChange: (event)=>setEnabled(event.currentTarget.checked),
+                        type: "checkbox"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: toggleLabel
+                    })
+                ]
+            }) : null,
+            enabled ? /*#__PURE__*/ jsx("div", {
+                "aria-hidden": "true",
+                children: boxes.map((box)=>/*#__PURE__*/ jsx("div", {
+                        style: {
+                            border: `2px solid ${box.color}`,
+                            borderRadius: 8,
+                            boxShadow: `0 0 0 1px rgba(255,255,255,.72), 0 6px 20px color-mix(in srgb, ${box.color} 20%, transparent)`,
+                            height: box.height,
+                            left: box.left,
+                            pointerEvents: 'none',
+                            position: 'fixed',
+                            top: box.top,
+                            width: box.width,
+                            zIndex: 2147482999
+                        },
+                        children: /*#__PURE__*/ jsxs("span", {
+                            style: {
+                                background: box.color,
+                                borderRadius: 999,
+                                color: '#111827',
+                                display: 'grid',
+                                font: '800 11px/1.1 system-ui, sans-serif',
+                                gap: 3,
+                                maxWidth: 'min(280px, calc(100vw - 24px))',
+                                padding: '5px 8px',
+                                position: 'absolute',
+                                right: 4,
+                                top: 4,
+                                whiteSpace: 'nowrap'
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    children: box.label
+                                }),
+                                box.detail ? /*#__PURE__*/ jsx("span", {
+                                    style: {
+                                        font: '700 10px/1.1 system-ui, sans-serif',
+                                        opacity: 0.82,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis'
+                                    },
+                                    children: box.detail
+                                }) : null
+                            ]
+                        })
+                    }, box.id))
+            }) : null
+        ]
+    });
+}
+const ultramodernBoundaryDebuggerPlugin = (options)=>({
+        name: '@modern-js/runtime/boundary-debugger',
+        setup: (api)=>{
+            api.wrapRoot((App)=>(props)=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(App, {
+                                ...props
+                            }),
+                            /*#__PURE__*/ jsx(BoundaryDebugger, {
+                                ...options
+                            })
+                        ]
+                    }));
+        }
+    });
+const boundary_debugger = ultramodernBoundaryDebuggerPlugin;
+export default boundary_debugger;
+export { ultramodernBoundaryDebuggerPlugin };

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

@@ -84,13 +84,14 @@ const ssrBuilderPlugin = (modernAPI, outputModule, exportLoadablePath)=>({
                 const hasServerRendering = hasServerRenderingConfig(userConfig);
                 const hasModuleFederationRuntimeMarker = hasServerRendering && shouldUseModuleFederationNodeOutput(config);
                 const hasExplicitMfSsrFlag = isModuleFederationAppSSREnabled(userConfig);
+                const isCloudflareWorkerSSR = 'workerSSR' === name && userConfig.deploy?.target === 'cloudflare';
                 const requireExplicitMfSsrFlag = 'true' === process.env.MODERN_MF_APP_SSR_REQUIRE_EXPLICIT;
                 if (hasServerRendering && hasModuleFederationRuntimeMarker && !hasExplicitMfSsrFlag) {
                     const warningMessage = '[modernjs][mf-ssr] Module Federation SSR was auto-detected from runtime markers. Set server.ssr.moduleFederationAppSSR=true explicitly in host and remotes to avoid heuristic drift.';
                     if (requireExplicitMfSsrFlag) throw new Error(`${warningMessage} (enforced by MODERN_MF_APP_SSR_REQUIRE_EXPLICIT=true)`);
                     console.warn(warningMessage);
                 }
-                const isModuleFederationAppSSR = hasServerRendering && hasExplicitMfSsrFlag;
+                const isModuleFederationAppSSR = hasServerRendering && hasExplicitMfSsrFlag && !isCloudflareWorkerSSR;
                 const useModuleFederationNodeOutput = hasServerRendering && isModuleFederationAppSSR && isNodeEnvironmentTarget(config.output.target);
                 const ssrEnv = userConfig.deploy?.worker?.ssr || userConfig.server?.rsc ? 'edge' : 'node';
                 const appContext = modernAPI.getAppContext();
@@ -107,7 +108,7 @@ const ssrBuilderPlugin = (modernAPI, outputModule, exportLoadablePath)=>({
                 } : void 0;
                 const useLoadablePlugin = isUseSSRBundle(userConfig) && !isServerEnvironment && checkUseStringSSR(userConfig, appDirectory, entrypoints);
                 const outputConfig = {
-                    module: isServerEnvironment && !useModuleFederationNodeOutput && outputModule
+                    module: isServerEnvironment && !useModuleFederationNodeOutput && (outputModule || 'workerSSR' === name && userConfig.deploy?.target === 'cloudflare')
                 };
                 const useLoadableComponents = isUseSSRBundle(userConfig) && checkUseStringSSR(userConfig, appDirectory, entrypoints);
                 return mergeEnvironmentConfig(config, {

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

@@ -35,6 +35,7 @@ const handleRequest = async (request, ServerRoot, options) => {
     </ServerRoot>,
     {
       ...options,
+      rscManifest: __rspack_rsc_manifest__,
       rscRoot: options.rscRoot,
     },
   );

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

@@ -0,0 +1,13 @@
+import { attributesToString } from "./utils.mjs";
+const createFederatedCssLinks = (assets, options)=>{
+    if (!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/core/server/helmet.mjs

@@ -1,5 +1,5 @@
-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>/;

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

@@ -1,5 +1,5 @@
 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 { buildHtml } from "../shared.mjs";
@@ -22,12 +22,15 @@ 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) return safeReplace(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
         return template;
     }
     return buildHtml(afterAppTemplate, callbacks);

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

@@ -2,6 +2,7 @@ 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 { createFederatedCssLinks } from "../federatedCss.mjs";
 import { createReplaceHelemt } from "../helmet.mjs";
 import { buildHtml } from "../shared.mjs";
 import { checkIsNode, safeReplace } from "../utils.mjs";
@@ -17,7 +18,7 @@ const checkIsInline = (chunk, enableInline)=>{
     return Boolean(enableInline);
 };
 async function buildShellBeforeTemplate(beforeAppTemplate, options) {
-    const { config, runtimeContext, styledComponentsStyleTags, entryName } = options;
+    const { config, runtimeContext, styledComponentsStyleTags, entryName, moduleFederationCssAssets } = options;
     const helmetData = react_helmet.renderStatic();
     const callbacks = [
         createReplaceHelemt(helmetData),
@@ -27,33 +28,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(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/esm/core/server/stream/beforeTemplate.worker.mjs

@@ -0,0 +1,65 @@
+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 { createFederatedCssLinks } from "../federatedCss.mjs";
+import { createReplaceHelemt } 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 = react_helmet.renderStatic();
+    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(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('')}`;
+        }
+    }
+}
+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);
@@ -52,6 +52,7 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
                     runtimeContext,
                     config,
                     entryName,
+                    moduleFederationCssAssets,
                     styledComponentsStyleTags
                 }).then(({ shellAfter, shellBefore })=>{
                     const pendingScripts = [];
@@ -109,7 +110,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/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

@@ -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
         }),

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

@@ -1,4 +1,6 @@
 import { ChunkExtractor } from "@loadable/server";
+import { getRouterMatchedRouteIds } from "../../../router/runtime/lifecycle.mjs";
+import { createFederatedCssLinks } from "../federatedCss.mjs";
 import { attributesToString, checkIsNode } from "../utils.mjs";
 const extname = (uri)=>{
     if ('string' != typeof uri || !uri.includes('.')) return '';
@@ -21,6 +23,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;
@@ -33,20 +49,21 @@ 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 chunks = [].concat(asyncChunks).concat(extractor ? extractor.getChunkAssets(extractor.chunks) : []).concat(this.getMatchedRouteChunks());
         const scriptChunks = generateChunks(chunks, '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 +98,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;