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

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

@@ -37,6 +37,9 @@ 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_hydrationBoundary_js_namespaceObject = require("./hydrationBoundary.js");
+const external_outlet_js_namespaceObject = require("./outlet.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');
@@ -66,6 +69,85 @@ function wrapRouterSubscribeWithBlockState(router, getBlockNavState) {
     };
     target[BLOCKING_SUBSCRIBE_SYMBOL] = true;
 }
+const routerHydrationRecords = new WeakMap();
+const routeModulesKey = '_routeModules';
+function pickRouteModuleComponent(routeModule, seen = new Set()) {
+    if ('function' == typeof routeModule || routeModule && 'object' == typeof routeModule && '$$typeof' in routeModule) return routeModule;
+    if (!routeModule || 'object' != typeof routeModule) return;
+    if (seen.has(routeModule)) return;
+    seen.add(routeModule);
+    const module = routeModule;
+    for (const candidate of [
+        module.default,
+        module.Component
+    ]){
+        const component = pickRouteModuleComponent(candidate, seen);
+        if (component) return component;
+    }
+}
+function getCachedRouteModule(routeId) {
+    if ("u" < typeof window) return;
+    return window[routeModulesKey]?.[routeId];
+}
+async function preloadHydratedRouteComponents(router) {
+    const preloadableRouter = router;
+    const routesById = preloadableRouter.routesById || {};
+    const matches = preloadableRouter.stores.matches.get();
+    await Promise.all(matches.map((match)=>{
+        if (!match.routeId) return;
+        const route = routesById[match.routeId];
+        const component = route?.options?.component;
+        const preload = component?.load || component?.preload;
+        if ('function' != typeof preload) return;
+        return Promise.resolve(preload.call(component)).then((routeModule)=>{
+            const modernRouteId = route?.options?.staticData?.modernRouteId;
+            const resolvedComponent = pickRouteModuleComponent(modernRouteId && getCachedRouteModule(modernRouteId) || routeModule);
+            if (resolvedComponent && modernRouteId) route.options.component = (0, external_outlet_js_namespaceObject.withModernRouteMatchContext)(resolvedComponent, modernRouteId);
+        });
+    }));
+}
+function getTanstackSsrHydrationRecord(router) {
+    let hydrationRecord = routerHydrationRecords.get(router);
+    if (!hydrationRecord) {
+        hydrationRecord = {
+            promise: Promise.resolve(),
+            status: 'pending'
+        };
+        routerHydrationRecords.set(router, hydrationRecord);
+        try {
+            hydrationRecord.promise = (0, client_namespaceObject.hydrate)(router).then(async (value)=>{
+                await preloadHydratedRouteComponents(router);
+                return value;
+            }).then((value)=>{
+                hydrationRecord.status = 'fulfilled';
+                return value;
+            }, (error)=>{
+                hydrationRecord.status = 'rejected';
+                hydrationRecord.error = error;
+                throw error;
+            });
+        } catch (error) {
+            hydrationRecord.status = 'rejected';
+            hydrationRecord.error = error;
+            hydrationRecord.promise = Promise.reject(error);
+            hydrationRecord.promise.catch(()=>{});
+        }
+    }
+    return hydrationRecord;
+}
+function getTanstackSsrHydrationPromise(router) {
+    return getTanstackSsrHydrationRecord(router).promise;
+}
+function hasTanstackSsrHydrationRecord(router) {
+    return routerHydrationRecords.has(router);
+}
+function ModernRouterClient({ router }) {
+    const hydrationRecord = getTanstackSsrHydrationRecord(router);
+    if ('rejected' === hydrationRecord.status) throw hydrationRecord.error;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_router_namespaceObject.RouterProvider, {
+        router: router
+    });
+}
 function stripSyntheticNotFoundRoute(routes) {
     return routes.filter((route)=>!('*' === route.path && !route.id && !route.loader)).map((route)=>{
         if (!route.children?.length) return route;
@@ -84,9 +166,94 @@ const tanstackRouterPlugin = (userConfig = {})=>({
             onBeforeHydrateRouter: external_hooks_js_namespaceObject.onBeforeHydrateRouter
         },
         setup: (api)=>{
-            api.onBeforeRender((context)=>{
+            const hooks = api.getHooks();
+            let cachedRouteObjects;
+            let cachedRouteTree = null;
+            let cachedRouter = null;
+            let cachedRouterBasepath = null;
+            const getMergedConfig = ()=>{
                 const pluginConfig = api.getRuntimeConfig();
-                const mergedConfig = (0, merge_namespaceObject.merge)(pluginConfig.router || {}, userConfig);
+                return (0, merge_namespaceObject.merge)(pluginConfig.router || {}, userConfig);
+            };
+            const getRouteObjects = ()=>{
+                if (void 0 !== cachedRouteObjects) return cachedRouteObjects;
+                const mergedConfig = getMergedConfig();
+                const { routesConfig, createRoutes } = mergedConfig;
+                const finalRouteConfig = {
+                    routes: (0, index_js_namespaceObject.getGlobalRoutes)(),
+                    globalApp: (0, index_js_namespaceObject.getGlobalLayoutApp)(),
+                    ...routesConfig
+                };
+                const routeObjects = createRoutes ? createRoutes() : (0, external_utils_js_namespaceObject.createRouteObjectsFromConfig)({
+                    routesConfig: finalRouteConfig
+                }) || [];
+                const normalizedRouteObjects = createRoutes ? routeObjects : stripSyntheticNotFoundRoute(routeObjects);
+                cachedRouteObjects = hooks.modifyRoutes.call(normalizedRouteObjects);
+                return cachedRouteObjects;
+            };
+            const getRouteTree = ()=>{
+                if (cachedRouteTree) return cachedRouteTree;
+                const routeObjects = getRouteObjects();
+                if (!routeObjects.length) return null;
+                cachedRouteTree = (0, external_routeTree_js_namespaceObject.createRouteTreeFromRouteObjects)(routeObjects);
+                return cachedRouteTree;
+            };
+            const selectBasePath = (pathname)=>{
+                const { serverBase = [] } = getMergedConfig();
+                const match = serverBase.find((baseUrl)=>isSegmentPrefix(pathname, baseUrl));
+                return match || '/';
+            };
+            const getClientBasename = (runtimeContext)=>{
+                const { basename = '' } = getMergedConfig();
+                const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, '/');
+                return '/' === baseUrl ? (0, external_utils_js_namespaceObject.urlJoin)(baseUrl, runtimeContext._internalRouterBaseName || basename || '') : baseUrl;
+            };
+            const getRouter = (runtimeContext, _basename)=>{
+                const routeTree = getRouteTree();
+                if (!routeTree) return null;
+                const lifecycleContext = {
+                    framework: 'tanstack',
+                    phase: 'client-create',
+                    routes: getRouteObjects(),
+                    runtimeContext,
+                    basename: _basename
+                };
+                hooks.onBeforeCreateRouter.call(lifecycleContext);
+                if (cachedRouter && cachedRouterBasepath === _basename) {
+                    wrapRouterSubscribeWithBlockState(cachedRouter, runtimeContext.unstable_getBlockNavState);
+                    hooks.onAfterCreateRouter.call({
+                        ...lifecycleContext,
+                        router: cachedRouter,
+                        runtimeContext
+                    });
+                    return cachedRouter;
+                }
+                const mergedConfig = getMergedConfig();
+                const { supportHtml5History = true } = mergedConfig;
+                const history = supportHtml5History ? (0, react_router_namespaceObject.createBrowserHistory)() : (0, react_router_namespaceObject.createHashHistory)();
+                const rewrite = (0, external_basepathRewrite_js_namespaceObject.createModernBasepathRewrite)(_basename);
+                const serializationAdapters = (0, index_js_namespaceObject.getGlobalEnableRsc)() ? (0, client_js_namespaceObject.getTanstackRscSerializationAdapters)() : void 0;
+                cachedRouter = (0, react_router_namespaceObject.createRouter)({
+                    routeTree,
+                    basepath: '/',
+                    rewrite,
+                    history,
+                    context: {},
+                    ...serializationAdapters ? {
+                        serializationAdapters
+                    } : {}
+                });
+                cachedRouterBasepath = _basename;
+                wrapRouterSubscribeWithBlockState(cachedRouter, runtimeContext.unstable_getBlockNavState);
+                hooks.onAfterCreateRouter.call({
+                    ...lifecycleContext,
+                    router: cachedRouter,
+                    runtimeContext
+                });
+                return cachedRouter;
+            };
+            api.onBeforeRender(async (context)=>{
+                const mergedConfig = getMergedConfig();
                 if ("u" > typeof window && window._SSR_DATA && mergedConfig.unstable_reloadOnURLMismatch) {
                     const { ssrContext } = context;
                     const currentPathname = (0, url_namespaceObject.normalizePathname)(window.location.pathname);
@@ -98,96 +265,32 @@ 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,
                     useRouter: react_router_namespaceObject.useRouter
                 };
+                const hasSSRBootstrap = "u" > typeof window && Boolean(window.$_TSR);
+                if (hasSSRBootstrap && getRouteObjects().length) {
+                    const runtimeContext = context;
+                    const router = getRouter(runtimeContext, getClientBasename(runtimeContext));
+                    if (router) await getTanstackSsrHydrationPromise(router);
+                }
             });
             api.wrapRoot((App)=>{
-                const mergedConfig = (0, merge_namespaceObject.merge)(api.getRuntimeConfig().router || {}, userConfig);
-                const { serverBase = [], supportHtml5History = true, basename = '', routesConfig, createRoutes } = mergedConfig;
-                const finalRouteConfig = {
-                    routes: (0, index_js_namespaceObject.getGlobalRoutes)(),
-                    globalApp: (0, index_js_namespaceObject.getGlobalLayoutApp)(),
-                    ...routesConfig
-                };
-                if (!finalRouteConfig.routes && !createRoutes) return App;
-                const hooks = api.getHooks();
-                let cachedRouteObjects;
-                const getRouteObjects = ()=>{
-                    if (void 0 !== cachedRouteObjects) return cachedRouteObjects;
-                    const routeObjects = createRoutes ? createRoutes() : (0, external_utils_js_namespaceObject.createRouteObjectsFromConfig)({
-                        routesConfig: finalRouteConfig
-                    }) || [];
-                    const normalizedRouteObjects = createRoutes ? routeObjects : stripSyntheticNotFoundRoute(routeObjects);
-                    cachedRouteObjects = hooks.modifyRoutes.call(normalizedRouteObjects);
-                    return cachedRouteObjects;
-                };
-                const selectBasePath = (pathname)=>{
-                    const match = serverBase.find((baseUrl)=>isSegmentPrefix(pathname, baseUrl));
-                    return match || '/';
-                };
-                let cachedRouteTree = null;
-                let cachedRouter = null;
-                let cachedRouterBasepath = null;
+                if (!getRouteObjects().length) return App;
                 const RouterWrapper = ()=>{
                     const runtimeContext = (0, external_react_namespaceObject.useContext)(index_js_namespaceObject.InternalRuntimeContext);
-                    const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, '/');
-                    const _basename = '/' === baseUrl ? (0, external_utils_js_namespaceObject.urlJoin)(baseUrl, runtimeContext._internalRouterBaseName || basename || '') : baseUrl;
-                    const routeTree = (0, external_react_namespaceObject.useMemo)(()=>{
-                        if (cachedRouteTree) return cachedRouteTree;
-                        const routeObjects = getRouteObjects();
-                        if (!routeObjects.length) return null;
-                        cachedRouteTree = (0, external_routeTree_js_namespaceObject.createRouteTreeFromRouteObjects)(routeObjects);
-                        return cachedRouteTree;
-                    }, []);
+                    const _basename = getClientBasename(runtimeContext);
+                    const routeTree = (0, external_react_namespaceObject.useMemo)(()=>getRouteTree(), []);
                     if (!routeTree) return App ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {}) : null;
-                    const router = (0, external_react_namespaceObject.useMemo)(()=>{
-                        const lifecycleContext = {
-                            framework: 'tanstack',
-                            phase: 'client-create',
-                            routes: getRouteObjects(),
-                            runtimeContext,
-                            basename: _basename
-                        };
-                        hooks.onBeforeCreateRouter.call(lifecycleContext);
-                        if (cachedRouter && cachedRouterBasepath === _basename) {
-                            wrapRouterSubscribeWithBlockState(cachedRouter, runtimeContext.unstable_getBlockNavState);
-                            hooks.onAfterCreateRouter.call({
-                                ...lifecycleContext,
-                                router: cachedRouter,
-                                runtimeContext
-                            });
-                            return cachedRouter;
-                        }
-                        const history = supportHtml5History ? (0, react_router_namespaceObject.createBrowserHistory)() : (0, react_router_namespaceObject.createHashHistory)();
-                        const rewrite = (0, external_basepathRewrite_js_namespaceObject.createModernBasepathRewrite)(_basename);
-                        const serializationAdapters = (0, index_js_namespaceObject.getGlobalEnableRsc)() ? (0, client_js_namespaceObject.getTanstackRscSerializationAdapters)() : void 0;
-                        cachedRouter = (0, react_router_namespaceObject.createRouter)({
-                            routeTree,
-                            basepath: '/',
-                            rewrite,
-                            history,
-                            context: {},
-                            ...serializationAdapters ? {
-                                serializationAdapters
-                            } : {}
-                        });
-                        cachedRouterBasepath = _basename;
-                        wrapRouterSubscribeWithBlockState(cachedRouter, runtimeContext.unstable_getBlockNavState);
-                        hooks.onAfterCreateRouter.call({
-                            ...lifecycleContext,
-                            router: cachedRouter,
-                            runtimeContext
-                        });
-                        return cachedRouter;
-                    }, [
+                    const router = (0, external_react_namespaceObject.useMemo)(()=>getRouter(runtimeContext, _basename), [
                         _basename,
                         routeTree,
-                        supportHtml5History,
                         runtimeContext
                     ]);
+                    if (!router) return App ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {}) : null;
                     const runtimeState = (0, external_lifecycle_js_namespaceObject.applyRouterRuntimeState)(runtimeContext, {
                         framework: 'tanstack',
                         basename: _basename,
@@ -201,30 +304,29 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                         basename: _basename,
                         router
                     };
-                    const hasSSRBootstrap = "u" > typeof window && Boolean(window.$_TSR);
-                    if (hasSSRBootstrap) hooks.onBeforeHydrateRouter.call({
+                    const hasSSRBootstrap = "u" > typeof window && (Boolean(window.$_TSR) || hasTanstackSsrHydrationRecord(router));
+                    const needsRouterClient = hasSSRBootstrap;
+                    if (needsRouterClient) hooks.onBeforeHydrateRouter.call({
                         ...lifecycleContext,
                         phase: 'hydrate',
                         router,
                         runtimeContext: runtimeState
                     });
-                    const RouterContent = hasSSRBootstrap ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Suspense, {
-                        fallback: null,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(client_namespaceObject.RouterClient, {
-                            router: router
-                        })
+                    const RouterContent = needsRouterClient ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ModernRouterClient, {
+                        router: router
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_router_namespaceObject.RouterProvider, {
                         router: router
                     });
-                    if (hasSSRBootstrap) hooks.onAfterHydrateRouter.call({
+                    const HydratableRouterContent = (0, external_hydrationBoundary_js_namespaceObject.wrapTanstackSsrHydrationBoundary)(RouterContent, hasSSRBootstrap);
+                    if (needsRouterClient) hooks.onAfterHydrateRouter.call({
                         ...lifecycleContext,
                         phase: 'hydrate',
                         router,
                         runtimeContext: runtimeState
                     });
                     return App ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {
-                        children: RouterContent
-                    }) : RouterContent;
+                        children: HydratableRouterContent
+                    }) : HydratableRouterContent;
                 };
                 return RouterWrapper;
             });

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

@@ -38,6 +38,7 @@ const index_js_namespaceObject = require("../../../core/context/index.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_hydrationBoundary_js_namespaceObject = require("./hydrationBoundary.js");
 const external_routeTree_js_namespaceObject = require("./routeTree.js");
 function isPreloadableRouteComponent(component) {
     if (!component || 'function' != typeof component) return false;
@@ -65,13 +66,6 @@ async function preloadMatchedRouteComponents(tanstackRouter) {
         ]);
     }));
 }
-async function waitForRouterSerialization(tanstackRouter) {
-    const serverSsr = tanstackRouter.serverSsr;
-    if (!serverSsr || 'function' != typeof serverSsr.onSerializationFinished || serverSsr.isSerializationFinished?.()) return;
-    await new Promise((resolve)=>{
-        serverSsr.onSerializationFinished?.(resolve);
-    });
-}
 function htmlEscapeAttr(value) {
     return value.replace(/&/g, '&').replace(/"/g, '"');
 }
@@ -217,7 +211,6 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                 await preloadMatchedRouteComponents(serverRouter);
                 context.ssrContext?.response.status(tanstackRouter.state.statusCode);
                 await serverRouter.serverSsr?.dehydrate?.();
-                await waitForRouterSerialization(serverRouter);
                 const ssrScriptTags = serverRouter.serverSsr?.takeBufferedScripts?.();
                 const hydrationScripts = routerManagedTagsToHtml(ssrScriptTags);
                 const matchedRouteIds = (0, external_routeTree_js_namespaceObject.getModernRouteIdsFromMatches)(serverRouter);
@@ -255,12 +248,9 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                         if (!router) return App ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {
                             ...props
                         }) : null;
-                        const routerWrapper = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Suspense, {
-                            fallback: null,
-                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_router_namespaceObject.RouterProvider, {
-                                router: router
-                            })
-                        });
+                        const routerWrapper = (0, external_hydrationBoundary_js_namespaceObject.wrapTanstackSsrHydrationBoundary)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_router_namespaceObject.RouterProvider, {
+                            router: router
+                        }), true);
                         return App ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(App, {
                             children: routerWrapper
                         }) : routerWrapper;

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

@@ -29,13 +29,19 @@ __webpack_require__.d(__webpack_exports__, {
     getModernRouteIdsFromMatches: ()=>getModernRouteIdsFromMatches
 });
 const react_router_namespaceObject = require("@tanstack/react-router");
+const external_react_namespaceObject = require("react");
 const external_DefaultNotFound_js_namespaceObject = require("../DefaultNotFound.js");
+const external_outlet_js_namespaceObject = require("./outlet.js");
 function createTanstackRoute(options) {
     return (0, react_router_namespaceObject.createRoute)(options);
 }
 function createTanstackRootRoute(options) {
     return (0, react_router_namespaceObject.createRootRoute)(options);
 }
+function wrapRouteComponentWithModernContext(route, component, routeId) {
+    const routeMatchId = routeId || route.id;
+    if (component && routeMatchId) route.options.component = (0, external_outlet_js_namespaceObject.withModernRouteMatchContext)(component, routeMatchId);
+}
 function toTanstackPath(pathname) {
     return pathname.split('/').map((segment)=>{
         if (!segment) return segment;
@@ -73,6 +79,40 @@ function isModernDeferredData(value) {
 function normalizeModernLoaderResult(result) {
     return isModernDeferredData(result) ? result.data : result;
 }
+function pickRouteModuleComponent(routeModule, seen = new Set()) {
+    if ('function' == typeof routeModule || routeModule && 'object' == typeof routeModule && '$$typeof' in routeModule) return routeModule;
+    if (!routeModule || 'object' != typeof routeModule) return;
+    if (seen.has(routeModule)) return;
+    seen.add(routeModule);
+    const module = routeModule;
+    for (const candidate of [
+        module.default,
+        module.Component
+    ]){
+        const component = pickRouteModuleComponent(candidate, seen);
+        if (component) return component;
+    }
+}
+function createServerLazyImportComponent(lazyImport, fallbackComponent) {
+    if ("u" > typeof document) return fallbackComponent;
+    let resolvedComponent;
+    let pendingLoad;
+    const load = async ()=>{
+        if (resolvedComponent) return resolvedComponent;
+        const routeModule = await lazyImport();
+        const component = pickRouteModuleComponent(routeModule);
+        if (component) resolvedComponent = component;
+        return resolvedComponent;
+    };
+    const Component = (props)=>{
+        if (resolvedComponent) return (0, external_react_namespaceObject.createElement)(resolvedComponent, props);
+        pendingLoad ||= load();
+        throw pendingLoad;
+    };
+    Component.load = load;
+    Component.preload = load;
+    return Component;
+}
 function throwTanstackRedirect(location) {
     const target = location || '/';
     try {
@@ -141,7 +181,7 @@ function wrapModernLoader(modernRoute, modernLoader, revalidationState) {
             const signal = ctx?.abortController?.signal || ctx?.signal || new AbortController().signal;
             const baseRequest = ctx?.context?.request instanceof Request ? ctx.context.request : void 0;
             const href = 'string' == typeof ctx?.location ? ctx.location : ctx?.location?.publicHref || ctx?.location?.href || ctx?.location?.url?.href || '';
-            const request = baseRequest ? new Request(baseRequest, {
+            const request = void 0 !== baseRequest ? new Request(baseRequest, {
                 signal
             }) : createModernRequest(href, signal);
             const params = mapParamsForModernLoader({
@@ -204,7 +244,7 @@ function wrapRouteObjectLoader(route, revalidationState) {
             const signal = ctx?.abortController?.signal || ctx?.signal || new AbortController().signal;
             const baseRequest = ctx?.context?.request instanceof Request ? ctx.context.request : void 0;
             const href = 'string' == typeof ctx?.location ? ctx.location : ctx?.location?.publicHref || ctx?.location?.href || ctx?.location?.url?.href || '';
-            const request = baseRequest ? new Request(baseRequest, {
+            const request = void 0 !== baseRequest ? new Request(baseRequest, {
                 signal
             }) : createModernRequest(href, signal);
             const params = mapParamsForRouteObjectLoader({
@@ -239,10 +279,18 @@ function wrapRouteObjectLoader(route, revalidationState) {
 }
 function toRouteComponent(routeObject) {
     const route = routeObject;
+    const lazyImport = 'function' == typeof route.lazyImport ? route.lazyImport : void 0;
+    const fallbackComponent = route.Component ? route.Component : route.element ? ()=>route.element : void 0;
+    if (lazyImport && fallbackComponent) return createServerLazyImportComponent(lazyImport, fallbackComponent);
     if (route.Component) return route.Component;
     const element = route.element;
     if (element) return ()=>element;
 }
+function toModernRouteComponent(route) {
+    const component = route.component || void 0;
+    if ('function' == typeof route.lazyImport && component) return createServerLazyImportComponent(route.lazyImport, component);
+    return component;
+}
 function toErrorComponent(routeObject) {
     const route = routeObject;
     if (route.ErrorBoundary) return route.ErrorBoundary;
@@ -280,12 +328,12 @@ function createRouteFromRouteObject(opts) {
     const shouldRevalidate = modernRouteObject.shouldRevalidate;
     const shouldReload = createModernShouldReload(shouldRevalidate, revalidationState);
     const stableFallbackId = routeObject.id || modernRouteObject.file || routeObject.path || 'pathless';
+    const component = toRouteComponent(routeObject);
     const base = {
         getParentRoute: ()=>parent,
-        component: toRouteComponent(routeObject),
+        component,
         pendingComponent: toPendingComponent(routeObject),
         errorComponent: toErrorComponent(routeObject),
-        wrapInSuspense: true,
         staticData: createRouteStaticData({
             modernRouteId: routeObject.id,
             modernRouteAction: modernRouteObject.action,
@@ -304,6 +352,7 @@ function createRouteFromRouteObject(opts) {
     if (isRouteObjectPathlessLayout(routeObject)) base.id = stableFallbackId;
     else base.path = routeObject.index ? '/' : toTanstackPath(routeObject.path || '');
     const route = createTanstackRoute(base);
+    wrapRouteComponentWithModernContext(route, component, routeObject.id);
     const children = routeObject.children;
     if (children && children.length > 0) {
         const childRoutes = children.map((child)=>createRouteFromRouteObject({
@@ -322,7 +371,7 @@ function createRouteFromModernRoute(opts) {
     const stableFallbackId = modernId || route._component || route.filename || route.data || ('function' == typeof route.loader ? route.id : void 0);
     const pendingComponent = route.loading || route.pendingComponent;
     const errorComponent = route.error || route.errorComponent;
-    const component = route.component;
+    const component = toModernRouteComponent(route);
     const modernLoader = route.loader;
     const modernAction = route.action;
     const modernShouldRevalidate = route.shouldRevalidate;
@@ -334,7 +383,6 @@ function createRouteFromModernRoute(opts) {
         component: component || void 0,
         pendingComponent: pendingComponent || void 0,
         errorComponent: errorComponent || void 0,
-        wrapInSuspense: true,
         staticData: createRouteStaticData({
             modernRouteId: modernId,
             modernRouteAction: modernAction,
@@ -356,6 +404,7 @@ function createRouteFromModernRoute(opts) {
         base.path = isIndexRoute ? '/' : toTanstackPath(rawPath || '');
     }
     const tanstackRoute = createTanstackRoute(base);
+    wrapRouteComponentWithModernContext(tanstackRoute, component, modernId);
     const children = route.children;
     if (children && children.length > 0) {
         const childRoutes = children.map((child)=>createRouteFromModernRoute({
@@ -368,7 +417,7 @@ function createRouteFromModernRoute(opts) {
 }
 function createRouteTreeFromModernRoutes(routes) {
     const rootModern = routes.find((r)=>r && 'nested' === r.type && r.isRoot);
-    const rootComponent = rootModern?.component;
+    const rootComponent = rootModern ? toModernRouteComponent(rootModern) : void 0;
     const pendingComponent = rootModern?.loading;
     const errorComponent = rootModern?.error;
     const rootLoader = rootModern?.loader;
@@ -381,7 +430,6 @@ function createRouteTreeFromModernRoutes(routes) {
         component: rootComponent || void 0,
         pendingComponent: pendingComponent || void 0,
         errorComponent: errorComponent || void 0,
-        wrapInSuspense: true,
         notFoundComponent: external_DefaultNotFound_js_namespaceObject.DefaultNotFound,
         staticData: createRouteStaticData({
             modernRouteId: rootModernId,
@@ -399,6 +447,7 @@ function createRouteTreeFromModernRoutes(routes) {
     if (rootShouldReload) rootRouteOptions.shouldReload = rootShouldReload;
     if (rootModern?.inValidSSRRoute) rootRouteOptions.ssr = false;
     const rootRoute = createTanstackRootRoute(rootRouteOptions);
+    if (rootComponent) rootRoute.options.component = (0, external_outlet_js_namespaceObject.withModernRouteMatchContext)(rootComponent, react_router_namespaceObject.rootRouteId);
     const topLevel = rootModern ? rootModern.children || [] : routes;
     const childRoutes = topLevel.map((child)=>createRouteFromModernRoute({
             parent: rootRoute,
@@ -415,11 +464,11 @@ function createRouteTreeFromRouteObjects(routes) {
     const rootRevalidationState = {};
     const rootShouldRevalidate = rootLikeRoute?.shouldRevalidate;
     const rootShouldReload = createModernShouldReload(rootShouldRevalidate, rootRevalidationState);
+    const rootComponent = rootLikeRoute ? toRouteComponent(rootLikeRoute) : void 0;
     const rootRouteOptions = {
-        component: rootLikeRoute ? toRouteComponent(rootLikeRoute) : void 0,
+        component: rootComponent,
         pendingComponent: rootLikeRoute ? toPendingComponent(rootLikeRoute) : void 0,
         errorComponent: rootLikeRoute ? toErrorComponent(rootLikeRoute) : void 0,
-        wrapInSuspense: true,
         notFoundComponent: external_DefaultNotFound_js_namespaceObject.DefaultNotFound,
         staticData: createRouteStaticData({
             modernRouteId: rootLikeRoute?.id,
@@ -437,6 +486,7 @@ function createRouteTreeFromRouteObjects(routes) {
     if (rootShouldReload) rootRouteOptions.shouldReload = rootShouldReload;
     if (rootLikeRoute?.inValidSSRRoute) rootRouteOptions.ssr = false;
     const rootRoute = createTanstackRootRoute(rootRouteOptions);
+    if (rootComponent) rootRoute.options.component = (0, external_outlet_js_namespaceObject.withModernRouteMatchContext)(rootComponent, react_router_namespaceObject.rootRouteId);
     const topLevel = rootLikeRoute ? [
         ...rootLikeRoute.children || [],
         ...routes.filter((route)=>route !== rootLikeRoute)
@@ -450,9 +500,11 @@ function createRouteTreeFromRouteObjects(routes) {
 }
 function getModernRouteIdsFromMatches(router) {
     const matches = router.state.matches || [];
+    const routesById = router.routesById;
     const ids = matches.map((match)=>{
-        const route = match.route;
-        return route?.options?.staticData?.modernRouteId;
+        const normalizedMatch = match;
+        const routeId = 'string' == typeof normalizedMatch.routeId ? normalizedMatch.routeId : void 0;
+        return normalizedMatch.route?.options?.staticData?.modernRouteId ?? (routeId ? routesById?.[routeId]?.options?.staticData?.modernRouteId : void 0);
     }).filter((id)=>'string' == typeof id);
     return Array.from(new Set(ids));
 }

package/dist/cjs/rsc/server.worker.js

@@ -0,0 +1,58 @@
+"use strict";
+var __webpack_modules__ = {
+    "@modern-js/render/rsc-worker" (module) {
+        module.exports = require("@modern-js/render/rsc-worker");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __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__);
+    var _modern_js_render_rsc_worker__rspack_import_0 = __webpack_require__("@modern-js/render/rsc-worker");
+    var __rspack_reexport = {};
+    for(const __rspack_import_key in _modern_js_render_rsc_worker__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_modern_js_render_rsc_worker__rspack_import_0[__rspack_import_key];
+    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
+})();
+for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});