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

package/tests/router/routeTree.test.ts

@@ -1,10 +1,18 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
 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 * as TanstackRuntime from '../../src/runtime';
+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 +31,9 @@ type TestRouteObject = RouteObject & {
   hasLoader?: boolean;
   inValidSSRRoute?: boolean;
   isClientComponent?: boolean;
+  lazyImport?: () => Promise<unknown>;
+  loaderDeps?: unknown;
+  validateSearch?: unknown;
 };
 
 type TestNestedRoute = NestedRoute & {
@@ -30,6 +41,8 @@ type TestNestedRoute = NestedRoute & {
   hasAction?: boolean;
   hasClientLoader?: boolean;
   hasLoader?: boolean;
+  loaderDeps?: unknown;
+  validateSearch?: unknown;
 };
 
 type ShouldRevalidateArgs = {
@@ -48,20 +61,31 @@ 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>>;
   state: {
     matches: Array<{
+      error?: unknown;
       loaderData?: unknown;
       routeId: string;
     }>;
+    statusCode?: number;
   };
 };
 
@@ -107,6 +131,38 @@ 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);
+  });
+
+  test('does not expose the unowned composite RSC helper API', () => {
+    expect('CompositeComponent' in TanstackRuntime).toBe(false);
+
+    const packageJson = JSON.parse(
+      readFileSync(path.join(__dirname, '../../package.json'), 'utf-8'),
+    ) as {
+      exports: Record<string, unknown>;
+      typesVersions?: Record<string, Record<string, string[]>>;
+    };
+
+    expect(packageJson.exports['./runtime/rsc']).toBeUndefined();
+    expect(packageJson.exports['./runtime/rsc/client']).toBeUndefined();
+    expect(packageJson.exports['./runtime/rsc/server']).toBeUndefined();
+    expect(packageJson.typesVersions?.['*']?.['runtime/rsc']).toBeUndefined();
+    expect(
+      packageJson.typesVersions?.['*']?.['runtime/rsc/client'],
+    ).toBeUndefined();
+    expect(
+      packageJson.typesVersions?.['*']?.['runtime/rsc/server'],
+    ).toBeUndefined();
+  });
+});
+
 describe('tanstack route tree from RouteObject[]', () => {
   afterEach(() => {
     __setTanstackRscPayloadDecoderForTests();
@@ -145,6 +201,173 @@ describe('tanstack route tree from RouteObject[]', () => {
     expect(userMatch?.loaderData).toEqual({ id: '123' });
   });
 
+  test('reports native TanStack unknown routes as HTTP 404', async () => {
+    const routes: RouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        Component: () => null,
+        children: [
+          {
+            id: 'known',
+            path: 'known',
+            Component: () => null,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/missing');
+
+    expect(router.state.statusCode).toBe(404);
+  });
+
+  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 +457,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'),
@@ -368,95 +730,33 @@ describe('tanstack route tree from RouteObject[]', () => {
     await expect(loaderData?.later).resolves.toBe('done');
   });
 
-  test('merges Modern generated route handle into TanStack static data', () => {
-    const modernRoutes: NestedRoute[] = [
+  test('preserves returned non-404 Response loaders as loader data', async () => {
+    const response = new Response('route status payload', { status: 500 });
+    const routes: TestRouteObject[] = [
       {
-        type: 'nested',
-        origin: 'config',
         id: 'root',
-        isRoot: true,
-        config: {
-          handle: {
-            shell: true,
-          },
-        },
+        path: '/',
+        Component: () => null,
         children: [
           {
-            type: 'nested',
-            origin: 'config',
-            id: 'dashboard',
-            path: 'dashboard',
-            handle: {
-              section: 'analytics',
-            },
-            config: {
-              handle: {
-                role: 'admin',
-              },
-            },
+            id: 'broken',
+            path: 'broken',
+            loader: () => response,
+            Component: () => null,
           },
         ],
       },
     ];
-    const routeTree = createRouteTreeFromModernRoutes(modernRoutes);
-    const router = createRouter({
-      routeTree,
-      history: createMemoryHistory({
-        initialEntries: ['/dashboard'],
-      }),
-      context: {},
-    }) as unknown as TestRouter;
-    const dashboardRoute = getLooseRoute(router, '/dashboard');
 
-    expect(routeTree.options.staticData.modernRouteHandle).toEqual({
-      shell: true,
-    });
-    expect(dashboardRoute.options.staticData.modernRouteHandle).toEqual({
-      section: 'analytics',
-      role: 'admin',
-    });
-  });
-
-  test('preserves Modern generated client route metadata', () => {
-    const modernRoutes: TestNestedRoute[] = [
-      {
-        type: 'nested',
-        origin: 'config',
-        id: 'root',
-        isRoot: true,
-        children: [
-          {
-            type: 'nested',
-            origin: 'config',
-            id: 'client',
-            path: 'client',
-            clientData: './client.data',
-            hasAction: true,
-            hasClientLoader: true,
-            hasLoader: true,
-            inValidSSRRoute: true,
-            isClientComponent: true,
-          },
-        ],
-      },
-    ];
-    const routeTree = createRouteTreeFromModernRoutes(modernRoutes);
-    const router = createRouter({
-      routeTree,
-      history: createMemoryHistory({
-        initialEntries: ['/client'],
-      }),
-      context: {},
-    }) as unknown as TestRouter;
-    const clientRoute = getLooseRouteByModernRouteId(router, 'client');
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/broken');
+    const brokenMatch = router.state.matches.find(
+      match => match.routeId === '/broken',
+    );
 
-    expect(clientRoute.options.ssr).toBe(false);
-    expect(clientRoute.options.staticData).toMatchObject({
-      modernRouteHasAction: true,
-      modernRouteHasClientLoader: true,
-      modernRouteHasLoader: true,
-      modernRouteIsClientComponent: true,
-    });
+    expect(router.state.statusCode).toBe(200);
+    expect(brokenMatch?.loaderData).toBe(response);
+    expect(brokenMatch?.error).toBeUndefined();
   });
 
   test('preserves generated client metadata through RouteObject conversion', () => {

package/tests/router/rsc.test.tsx

@@ -1,3 +1,4 @@
+import { UNSAFE_ErrorResponseImpl as ErrorResponseImpl } from '@modern-js/runtime-utils/router';
 import type React from 'react';
 import { isValidElement } from 'react';
 import { createRscProxy } from '../../src/runtime/rsc/createRscProxy';
@@ -30,6 +31,16 @@ async function readAll(stream: ReadableStream<Uint8Array>) {
   return chunks;
 }
 
+function withNodeEnv<T>(value: string, callback: () => T): T {
+  const original = process.env.NODE_ENV;
+  process.env.NODE_ENV = value;
+  try {
+    return callback();
+  } finally {
+    process.env.NODE_ENV = original;
+  }
+}
+
 describe('tanstack rsc runtime helpers', () => {
   afterEach(() => {
     __setTanstackRscPayloadDecoderForTests();
@@ -149,6 +160,65 @@ describe('tanstack rsc runtime helpers', () => {
     ).toBeUndefined();
   });
 
+  test('redacts production TanStack RSC server payload errors', () => {
+    const routeError = new ErrorResponseImpl(
+      500,
+      'secret status text',
+      'route secret',
+      true,
+    );
+    const serverError = new Error('server secret');
+    serverError.stack = 'stack secret';
+
+    const payload = withNodeEnv('production', () =>
+      createTanstackRscServerPayload({
+        state: {
+          location: { href: '/products' },
+          matches: [
+            {
+              error: serverError,
+              params: {},
+              pathname: '/',
+              pathnameBase: '/',
+              route: { id: '__root__' },
+              routeId: '__root__',
+            },
+            {
+              error: routeError,
+              params: {},
+              pathname: '/products',
+              pathnameBase: '/products',
+              route: {
+                id: '/products',
+                parentRoute: { id: '__root__' },
+                options: { path: 'products' },
+              },
+              routeId: '/products',
+            },
+          ],
+        },
+      }),
+    );
+
+    expect(payload.errors).toMatchObject({
+      __root__: {
+        message: 'Unexpected Server Error',
+        stack: undefined,
+        __type: 'Error',
+      },
+      '/products': {
+        status: 500,
+        statusText: 'Internal Server Error',
+        data: 'Unexpected Server Error',
+        __type: 'RouteErrorResponse',
+      },
+    });
+    expect(JSON.stringify(payload.errors)).not.toContain('server secret');
+    expect(JSON.stringify(payload.errors)).not.toContain('route secret');
+    expect(JSON.stringify(payload.errors)).not.toContain('secret status text');
+    expect(JSON.stringify(payload.errors)).not.toContain('stack secret');
+  });
+
   test('converts TanStack RSC redirects to Modern RSC navigation headers', () => {
     const response = handleTanstackRscRedirect(
       new Headers({ Location: '/base/login' }),