@bleedingdev/modern-js-plugin-tanstack 3.9.0-ultramodern.3 → 3.9.0-ultramodern.5

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,7 +74,7 @@ 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', () => {
@@ -100,27 +100,39 @@ 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);
+  });
+
+  it('preserves NavLink render children and aria-current overrides', async () => {
+    const { anchor } = await renderLink({
+      initialPath: '/settings',
+      useNavLink: true,
+      linkProps: { 'aria-current': 'step', preload: false },
+      children: ({ isActive }) => (isActive ? 'Current step' : 'Other step'),
+    });
+    expect(anchor.textContent).toBe('Current step');
+    expect(anchor.getAttribute('aria-current')).toBe('step');
   });
 });

package/tests/router/prefetchLinkPreload.test.tsx

@@ -27,59 +27,52 @@ 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.each([
+    { expected: 'intent', preload: 'intent' },
+    { expected: false, preload: false },
+  ])('preserves an explicit $expected preload override', ({
+    expected,
+    preload,
+  }) => {
     render(
-      <Link to="/settings" prefetch="render" preload="intent">
+      <Link to="/settings" prefetch="render" preload={preload}>
         Settings
       </Link>,
     );
 
-    expect(capturedOptions.map(o => o.preload)).toEqual(['intent']);
+    expect(capturedOptions[0]?.preload).toBe(expected);
   });
 
