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

package/src/runtime/rsc/payloadRouter.ts

@@ -1,5 +1,6 @@
-// @effect-diagnostics asyncFunction:off globalFetch:off strictBooleanExpressions:off
+// @effect-diagnostics asyncFunction:off globalFetch:off processEnv:off strictBooleanExpressions:off
 import type { PayloadRoute, ServerPayload } from '@modern-js/runtime/context';
+import { isRouteErrorResponse } from '@modern-js/runtime-utils/router';
 import { notFound, redirect } from '@tanstack/react-router';
 
 type PayloadDecoder = (stream: ReadableStream<Uint8Array>) => Promise<unknown>;
@@ -103,6 +104,48 @@ function toPayloadRoute(match: RouterMatchLike): PayloadRoute | undefined {
   };
 }
 
+function shouldRedactServerError(status = 500) {
+  return (
+    status >= 500 &&
+    process.env.NODE_ENV !== 'development' &&
+    process.env.NODE_ENV !== 'test'
+  );
+}
+
+function serializePayloadError(error: unknown): unknown {
+  if (isRouteErrorResponse(error)) {
+    if (shouldRedactServerError(error.status)) {
+      return {
+        status: error.status,
+        statusText: 'Internal Server Error',
+        data: 'Unexpected Server Error',
+        __type: 'RouteErrorResponse',
+      };
+    }
+
+    return { ...error, __type: 'RouteErrorResponse' };
+  }
+
+  if (error instanceof Error) {
+    if (shouldRedactServerError()) {
+      return {
+        message: 'Unexpected Server Error',
+        stack: undefined,
+        __type: 'Error',
+      };
+    }
+
+    return {
+      message: error.message,
+      stack: error.stack,
+      __type: 'Error',
+      ...(error.name !== 'Error' ? { __subType: error.name } : {}),
+    };
+  }
+
+  return error;
+}
+
 export function createTanstackRscServerPayload(
   router: TanstackPayloadRouterLike,
   options: {
@@ -133,7 +176,7 @@ export function createTanstackRscServerPayload(
     }
 
     if (typeof match.error !== 'undefined') {
-      errors[payloadRoute.id] = match.error;
+      errors[payloadRoute.id] = serializePayloadError(match.error);
     }
   }
 

package/src/runtime/state.ts

@@ -0,0 +1,29 @@
+import { getRouterRuntimeState } from '@modern-js/runtime/context';
+import type { AnyRouter } from '@tanstack/react-router';
+import type { InternalRouterRuntimeState } from './types';
+
+/**
+ * Router runtime state as published by the TanStack router provider into the
+ * runtime-context extension slot.
+ */
+export interface TanstackRouterState
+  extends Omit<InternalRouterRuntimeState, 'framework' | 'instance'> {
+  framework: 'tanstack';
+  instance?: AnyRouter;
+}
+
+/**
+ * Typed accessor for the TanStack router state stored on a Modern.js runtime
+ * context. Returns `undefined` when the active router provider is not
+ * TanStack (e.g. react-router) or no router has been created yet.
+ */
+export function getTanstackRouterState(
+  context: object,
+): TanstackRouterState | undefined {
+  const state = getRouterRuntimeState(context);
+  if (state === undefined || state.framework !== 'tanstack') {
+    return undefined;
+  }
+
+  return state as TanstackRouterState;
+}

package/src/runtime/types.ts

@@ -1,25 +1,37 @@
-import type { RequestContext } from '@modern-js/runtime-utils/node';
+import type {
+  RouterFramework,
+  // The router runtime state types are owned by @modern-js/runtime; they are
+  // imported through the `/context` seam instead of being copied here so
+  // upstream fixes propagate to this package automatically.
+} from '@modern-js/runtime/context';
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type { NestedRoute, PageRoute } from '@modern-js/types';
 import type React from 'react';
 
-export type BuiltInRouterFramework = 'react-router' | 'tanstack';
-export type RouterFramework = BuiltInRouterFramework | (string & {});
-
+export type {
+  BuiltInRouterFramework,
+  InternalRouterRuntimeState,
+  InternalRouterServerSnapshot,
+  RouterFramework,
+  RouterRouteMatchSnapshot,
+  RouterServerPrepareResult,
+} from '@modern-js/runtime/context';
+
+/**
+ * TanStack-specific router config. Unlike the react-router provider config,
+ * this intentionally has no `oldVersion`/`future` fields — those are
+ * react-router-only knobs with no meaning here.
+ */
 export type RouterConfig = {
   framework?: RouterFramework;
   routesConfig: {
     globalApp?: React.ComponentType<any>;
     routes?: (NestedRoute | PageRoute)[];
   };
-  oldVersion?: boolean;
   serverBase?: string[];
   supportHtml5History?: boolean;
   basename?: string;
   createRoutes?: () => RouteObject[];
-  future?: Partial<{
-    v7_startTransition: boolean;
-  }>;
   defaultStructuralSharing?: boolean;
   unstable_reloadOnURLMismatch?: boolean;
 };
@@ -35,62 +47,3 @@ export const getModernTanstackRouterFastDefaults = (
     config.defaultStructuralSharing ??
     modernTanstackRouterFastDefaults.defaultStructuralSharing,
 });
