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

package/tests/router/loaderBridge.test.ts

@@ -0,0 +1,211 @@
+import { isNotFound, isRedirect } from '@tanstack/react-router';
+import {
+  createRouteStaticData,
+  isAbsoluteUrl,
+  mapSplatParamsForModernLoader,
+  modernLoaderToTanstack,
+  throwTanstackRedirect,
+} from '../../src/runtime/loaderBridge';
+
+type RedirectLike = {
+  options?: {
+    href?: string;
+    to?: string;
+  };
+};
+
+function catchThrown(fn: () => unknown): unknown {
+  try {
+    fn();
+  } catch (err) {
+    return err;
+  }
+  throw new Error('expected the function to throw');
+}
+
+describe('throwTanstackRedirect', () => {
+  test('absolute URLs redirect via href (external), not via to', () => {
+    // The old inline codegen handler threw `redirect({ href })` INSIDE a
+    // try block whose catch replaced it with `redirect({ to: absoluteUrl })`,
+    // making TanStack treat the absolute URL as an internal path.
+    const thrown = catchThrown(() =>
+      throwTanstackRedirect('https://example.com/external'),
+    ) as RedirectLike;
+
+    expect(isRedirect(thrown)).toBe(true);
+    expect(thrown.options?.href).toBe('https://example.com/external');
+    expect(thrown.options?.to).toBeUndefined();
+  });
+
+  test('relative paths redirect via to so the basepath rewrite applies', () => {
+    const thrown = catchThrown(() =>
+      throwTanstackRedirect('/dashboard'),
+    ) as RedirectLike;
+
+    expect(isRedirect(thrown)).toBe(true);
+    expect(thrown.options?.to).toBe('/dashboard');
+    expect(thrown.options?.href).toBeUndefined();
+  });
+
+  test('empty location falls back to /', () => {
+    const thrown = catchThrown(() => throwTanstackRedirect('')) as RedirectLike;
+    expect(thrown.options?.to).toBe('/');
+  });
+});
+
+describe('isAbsoluteUrl', () => {
+  test('detects absolute and relative URLs', () => {
+    expect(isAbsoluteUrl('https://example.com/a')).toBe(true);
+    expect(isAbsoluteUrl('mailto:x@example.com')).toBe(true);
+    expect(isAbsoluteUrl('/internal/path')).toBe(false);
+    expect(isAbsoluteUrl('relative')).toBe(false);
+  });
+});
+
+describe('mapSplatParamsForModernLoader', () => {
+  test('maps TanStack _splat to React Router * only for splat routes', () => {
+    expect(
+      mapSplatParamsForModernLoader({ _splat: 'a/b', id: '1' }, true),
+    ).toEqual({ '*': 'a/b', id: '1' });
+    expect(
+      mapSplatParamsForModernLoader({ _splat: 'a/b', id: '1' }, false),
+    ).toEqual({ _splat: 'a/b', id: '1' });
+    expect(mapSplatParamsForModernLoader({ id: '1' }, true)).toEqual({
+      id: '1',
+    });
+  });
+});
+
+describe('createRouteStaticData', () => {
+  test('drops empty fields', () => {
+    const loader = () => null;
+    expect(createRouteStaticData({})).toEqual({});
+    expect(createRouteStaticData({ modernRouteId: '' })).toEqual({});
+    expect(
+      createRouteStaticData({
+        modernRouteId: 'page',
+        modernRouteLoader: loader,
+      }),
+    ).toEqual({ modernRouteId: 'page', modernRouteLoader: loader });
+  });
+});
+
+describe('modernLoaderToTanstack', () => {
+  const baseCtx = {
+    location: { href: 'http://localhost/products/1' },
+    params: { id: '1' },
+  };
+
+  test('passes request/params/context through to the modern loader', async () => {
+    const seen: { request?: Request; params?: unknown; context?: unknown } = {};
+    const loader = modernLoaderToTanstack({ hasSplat: false }, (args: any) => {
+      seen.request = args.request;
+      seen.params = args.params;
+      seen.context = args.context;
+      return { ok: true };
+    });
+
+    await expect(
+      loader({
+        ...baseCtx,
+        context: { requestContext: { user: 'u1' } },
+      }),
+    ).resolves.toEqual({ ok: true });
+    expect(seen.request).toBeInstanceOf(Request);
+    expect(seen.request?.url).toBe('http://localhost/products/1');
+    expect(seen.params).toEqual({ id: '1' });
+    expect(seen.context).toEqual({ user: 'u1' });
+  });
+
+  test('translates an absolute-URL redirect Response into redirect({ href })', async () => {
+    const loader = modernLoaderToTanstack({ hasSplat: false }, () =>
+      Response.redirect('https://example.com/away', 302),
+    );
+
+    const thrown = (await loader(baseCtx).then(
+      () => {
+        throw new Error('expected redirect');
+      },
+      (err: unknown) => err,
+    )) as RedirectLike;
+
+    expect(isRedirect(thrown)).toBe(true);
+    expect(thrown.options?.href).toBe('https://example.com/away');
+    expect(thrown.options?.to).toBeUndefined();
+  });
+
+  test('translates a relative redirect Response into redirect({ to })', async () => {
+    const loader = modernLoaderToTanstack(
+      { hasSplat: false },
+      () =>
+        new Response(null, { status: 302, headers: { Location: '/login' } }),
+    );
+
+    const thrown = (await loader(baseCtx).then(
+      () => {
+        throw new Error('expected redirect');
+      },
+      (err: unknown) => err,
+    )) as RedirectLike;
+
+    expect(isRedirect(thrown)).toBe(true);
+    expect(thrown.options?.to).toBe('/login');
+  });
+
+  test('translates a 404 Response into notFound()', async () => {
+    const loader = modernLoaderToTanstack(
+      { hasSplat: false },
+      () => new Response(null, { status: 404 }),
+    );
+
+    const thrown = await loader(baseCtx).then(
+      () => {
+        throw new Error('expected notFound');
+      },
+      (err: unknown) => err,
+    );
+
+    expect(isNotFound(thrown)).toBe(true);
+  });
+
+  test('preserves returned non-404 error Responses as loader results', async () => {
+    const response = new Response('loader exploded', { status: 500 });
+    const loader = modernLoaderToTanstack({ hasSplat: false }, () => response);
+
+    await expect(loader(baseCtx)).resolves.toBe(response);
+  });
+
+  test('translates redirect Responses thrown synchronously by the loader', () => {
+    const loader = modernLoaderToTanstack({ hasSplat: false }, () => {
+      throw new Response(null, {
+        status: 301,
+        headers: { Location: 'https://example.com/moved' },
+      });
+    });
+
+    // A synchronous loader throw surfaces synchronously (TanStack handles
+    // thrown redirects from the loader call itself).
+    const thrown = catchThrown(() => loader(baseCtx)) as RedirectLike;
+
+    expect(isRedirect(thrown)).toBe(true);
+    expect(thrown.options?.href).toBe('https://example.com/moved');
+  });
+
+  test('re-throws TanStack redirects thrown by the loader untouched', async () => {
+    const loader = modernLoaderToTanstack({ hasSplat: false }, async () => {
+      throwTanstackRedirect('/inner');
+    });
+
+    const thrown = (await loader(baseCtx).then(
+      () => {
+        throw new Error('expected redirect');
+      },
+      (err: unknown) => err,
+    )) as RedirectLike;
+
+    // The bridge must not re-translate its own redirect (a Response without
+    // a Location header) — that used to collapse internal targets to '/'.
+    expect(isRedirect(thrown)).toBe(true);
+    expect(thrown.options?.to).toBe('/inner');
+  });
+});

