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

package/dist/esm/router/cli/code/tanstackTypes.mjs

@@ -77,9 +77,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);
@@ -111,10 +123,17 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
             actionName
         };
     };
+    const reserveRouteVarName = (preferred)=>{
+        let candidate = preferred;
+        let suffix = 1;
+        while(usedRouteVarNames.has(candidate))candidate = `${preferred}_${suffix++}`;
+        usedRouteVarNames.add(candidate);
+        return candidate;
+    };
     const createRouteVarName = (route)=>{
         const id = route.id;
         const base = id ? makeLegalIdentifier(id) : `r_${routeIndex++}`;
-        return `route_${base}`;
+        return reserveRouteVarName(`route_${base}`);
     };
     const buildRoute = async (opts)=>{
         const { parentVar, route } = opts;
@@ -129,6 +148,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')},`);
@@ -143,14 +164,16 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
             actionName
         });
         if (staticDataSnippet) routeOpts.push(staticDataSnippet);
-        statements.push(`const ${varName} = createRoute({\n  ${routeOpts.join('\n  ')}\n});`);
         const children = route.children;
+        const hasChildren = Boolean(children && children.length > 0);
+        const routeCtorVarName = hasChildren ? reserveRouteVarName(`${varName}__base`) : varName;
+        statements.push(`const ${routeCtorVarName} = createRoute({\n  ${routeOpts.join('\n  ')}\n});`);
         if (children && children.length > 0) {
             const childVars = await Promise.all(children.map((child)=>buildRoute({
-                    parentVar: varName,
+                    parentVar: routeCtorVarName,
                     route: child
                 })));
-            statements.push(`${varName}.addChildren([${childVars.join(', ')}]);`);
+            statements.push(`const ${varName} = ${routeCtorVarName}.addChildren([${childVars.join(', ')}]);`);
         }
         return varName;
     };
