@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.12 → 3.2.0-ultramodern.121

package/src/cli/tanstackTypes.ts

@@ -1,31 +1,10 @@
 // @effect-diagnostics asyncFunction:off nodeBuiltinImport:off strictBooleanExpressions:off
 import type { AppToolsContext } from '@modern-js/app-tools';
+import { getPathWithoutExt, makeLegalIdentifier } from '@modern-js/runtime/cli';
 import type { NestedRouteForCli, PageRoute } from '@modern-js/types';
-import { findExists, formatImportPath, fs, slash } from '@modern-js/utils';
+import { findExists, formatImportPath, slash } from '@modern-js/utils';
 import path from 'path';
 
-const reservedWords =
-  'break case class catch const continue debugger default delete do else export extends finally for function if import in instanceof let new return super switch this throw try typeof var void while with yield enum await implements package protected static interface private public';
-const builtins =
-  'arguments Infinity NaN undefined null true false eval uneval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Symbol Error EvalError InternalError RangeError ReferenceError SyntaxError TypeError URIError Number Math Date String RegExp Array Int8Array Uint8Array Uint8ClampedArray Int16Array Uint16Array Int32Array Float32Array Float64Array Map Set WeakMap WeakSet SIMD ArrayBuffer DataView JSON Promise Generator GeneratorFunction Reflect Proxy Intl';
-const forbidList = new Set<string>(`${reservedWords} ${builtins}`.split(' '));
-
-function makeLegalIdentifier(str: string) {
-  const identifier = str
-    .replace(/-(\w)/g, (_, letter) => letter.toUpperCase())
-    .replace(/[^$_a-zA-Z0-9]/g, '_');
-
-  if (/\d/.test(identifier[0]) || forbidList.has(identifier)) {
-    return `_${identifier}`;
-  }
-  return identifier || '_';
-}
-
-function getPathWithoutExt(filename: string) {
-  const extname = path.extname(filename);
-  return extname ? filename.slice(0, -extname.length) : filename;
-}
-
 const JS_OR_TS_EXTS = [
   '.js',
   '.jsx',
@@ -86,6 +65,17 @@ function pickModernLoaderModule(route: NestedRouteForCli | PageRoute) {
   return { loaderPath, inline };
 }
 
+function pickRouteSearchContractModules(route: NestedRouteForCli | PageRoute) {
+  const validateSearchPath = (route as any).validateSearch;
+  const loaderDepsPath = (route as any).loaderDeps;
+
+  return {
+    validateSearchPath:
+      typeof validateSearchPath === 'string' ? validateSearchPath : null,
+    loaderDepsPath: typeof loaderDepsPath === 'string' ? loaderDepsPath : null,
+  };
+}
+
 function isPathlessLayout(route: NestedRouteForCli | PageRoute) {
   return (
     (route as any).type === 'nested' &&
@@ -126,27 +116,154 @@ function createRouteStaticDataSnippet(opts: {
   )}\n  }),`;
 }
 
-export async function isTanstackRouterFrameworkEnabled(
-  appContext: AppToolsContext,
-): Promise<boolean> {
-  const runtimeConfigBase = path.join(
-    appContext.srcDirectory,
-    appContext.runtimeConfigFile,
-  );
-  const runtimeConfigFile = findExists(
-    JS_OR_TS_EXTS.map(ext => `${runtimeConfigBase}${ext}`),
-  );
-  if (!runtimeConfigFile) {
-    return false;
+const LOCALE_PARAM_SEGMENTS = new Set([
+  ':lang',
+  ':locale',
+  ':language',
+  '$lang',
+  '$locale',
+  '$language',
+]);
+
+type CanonicalAwareRoute = (NestedRouteForCli | PageRoute) & {
+  modernCanonicalPath?: string;
+  index?: boolean;
+  isRoot?: boolean;
+  children?: CanonicalAwareRoute[];
+};
+
+function paramsTypeForCanonicalPath(canonicalPath: string): string {
+  const fields: string[] = [];
+
+  for (const segment of canonicalPath.split('/')) {
+    if (!segment) {
+      continue;
+    }
+    if (segment === '*' || segment === '$') {
+      fields.push(`'_splat'?: string`);
+      continue;
+    }
+    if (segment.startsWith('{-$') && segment.endsWith('}')) {
+      fields.push(`${JSON.stringify(segment.slice(3, -1))}?: string`);
+      continue;
+    }
+    if (segment.startsWith('$')) {
+      fields.push(`${JSON.stringify(segment.slice(1))}: string`);
+      continue;
+    }
+    if (segment.startsWith(':')) {
+      const optional = segment.endsWith('?');
+      const name = segment.slice(1, optional ? undefined : segment.length);
+      fields.push(
+        `${JSON.stringify(optional ? name.slice(0, -1) : name)}${
+          optional ? '?' : ''
+        }: string`,
+      );
+    }
   }
 
-  try {
-    const content = await fs.readFile(runtimeConfigFile, 'utf-8');
-    // Heuristic: allow both single and double quotes, tolerate whitespace/newlines.
-    return /framework\s*:\s*['"]tanstack['"]/.test(content);
-  } catch {
-    return false;
+  return fields.length > 0
+    ? `{ ${fields.join('; ')} }`
+    : 'Record<string, never>';
+}
+
+export type CollectCanonicalRoutesOptions = {
+  /**
+   * Whether a leading `:lang`/`:locale`/`:language` route param may be
+   * treated as an i18n locale prefix. This MUST only be enabled when
+   * `@modern-js/plugin-i18n` is actually installed: the emitted
+   * `declare module '@modern-js/plugin-i18n/runtime'` augmentation breaks
+   * typechecking (TS2664) for apps that hand-roll a `/:lang/` param without
+   * the plugin. Routes carrying `modernCanonicalPath` metadata are always
+   * honored — only plugin-i18n produces them.
+   */
+  localeParamHeuristic?: boolean;
+};
+
+/**
+ * Derive the canonical (language-agnostic) route map for an entry: the
+ * leading locale param is stripped and localized physical variants (routes
+ * carrying `modernCanonicalPath` metadata from `@modern-js/plugin-i18n`)
+ * collapse to their canonical pattern. Returns `null` when the entry has no
+ * i18n routing surface (no locale param and no localized variants), so plain
+ * TanStack apps never get a `@modern-js/plugin-i18n` module augmentation.
+ */
+export function collectCanonicalRoutesForEntry(
+  routes: (NestedRouteForCli | PageRoute)[],
+  options: CollectCanonicalRoutesOptions = {},
+): Record<string, string> | null {
+  const { localeParamHeuristic = true } = options;
+  const canonicalParams = new Map<string, string>();
+  let hasI18nSurface = false;
+
+  const normalizeJoined = (joined: string): string => {
+    const collapsed = joined.replace(/\/+/g, '/');
+    const withLeading = collapsed.startsWith('/') ? collapsed : `/${collapsed}`;
+    return withLeading.length > 1
+      ? withLeading.replace(/\/+$/, '')
+      : withLeading;
+  };
+
+  const record = (canonicalPath: string) => {
+    const normalized = normalizeJoined(canonicalPath || '/');
+    const key = toTanstackPath(normalized);
+    if (!canonicalParams.has(key)) {
+      canonicalParams.set(key, paramsTypeForCanonicalPath(normalized));
+    }
+  };
+
+  const visit = (route: CanonicalAwareRoute, parentPath: string) => {
+    let currentPath = parentPath;
+
+    if (typeof route.modernCanonicalPath === 'string') {
+      hasI18nSurface = true;
+      currentPath = normalizeJoined(route.modernCanonicalPath);
+    } else if (typeof route.path === 'string' && route.path.length > 0) {
+      const segments = route.path
+        .replace(/\[(.+?)\]/g, ':$1')
+        .split('/')
+        .filter(Boolean);
+      if (
+        localeParamHeuristic &&
+        parentPath === '' &&
+        LOCALE_PARAM_SEGMENTS.has(segments[0])
+      ) {
+        hasI18nSurface = true;
+        segments.shift();
+      }
+      currentPath = segments.length
+        ? normalizeJoined(`${parentPath}/${segments.join('/')}`)
+        : parentPath;
+    }
+
+    const children = route.children;
+    if (children && children.length > 0) {
+      for (const child of children) {
+        visit(child, currentPath);
+      }
+      return;
+    }
+
+    // Leaf page or index route: a navigable target.
+    record(currentPath || '/');
+  };
+
+  const rootModern = routes.find(
+    route => (route as CanonicalAwareRoute).isRoot,
+  ) as CanonicalAwareRoute | undefined;
+  const topLevel = rootModern ? (rootModern.children ?? []) : routes;
+
+  for (const route of topLevel) {
+    visit(route as CanonicalAwareRoute, '');
   }
+
+  if (!hasI18nSurface || canonicalParams.size === 0) {
+    return null;
+  }
+
+  return Object.fromEntries(
+    [...canonicalParams.entries()].sort(([a], [b]) => a.localeCompare(b)),
+  );
 }
 
 export async function generateTanstackRouterTypesSourceForEntry(opts: {
@@ -182,9 +299,66 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
   const statements: string[] = [];
 
   const loaderImportMap = new Map<string, string>();
+  const componentImportMap = new Map<string, Promise<string | null>>();
+  const searchContractImportMap = new Map<string, string>();
+  const usedRouteVarNames = new Set<string>();
   let loaderIndex = 0;
+  let componentIndex = 0;
+  let validateSearchIndex = 0;
+  let loaderDepsIndex = 0;
   let routeIndex = 0;
 
+  const getImportNameForComponent = (
+    componentPath: unknown,
+  ): Promise<string | null> => {
+    if (typeof componentPath !== 'string' || componentPath.length === 0) {
+      return Promise.resolve(null);
+    }
+
+    // Cache the in-flight promise: sibling routes sharing a component module
+    // are generated concurrently and must reuse one import.
+    let pendingImportName = componentImportMap.get(componentPath);
+    if (!pendingImportName) {
+      pendingImportName = (async () => {
+        // Resolve through the same machinery as loaders: the raw `_component`
+        // value carries the internal `@_modern_js_src` alias, which the app's
+        // tsconfig does not map — the generated file must use relative
+        // imports.
+        const resolvedNoExt = await resolveRouteModuleNoExt(componentPath);
+        if (!resolvedNoExt) {
+          return null;
+        }
+
+        const relImport = normalizeRelativeImport(
+          path.relative(outDir, resolvedNoExt),
+        );
+
+        const componentName = `component_${componentIndex++}`;
+        imports.push(`import ${componentName} from ${quote(relImport)};`);
+        return componentName;
+      })();
+      componentImportMap.set(componentPath, pendingImportName);
+    }
+
+    return pendingImportName;
+  };
+
+  const resolveRouteModuleNoExt = async (aliasedNoExtPath: string) => {
+    const prefix = `${appContext.internalSrcAlias}/`;
+    let absNoExt: string;
+    if (aliasedNoExtPath.startsWith(prefix)) {
+      const rel = aliasedNoExtPath.slice(prefix.length);
+      absNoExt = path.join(appContext.srcDirectory, rel);
+    } else if (path.isAbsolute(aliasedNoExtPath)) {
+      absNoExt = aliasedNoExtPath;
+    } else {
+      // Unknown format; treat as already relative to src.
+      absNoExt = path.join(appContext.srcDirectory, aliasedNoExtPath);
+    }
+
+    return resolveFileNoExt(absNoExt);
+  };
+
   const getImportNamesForLoader = async (
     aliasedNoExtPath: string,
     inline: boolean,
@@ -201,19 +375,7 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
       };
     }
 
-    const prefix = `${appContext.internalSrcAlias}/`;
-    let absNoExt: string;
-    if (aliasedNoExtPath.startsWith(prefix)) {
-      const rel = aliasedNoExtPath.slice(prefix.length);
-      absNoExt = path.join(appContext.srcDirectory, rel);
-    } else if (path.isAbsolute(aliasedNoExtPath)) {
-      absNoExt = aliasedNoExtPath;
-    } else {
-      // Unknown format; treat as already relative to src.
-      absNoExt = path.join(appContext.srcDirectory, aliasedNoExtPath);
-    }
-
-    const resolvedNoExt = await resolveFileNoExt(absNoExt);
+    const resolvedNoExt = await resolveRouteModuleNoExt(aliasedNoExtPath);
     if (!resolvedNoExt) {
       return null;
     }
@@ -242,10 +404,49 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
     return { loaderName: importName, actionName };
   };
 
+  const getImportNameForSearchContract = async (
+    aliasedNoExtPath: string,
+    exportName: 'validateSearch' | 'loaderDeps',
+  ) => {
+    const key = `${exportName}:${aliasedNoExtPath}`;
+    const existing = searchContractImportMap.get(key);
+    if (existing) {
+      return existing;
+    }
+
+    const resolvedNoExt = await resolveRouteModuleNoExt(aliasedNoExtPath);
+    if (!resolvedNoExt) {
+      return null;
+    }
+
+    const relImport = normalizeRelativeImport(
+      path.relative(outDir, resolvedNoExt),
+    );
+    const importName =
+      exportName === 'validateSearch'
+        ? `validateSearch_${validateSearchIndex++}`
+        : `loaderDeps_${loaderDepsIndex++}`;
+    imports.push(
+      `import { ${exportName} as ${importName} } from ${quote(relImport)};`,
+    );
+    searchContractImportMap.set(key, importName);
+    return importName;
+  };
+
+  const reserveRouteVarName = (preferred: string) => {
+    let candidate = preferred;
+    let suffix = 1;
+    while (usedRouteVarNames.has(candidate)) {
+      candidate = `${preferred}_${suffix++}`;
+    }
+    usedRouteVarNames.add(candidate);
+    return candidate;
+  };
+
   const createRouteVarName = (route: NestedRouteForCli | PageRoute) => {
     const id = (route as any).id as string | undefined;
     const base = id ? makeLegalIdentifier(id) : `r_${routeIndex++}`;
-    return `route_${base}`;
+    return reserveRouteVarName(`route_${base}`);
   };
 
   const buildRoute = async (opts: {
@@ -267,12 +468,32 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
       : null;
     const loaderName = loaderImports?.loaderName || null;
     const actionName = loaderImports?.actionName || null;
+    const searchContractInfo = pickRouteSearchContractModules(route);
+    const validateSearchName = searchContractInfo.validateSearchPath
+      ? await getImportNameForSearchContract(
+          searchContractInfo.validateSearchPath,
+          'validateSearch',
+        )
+      : null;
+    const loaderDepsName = searchContractInfo.loaderDepsPath
+      ? await getImportNameForSearchContract(
+          searchContractInfo.loaderDepsPath,
+          'loaderDeps',
+        )
+      : null;
 
     const rawPath = (route as any).path as string | undefined;
     const hasSplat = typeof rawPath === 'string' && rawPath.includes('*');
 
     const routeOpts: string[] = [`getParentRoute: () => ${parentVar},`];
 
+    const componentName = await getImportNameForComponent(
+      (route as any)._component,
+    );
+    if (componentName) {
+      routeOpts.push(`component: ${componentName},`);
+    }
+
     if (isPathlessLayout(route)) {
       const id = (route as any).id as string | undefined;
       routeOpts.push(`id: ${quote(id || 'pathless')},`);
@@ -286,6 +507,12 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
         `loader: modernLoaderToTanstack({ hasSplat: ${hasSplat} }, ${loaderName}),`,
       );
     }
+    if (validateSearchName) {
+      routeOpts.push(`validateSearch: ${validateSearchName},`);
+    }
+    if (loaderDepsName) {
+      routeOpts.push(`loaderDeps: ${loaderDepsName},`);
+    }
 
     const staticDataSnippet = createRouteStaticDataSnippet({
       modernRouteId: (route as any).id as string | undefined,
@@ -296,18 +523,27 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
       routeOpts.push(staticDataSnippet);
     }
 
-    statements.push(
-      `const ${varName} = createRoute({\n  ${routeOpts.join('\n  ')}\n});`,
-    );
-
     const children = (route as any).children as
       | Array<NestedRouteForCli | PageRoute>
       | undefined;
+    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, route: child })),
+        children.map(child =>
+          buildRoute({ parentVar: routeCtorVarName, route: child }),
+        ),
+      );
+      statements.push(
+        `const ${varName} = ${routeCtorVarName}.addChildren([${childVars.join(', ')}]);`,
       );
-      statements.push(`${varName}.addChildren([${childVars.join(', ')}]);`);
     }
 
     return varName;
@@ -326,17 +562,46 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
     : null;
   const rootLoaderName = rootLoaderImports?.loaderName || null;
   const rootActionName = rootLoaderImports?.actionName || null;
+  const rootSearchContractInfo = rootModern
+    ? pickRouteSearchContractModules(rootModern)
+    : null;
+  const rootValidateSearchName = rootSearchContractInfo?.validateSearchPath
+    ? await getImportNameForSearchContract(
+        rootSearchContractInfo.validateSearchPath,
+        'validateSearch',
+      )
+    : null;
+  const rootLoaderDepsName = rootSearchContractInfo?.loaderDepsPath
+    ? await getImportNameForSearchContract(
+        rootSearchContractInfo.loaderDepsPath,
+        'loaderDeps',
+      )
+    : null;
 
   const topLevelVars = await Promise.all(
     topLevel.map(route => buildRoute({ parentVar: 'rootRoute', route })),
   );
 
   const rootOpts: string[] = [];
+
+  const rootComponentName = await getImportNameForComponent(
+    (rootModern as any)?._component,
+  );
+  if (rootComponentName) {
+    rootOpts.push(`component: ${rootComponentName},`);
+  }
+
   if (rootLoaderName) {
     rootOpts.push(
       `loader: modernLoaderToTanstack({ hasSplat: false }, ${rootLoaderName}),`,
     );
   }
+  if (rootValidateSearchName) {
+    rootOpts.push(`validateSearch: ${rootValidateSearchName},`);
+  }
+  if (rootLoaderDepsName) {
+    rootOpts.push(`loaderDeps: ${rootLoaderDepsName},`);
+  }
 
   const routerGenTs = `/* eslint-disable */
 // This file is auto-generated by Modern.js. Do not edit manually.
@@ -346,134 +611,12 @@ import {
   createRootRouteWithContext,
   createRoute,
   createRouter,
-  notFound,
-  redirect,
+  createRouteStaticData,
+  type ModernRouterContext,
+  modernLoaderToTanstack,
+  modernTanstackRouterFastDefaults,
 } from '@modern-js/plugin-tanstack/runtime';
 
-type ModernRouterContext = {
-  request?: Request;
-  requestContext?: unknown;
-};
-
-function isResponse(value: unknown): value is Response {
-  return (
-    value != null &&
-    typeof value === 'object' &&
-    typeof (value as any).status === 'number' &&
-    typeof (value as any).headers === 'object'
-  );
-}
-
-const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
-function isRedirectResponse(res: Response) {
-  return redirectStatusCodes.has(res.status);
-}
-
-function throwTanstackRedirect(location: string) {
-  const target = location || '/';
-  try {
-    void new URL(target);
-    throw redirect({ href: target });
-  } catch {
-    throw redirect({ to: target });
-  }
-}
-
-function mapParamsForModernLoader(params: Record<string, string>, hasSplat: boolean) {
-  if (!hasSplat) {
-    return params;
-  }
-
-  const { _splat, ...rest } = params as any;
-  if (typeof _splat !== 'undefined') {
-    return { ...rest, '*': _splat };
-  }
-  return rest;
-}
-
-function createRouteStaticData(opts: {
-  modernRouteId?: string;
-  modernRouteAction?: unknown;
-  modernRouteLoader?: unknown;
-}) {
-  const staticData: Record<string, unknown> = {};
-
-  if (opts.modernRouteId) {
-    staticData.modernRouteId = opts.modernRouteId;
-  }
-
-  if (opts.modernRouteLoader) {
-    staticData.modernRouteLoader = opts.modernRouteLoader;
-  }
-
-  if (opts.modernRouteAction) {
-    staticData.modernRouteAction = opts.modernRouteAction;
-  }
-
-  return Object.keys(staticData).length > 0 ? staticData : undefined;
-}
-
-function modernLoaderToTanstack<TLoader extends (args: any) => any>(
-  opts: { hasSplat: boolean },
-  modernLoader: TLoader,
-) {
-  type LoaderResult = Awaited<ReturnType<TLoader>>;
-
-  return async (ctx: any): Promise<LoaderResult> => {
-    try {
-      const signal: AbortSignal =
-        ctx?.abortController?.signal ||
-        ctx?.signal ||
-        new AbortController().signal;
-      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 request = baseRequest
-        ? 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();
-        }
-      }
-
-      return result as LoaderResult;
-    } catch (err) {
-      if (isResponse(err)) {
-        if (isRedirectResponse(err)) {
-          const location = err.headers.get('Location') || '/';
-          throwTanstackRedirect(location);
-        }
-        if (err.status === 404) {
-          throw notFound();
-        }
-      }
-      throw err;
-    }
-  };
-}
-
 ${imports.join('\n')}
 
 export const rootRoute = createRootRouteWithContext<ModernRouterContext>()({
@@ -492,6 +635,7 @@ ${statements.join('\n\n')}
 export const routeTree = rootRoute.addChildren([${topLevelVars.join(', ')}]);
 
 export const router = createRouter({
+  ...modernTanstackRouterFastDefaults,
   routeTree,
   history: createMemoryHistory({
     initialEntries: ['/'],

package/src/runtime/hooks.ts

@@ -1,20 +1,10 @@
-import { createSyncHook } from '@modern-js/plugin';
-import type { TRuntimeContext } from '@modern-js/runtime/context';
-import type { RouteObject } from '@modern-js/runtime-utils/router';
-import type { RouterLifecycleContext } from './lifecycle';
-
-const modifyRoutes = createSyncHook<(routes: RouteObject[]) => RouteObject[]>();
-const onBeforeCreateRoutes =
-  createSyncHook<(context: TRuntimeContext) => void>();
-const onBeforeCreateRouter =
-  createSyncHook<(context: RouterLifecycleContext) => void>();
-const onAfterCreateRouter =
-  createSyncHook<(context: RouterLifecycleContext) => void>();
-const onBeforeHydrateRouter =
-  createSyncHook<(context: RouterLifecycleContext) => void>();
-const onAfterHydrateRouter =
-  createSyncHook<(context: RouterLifecycleContext) => void>();
-
+/**
+ * The router hooks are owned by @modern-js/runtime — this module re-exports
+ * the canonical instances through the `/context` seam, so the TanStack
+ * provider taps and calls the exact same hooks the built-in router wrapper
+ * registers. Creating separate hook instances here would silently split the
+ * hook registry between the wrapper and this provider.
+ */
 export {
   modifyRoutes,
   onAfterCreateRouter,
@@ -22,13 +12,6 @@ export {
   onBeforeCreateRouter,
   onBeforeCreateRoutes,
   onBeforeHydrateRouter,
-};
-
-export type RouterExtendsHooks = {
-  modifyRoutes: typeof modifyRoutes;
-  onBeforeCreateRoutes: typeof onBeforeCreateRoutes;
-  onBeforeCreateRouter: typeof onBeforeCreateRouter;
-  onAfterCreateRouter: typeof onAfterCreateRouter;
-  onBeforeHydrateRouter: typeof onBeforeHydrateRouter;
-  onAfterHydrateRouter: typeof onAfterHydrateRouter;
-};
+  type RouterExtendsHooks,
+  routerProviderRegistryHooks,
+} from '@modern-js/runtime/context';

package/src/runtime/hydrationBoundary.tsx

@@ -0,0 +1,12 @@
+import { type ReactElement, Suspense } from 'react';
+
+export function wrapTanstackSsrHydrationBoundary(
+  routerContent: ReactElement,
+  shouldWrap: boolean,
+) {
+  if (shouldWrap) {
+    return <Suspense fallback={null}>{routerContent}</Suspense>;
+  }
+
+  return routerContent;
+}