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

package/tests/router/dataMutation.test.tsx

@@ -105,54 +105,14 @@ describe('tanstack data mutation fetcher', () => {
     states.length = 0;
   });
 
-  test('tracks submitting and loading phases for mutation submit', async () => {
-    const actionResult = createDeferred<Response>();
-    const invalidateResult = createDeferred<void>();
-
-    currentRouter = createRouter({
-      action: async () => actionResult.promise,
-      invalidate: async () => invalidateResult.promise,
-    });
-
-    render(<FetcherHarness />);
-    expect(screen.getByTestId('state').textContent).toBe('idle');
-
-    let submitPromise: Promise<void> | undefined;
-    act(() => {
-      submitPromise = latestFetcher!.submit(
-        { amount: 2 },
-        { method: 'post', action: '/mutation' },
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('state').textContent).toBe('submitting');
-    });
-
-    actionResult.resolve(
-      new Response(JSON.stringify({ count: 2 }), {
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      }),
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('state').textContent).toBe('loading');
-    });
-
-    invalidateResult.resolve();
-
-    await act(async () => {
-      await submitPromise;
-    });
-
-    expect(screen.getByTestId('state').textContent).toBe('idle');
-    expect(screen.getByTestId('data').textContent).toBe('{"count":2}');
-    expect(states).toEqual(['idle', 'submitting', 'loading', 'idle']);
-  });
-
-  test('defaults fetcher submit without method to mutation state', async () => {
+  test.each([
+    { amount: 2, count: 2, method: 'post' as const, name: 'explicit method' },
+    { amount: 1, count: 1, method: undefined, name: 'default method' },
+  ])('tracks submitting/loading phases with the $name', async ({
+    amount,
+    count,
+    method,
+  }) => {
     const actionResult = createDeferred<Response>();
     const invalidateResult = createDeferred<void>();
     const action = rstest.fn(async () => actionResult.promise);
@@ -170,8 +130,11 @@ describe('tanstack data mutation fetcher', () => {
     let submitPromise: Promise<void> | undefined;
     act(() => {
       submitPromise = latestFetcher!.submit(
-        { amount: 1 },
-        { action: '/mutation' },
+        { amount },
+        {
+          ...(method === undefined ? {} : { method }),
+          action: '/mutation',
+        },
       );
     });
 
@@ -182,7 +145,7 @@ describe('tanstack data mutation fetcher', () => {
     expect(loader).not.toHaveBeenCalled();
 
     actionResult.resolve(
-      new Response(JSON.stringify({ count: 1 }), {
+      new Response(JSON.stringify({ count }), {
         headers: {
           'Content-Type': 'application/json',
         },
@@ -200,7 +163,9 @@ describe('tanstack data mutation fetcher', () => {
     });
 
     expect(screen.getByTestId('state').textContent).toBe('idle');
-    expect(screen.getByTestId('data').textContent).toBe('{"count":1}');
+    expect(screen.getByTestId('data').textContent).toBe(
+      JSON.stringify({ count }),
+    );
     expect(states).toEqual(['idle', 'submitting', 'loading', 'idle']);
   });
 
@@ -460,37 +425,4 @@ describe('tanstack data mutation fetcher', () => {
       globalThis.FormData = NativeFormData;
     }
   });
-
-  test('does not throw for Form submit with non-2xx response and still invalidates', async () => {
-    const action = rstest.fn(
-      async () =>
-        new Response(JSON.stringify({ message: 'invalid amount' }), {
-          status: 422,
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }),
-    );
-    currentRouter = createRouter({
-      action,
-    });
-
-    render(
-      <Form method="post" action="/mutation">
-        <button type="submit">submit</button>
-      </Form>,
-    );
-
-    const form = document.querySelector('form');
-    expect(form).toBeTruthy();
-
-    await act(async () => {
-      fireEvent.submit(form!);
-    });
-
-    await waitFor(() => {
-      expect(action).toHaveBeenCalledTimes(1);
-      expect(currentRouter.invalidate).toHaveBeenCalledTimes(1);
-    });
-  });
 });

package/tests/router/flightSerialization.roundtrip.test.tsx

@@ -45,21 +45,22 @@ test('round-trips TanStack RSC flight values across supported value types', asyn
   const circular: Record<string, unknown> = { marker: 'circular' };
   circular.self = circular;
 
+  const rscProxy = createRscProxy(() => ({ slot: 'server' }), {
+    renderable: true,
+    stream: createStream(),
+  }) as React.ReactElement & Record<PropertyKey, unknown>;
+
   const mapValue = new Map<unknown, unknown>([
     ['primitive', 1],
     ['shared', shared],
     [shared, circular],
+    ['rscProxy', rscProxy],
   ]);
   mapValue.set('self', mapValue);
 
-  const setValue = new Set<unknown>(['set-item', shared, circular]);
+  const setValue = new Set<unknown>(['set-item', shared, circular, rscProxy]);
   setValue.add(setValue);
 
-  const rscProxy = createRscProxy(() => ({ slot: 'server' }), {
-    renderable: true,
-    stream: createStream(),
-  }) as React.ReactElement & Record<PropertyKey, unknown>;
-
   const fixture: RoundTripFixture = {
     bigintValue: 9007199254740993n,
     booleanValue: true,
@@ -115,12 +116,14 @@ test('round-trips TanStack RSC flight values across supported value types', asyn
   expect(revived.mapValue.get('shared')).toBe(revived.sharedA);
   expect(revived.mapValue.get(revived.sharedA)).toBe(revived.circular);
   expect(revived.mapValue.get('self')).toBe(revived.mapValue);
+  expect(isValidElement(revived.mapValue.get('rscProxy'))).toBe(true);
 
   expect(revived.setValue).toBeInstanceOf(Set);
   expect(revived.setValue).not.toBe(setValue);
   expect(revived.setValue.has('set-item')).toBe(true);
   expect(revived.setValue.has(revived.sharedA)).toBe(true);
   expect(revived.setValue.has(revived.circular)).toBe(true);
+  expect([...revived.setValue].some(value => isValidElement(value))).toBe(true);
   expect(revived.setValue.has(revived.setValue)).toBe(true);
 
   expect(serialized.rscProxy).not.toBe(rscProxy);

package/tests/router/generateRouteArtifacts.test.ts

@@ -1,19 +1,11 @@
-// Behavioral coverage for the headless routes-generate entry point: the
-// export-shape test in cli.test.ts would pass even if the body were
-// reverted, so this file pins the actual prepare-only drive contract —
-// createRunOptions against the app dir, cli.init with build-command
-// semantics, the MODERN_ARGV gate that makes analyze.onPrepare fire
-// generateEntryCode, and the absolute config-file resolution that keeps
-// headless runs (cwd != appDirectory) from feeding `false` into node's
-// path APIs.
+// The headless entry must drive the real TanStack artifact writer. Checking
+// only the createRunOptions/cli.init choreography would allow a no-op CLI to
+// pass while leaving router.gen.ts stale or missing.
 const createRunOptionsMock = rstest.fn(async (options: unknown) => ({
   mockRunOptions: true,
   received: options,
 }));
-const cliInitMock = rstest.fn(async (options: unknown) => ({
-  appContext: {},
-  received: options,
-}));
+const cliInitMock = rstest.fn(async () => ({ appContext: {} }));
 
 rstest.mock('@modern-js/app-tools/cli/run', () => ({
   createRunOptions: createRunOptionsMock,
@@ -26,7 +18,10 @@ import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 import { INTERNAL_RUNTIME_PLUGINS } from '@modern-js/utils';
-import { generateTanstackRouteArtifacts } from '../../src/cli';
+import {
+  generateTanstackRouteArtifacts,
+  writeTanstackRouterTypesForEntries,
+} from '../../src/cli';
 
 function makeAppDir(withConfig: boolean): string {
   const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'tanstack-routes-gen-'));
@@ -46,9 +41,55 @@ describe('generateTanstackRouteArtifacts (headless routes-generate)', () => {
     cliInitMock.mockClear();
   });
 
-  it('drives a prepare-only cli.init with build-command semantics', async () => {
+  it('writes a real route artifact through the prepare-only CLI drive', async () => {
     const previousArgv = process.env.MODERN_ARGV;
     const appDirectory = makeAppDir(true);
+    const srcDirectory = path.join(appDirectory, 'src');
+    const componentPath = path.join(srcDirectory, 'routes', 'page.tsx');
+    fs.mkdirSync(path.dirname(componentPath), { recursive: true });
+    fs.writeFileSync(
+      componentPath,
+      'export default function Page() { return null; }\n',
+      'utf-8',
+    );
+
+    const runOptions = {
+      cwd: appDirectory,
+      version: '9.9.9-test',
+      internalPlugins: INTERNAL_RUNTIME_PLUGINS,
+      configFile: path.resolve(appDirectory, 'modern.config'),
+    };
+    createRunOptionsMock.mockResolvedValue({
+      mockRunOptions: true,
+      received: runOptions,
+    });
+    cliInitMock.mockImplementation(async () => {
+      await writeTanstackRouterTypesForEntries({
+        appContext: {
+          srcDirectory,
+          internalSrcAlias: '@/_',
+          entrypoints: [{ entryName: 'main', isMainEntry: true }],
+        } as any,
+        routesByEntry: {
+          main: [
+            {
+              type: 'nested',
+              id: 'layout',
+              isRoot: true,
+              children: [
+                {
+                  type: 'nested',
+                  id: 'page',
+                  index: true,
+                  _component: '@/_/routes/page',
+                },
+              ],
+            },
+          ] as any,
+        },
+      });
+      return { appContext: {} };
+    });
 
     try {
       await generateTanstackRouteArtifacts({
@@ -61,26 +102,25 @@ describe('generateTanstackRouteArtifacts (headless routes-generate)', () => {
         string,
         unknown
       >;
+      // The headless entry must resolve cwd/configFile from the target app
+      // directory, not the process's own cwd — that was the actual bug.
       expect(runOptionsArg.cwd).toBe(appDirectory);
-      expect(runOptionsArg.version).toBe('9.9.9-test');
-      expect(runOptionsArg.internalPlugins).toBe(INTERNAL_RUNTIME_PLUGINS);
-
-      // The config file is resolved to an absolute base path against the app
-      // directory (not process.cwd()). Without this, a headless run from a
-      // different cwd finds no config, `findExists` returns `false`, and that
-      // boolean reaches `path.isAbsolute` deep inside plugin/cli.
       expect(runOptionsArg.configFile).toBe(
         path.resolve(appDirectory, 'modern.config'),
       );
 
       expect(cliInitMock).toHaveBeenCalledTimes(1);
-      const initArg = cliInitMock.mock.calls[0][0] as Record<string, unknown>;
-      expect(initArg.command).toBe('build');
-      expect(initArg.mockRunOptions).toBe(true);
 
-      // checkIsBuildCommands() resolves the command from MODERN_ARGV — this
-      // is what lets analyze.onPrepare fire generateEntryCode headlessly.
-      expect(process.env.MODERN_ARGV).toBe('node modern build');
+      expect(
+        fs.existsSync(
+          path.join(srcDirectory, 'modern-tanstack', 'main', 'router.gen.ts'),
+        ),
+      ).toBe(true);
+      const registerArtifact = fs.readFileSync(
+        path.join(srcDirectory, 'modern-tanstack', 'register.gen.d.ts'),
+        'utf-8',
+      );
+      expect(registerArtifact).toContain('./main/router.gen');
     } finally {
       fs.rmSync(appDirectory, { force: true, recursive: true });
       if (previousArgv === undefined) {
@@ -91,7 +131,7 @@ describe('generateTanstackRouteArtifacts (headless routes-generate)', () => {
     }
   });
 
-  it('throws a clear error (never a boolean path crash) when no config file exists', async () => {
+  it('throws a clear error when no config file exists', async () => {
     const appDirectory = makeAppDir(false);
 
     try {

package/tests/router/loaderBridge.test.ts

@@ -1,7 +1,5 @@
 import { isNotFound, isRedirect } from '@tanstack/react-router';
 import {
-  createRouteStaticData,
-  isAbsoluteUrl,
   mapSplatParamsForModernLoader,
   modernLoaderToTanstack,
   throwTanstackRedirect,
@@ -53,15 +51,6 @@ describe('throwTanstackRedirect', () => {
   });
 });
 
-describe('isAbsoluteUrl', () => {
-  test('detects absolute and relative URLs', () => {
-    expect(isAbsoluteUrl('https://example.com/a')).toBe(true);
-    expect(isAbsoluteUrl('mailto:x@example.com')).toBe(true);
-    expect(isAbsoluteUrl('/internal/path')).toBe(false);
-    expect(isAbsoluteUrl('relative')).toBe(false);
-  });
-});
-
 describe('mapSplatParamsForModernLoader', () => {
   test('maps TanStack _splat to React Router * only for splat routes', () => {
     expect(
@@ -76,20 +65,6 @@ describe('mapSplatParamsForModernLoader', () => {
   });
 });
 
-describe('createRouteStaticData', () => {
-  test('drops empty fields', () => {
-    const loader = () => null;
-    expect(createRouteStaticData({})).toEqual({});
-    expect(createRouteStaticData({ modernRouteId: '' })).toEqual({});
-    expect(
-      createRouteStaticData({
-        modernRouteId: 'page',
-        modernRouteLoader: loader,
-      }),
-    ).toEqual({ modernRouteId: 'page', modernRouteLoader: loader });
-  });
-});
-
 describe('modernLoaderToTanstack', () => {
   const baseCtx = {
     location: { href: 'http://localhost/products/1' },

package/tests/router/localisedIdentity.test.tsx

@@ -0,0 +1,95 @@
+import { applyLocalisedUrlsToRoutes } from '@modern-js/i18n-runtime-extensions';
+import {
+  createMemoryHistory,
+  createRouter,
+  Outlet,
+  RouterProvider,
+  useLoaderData,
+  useParams,
+} from '@tanstack/react-router';
+import { createElement } from 'react';
+import { renderToString } from 'react-dom/server';
+import { createModernBasepathRewrite } from '../../src/runtime/basepathRewrite';
+import { createRouteTreeFromRouteObjects } from '../../src/runtime/routeTree';
+import { createTanstackRouteObjectsFromConfig } from '../../src/runtime/utils';
+
+function SearchPage() {
+  const data = useLoaderData({ from: '/$lang/search' }) as { language: string };
+  return createElement('p', null, `search:${data.language}`);
+}
+
+function ResourcePage() {
+  const params = useParams({ from: '/$lang/resources/$id' }) as { id: string };
+  return createElement('p', null, `resource:${params.id}`);
+}
+
+test('localized URLs preserve native loader and params route identity in SSR and navigation', async () => {
+  const routes = applyLocalisedUrlsToRoutes(
+    [
+      {
+        type: 'nested',
+        id: 'lang',
+        path: ':lang',
+        component: Outlet,
+        children: [
+          {
+            type: 'nested',
+            id: 'search',
+            path: 'search',
+            component: SearchPage,
+            loader: ({ params }: { params: { lang: string } }) => ({
+              language: params.lang,
+            }),
+          },
+          {
+            type: 'nested',
+            id: 'resource',
+            path: 'resources/:id',
+            component: ResourcePage,
+          },
+        ],
+      },
+    ],
+    ['en', 'cs'],
+    {
+      '/search': { en: '/find', cs: '/hledat' },
+      '/resources/:id': { en: '/resources/:id', cs: '/zdroje/:id' },
+    },
+  );
+  const routeObjects = createTanstackRouteObjectsFromConfig({
+    routesConfig: { routes },
+  })!;
+  const history = createMemoryHistory({
+    initialEntries: ['/base/cs/hledat?q=tractor#results'],
+  });
+  const router = createRouter({
+    context: {
+      request: new Request(
+        'https://example.test/base/cs/hledat?q=tractor#results',
+      ),
+    },
+    routeTree: createRouteTreeFromRouteObjects(routeObjects),
+    history,
+    rewrite: createModernBasepathRewrite('/base', false, routeObjects),
+  });
+  await router.load();
+  expect(router.state.matches.at(-1)?.routeId).toBe('/$lang/search');
+  expect(renderToString(createElement(RouterProvider, { router }))).toContain(
+    'search:cs',
+  );
+  expect(history.location.href).toBe('/base/cs/hledat?q=tractor#results');
+
+  await router.navigate({ to: '/en/search', search: { q: 'tractor' } });
+  expect(history.location.href).toBe('/base/en/find?q=tractor');
+  expect(router.state.matches.at(-1)?.routeId).toBe('/$lang/search');
+  expect(renderToString(createElement(RouterProvider, { router }))).toContain(
+    'search:en',
+  );
+
+  await router.navigate({ to: '/cs/zdroje/a%2Fb' });
+  expect(history.location.href).toBe('/base/cs/zdroje/a%2Fb');
+  expect(router.state.matches.at(-1)?.routeId).toBe('/$lang/resources/$id');
+  expect(renderToString(createElement(RouterProvider, { router }))).toContain(
+    'resource:a/b',
+  );
+});

package/tests/router/prefetchLink.test.tsx

@@ -5,7 +5,7 @@ import {
   createRouter,
   RouterProvider,
 } from '@tanstack/react-router';
-import { render, waitFor } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Link, NavLink } from '../../src/runtime/prefetchLink';
 
@@ -74,15 +74,10 @@ async function renderLink(options: Parameters<typeof buildRouter>[0]) {
     return found as HTMLAnchorElement;
   });
 
-  return { anchor, ...utils };
+  return { anchor, router, ...utils };
 }
 
 describe('tanstack prefetch link adapter - aria-current override', () => {
-  it('defaults active link to aria-current="page" when caller passes nothing', async () => {
-    const { anchor } = await renderLink({ initialPath: '/settings' });
-    expect(anchor.getAttribute('aria-current')).toBe('page');
-  });
-
   it('lets caller aria-current="true" win over the TanStack-forced value', async () => {
     const { anchor } = await renderLink({
       initialPath: '/settings',
@@ -100,27 +95,28 @@ describe('tanstack prefetch link adapter - aria-current override', () => {
     expect(anchor.hasAttribute('aria-current')).toBe(false);
   });
 
-  it('leaves an inactive link untouched when caller passes nothing', async () => {
-    const { anchor } = await renderLink({ initialPath: '/' });
-    expect(anchor.hasAttribute('aria-current')).toBe(false);
-    expect(anchor.getAttribute('data-status')).not.toBe('active');
-  });
-
-  it('resolves render-prop children with the active state like TanStack Link', async () => {
-    const { anchor } = await renderLink({
-      initialPath: '/settings',
+  it('updates render-prop children across an inactive-to-active transition', async () => {
+    const { anchor, router } = await renderLink({
+      initialPath: '/',
       children: ({ isActive }: { isActive: boolean }) =>
         isActive ? 'Active settings' : 'Settings',
     });
-    expect(anchor.textContent).toBe('Active settings');
+
+    expect(anchor.textContent).toBe('Settings');
+
+    await act(async () => {
+      await router.navigate({ to: '/settings' });
+    });
+
+    await waitFor(() => expect(anchor.textContent).toBe('Active settings'));
   });
 
-  it('resolves render-prop children as inactive on a non-matching route', async () => {
+  it('passes the native anchor ref through the router hook', async () => {
+    const ref = React.createRef<HTMLAnchorElement>();
     const { anchor } = await renderLink({
       initialPath: '/',
-      children: ({ isActive }: { isActive: boolean }) =>
-        isActive ? 'Active settings' : 'Settings',
+      linkProps: { ref, prefetch: 'none' },
     });
-    expect(anchor.textContent).toBe('Settings');
+    expect(ref.current).toBe(anchor);
   });
 });

package/tests/router/prefetchLinkPreload.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { Link, NavLink } from '../../src/runtime/prefetchLink';
+import { Link } from '../../src/runtime/prefetchLink';
 
 type CapturedOptions = {
   preload?: unknown;
@@ -27,30 +27,20 @@ describe('tanstack prefetch link adapter - preload mapping', () => {
     mockReturnProps = { href: '/settings' };
   });
 
-  it('defaults TanStack preload to viewport', () => {
-    render(<Link to="/settings">Settings</Link>);
-
-    expect(capturedOptions.map(o => o.preload)).toEqual(['viewport']);
-  });
-
-  it('preserves explicit preload', () => {
+  it('preserves an explicit false preload override', () => {
     render(
-      <Link to="/settings" prefetch="render" preload="intent">
+      <Link to="/settings" prefetch="render" preload={false}>
         Settings
       </Link>,
     );
 
-    expect(capturedOptions.map(o => o.preload)).toEqual(['intent']);
+    expect(capturedOptions[0]?.preload).toBe(false);
   });
 
-  it('preserves explicit disabled preload', () => {
-    render(
-      <Link to="/settings" prefetch="render" preload={false}>
-        Settings
-      </Link>,
-    );
+  it('defaults to viewport preload when no prefetch is given', () => {
+    render(<Link to="/settings">Settings</Link>);
 
-    expect(capturedOptions.map(o => o.preload)).toEqual([false]);
+    expect(capturedOptions[0]?.preload).toBe('viewport');
   });
 
   it('maps none prefetch to disabled TanStack preload', () => {
@@ -60,26 +50,16 @@ describe('tanstack prefetch link adapter - preload mapping', () => {
       </Link>,
     );
 
-    expect(capturedOptions.map(o => o.preload)).toEqual([false]);
+    expect(capturedOptions[0]?.preload).toBe(false);
   });
 
-  it.each([
-    'intent',
-    'render',
-    'viewport',
-  ] as const)('maps %s prefetch to TanStack preload', prefetch => {
+  it('lets explicit preload re-enable prefetch=none', () => {
     render(
-      <Link to="/settings" prefetch={prefetch}>
+      <Link to="/settings" prefetch="none" preload="render">
         Settings
       </Link>,
     );
 
-    expect(capturedOptions.map(o => o.preload)).toEqual([prefetch]);
-  });
-
-  it('defaults NavLink preload to viewport', () => {
-    render(<NavLink to="/settings">Settings</NavLink>);
-
-    expect(capturedOptions.map(o => o.preload)).toEqual(['viewport']);
+    expect(capturedOptions.map(o => o.preload)).toEqual(['render']);
   });
 });