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

package/tests/router/prefetchLinkPreload.test.tsx

@@ -1,6 +1,5 @@
 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 +26,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 +49,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']);
   });
 });

package/tests/router/routeHooks.test.ts

@@ -1,113 +1,50 @@
-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';
+import { navigateOnClient } from './clientNavigation';
+
+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 navigateOnClient(router, { 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');
 });

package/tests/router/routeMetadata.test.ts

@@ -0,0 +1,233 @@
+import { spawnSync } from 'node:child_process';
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
+import os from 'node:os';
+import path from 'node:path';
+import { writeRouteMetadataManifest } from '../../src/cli/artifacts';
+import { renderRouteMetadataManifest } from '../../src/cli/routeMetadata';
+
+const requireCjs = createRequire(import.meta.url);
+
+const typedRouteMeta = (canonicalPath: string) => `export const routeMeta = {
+  canonicalPath: '${canonicalPath}',
+  descriptionKey: 'contacts.description',
+  id: 'contacts',
+  indexable: false,
+  localisedPaths: { cs: '/kontakty', en: '${canonicalPath}' },
+  namespace: 'contacts',
+  ownerAppId: 'contacts',
+  public: false,
+  titleKey: 'contacts.title',
+} as const;
+`;
+
+const typecheck = (directory: string) => {
+  fs.writeFileSync(
+    path.join(directory, 'tsconfig.json'),
+    JSON.stringify({
+      compilerOptions: {
+        lib: ['ESNext'],
+        module: 'ESNext',
+        moduleResolution: 'Bundler',
+        noEmit: true,
+        strict: true,
+        target: 'ES2024',
+        types: [],
+      },
+      include: ['src/routes/ultramodern-route-metadata.ts'],
+    }),
+  );
+  const compilerManifestPath = requireCjs.resolve(
+    '@typescript/native-preview/package.json',
+  );
+  const { bin } = JSON.parse(fs.readFileSync(compilerManifestPath, 'utf8')) as {
+    bin: { tsgo: string };
+  };
+  return spawnSync(
+    process.execPath,
+    [
+      path.resolve(path.dirname(compilerManifestPath), bin.tsgo),
+      '--project',
+      path.join(directory, 'tsconfig.json'),
+    ],
+    { encoding: 'utf8' },
+  );
+};
+
+const routeMeta = (id: string) =>
+  `export const routeMeta = { id: '${id}', namespace: 'shop' } as const;\n`;
+
+const EXPECTED_MANIFEST = `// @generated by @modern-js/plugin-tanstack from route.meta.ts files. Run routes-generate; do not edit.
+import { routeMeta as route0 } from './[lang]/about/route.meta';
+import { routeMeta as route1 } from './[lang]/route.meta';
+import { routeMeta as route2 } from './[lang]/stores/[id]/route.meta';
+
+export const ultramodernRouteNamespace = route0.namespace;
+export const ultramodernRouteMetadata = [route0, route1, route2] as const;
+export const ultramodernLocalisedUrls = Object.fromEntries(
+  ultramodernRouteMetadata
+    .filter((route: { canonicalPath: string }) => route.canonicalPath !== '/')
+    .map((route) => [route.canonicalPath, route.localisedPaths]),
+);
+export const ultramodernPublicRoutes = ultramodernRouteMetadata
+  .filter((route) => route.public && route.indexable)
+  .map((route) => ({
+    canonicalPath: route.canonicalPath,
+    descriptionKey: route.descriptionKey,
+    id: route.id,
+    localisedPaths: route.localisedPaths,
+    namespace: route.namespace,
+    ownerAppId: route.ownerAppId,
+    titleKey: route.titleKey,
+    ...('jsonLd' in route ? { jsonLd: route.jsonLd } : {}),
+  }));
+export const ultramodernRouteConfig = {
+  authoring: 'colocated-route-meta',
+  generatedManifest: true,
+  localisedUrls: ultramodernLocalisedUrls,
+  namespace: ultramodernRouteNamespace,
+  publicRoutes: ultramodernPublicRoutes,
+  routes: ultramodernRouteMetadata,
+  source: 'route-owned',
+} as const;
+`;
+
+describe('route metadata manifest', () => {
+  let appDirectory: string;
+  let routesDirectory: string;
+  const write = (relativePath: string, content: string) => {
+    const file = path.join(routesDirectory, relativePath);
+    fs.mkdirSync(path.dirname(file), { recursive: true });
+    fs.writeFileSync(file, content);
+  };
+
+  beforeEach(() => {
+    appDirectory = fs.mkdtempSync(path.join(os.tmpdir(), 'route-metadata-'));
+    routesDirectory = path.join(appDirectory, 'src', 'routes');
+  });
+
+  afterEach(() => {
+    fs.rmSync(appDirectory, { recursive: true, force: true });
+  });
+
+  it('writes a byte-stable, formatted manifest from route.meta.ts files', async () => {
+    write('[lang]/stores/[id]/route.meta.ts', routeMeta('store'));
+    write('[lang]/route.meta.ts', routeMeta('home'));
+    write('[lang]/about/route.meta.ts', routeMeta('about'));
+    write('[lang]/about/page.tsx', 'export default () => null;\n');
+    // Linked metadata belongs to another tree; following it would make the
+    // manifest depend on where the link points.
+    fs.mkdirSync(path.join(routesDirectory, '[lang]/linked-file'));
+    fs.symlinkSync(
+      path.join(routesDirectory, '[lang]/route.meta.ts'),
+      path.join(routesDirectory, '[lang]/linked-file/route.meta.ts'),
+    );
+    fs.symlinkSync(
+      path.join(routesDirectory, '[lang]/about'),
+      path.join(routesDirectory, '[lang]/linked'),
+    );
+    const manifestPath = path.join(
+      routesDirectory,
+      'ultramodern-route-metadata.ts',
+    );
+
+    await writeRouteMetadataManifest({ appDirectory });
+    expect(fs.readFileSync(manifestPath, 'utf8')).toBe(EXPECTED_MANIFEST);
+
+    const writtenAt = fs.statSync(manifestPath).mtimeMs;
+    await new Promise(resolve => setTimeout(resolve, 20));
+    await writeRouteMetadataManifest({ appDirectory });
+    expect(fs.readFileSync(manifestPath, 'utf8')).toBe(EXPECTED_MANIFEST);
+    expect(fs.statSync(manifestPath).mtimeMs).toBe(writtenAt);
+  });
+
+  // Every route literal is narrowed by `as const`. An app whose only route is
+  // not the root must still type-check the root-path filter.
+  it('type-checks a manifest whose only route is not the root', async () => {
+    write('[lang]/contacts/route.meta.ts', typedRouteMeta('/contacts'));
+    await writeRouteMetadataManifest({ appDirectory });
+
+    const result = typecheck(appDirectory);
+
+    expect(result.error).toBeUndefined();
+    expect(result.status, `${result.stdout}\n${result.stderr}`).toBe(0);
+  });
+
+  it('drops deleted route metadata from an existing manifest', async () => {
+    write('[lang]/route.meta.ts', routeMeta('home'));
+    write('[lang]/gone/route.meta.ts', routeMeta('gone'));
+    await writeRouteMetadataManifest({ appDirectory });
+    fs.rmSync(path.join(routesDirectory, '[lang]/gone'), { recursive: true });
+
+    await writeRouteMetadataManifest({ appDirectory });
+
+    const manifest = fs.readFileSync(
+      path.join(routesDirectory, 'ultramodern-route-metadata.ts'),
+      'utf8',
+    );
+    expect(manifest).not.toContain('gone');
+    expect(manifest).toContain(
+      "import { routeMeta as route0 } from './[lang]/route.meta';\n\n",
+    );
+  });
+
+  it('names the fix once the last route metadata is deleted', async () => {
+    write('[lang]/route.meta.ts', routeMeta('home'));
+    await writeRouteMetadataManifest({ appDirectory });
+    const manifestPath = path.join(
+      routesDirectory,
+      'ultramodern-route-metadata.ts',
+    );
+    const manifest = fs.readFileSync(manifestPath, 'utf8');
+    fs.rmSync(path.join(routesDirectory, '[lang]/route.meta.ts'));
+
+    await expect(writeRouteMetadataManifest({ appDirectory })).rejects.toThrow(
+      /none remain below .*Restore at least one route\.meta\.ts/u,
+    );
+    expect(fs.readFileSync(manifestPath, 'utf8')).toBe(manifest);
+  });
+
+  it('keeps an authored file at the manifest path', async () => {
+    write('ultramodern-route-metadata.ts', 'export const authored = true;\n');
+
+    await writeRouteMetadataManifest({ appDirectory });
+
+    expect(
+      fs.readFileSync(
+        path.join(routesDirectory, 'ultramodern-route-metadata.ts'),
+        'utf8',
+      ),
+    ).toBe('export const authored = true;\n');
+  });
+
+  it('writes nothing for an app without route metadata', async () => {
+    await writeRouteMetadataManifest({ appDirectory });
+    write('[lang]/page.tsx', 'export default () => null;\n');
+    await writeRouteMetadataManifest({ appDirectory });
+
+    expect(fs.readdirSync(routesDirectory)).toEqual(['[lang]']);
+  });
+
+  it('renders independently of input order and separators', () => {
+    expect(
+      renderRouteMetadataManifest([
+        '[lang]\\stores\\[id]\\route.meta.ts',
+        '[lang]/route.meta.ts',
+        '[lang]/about/route.meta.ts',
+      ]),
+    ).toBe(EXPECTED_MANIFEST);
+  });
+
+  it('breaks the route list one binding per line past the print width', () => {
+    const manifest = renderRouteMetadataManifest(
+      Array.from({ length: 12 }, (_, index) => `r${index}/route.meta.ts`),
+    );
+
+    expect(manifest).toContain(
+      `export const ultramodernRouteMetadata = [\n${Array.from(
+        { length: 12 },
+        (_, index) => `  route${index},\n`,
+      ).join('')}] as const;\n`,
+    );
+  });
+});