@bleedingdev/modern-js-plugin-tanstack 3.9.0-ultramodern.11 → 3.9.0-ultramodern.13

package/src/runtime/plugin.node.tsx

@@ -23,11 +23,13 @@ import { createModernBasepathRewrite } from './basepathRewrite';
 import { routerProviderRegistryHooks } from './hooks';
 import { wrapTanstackSsrHydrationBoundary } from './hydrationBoundary';
 import {
+  applyRouterRuntimeState,
   applyRouterServerPrepareResult,
-  createRouterServerSnapshot,
   getRouterRuntimeState,
+  getRouterServerSnapshot,
   type RouterLifecycleContext,
 } from './lifecycle';
+import { createTanstackNavigation } from './navigation';
 import {
   createTanstackRouteObjects,
   getTanstackRouteConfig,
@@ -54,7 +56,6 @@ import {
   collectRouterErrors,
   createGetSsrHref,
   routerManagedTagsToHtml,
-  waitForRouterSerialization,
 } from './ssrManagedTags';
 import { preloadMatchedRouteComponents } from './ssrPreload';
 import type {
@@ -168,116 +169,135 @@ export const tanstackRouterPlugin = (
           setTanstackRscRouter(serverRouter);
         }
 
-        await attachServerSsrUtils(serverRouter);
-
-        const end = time();
-
+        let disposed = false;
+        let prepared = false;
+        const onAbort = () => controller.abort(rawRequest.signal.reason);
+        const cleanup = () => {
+          if (disposed) return;
+          disposed = true;
+          rawRequest.signal.removeEventListener('abort', onAbort);
+          controller.abort();
+          serverRouter.serverSsr?.cleanup();
+        };
+        // Acquire the disposer before attachment: every subsequent failure,
+        // including partial attachment, has an owner. Successful preparation
+        // leaves disposal to the response lifetime in the SSR pipeline.
+        applyRouterRuntimeState(context, {
+          framework: 'tanstack',
+          basename: _basename,
+          instance: serverRouter,
+          cleanup,
+        });
+        rawRequest.signal.addEventListener('abort', onAbort, { once: true });
         try {
-          await tanstackRouter.load({ sync: true });
-        } finally {
-          const cost = end();
-          context.ssrContext?.onTiming?.(LOADER_REPORTER_NAME, cost);
-        }
+          rawRequest.signal.throwIfAborted();
+          await attachServerSsrUtils(serverRouter);
+          rawRequest.signal.throwIfAborted();
+
+          const end = time();
 
-        const serverLoadResult = serverRouter._serverResult;
-        if (!serverLoadResult) {
           try {
-            serverRouter.serverSsr?.cleanup?.();
-          } catch {}
-          throw new Error(
-            'TanStack Router completed an SSR load without a server result.',
-          );
-        }
+            await tanstackRouter.load({ sync: true });
+          } finally {
+            const cost = end();
+            context.ssrContext?.onTiming?.(LOADER_REPORTER_NAME, cost);
+          }
 
-        if (serverLoadResult.type === 'redirect') {
-          const { redirect } = serverLoadResult;
+          rawRequest.signal.throwIfAborted();
+          const serverLoadResult = serverRouter._serverResult;
+          if (!serverLoadResult) {
+            throw new Error(
+              'TanStack Router completed an SSR load without a server result.',
+            );
+          }
 
-          try {
-            serverRouter.serverSsr?.cleanup?.();
-          } catch {}
-
-          return interrupt(
-            isRSCNavigation
-              ? handleTanstackRscRedirect(
-                  redirect.headers,
-                  _basename,
-                  redirect.status,
-                )
-              : redirect,
-          );
-        }
+          if (serverLoadResult.type === 'redirect') {
+            const { redirect } = serverLoadResult;
+
+            return interrupt(
+              isRSCNavigation
+                ? handleTanstackRscRedirect(
+                    redirect.headers,
+                    _basename,
+                    redirect.status,
+                  )
+                : redirect,
+            );
+          }
+
+          const routerErrors = collectRouterErrors(tanstackRouter);
+          if (routerErrors && loaderFailureMode === 'clientRender') {
+            (
+              context.ssrContext?.response as
+                | { status: (code: number) => void }
+                | undefined
+            )?.status(200);
+            throw Object.values(routerErrors)[0];
+          }
+
+          await preloadMatchedRouteComponents(serverRouter);
 
-        const routerErrors = collectRouterErrors(tanstackRouter);
-        if (routerErrors && loaderFailureMode === 'clientRender') {
           (
             context.ssrContext?.response as
               | { status: (code: number) => void }
               | undefined
-          )?.status(200);
-          try {
-            serverRouter.serverSsr?.cleanup?.();
-          } catch {}
-          throw Object.values(routerErrors)[0];
-        }
-
-        await preloadMatchedRouteComponents(serverRouter);
+          )?.status(serverLoadResult.status);
 
