@bleedingdev/modern-js-plugin-tanstack 3.9.0-ultramodern.4 → 3.9.0-ultramodern.6

package/src/runtime/router.ts

@@ -1,43 +1,28 @@
-/**
- * Entry-injected router module for entrypoints that are NOT TanStack
- * file-route entrypoints (e.g. apps configuring
- * `router: { framework: 'tanstack', createRoutes }` in modern.runtime.ts).
- *
- * The CLI plugin injects `{ name: 'router', path: '<pkg>/runtime/router' }`
- * for those entries. This module creates a framework-resolving wrapper whose
- * app-owned provider realm contains this module graph's TanStack factory.
- */
-import * as runtimeRouter from '@modern-js/runtime/router/internal';
+/** App-local composition for custom entries using runtime router selection. */
+import { routerProviderRegistryHooks } from '@modern-js/runtime/context';
+import { routerPlugin as nativeRouterPlugin } from '@modern-js/runtime/router/internal';
+import { createRouterPlugin } from '@modern-js/runtime-extensions/router-provider';
+import { createRouterStatePlugin } from '@modern-js/runtime-extensions/router-state-plugin';
 import { tanstackRouterProviderFactory } from './register';
 
-type LegacyRouterPlugin = (typeof runtimeRouter)['routerPlugin'];
-type CurrentRouterPluginCreator = (
-  localProviders: readonly {
-    name: string;
-    factory: typeof tanstackRouterProviderFactory;
-  }[],
-) => LegacyRouterPlugin;
+const createProviderPlugin = createRouterPlugin({
+  defaultProvider: { name: 'react-router', factory: nativeRouterPlugin },
+  registryHooks: routerProviderRegistryHooks,
+  localProviders: [
+    { name: 'tanstack', factory: tanstackRouterProviderFactory },
+  ],
+});
+const statePlugin = createRouterStatePlugin({
+  registryHooks: routerProviderRegistryHooks,
+});
 
-function getRouterPlugin(): LegacyRouterPlugin {
-  const createRouterPlugin = Reflect.get(runtimeRouter, 'createRouterPlugin') as
-    | CurrentRouterPluginCreator
-    | undefined;
-
-  if (typeof createRouterPlugin === 'function') {
-    return createRouterPlugin([
-      { name: 'tanstack', factory: tanstackRouterProviderFactory },
-    ]);
-  }
-
-  const legacyRouterPlugin = Reflect.get(runtimeRouter, 'routerPlugin');
-
-  if (typeof legacyRouterPlugin === 'function') {
-    return tanstackRouterProviderFactory as unknown as LegacyRouterPlugin;
-  }
-
-  throw new Error(
-    '[@modern-js/plugin-tanstack] The installed @modern-js/runtime/router/internal exports neither createRouterPlugin nor routerPlugin. Install a compatible @modern-js/runtime version.',
-  );
-}
-
-export const routerPlugin: LegacyRouterPlugin = getRouterPlugin();
+export const routerPlugin: typeof nativeRouterPlugin = (userConfig = {}) => {
+  const providerPlugin = createProviderPlugin(userConfig);
+  return {
+    ...providerPlugin,
+    setup(api) {
+      statePlugin.setup(api);
+      providerPlugin.setup(api);
+    },
+  };
+};

package/src/runtime/state.ts

