@bleedingdev/modern-js-plugin-tanstack 3.9.0-ultramodern.3 → 3.9.0-ultramodern.5

package/tests/router/routeTree.test.ts

@@ -1,5 +1,3 @@
-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';
@@ -12,8 +10,6 @@ import {
 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 {
   createRouteTreeFromRouteObjects,
@@ -144,38 +140,6 @@ function getRouteByModernRouteId(
   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']).toBeDefined();
-    expect(packageJson.exports['./runtime/rsc/server']).toBeDefined();
-    expect(packageJson.typesVersions?.['*']?.['runtime/rsc']).toBeUndefined();
-    expect(packageJson.typesVersions?.['*']?.['runtime/rsc/client']).toEqual([
-      './dist/types/runtime/rsc/client.d.ts',
-    ]);
-    expect(packageJson.typesVersions?.['*']?.['runtime/rsc/server']).toEqual([
-      './dist/types/runtime/rsc/server.d.ts',
-    ]);
-  });
-});
-
 describe('tanstack route tree from RouteObject[]', () => {
   afterEach(() => {
     __setTanstackRscPayloadDecoderForTests();
@@ -311,29 +275,6 @@ describe('tanstack route tree from RouteObject[]', () => {
     );
   });
 
-  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(getRoute(router, '/plain').options.wrapInSuspense).toBeUndefined();
-  });
-
   test('renders Modern Outlet through TanStack native outlet', async () => {
     const routes: RouteObject[] = [
       {
@@ -356,10 +297,7 @@ describe('tanstack route tree from RouteObject[]', () => {
     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', () => {
@@ -414,46 +352,6 @@ describe('tanstack route tree from RouteObject[]', () => {
     ]);
   });
 
-  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 = getRoute(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' }));
@@ -543,40 +441,6 @@ 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 = getRoute(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');
@@ -601,15 +465,10 @@ describe('tanstack route tree from RouteObject[]', () => {
 
     const routeTree = createRouteTreeFromRouteObjects(routes);
     const router = await loadRouteTree(routeTree, '/lazy');
-    const lazyRoute = getRoute(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 () => {
@@ -745,41 +604,6 @@ describe('tanstack route tree from RouteObject[]', () => {
     );
   });
 
-  test('preserves client route metadata and disables invalid SSR routes', async () => {
-    const routes: TestRouteObject[] = [
-      {
-        id: 'root',
-        path: '/',
-        Component: () => null,
-        children: [
-          {
-            id: 'client',
-            path: 'client',
-            hasAction: true,
-            hasClientLoader: true,
-            hasLoader: true,
-            inValidSSRRoute: true,
-            isClientComponent: true,
-            loader: () => ({ ok: true }),
-            Component: () => null,
-          },
-        ],
-      },
-    ];
-
-    const routeTree = createRouteTreeFromRouteObjects(routes);
-    const router = await loadRouteTree(routeTree, '/client');
-    const clientRoute = getRoute(router, '/client');
-
-    expect(clientRoute.options.ssr).toBe(false);
-    expect(clientRoute.options.staticData).toMatchObject({
-      modernRouteHasAction: true,
-      modernRouteHasClientLoader: true,
-      modernRouteHasLoader: true,
-      modernRouteIsClientComponent: true,
-    });
-  });
-
   test('normalizes Modern deferred loader data for TanStack SSR', async () => {
     const routes: TestRouteObject[] = [
       {
@@ -893,40 +717,4 @@ describe('tanstack route tree from RouteObject[]', () => {
       modernRouteIsClientComponent: true,
     });
   });
-
-  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: 'child',
-            path: 'child',
-            hasErrorBoundary: true,
-            error: ErrorPage,
-          },
-        ],
-      },
-    ];
-
-    const routeObjects = createTanstackRouteObjectsFromConfig({
-      routesConfig: { routes: modernRoutes },
-    });
-    const rootRoute = routeObjects?.[0];
-    const childRoute = rootRoute?.children?.[0];
-
-    expect(rootRoute).not.toHaveProperty('hasErrorBoundary');
-    expect(childRoute).not.toHaveProperty('hasErrorBoundary');
-    expect(childRoute?.errorElement).toBeDefined();
-  });
 });

package/tests/router/routerCompatibility.test.ts

@@ -27,6 +27,8 @@ type LegacyRuntimeRouterModule = {
 
 type CompatibilityGraph = {
   factory: (...args: any[]) => any;
+  Link: unknown;
+  hooks: Record<string, unknown>;
   legacyRuntimeRouter: LegacyRuntimeRouterModule;
   resolveRouterProvider: (
     framework?: string,
@@ -45,16 +47,41 @@ async function loadCompatibilityGraph(): Promise<CompatibilityGraph> {
   const { tanstackRouterProviderFactory } = await import(
     '../../src/runtime/register'
   );
-  const { resolveRouterProvider } = await import('@modern-js/runtime/context');
+  const { resolveRouterProvider } = await import(
+    '@modern-js/runtime-extensions/router-provider'
+  );
+  const { routerProviderRegistryHooks } = await import(
+    '../../src/runtime/hooks'
+  );
+  const { Link } = await import('../../src/runtime/prefetchLink');
 
   return {
     factory: tanstackRouterProviderFactory,
+    Link,
+    hooks: routerProviderRegistryHooks,
     legacyRuntimeRouter,
     resolveRouterProvider,
     routerPlugin,
   };
 }
 
+function initializeRouter(graph: CompatibilityGraph) {
+  const beforeRender: ((context: any, interrupt: () => void) => unknown)[] = [];
+  const plugin = graph.routerPlugin({ framework: 'tanstack' });
+  plugin.setup({
+    getHooks: () => graph.hooks,
+    getRuntimeConfig: () => ({ router: { framework: 'tanstack' } }),
+    onAfterCreateRouter: () => undefined,
+    onBeforeRender: (
+      callback: (context: any, interrupt: () => void) => unknown,
+    ) => beforeRender.push(callback),
+    wrapRoot: () => undefined,
+  });
+  const context: any = {};
+  for (const callback of beforeRender) callback(context, () => {});
+  return context.router as { Link: unknown };
+}
+
 function resolveTsgoBin(): string {
   const packageJsonPath = require.resolve(
     '@typescript/native-preview/package.json',
@@ -103,10 +130,7 @@ describe('runtime router compatibility', () => {
     const graph = await loadCompatibilityGraph();
 
     expect('createRouterPlugin' in graph.legacyRuntimeRouter).toBe(false);
-    expect(graph.routerPlugin).toBe(graph.factory);
-    expect(graph.routerPlugin({ framework: 'tanstack' })).toMatchObject({
-      name: '@modern-js/plugin-router-tanstack',
-    });
+    expect(initializeRouter(graph).Link).toBe(graph.Link);
     expect(
       graph.legacyRuntimeRouter.getLegacyRouterPluginInvocationCount(),
     ).toBe(0);
@@ -117,11 +141,10 @@ describe('runtime router compatibility', () => {
     const graphB = await loadCompatibilityGraph();
 
     expect(graphB.factory).not.toBe(graphA.factory);
-    expect(graphB.routerPlugin).toBe(graphB.factory);
+    expect(graphB.routerPlugin).not.toBe(graphA.routerPlugin);
     expect(graphB.resolveRouterProvider('tanstack')).toBe(graphA.factory);
-    expect(graphB.routerPlugin({ framework: 'tanstack' })).toMatchObject({
-      name: '@modern-js/plugin-router-tanstack',
-    });
+    expect(initializeRouter(graphA).Link).toBe(graphA.Link);
+    expect(initializeRouter(graphB).Link).toBe(graphB.Link);
     expect(
       graphA.legacyRuntimeRouter.getLegacyRouterPluginInvocationCount(),
     ).toBe(0);

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(
       {
@@ -301,29 +219,39 @@ describe('tanstack rsc runtime helpers', () => {
     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('normalizes redirect basenames while preserving status and headers', () => {
+    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 () => {
@@ -362,47 +290,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 +395,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 }));