@bleedingdev/modern-js-plugin-tanstack 3.9.0-ultramodern.2 → 3.9.0-ultramodern.21

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

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,18 +1,12 @@
-// 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: { hooks: { onBeforeExit: { call: async () => {} } } },
 }));
 
 rstest.mock('@modern-js/app-tools/cli/run', () => ({
@@ -25,8 +19,12 @@ 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 } 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 +44,61 @@ 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,
+    });
+    const onBeforeExit = createAsyncHook<() => Promise<void>>();
+    let disposed = false;
+    onBeforeExit.tap(async () => {
+      await Promise.resolve();
+      disposed = true;
+    });
+    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: { hooks: { onBeforeExit } } };
+    });
 
     try {
       await generateTanstackRouteArtifacts({
@@ -61,26 +111,26 @@ 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);
+      expect(disposed).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 +141,69 @@ describe('generateTanstackRouteArtifacts (headless routes-generate)', () => {
     }
   });
 
-  it('throws a clear error (never a boolean path crash) when no config file exists', async () => {
+  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('regenerates the route metadata manifest before loading the config', async () => {
+    const appDirectory = makeAppDir(true);
+    const routesDirectory = path.join(appDirectory, 'src', 'routes');
+    const manifestPath = path.join(
+      routesDirectory,
+      'ultramodern-route-metadata.ts',
+    );
+    fs.mkdirSync(path.join(routesDirectory, '[lang]'), { recursive: true });
+    fs.writeFileSync(
+      path.join(routesDirectory, '[lang]', 'route.meta.ts'),
+      "export const routeMeta = { namespace: 'app' } as const;\n",
+    );
+    // A manifest that still imports a deleted route.meta.ts makes the config
+    // (which imports the manifest) fail to load.
+    fs.writeFileSync(
+      manifestPath,
+      "import { routeMeta as route0 } from './[lang]/deleted/route.meta';\n",
+    );
+    const configLoadFailure = new Error(
+      "Cannot find module './[lang]/deleted/route.meta'",
+    );
+    cliInitMock.mockImplementationOnce(async () => {
+      throw configLoadFailure;
+    });
+    try {
+      await expect(
+        generateTanstackRouteArtifacts({ appDirectory }),
+      ).rejects.toBe(configLoadFailure);
+      const manifest = fs.readFileSync(manifestPath, 'utf8');
+      expect(manifest).toContain(
+        "import { routeMeta as route0 } from './[lang]/route.meta';",
+      );
+      expect(manifest).not.toContain('deleted');
+    } finally {
+      fs.rmSync(appDirectory, { force: true, recursive: true });
+    }
+  });
+
+  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,100 @@
+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';
+import { navigateOnClient } from './clientNavigation';
+
+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' },
+    },
+    'canonical',
+  );
+  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 navigateOnClient(router, {
+    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 navigateOnClient(router, { 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,8 +5,9 @@ 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 { createTanstackNavigation } from '../../src/runtime/navigation';
 import { Link, NavLink } from '../../src/runtime/prefetchLink';
 
 // Real-router harness (no module mocking): STATIC_ACTIVE_PROPS (the
@@ -74,15 +75,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 +96,56 @@ 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);
+  });
+});
+
+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();
 });