@bleedingdev/modern-js-runtime 3.2.0-ultramodern.6 → 3.2.0-ultramodern.62

package/dist/cjs/boundary-debugger/index.js

@@ -0,0 +1,221 @@
+"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__, {
+    default: ()=>boundary_debugger,
+    ultramodernBoundaryDebuggerPlugin: ()=>ultramodernBoundaryDebuggerPlugin
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const defaultStorageKey = 'modernjs:boundary-debugger:enabled';
+const defaultLabels = {
+    cs: {
+        toggle: 'zobrazit hranice verticalů'
+    },
+    en: {
+        toggle: 'show vertical boundaries'
+    }
+};
+const palette = [
+    '#ff5a5f',
+    '#30e27a',
+    '#f6cf45',
+    '#7c8cff',
+    '#29b6f6'
+];
+const readEnabled = (storageKey, fallback)=>{
+    if ("u" < typeof window) return fallback;
+    const stored = window.localStorage.getItem(storageKey);
+    return null === stored ? fallback : 'true' === stored;
+};
+const detectLanguage = ()=>{
+    if ("u" < typeof document) return 'en';
+    const htmlLanguage = document.documentElement.lang;
+    if (htmlLanguage) return htmlLanguage.split('-')[0] || 'en';
+    return window.location.pathname.split('/').filter(Boolean)[0] || 'en';
+};
+function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, metadata, storageKey = defaultStorageKey }) {
+    const [mounted, setMounted] = (0, external_react_namespaceObject.useState)(false);
+    const [enabled, setEnabled] = (0, external_react_namespaceObject.useState)(false);
+    const [boxes, setBoxes] = (0, external_react_namespaceObject.useState)([]);
+    const boundaries = (0, external_react_namespaceObject.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 vertical boundaries';
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        setMounted(true);
+        setEnabled(readEnabled(storageKey, enabledByDefault));
+    }, [
+        enabledByDefault,
+        storageKey
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!mounted) return;
+        window.localStorage.setItem(storageKey, String(enabled));
+    }, [
+        enabled,
+        mounted,
+        storageKey
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!enabled) return void setBoxes([]);
+        const readBoxes = ()=>{
+            const nextBoxes = Array.from(document.querySelectorAll('[data-modern-boundary-id]')).map((element, index)=>{
+                const boundaryId = element.dataset.modernBoundaryId;
+                if (!boundaryId) return;
+                const rect = element.getBoundingClientRect();
+                if (rect.width <= 0 || rect.height <= 0) return;
+                const boundary = boundaries.get(boundaryId);
+                const color = boundary?.color ?? palette[index % palette.length];
+                return {
+                    color,
+                    height: rect.height,
+                    id: `${boundaryId}-${index}`,
+                    label: boundary?.label ?? boundaryId,
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width
+                };
+            }).filter((box)=>void 0 !== box);
+            setBoxes(nextBoxes);
+        };
+        readBoxes();
+        const resizeObserver = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(readBoxes);
+        for (const element of document.querySelectorAll('[data-modern-boundary-id]'))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
+    ]);
+    if (!mounted) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                        checked: enabled,
+                        onChange: (event)=>setEnabled(event.currentTarget.checked),
+                        type: "checkbox"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        children: toggleLabel
+                    })
+                ]
+            }),
+            enabled ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                "aria-hidden": "true",
+                children: boxes.map((box)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            style: {
+                                background: box.color,
+                                borderRadius: 999,
+                                color: '#111827',
+                                font: '800 11px/1 system-ui, sans-serif',
+                                padding: '5px 8px',
+                                position: 'absolute',
+                                right: 4,
+                                top: 4,
+                                whiteSpace: 'nowrap'
+                            },
+                            children: box.label
+                        })
+                    }, box.id))
+            }) : null
+        ]
+    });
+}
+const ultramodernBoundaryDebuggerPlugin = (options)=>({
+        name: '@modern-js/runtime/boundary-debugger',
+        setup: (api)=>{
+            api.wrapRoot((App)=>(props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {
+                                ...props
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BoundaryDebugger, {
+                                ...options
+                            })
+                        ]
+                    }));
+        }
+    });
+const boundary_debugger = ultramodernBoundaryDebuggerPlugin;
+exports["default"] = __webpack_exports__["default"];
+exports.ultramodernBoundaryDebuggerPlugin = __webpack_exports__.ultramodernBoundaryDebuggerPlugin;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default",
+    "ultramodernBoundaryDebuggerPlugin"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/cli/ssr/index.js

