@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.98 → 3.8.1-ultramodern.1

package/tests/router/cli.test.ts

@@ -1,6 +1,8 @@
-import { mkdir, mkdtemp, readFile, rm } from 'node:fs/promises';
+import { execFile } from 'node:child_process';
+import { mkdir, mkdtemp, rm } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
+import { promisify } from 'node:util';
 import { mergeConfig } from '@modern-js/plugin/cli';
 import type { Entrypoint } from '@modern-js/types';
 import { fs, NESTED_ROUTE_SPEC_FILE } from '@modern-js/utils';
@@ -12,6 +14,119 @@ import {
   writeTanstackRouterTypesForEntries,
 } from '../../src/cli';
 
+const execFileAsync = promisify(execFile);
+const strictestTsconfigPath = path.resolve(
+  __dirname,
+  '../../node_modules/@tsconfig/strictest/tsconfig.json',
+);
+
+async function typecheckGeneratedRegistration(options: {
+  entries: string[];
+  generatedDirName: string;
+  srcDirectory: string;
+  runtimeModule?: string;
+  i18nRuntimeModule?: string;
+  canonicalTypeChecks?: string[];
+}) {
+  const {
+    entries,
+    generatedDirName,
+    srcDirectory,
+    runtimeModule = '@modern-js/plugin-tanstack/runtime',
+    i18nRuntimeModule,
+    canonicalTypeChecks = [],
+  } = options;
+  const projectDirectory = path.dirname(srcDirectory);
+
+  for (const entry of entries) {
+    const routerPath = path.join(
+      srcDirectory,
+      generatedDirName,
+      entry,
+      'router.gen.ts',
+    );
+    if (!(await fs.pathExists(routerPath))) {
+      await fs.outputFile(routerPath, 'export const router = { context: {} };');
+    }
+  }
+
+  const runtimeDeclaration = [
+    `declare module '${runtimeModule}' {`,
+    '  export interface Register {}',
+    '  export type ModernRouterContext = { request?: Request; requestContext?: unknown };',
+    '  type RouteOptions = { getParentRoute?: (...args: never[]) => unknown; id?: string; loader?: (...args: never[]) => unknown; path?: string; staticData?: unknown };',
+    '  type Route<TOptions extends RouteOptions = RouteOptions> = { options: TOptions; addChildren<const TChildren extends readonly unknown[]>(children: TChildren): Route<TOptions> & { children: TChildren } };',
+    '  export function createMemoryHistory<TOptions>(options: TOptions): TOptions;',
+    '  export function createRootRouteWithContext<TContext extends ModernRouterContext>(): <const TOptions extends RouteOptions>(options: TOptions) => Route<TOptions>;',
+    '  export function createRoute<const TOptions extends RouteOptions>(options: TOptions): Route<TOptions>;',
+    '  export function createRouter<const TOptions extends { context: ModernRouterContext; routeTree: unknown }>(options: TOptions): TOptions;',
+    '  export function createRouteStaticData<const TData extends Record<string, unknown>>(data: TData): TData;',
+    '  export function modernLoaderToTanstack<TLoader extends (...args: never[]) => unknown>(options: { hasSplat: boolean }, loader: TLoader): (context: unknown) => Promise<Awaited<ReturnType<TLoader>>>;',
+    '  export const modernTanstackRouterFastDefaults: Record<string, unknown>;',
+    '}',
+  ];
+  if (i18nRuntimeModule) {
+    runtimeDeclaration.push(
+      `declare module '${i18nRuntimeModule}' { export interface UltramodernCanonicalRoutes {} }`,
+    );
+  }
+  await fs.outputFile(
+    path.join(srcDirectory, 'generated-runtime-shim.d.ts'),
+    runtimeDeclaration.join('\n'),
+  );
+
+  const contractLines = [
+    `import type { Register } from '${runtimeModule}';`,
+    ...entries.map(
+      (entry, index) =>
+        `import { router as router${index} } from './${generatedDirName}/${entry}/router.gen';`,
+    ),
+    ...entries.map(
+      (_, index) =>
+        `const registeredRouter${index}: Register['router'] = router${index};`,
+    ),
+    ...entries.map((_, index) => `void registeredRouter${index};`),
+    ...canonicalTypeChecks,
+  ];
+  await fs.outputFile(
+    path.join(srcDirectory, 'registration-contract.ts'),
+    contractLines.join('\n'),
+  );
+  await fs.outputJSON(path.join(projectDirectory, 'tsconfig.json'), {
+    extends: strictestTsconfigPath,
+    compilerOptions: {
+      lib: ['ESNext', 'DOM'],
+      module: 'Preserve',
+      moduleResolution: 'Bundler',
+      noEmit: true,
+      target: 'ESNext',
+      types: [],
+    },
+    include: ['src/**/*.ts', 'src/**/*.d.ts'],
+  });
+
+  try {
+    await execFileAsync(
+      process.platform === 'win32' ? 'tsgo.cmd' : 'tsgo',
+      ['-p', 'tsconfig.json'],
+      {
+        cwd: projectDirectory,
+        shell: process.platform === 'win32',
+      },
+    );
+  } catch (error) {
+    if (
+      error &&
+      typeof error === 'object' &&
+      'stdout' in error &&
+      typeof error.stdout === 'string'
+    ) {
+      throw new Error(error.stdout, { cause: error });
+    }
+    throw error;
+  }
+}
+
 const runtimeCliMocks = {
   handleFileChange: rstest.fn(),
   handleGeneratorEntryCode: rstest.fn(),
@@ -86,7 +201,7 @@ describe('tanstack router cli plugin', () => {
     }
   });
 
