@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.98 → 3.4.0-ultramodern.0

package/tests/router/routeTree.test.ts

@@ -1,12 +1,16 @@
+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, Outlet, RouterProvider } from '@tanstack/react-router';
 import type { ComponentType } from 'react';
 import { createElement, lazy } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
+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';
@@ -57,6 +61,7 @@ type ShouldReloadArgs = {
 
 type TestRoute = {
   options: {
+    component?: unknown;
     shouldReload?: (args: ShouldReloadArgs) => boolean | undefined;
     ssr?: boolean;
     staticData: Record<string, unknown>;
@@ -66,14 +71,21 @@ type TestRoute = {
   };
 };
 
+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;
   };
 };
 
@@ -119,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();
@@ -157,6 +201,28 @@ 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[] = [
       {
@@ -182,6 +248,34 @@ describe('tanstack route tree from RouteObject[]', () => {
     ).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: {
@@ -394,9 +488,6 @@ describe('tanstack route tree from RouteObject[]', () => {
 
     await component.preload?.();
 
-    expect(renderToStaticMarkup(createElement(component))).toContain(
-      'Lazy route ready',
-    );
     expect(lazyImport).toHaveBeenCalled();
   });
 
@@ -424,10 +515,51 @@ describe('tanstack route tree from RouteObject[]', () => {
 
     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 () => {
@@ -598,125 +730,36 @@ 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[] = [
-      {
-        type: 'nested',
-        origin: 'config',
-        id: 'root',
-        isRoot: true,
-        config: {
-          handle: {
-            shell: true,
-          },
-        },
-        children: [
-          {
-            type: 'nested',
-            origin: 'config',
-            id: 'dashboard',
-            path: 'dashboard',
-            handle: {
-              section: 'analytics',
-            },
-            config: {
-              handle: {
-                role: 'admin',
-              },
-            },
-          },
-        ],
-      },
-    ];
-    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 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[] = [
+  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,
-        component: () => createElement(Outlet),
+        path: '/',
+        Component: () => null,
         children: [
           {
-            type: 'nested',
-            origin: 'config',
-            id: 'plain',
-            path: 'plain',
-            component: () => null,
+            id: 'broken',
+            path: 'broken',
+            loader: () => response,
+            Component: () => null,
           },
         ],
       },
     ];
 
-    const routeTree = createRouteTreeFromModernRoutes(modernRoutes);
-    const router = await loadRouteTree(routeTree, '/plain');
-    const plain = getLooseRouteByModernRouteId(router, 'plain');
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/broken');
+    const brokenMatch = router.state.matches.find(
+      match => match.routeId === '/broken',
+    );
 
-    expect(routeTree.options.wrapInSuspense).toBeUndefined();
-    expect(plain.options.wrapInSuspense).toBeUndefined();
+    expect(router.state.statusCode).toBe(200);
+    expect(brokenMatch?.loaderData).toBe(response);
+    expect(brokenMatch?.error).toBeUndefined();
   });
 
-  test('preserves Modern generated client route metadata', () => {
+  test('preserves generated client metadata through RouteObject conversion', () => {
     const modernRoutes: TestNestedRoute[] = [
       {
         type: 'nested',
@@ -730,16 +773,17 @@ describe('tanstack route tree from RouteObject[]', () => {
             id: 'client',
             path: 'client',
             clientData: './client.data',
-            hasAction: true,
-            hasClientLoader: true,
-            hasLoader: true,
+            data: './data',
             inValidSSRRoute: true,
             isClientComponent: true,
           },
         ],
       },
     ];
-    const routeTree = createRouteTreeFromModernRoutes(modernRoutes);
+    const routeObjects = createRouteObjectsFromConfig({
+      routesConfig: { routes: modernRoutes },
+    });
+    const routeTree = createRouteTreeFromRouteObjects(routeObjects || []);
     const router = createRouter({
       routeTree,
       history: createMemoryHistory({
@@ -751,51 +795,44 @@ describe('tanstack route tree from RouteObject[]', () => {
 
     expect(clientRoute.options.ssr).toBe(false);
     expect(clientRoute.options.staticData).toMatchObject({
-      modernRouteHasAction: true,
       modernRouteHasClientLoader: true,
-      modernRouteHasLoader: true,
       modernRouteIsClientComponent: true,
     });
   });
 
-  test('preserves generated client metadata through RouteObject conversion', () => {
+  test('does not copy hasErrorBoundary into React Router route objects', () => {
+    function ErrorPage() {
+      return null;
+    }
+
     const modernRoutes: TestNestedRoute[] = [
       {
         type: 'nested',
         origin: 'config',
         id: 'root',
         isRoot: true,
+        hasErrorBoundary: true,
         children: [
           {
             type: 'nested',
             origin: 'config',
-            id: 'client',
-            path: 'client',
-            clientData: './client.data',
-            data: './data',
-            inValidSSRRoute: true,
-            isClientComponent: true,
+            id: 'child',
+            path: 'child',
+            hasErrorBoundary: true,
+            error: ErrorPage,
           },
         ],
       },
     ];
+
     const routeObjects = createRouteObjectsFromConfig({
       routesConfig: { routes: modernRoutes },
     });
-    const routeTree = createRouteTreeFromRouteObjects(routeObjects || []);
-    const router = createRouter({
-      routeTree,
-      history: createMemoryHistory({
-        initialEntries: ['/client'],
-      }),
-      context: {},
-    }) as unknown as TestRouter;
-    const clientRoute = getLooseRouteByModernRouteId(router, 'client');
+    const rootRoute = routeObjects?.[0];
+    const childRoute = rootRoute?.children?.[0];
 
-    expect(clientRoute.options.ssr).toBe(false);
-    expect(clientRoute.options.staticData).toMatchObject({
-      modernRouteHasClientLoader: true,
-      modernRouteIsClientComponent: true,
-    });
+    expect(rootRoute).not.toHaveProperty('hasErrorBoundary');
+    expect(childRoute).not.toHaveProperty('hasErrorBoundary');
+    expect(childRoute?.errorElement).toBeDefined();
   });
 });

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' }),