@@ -125,13 +125,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();
@@ -148,7 +149,7 @@ const ssrBuilderPlugin = (modernAPI, outputModule, exportLoadablePath)=>({
                 } : void 0;
                 const useLoadablePlugin = (0, utils_namespaceObject.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 = (0, utils_namespaceObject.isUseSSRBundle)(userConfig) && checkUseStringSSR(userConfig, appDirectory, entrypoints);
                 return mergeEnvironmentConfig(config, {

package/dist/cjs/cli/template.server.js

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

package/dist/cjs/core/plugin/index.js

@@ -45,8 +45,9 @@ function registerPlugin(internalPlugins, runtimeConfig) {
         config: runtimeConfig || {},
         handleSetupResult: hooks_js_namespaceObject.handleSetupResult
     });
-    (0, external_context_index_js_namespaceObject.setGlobalInternalRuntimeContext)(runtimeContext);
-    return runtimeContext;
+    const internalRuntimeContext = runtimeContext;
+    (0, external_context_index_js_namespaceObject.setGlobalInternalRuntimeContext)(internalRuntimeContext);
+    return internalRuntimeContext;
 }
 function mergeConfig(config, ...otherConfig) {
     return (0, merge_namespaceObject.merge)({}, config, ...otherConfig);

package/dist/cjs/core/server/helmet.js

@@ -27,8 +27,8 @@ __webpack_require__.d(__webpack_exports__, {
     createReplaceHelemt: ()=>createReplaceHelemt,
     helmetReplace: ()=>helmetReplace
 });
-const external_os_namespaceObject = require("os");
 const external_utils_js_namespaceObject = require("./utils.js");
+const EOL = '\n';
 const RE_HTML_ATTR = /<html[^>]*>/;
 const RE_BODY_ATTR = /<body[^>]*>/;
 const RE_LAST_IN_HEAD = /<\/head>/;
@@ -61,7 +61,7 @@ function helmetReplace(content, helmetData) {
         script,
         style,
         !existTitleTag ? title : ''
-    ].reduce((pre, cur)=>pre + (cur.length > 0 ? `  ${cur}${external_os_namespaceObject.EOL}` : ''), '');
+    ].reduce((pre, cur)=>pre + (cur.length > 0 ? `  ${cur}${EOL}` : ''), '');
     return (0, external_utils_js_namespaceObject.safeReplace)(result, RE_LAST_IN_HEAD, `${helmetStr}</head>`);
 }
 exports.createReplaceHelemt = __webpack_exports__.createReplaceHelemt;

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

@@ -50,12 +50,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 (0, external_utils_js_namespaceObject.safeReplace)(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
-        }
+        const matchedRouteIds = (0, lifecycle_js_namespaceObject.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 (0, external_utils_js_namespaceObject.safeReplace)(template, '<!--<?- chunksMap.js ?>-->', jsChunkStr);
         return template;
     }
     return (0, external_shared_js_namespaceObject.buildHtml)(afterAppTemplate, callbacks);

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

@@ -70,28 +70,27 @@ async function buildShellBeforeTemplate(beforeAppTemplate, options) {
             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,104 @@
+"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, {
+            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 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_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 } = options;
+    const helmetData = external_react_helmet_default().renderStatic();
+    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;
+        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.worker.js

@@ -36,7 +36,7 @@ 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, rscManifest, rscRoot } = options;
     const { shellBefore, shellAfter } = await (0, external_template_js_namespaceObject.getTemplates)(htmlTemplate, {
         renderLevel: external_constants_js_namespaceObject.RenderLevel.SERVER_RENDER,
         runtimeContext,
@@ -49,6 +49,7 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
         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

@@ -118,6 +118,7 @@ function createRenderStreaming(createReadableStreamPromise) {
             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

@@ -71,6 +71,7 @@ const renderString = async (request, serverRoot, options)=>{
             stats: loadableStats,
             nonce: config.nonce,
             routeManifest,
+            runtimeContext,
             template: htmlTemplate,
             entryName,
             chunkSet,

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

@@ -27,6 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     LoadableCollector: ()=>LoadableCollector
 });
 const server_namespaceObject = require("@loadable/server");
+const lifecycle_js_namespaceObject = require("../../../router/runtime/lifecycle.js");
 const external_utils_js_namespaceObject = require("../utils.js");
 const extname = (uri)=>{
     if ('string' != typeof uri || !uri.includes('.')) return '';
@@ -49,6 +50,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;
@@ -70,7 +85,7 @@ class LoadableCollector {
                 `async-${entryName}`
             ]));
         } catch (e) {}
-        const chunks = [].concat(asyncChunks).concat(extractor.getChunkAssets(extractor.chunks));
+        const chunks = [].concat(asyncChunks).concat(extractor.getChunkAssets(extractor.chunks)).concat(this.getMatchedRouteChunks());
         const scriptChunks = generateChunks(chunks, 'js');
         const styleChunks = generateChunks(chunks, 'css');
         this.emitLoadableScripts(extractor);