-
-export interface RouterRouteMatchSnapshot {
-  routeId: string;
-  assetRouteId?: string;
-  pathname?: string;
-  params?: Record<string, string>;
-}
-
-export interface InternalRouterServerSnapshot {
-  framework?: RouterFramework;
-  basename?: string;
-  statusCode?: number;
-  errors?: Record<string, unknown>;
-  routerData?: {
-    loaderData?: Record<string, unknown>;
-    errors?: Record<string, unknown>;
-  };
-  hydrationScript?: string;
-  hydrationScripts?: string[];
-  matchedRouteIds?: string[];
-  matches?: RouterRouteMatchSnapshot[];
-}
-
-export interface InternalRouterRuntimeState {
-  framework: RouterFramework;
-  basename?: string;
-  instance?: unknown;
-  hydrationScript?: string;
-  hydrationScripts?: string[];
-  matchedRouteIds?: string[];
-  matches?: RouterRouteMatchSnapshot[];
-  serverSnapshot?: InternalRouterServerSnapshot;
-  cleanup?: () => void | Promise<void>;
-}
-
-export interface RouterServerPrepareResult {
-  state: InternalRouterRuntimeState;
-  snapshot?: InternalRouterServerSnapshot;
-  redirect?: Response;
-  cleanup?: () => void | Promise<void>;
-}
-
-interface DataFunctionArgs<D = any> {
-  request: Request;
-  params: Record<string, string>;
-  context?: D;
-}
-
-export type LoaderFunctionArgs<
-  P extends Record<string, unknown> = Record<string, unknown>,
-> = DataFunctionArgs<RequestContext<P>>;
-
-type DataFunctionValue = Response | NonNullable<unknown> | null;
-
-export type LoaderFunction = <
-  P extends Record<string, unknown> = Record<string, unknown>,
->(
-  args: LoaderFunctionArgs<P>,
-) => Promise<DataFunctionValue> | DataFunctionValue;

package/src/runtime/utils.tsx

@@ -2,7 +2,6 @@
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type { NestedRoute, PageRoute, SSRMode } from '@modern-js/types';
 import React from 'react';
-import { DefaultNotFound } from './DefaultNotFound';
 
 type RouterConfig = {
   routesConfig: {
@@ -106,11 +105,9 @@ export function getRouteObjects(
     }
   }
 
-  routeObjects.push({
-    path: '*',
-    element: <DefaultNotFound />,
-  });
-
+  // No synthetic `{ path: '*' }` 404 route here: TanStack Router handles
+  // not-found matches through the root route's `notFoundComponent`
+  // (see routeTree.ts), so the react-router style catch-all is unnecessary.
   return routeObjects;
 }
 