package/tests/router/packageSurface.test.ts

@@ -0,0 +1,24 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+describe('tanstack package public surface', () => {
+  test('package manifest exposes the runtime subpath used by app fixtures', () => {
+    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']).toEqual({
+      types: './dist/types/runtime/index.d.ts',
+      node: {
+        module: './dist/esm/runtime/index.mjs',
+      },
+      default: './dist/esm/runtime/index.mjs',
+    });
+    expect(packageJson.typesVersions?.['*']?.runtime).toEqual([
+      './dist/types/runtime/index.d.ts',
+    ]);
+  });
+});

package/tests/router/register.test.ts

@@ -0,0 +1,46 @@
+import { resolveRouterProvider } from '@modern-js/runtime/context';
+import {
+  Form,
+  Link,
+  NavLink,
+  Outlet,
+  RouteActionResponseError,
+  useFetcher,
+} from '../../src/runtime';
+import { tanstackRouterCompatBindings } from '../../src/runtime/register';
+
+const COMPAT_BINDINGS_SLOT = Symbol.for(
+  '@modern-js/plugin-tanstack:runtime-compat-bindings',
+);
+
+describe("'@modern-js/plugin-tanstack/runtime' import side effects", () => {
+  it('registers the tanstack router provider', () => {
+    expect(typeof resolveRouterProvider('tanstack')).toBe('function');
+  });
+
+  it("publishes the compat bindings consumed by '@modern-js/runtime/tanstack-router'", () => {
+    const bindings = (globalThis as Record<symbol, unknown>)[
+      COMPAT_BINDINGS_SLOT
+    ] as typeof tanstackRouterCompatBindings;
+
+    expect(bindings).toBeDefined();
+    expect(bindings).toBe(tanstackRouterCompatBindings);
+    expect(bindings.Form).toBe(Form);
+    expect(bindings.Link).toBe(Link);
+    expect(bindings.NavLink).toBe(NavLink);
+    expect(bindings.Outlet).toBe(Outlet);
+    expect(bindings.RouteActionResponseError).toBe(RouteActionResponseError);
+    expect(bindings.useFetcher).toBe(useFetcher);
+  });
+
+  it('keeps the first published bindings when a duplicate module copy evaluates', () => {
+    // Simulates a Module Federation remote evaluating its own copy of
+    // register.ts: `??=` must keep the established bindings.
+    const host = globalThis as Record<symbol, unknown>;
+    const established = host[COMPAT_BINDINGS_SLOT];
+    expect(established).toBeDefined();
+
+    host[COMPAT_BINDINGS_SLOT] ??= { duplicate: true };
+    expect(host[COMPAT_BINDINGS_SLOT]).toBe(established);
+  });
+});

