@bleedingdev/modern-js-runtime 3.2.0-ultramodern.61 → 3.2.0-ultramodern.63

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

@@ -30,12 +30,14 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const defaultStorageKey = 'modernjs:boundary-debugger:enabled';
+const queryParamName = 'modern-boundaries';
+const boundarySelector = '[data-modern-boundary-id]';
 const defaultLabels = {
     cs: {
-        toggle: 'zobrazit hranice verticalů'
+        toggle: 'zobrazit hranice týmů'
     },
     en: {
-        toggle: 'show vertical boundaries'
+        toggle: 'show team boundaries'
     }
 };
 const palette = [
@@ -45,18 +47,64 @@ const palette = [
     '#7c8cff',
     '#29b6f6'
 ];
-const readEnabled = (storageKey, fallback)=>{
+const readStoredEnabled = (storageKey, fallback)=>{
     if ("u" < typeof window) return fallback;
-    const stored = window.localStorage.getItem(storageKey);
-    return null === stored ? fallback : 'true' === stored;
+    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';
 };
-function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, metadata, storageKey = defaultStorageKey }) {
+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] = (0, external_react_namespaceObject.useState)(false);
     const [enabled, setEnabled] = (0, external_react_namespaceObject.useState)(false);
     const [boxes, setBoxes] = (0, external_react_namespaceObject.useState)([]);
@@ -71,17 +119,18 @@ function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, me
         metadata
     ]);
     const language = mounted ? detectLanguage() : 'en';
