@bleedingdev/modern-js-plugin-tanstack 3.9.0-ultramodern.2 → 3.9.0-ultramodern.21

package/tests/router/rsc.test.tsx

@@ -1,11 +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';
-import {
-  reviveTanstackRscFlightValues,
-  serializeTanstackRscFlightValues,
-} from '../../src/runtime/rsc/flightSerialization';
 import {
   __setTanstackRscPayloadDecoderForTests,
   createTanstackRscServerPayload,
@@ -13,12 +6,6 @@ import {
   loadTanstackRscRouteData,
 } from '../../src/runtime/rsc/payloadRouter';
 import { ReplayableStream } from '../../src/runtime/rsc/ReplayableStream';
-import {
-  RENDERABLE_RSC,
-  RSC_PROXY_PATH,
-  SERVER_COMPONENT_STREAM,
-  type ServerComponentStream,
-} from '../../src/runtime/rsc/symbols';
 
 async function readAll(stream: ReadableStream<Uint8Array>) {
   const reader = stream.getReader();
@@ -69,75 +56,6 @@ describe('tanstack rsc runtime helpers', () => {
     ]);
   });
 
-  test('revives shared structures that the Flight serializer preserves', async () => {
-    const shared = { label: 'shared' };
-    const serialized = serializeTanstackRscFlightValues({
-      left: shared,
-      right: shared,
-    }) as { left: unknown; right: unknown };
-
-    const revived = (await reviveTanstackRscFlightValues(serialized)) as {
-      left: unknown;
-      right: unknown;
-    };
-
-    expect(serialized.left).toBe(serialized.right);
-    expect(revived.left).toBe(revived.right);
-  });
-
-  test('serializes TanStack RSC flight values nested in map and set containers', () => {
-    const stream: ServerComponentStream = {
-      createReplayStream: () => new ReadableStream<Uint8Array>(),
-    };
-    const proxy = createRscProxy(() => null, {
-      renderable: true,
-      stream,
-    }) as React.ReactElement & Record<PropertyKey, unknown>;
-
-    const serialized = serializeTanstackRscFlightValues({
-      map: new Map([['slot', proxy]]),
-      set: new Set([proxy]),
-    }) as {
-      map: Map<string, Record<string, unknown>>;
-      set: Set<Record<string, unknown>>;
-    };
-
-    const mapValue = serialized.map.get('slot');
-    const [setValue] = serialized.set;
-
-    expect(mapValue).not.toBe(proxy);
-    expect(setValue).not.toBe(proxy);
-    expect(mapValue).toMatchObject({
-      __modernTanstackRsc: true,
-      kind: 'renderable',
-    });
-    expect(setValue).toMatchObject({
-      __modernTanstackRsc: true,
-      kind: 'renderable',
-    });
-  });
-
-  test('renderable RSC proxies preserve React element behavior and metadata', () => {
-    const stream: ServerComponentStream = {
-      createReplayStream: () => new ReadableStream<Uint8Array>(),
-    };
-    const proxy = createRscProxy(() => ({ sidebar: 'ok' }), {
-      renderable: true,
-      stream,
-    }) as React.ReactElement & Record<PropertyKey, unknown>;
-
-    expect(isValidElement(proxy)).toBe(true);
-    expect(proxy[SERVER_COMPONENT_STREAM]).toBe(stream);
-    expect(proxy[RENDERABLE_RSC]).toBe(true);
-    expect(proxy.then).toBeUndefined();
-    expect('__SEROVAL_STREAM__' in proxy).toBe(false);
-    expect('__SEROVAL_SEQUENCE__' in proxy).toBe(false);
-    expect(Symbol.iterator in proxy).toBe(false);
-
-    const sidebar = proxy.sidebar as Record<PropertyKey, unknown>;
-    expect(sidebar[RSC_PROXY_PATH]).toEqual(['sidebar']);
-  });
-
   test('creates TanStack RSC server payload and omits client-loader data during RSC navigation', () => {
     const payload = createTanstackRscServerPayload(
       {
@@ -212,7 +130,7 @@ describe('tanstack rsc runtime helpers', () => {
     ).toBeUndefined();
   });
 
-  test('redacts production TanStack RSC server payload errors', () => {
+  test('redacts production TanStack RSC server payload errors (Error, RouteErrorResponse, and plain-object)', () => {
     const routeError = new ErrorResponseImpl(
       500,
       'secret status text',
@@ -247,6 +165,14 @@ describe('tanstack rsc runtime helpers', () => {
               },
               routeId: '/products',
             },
+            {
+              error: { message: 'plain secret', token: 'token secret' },
+              params: {},
+              pathname: '/plain',
+              pathnameBase: '/plain',
+              route: { id: '/plain', parentRoute: { id: '__root__' } },
+              routeId: '/plain',
+            },
           ],
         },
       }),
@@ -264,69 +190,54 @@ describe('tanstack rsc runtime helpers', () => {
         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('redacts production TanStack RSC non-Error server payload errors', () => {
-    const payload = withNodeEnv('production', () =>
-      createTanstackRscServerPayload({
-        state: {
-          location: { href: '/plain' },
-          matches: [
-            {
-              error: { message: 'plain secret', token: 'token secret' },
-              params: {},
-              pathname: '/plain',
-              pathnameBase: '/plain',
-              route: { id: '/plain' },
-              routeId: '/plain',
-            },
-          ],
-        },
-      }),
-    );
-
-    expect(payload.errors).toMatchObject({
       '/plain': {
         message: 'Unexpected Server Error',
         stack: undefined,
         __type: 'Error',
       },
     });
+    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');
     expect(JSON.stringify(payload.errors)).not.toContain('plain secret');
     expect(JSON.stringify(payload.errors)).not.toContain('token secret');
   });
 
-  test('converts TanStack RSC redirects to Modern RSC navigation headers', () => {
-    const response = handleTanstackRscRedirect(
-      new Headers({ Location: '/base/login' }),
-      '/base',
-      302,
-    );
-
-    expect(response.status).toBe(302);
-    expect(response.headers.get('Location')).toBeNull();
-    expect(response.headers.get('X-Modernjs-Redirect')).toBe('/login');
-    expect(response.headers.get('X-Modernjs-BaseUrl')).toBe('/base');
-  });
-
-  test('preserves TanStack RSC redirect paths that do not start with the basename', () => {
-    const response = handleTanstackRscRedirect(
-      new Headers({ Location: '/shop/base/login' }),
-      '/base',
-      302,
-    );
+  test('preserves RSC redirect response status and headers in TanStack redirects', async () => {
+    const scenarios = [
+      { location: '/base', name: 'exact basename', redirect: '/' },
+      {
+        location: '/base/login?from=%2Fbase',
+        name: 'leading basename',
+        redirect: '/login?from=%2Fbase',
+      },
+      {
+        location: '/shop/base/login',
+        name: 'mid-path basename',
+        redirect: '/shop/base/login',
+      },
+    ] as const;
 
-    expect(response.headers.get('X-Modernjs-Redirect')).toBe(
-      '/shop/base/login',
-    );
-  });
+    for (const scenario of scenarios) {
+      const response = handleTanstackRscRedirect(
+        new Headers({
+          Location: scenario.location,
+          'X-Trace': scenario.name,
+        }),
+        '/base',
+        307,
+      );
+
+      expect(response.status).toBe(307);
+      expect(response.headers.get('Location')).toBeNull();
+      expect(response.headers.get('X-Modernjs-BaseUrl')).toBe('/base');
+      expect(response.headers.get('X-Modernjs-Redirect')).toBe(
+        scenario.redirect,
+      );
+      expect(response.headers.get('X-Trace')).toBe(scenario.name);
+    }
 
-  test('preserves RSC redirect response status and headers in TanStack redirects', async () => {
     rstest.stubGlobal(
       'fetch',
       rstest.fn(() =>
@@ -362,47 +273,50 @@ describe('tanstack rsc runtime helpers', () => {
     expect(thrown.options?.to).toBe('/login');
   });
 
-  test('loads one RSC payload for multiple server route loaders', async () => {
-    const payload = {
-      type: 'render',
-      actionData: null,
-      errors: null,
-      loaderData: {
-        __root__: { shell: true },
-        '/products': { product: 1 },
+  test('separates RSC payload cache entries by URL and request method', async () => {
+    const payloads = [
+      {
+        type: 'render',
+        actionData: null,
+        errors: null,
+        loaderData: { '/method': { method: 'GET' } },
+        location: { href: '/method' },
+        routes: [{ id: '/method', hasLoader: true }],
       },
-      location: { href: '/products' },
-      routes: [
-        { id: '__root__', hasLoader: true },
-        { id: '/products', hasLoader: true },
-      ],
-    };
-    const fetchMock = rstest.fn(() => Promise.resolve(new Response('payload')));
-    const decodeMock = rstest.fn(async () => payload);
+      {
+        type: 'render',
+        actionData: null,
+        errors: null,
+        loaderData: { '/method': { method: 'POST' } },
+        location: { href: '/method' },
+        routes: [{ id: '/method', hasLoader: true }],
+      },
+    ];
+    let payloadIndex = 0;
+    const fetchMock = rstest.fn(() =>
+      Promise.resolve(new Response(JSON.stringify(payloads[payloadIndex++]))),
+    );
     rstest.stubGlobal('fetch', fetchMock);
-    __setTanstackRscPayloadDecoderForTests(decodeMock);
+    __setTanstackRscPayloadDecoderForTests(async stream =>
+      JSON.parse(await new Response(stream).text()),
+    );
 
-    const request = new Request('http://localhost/products');
-    const [rootData, productData] = await Promise.all([
+    const [getData, postData] = await Promise.all([
       loadTanstackRscRouteData({
-        loadClientData: async () => ({ fallback: 'root' }),
-        request,
-        routeId: '__root__',
+        loadClientData: async () => ({ fallback: 'get' }),
+        request: new Request('http://localhost/method', { method: 'GET' }),
+        routeId: '/method',
       }),
       loadTanstackRscRouteData({
-        loadClientData: async () => ({ fallback: 'product' }),
-        request,
-        routeId: '/products',
+        loadClientData: async () => ({ fallback: 'post' }),
+        request: new Request('http://localhost/method', { method: 'POST' }),
+        routeId: '/method',
       }),
     ]);
 
-    expect(rootData).toEqual({ shell: true });
-    expect(productData).toEqual({ product: 1 });
-    expect(fetchMock).toHaveBeenCalledTimes(1);
-    expect(fetchMock.mock.calls[0]?.[1]?.headers.get('x-rsc-tree')).toBe(
-      'true',
-    );
-    expect(decodeMock).toHaveBeenCalledTimes(1);
+    expect(getData).toEqual({ method: 'GET' });
+    expect(postData).toEqual({ method: 'POST' });
+    expect(fetchMock).toHaveBeenCalledTimes(2);
   });
 
   test('separates RSC payload cache entries by forwarded request headers', async () => {
@@ -464,6 +378,57 @@ describe('tanstack rsc runtime helpers', () => {
     expect(fetchMock).toHaveBeenCalledTimes(2);
   });
 
+  test('rethrows matched route errors from the decoded payload', async () => {
+    const routeError = new Error('route loader failed');
+    const payload = {
+      type: 'render',
+      actionData: null,
+      errors: { '/broken': routeError },
+      loaderData: {},
+      location: { href: '/broken' },
+      routes: [{ id: '/broken', hasLoader: true }],
+    };
+    rstest.stubGlobal(
+      'fetch',
+      rstest.fn(() => Promise.resolve(new Response('payload'))),
+    );
+    __setTanstackRscPayloadDecoderForTests(async () => payload);
+
+    await expect(
+      loadTanstackRscRouteData({
+        loadClientData: async () => ({ fallback: true }),
+        request: new Request('http://localhost/broken'),
+        routeId: '/broken',
+      }),
+    ).rejects.toBe(routeError);
+  });
+
+  test('returns undefined for a route id missing from the decoded payload', async () => {
+    const loadClientData = rstest.fn(async () => ({ fallback: true }));
+    const payload = {
+      type: 'render',
+      actionData: null,
+      errors: null,
+      loaderData: { '/known': { known: true } },
+      location: { href: '/known' },
+      routes: [{ id: '/known', hasLoader: true }],
+    };
+    rstest.stubGlobal(
+      'fetch',
+      rstest.fn(() => Promise.resolve(new Response('payload'))),
+    );
+    __setTanstackRscPayloadDecoderForTests(async () => payload);
+
+    await expect(
+      loadTanstackRscRouteData({
+        loadClientData,
+        request: new Request('http://localhost/missing'),
+        routeId: '/missing',
+      }),
+    ).resolves.toBeUndefined();
+    expect(loadClientData).not.toHaveBeenCalled();
+  });
+
   test('uses client loader data without requesting an RSC payload for client-loader routes', async () => {
     const fetchMock = rstest.fn();
     const loadClientData = rstest.fn(async () => ({ client: true }));

package/tests/router/serverPlugin.test.ts

@@ -1,8 +1,16 @@
 import type { TInternalRuntimeContext } from '@modern-js/runtime/context';
 import { routerProviderRegistryHooks } from '@modern-js/runtime/context';
-import { getRouterServerSnapshot } from '../../src/runtime/lifecycle';
+import { type AnyRouter, RouterProvider } from '@tanstack/react-router';
+import { createElement } from 'react';
+import { renderToString } from 'react-dom/server';
+import {
+  getRouterRuntimeState,
+  getRouterServerSnapshot,
+} from '../../src/runtime/lifecycle';
 import { tanstackRouterPlugin } from '../../src/runtime/plugin.node';
 import type { TanstackRouterPluginAPI } from '../../src/runtime/pluginShared';
+import * as ssrUtils from '../../src/runtime/ssrManagedTags';
+import * as ssrPreload from '../../src/runtime/ssrPreload';
 import type { RouterConfig } from '../../src/runtime/types';
 
 type BeforeRenderListener = Parameters<
@@ -50,6 +58,42 @@ describe('tanstack server plugin router results', () => {
     rstest.restoreAllMocks();
   });
 
+  test.each([
+    '/cs/login',
+    '/en/login',
+  ])('renders native link active attributes during SSR at %s', async pathname => {
+    const { context } = createServerContext(pathname);
+    const beforeRender = collectBeforeRender(() => [
+      {
+        id: 'login',
+        path: '/:lang/login',
+        Component: () => {
+          const Link = context.router?.Link;
+          if (!Link) {
+            throw new Error('SSR router did not provide its native Link');
+          }
+          return createElement(Link, { to: '/cs' }, 'Home');
+        },
+      },
+    ]);
+    await beforeRender(context, value => value);
+
+    expect(context.router?.Link).toBeTypeOf('function');
+    const html = renderToString(
+      createElement(RouterProvider, {
+        router: getRouterRuntimeState(context)?.instance as AnyRouter,
+      }),
+    );
+    expect(html).toContain('href="/cs"');
+    if (pathname === '/cs/login') {
+      expect(html).toContain('data-status="active"');
+      expect(html).toContain('aria-current="page"');
+    } else {
+      expect(html).not.toContain('data-status="active"');
+      expect(html).not.toContain('aria-current="page"');
+    }
+  });
+
   test('uses the router render result as the HTTP and hydration status', async () => {
     const beforeRender = collectBeforeRender(() => [
       {
@@ -74,6 +118,11 @@ describe('tanstack server plugin router results', () => {
       framework: 'tanstack',
       statusCode: 200,
     });
+    // Without the dehydrated router the client re-renders matched remotes
+    // from scratch instead of hydrating the server HTML.
+    expect(getRouterServerSnapshot(context)?.hydrationScripts).toEqual(
+      expect.arrayContaining([expect.stringContaining('$_TSR')]),
+    );
   });
 
   test('interrupts SSR with the router redirect response', async () => {
@@ -113,3 +162,146 @@ describe('tanstack server plugin router results', () => {
     expect(status).not.toHaveBeenCalled();
   });
 });
+
+describe('TanStack preparation resource lifetime', () => {
+  test.each([
+    'attach',
+    'load',
+    'result',
+    'preload',
+    'dehydrate',
+    'abort',
+    'clientRender',
+    'afterCreate',
+  ])('disposes exactly once when %s fails', async stage => {
+    const failure = new Error(`${stage} failed`);
+    const cleanup = rstest.fn();
+    const controller = new AbortController();
+    const { context } = createServerContext('/');
+    context.ssrContext!.request.raw = new Request('http://localhost/', {
+      signal: controller.signal,
+    });
+    const attach = ssrUtils.attachServerSsrUtils;
+    rstest
+      .spyOn(ssrUtils, 'attachServerSsrUtils')
+      .mockImplementation(async router => {
+        await attach(router);
+        rstest.spyOn(router.serverSsr!, 'cleanup').mockImplementation(cleanup);
+        if (stage === 'attach') throw failure;
+        if (stage === 'load')
+          rstest.spyOn(router, 'load').mockRejectedValue(failure);
+        if (stage === 'result')
+          rstest.spyOn(router, 'load').mockResolvedValue(undefined);
+        if (stage === 'dehydrate')
+          rstest
+            .spyOn(router.serverSsr!, 'dehydrate')
+            .mockRejectedValue(failure);
+        if (stage === 'abort') controller.abort(failure);
+      });
+    if (stage === 'clientRender') {
+      context.ssrContext!.loaderFailureMode = 'clientRender';
+      rstest
+        .spyOn(ssrUtils, 'collectRouterErrors')
+        .mockReturnValue({ root: failure });
+    }
+    if (stage === 'afterCreate')
+      rstest
+        .spyOn(routerProviderRegistryHooks.onAfterCreateRouter, 'call')
+        .mockImplementation(() => {
+          throw failure;
+        });
+    if (stage === 'preload')
+      rstest
+        .spyOn(ssrPreload, 'preloadMatchedRouteComponents')
+        .mockRejectedValue(failure);
+    const beforeRender = collectBeforeRender(() => [
+      { id: 'root', path: '/', Component: () => null },
+    ]);
+    await expect(beforeRender(context, value => value)).rejects.toThrow(
+      stage === 'result' ? 'without a server result' : failure.message,
+    );
+    expect(cleanup).toHaveBeenCalledTimes(1);
+    await getRouterRuntimeState(context)?.cleanup?.();
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+
+  test.each([
+    'string',
+    'stream',
+  ] as const)('retains %s router resources for response termination', async mode => {
+    const { context } = createServerContext('/products/shoe?q=1#detail');
+    context.ssrContext!.mode = mode;
+    const beforeRender = collectBeforeRender(() => [
+      { id: 'product', path: '/products/:id', Component: () => null },
+    ]);
+    await beforeRender(context, value => value);
+    const state = getRouterRuntimeState(context)!;
+    const router = state.instance as AnyRouter;
+    const cleanup = rstest.spyOn(router.serverSsr!, 'cleanup');
+    const navigation = state.navigation!;
+    expect(navigation.getSnapshot()).toMatchObject({
+      location: { pathname: '/products/shoe', search: '?q=1', hash: '#detail' },
+      params: { id: 'shoe' },
+    });
+    expect(navigation.getSnapshot()).toBe(navigation.getSnapshot());
+    expect(navigation.Link).toBe(context.router?.Link);
+    expect(
+      navigation.createLinkProps!({
+        pathname: '/products/shoe',
+        href: '/products/shoe?q=2#detail',
+        search: { q: '2' },
+        hash: 'detail',
+        hashScrollIntoView: false,
+        prefetch: 'none',
+      }),
+    ).toEqual({
+      to: '/products/shoe',
+      search: { q: '2' },
+      hash: 'detail',
+      hashScrollIntoView: false,
+      preload: false,
+    });
+    expect(cleanup).not.toHaveBeenCalled();
+    await state.cleanup?.();
+    await state.cleanup?.();
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+});
+
+test('incoming abort reaches an active Modern loader and disposes its router', async () => {
+  const incoming = new AbortController();
+  let started!: () => void;
+  const loading = new Promise<void>(resolve => {
+    started = resolve;
+  });
+  const { context } = createServerContext('/');
+  context.ssrContext!.request.raw = new Request('http://localhost/', {
+    signal: incoming.signal,
+  });
+  const failure = new Error('client disconnected during loader');
+  const beforeRender = collectBeforeRender(() => [
+    {
+      id: 'root',
+      path: '/',
+      Component: () => null,
+      loader: ({ request }: { request: Request }) =>
+        new Promise((_resolve, reject) => {
+          request.signal.addEventListener(
+            'abort',
+            () => reject(request.signal.reason),
+            { once: true },
+          );
+          started();
+        }),
+    },
+  ]);
+  const pending = beforeRender(context, value => value);
+  await loading;
+  const router = getRouterRuntimeState(context)!.instance as AnyRouter;
+  const cleanup = rstest.spyOn(router.serverSsr!, 'cleanup');
+  incoming.abort(failure);
+  await expect(pending).rejects.toBe(failure);
+  expect(cleanup).toHaveBeenCalledTimes(1);
+  await getRouterRuntimeState(context)?.cleanup?.();
+  expect(cleanup).toHaveBeenCalledTimes(1);
+});