@bleedingdev/modern-js-runtime 3.2.0-ultramodern.11 → 3.2.0-ultramodern.110

package/dist/esm/router/runtime/PrefetchLink.mjs

@@ -10,45 +10,142 @@ function composeEventHandlers(theirHandler, ourHandler) {
     };
 }
 const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
-function usePrefetchBehavior(prefetch, theirElementProps) {
-    const [maybePrefetch, setMaybePrefetch] = react.useState(false);
+const DEFAULT_PREFETCH_BEHAVIOR = 'render';
+const DEFAULT_PRELOAD_BEHAVIOR = 'viewport';
+const INTENT_DELAY = 100;
+const VIEWPORT_ROOT_MARGIN = '200px';
+const MAX_CONCURRENT_WARMUPS = 4;
+const WARMUP_TTL = 30000;
+const SLOW_EFFECTIVE_TYPES = new Set([
+    'slow-2g',
+    '2g'
+]);
+const warmupCache = new Map();
+const warmupQueue = [];
+let activeWarmups = 0;
+const getWarmupTimestamp = ()=>performance.now();
+const getConnection = ()=>{
+    const nav = globalThis.navigator;
+    return nav?.connection || nav?.mozConnection || nav?.webkitConnection;
+};
+const shouldWarmupOnCurrentNetwork = ()=>{
+    const connection = getConnection();
+    if (connection?.saveData) return false;
+    if ('string' == typeof connection?.effectiveType && SLOW_EFFECTIVE_TYPES.has(connection.effectiveType)) return false;
+    return true;
+};
+const pruneWarmupCache = (now = getWarmupTimestamp())=>{
+    for (const [key, timestamp] of warmupCache)if (now - timestamp > WARMUP_TTL) warmupCache.delete(key);
+};
+const runNextWarmup = ()=>{
+    while(activeWarmups < MAX_CONCURRENT_WARMUPS && warmupQueue.length > 0){
+        const task = warmupQueue.shift();
+        if (task.cancelled) continue;
+        activeWarmups += 1;
+        task.run().catch((error)=>{
+            console.error(error);
+            warmupCache.delete(task.key);
+        }).finally(()=>{
+            activeWarmups -= 1;
+            runNextWarmup();
+        });
+    }
+};
+const scheduleWarmup = (key, run)=>{
+    if (!shouldWarmupOnCurrentNetwork()) return ()=>{};
+    pruneWarmupCache();
+    if (warmupCache.has(key)) return ()=>{};
+    warmupCache.set(key, getWarmupTimestamp());
+    const task = {
+        key,
+        run,
+        cancelled: false
+    };
+    warmupQueue.push(task);
+    runNextWarmup();
+    return ()=>{
+        task.cancelled = true;
+    };
+};
+const setRef = (ref, value)=>{
+    if (!ref) return;
+    if ('function' == typeof ref) return void ref(value);
+    try {
+        ref.current = value;
+    } catch  {}
+};
+const isDataWarmupEnabled = (route)=>{
+    const handle = route.handle;
+    return handle?.navigationWarmup?.data === true;
+};
+function usePrefetchBehavior(prefetch, preload, theirElementProps) {
+    const [maybeWarmup, setMaybeWarmup] = react.useState(false);
     const [shouldPrefetch, setShouldPrefetch] = react.useState(false);
+    const [shouldPreload, setShouldPreload] = react.useState(false);
+    const [viewportElement, setViewportElement] = react.useState(null);
     const { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;
     react.useEffect(()=>{
         if ('render' === prefetch) setShouldPrefetch(true);
+        if ('render' === preload) setShouldPreload(true);
     }, [
-        prefetch
+        prefetch,
+        preload
     ]);
     const setIntent = ()=>{
-        if ('intent' === prefetch) setMaybePrefetch(true);
+        if ('intent' === prefetch || 'intent' === preload) setMaybeWarmup(true);
     };
     const cancelIntent = ()=>{
-        if ('intent' === prefetch) {
-            setMaybePrefetch(false);
+        if ('intent' === prefetch || 'intent' === preload) {
+            setMaybeWarmup(false);
             setShouldPrefetch(false);
+            setShouldPreload(false);
         }
     };
     react.useEffect(()=>{
-        if (maybePrefetch) {
+        if (maybeWarmup) {
             const id = setTimeout(()=>{
-                setShouldPrefetch(true);
-            }, 100);
+                if ('intent' === prefetch) setShouldPrefetch(true);
+                if ('intent' === preload) setShouldPreload(true);
+            }, INTENT_DELAY);
             return ()=>{
                 clearTimeout(id);
             };
         }
     }, [
-        maybePrefetch
+        maybeWarmup,
+        prefetch,
+        preload
+    ]);
+    react.useEffect(()=>{
+        if (!viewportElement || 'viewport' !== prefetch && 'viewport' !== preload || "u" < typeof IntersectionObserver) return;
+        const observer = new IntersectionObserver((entries)=>{
+            if (!entries.some((entry)=>entry.isIntersecting)) return;
+            if ('viewport' === prefetch) setShouldPrefetch(true);
+            if ('viewport' === preload) setShouldPreload(true);
+            observer.disconnect();
+        }, {
+            rootMargin: VIEWPORT_ROOT_MARGIN
+        });
+        observer.observe(viewportElement);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        prefetch,
+        preload,
+        viewportElement
     ]);
     return [
         shouldPrefetch,
+        shouldPreload,
         {
             onFocus: composeEventHandlers(onFocus, setIntent),
             onBlur: composeEventHandlers(onBlur, cancelIntent),
             onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
             onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
             onTouchStart: composeEventHandlers(onTouchStart, setIntent)
-        }
+        },
+        setViewportElement
     ];
 }
 async function loadRouteModule(route, routeAssets) {
@@ -83,14 +180,34 @@ const getDataHref = (route, pathname, basename)=>{
     const url = getRequestUrl(path, id);
     return createDataHref(url.toString());
 };
-const PrefetchPageLinks = ({ path })=>{
+const PrefetchPageLinks = ({ path, includeData })=>{
     const { pathname } = path;
     const context = useContext(InternalRuntimeContext);
     const { routeManifest, routes } = context;
     const { routeAssets } = routeManifest || {};
-    const matches = Array.isArray(routes) ? matchRoutes(routes, pathname) : [];
-    if (Array.isArray(matches) && routeAssets) matches?.forEach((match)=>loadRouteModule(match.route, routeAssets));
-    if (!window._SSR_DATA) return null;
+    const allowNetworkWarmup = shouldWarmupOnCurrentNetwork();
+    const matches = useMemo(()=>Array.isArray(routes) ? matchRoutes(routes, pathname) : [], [
+        pathname,
+        routes
+    ]);
+    react.useEffect(()=>{
+        if (!allowNetworkWarmup || !Array.isArray(matches) || !routeAssets || !__webpack_chunk_load__) return;
+        const cancellations = matches.map((match)=>{
+            const routeId = match.route.id;
+            const routeAsset = routeId ? routeAssets[routeId] : void 0;
+            const chunkIds = routeAsset?.chunkIds;
+            if (!routeId || !Array.isArray(chunkIds) || 0 === chunkIds.length) return ()=>{};
+            return scheduleWarmup(`route-module:${routeId}:${chunkIds.join(',')}`, ()=>loadRouteModule(match.route, routeAssets));
+        });
+        return ()=>{
+            cancellations.forEach((cancel)=>cancel());
+        };
+    }, [
+        allowNetworkWarmup,
+        matches,
+        routeAssets
+    ]);
+    if (!allowNetworkWarmup || !includeData || !window._SSR_DATA) return null;
     return /*#__PURE__*/ jsx(PrefetchDataLinks, {
         matches: matches,
         path: path,
@@ -102,7 +219,7 @@ const PrefetchDataLinks = ({ matches, path, routeManifest })=>{
     const currentMatches = useMatches();
     const basename = useHref('/');
     const dataHrefs = useMemo(()=>matches?.filter((match, index)=>{
-            if (!match.route.loader || 'function' != typeof match.route.loader || 0 === match.route.loader.length) return false;
+            if (!isDataWarmupEnabled(match.route) || !match.route.loader || 'function' != typeof match.route.loader || 0 === match.route.loader.length) return false;
             if (match.route.shouldRevalidate) {
                 const currentUrl = new URL(location.pathname + location.search + location.hash, window.origin);
                 const nextUrl = new URL(pathname + search + hash, window.origin);
@@ -129,20 +246,35 @@ const PrefetchDataLinks = ({ matches, path, routeManifest })=>{
         children: dataHrefs
     });
 };
-const createPrefetchLink = (Link)=>/*#__PURE__*/ react.forwardRef(({ to, prefetch = 'none', ...props }, forwardedRef)=>{
+const normalizePreloadBehavior = (preload, prefetch)=>{
+    if (false === preload || 'none' === preload) return 'none';
+    if (void 0 !== preload) return preload;
+    if ('none' === prefetch) return 'none';
+    return DEFAULT_PRELOAD_BEHAVIOR;
+};
+const createPrefetchLink = (Link)=>/*#__PURE__*/ react.forwardRef(({ to, prefetch = DEFAULT_PREFETCH_BEHAVIOR, preload, ...props }, forwardedRef)=>{
         const isAbsolute = 'string' == typeof to && ABSOLUTE_URL_REGEX.test(to);
-        const [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(prefetch, props);
+        const resolvedPreload = normalizePreloadBehavior(preload, prefetch);
+        const [shouldPrefetch, shouldPreload, prefetchHandlers, setViewportElement] = usePrefetchBehavior(prefetch, resolvedPreload, props);
+        const setAnchorRef = react.useCallback((element)=>{
+            setViewportElement(element);
+            setRef(forwardedRef, element);
+        }, [
+            forwardedRef,
+            setViewportElement
+        ]);
         const resolvedPath = useResolvedPath(to);
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(Link, {
-                    ref: forwardedRef,
+                    ref: setAnchorRef,
                     to: to,
                     ...props,
                     ...prefetchHandlers
                 }),
-                shouldPrefetch && __webpack_chunk_load__ && !isAbsolute ? /*#__PURE__*/ jsx(PrefetchPageLinks, {
-                    path: resolvedPath
+                (shouldPrefetch || shouldPreload) && !isAbsolute ? /*#__PURE__*/ jsx(PrefetchPageLinks, {
+                    path: resolvedPath,
+                    includeData: shouldPrefetch
                 }) : null
             ]
         });

package/dist/esm/router/runtime/tanstack/hydrationBoundary.mjs

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+function wrapTanstackSsrHydrationBoundary(routerContent, shouldWrap) {
+    if (shouldWrap) return /*#__PURE__*/ jsx(Suspense, {
+        fallback: null,
+        children: routerContent
+    });
+    return routerContent;
+}
+export { wrapTanstackSsrHydrationBoundary };

package/dist/esm/router/runtime/tanstack/outlet.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Outlet } from "@tanstack/react-router";
+import { createElement, memo } from "react";
+const outlet_Outlet = /*#__PURE__*/ memo(function() {
+    return /*#__PURE__*/ jsx(Outlet, {});
+});
+function withModernRouteMatchContext(component, _routeId) {
+    if (null == component) return component;
+    const Component = component;
+    const WrappedRouteComponent = (props)=>/*#__PURE__*/ createElement(Component, props);
+    const preloadable = component;
+    if ('function' == typeof preloadable.load) WrappedRouteComponent.load = preloadable.load.bind(preloadable);
+    if ('function' == typeof preloadable.preload) WrappedRouteComponent.preload = preloadable.preload.bind(preloadable);
+    else if ('function' == typeof preloadable.load) WrappedRouteComponent.preload = WrappedRouteComponent.load;
+    return WrappedRouteComponent;
+}
+export { outlet_Outlet as Outlet, withModernRouteMatchContext };

package/dist/esm/router/runtime/tanstack/plugin.mjs

@@ -2,15 +2,18 @@ import { jsx } from "react/jsx-runtime";
 import { merge } from "@modern-js/runtime-utils/merge";
 import { normalizePathname } from "@modern-js/runtime-utils/url";
 import { RouterProvider, createBrowserHistory, createHashHistory, createRouter, useLocation, useMatches, useNavigate, useRouter } from "@tanstack/react-router";
-import { RouterClient } from "@tanstack/react-router/ssr/client";
+import { hydrate } from "@tanstack/react-router/ssr/client";
+import { useContext, useMemo } from "react";
 import { InternalRuntimeContext, getGlobalEnableRsc, getGlobalLayoutApp, getGlobalRoutes } from "../../../core/context/index.mjs";
 import { onAfterCreateRouter, onAfterHydrateRouter, onBeforeCreateRouter, onBeforeHydrateRouter } from "../hooks.mjs";
 import { applyRouterRuntimeState } from "../lifecycle.mjs";
 import { createRouteObjectsFromConfig, urlJoin } from "../utils.mjs";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
+import { withModernRouteMatchContext } from "./outlet.mjs";
+import { Link } from "./prefetchLink.mjs";
 import { createRouteTreeFromRouteObjects } from "./routeTree.mjs";
 import { getTanstackRscSerializationAdapters } from "./rsc/client.mjs";
-import * as __rspack_external_react from "react";
 const BLOCKING_SUBSCRIBE_SYMBOL = Symbol.for('@modern-js/plugin-runtime:tanstack-blocking-subscribe');
 const BLOCKING_STATE_SYMBOL = Symbol.for('@modern-js/plugin-runtime:tanstack-blocking-state');
 function normalizeBase(b) {
@@ -38,6 +41,82 @@ 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];
+}
+function preloadHydratedRouteComponents(router) {
+    const preloadableRouter = router;
+    const routesById = preloadableRouter.routesById || {};
+    const matches = preloadableRouter.stores.matches.get();
+    return Promise.all(matches.map((match)=>{
+        if (void 0 === match.routeId || '' === 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 cachedRouteModule = 'string' == typeof modernRouteId && '' !== modernRouteId ? getCachedRouteModule(modernRouteId) : void 0;
+            const resolvedComponent = pickRouteModuleComponent(cachedRouteModule ?? routeModule);
+            if (void 0 !== resolvedComponent && 'string' == typeof modernRouteId && '' !== modernRouteId) route.options.component = withModernRouteMatchContext(resolvedComponent, modernRouteId);
+        });
+    })).then(()=>void 0);
+}
+function getTanstackSsrHydrationRecord(router) {
+    const existingHydrationRecord = routerHydrationRecords.get(router);
+    if (void 0 !== existingHydrationRecord) return existingHydrationRecord;
+    const hydrationRecord = {
+        promise: Promise.resolve(),
+        status: 'pending'
+    };
+    routerHydrationRecords.set(router, hydrationRecord);
+    try {
+        hydrationRecord.promise = hydrate(router).then((value)=>preloadHydratedRouteComponents(router).then(()=>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__*/ jsx(RouterProvider, {
+        router: router
+    });
+}
 function stripSyntheticNotFoundRoute(routes) {
     return routes.filter((route)=>!('*' === route.path && !route.id && !route.loader)).map((route)=>{
         if (!route.children?.length) return route;
@@ -56,110 +135,131 @@ const tanstackRouterPlugin = (userConfig = {})=>({
             onBeforeHydrateRouter: 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 = merge(pluginConfig.router || {}, userConfig);
-                if ("u" > typeof window && window._SSR_DATA && mergedConfig.unstable_reloadOnURLMismatch) {
+                return merge(pluginConfig.router || {}, userConfig);
+            };
+            const getRouteObjects = ()=>{
+                if (void 0 !== cachedRouteObjects) return cachedRouteObjects;
+                const mergedConfig = getMergedConfig();
+                const { routesConfig, createRoutes } = mergedConfig;
+                const finalRouteConfig = {
+                    routes: getGlobalRoutes(),
+                    globalApp: getGlobalLayoutApp(),
+                    ...routesConfig
+                };
+                const routeObjects = createRoutes ? createRoutes() : 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 = 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 ? 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 ? createBrowserHistory() : createHashHistory();
+                const rewrite = createModernBasepathRewrite(_basename);
+                const serializationAdapters = getGlobalEnableRsc() ? getTanstackRscSerializationAdapters() : void 0;
+                cachedRouter = 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((context)=>{
+                const mergedConfig = getMergedConfig();
+                if ("u" > typeof window && void 0 !== window._SSR_DATA && mergedConfig.unstable_reloadOnURLMismatch) {
                     const { ssrContext } = context;
                     const currentPathname = normalizePathname(window.location.pathname);
-                    const initialPathname = ssrContext?.request?.pathname && normalizePathname(ssrContext.request.pathname);
-                    if (initialPathname && initialPathname !== currentPathname) {
+                    const initialPathname = 'string' == typeof ssrContext?.request?.pathname ? normalizePathname(ssrContext.request.pathname) : void 0;
+                    if (void 0 !== initialPathname && '' !== initialPathname && initialPathname !== currentPathname) {
                         const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
                         console.error(errorMsg);
                         window.location.reload();
                     }
                 }
                 context.router = {
+                    Link: Link,
                     useMatches: useMatches,
                     useLocation: useLocation,
                     useNavigate: useNavigate,
                     useRouter: useRouter
                 };
+                const hasSSRBootstrap = "u" > typeof window && Boolean(window.$_TSR);
+                if (hasSSRBootstrap && getRouteObjects().length > 0) {
+                    const runtimeContext = context;
+                    const router = getRouter(runtimeContext, getClientBasename(runtimeContext));
+                    if (null != router) return getTanstackSsrHydrationPromise(router).then(()=>void 0);
+                }
             });
             api.wrapRoot((App)=>{
-                const mergedConfig = merge(api.getRuntimeConfig().router || {}, userConfig);
-                const { serverBase = [], supportHtml5History = true, basename = '', routesConfig, createRoutes } = mergedConfig;
-                const finalRouteConfig = {
-                    routes: getGlobalRoutes(),
-                    globalApp: 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() : 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 (0 === getRouteObjects().length) return App;
                 const RouterWrapper = ()=>{
-                    const runtimeContext = (0, __rspack_external_react.useContext)(InternalRuntimeContext);
-                    const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, '/');
-                    const _basename = '/' === baseUrl ? urlJoin(baseUrl, runtimeContext._internalRouterBaseName || basename || '') : baseUrl;
-                    const routeTree = (0, __rspack_external_react.useMemo)(()=>{
-                        if (cachedRouteTree) return cachedRouteTree;
-                        const routeObjects = getRouteObjects();
-                        if (!routeObjects.length) return null;
-                        cachedRouteTree = createRouteTreeFromRouteObjects(routeObjects);
-                        return cachedRouteTree;
-                    }, []);
+                    const runtimeContext = useContext(InternalRuntimeContext);
+                    const _basename = getClientBasename(runtimeContext);
+                    const routeTree = useMemo(()=>getRouteTree(), []);
                     if (!routeTree) return App ? /*#__PURE__*/ jsx(App, {}) : null;
-                    const router = (0, __rspack_external_react.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 ? createBrowserHistory() : createHashHistory();
-                        const rewrite = createModernBasepathRewrite(_basename);
-                        const serializationAdapters = getGlobalEnableRsc() ? getTanstackRscSerializationAdapters() : void 0;
-                        cachedRouter = 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 = useMemo(()=>getRouter(runtimeContext, _basename), [
                         _basename,
                         routeTree,
-                        supportHtml5History,
                         runtimeContext
                     ]);
+                    if (!router) return App ? /*#__PURE__*/ jsx(App, {}) : null;
                     const runtimeState = applyRouterRuntimeState(runtimeContext, {
                         framework: 'tanstack',
                         basename: _basename,
@@ -173,30 +273,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__*/ jsx(__rspack_external_react.Suspense, {
-                        fallback: null,
-                        children: /*#__PURE__*/ jsx(RouterClient, {
-                            router: router
-                        })
+                    const RouterContent = needsRouterClient ? /*#__PURE__*/ jsx(ModernRouterClient, {
+                        router: router
                     }) : /*#__PURE__*/ jsx(RouterProvider, {
                         router: router
                     });
-                    if (hasSSRBootstrap) hooks.onAfterHydrateRouter.call({
+                    const HydratableRouterContent = wrapTanstackSsrHydrationBoundary(RouterContent, hasSSRBootstrap);
+                    if (needsRouterClient) hooks.onAfterHydrateRouter.call({
                         ...lifecycleContext,
                         phase: 'hydrate',
                         router,
                         runtimeContext: runtimeState
                     });
                     return App ? /*#__PURE__*/ jsx(App, {
-                        children: RouterContent
-                    }) : RouterContent;
+                        children: HydratableRouterContent
+                    }) : HydratableRouterContent;
                 };
                 return RouterWrapper;
             });