@@ -1,7 +1,7 @@
 import {
   getRouterRuntimeState,
   type InternalRouterRuntimeState,
-} from '@modern-js/runtime/context';
+} from '@modern-js/runtime-extensions/router-state';
 import type { AnyRouter } from '@tanstack/react-router';
 
 /**

package/src/runtime/types.ts

@@ -2,11 +2,11 @@ import type { ModernRoute } from '@modern-js/runtime/context';
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type React from 'react';
 
+export type { ModernRoute } from '@modern-js/runtime/context';
 export type {
   InternalRouterServerSnapshot,
-  ModernRoute,
   RouterFramework,
-} from '@modern-js/runtime/context';
+} from '@modern-js/runtime-extensions/router-state';
 
 /** TanStack-specific router config. */
 export type RouterConfig = {

package/tests/realm-isolation.test.ts

@@ -1,17 +1,13 @@
-import type { RouterProviderFactory } from '@modern-js/runtime/context';
+import type { RouterProviderFactory } from '@modern-js/runtime-extensions/router-provider';
 import { rstest } from '@rstest/core';
 import type { RouterExtendsHooks } from '../src/runtime/hooks';
 
-const REGISTRY_SLOT: unique symbol = Symbol.for(
-  '@modern-js/runtime:router-providers:v3',
-);
-const host = globalThis as { [REGISTRY_SLOT]?: unknown };
-
 type RuntimeContextModule = typeof import('@modern-js/runtime/context');
 type RouterModule = typeof import('../src/runtime/router');
 
 type Vertical = {
   context: RuntimeContextModule;
+  providers: typeof import('@modern-js/runtime-extensions/router-provider');
   factory: RouterProviderFactory;
   hooks: RouterExtendsHooks;
   Link: unknown;
@@ -32,8 +28,12 @@ async function loadVertical(): Promise<Vertical> {
   const { Link } = await import('../src/runtime/prefetchLink');
   const { useMatches } = await import('../src/runtime/routeHooks');
 
+  const providers = await import(
+    '@modern-js/runtime-extensions/router-provider'
+  );
   return {
     context,
+    providers,
     factory: tanstackRouterProviderFactory,
     hooks: routerProviderRegistryHooks,
     Link,
@@ -50,6 +50,7 @@ function setupRouterWrapper(vertical: Vertical) {
   const plugin = vertical.routerPlugin({ framework: 'tanstack' });
   plugin.setup?.({
     getHooks: () => vertical.hooks,
+    onAfterCreateRouter: () => undefined,
     getRuntimeConfig: () => ({ router: { framework: 'tanstack' } }),
     onBeforeRender: listener => {
       onBeforeRender = listener;
@@ -65,7 +66,6 @@ function setupRouterWrapper(vertical: Vertical) {
 
 describe('TanStack provider runtime-realm isolation', () => {
   beforeEach(() => {
-    delete host[REGISTRY_SLOT];
     rstest.resetModules();
     (
       globalThis as typeof globalThis & {
@@ -75,7 +75,6 @@ describe('TanStack provider runtime-realm isolation', () => {
   });
 
   afterEach(() => {
-    delete host[REGISTRY_SLOT];
     rstest.resetModules();
   });
 
@@ -98,15 +97,6 @@ describe('TanStack provider runtime-realm isolation', () => {
       expect(routerB.useMatches).toBe(verticalB.useMatches);
       expect(routerB.Link).not.toBe(verticalA.Link);
       expect(routerB.useMatches).not.toBe(verticalA.useMatches);
-
-      // Mixed-version callers that do not supply a realm still see the shared
-      // keep-first fallback, but production wrappers no longer consume it.
-      expect(verticalB.context.resolveRouterProvider('tanstack')).toBe(
-        verticalA.factory,
-      );
-      expect(warnSpy).toHaveBeenCalledWith(
-        expect.stringMatching(/keeping the first registration/),
-      );
     } finally {
       warnSpy.mockRestore();
     }

package/tests/router/cli.test.ts

@@ -4,6 +4,7 @@ import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { promisify } from 'node:util';
 import { mergeConfig } from '@modern-js/plugin/cli';
+import { compile } from '@modern-js/server-utils';
 import type { Entrypoint } from '@modern-js/types';
 import { fs, NESTED_ROUTE_SPEC_FILE } from '@modern-js/utils';
 import {
@@ -20,6 +21,16 @@ const strictestTsconfigPath = path.resolve(
   '../../node_modules/@tsconfig/strictest/tsconfig.json',
 );
 
+function createAppContextApi<T extends object>(initial: T) {
+  let context: T & { serverCompileExcludedFiles?: string[] } = { ...initial };
+  return {
+    getAppContext: () => context,
+    updateAppContext: (update: Partial<typeof context>) => {
+      context = { ...context, ...update };
+    },
+  };
+}
+
 async function typecheckGeneratedRegistration(options: {
   entries: string[];
   generatedDirName: string;
@@ -201,6 +212,92 @@ describe('tanstack router cli plugin', () => {
     }
   });
 
+  test.each([
+    { sourceDirectory: 'src', generatedDirName: undefined },
+    { sourceDirectory: 'client', generatedDirName: 'routing-types' },
+  ])('excludes its generated declaration from server roots only when installed: %s', async ({
+    sourceDirectory,
+    generatedDirName,
+  }) => {
+    tempDir = await fs.realpath(
+      await mkdtemp(path.join(tmpdir(), 'tanstack-server-roots-')),
+    );
+    const srcDirectory = path.join(tempDir, sourceDirectory);
+    const generatedDirectory = generatedDirName ?? 'modern-tanstack';
+    const declaration = path.join(
+      srcDirectory,
+      generatedDirectory,
+      'register.gen.d.ts',
+    );
+    const apiDirectory = path.join(tempDir, 'api');
+    const compileOptions = {
+      sourceDirs: [apiDirectory],
+      distDir: path.join(tempDir, 'dist'),
+      tsconfigPath: path.join(tempDir, 'tsconfig.json'),
+      throwErrorInsteadOfExit: true,
+    };
+    await fs.outputJSON(compileOptions.tsconfigPath, {
+      compilerOptions: {
+        module: 'commonjs',
+        target: 'ES2022',
+        types: [],
+        noEmitOnError: true,
+        skipLibCheck: false,
+      },
+      include: ['api', sourceDirectory],
+    });
+    await fs.outputFile(
+      path.join(apiDirectory, 'index.ts'),
+      'export const server = true;\n',
+    );
+    await fs.outputFile(
+      path.join(srcDirectory, 'routes/page.tsx'),
+      "import type { Missing } from 'missing-browser-only-types';\nexport const page: Missing = undefined;\n",
+    );
+    await fs.outputFile(
+      path.join(srcDirectory, generatedDirectory, 'main/router.gen.ts'),
+      "import { page } from '../../routes/page';\nexport const router = { page };\n",
+    );
+    await writeTanstackRegisterFile({
+      entries: ['main'],
+      srcDirectory,
+      generatedDirName,
+    });
+
+    await expect(compile(tempDir, {}, compileOptions)).rejects.toThrow(
+      /missing-browser-only-types/,
+    );
+
+    const previousExclusions = [path.join(tempDir, 'other-client.d.ts')];
+    const api = {
+      ...createAppContextApi({
+        srcDirectory,
+        serverCompileExcludedFiles: previousExclusions,
+      }),
+      _internalRuntimePlugins: () => {},
+      checkEntryPoint: () => {},
+      config: () => {},
+      modifyEntrypoints: () => {},
+      generateEntryCode: () => {},
+      onFileChanged: () => {},
+      modifyFileSystemRoutes: () => {},
+      onBeforeGenerateRoutes: () => {},
+    };
+    tanstackRouterPlugin({ generatedDirName }).setup!(api as never);
+    const excludeFiles = api.getAppContext().serverCompileExcludedFiles;
+    expect(excludeFiles).toEqual([...previousExclusions, declaration]);
+    expect(previousExclusions).toEqual([
+      path.join(tempDir, 'other-client.d.ts'),
+    ]);
+    await compile(tempDir, {}, { ...compileOptions, excludeFiles });
+    expect(
+      await fs.pathExists(path.join(compileOptions.distDir, 'api/index.js')),
+    ).toBe(true);
+    expect(
+      await fs.pathExists(path.join(compileOptions.distDir, sourceDirectory)),
+    ).toBe(false);
+  });
+
   test('typechecks plugin-owned routers and register metadata under strictest', async () => {
     tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-cli-'));
     const srcDirectory = path.join(tempDir, 'src');
@@ -345,7 +442,7 @@ describe('tanstack router cli plugin', () => {
 
     const taps: Record<string, any> = {};
     const api = {
-      getAppContext: () => ({
+      ...createAppContextApi({
         srcDirectory,
         distDirectory,
         metaName: 'modern-js',
@@ -446,7 +543,7 @@ 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: () => ({
+      ...createAppContextApi({
         srcDirectory: '/tmp/app/src',
         metaName: 'modern-js',
         serverRoutes: [{ entryName: 'custom', urlPath: '/' }],
@@ -508,7 +605,7 @@ describe('tanstack router cli plugin', () => {
   test('leaves built-in and foreign-owned route entrypoints to their own router', () => {
     const taps: Record<string, any> = {};
     const api = {
-      getAppContext: () => ({
+      ...createAppContextApi({
         srcDirectory: '/tmp/app/src',
         metaName: 'modern-js',
         serverRoutes: [{ entryName: 'home', urlPath: '/' }],
@@ -588,7 +685,7 @@ describe('tanstack router cli plugin', () => {
   test('source.include covers the package dist and TanStack runtime deps without string surgery', () => {
     const taps: Record<string, any> = {};
     const api = {
-      getAppContext: () => ({
+      ...createAppContextApi({
         srcDirectory: '/tmp/app/src',
         serverRoutes: [],
       }),
@@ -668,7 +765,7 @@ describe('tanstack router cli plugin', () => {
 
       const taps: Record<string, any> = {};
       const api = {
-        getAppContext: () => ({
+        ...createAppContextApi({
           srcDirectory,
           internalSrcAlias: '@/_',
           entrypoints: [entrypoint],
@@ -765,7 +862,7 @@ describe('tanstack router cli plugin', () => {
 
     const taps: Record<string, any> = {};
     const api = {
-      getAppContext: () => ({
+      ...createAppContextApi({
         srcDirectory,
         internalSrcAlias: '@/_',
         entrypoints: [entrypoint],
@@ -830,7 +927,7 @@ describe('tanstack router cli plugin', () => {
       __modernRoutesDir: 'views',
     } as any as Entrypoint;
     const api = {
-      getAppContext: () => ({
+      ...createAppContextApi({
         srcDirectory: '/tmp/app/src',
         internalSrcAlias: '@/_',
         entrypoints: [entrypoint],
@@ -878,7 +975,7 @@ describe('tanstack router cli plugin', () => {
   test('can opt out of Modern-owned route code splitting', async () => {
     const taps: Record<string, any> = {};
     const api = {
-      getAppContext: () => ({
+      ...createAppContextApi({
         srcDirectory: '/tmp/app/src',
         serverRoutes: [],
       }),

package/tests/router/dataMutation.test.tsx

@@ -105,54 +105,14 @@ describe('tanstack data mutation fetcher', () => {
     states.length = 0;
   });
 
-  test('tracks submitting and loading phases for mutation submit', async () => {
-    const actionResult = createDeferred<Response>();
-    const invalidateResult = createDeferred<void>();
-
-    currentRouter = createRouter({
-      action: async () => actionResult.promise,
-      invalidate: async () => invalidateResult.promise,
-    });
-
-    render(<FetcherHarness />);
-    expect(screen.getByTestId('state').textContent).toBe('idle');
-
-    let submitPromise: Promise<void> | undefined;
-    act(() => {
-      submitPromise = latestFetcher!.submit(
-        { amount: 2 },
-        { method: 'post', action: '/mutation' },
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('state').textContent).toBe('submitting');
-    });
-
-    actionResult.resolve(
-      new Response(JSON.stringify({ count: 2 }), {
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      }),
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('state').textContent).toBe('loading');
-    });
-
-    invalidateResult.resolve();
-
-    await act(async () => {
-      await submitPromise;
-    });
-
-    expect(screen.getByTestId('state').textContent).toBe('idle');
-    expect(screen.getByTestId('data').textContent).toBe('{"count":2}');
-    expect(states).toEqual(['idle', 'submitting', 'loading', 'idle']);
-  });
-
-  test('defaults fetcher submit without method to mutation state', async () => {
+  test.each([
+    { amount: 2, count: 2, method: 'post' as const, name: 'explicit method' },
+    { amount: 1, count: 1, method: undefined, name: 'default method' },
+  ])('tracks submitting/loading phases with the $name', async ({
+    amount,
+    count,
+    method,
+  }) => {
     const actionResult = createDeferred<Response>();
     const invalidateResult = createDeferred<void>();
     const action = rstest.fn(async () => actionResult.promise);
@@ -170,8 +130,11 @@ describe('tanstack data mutation fetcher', () => {
     let submitPromise: Promise<void> | undefined;
     act(() => {
       submitPromise = latestFetcher!.submit(
-        { amount: 1 },
-        { action: '/mutation' },
+        { amount },
+        {
+          ...(method === undefined ? {} : { method }),
+          action: '/mutation',
+        },
       );
     });
 
@@ -182,7 +145,7 @@ describe('tanstack data mutation fetcher', () => {
     expect(loader).not.toHaveBeenCalled();
 
     actionResult.resolve(
-      new Response(JSON.stringify({ count: 1 }), {
+      new Response(JSON.stringify({ count }), {
         headers: {
           'Content-Type': 'application/json',
         },
@@ -200,44 +163,10 @@ describe('tanstack data mutation fetcher', () => {
     });
 
     expect(screen.getByTestId('state').textContent).toBe('idle');
-    expect(screen.getByTestId('data').textContent).toBe('{"count":1}');
-    expect(states).toEqual(['idle', 'submitting', 'loading', 'idle']);
-  });
-
-  test('passes built href and matched route params to mutation actions', async () => {
-    const action = rstest.fn(
-      async ({ request, params }: Parameters<RouteHandler>[0]) => ({
-        params,
-        requestUrl: request.url,
-      }),
+    expect(screen.getByTestId('data').textContent).toBe(
+      JSON.stringify({ count }),
     );
-    currentRouter = createRouter({
-      action,
-      params: { userId: '42' },
-    });
-
-    render(<FetcherHarness />);
-
-    await act(async () => {
-      await latestFetcher!.submit(
-        { amount: 2 },
-        {
-          method: 'post',
-          action: '/users/42?tab=edit#details',
-        },
-      );
-    });
-
-    expect(action).toHaveBeenCalledTimes(1);
-    const actionArgs = action.mock.calls[0][0];
-    const expectedRequestUrl = `${window.location.origin}/users/42?tab=edit#details`;
-    expect(actionArgs.params).toEqual({ userId: '42' });
-    expect(actionArgs.request.url).toBe(expectedRequestUrl);
-    expect(latestFetcher?.data).toEqual({
-      params: { userId: '42' },
-      requestUrl: expectedRequestUrl,
-    });
-    expect(currentRouter.invalidate).toHaveBeenCalledTimes(1);
+    expect(states).toEqual(['idle', 'submitting', 'loading', 'idle']);
   });
 
   test('surfaces non-2xx action responses as fetcher errors', async () => {
@@ -460,37 +389,4 @@ describe('tanstack data mutation fetcher', () => {
       globalThis.FormData = NativeFormData;
     }
   });
-
-  test('does not throw for Form submit with non-2xx response and still invalidates', async () => {
-    const action = rstest.fn(
-      async () =>
-        new Response(JSON.stringify({ message: 'invalid amount' }), {
-          status: 422,
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }),
-    );
-    currentRouter = createRouter({
-      action,
-    });
-
-    render(
-      <Form method="post" action="/mutation">
-        <button type="submit">submit</button>
-      </Form>,
-    );
-
-    const form = document.querySelector('form');
-    expect(form).toBeTruthy();
-
-    await act(async () => {
-      fireEvent.submit(form!);
-    });
-
-    await waitFor(() => {
-      expect(action).toHaveBeenCalledTimes(1);
-      expect(currentRouter.invalidate).toHaveBeenCalledTimes(1);
-    });
-  });
 });

package/tests/router/flightSerialization.roundtrip.test.tsx

@@ -45,21 +45,22 @@ test('round-trips TanStack RSC flight values across supported value types', asyn
   const circular: Record<string, unknown> = { marker: 'circular' };
   circular.self = circular;
 
+  const rscProxy = createRscProxy(() => ({ slot: 'server' }), {
+    renderable: true,
+    stream: createStream(),
+  }) as React.ReactElement & Record<PropertyKey, unknown>;
+
   const mapValue = new Map<unknown, unknown>([
     ['primitive', 1],
     ['shared', shared],
     [shared, circular],
+    ['rscProxy', rscProxy],
   ]);
   mapValue.set('self', mapValue);
 
-  const setValue = new Set<unknown>(['set-item', shared, circular]);
+  const setValue = new Set<unknown>(['set-item', shared, circular, rscProxy]);
   setValue.add(setValue);
 
-  const rscProxy = createRscProxy(() => ({ slot: 'server' }), {
-    renderable: true,
-    stream: createStream(),
-  }) as React.ReactElement & Record<PropertyKey, unknown>;
-
   const fixture: RoundTripFixture = {
     bigintValue: 9007199254740993n,
     booleanValue: true,
@@ -115,12 +116,14 @@ test('round-trips TanStack RSC flight values across supported value types', asyn
   expect(revived.mapValue.get('shared')).toBe(revived.sharedA);
   expect(revived.mapValue.get(revived.sharedA)).toBe(revived.circular);
   expect(revived.mapValue.get('self')).toBe(revived.mapValue);
+  expect(isValidElement(revived.mapValue.get('rscProxy'))).toBe(true);
 
   expect(revived.setValue).toBeInstanceOf(Set);
   expect(revived.setValue).not.toBe(setValue);
   expect(revived.setValue.has('set-item')).toBe(true);
   expect(revived.setValue.has(revived.sharedA)).toBe(true);
   expect(revived.setValue.has(revived.circular)).toBe(true);
+  expect([...revived.setValue].some(value => isValidElement(value))).toBe(true);
   expect(revived.setValue.has(revived.setValue)).toBe(true);
 
   expect(serialized.rscProxy).not.toBe(rscProxy);