-  test('writes plugin-owned router types and register metadata', async () => {
+  test('typechecks plugin-owned routers and register metadata under strictest', async () => {
     tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-cli-'));
     const srcDirectory = path.join(tempDir, 'src');
     await mkdir(srcDirectory, { recursive: true });
@@ -102,33 +217,33 @@ describe('tanstack router cli plugin', () => {
       } as any,
       generatedDirName: 'generated-router',
       routesByEntry: {
-        dashboard: [],
-        main: [],
+        dashboard: [
+          {
+            type: 'nested',
+            id: 'layout',
+            isRoot: true,
+            children: [{ type: 'nested', id: 'page', index: true }],
+          },
+        ],
+        main: [
+          {
+            type: 'nested',
+            id: 'layout',
+            isRoot: true,
+            children: [{ type: 'nested', id: 'page', index: true }],
+          },
+        ],
       },
     });
 
-    const mainRouter = await readFile(
-      path.join(srcDirectory, 'generated-router', 'main', 'router.gen.ts'),
-      'utf-8',
-    );
-    expect(mainRouter).toContain(
-      "} from '@modern-js/plugin-tanstack/runtime';",
-    );
-
-    const register = await readFile(
-      path.join(srcDirectory, 'generated-router', 'register.gen.d.ts'),
-      'utf-8',
-    );
-    expect(register).toContain("from './main/router.gen'");
-    expect(register.indexOf("from './main/router.gen'")).toBeLessThan(
-      register.indexOf("from './dashboard/router.gen'"),
-    );
-    expect(register).toContain(
-      "declare module '@modern-js/plugin-tanstack/runtime'",
-    );
+    await typecheckGeneratedRegistration({
+      entries: ['main', 'dashboard'],
+      generatedDirName: 'generated-router',
+      srcDirectory,
+    });
   });
 
-  test('can write register metadata without routes for custom entry lists', async () => {
+  test('typechecks register metadata for custom entry lists without routes', async () => {
     tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-cli-'));
     const srcDirectory = path.join(tempDir, 'src');
 
@@ -138,17 +253,14 @@ describe('tanstack router cli plugin', () => {
       srcDirectory,
     });
 
-    const register = await readFile(
-      path.join(srcDirectory, 'tanstack', 'register.gen.d.ts'),
-      'utf-8',
-    );
-    expect(register).toContain('router: typeof router0');
-    expect(register).toContain(
-      "declare module '@modern-js/plugin-tanstack/runtime'",
-    );
+    await typecheckGeneratedRegistration({
+      entries: ['main'],
+      generatedDirName: 'tanstack',
+      srcDirectory,
+    });
   });
 
-  test('writes plugin-i18n module augmentation when canonicalRoutes are provided', async () => {
+  test('exposes canonical route params through plugin-i18n types', async () => {
     tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-cli-'));
     const srcDirectory = path.join(tempDir, 'src');
 
@@ -162,20 +274,22 @@ describe('tanstack router cli plugin', () => {
       },
     });
 
-    const register = await readFile(
-      path.join(srcDirectory, 'tanstack', 'register.gen.d.ts'),
-      'utf-8',
-    );
-
-    expect(register).toContain(
-      "declare module '@modern-js/plugin-i18n/runtime'",
-    );
-    expect(register).toContain('interface UltramodernCanonicalRoutes');
-    expect(register).toContain("'/': Record<string, never>;");
-    expect(register).toContain('\'/products/$slug\': { "slug": string };');
+    await typecheckGeneratedRegistration({
+      entries: ['main'],
+      generatedDirName: 'tanstack',
+      srcDirectory,
+      i18nRuntimeModule: '@modern-js/plugin-i18n/runtime',
+      canonicalTypeChecks: [
+        "import type { UltramodernCanonicalRoutes } from '@modern-js/plugin-i18n/runtime';",
+        "const rootParams: UltramodernCanonicalRoutes['/'] = {};",
+        "const productParams: UltramodernCanonicalRoutes['/products/$slug'] = { slug: 'tractor' };",
+        'void rootParams;',
+        'void productParams;',
+      ],
+    });
   });
 
-  test('does not emit plugin-i18n augmentation when canonicalRoutes is absent (back-compat)', async () => {
+  test('typechecks a plain TanStack register without plugin-i18n installed', async () => {
     tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-cli-'));
     const srcDirectory = path.join(tempDir, 'src');
 
@@ -183,23 +297,16 @@ describe('tanstack router cli plugin', () => {
       entries: ['main'],
       generatedDirName: 'tanstack',
       srcDirectory,
-      // No canonicalRoutes provided at all — plain TanStack app
     });
 
-    const register = await readFile(
-      path.join(srcDirectory, 'tanstack', 'register.gen.d.ts'),
-      'utf-8',
-    );
-
-    expect(register).not.toContain('plugin-i18n');
-    expect(register).not.toContain('UltramodernCanonicalRoutes');
-    // But the standard TanStack runtime augmentation must still be present.
-    expect(register).toContain(
-      "declare module '@modern-js/plugin-tanstack/runtime'",
-    );
+    await typecheckGeneratedRegistration({
+      entries: ['main'],
+      generatedDirName: 'tanstack',
+      srcDirectory,
+    });
   });
 
-  test('uses a custom i18nRuntimeModule when specified', async () => {
+  test('exposes canonical route params through a custom i18n runtime module', async () => {
     tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-cli-'));
     const srcDirectory = path.join(tempDir, 'src');
 
@@ -213,15 +320,17 @@ describe('tanstack router cli plugin', () => {
       i18nRuntimeModule: '@my-org/i18n/runtime',
     });
 
-    const register = await readFile(
-      path.join(srcDirectory, 'tanstack', 'register.gen.d.ts'),
-      'utf-8',
-    );
-
-    expect(register).toContain("declare module '@my-org/i18n/runtime'");
-    expect(register).not.toContain(
-      "declare module '@modern-js/plugin-i18n/runtime'",
-    );
+    await typecheckGeneratedRegistration({
+      entries: ['main'],
+      generatedDirName: 'tanstack',
+      srcDirectory,
+      i18nRuntimeModule: '@my-org/i18n/runtime',
+      canonicalTypeChecks: [
+        "import type { UltramodernCanonicalRoutes } from '@my-org/i18n/runtime';",
+        "const talksParams: UltramodernCanonicalRoutes['/talks'] = {};",
+        'void talksParams;',
+      ],
+    });
   });
 
   test('claims custom routes, injects runtime plugin, and merges route specs', async () => {
@@ -576,32 +685,36 @@ describe('tanstack router cli plugin', () => {
       tanstackRouterPlugin().setup!(api as any);
       await taps.generateEntryCode({ entrypoints: [entrypoint] });
 
-      const register = await readFile(
-        path.join(srcDirectory, 'modern-tanstack', 'register.gen.d.ts'),
-        'utf-8',
+      const hasI18n = registeredPlugins.some(
+        plugin => plugin.name === '@modern-js/plugin-i18n',
       );
+      await typecheckGeneratedRegistration({
+        entries: ['main'],
+        generatedDirName: 'modern-tanstack',
+        srcDirectory,
+        ...(hasI18n && {
+          i18nRuntimeModule: '@modern-js/plugin-i18n/runtime',
+        }),
+        canonicalTypeChecks: hasI18n
+          ? [
+              "import type { UltramodernCanonicalRoutes } from '@modern-js/plugin-i18n/runtime';",
+              "const aboutParams: UltramodernCanonicalRoutes['/about'] = {};",
+              'void aboutParams;',
+            ]
+          : [],
+      });
       await rm(dir, { recursive: true, force: true });
-      return register;
     };
 
     // A hand-rolled `/:lang/` app WITHOUT plugin-i18n must not get the
     // augmentation — it would reference an unresolvable module (TS2664).
-    const withoutI18n = await runGenerate([{ name: '@modern-js/app-tools' }]);
-    expect(withoutI18n).not.toContain('plugin-i18n');
-    expect(withoutI18n).not.toContain('UltramodernCanonicalRoutes');
-    expect(withoutI18n).toContain(
-      "declare module '@modern-js/plugin-tanstack/runtime'",
-    );
+    await runGenerate([{ name: '@modern-js/app-tools' }]);
 
     // With plugin-i18n registered the canonical route map is emitted.
-    const withI18n = await runGenerate([
+    await runGenerate([
       { name: '@modern-js/app-tools' },
       { name: '@modern-js/plugin-i18n' },
     ]);
-    expect(withI18n).toContain(
-      "declare module '@modern-js/plugin-i18n/runtime'",
-    );
-    expect(withI18n).toContain("'/about': Record<string, never>;");
   });
 
   test('generates plugin-owned TanStack route files through core route generation', async () => {
@@ -689,23 +802,18 @@ describe('tanstack router cli plugin', () => {
       [entrypoint],
       {
         entrypointsKey: '@modern-js/plugin-tanstack',
+        hydrateRscClientRoutes: true,
+        includeRouteServerLoadersInSsrEntry: false,
+        isolateRouteDataInRscLayer: true,
+        serverRoutesFileName: 'tanstack-routes.server.js',
       },
     );
 
-    const routerGen = await readFile(
-      path.join(srcDirectory, 'tanstack-generated', 'main', 'router.gen.ts'),
-      'utf-8',
-    );
-    expect(routerGen).toContain("} from '@modern-js/plugin-tanstack/runtime';");
-    expect(routerGen).toContain('modernRouteAction: action_0');
-
-    const register = await readFile(
-      path.join(srcDirectory, 'tanstack-generated', 'register.gen.d.ts'),
-      'utf-8',
-    );
-    expect(register).toContain(
-      "declare module '@modern-js/plugin-tanstack/runtime'",
-    );
+    await typecheckGeneratedRegistration({
+      entries: ['main'],
+      generatedDirName: 'tanstack-generated',
+      srcDirectory,
+    });
   });
 
   test('regenerates plugin-owned TanStack files for scoped file changes', async () => {

package/tests/router/clientHydration.test.tsx

@@ -1,9 +1,13 @@
 import type { AnyRouter } from '@tanstack/react-router';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import React, { Suspense } from 'react';
 import { ModernRouterClient } from '../../src/runtime/clientHydration';
+import { createTreeGetterFromFlightStream } from '../../src/runtime/rsc/treeGetter';
 
 let hydrateImpl: () => Promise<unknown>;
+let createFromReadableStreamImpl: () => Promise<unknown>;
+let registeredCallServer: unknown;
+let decoderCallServer: unknown;
 
 rstest.mock('@tanstack/react-router', () => ({
   RouterProvider: ({ router }: { router: { label: string } }) => (
@@ -15,6 +19,24 @@ rstest.mock('@tanstack/react-router/ssr/client', () => ({
   hydrate: () => hydrateImpl(),
 }));
 
+rstest.mock('@modern-js/runtime/rsc/client', () => {
+  const callServer = () => undefined;
+
+  return {
+    callServer,
+    createFromReadableStream: (
+      _stream: ReadableStream<Uint8Array>,
+      options: { callServer: unknown },
+    ) => {
+      decoderCallServer = options.callServer;
+      return createFromReadableStreamImpl();
+    },
+    setServerCallback: (callback: unknown) => {
+      registeredCallServer = callback;
+    },
+  };
+});
+
 function createDeferred<T>() {
   let resolve!: (value: T | PromiseLike<T>) => void;
   let reject!: (reason?: unknown) => void;
@@ -37,6 +59,41 @@ function createRouter(label: string): AnyRouter {
   } as unknown as AnyRouter;
 }
 
+function FlightTree({ getTree }: { getTree: () => unknown }) {
+  const tree = getTree();
+  if (
+    typeof tree !== 'object' ||
+    tree === null ||
+    !('label' in tree) ||
+    typeof tree.label !== 'string'
+  ) {
+    throw new Error('Expected the decoded Flight tree to contain a label.');
+  }
+  return <div data-testid="flight-tree">{tree.label}</div>;
+}
+
+class FlightErrorBoundary extends React.Component<
+  { children: React.ReactNode; onError: (error: unknown) => void },
+  { error: unknown }
+> {
+  state = { error: undefined };
+
+  static getDerivedStateFromError(error: unknown) {
+    return { error };
+  }
+
+  componentDidCatch(error: unknown) {
+    this.props.onError(error);
+  }
+
+  render() {
+    if (this.state.error !== undefined) {
+      return <div data-testid="flight-error">failed</div>;
+    }
+    return this.props.children;
+  }
+}
+
 describe('TanStack SSR client hydration', () => {
   it('keeps the router behind Suspense until late SSR hydration completes', async () => {
     const hydration = createDeferred<void>();
@@ -58,4 +115,86 @@ describe('TanStack SSR client hydration', () => {
     ).toContain('inventory');
     expect(screen.queryByTestId('hydrating')).toBeNull();
   });
+
+  it('reuses one Flight decode while suspended and returns the resolved tree synchronously', async () => {
+    const flight = createDeferred<unknown>();
+    const decodeFlight = rstest.fn(() => flight.promise);
+    createFromReadableStreamImpl = decodeFlight;
+    registeredCallServer = undefined;
+    decoderCallServer = undefined;
+
+    const getTree = createTreeGetterFromFlightStream(
+      new ReadableStream<Uint8Array>(),
+    );
+    const view = (
+      <Suspense fallback={<div data-testid="flight-loading">loading</div>}>
+        <FlightTree getTree={getTree} />
+      </Suspense>
+    );
+    const { rerender } = render(view);
+
+    expect(screen.getByTestId('flight-loading')).toBeTruthy();
+    await waitFor(() => expect(decodeFlight).toHaveBeenCalledTimes(1));
+    expect(registeredCallServer).toBe(decoderCallServer);
+
+    await act(() => rerender(view));
+    expect(screen.getByTestId('flight-loading')).toBeTruthy();
+    expect(decodeFlight).toHaveBeenCalledTimes(1);
+
+    const tree = { label: 'decoded inventory' };
+    await act(async () => {
+      flight.resolve(tree);
+      await flight.promise;
+    });
+
+    expect((await screen.findByTestId('flight-tree')).textContent).toBe(
+      tree.label,
+    );
+    expect(decodeFlight).toHaveBeenCalledTimes(1);
+    expect(getTree()).toBe(tree);
+  });
+
+  it('preserves the original Flight decode rejection for the error boundary', async () => {
+    const flight = createDeferred<unknown>();
+    const failure = new Error('Flight decode failed');
+    const decodeFlight = rstest.fn(() => flight.promise);
+    createFromReadableStreamImpl = decodeFlight;
+    let caughtError: unknown;
+    const errorLog = rstest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined);
+
+    try {
+      const getTree = createTreeGetterFromFlightStream(
+        new ReadableStream<Uint8Array>(),
+      );
+      await act(() =>
+        render(
+          <FlightErrorBoundary
+            onError={error => {
+              caughtError = error;
+            }}
+          >
+            <Suspense
+              fallback={<div data-testid="flight-loading">loading</div>}
+            >
+              <FlightTree getTree={getTree} />
+            </Suspense>
+          </FlightErrorBoundary>,
+        ),
+      );
+
+      expect(screen.getByTestId('flight-loading')).toBeTruthy();
+      await waitFor(() => expect(decodeFlight).toHaveBeenCalledTimes(1));
+      await act(async () => {
+        flight.reject(failure);
+        await flight.promise.catch(() => undefined);
+      });
+
+      expect(await screen.findByTestId('flight-error')).toBeTruthy();
+      expect(caughtError).toBe(failure);
+    } finally {
+      errorLog.mockRestore();
+    }
+  });
 });

package/tests/router/dataMutation.test.tsx

@@ -34,15 +34,21 @@ function createRouter(handler: {
   action?: RouteHandler;
   loader?: RouteHandler;
   invalidate?: () => Promise<void>;
+  params?: Record<string, string>;
 }) {
   return {
-    buildLocation: ({ to }: { to?: string }) => ({
-      pathname: typeof to === 'string' ? to : '/',
-    }),
-    getParsedLocationHref: (location: { pathname: string }) =>
-      location.pathname,
-    getMatchedRoutes: () => ({
-      foundRoute: {
+    buildLocation: ({ to }: { to?: string }) => {
+      const href = typeof to === 'string' ? to : '/';
+      const url = new URL(href, 'http://localhost');
+      return {
+        href: `${url.pathname}${url.search}${url.hash}`,
+        pathname: url.pathname,
+      };
+    },
+    getMatchedRoutes: () => [
+      [],
+      handler.params || {},
+      {
         options: {
           staticData: {
             modernRouteAction: handler.action,
@@ -50,8 +56,7 @@ function createRouter(handler: {
           },
         },
       },
-      routeParams: {},
-    }),
+    ],
     navigate: rstest.fn(async () => undefined),
     invalidate: rstest.fn(handler.invalidate || (async () => undefined)),
   };
@@ -199,6 +204,42 @@ describe('tanstack data mutation fetcher', () => {
     expect(states).toEqual(['idle', 'submitting', 'loading', 'idle']);
   });
 
+  test('passes built href and matched route params to mutation actions', async () => {
+    const action = rstest.fn(
+      async ({ request, params }: Parameters<RouteHandler>[0]) => ({
+        params,
+        requestUrl: request.url,
+      }),
+    );
+    currentRouter = createRouter({
+      action,
+      params: { userId: '42' },
+    });
+
+    render(<FetcherHarness />);
+
+    await act(async () => {
+      await latestFetcher!.submit(
+        { amount: 2 },
+        {
+          method: 'post',
+          action: '/users/42?tab=edit#details',
+        },
+      );
+    });
+
+    expect(action).toHaveBeenCalledTimes(1);
+    const actionArgs = action.mock.calls[0][0];
+    const expectedRequestUrl = `${window.location.origin}/users/42?tab=edit#details`;
+    expect(actionArgs.params).toEqual({ userId: '42' });
+    expect(actionArgs.request.url).toBe(expectedRequestUrl);
+    expect(latestFetcher?.data).toEqual({
+      params: { userId: '42' },
+      requestUrl: expectedRequestUrl,
+    });
+    expect(currentRouter.invalidate).toHaveBeenCalledTimes(1);
+  });
+
   test('surfaces non-2xx action responses as fetcher errors', async () => {
     const actionResult = createDeferred<Response>();
     currentRouter = createRouter({