-  it('preserves explicit disabled preload', () => {
+  it('maps none prefetch to disabled TanStack preload', () => {
     render(
-      <Link to="/settings" prefetch="render" preload={false}>
+      <Link to="/settings" prefetch="none">
         Settings
       </Link>,
     );
 
-    expect(capturedOptions.map(o => o.preload)).toEqual([false]);
+    expect(capturedOptions[0]?.preload).toBe(false);
   });
 
-  it('maps none prefetch to disabled TanStack preload', () => {
+  it('forwards a supported prefetch mode to TanStack preload', () => {
     render(
-      <Link to="/settings" prefetch="none">
+      <Link to="/settings" prefetch="intent">
         Settings
       </Link>,
     );
 
-    expect(capturedOptions.map(o => o.preload)).toEqual([false]);
+    expect(capturedOptions[0]?.preload).toBe('intent');
   });
 
   it.each([
-    'intent',
-    'render',
-    'viewport',
-  ] as const)('maps %s prefetch to TanStack preload', prefetch => {
+    Link,
+    NavLink,
+  ])('lets explicit preload re-enable prefetch=none', Component => {
     render(
-      <Link to="/settings" prefetch={prefetch}>
+      <Component to="/settings" prefetch="none" preload="render">
         Settings
-      </Link>,
+      </Component>,
     );
 
-    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']);
   });
 });

package/tests/router/register.test.ts

@@ -1,4 +1,4 @@
-import { resolveRouterProvider } from '@modern-js/runtime/context';
+import { resolveRouterProvider } from '@modern-js/runtime-extensions/router-provider';
 import '../../src/runtime/register';
 
 describe("'@modern-js/plugin-tanstack/runtime' import side effects", () => {

package/tests/router/routeHooks.test.ts

@@ -1,113 +1,49 @@
-const calls: Record<string, unknown[]> = {
-  useChildMatches: [],
-  useMatch: [],
-  useMatches: [],
-  useParentMatches: [],
-  useRouterState: [],
-};
-
-rstest.mock('@tanstack/react-router', () => ({
-  useChildMatches: (options: unknown) => {
-    calls.useChildMatches.push(options);
-    return options;
-  },
-  useMatch: (options: unknown) => {
-    calls.useMatch.push(options);
-    return options;
-  },
-  useMatches: (options: unknown) => {
-    calls.useMatches.push(options);
-    return options;
-  },
-  useParentMatches: (options: unknown) => {
-    calls.useParentMatches.push(options);
-    return options;
-  },
-  useRouterState: (options: unknown) => {
-    calls.useRouterState.push(options);
-    return options;
-  },
-}));
-
+import { createMemoryHistory } from '@tanstack/history';
 import {
-  useChildMatches,
-  useMatch,
-  useMatches,
-  useParentMatches,
-  useRouterState,
-} from '../../src/runtime/routeHooks';
-
-const getLastCall = (hookName: keyof typeof calls) => {
-  const callList = calls[hookName];
-  return callList[callList.length - 1];
-};
-
-describe('tanstack route hook structural sharing guards', () => {
-  beforeEach(() => {
-    for (const hookName of Object.keys(calls)) {
-      calls[hookName] = [];
-    }
+  createRootRoute,
+  createRoute,
+  createRouter,
+  RouterProvider,
+} from '@tanstack/react-router';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { useMatches } from '../../src/runtime/routeHooks';
+
+function MatchIds() {
+  const matches = useMatches();
+  return React.createElement(
+    'output',
+    { 'data-testid': 'route-ids' },
+    matches.map(match => match.routeId).join(','),
+  );
+}
+
+test('updates whole match objects after navigation with the structural-sharing guard', async () => {
+  const rootRoute = createRootRoute({ component: MatchIds });
+  const homeRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => null,
   });
-
-  test('disables structural sharing for full internal router objects', () => {
-    useMatch({ from: '/' } as never);
-    useMatches();
-    useParentMatches();
-    useChildMatches();
-    useRouterState();
-
-    expect(getLastCall('useMatch')).toEqual({
-      from: '/',
-      structuralSharing: false,
-    });
-    expect(getLastCall('useMatches')).toEqual({
-      structuralSharing: false,
-    });
-    expect(getLastCall('useParentMatches')).toEqual({
-      structuralSharing: false,
-    });
-    expect(getLastCall('useChildMatches')).toEqual({
-      structuralSharing: false,
-    });
-    expect(getLastCall('useRouterState')).toEqual({
-      structuralSharing: false,
-    });
+  const settingsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/settings',
+    component: () => null,
   });
-
-  test('keeps selected data on the router default', () => {
-    const select = (value: unknown) => value;
-    const matchOptions = { from: '/', select };
-    const matchesOptions = { select };
-    const stateOptions = { select };
-
-    useMatch(matchOptions as never);
-    useMatches(matchesOptions as never);
-    useParentMatches(matchesOptions as never);
-    useChildMatches(matchesOptions as never);
-    useRouterState(stateOptions as never);
-
-    expect(getLastCall('useMatch')).toBe(matchOptions);
-    expect(getLastCall('useMatches')).toBe(matchesOptions);
-    expect(getLastCall('useParentMatches')).toBe(matchesOptions);
-    expect(getLastCall('useChildMatches')).toBe(matchesOptions);
-    expect(getLastCall('useRouterState')).toBe(stateOptions);
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([homeRoute, settingsRoute]),
+    history: createMemoryHistory({ initialEntries: ['/'] }),
+    defaultStructuralSharing: true,
   });
 
-  test('honors explicit structural sharing choices', () => {
-    const enabled = { structuralSharing: true };
-    const disabled = { structuralSharing: false };
-    const matchEnabled = { from: '/', structuralSharing: true };
+  await router.load();
+  expect(
+    renderToString(React.createElement(RouterProvider, { router })),
+  ).toContain('__root__');
 
-    useMatch(matchEnabled as never);
-    useMatches(enabled as never);
-    useParentMatches(disabled as never);
-    useChildMatches(enabled as never);
-    useRouterState(disabled as never);
+  await router.navigate({ to: '/settings' });
 
-    expect(getLastCall('useMatch')).toBe(matchEnabled);
-    expect(getLastCall('useMatches')).toBe(enabled);
-    expect(getLastCall('useParentMatches')).toBe(disabled);
-    expect(getLastCall('useChildMatches')).toBe(enabled);
-    expect(getLastCall('useRouterState')).toBe(disabled);
-  });
+  expect(
+    renderToString(React.createElement(RouterProvider, { router })),
+  ).toContain('/settings');
 });