package/tests/router/cli.test.ts

@@ -6,7 +6,6 @@ import type { Entrypoint } from '@modern-js/types';
 import { fs, NESTED_ROUTE_SPEC_FILE } from '@modern-js/utils';
 import {
   createTanstackRsbuildRouteSplittingProfile,
-  isTanstackStartRouteModuleSource,
   tanstackRouterPlugin,
   writeTanstackRegisterFile,
   writeTanstackRouterTypesForEntries,
@@ -19,16 +18,29 @@ const runtimeCliMocks = {
 
 rstest.mock('@modern-js/runtime/cli', () => {
   const routesDirMetaKey = '__modernRoutesDir';
+  // The codegen helpers are pure — forward to the real implementations.
+  const actualCli = rstest.requireActual('@modern-js/runtime/cli') as {
+    getPathWithoutExt: (filename: string) => string;
+    makeLegalIdentifier: (value: string) => string;
+  };
 
   return {
     __esModule: true,
+    getPathWithoutExt: actualCli.getPathWithoutExt,
+    makeLegalIdentifier: actualCli.makeLegalIdentifier,
     getEntrypointRoutesDir: (entrypoint: any) =>
       entrypoint[routesDirMetaKey] ||
       (entrypoint.nestedRoutesEntry
         ? path.basename(entrypoint.nestedRoutesEntry)
         : null),
-    handleFileChange: runtimeCliMocks.handleFileChange,
-    handleGeneratorEntryCode: runtimeCliMocks.handleGeneratorEntryCode,
+    getEntrypointRoutesOwner: (entrypoint: any) =>
+      entrypoint.__modernRoutesOwner || null,
+    // Forward through arrows: the mock factory is hoisted above the
+    // `runtimeCliMocks` initializer, so it must not dereference it eagerly.
+    handleFileChange: (...args: unknown[]) =>
+      runtimeCliMocks.handleFileChange(...args),
+    handleGeneratorEntryCode: (...args: unknown[]) =>
+      runtimeCliMocks.handleGeneratorEntryCode(...args),
     handleModifyEntrypoints: async (
       entrypoints: Entrypoint[],
       routesDir = 'routes',
@@ -307,6 +319,278 @@ describe('tanstack router cli plugin', () => {
     });
   });
 
+  test('injects the framework-resolving router wrapper for non-file-route entrypoints', async () => {
+    const taps: Record<string, any> = {};
+    const api = {
+      getAppContext: () => ({
+        srcDirectory: '/tmp/app/src',
+        metaName: 'modern-js',
+        serverRoutes: [{ entryName: 'custom', urlPath: '/' }],
+      }),
+      _internalRuntimePlugins: (tap: any) => {
+        taps.internalRuntimePlugins = tap;
+      },
+      checkEntryPoint: () => {},
+      config: () => {},
+      modifyEntrypoints: () => {},
+      generateEntryCode: () => {},
+      onFileChanged: () => {},
+      modifyFileSystemRoutes: () => {},
+      onBeforeGenerateRoutes: () => {},
+    };
+
+    tanstackRouterPlugin().setup!(api as any);
+
+    // Custom entry without a routes dir (e.g. `createRoutes` in
+    // modern.runtime.ts): installing the plugin is the explicit opt-in, no
+    // source sniffing — the wrapper plus the provider registration is
+    // injected through the package's own runtime/router module.
+    const customEntrypoint = {
+      entryName: 'custom',
+      isAutoMount: true,
+    } as Entrypoint;
+    expect(
+      taps.internalRuntimePlugins({ entrypoint: customEntrypoint, plugins: [] })
+        .plugins,
+    ).toEqual([
+      {
+        name: 'router',
+        path: '@modern-js/plugin-tanstack/runtime/router',
+        config: { serverBase: ['/'] },
+      },
+    ]);
+
+    // If the built-in router CLI already installed the internal router for
+    // this custom entry (explicit `runtime.router` config), only the module
+    // path is redirected so the TanStack provider registration is
+    // value-imported with it.
+    const existingRouterPlugin = {
+      name: 'router',
+      path: '@modern-js/runtime/router/internal',
+      config: { serverBase: ['/'] },
+    };
+    const { plugins } = taps.internalRuntimePlugins({
+      entrypoint: customEntrypoint,
+      plugins: [existingRouterPlugin],
+    });
+    expect(plugins).toHaveLength(1);
+    expect(plugins[0]).toEqual({
+      name: 'router',
+      path: '@modern-js/plugin-tanstack/runtime/router',
+      config: { serverBase: ['/'] },
+    });
+  });
+
+  test('leaves built-in and foreign-owned route entrypoints to their own router', () => {
+    const taps: Record<string, any> = {};
+    const api = {
+      getAppContext: () => ({
+        srcDirectory: '/tmp/app/src',
+        metaName: 'modern-js',
+        serverRoutes: [{ entryName: 'home', urlPath: '/' }],
+      }),
+      _internalRuntimePlugins: (tap: any) => {
+        taps.internalRuntimePlugins = tap;
+      },
+      checkEntryPoint: () => {},
+      config: () => {},
+      modifyEntrypoints: () => {},
+      generateEntryCode: () => {},
+      onFileChanged: () => {},
+      modifyFileSystemRoutes: () => {},
+      onBeforeGenerateRoutes: () => {},
+    };
+
+    tanstackRouterPlugin({ routesDir: 'ts-routes' }).setup!(api as any);
+
+    // A classic react-router file-route entry (src/<entry>/routes) living
+    // next to the TanStack entries: its internal router plugin must be left
+    // untouched — redirecting it through the TanStack wrapper would pull
+    // @tanstack/react-router into a pure react-router bundle.
+    const builtInEntrypoint = {
+      entryName: 'home',
+      isAutoMount: true,
+      nestedRoutesEntry: '/tmp/app/src/home/routes',
+      __modernRoutesDir: 'routes',
+    } as Entrypoint;
+    const { plugins: builtInPlugins } = taps.internalRuntimePlugins({
+      entrypoint: builtInEntrypoint,
+      plugins: [
+        {
+          name: 'router',
+          path: '@modern-js/runtime/router/internal',
+          config: { serverBase: ['/'] },
+        },
+      ],
+    });
+    expect(builtInPlugins).toEqual([
+      {
+        name: 'router',
+        path: '@modern-js/runtime/router/internal',
+        config: { serverBase: ['/'] },
+      },
+    ]);
+
+    // An entry tagged by another routes-owner plugin: nothing is pushed.
+    // The replaced sniffing path in @modern-js/runtime excluded
+    // plugin-owned entrypoints for the same reason — pushing a second
+    // `router` plugin can install two routers for one entry.
+    const foreignEntrypoint = {
+      entryName: 'home',
+      isAutoMount: true,
+      nestedRoutesEntry: '/tmp/app/src/home/acme-routes',
+      __modernRoutesDir: 'acme-routes',
+      __modernRoutesOwner: '@acme/plugin-file-router',
+    } as Entrypoint;
+    expect(
+      taps.internalRuntimePlugins({
+        entrypoint: foreignEntrypoint,
+        plugins: [],
+      }).plugins,
+    ).toEqual([]);
+
+    // The built-in pages/ convention is foreign too.
+    const pagesEntrypoint = {
+      entryName: 'home',
+      isAutoMount: true,
+      pageRoutesEntry: '/tmp/app/src/home/pages',
+    } as Entrypoint;
+    expect(
+      taps.internalRuntimePlugins({ entrypoint: pagesEntrypoint, plugins: [] })
+        .plugins,
+    ).toEqual([]);
+  });
+
+  test('source.include covers the package dist and TanStack runtime deps without string surgery', () => {
+    const taps: Record<string, any> = {};
+    const api = {
+      getAppContext: () => ({
+        srcDirectory: '/tmp/app/src',
+        serverRoutes: [],
+      }),
+      _internalRuntimePlugins: () => {},
+      checkEntryPoint: () => {},
+      config: (tap: any) => {
+        taps.config = tap;
+      },
+      modifyEntrypoints: () => {},
+      generateEntryCode: () => {},
+      onFileChanged: () => {},
+      modifyFileSystemRoutes: () => {},
+      onBeforeGenerateRoutes: () => {},
+    };
+
+    tanstackRouterPlugin().setup!(api as any);
+
+    const include = taps.config().source.include as Array<RegExp | string>;
+    const regexes = include.filter(
+      (entry): entry is RegExp => entry instanceof RegExp,
+    );
+    for (const dep of ['react-router', 'router-core', 'react-store']) {
+      const sample = `/repo/node_modules/@tanstack/${dep}/dist/esm/index.js`;
+      expect(regexes.some(regex => regex.test(sample))).toBe(true);
+    }
+
+    const stringEntries = include.filter(
+      (entry): entry is string => typeof entry === 'string',
+    );
+    expect(stringEntries).toHaveLength(1);
+    // The include must point at the package root (two levels above the cli
+    // build dir) so dist/esm, dist/esm-node and dist/cjs are all covered —
+    // the old `.replace('cjs', 'esm')` never matched the bundled dist/esm
+    // runtime when the CLI was loaded through the ESM condition.
+    expect(stringEntries[0]).toBe(path.resolve(__dirname, '..', '..'));
+    expect(stringEntries[0]).not.toContain('esm');
+  });
+
+  test('emits the plugin-i18n augmentation only when plugin-i18n is registered', async () => {
+    const langRoutes = [
+      {
+        type: 'nested',
+        id: 'layout',
+        isRoot: true,
+        children: [
+          {
+            type: 'nested',
+            id: '(lang)/layout',
+            path: ':lang',
+            children: [
+              {
+                type: 'nested',
+                id: '(lang)/about/page',
+                path: 'about',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const runGenerate = async (registeredPlugins: Array<{ name: string }>) => {
+      const dir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-cli-'));
+      const srcDirectory = path.join(dir, 'src');
+      const entrypoint = {
+        entryName: 'main',
+        isAutoMount: true,
+        isMainEntry: true,
+        nestedRoutesEntry: path.join(srcDirectory, 'routes'),
+        __modernRoutesDir: 'routes',
+      } as Entrypoint;
+      runtimeCliMocks.handleGeneratorEntryCode.mockResolvedValueOnce({
+        main: langRoutes,
+      });
+
+      const taps: Record<string, any> = {};
+      const api = {
+        getAppContext: () => ({
+          srcDirectory,
+          internalSrcAlias: '@/_',
+          entrypoints: [entrypoint],
+          plugins: registeredPlugins,
+        }),
+        _internalRuntimePlugins: () => {},
+        checkEntryPoint: () => {},
+        config: () => {},
+        modifyEntrypoints: () => {},
+        generateEntryCode: (tap: any) => {
+          taps.generateEntryCode = tap;
+        },
+        onFileChanged: () => {},
+        modifyFileSystemRoutes: () => {},
+        onBeforeGenerateRoutes: () => {},
+      };
+
+      tanstackRouterPlugin().setup!(api as any);
+      await taps.generateEntryCode({ entrypoints: [entrypoint] });
+
+      const register = await readFile(
+        path.join(srcDirectory, 'modern-tanstack', 'register.gen.d.ts'),
+        'utf-8',
+      );
+      await rm(dir, { recursive: true, force: true });
+      return register;
+    };
+
+    // A hand-rolled `/:lang/` app WITHOUT plugin-i18n must not get the
+    // augmentation — it would reference an unresolvable module (TS2664).
+    const withoutI18n = await runGenerate([{ name: '@modern-js/app-tools' }]);
+    expect(withoutI18n).not.toContain('plugin-i18n');
+    expect(withoutI18n).not.toContain('UltramodernCanonicalRoutes');
+    expect(withoutI18n).toContain(
+      "declare module '@modern-js/plugin-tanstack/runtime'",
+    );
+
+    // With plugin-i18n registered the canonical route map is emitted.
+    const withI18n = await runGenerate([
+      { name: '@modern-js/app-tools' },
+      { name: '@modern-js/plugin-i18n' },
+    ]);
+    expect(withI18n).toContain(
+      "declare module '@modern-js/plugin-i18n/runtime'",
+    );
+    expect(withI18n).toContain("'/about': Record<string, never>;");
+  });
+
   test('generates plugin-owned TanStack route files through core route generation', async () => {
     tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-cli-'));
     const srcDirectory = path.join(tempDir, 'src');
@@ -392,9 +676,6 @@ describe('tanstack router cli plugin', () => {
       [entrypoint],
       {
         entrypointsKey: '@modern-js/plugin-tanstack',
-        generateCodeOptions: {
-          enableTanstackTypes: false,
-        },
       },
     );
 
@@ -497,38 +778,23 @@ describe('tanstack router cli plugin', () => {
     });
   });
 
-  test('documents why TanStack Start Rspack splitter is not registered for Modern routes', () => {
-    const profile = createTanstackRsbuildRouteSplittingProfile({});
-
-    expect(profile).toMatchObject({
+  test('route splitting profile carries only the rsbuild config production consumes', () => {
+    expect(createTanstackRsbuildRouteSplittingProfile({})).toEqual({
       defaultConfig: {
         output: {
           splitRouteChunks: true,
         },
       },
-      modernRouteChunks: {
-        enabled: true,
-        owner: 'modern',
-      },
-      builderChunkSplit: {
-        owner: 'modern-rsbuild',
-        preserved: true,
-      },
-      tanstackStartRspackSplitter: {
-        compatible: false,
-        clientDeleteNodes: ['ssr', 'server', 'headers'],
-      },
     });
     expect(
-      isTanstackStartRouteModuleSource(
-        "export const Route = createFileRoute('/dashboard')({ component })",
-      ),
-    ).toBe(true);
-    expect(
-      isTanstackStartRouteModuleSource(
-        'export const route = createRoute({ getParentRoute, path })',
-      ),
-    ).toBe(false);
+      createTanstackRsbuildRouteSplittingProfile({ routeCodeSplitting: false }),
+    ).toEqual({
+      defaultConfig: {
+        output: {
+          splitRouteChunks: false,
+        },
+      },
+    });
   });
 
   test('preserves user-selected route and builder chunk splitting modes', () => {

package/tests/router/hooks.test.ts

@@ -0,0 +1,26 @@
+import {
+  modifyRoutes as canonicalModifyRoutes,
+  routerProviderRegistryHooks,
+} from '@modern-js/runtime/context';
+import * as tanstackHooks from '../../src/runtime/hooks';
+import { tanstackRouterPlugin as browserPlugin } from '../../src/runtime/plugin';
+import { tanstackRouterPlugin as nodePlugin } from '../../src/runtime/plugin.node';
+
+describe('tanstack router hooks single declaration source', () => {
+  test('re-exports the canonical hook instances owned by @modern-js/runtime', () => {
+    // Identity matters: separate instances would split the hook registry
+    // between the built-in router wrapper and this provider.
+    expect(tanstackHooks.modifyRoutes).toBe(canonicalModifyRoutes);
+    expect(tanstackHooks.routerProviderRegistryHooks).toBe(
+      routerProviderRegistryHooks,
+    );
+    expect(tanstackHooks.modifyRoutes).toBe(
+      routerProviderRegistryHooks.modifyRoutes,
+    );
+  });
+
+  test('both runtime plugins register the canonical hook registry object', () => {
+    expect(browserPlugin().registryHooks).toBe(routerProviderRegistryHooks);
+    expect(nodePlugin().registryHooks).toBe(routerProviderRegistryHooks);
+  });
+});