-        (
-          context.ssrContext?.response as
-            | { status: (code: number) => void }
-            | undefined
-        )?.status(serverLoadResult.status);
+          await serverRouter.serverSsr?.dehydrate();
 
-        await serverRouter.serverSsr?.dehydrate?.();
-
-        if (enableRsc) {
-          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);
+          if (enableRsc) {
+            setTanstackRscServerPayload(
+              createTanstackRscServerPayload(serverRouter, {
+                omitClientLoaderData: isRSCNavigation,
+              }),
+            );
           }
 
-          setTanstackRscServerPayload(
-            createTanstackRscServerPayload(serverRouter, {
-              omitClientLoaderData: isRSCNavigation,
-            }),
-          );
-        }
-
-        const ssrScriptTags = serverRouter.serverSsr?.takeBufferedScripts?.();
-        const hydrationScripts = routerManagedTagsToHtml(ssrScriptTags);
-        const matchedRouteIds = getModernRouteIdsFromMatches(serverRouter);
-        const routerServerSnapshot: InternalRouterServerSnapshot =
-          createRouterServerSnapshot({
+          const initialScriptTags =
+            serverRouter.serverSsr?.takeInitialHydrationScriptTags();
+          const hydrationScripts = initialScriptTags
+            ? routerManagedTagsToHtml([
+                ...initialScriptTags.before,
+                initialScriptTags.boundary,
+              ])
+            : [];
+          const matchedRouteIds = getModernRouteIdsFromMatches(serverRouter);
+          const routerServerSnapshot: InternalRouterServerSnapshot = {
             framework: 'tanstack',
             basename: _basename,
             statusCode: serverLoadResult.status,
             errors: routerErrors,
             matchedRouteIds,
             hydrationScripts,
-          });
-        const runtimeContext = applyRouterServerPrepareResult(
-          context as TInternalRuntimeContext,
-          {
-            snapshot: routerServerSnapshot,
-            cleanup: () => serverRouter.serverSsr?.cleanup?.(),
-            state: {
-              framework: 'tanstack',
-              basename: _basename,
-              instance: serverRouter,
-              hydrationScripts,
-              matchedRouteIds,
-              serverSnapshot: routerServerSnapshot,
+          };
+          const runtimeContext = applyRouterServerPrepareResult(
+            context as TInternalRuntimeContext,
+            {
+              snapshot: routerServerSnapshot,
+              cleanup,
+              state: {
+                framework: 'tanstack',
+                basename: _basename,
+                instance: serverRouter,
+                navigation: createTanstackNavigation(tanstackRouter),
+              },
             },
-          },
-        );
-        hooks.onAfterCreateRouter.call({
-          ...routerLifecycleContext,
-          router: serverRouter,
-          serverSnapshot: routerServerSnapshot,
-          runtimeContext,
-        });
+          );
+          rawRequest.signal.throwIfAborted();
+          hooks.onAfterCreateRouter.call({
+            ...routerLifecycleContext,
+            router: serverRouter,
+            serverSnapshot: getRouterServerSnapshot(runtimeContext),
+            runtimeContext,
+          });
+          prepared = true;
+        } finally {
+          if (!prepared) {
+            try {
+              cleanup();
+            } catch {}
+          }
+        }
       });
 
       api.wrapRoot(App => {

package/src/runtime/plugin.tsx

@@ -32,6 +32,7 @@ import {
   applyRouterRuntimeState,
   type RouterLifecycleContext,
 } from './lifecycle';
+import { createTanstackNavigation } from './navigation';
 import {
   createTanstackRouteObjects,
   getMergedRouterConfig,
@@ -259,10 +260,15 @@ export const tanstackRouterPlugin = (
           if (!router) {
             return App ? <App /> : null;
           }
+          const navigation = useMemo(
+            () => createTanstackNavigation(router),
+            [router],
+          );
           const runtimeState = applyRouterRuntimeState(runtimeContext, {
             framework: 'tanstack',
             basename: _basename,
             instance: router,
+            navigation,
           });
           const lifecycleContext: RouterLifecycleContext = {
             framework: 'tanstack',

package/src/runtime/routeTree/construction.ts

@@ -1,11 +1,14 @@
 // @effect-diagnostics asyncFunction:off strictBooleanExpressions:off
 
-import { canonicaliseLocalisedRoutes } from '@modern-js/i18n-runtime-extensions';
 import { DefaultNotFound } from '@modern-js/runtime/context';
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type { AnyRoute, AnyRouter } from '@tanstack/react-router';
 import { rootRouteId } from '@tanstack/react-router';
 
+import {
+  describeRouteTree,
+  type RouteDescriptor,
+} from '../../shared/routeDescriptor';
 import { createRouteStaticData } from '../../shared/routeStaticData';
 import { withModernRouteMatchContext } from '../outlet';
 import {
@@ -14,7 +17,6 @@ import {
   toRouteComponent,
 } from './components';
 import { createModernShouldReload, wrapRouteObjectLoader } from './loaders';
-import { isRouteObjectPathlessLayout, toTanstackPath } from './paths';
 import { mergeModernRouteHandle } from './staticData';
 import {
   createTanstackRootRoute,
@@ -24,25 +26,16 @@ import {
 import type {
   ModernRouteObject,
   ModernTanstackRootRoute,
-  MutableTanstackRoute,
   RouteRevalidationState,
   RouteTreeOptions,
   TanstackRootRouteOptions,
   TanstackRouteOptions,
 } from './types';
 
-function createRouteFromRouteObject(opts: {
-  options?: RouteTreeOptions;
-  parent: AnyRoute;
-  pathlessFallbackId?: string;
-  routeObject: RouteObject;
-}): AnyRoute {
-  const {
-    options = {},
-    parent,
-    pathlessFallbackId = 'pathless',
-    routeObject,
-  } = opts;
+function createRouteOptions(
+  routeObject: RouteObject,
+  options: RouteTreeOptions,
+): TanstackRouteOptions {
   const modernRouteObject = routeObject as ModernRouteObject;
   const revalidationState: RouteRevalidationState = {};
   const shouldRevalidate = modernRouteObject.shouldRevalidate;
@@ -50,13 +43,8 @@ function createRouteFromRouteObject(opts: {
     shouldRevalidate,
     revalidationState,
   );
-
-  const stableFallbackId =
-    routeObject.id || modernRouteObject.file || pathlessFallbackId;
-
   const component = toRouteComponent(routeObject);
   const base: TanstackRouteOptions = {
-    getParentRoute: () => parent,
     component,
     pendingComponent: toPendingComponent(routeObject),
     errorComponent: toErrorComponent(routeObject),
@@ -87,117 +75,49 @@ function createRouteFromRouteObject(opts: {
     base.shouldReload = shouldReload;
   }
 
-  if (isRouteObjectPathlessLayout(routeObject)) {
-    base.id = stableFallbackId;
-  } else {
-    base.path = routeObject.index
-      ? '/'
-      : toTanstackPath((routeObject.path as string) || '');
-  }
-
-  const route = createTanstackRoute(base);
-  wrapRouteComponentWithModernContext(route, component, routeObject.id);
+  return base;
+}
 
-  const children = routeObject.children;
-  if (children && children.length > 0) {
-    const childRoutes = children.map((child: RouteObject, index) =>
-      createRouteFromRouteObject({
-        options,
-        parent: route,
-        pathlessFallbackId: `pathless-${index}`,
-        routeObject: child,
-      }),
+function createRouteFromDescriptor(
+  descriptor: RouteDescriptor<RouteObject>,
+  parent: AnyRoute,
+  options: RouteTreeOptions,
+): AnyRoute {
+  const { source, location, children } = descriptor;
+  const routeOptions = createRouteOptions(source, options);
+  const route = createTanstackRoute({
+    ...routeOptions,
+    ...location,
+    getParentRoute: () => parent,
+  });
+  wrapRouteComponentWithModernContext(route, routeOptions.component, source.id);
+  if (children.length) {
+    route.addChildren(
+      children.map(child => createRouteFromDescriptor(child, route, options)),
     );
-    route.addChildren(childRoutes);
   }
-
   return route;
 }
 
-function getRootLikeRouteObject(routes: RouteObject[]) {
-  return routes.find(route => route.path === '/' && !route.index);
-}
-
 export function createRouteTreeFromRouteObjects(
   routes: RouteObject[],
   options: RouteTreeOptions = {},
 ): ModernTanstackRootRoute {
-  routes = canonicaliseLocalisedRoutes(routes);
-  const rootLikeRoute = getRootLikeRouteObject(routes) as
-    | ModernRouteObject
-    | undefined;
-  const rootRevalidationState: RouteRevalidationState = {};
-  const rootShouldRevalidate = rootLikeRoute?.shouldRevalidate;
-  const rootShouldReload = createModernShouldReload(
-    rootShouldRevalidate,
-    rootRevalidationState,
-  );
-
-  const rootComponent = rootLikeRoute
-    ? toRouteComponent(rootLikeRoute)
-    : undefined;
+  const { root, children } = describeRouteTree(routes);
   const rootRouteOptions: TanstackRootRouteOptions = {
-    component: rootComponent,
-    pendingComponent: rootLikeRoute
-      ? toPendingComponent(rootLikeRoute)
-      : undefined,
-    errorComponent: rootLikeRoute ? toErrorComponent(rootLikeRoute) : undefined,
-    validateSearch: rootLikeRoute?.validateSearch,
-    loaderDeps: rootLikeRoute?.loaderDeps,
+    ...(root ? createRouteOptions(root, options) : {}),
     notFoundComponent: DefaultNotFound,
-    staticData: createRouteStaticData({
-      modernRouteId: rootLikeRoute?.id,
-      modernRouteAction: rootLikeRoute?.action,
-      modernRouteHandle: rootLikeRoute
-        ? mergeModernRouteHandle(rootLikeRoute)
-        : undefined,
-      modernRouteHasAction:
-        rootLikeRoute?.hasAction || Boolean(rootLikeRoute?.action),
-      modernRouteHasClientLoader:
-        rootLikeRoute?.hasClientLoader ||
-        typeof rootLikeRoute?.clientData !== 'undefined',
-      modernRouteHasLoader:
-        rootLikeRoute?.hasLoader || typeof rootLikeRoute?.loader === 'function',
-      modernRouteIsClientComponent: rootLikeRoute?.isClientComponent,
-      modernRouteLoader: rootLikeRoute?.loader,
-      modernRouteShouldRevalidate: rootShouldRevalidate,
-    }),
-    loader: rootLikeRoute
-      ? wrapRouteObjectLoader(rootLikeRoute, rootRevalidationState, options)
-      : undefined,
   };
-  if (rootShouldReload) {
-    rootRouteOptions.shouldReload = rootShouldReload;
-  }
-  if (rootLikeRoute?.inValidSSRRoute) {
-    rootRouteOptions.ssr = false;
-  }
-
   const rootRoute = createTanstackRootRoute(rootRouteOptions);
-  if (rootComponent) {
+  if (rootRouteOptions.component) {
     rootRoute.options.component = withModernRouteMatchContext(
-      rootComponent,
+      rootRouteOptions.component,
       rootRouteId,
     ) as typeof rootRoute.options.component;
   }
-
-  const topLevel = rootLikeRoute
-    ? [
-        ...((rootLikeRoute.children as RouteObject[] | undefined) || []),
-        ...routes.filter(route => route !== rootLikeRoute),
-      ]
-    : routes;
-
-  const childRoutes = topLevel.map((routeObject, index) =>
-    createRouteFromRouteObject({
-      options,
-      parent: rootRoute,
-      pathlessFallbackId: `pathless-${index}`,
-      routeObject,
-    }),
+  rootRoute.addChildren(
+    children.map(child => createRouteFromDescriptor(child, rootRoute, options)),
   );
-
-  rootRoute.addChildren(childRoutes);
   return rootRoute as unknown as ModernTanstackRootRoute;
 }
 

package/src/runtime/routeTree/loaders.ts

@@ -3,6 +3,7 @@
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import {
   getLoaderHref,
+  getLoaderSignal,
   handleModernLoaderError,
   handleModernLoaderResult,
   mapSplatParamsForModernLoader,
@@ -118,10 +119,7 @@ export function wrapRouteObjectLoader(
         } catch {}
       }
 
-      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

package/src/runtime/routeTree/paths.ts

@@ -1,7 +1,5 @@
 // @effect-diagnostics asyncFunction:off strictBooleanExpressions:off
 
-import type { RouteObject } from '@modern-js/runtime-utils/router';
-
 export function toTanstackPath(pathname: string): string {
   // TanStack Router uses `$param` and `$` (splat) style params.
   // Modern's conventional routing currently generates React Router style params (e.g. `:id`, `*`).
@@ -30,7 +28,3 @@ export function toTanstackPath(pathname: string): string {
     })
     .join('/');
 }
-
-export function isRouteObjectPathlessLayout(route: RouteObject) {
-  return !route.path && !route.index;
-}

package/src/runtime/ssrManagedTags.ts

@@ -6,23 +6,6 @@ import type {
   TanstackRouterWithServerSsr,
 } from './ssrTypes';
 
-export async function waitForRouterSerialization(
-  tanstackRouter: TanstackRouterWithServerSsr,
-) {
-  const serverSsr = tanstackRouter.serverSsr;
-  if (
-    !serverSsr ||
-    typeof serverSsr.onSerializationFinished !== 'function' ||
-    serverSsr.isSerializationFinished?.()
-  ) {
-    return;
-  }
-
-  await new Promise<void>(resolve => {
-    serverSsr.onSerializationFinished?.(resolve);
-  });
-}
-
 function htmlEscapeAttr(value: string) {
   return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
 }

package/src/runtime/ssrTypes.ts

@@ -34,13 +34,6 @@ type RouterRouteWithOptions = {
 
 export type TanstackRouterWithServerSsr = AnyRouter & {
   routesById?: Record<string, RouterRouteWithOptions>;
-  serverSsr?: {
-    cleanup?: () => void;
-    dehydrate?: () => Promise<void> | void;
-    isSerializationFinished?: () => boolean;
-    onSerializationFinished?: (listener: () => void) => void;
-    takeBufferedScripts?: () => unknown;
-  };
   state: AnyRouter['state'] & {
     matches?: unknown;
   };

package/src/runtime/utils.tsx

@@ -55,6 +55,7 @@ function toTanstackRouteObject(
   if (route.type === 'nested') {
     return {
       modernLocalisedRoute: Reflect.get(route, 'modernLocalisedRoute'),
+      isRoot: Reflect.get(route, 'isRoot'),
       path: route.path,
       id: route.id,
       loader: route.loader,

package/src/shared/routeDescriptor.ts

@@ -0,0 +1,46 @@
+import { toTanstackPath } from '../runtime/routeTree/paths';
+
+type RouteShape = {
+  id?: string;
+  file?: string;
+  path?: string;
+  index?: boolean;
+  isRoot?: boolean;
+  children?: RouteShape[];
+};
+
+/** Browser-safe structure shared by the executable tree and concrete TS emitter. */
+export type RouteDescriptor<T extends RouteShape> = {
+  source: T;
+  location: { id: string; path?: never } | { path: string; id?: never };
+  hasSplat: boolean;
+  children: RouteDescriptor<T>[];
+};
+
+export function describeRouteTree<T extends RouteShape>(routes: T[]) {
+  const root = routes.find(
+    route =>
+      route.isRoot === true || (route.path === '/' && route.index !== true),
+  );
+  const describe = (route: T, index: number): RouteDescriptor<T> => ({
+    source: route,
+    location:
+      (route.path ?? '').length === 0 && route.index !== true
+        ? { id: route.id || route.file || `pathless-${index}` }
+        : {
+            path: route.index === true ? '/' : toTanstackPath(route.path || ''),
+          },
+    hasSplat: Boolean(route.path?.includes('*')),
+    children: ((route.children ?? []) as T[]).map(describe),
+  });
+  return {
+    root,
+    children: (root !== undefined
+      ? [
+          ...((root.children ?? []) as T[]),
+          ...routes.filter(route => route !== root),
+        ]
+      : routes
+    ).map(describe),
+  };
+}

package/tests/router/clientNavigation.ts

@@ -0,0 +1,13 @@
+import type { AnyRouter } from '@tanstack/react-router';
+
+// Router-core navigates only on the client. Node tests perform the same
+// transition a mounted RouterProvider runs: push the rewritten public URL,
+// then load it.
+export async function navigateOnClient(
+  router: AnyRouter,
+  options: Parameters<AnyRouter['buildLocation']>[0],
+) {
+  router.history.push(router.buildLocation(options).publicHref);
+  router.updateLatestLocation();
+  await router.load();
+}