package/tests/router/routeTree.test.ts

@@ -1,3 +1,5 @@
+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';
@@ -5,10 +7,10 @@ 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';
@@ -79,9 +81,11 @@ type TestRouter = {
   looseRoutesById: Partial<Record<string, TestRoute>>;
   state: {
     matches: Array<{
+      error?: unknown;
       loaderData?: unknown;
       routeId: string;
     }>;
+    statusCode?: number;
   };
 };
 
@@ -135,6 +139,28 @@ 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[]', () => {
@@ -175,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[] = [
       {
@@ -682,196 +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[] = [
-      {
-        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[] = [
-      {
-        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[] = [
+  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('section', null, createElement(ModernOutlet)),
+        path: '/',
+        Component: () => null,
         children: [
           {
-            type: 'nested',
-            origin: 'config',
-            id: 'plain',
-            path: 'plain',
-            component: () => createElement('main', null, 'Plain child route'),
+            id: 'broken',
+            path: 'broken',
+            loader: () => response,
+            Component: () => null,
           },
         ],
       },
     ];
 
-    const routeTree = createRouteTreeFromModernRoutes(modernRoutes);
-    const router = await loadRouteTree(routeTree, '/plain');
-    const markup = renderToString(
-      createElement(RouterProvider, { router } as never),
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/broken');
+    const brokenMatch = router.state.matches.find(
+      match => match.routeId === '/broken',
     );
-    const suspenseBoundaryCount = countCompletedSuspenseBoundaries(markup);
-
-    expect(markup).toContain('Plain child route');
-    expect(suspenseBoundaryCount).toBe(1);
-  });
-
-  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');
 
-    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' }),