-    const toggleLabel = labels[language]?.toggle ?? labels.en?.toggle ?? defaultLabels.en?.toggle ?? 'show vertical boundaries';
+    const toggleLabel = labels[language]?.toggle ?? labels.en?.toggle ?? defaultLabels.en?.toggle ?? 'show team boundaries';
     (0, external_react_namespaceObject.useEffect)(()=>{
         setMounted(true);
-        setEnabled(readEnabled(storageKey, enabledByDefault));
+        const queryOverride = readQueryEnabledOverride();
+        setEnabled(queryOverride ?? readStoredEnabled(storageKey, enabledByDefault));
     }, [
         enabledByDefault,
         storageKey
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!mounted) return;
-        window.localStorage.setItem(storageKey, String(enabled));
+        writeStoredEnabled(storageKey, enabled);
     }, [
         enabled,
         mounted,
@@ -90,28 +139,38 @@ function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, me
     (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;
+            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[index % palette.length];
-                return {
+                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: `${boundaryId}-${index}`,
-                    label: boundary?.label ?? boundaryId,
+                    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 document.querySelectorAll('[data-modern-boundary-id]'))resizeObserver?.observe(element);
+        for (const element of collectBoundaryElements(legacySelector))resizeObserver?.observe(element);
         const mutationObserver = new MutationObserver(readBoxes);
         mutationObserver.observe(document.body, {
             childList: true,
@@ -127,12 +186,14 @@ function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, me
         };
     }, [
         boundaries,
-        enabled
+        enabled,
+        legacySelector
     ]);
     if (!mounted) return null;
+    const shouldRenderToggle = 'visible' === controlMode || 'hidden-when-off' === controlMode && enabled;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("label", {
+            shouldRenderToggle ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("label", {
                 style: {
                     alignItems: 'center',
                     background: 'rgba(255, 255, 255, 0.96)',
@@ -159,7 +220,7 @@ function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, me
                         children: toggleLabel
                     })
                 ]
-            }),
+            }) : null,
             enabled ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 "aria-hidden": "true",
                 children: boxes.map((box)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -175,19 +236,35 @@ function BoundaryDebugger({ enabledByDefault = false, labels = defaultLabels, me
                             width: box.width,
                             zIndex: 2147482999
                         },
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
                             style: {
                                 background: box.color,
                                 borderRadius: 999,
                                 color: '#111827',
-                                font: '800 11px/1 system-ui, sans-serif',
+                                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: box.label
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    children: box.label
+                                }),
+                                box.detail ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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

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

@@ -0,0 +1,47 @@
+"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__, {
+    createFederatedCssLinks: ()=>createFederatedCssLinks
+});
+const external_utils_js_namespaceObject = require("./utils.js");
+const createFederatedCssLinks = (assets, options)=>{
+    if (!assets?.length) return '';
+    const seen = new Set(options.existingAssets || []);
+    const attributes = (0, external_utils_js_namespaceObject.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('');
+};
+exports.createFederatedCssLinks = __webpack_exports__.createFederatedCssLinks;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "createFederatedCssLinks"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -40,6 +40,7 @@ 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,7 +56,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 = external_react_helmet_default().renderStatic();
     const callbacks = [
         (0, external_helmet_js_namespaceObject.createReplaceHelemt)(helmetData),
@@ -65,6 +66,10 @@ 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;

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

@@ -40,6 +40,7 @@ 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");
@@ -49,7 +50,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 = external_react_helmet_default().renderStatic();
     const callbacks = [
         (0, external_helmet_js_namespaceObject.createReplaceHelemt)(helmetData),
@@ -59,6 +60,10 @@ 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;

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);
@@ -80,6 +80,7 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
                     runtimeContext,
                     config,
                     entryName,
+                    moduleFederationCssAssets,
                     styledComponentsStyleTags
                 }).then(({ shellAfter, shellBefore })=>{
                     const pendingScripts = [];
@@ -137,7 +138,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,14 +36,15 @@ 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, rscManifest, 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, {

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,6 +115,7 @@ function createRenderStreaming(createReadableStreamPromise) {
             runtimeContext,
             ssrConfig,
             entryName,
+            moduleFederationCssAssets,
             rscClientManifest: options.rscClientManifest,
             rscSSRManifest: options.rscSSRManifest,
             rscServerManifest: options.rscServerManifest,

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

@@ -58,7 +58,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,
@@ -74,6 +74,7 @@ const renderString = async (request, serverRoot, options)=>{
             runtimeContext,
             template: htmlTemplate,
             entryName,
+            moduleFederationCssAssets,
             chunkSet,
             config
         }),

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

@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 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 '';
@@ -76,20 +77,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)).concat(this.getMatchedRouteChunks());
+        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) {
@@ -124,19 +126,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;

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

@@ -116,10 +116,21 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
     const topLevel = rootModern ? rootModern.children || [] : routes;
     const imports = [];
     const statements = [];
+    const componentImportMap = new Map();
     const loaderImportMap = new Map();
     const usedRouteVarNames = new Set();
+    let componentIndex = 0;
     let loaderIndex = 0;
     let routeIndex = 0;
+    const getImportNameForComponent = (componentPath)=>{
+        if ('string' != typeof componentPath || 0 === componentPath.length) return null;
+        const existing = componentImportMap.get(componentPath);
+        if (existing) return existing;
+        const componentName = `component_${componentIndex++}`;
+        imports.push(`import ${componentName} from ${quote(componentPath)};`);
+        componentImportMap.set(componentPath, componentName);
+        return componentName;
+    };
     const getImportNamesForLoader = async (aliasedNoExtPath, inline, hasAction)=>{
         const key = `${inline ? 'inline' : 'default'}:${hasAction ? 'action' : 'loader'}:${aliasedNoExtPath}`;
         const existing = loaderImportMap.get(key);
@@ -176,6 +187,8 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
         const routeOpts = [
             `getParentRoute: () => ${parentVar},`
         ];
+        const componentName = getImportNameForComponent(route._component);
+        if (componentName) routeOpts.push(`component: ${componentName},`);
         if (isPathlessLayout(route)) {
             const id = route.id;
             routeOpts.push(`id: ${quote(id || 'pathless')},`);
@@ -213,6 +226,8 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
             route
         })));
     const rootOpts = [];
+    const rootComponentName = getImportNameForComponent(rootModern?._component);
+    if (rootComponentName) rootOpts.push(`component: ${rootComponentName},`);
     if (rootLoaderName) rootOpts.push(`loader: modernLoaderToTanstack({ hasSplat: false }, ${rootLoaderName}),`);
     const routerGenTs = `/* eslint-disable */
 // This file is auto-generated by Modern.js. Do not edit manually.