@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.9 → 3.2.0-ultramodern.91

package/tests/router/routeTree.test.ts

@@ -1,7 +1,10 @@
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type { NestedRoute } from '@modern-js/types';
 import { createMemoryHistory } from '@tanstack/history';
-import { createRouter } from '@tanstack/react-router';
+import { createRouter, Outlet, RouterProvider } from '@tanstack/react-router';
+import type { ComponentType } from 'react';
+import { createElement, lazy } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import {
   createRouteTreeFromModernRoutes,
   createRouteTreeFromRouteObjects,
@@ -23,6 +26,9 @@ type TestRouteObject = RouteObject & {
   hasLoader?: boolean;
   inValidSSRRoute?: boolean;
   isClientComponent?: boolean;
+  lazyImport?: () => Promise<unknown>;
+  loaderDeps?: unknown;
+  validateSearch?: unknown;
 };
 
 type TestNestedRoute = NestedRoute & {
@@ -30,6 +36,8 @@ type TestNestedRoute = NestedRoute & {
   hasAction?: boolean;
   hasClientLoader?: boolean;
   hasLoader?: boolean;
+  loaderDeps?: unknown;
+  validateSearch?: unknown;
 };
 
 type ShouldRevalidateArgs = {
@@ -51,6 +59,8 @@ type TestRoute = {
     shouldReload?: (args: ShouldReloadArgs) => boolean | undefined;
     ssr?: boolean;
     staticData: Record<string, unknown>;
+    loaderDeps?: unknown;
+    validateSearch?: unknown;
   };
 };
 
@@ -145,6 +155,46 @@ describe('tanstack route tree from RouteObject[]', () => {
     expect(userMatch?.loaderData).toEqual({ id: '123' });
   });
 
+  test('preserves TanStack search contracts from RouteObject routes', () => {
+    const rootValidateSearch = (search: unknown) => ({ root: search });
+    const rootLoaderDeps = ({ search }: { search: unknown }) => ({ search });
+    const childValidateSearch = (search: unknown) => ({ child: search });
+    const childLoaderDeps = ({ search }: { search: unknown }) => ({ search });
+    const routes: TestRouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        validateSearch: rootValidateSearch,
+        loaderDeps: rootLoaderDeps,
+        Component: () => null,
+        children: [
+          {
+            id: 'search',
+            path: 'search',
+            validateSearch: childValidateSearch,
+            loaderDeps: childLoaderDeps,
+            Component: () => null,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/search'],
+      }),
+      context: {},
+    }) as unknown as TestRouter;
+    const searchRoute = getLooseRoute(router, '/search');
+
+    expect(routeTree.options.validateSearch).toBe(rootValidateSearch);
+    expect(routeTree.options.loaderDeps).toBe(rootLoaderDeps);
+    expect(searchRoute.options.validateSearch).toBe(childValidateSearch);
+    expect(searchRoute.options.loaderDeps).toBe(childLoaderDeps);
+  });
+
   test('uses TanStack route ids when loading RSC payload route data', async () => {
     const rootLoader = rstest.fn(() => ({ source: 'modern-root' }));
     const userLoader = rstest.fn(() => ({ source: 'modern-user' }));
@@ -234,6 +284,107 @@ describe('tanstack route tree from RouteObject[]', () => {
     expect(splatParamValue).toBe('a/b/c');
   });
 
+  test('preloads lazy Modern route components for server rendering', async () => {
+    const LazyRouteComponent = () =>
+      createElement('main', null, 'Lazy route ready');
+    const lazyImport = rstest.fn(async () => ({
+      default: LazyRouteComponent,
+    }));
+    const routes: TestRouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        Component: () => null,
+        children: [
+          {
+            id: 'lazy',
+            path: 'lazy',
+            Component: lazy(lazyImport),
+            lazyImport,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/lazy');
+    const lazyRoute = getLooseRoute(router, '/lazy');
+    const component = lazyRoute.options.component as ComponentType & {
+      preload?: () => Promise<unknown>;
+    };
+
+    await component.preload?.();
+
+    expect(renderToStaticMarkup(createElement(component))).toContain(
+      'Lazy route ready',
+    );
+    expect(lazyImport).toHaveBeenCalled();
+  });
+
+  test('renders preloaded lazy child routes through TanStack router SSR', async () => {
+    const LazyRouteComponent = () =>
+      createElement('main', null, 'Lazy child route ready');
+    const lazyImport = rstest.fn(async () => ({
+      default: LazyRouteComponent,
+    }));
+    const routes: TestRouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        Component: () => createElement('section', null, createElement(Outlet)),
+        children: [
+          {
+            id: 'lazy',
+            path: 'lazy',
+            Component: lazy(lazyImport),
+            lazyImport,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/lazy');
+
+    expect(
+      renderToStaticMarkup(createElement(RouterProvider, { router } as never)),
+    ).toContain('Lazy child route ready');
+  });
+
+  test('unwraps nested ESM route module defaults before server rendering', async () => {
+    const LazyRouteComponent = () =>
+      createElement('main', null, 'Nested lazy child route ready');
+    const lazyImport = rstest.fn(async () => ({
+      default: {
+        default: LazyRouteComponent,
+      },
+    }));
+    const routes: TestRouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        Component: () => createElement('section', null, createElement(Outlet)),
+        children: [
+          {
+            id: 'lazy',
+            path: 'lazy',
+            Component: lazy(
+              lazyImport as () => Promise<{ default: ComponentType }>,
+            ),
+            lazyImport,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/lazy');
+
+    expect(
+      renderToStaticMarkup(createElement(RouterProvider, { router } as never)),
+    ).toContain('Nested lazy child route ready');
+  });
+
   test('preserves route handle and maps shouldRevalidate to shouldReload', async () => {
     const shouldRevalidate = rstest.fn(({ nextUrl }: ShouldRevalidateArgs) =>
       nextUrl.pathname.endsWith('/456'),
@@ -417,6 +568,47 @@ describe('tanstack route tree from RouteObject[]', () => {
     });
   });
 
+  test('preserves TanStack search contracts from Modern generated routes', () => {
+    const rootValidateSearch = (search: unknown) => ({ root: search });
+    const rootLoaderDeps = ({ search }: { search: unknown }) => ({ search });
+    const childValidateSearch = (search: unknown) => ({ child: search });
+    const childLoaderDeps = ({ search }: { search: unknown }) => ({ search });
+    const modernRoutes: TestNestedRoute[] = [
+      {
+        type: 'nested',
+        origin: 'config',
+        id: 'root',
+        isRoot: true,
+        validateSearch: rootValidateSearch,
+        loaderDeps: rootLoaderDeps,
+        children: [
+          {
+            type: 'nested',
+            origin: 'config',
+            id: 'search',
+            path: 'search',
+            validateSearch: childValidateSearch,
+            loaderDeps: childLoaderDeps,
+          },
+        ],
+      },
+    ];
+    const routeTree = createRouteTreeFromModernRoutes(modernRoutes);
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/search'],
+      }),
+      context: {},
+    }) as unknown as TestRouter;
+    const searchRoute = getLooseRouteByModernRouteId(router, 'search');
+
+    expect(routeTree.options.validateSearch).toBe(rootValidateSearch);
+    expect(routeTree.options.loaderDeps).toBe(rootLoaderDeps);
+    expect(searchRoute.options.validateSearch).toBe(childValidateSearch);
+    expect(searchRoute.options.loaderDeps).toBe(childLoaderDeps);
+  });
+
   test('preserves Modern generated client route metadata', () => {
     const modernRoutes: TestNestedRoute[] = [
       {

package/tests/router/tanstackTypes.test.ts

@@ -1,8 +1,12 @@
+import { execFile } from 'node:child_process';
 import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
+import { promisify } from 'node:util';
 import { generateTanstackRouterTypesSourceForEntry } from '../../src/cli/tanstackTypes';
 
+const execFileAsync = promisify(execFile);
+
 describe('tanstack router type generation', () => {
   let tempDir: string | undefined;
 
@@ -55,8 +59,188 @@ describe('tanstack router type generation', () => {
     );
     expect(routerGenTs).toContain('modernRouteLoader: loader_0');
     expect(routerGenTs).toContain('modernRouteAction: action_0');
+    expect(routerGenTs).toContain('modernRouteId?: string;');
+    expect(routerGenTs).not.toContain(
+      'return Object.keys(staticData).length > 0 ? staticData : undefined;',
+    );
     expect(routerGenTs).toContain(
       "} from '@modern-js/plugin-tanstack/runtime';",
     );
+    expect(routerGenTs).toContain('modernTanstackRouterFastDefaults,');
+    expect(routerGenTs).toContain('...modernTanstackRouterFastDefaults,');
+  });
+
+  test('typechecks generated TanStack search contracts', async () => {
+    tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-types-'));
+    const srcDirectory = path.join(tempDir, 'src');
+    const routeDir = path.join(srcDirectory, 'routes');
+    const generatedDir = path.join(srcDirectory, 'modern-tanstack', 'index');
+    await mkdir(routeDir, { recursive: true });
+    await mkdir(generatedDir, { recursive: true });
+    await writeFile(
+      path.join(routeDir, 'search.contract.ts'),
+      [
+        'export const validateSearch = (search: { q?: string }) => ({ q: search.q ?? "" });',
+        'export const loaderDeps = ({ search }: { search: { q: string } }) => ({ q: search.q });',
+      ].join('\n'),
+    );
+
+    const { routerGenTs } = await generateTanstackRouterTypesSourceForEntry({
+      appContext: {
+        srcDirectory,
+        internalSrcAlias: '@/_',
+      } as any,
+      entryName: 'index',
+      routes: [
+        {
+          type: 'nested',
+          id: 'layout',
+          isRoot: true,
+          validateSearch: '@/_/routes/search.contract',
+          loaderDeps: '@/_/routes/search.contract',
+          children: [
+            {
+              type: 'nested',
+              id: 'search/page',
+              path: 'search',
+              validateSearch: '@/_/routes/search.contract',
+              loaderDeps: '@/_/routes/search.contract',
+            },
+          ],
+        },
+      ] as any,
+    });
+
+    await writeFile(path.join(generatedDir, 'router.gen.ts'), routerGenTs);
+    await writeFile(
+      path.join(srcDirectory, 'runtime-shim.d.ts'),
+      [
+        "declare module '@modern-js/plugin-tanstack/runtime' {",
+        '  type RouteOptions = {',
+        '    getParentRoute?: () => unknown;',
+        '    id?: string;',
+        '    loader?: unknown;',
+        '    loaderDeps?: unknown;',
+        '    path?: string;',
+        '    staticData?: unknown;',
+        '    validateSearch?: unknown;',
+        '  };',
+        '  type Route<TOptions extends RouteOptions> = {',
+        '    options: TOptions;',
+        '    addChildren<TChildren extends readonly unknown[]>(children: TChildren): Route<TOptions> & { children: TChildren };',
+        '  };',
+        '  export function createMemoryHistory(options: unknown): unknown;',
+        '  export const modernTanstackRouterFastDefaults: Record<string, unknown>;',
+        '  export function createRootRouteWithContext<TContext>(): <TOptions extends RouteOptions>(options: TOptions) => Route<TOptions>;',
+        '  export function createRoute<TOptions extends RouteOptions>(options: TOptions): Route<TOptions>;',
+        '  export function createRouter<TOptions extends Record<string, unknown>>(options: TOptions): TOptions;',
+        '  export function notFound(): never;',
+        '  export function redirect(options: unknown): never;',
+        '}',
+      ].join('\n'),
+    );
+    await writeFile(
+      path.join(srcDirectory, 'assert-search-contracts.ts'),
+      [
+        "import { rootRoute, routeTree } from './modern-tanstack/index/router.gen';",
+        "import { loaderDeps, validateSearch } from './routes/search.contract';",
+        '',
+        'const rootValidateSearch: typeof validateSearch = rootRoute.options.validateSearch;',
+        'const rootLoaderDeps: typeof loaderDeps = rootRoute.options.loaderDeps;',
+        'const childValidateSearch: typeof validateSearch = routeTree.children[0].options.validateSearch;',
+        'const childLoaderDeps: typeof loaderDeps = routeTree.children[0].options.loaderDeps;',
+        '',
+        "rootValidateSearch({ q: 'root' });",
+        "rootLoaderDeps({ search: { q: 'root' } });",
+        "childValidateSearch({ q: 'child' });",
+        "childLoaderDeps({ search: { q: 'child' } });",
+      ].join('\n'),
+    );
+    await writeFile(
+      path.join(tempDir, 'tsconfig.json'),
+      JSON.stringify(
+        {
+          compilerOptions: {
+            lib: ['ESNext', 'DOM'],
+            module: 'Preserve',
+            moduleResolution: 'Bundler',
+            noEmit: true,
+            skipLibCheck: true,
+            strict: true,
+            target: 'ESNext',
+            types: [],
+          },
+          include: ['src/**/*.ts', 'src/**/*.d.ts'],
+        },
+        null,
+        2,
+      ),
+    );
+
+    await expect(
+      execFileAsync('tsgo', ['--noEmit', '-p', 'tsconfig.json'], {
+        cwd: tempDir,
+      }),
+    ).resolves.toBeDefined();
+  });
+
+  test('preserves typed child trees for localized nested route aliases', async () => {
+    tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-types-'));
+    const srcDirectory = path.join(tempDir, 'src');
+
+    const { routerGenTs } = await generateTanstackRouterTypesSourceForEntry({
+      appContext: {
+        srcDirectory,
+        internalSrcAlias: '@/_',
+      } as any,
+      entryName: 'index',
+      routes: [
+        {
+          type: 'nested',
+          id: 'layout',
+          isRoot: true,
+          children: [
+            {
+              type: 'nested',
+              id: '(lang)/layout',
+              path: ':lang',
+              children: [
+                {
+                  type: 'nested',
+                  id: '(lang)/products/(slug)/page',
+                  path: 'products/:slug',
+                },
+                {
+                  type: 'nested',
+                  id: '(lang)/products/(slug)/page__localised_produkty_slug',
+                  path: 'produkty/:slug',
+                },
+                {
+                  type: 'nested',
+                  id: '(lang)/optional/(slug$)/page__localised_volitelne_slug',
+                  path: 'volitelne/:slug?',
+                },
+              ],
+            },
+          ],
+        },
+      ] as any,
+    });
+
+    expect(routerGenTs).toContain(
+      'const route__lang__layout__base = createRoute({',
+    );
+    expect(routerGenTs).toContain(
+      'getParentRoute: () => route__lang__layout__base,',
+    );
+    expect(routerGenTs).toContain('path: "produkty/$slug",');
+    expect(routerGenTs).toContain('path: "volitelne/{-$slug}",');
+    expect(routerGenTs).toContain(
+      'const route__lang__layout = route__lang__layout__base.addChildren([route__lang__products__slug__page, route__lang__products__slug__page__localised_produkty_slug, route__lang__optional__slug$__page__localised_volitelne_slug]);',
+    );
+    expect(routerGenTs).toContain(
+      'export const routeTree = rootRoute.addChildren([route__lang__layout]);',
+    );
+    expect(routerGenTs).not.toContain('route__lang__layout.addChildren([');
   });
 });