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

package/src/cli/tanstackTypes.ts

@@ -86,6 +86,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' &&
@@ -182,9 +193,29 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
   const statements: string[] = [];
 
   const loaderImportMap = new Map<string, string>();
+  const searchContractImportMap = new Map<string, string>();
+  const usedRouteVarNames = new Set<string>();
   let loaderIndex = 0;
+  let validateSearchIndex = 0;
+  let loaderDepsIndex = 0;
   let routeIndex = 0;
 
+  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 +232,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 +261,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,6 +325,19 @@ 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('*');
@@ -286,6 +357,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 +373,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,6 +412,21 @@ 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 })),
@@ -337,12 +438,19 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
       `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.
 
 import {
   createMemoryHistory,
+  modernTanstackRouterFastDefaults,
   createRootRouteWithContext,
   createRoute,
   createRouter,
@@ -370,7 +478,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 });
@@ -396,21 +504,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>(
@@ -419,57 +593,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 params = mapParamsForModernLoader(getLoaderParams(ctx), 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;
+      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);
     }
   };
 }
@@ -492,6 +640,7 @@ ${statements.join('\n\n')}
 export const routeTree = rootRoute.addChildren([${topLevelVars.join(', ')}]);
 
 export const router = createRouter({
+  ...modernTanstackRouterFastDefaults,
   routeTree,
   history: createMemoryHistory({
     initialEntries: ['/'],

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;
+}

package/src/runtime/index.tsx

@@ -1,5 +1,104 @@
-export * from '@tanstack/react-router';
-export { useMatch } from '@tanstack/react-router';
+export type * from '@tanstack/react-router';
+export {
+  Asset,
+  Await,
+  Block,
+  CatchBoundary,
+  CatchNotFound,
+  ClientOnly,
+  cleanPath,
+  composeRewrites,
+  createBrowserHistory,
+  createControlledPromise,
+  createFileRoute,
+  createHashHistory,
+  createHistory,
+  createLazyFileRoute,
+  createLazyRoute,
+  createLink,
+  createMemoryHistory,
+  createRootRoute,
+  createRootRouteWithContext,
+  createRoute,
+  createRouteMask,
+  createRouter,
+  createRouterConfig,
+  createSerializationAdapter,
+  DEFAULT_PROTOCOL_ALLOWLIST,
+  DefaultGlobalNotFound,
+  deepEqual,
+  defaultParseSearch,
+  defaultStringifySearch,
+  defer,
+  ErrorComponent,
+  FileRoute,
+  FileRouteLoader,
+  functionalUpdate,
+  getRouteApi,
+  HeadContent,
+  interpolatePath,
+  isMatch,
+  isNotFound,
+  isPlainArray,
+  isPlainObject,
+  isRedirect,
+  joinPaths,
+  LazyRoute,
+  lazyFn,
+  lazyRouteComponent,
+  linkOptions,
+  Match,
+  Matches,
+  MatchRoute,
+  Navigate,
+  NotFoundRoute,
+  notFound,
+  parseSearchWith,
+  RootRoute,
+  Route,
+  RouteApi,
+  Router,
+  RouterContextProvider,
+  RouterProvider,
+  reactUse,
+  redirect,
+  replaceEqualDeep,
+  resolvePath,
+  retainSearchParams,
+  rootRouteId,
+  rootRouteWithContext,
+  ScriptOnce,
+  Scripts,
+  ScrollRestoration,
+  SearchParamError,
+  stringifySearchWith,
+  stripSearchParams,
+  trimPath,
+  trimPathLeft,
+  trimPathRight,
+  useAwaited,
+  useBlocker,
+  useCanGoBack,
+  useChildMatches,
+  useElementScrollRestoration,
+  useHydrated,
+  useLayoutEffect,
+  useLinkProps,
+  useLoaderData,
+  useLoaderDeps,
+  useLocation,
+  useMatch,
+  useMatches,
+  useMatchRoute,
+  useNavigate,
+  useParams,
+  useParentMatches,
+  useRouteContext,
+  useRouter,
+  useRouterState,
+  useSearch,
+  useTags,
+} from '@tanstack/react-router';
 export type {
   Fetcher,
   FetcherState,
@@ -12,6 +111,7 @@ export {
   RouteActionResponseError,
   useFetcher,
 } from './dataMutation';
+export { Outlet } from './outlet';
 export {
   tanstackRouterPlugin,
   tanstackRouterPlugin as default,
@@ -28,3 +128,8 @@ export type {
   CompositeComponentProps,
 } from './rsc/client';
 export { CompositeComponent } from './rsc/client';
+export type { RouterConfig } from './types';
+export {
+  getModernTanstackRouterFastDefaults,
+  modernTanstackRouterFastDefaults,
+} from './types';

package/src/runtime/outlet.tsx

@@ -0,0 +1,42 @@
+import { Outlet as TanstackOutlet } from '@tanstack/react-router';
+import {
+  type ComponentProps,
+  createElement,
+  type ElementType,
+  memo,
+} from 'react';
+
+type PreloadableComponent = ElementType<Record<string, unknown>> & {
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
+
+export const Outlet = memo(function ModernTanstackOutlet() {
+  return <TanstackOutlet />;
+});
+
+export function withModernRouteMatchContext(
+  component: unknown,
+  _routeId: string,
+): unknown {
+  if (!component) {
+    return component;
+  }
+
+  const Component = component as ElementType<Record<string, unknown>>;
+  const WrappedRouteComponent = (
+    props: ComponentProps<ElementType<Record<string, unknown>>>,
+  ) => createElement(Component, props);
+
+  const preloadable = component as PreloadableComponent;
+  if (typeof preloadable.load === 'function') {
+    WrappedRouteComponent.load = preloadable.load.bind(preloadable);
+  }
+  if (typeof preloadable.preload === 'function') {
+    WrappedRouteComponent.preload = preloadable.preload.bind(preloadable);
+  } else if (typeof preloadable.load === 'function') {
+    WrappedRouteComponent.preload = WrappedRouteComponent.load;
+  }
+
+  return WrappedRouteComponent;
+}

package/src/runtime/plugin.node.tsx

@@ -26,9 +26,9 @@ import {
   createRouter,
   RouterProvider,
 } from '@tanstack/react-router';
-import { attachRouterServerSsrUtils } from '@tanstack/react-router/ssr/server';
+import { attachRouterServerSsrUtils } from '@tanstack/router-core/ssr/server';
 import type React from 'react';
-import { Suspense, useContext } from 'react';
+import { useContext } from 'react';
 import { createModernBasepathRewrite } from './basepathRewrite';
 import {
   modifyRoutes as modifyRoutesHook,
@@ -39,6 +39,7 @@ import {
   onBeforeHydrateRouter as onBeforeHydrateRouterHook,
   type RouterExtendsHooks,
 } from './hooks';
+import { wrapTanstackSsrHydrationBoundary } from './hydrationBoundary';
 import {
   applyRouterServerPrepareResult,
   createRouterServerSnapshot,
@@ -52,7 +53,11 @@ import {
   createTanstackRscServerPayload,
   handleTanstackRscRedirect,
 } from './rsc/payloadRouter';
-import type { InternalRouterServerSnapshot, RouterConfig } from './types';
+import {
+  getModernTanstackRouterFastDefaults,
+  type InternalRouterServerSnapshot,
+  type RouterConfig,
+} from './types';
 import { createRouteObjectsFromConfig, urlJoin } from './utils';
 
 type ModernTanstackRouterContext = {
@@ -119,6 +124,17 @@ type PreloadableRouteComponent = {
   preload?: (props?: Record<string, unknown>) => Promise<unknown> | unknown;
 };
 
+type ReactLazyRouteComponent = {
+  _init?: (payload: unknown) => unknown;
+  _payload?: unknown;
+};
+
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return Boolean(
+    value && typeof (value as PromiseLike<unknown>).then === 'function',
+  );
+}
+
 type TanstackRouterWithServerSsr = AnyRouter & {
   resolveRedirect?: (redirect: Response) => Response;
   routesById?: Record<string, RouterRouteWithOptions>;
@@ -149,7 +165,37 @@ function isPreloadableRouteComponent(
   );
 }
 
+function isReactLazyRouteComponent(
+  component: unknown,
+): component is ReactLazyRouteComponent {
+  return (
+    Boolean(component) &&
+    typeof component === 'object' &&
+    typeof (component as ReactLazyRouteComponent)._init === 'function' &&
+    '_payload' in component
+  );
+}
+
+async function preloadReactLazyRouteComponent(
+  component: ReactLazyRouteComponent,
+) {
+  try {
+    component._init?.(component._payload);
+  } catch (thrown) {
+    if (!isPromiseLike(thrown)) {
+      throw thrown;
+    }
+    await thrown;
+    component._init?.(component._payload);
+  }
+}
+
 async function preloadRouteComponent(component: unknown) {
+  if (isReactLazyRouteComponent(component)) {
+    await preloadReactLazyRouteComponent(component);
+    return;
+  }
+
   if (!isPreloadableRouteComponent(component)) {
     return;
   }
@@ -398,6 +444,7 @@ export const tanstackRouterPlugin = (
         hooks.onBeforeCreateRouter.call(routerLifecycleContext);
 
         const tanstackRouter = createRouter({
+          ...getModernTanstackRouterFastDefaults(mergedConfig),
           routeTree,
           history,
           basepath: '/',
@@ -458,9 +505,12 @@ export const tanstackRouterPlugin = (
         context.ssrContext?.response.status(tanstackRouter.state.statusCode);
 
         await serverRouter.serverSsr?.dehydrate?.();
-        await waitForRouterSerialization(serverRouter);
 
         if (isRSCNavigation) {
+          // RSC navigations consume the server payload directly. Normal HTML SSR
+          // emits the buffered bootstrap script below and must not wait here
+          // because Modern's non-streaming hook has not rendered the app yet.
+          await waitForRouterSerialization(serverRouter);
           setTanstackRscServerPayload(
             createTanstackRscServerPayload(serverRouter, {
               omitClientLoaderData: true,
@@ -515,10 +565,9 @@ export const tanstackRouterPlugin = (
               return App ? <App {...props} /> : null;
             }
 
-            const routerWrapper = (
-              <Suspense fallback={null}>
-                <RouterProvider router={router as AnyRouter} />
-              </Suspense>
+            const routerWrapper = wrapTanstackSsrHydrationBoundary(
+              <RouterProvider router={router as AnyRouter} />,
+              true,
             );
 
             return App ? <App>{routerWrapper}</App> : routerWrapper;