@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.12 → 3.2.0-ultramodern.120

package/tests/router/routeTree.test.ts

@@ -1,10 +1,16 @@
 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, renderToString } from 'react-dom/server';
+import { Outlet as PublicOutlet } from '../../src/runtime';
+import { Outlet as ModernOutlet } from '../../src/runtime/outlet';
 import {
   createRouteTreeFromModernRoutes,
   createRouteTreeFromRouteObjects,
+  getModernRouteIdsFromMatches,
 } from '../../src/runtime/routeTree';
 import { __setTanstackRscPayloadDecoderForTests } from '../../src/runtime/rsc/payloadRouter';
 import { createRouteObjectsFromConfig } from '../../src/runtime/utils';
@@ -23,6 +29,9 @@ type TestRouteObject = RouteObject & {
   hasLoader?: boolean;
   inValidSSRRoute?: boolean;
   isClientComponent?: boolean;
+  lazyImport?: () => Promise<unknown>;
+  loaderDeps?: unknown;
+  validateSearch?: unknown;
 };
 
 type TestNestedRoute = NestedRoute & {
@@ -30,6 +39,8 @@ type TestNestedRoute = NestedRoute & {
   hasAction?: boolean;
   hasClientLoader?: boolean;
   hasLoader?: boolean;
+  loaderDeps?: unknown;
+  validateSearch?: unknown;
 };
 
 type ShouldRevalidateArgs = {
@@ -48,12 +59,21 @@ type ShouldReloadArgs = {
 
 type TestRoute = {
   options: {
+    component?: unknown;
     shouldReload?: (args: ShouldReloadArgs) => boolean | undefined;
     ssr?: boolean;
     staticData: Record<string, unknown>;
+    loaderDeps?: unknown;
+    validateSearch?: unknown;
+    wrapInSuspense?: unknown;
   };
 };
 
+type PreloadableTestComponent = {
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
+
 type TestRouter = {
   load: () => Promise<void>;
   looseRoutesById: Partial<Record<string, TestRoute>>;
@@ -107,6 +127,16 @@ function getLooseRouteByModernRouteId(
   return route;
 }
 
+function countCompletedSuspenseBoundaries(markup: string) {
+  return markup.match(/<!--\$-->/g)?.length || 0;
+}
+
+describe('tanstack runtime public exports', () => {
+  test('exports the Modern Outlet implementation from the runtime entrypoint', () => {
+    expect(PublicOutlet).toBe(ModernOutlet);
+  });
+});
+
 describe('tanstack route tree from RouteObject[]', () => {
   afterEach(() => {
     __setTanstackRscPayloadDecoderForTests();
@@ -145,6 +175,151 @@ describe('tanstack route tree from RouteObject[]', () => {
     expect(userMatch?.loaderData).toEqual({ id: '123' });
   });
 
+  test('does not force Suspense wrappers for ordinary generated routes', async () => {
+    const routes: RouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        Component: () => createElement(Outlet),
+        children: [
+          {
+            id: 'plain',
+            path: 'plain',
+            Component: () => null,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/plain');
+
+    expect(routeTree.options.wrapInSuspense).toBeUndefined();
+    expect(
+      getLooseRoute(router, '/plain').options.wrapInSuspense,
+    ).toBeUndefined();
+  });
+
+  test('renders Modern Outlet through TanStack native outlet', async () => {
+    const routes: RouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        Component: () =>
+          createElement('section', null, createElement(ModernOutlet)),
+        children: [
+          {
+            id: 'plain',
+            path: 'plain',
+            Component: () => createElement('main', null, 'Plain child route'),
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/plain');
+    const markup = renderToString(
+      createElement(RouterProvider, { router } as never),
+    );
+    const suspenseBoundaryCount = countCompletedSuspenseBoundaries(markup);
+
+    expect(markup).toContain('Plain child route');
+    expect(suspenseBoundaryCount).toBe(1);
+  });
+
+  test('resolves matched Modern route ids from TanStack route registry fallback', () => {
+    const router = {
+      state: {
+        matches: [
+          { routeId: '__root__' },
+          { routeId: '/$lang' },
+          { routeId: '/$lang/tractors' },
+          {
+            route: {
+              options: {
+                staticData: {
+                  modernRouteId: '(lang)/stores/page',
+                },
+              },
+            },
+            routeId: '/$lang/stores',
+          },
+        ],
+      },
+      routesById: {
+        __root__: {
+          options: {
+            staticData: {
+              modernRouteId: 'layout',
+            },
+          },
+        },
+        '/$lang': {
+          options: {
+            staticData: {
+              modernRouteId: '(lang)/page',
+            },
+          },
+        },
+        '/$lang/tractors': {
+          options: {
+            staticData: {
+              modernRouteId: '(lang)/tractors/page',
+            },
+          },
+        },
+      },
+    };
+
+    expect(getModernRouteIdsFromMatches(router as never)).toEqual([
+      'layout',
+      '(lang)/page',
+      '(lang)/tractors/page',
+      '(lang)/stores/page',
+    ]);
+  });
+
+  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 +409,145 @@ 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(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');
+    const lazyRoute = getLooseRoute(router, '/lazy');
+    const lazyComponent = lazyRoute.options
+      .component as PreloadableTestComponent;
+
+    expect(
+      renderToStaticMarkup(createElement(RouterProvider, { router } as never)),
+    ).toContain('Lazy child route ready');
+    expect(typeof lazyComponent.load).toBe('function');
+    expect(typeof lazyComponent.preload).toBe('function');
+  });
+
+  test('exposes load-only Modern route components through TanStack preload', async () => {
+    const load = rstest.fn(async () => 'route chunk loaded');
+    const LoadOnlyRouteComponent = (() =>
+      createElement('main', null, 'Load-only route ready')) as ComponentType & {
+      load?: () => Promise<unknown>;
+      preload?: () => Promise<unknown>;
+    };
+    LoadOnlyRouteComponent.load = load;
+    const routes: TestRouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        Component: () => createElement('section', null, createElement(Outlet)),
+        children: [
+          {
+            id: 'load-only',
+            path: 'load-only',
+            Component: LoadOnlyRouteComponent,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/load-only');
+    const loadOnlyRoute = getLooseRoute(router, '/load-only');
+    const loadOnlyComponent = loadOnlyRoute.options
+      .component as PreloadableTestComponent;
+
+    expect(typeof loadOnlyComponent.load).toBe('function');
+    expect(typeof loadOnlyComponent.preload).toBe('function');
+    expect(load).toHaveBeenCalledTimes(1);
+    await loadOnlyComponent.preload?.();
+    expect(load).toHaveBeenCalledTimes(2);
+  });
+
+  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 +731,107 @@ 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('does not force Suspense wrappers for ordinary Modern routes', async () => {
+    const modernRoutes: TestNestedRoute[] = [
+      {
+        type: 'nested',
+        origin: 'config',
+        id: 'root',
+        isRoot: true,
+        component: () => createElement(Outlet),
+        children: [
+          {
+            type: 'nested',
+            origin: 'config',
+            id: 'plain',
+            path: 'plain',
+            component: () => null,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromModernRoutes(modernRoutes);
+    const router = await loadRouteTree(routeTree, '/plain');
+    const plain = getLooseRouteByModernRouteId(router, 'plain');
+
+    expect(routeTree.options.wrapInSuspense).toBeUndefined();
+    expect(plain.options.wrapInSuspense).toBeUndefined();
+  });
+
+  test('renders Modern generated Outlet through TanStack native outlet', async () => {
+    const modernRoutes: TestNestedRoute[] = [
+      {
+        type: 'nested',
+        origin: 'config',
+        id: 'root',
+        isRoot: true,
+        component: () =>
+          createElement('section', null, createElement(ModernOutlet)),
+        children: [
+          {
+            type: 'nested',
+            origin: 'config',
+            id: 'plain',
+            path: 'plain',
+            component: () => createElement('main', null, 'Plain child route'),
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromModernRoutes(modernRoutes);
+    const router = await loadRouteTree(routeTree, '/plain');
+    const markup = renderToString(
+      createElement(RouterProvider, { router } as never),
+    );
+    const suspenseBoundaryCount = countCompletedSuspenseBoundaries(markup);
+
+    expect(markup).toContain('Plain child route');
+    expect(suspenseBoundaryCount).toBe(1);
+  });
+
   test('preserves Modern generated client route metadata', () => {
     const modernRoutes: TestNestedRoute[] = [
       {