package/dist/cjs/router/cli/code/tanstackTypes.js

@@ -117,6 +117,7 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
     const imports = [];
     const statements = [];
     const loaderImportMap = new Map();
+    const usedRouteVarNames = new Set();
     let loaderIndex = 0;
     let routeIndex = 0;
     const getImportNamesForLoader = async (aliasedNoExtPath, inline, hasAction)=>{
@@ -150,10 +151,17 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
             actionName
         };
     };
+    const reserveRouteVarName = (preferred)=>{
+        let candidate = preferred;
+        let suffix = 1;
+        while(usedRouteVarNames.has(candidate))candidate = `${preferred}_${suffix++}`;
+        usedRouteVarNames.add(candidate);
+        return candidate;
+    };
     const createRouteVarName = (route)=>{
         const id = route.id;
         const base = id ? (0, external_makeLegalIdentifier_js_namespaceObject.makeLegalIdentifier)(id) : `r_${routeIndex++}`;
-        return `route_${base}`;
+        return reserveRouteVarName(`route_${base}`);
     };
     const buildRoute = async (opts)=>{
         const { parentVar, route } = opts;
@@ -182,14 +190,16 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
             actionName
         });
         if (staticDataSnippet) routeOpts.push(staticDataSnippet);
-        statements.push(`const ${varName} = createRoute({\n  ${routeOpts.join('\n  ')}\n});`);
         const children = route.children;
+        const hasChildren = Boolean(children && children.length > 0);
+        const routeCtorVarName = hasChildren ? reserveRouteVarName(`${varName}__base`) : varName;
+        statements.push(`const ${routeCtorVarName} = createRoute({\n  ${routeOpts.join('\n  ')}\n});`);
         if (children && children.length > 0) {
             const childVars = await Promise.all(children.map((child)=>buildRoute({
-                    parentVar: varName,
+                    parentVar: routeCtorVarName,
                     route: child
                 })));
-            statements.push(`${varName}.addChildren([${childVars.join(', ')}]);`);
+            statements.push(`const ${varName} = ${routeCtorVarName}.addChildren([${childVars.join(', ')}]);`);
         }
         return varName;
     };
@@ -262,7 +272,11 @@ function createRouteStaticData(opts: {
   modernRouteAction?: unknown;
   modernRouteLoader?: unknown;
 }) {
-  const staticData: Record<string, unknown> = {};
+  const staticData: {
+    modernRouteId?: string;
+    modernRouteAction?: unknown;
+    modernRouteLoader?: unknown;
+  } = {};
 
   if (opts.modernRouteId) {
     staticData.modernRouteId = opts.modernRouteId;
@@ -276,7 +290,7 @@ function createRouteStaticData(opts: {
     staticData.modernRouteAction = opts.modernRouteAction;
   }
 
-  return Object.keys(staticData).length > 0 ? staticData : undefined;
+  return staticData;
 }
 
 function modernLoaderToTanstack<TLoader extends (args: any) => any>(

package/dist/cjs/router/cli/code/templates.js

@@ -211,16 +211,9 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
                     webpackChunkName: true
                 });
                 component = 'string' === ssrMode ? `loadable(${lazyImport})` : `lazy(${lazyImport})`;
-            } else if ('string' === ssrMode) {
+            } else {
                 components.push(route._component);
                 component = `component_${components.length - 1}`;
-            } else {
-                lazyImport = createLazyImport({
-                    componentPath: route._component,
-                    routeId: route.id,
-                    eager: true
-                });
-                component = `lazy(${lazyImport})`;
             }
         } else if (route._component) if (splitRouteChunks) {
             lazyImport = `() => import('${route._component}')`;

package/dist/cjs/router/runtime/tanstack/plugin.js

@@ -37,6 +37,7 @@ const external_hooks_js_namespaceObject = require("../hooks.js");
 const external_lifecycle_js_namespaceObject = require("../lifecycle.js");
 const external_utils_js_namespaceObject = require("../utils.js");
 const external_basepathRewrite_js_namespaceObject = require("./basepathRewrite.js");
+const external_prefetchLink_js_namespaceObject = require("./prefetchLink.js");
 const external_routeTree_js_namespaceObject = require("./routeTree.js");
 const client_js_namespaceObject = require("./rsc/client.js");
 const BLOCKING_SUBSCRIBE_SYMBOL = Symbol.for('@modern-js/plugin-runtime:tanstack-blocking-subscribe');
@@ -98,6 +99,7 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                     }
                 }
                 context.router = {
+                    Link: external_prefetchLink_js_namespaceObject.Link,
                     useMatches: react_router_namespaceObject.useMatches,
                     useLocation: react_router_namespaceObject.useLocation,
                     useNavigate: react_router_namespaceObject.useNavigate,