@@ -164,6 +187,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.
@@ -197,7 +222,7 @@ function isRedirectResponse(res: Response) {
 }
 
 function throwTanstackRedirect(location: string) {
-  const target = location || '/';
+  const target = location.length > 0 ? location : '/';
   try {
     void new URL(target);
     throw redirect({ href: target });
@@ -223,21 +248,87 @@ function createRouteStaticData(opts: {
   modernRouteAction?: unknown;
   modernRouteLoader?: unknown;
 }) {
-  const staticData: Record<string, unknown> = {};
+  const staticData: {
+    modernRouteId?: string;
+    modernRouteAction?: unknown;
+    modernRouteLoader?: unknown;
+  } = {};
 
-  if (opts.modernRouteId) {
+  if (typeof opts.modernRouteId === 'string' && opts.modernRouteId.length > 0) {
     staticData.modernRouteId = opts.modernRouteId;
   }
 
-  if (opts.modernRouteLoader) {
+  if (typeof opts.modernRouteLoader !== 'undefined') {
     staticData.modernRouteLoader = opts.modernRouteLoader;
   }
 
-  if (opts.modernRouteAction) {
+  if (typeof opts.modernRouteAction !== 'undefined') {
     staticData.modernRouteAction = opts.modernRouteAction;
   }
 
-  return Object.keys(staticData).length > 0 ? staticData : undefined;
+  return staticData;
+}
+
+function getLoaderSignal(ctx: any): AbortSignal {
+  const abortSignal = ctx?.abortController?.signal;
+  if (abortSignal instanceof AbortSignal) {
+    return abortSignal;
+  }
+  if (ctx?.signal instanceof AbortSignal) {
+    return ctx.signal;
+  }
+  return new AbortController().signal;
+}
+
+function getLoaderHref(ctx: any): string {
+  if (typeof ctx?.location === 'string') {
+    return ctx.location;
+  }
+
+  const publicHref = ctx?.location?.publicHref;
+  if (typeof publicHref === 'string') {
+    return publicHref;
+  }
+
+  const href = ctx?.location?.href;
+  if (typeof href === 'string') {
+    return href;
+  }
+
+  const urlHref = ctx?.location?.url?.href;
+  return typeof urlHref === 'string' ? urlHref : '';
+}
+
+function getLoaderParams(ctx: any): Record<string, string> {
+  return typeof ctx?.params === 'object' && ctx.params !== null ? ctx.params : {};
+}
+
+function handleModernLoaderResult<LoaderResult>(result: LoaderResult): LoaderResult {
+  if (isResponse(result)) {
+    if (isRedirectResponse(result)) {
+      const location = result.headers.get('Location') ?? '/';
+      throwTanstackRedirect(location);
+    }
+    if (result.status === 404) {
+      throw notFound();
+    }
+  }
+
+  return result;
+}
+
+function handleModernLoaderError(err: unknown): never {
+  if (isResponse(err)) {
+    if (isRedirectResponse(err)) {
+      const location = err.headers.get('Location') ?? '/';
+      throwTanstackRedirect(location);
+    }
+    if (err.status === 404) {
+      throw notFound();
+    }
+  }
+
+  throw err;
 }
 
 function modernLoaderToTanstack<TLoader extends (args: any) => any>(
@@ -246,57 +337,31 @@ function modernLoaderToTanstack<TLoader extends (args: any) => any>(
 ) {
   type LoaderResult = Awaited<ReturnType<TLoader>>;
 
-  return async (ctx: any): Promise<LoaderResult> => {
+  return (ctx: any): Promise<LoaderResult> => {
     try {
-      const signal: AbortSignal =
-        ctx?.abortController?.signal ||
-        ctx?.signal ||
-        new AbortController().signal;
+      const signal = getLoaderSignal(ctx);
       const baseRequest: Request | undefined =
         ctx?.context?.request instanceof Request ? ctx.context.request : undefined;
 
-      const href =
-        typeof ctx?.location === 'string'
-          ? ctx.location
-          : ctx?.location?.publicHref ||
-            ctx?.location?.href ||
-            ctx?.location?.url?.href ||
-            '';
+      const href = getLoaderHref(ctx);
 
-      const request = baseRequest
+      const request = baseRequest !== undefined
         ? new Request(baseRequest, { signal })
         : new Request(href, { signal });
 
-      const params = mapParamsForModernLoader(ctx?.params || {}, opts.hasSplat);
-
-      const result = await (modernLoader as any)({
-        request,
-        params,
-        context: ctx?.context?.requestContext,
-      });
-
-      if (isResponse(result)) {
-        if (isRedirectResponse(result)) {
-          const location = result.headers.get('Location') || '/';
-          throwTanstackRedirect(location);
-        }
-        if (result.status === 404) {
-          throw notFound();
-        }
-      }
+      const params = mapParamsForModernLoader(getLoaderParams(ctx), opts.hasSplat);
 
-      return result as LoaderResult;
+      return Promise.resolve(
+        (modernLoader as any)({
+          request,
+          params,
+          context: ctx?.context?.requestContext,
+        }),
+      )
+        .then((result: LoaderResult) => handleModernLoaderResult(result))
+        .catch(handleModernLoaderError);
     } catch (err) {
-      if (isResponse(err)) {
-        if (isRedirectResponse(err)) {
-          const location = err.headers.get('Location') || '/';
-          throwTanstackRedirect(location);
-        }
-        if (err.status === 404) {
-          throw notFound();
-        }
-      }
-      throw err;
+      handleModernLoaderError(err);
     }
   };
 }

package/dist/esm/router/cli/code/templates.mjs

@@ -100,7 +100,20 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
     const loadersMapFile = path.join(internalDirectory, entryName, TEMP_LOADERS_DIR, 'map.json');
     const importLazyCode = `
     import { lazy } from "react";
-    import loadable, { lazy as loadableLazy } from "@${metaName}/runtime/loadable"
+    import * as loadableModule from "@${metaName}/runtime/loadable"
+
+    const resolveLoadableExport = module => {
+      const candidates = [module, module.default, module.default?.default];
+      const loadable = candidates.find(candidate => typeof candidate === 'function');
+
+      if (!loadable) {
+        throw new TypeError('Modern.js runtime loadable export must resolve to a function');
+      }
+
+      return loadable;
+    };
+    const loadable = resolveLoadableExport(loadableModule);
+    const loadableLazy = loadableModule.lazy || loadableModule.default?.lazy || loadable.lazy;
   `;
     let rootLayoutCode = "";
     const getDataLoaderPath = ({ loaderId, clientData, action, inline, routeId, inValidSSRRoute })=>{
@@ -170,16 +183,9 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
                     webpackChunkName: true
                 });
                 component = 'string' === ssrMode ? `loadable(${lazyImport})` : `lazy(${lazyImport})`;
-            } else if ('string' === ssrMode) {
+            } else {
                 components.push(route._component);
                 component = `component_${components.length - 1}`;
-            } else {
-                lazyImport = createLazyImport({
-                    componentPath: route._component,
-                    routeId: route.id,
-                    eager: true
-                });
-                component = `lazy(${lazyImport})`;
             }
         } else if (route._component) if (splitRouteChunks) {
             lazyImport = `() => import('${route._component}')`;

package/dist/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 (!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,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 = 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 = 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__*/ 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,9 +138,94 @@ 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);
+                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(async (context)=>{
+                const mergedConfig = getMergedConfig();
                 if ("u" > typeof window && window._SSR_DATA && mergedConfig.unstable_reloadOnURLMismatch) {
                     const { ssrContext } = context;
                     const currentPathname = normalizePathname(window.location.pathname);
@@ -70,96 +237,32 @@ const tanstackRouterPlugin = (userConfig = {})=>({
                     }
                 }
                 context.router = {
+                    Link: Link,
                     useMatches: useMatches,
                     useLocation: useLocation,
                     useNavigate: useNavigate,
                     useRouter: 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 = 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 (!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 +276,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;
             });