@bleedingdev/modern-js-plugin-tanstack 3.9.0-ultramodern.10 → 3.9.0-ultramodern.12

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/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/generateRouteArtifacts.test.ts

@@ -5,7 +5,9 @@ const createRunOptionsMock = rstest.fn(async (options: unknown) => ({
   mockRunOptions: true,
   received: options,
 }));
-const cliInitMock = rstest.fn(async () => ({ appContext: {} }));
+const cliInitMock = rstest.fn(async () => ({
+  appContext: { hooks: { onBeforeExit: { call: async () => {} } } },
+}));
 
 rstest.mock('@modern-js/app-tools/cli/run', () => ({
   createRunOptions: createRunOptionsMock,
@@ -17,6 +19,7 @@ rstest.mock('@modern-js/plugin/cli', () => ({
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
+import { createAsyncHook } from '@modern-js/plugin';
 import { INTERNAL_RUNTIME_PLUGINS } from '@modern-js/utils';
 import {
   generateTanstackRouteArtifacts,
@@ -63,6 +66,12 @@ describe('generateTanstackRouteArtifacts (headless routes-generate)', () => {
       mockRunOptions: true,
       received: runOptions,
     });
+    const onBeforeExit = createAsyncHook<() => Promise<void>>();
+    let disposed = false;
+    onBeforeExit.tap(async () => {
+      await Promise.resolve();
+      disposed = true;
+    });
     cliInitMock.mockImplementation(async () => {
       await writeTanstackRouterTypesForEntries({
         appContext: {
@@ -88,7 +97,7 @@ describe('generateTanstackRouteArtifacts (headless routes-generate)', () => {
           ] as any,
         },
       });
-      return { appContext: {} };
+      return { appContext: { hooks: { onBeforeExit } } };
     });
 
     try {
@@ -110,6 +119,7 @@ describe('generateTanstackRouteArtifacts (headless routes-generate)', () => {
       );
 
       expect(cliInitMock).toHaveBeenCalledTimes(1);
+      expect(disposed).toBe(true);
 
       expect(
         fs.existsSync(
@@ -131,6 +141,30 @@ describe('generateTanstackRouteArtifacts (headless routes-generate)', () => {
     }
   });
 
+  it('preserves initialization and cleanup failures', async () => {
+    const appDirectory = makeAppDir(true);
+    const initializationFailure = new Error('prepare failed');
+    const cleanupFailure = new Error('dispose failed');
+    const onBeforeExit = createAsyncHook<() => Promise<void>>();
+    onBeforeExit.tap(async () => {
+      throw cleanupFailure;
+    });
+    try {
+      cliInitMock.mockRejectedValueOnce(initializationFailure);
+      await expect(
+        generateTanstackRouteArtifacts({ appDirectory }),
+      ).rejects.toBe(initializationFailure);
+      cliInitMock.mockResolvedValueOnce({
+        appContext: { hooks: { onBeforeExit } },
+      });
+      await expect(
+        generateTanstackRouteArtifacts({ appDirectory }),
+      ).rejects.toBe(cleanupFailure);
+    } finally {
+      fs.rmSync(appDirectory, { force: true, recursive: true });
+    }
+  });
+
   it('throws a clear error when no config file exists', async () => {
     const appDirectory = makeAppDir(false);
 

package/tests/router/localisedIdentity.test.tsx

@@ -55,6 +55,7 @@ test('localized URLs preserve native loader and params route identity in SSR and
       '/search': { en: '/find', cs: '/hledat' },
       '/resources/:id': { en: '/resources/:id', cs: '/zdroje/:id' },
     },
+    'canonical',
   );
   const routeObjects = createTanstackRouteObjectsFromConfig({
     routesConfig: { routes },

package/tests/router/prefetchLink.test.tsx

@@ -7,6 +7,7 @@ import {
 } from '@tanstack/react-router';
 import { act, render, waitFor } from '@testing-library/react';
 import React from 'react';
+import { createTanstackNavigation } from '../../src/runtime/navigation';
 import { Link, NavLink } from '../../src/runtime/prefetchLink';
 
 // Real-router harness (no module mocking): STATIC_ACTIVE_PROPS (the
@@ -120,3 +121,31 @@ describe('tanstack prefetch link adapter - aria-current override', () => {
     expect(ref.current).toBe(anchor);
   });
 });
+
+test('provider navigation observes native navigation and preserves history state', async () => {
+  const { router, unmount } = await renderLink({ initialPath: '/' });
+  const capability = createTanstackNavigation(router);
+  const initial = capability.getSnapshot();
+  expect(capability.getSnapshot()).toBe(initial);
+  const listener = rstest.fn();
+  const stop = capability.subscribe(listener);
+  await act(() =>
+    capability.navigate('/settings?q=two#detail', {
+      replace: true,
+      state: { custom: true },
+    }),
+  );
+  expect(listener).toHaveBeenCalled();
+  expect(capability.getSnapshot().location).toEqual({
+    pathname: '/settings',
+    search: '?q=two',
+    hash: '#detail',
+  });
+  expect(router.state.location.state).toMatchObject({ custom: true });
+  expect(router.history.length).toBe(1);
+  stop();
+  listener.mockClear();
+  await act(() => capability.navigate('/'));
+  expect(listener).not.toHaveBeenCalled();
+  unmount();
+});

package/tests/router/serverPlugin.test.ts

@@ -9,6 +9,8 @@ import {
 } from '../../src/runtime/lifecycle';
 import { tanstackRouterPlugin } from '../../src/runtime/plugin.node';
 import type { TanstackRouterPluginAPI } from '../../src/runtime/pluginShared';
+import * as ssrUtils from '../../src/runtime/ssrManagedTags';
+import * as ssrPreload from '../../src/runtime/ssrPreload';
 import type { RouterConfig } from '../../src/runtime/types';
 
 type BeforeRenderListener = Parameters<
@@ -155,3 +157,146 @@ describe('tanstack server plugin router results', () => {
     expect(status).not.toHaveBeenCalled();
   });
 });
+
+describe('TanStack preparation resource lifetime', () => {
+  test.each([
+    'attach',
+    'load',
+    'result',
+    'preload',
+    'dehydrate',
+    'abort',
+    'clientRender',
+    'afterCreate',
+  ])('disposes exactly once when %s fails', async stage => {
+    const failure = new Error(`${stage} failed`);
+    const cleanup = rstest.fn();
+    const controller = new AbortController();
+    const { context } = createServerContext('/');
+    context.ssrContext!.request.raw = new Request('http://localhost/', {
+      signal: controller.signal,
+    });
+    const attach = ssrUtils.attachServerSsrUtils;
+    rstest
+      .spyOn(ssrUtils, 'attachServerSsrUtils')
+      .mockImplementation(async router => {
+        await attach(router);
+        rstest.spyOn(router.serverSsr!, 'cleanup').mockImplementation(cleanup);
+        if (stage === 'attach') throw failure;
+        if (stage === 'load')
+          rstest.spyOn(router, 'load').mockRejectedValue(failure);
+        if (stage === 'result')
+          rstest.spyOn(router, 'load').mockResolvedValue(undefined);
+        if (stage === 'dehydrate')
+          rstest
+            .spyOn(router.serverSsr!, 'dehydrate')
+            .mockRejectedValue(failure);
+        if (stage === 'abort') controller.abort(failure);
+      });
+    if (stage === 'clientRender') {
+      context.ssrContext!.loaderFailureMode = 'clientRender';
+      rstest
+        .spyOn(ssrUtils, 'collectRouterErrors')
+        .mockReturnValue({ root: failure });
+    }
+    if (stage === 'afterCreate')
+      rstest
+        .spyOn(routerProviderRegistryHooks.onAfterCreateRouter, 'call')
+        .mockImplementation(() => {
+          throw failure;
+        });
+    if (stage === 'preload')
+      rstest
+        .spyOn(ssrPreload, 'preloadMatchedRouteComponents')
+        .mockRejectedValue(failure);
+    const beforeRender = collectBeforeRender(() => [
+      { id: 'root', path: '/', Component: () => null },
+    ]);
+    await expect(beforeRender(context, value => value)).rejects.toThrow(
+      stage === 'result' ? 'without a server result' : failure.message,
+    );
+    expect(cleanup).toHaveBeenCalledTimes(1);
+    await getRouterRuntimeState(context)?.cleanup?.();
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+
+  test.each([
+    'string',
+    'stream',
+  ] as const)('retains %s router resources for response termination', async mode => {
+    const { context } = createServerContext('/products/shoe?q=1#detail');
+    context.ssrContext!.mode = mode;
+    const beforeRender = collectBeforeRender(() => [
+      { id: 'product', path: '/products/:id', Component: () => null },
+    ]);
+    await beforeRender(context, value => value);
+    const state = getRouterRuntimeState(context)!;
+    const router = state.instance as AnyRouter;
+    const cleanup = rstest.spyOn(router.serverSsr!, 'cleanup');
+    const navigation = state.navigation!;
+    expect(navigation.getSnapshot()).toMatchObject({
+      location: { pathname: '/products/shoe', search: '?q=1', hash: '#detail' },
+      params: { id: 'shoe' },
+    });
+    expect(navigation.getSnapshot()).toBe(navigation.getSnapshot());
+    expect(navigation.Link).toBe(context.router?.Link);
+    expect(
+      navigation.createLinkProps!({
+        pathname: '/products/shoe',
+        href: '/products/shoe?q=2#detail',
+        search: { q: '2' },
+        hash: 'detail',
+        hashScrollIntoView: false,
+        prefetch: 'none',
+      }),
+    ).toEqual({
+      to: '/products/shoe',
+      search: { q: '2' },
+      hash: 'detail',
+      hashScrollIntoView: false,
+      preload: false,
+    });
+    expect(cleanup).not.toHaveBeenCalled();
+    await state.cleanup?.();
+    await state.cleanup?.();
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+});
+
+test('incoming abort reaches an active Modern loader and disposes its router', async () => {
+  const incoming = new AbortController();
+  let started!: () => void;
+  const loading = new Promise<void>(resolve => {
+    started = resolve;
+  });
+  const { context } = createServerContext('/');
+  context.ssrContext!.request.raw = new Request('http://localhost/', {
+    signal: incoming.signal,
+  });
+  const failure = new Error('client disconnected during loader');
+  const beforeRender = collectBeforeRender(() => [
+    {
+      id: 'root',
+      path: '/',
+      Component: () => null,
+      loader: ({ request }: { request: Request }) =>
+        new Promise((_resolve, reject) => {
+          request.signal.addEventListener(
+            'abort',
+            () => reject(request.signal.reason),
+            { once: true },
+          );
+          started();
+        }),
+    },
+  ]);
+  const pending = beforeRender(context, value => value);
+  await loading;
+  const router = getRouterRuntimeState(context)!.instance as AnyRouter;
+  const cleanup = rstest.spyOn(router.serverSsr!, 'cleanup');
+  incoming.abort(failure);
+  await expect(pending).rejects.toBe(failure);
+  expect(cleanup).toHaveBeenCalledTimes(1);
+  await getRouterRuntimeState(context)?.cleanup?.();
+  expect(cleanup).toHaveBeenCalledTimes(1);
+});