@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.11 → 3.2.0-ultramodern.110

package/src/runtime/routeTree.ts

@@ -11,8 +11,11 @@ import {
   createRoute,
   notFound,
   redirect,
+  rootRouteId,
 } from '@tanstack/react-router';
+import { createElement, type ElementType } from 'react';
 import { DefaultNotFound } from './DefaultNotFound';
+import { withModernRouteMatchContext } from './outlet';
 import {
   isTanstackRscPayloadNavigationEnabled,
   loadTanstackRscRouteData,
@@ -75,8 +78,10 @@ type ModernRouteObject = RouteObject & {
   isClientComponent?: boolean;
   lazyImport?: () => unknown;
   loader?: ModernLoader;
+  loaderDeps?: unknown;
   pendingComponent?: unknown;
   shouldRevalidate?: ModernShouldRevalidate;
+  validateSearch?: unknown;
 };
 
 type ModernGeneratedRoute = (NestedRoute | PageRoute) & {
@@ -101,14 +106,20 @@ type ModernGeneratedRoute = (NestedRoute | PageRoute) & {
   isRoot?: boolean;
   lazyImport?: () => unknown;
   loader?: ModernLoader;
+  loaderDeps?: unknown;
   loading?: unknown;
   pendingComponent?: unknown;
   path?: string;
   shouldRevalidate?: ModernShouldRevalidate;
+  validateSearch?: unknown;
 };
 
 type MutableTanstackRoute = AnyRoute & {
   addChildren: (children: AnyRoute[]) => void;
+  id?: string;
+  options: {
+    component?: unknown;
+  };
 };
 
 type TanstackRouteOptions = Record<string, unknown>;
@@ -118,6 +129,15 @@ type ModernDeferredDataLike = {
   __modern_deferred?: unknown;
   data?: unknown;
 };
+type ModernRouteModule = {
+  Component?: unknown;
+  default?: unknown;
+};
+type PreloadableComponent = {
+  (props: Record<string, unknown>): ReturnType<typeof createElement>;
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
 type RouteTreeOptions = {
   rscPayloadRouter?: boolean;
 };
@@ -134,6 +154,20 @@ function createTanstackRootRoute(
   return createRootRoute(options as never) as unknown as MutableTanstackRoute;
 }
 
+function wrapRouteComponentWithModernContext(
+  route: MutableTanstackRoute,
+  component: unknown,
+  routeId?: string,
+) {
+  const routeMatchId = routeId || route.id;
+  if (component && routeMatchId) {
+    route.options.component = withModernRouteMatchContext(
+      component,
+      routeMatchId,
+    ) as typeof route.options.component;
+  }
+}
+
 function toTanstackPath(pathname: string): string {
   // TanStack Router uses `$param` and `$` (splat) style params.
   // Modern's conventional routing currently generates React Router style params (e.g. `:id`, `*`).
@@ -219,6 +253,76 @@ function normalizeModernLoaderResponse(result: unknown): unknown {
   return normalizeModernLoaderResult(result);
 }
 
+function pickRouteModuleComponent(
+  routeModule: unknown,
+  seen: Set<unknown> = new Set(),
+): ElementType<Record<string, unknown>> | undefined {
+  if (
+    typeof routeModule === 'function' ||
+    (routeModule &&
+      typeof routeModule === 'object' &&
+      '$$typeof' in routeModule)
+  ) {
+    return routeModule as ElementType<Record<string, unknown>>;
+  }
+
+  if (!routeModule || typeof routeModule !== 'object') {
+    return undefined;
+  }
+  if (seen.has(routeModule)) {
+    return undefined;
+  }
+  seen.add(routeModule);
+
+  const module = routeModule as ModernRouteModule;
+  for (const candidate of [module.default, module.Component]) {
+    const component = pickRouteModuleComponent(candidate, seen);
+    if (component) {
+      return component;
+    }
+  }
+
+  return undefined;
+}
+
+function createServerLazyImportComponent(
+  lazyImport: () => unknown,
+  fallbackComponent?: unknown,
+): PreloadableComponent | unknown {
+  if (typeof document !== 'undefined') {
+    return fallbackComponent;
+  }
+
+  let resolvedComponent: ElementType<Record<string, unknown>> | undefined;
+  let pendingLoad: Promise<unknown> | undefined;
+
+  const load = async () => {
+    if (resolvedComponent) {
+      return resolvedComponent;
+    }
+
+    const routeModule = await lazyImport();
+    const component = pickRouteModuleComponent(routeModule);
+    if (component) {
+      resolvedComponent = component;
+    }
+    return resolvedComponent;
+  };
+
+  const Component: PreloadableComponent = props => {
+    if (resolvedComponent) {
+      return createElement(resolvedComponent, props);
+    }
+
+    pendingLoad ||= load();
+    throw pendingLoad;
+  };
+  Component.load = load;
+  Component.preload = load;
+
+  return Component;
+}
+
 function isAbsoluteUrl(value: string) {
   try {
     void new URL(value);
@@ -352,9 +456,10 @@ function wrapModernLoader(
             ctx?.location?.url?.href ||
             '';
 
-      const request = baseRequest
-        ? new Request(baseRequest, { signal })
-        : createModernRequest(href, signal);
+      const request =
+        baseRequest !== undefined
+          ? new Request(baseRequest, { signal })
+          : createModernRequest(href, signal);
       const params = mapParamsForModernLoader({
         modernRoute,
         params: ctx.params || {},
@@ -468,9 +573,10 @@ function wrapRouteObjectLoader(
             ctx?.location?.url?.href ||
             '';
 
-      const request = baseRequest
-        ? new Request(baseRequest, { signal })
-        : createModernRequest(href, signal);
+      const request =
+        baseRequest !== undefined
+          ? new Request(baseRequest, { signal })
+          : createModernRequest(href, signal);
 
       const params = mapParamsForRouteObjectLoader({
         route,
@@ -519,6 +625,18 @@ function wrapRouteObjectLoader(
 
 function toRouteComponent(routeObject: RouteObject): unknown {
   const route = routeObject as ModernRouteObject;
+  const lazyImport =
+    typeof route.lazyImport === 'function' ? route.lazyImport : undefined;
+  const fallbackComponent = route.Component
+    ? route.Component
+    : route.element
+      ? () => route.element
+      : undefined;
+
+  if (lazyImport && fallbackComponent) {
+    return createServerLazyImportComponent(lazyImport, fallbackComponent);
+  }
+
   if (route.Component) {
     return route.Component;
   }
@@ -529,6 +647,15 @@ function toRouteComponent(routeObject: RouteObject): unknown {
   return undefined;
 }
 
+function toModernRouteComponent(route: ModernGeneratedRoute): unknown {
+  const component = route.component || undefined;
+  if (typeof route.lazyImport === 'function' && component) {
+    return createServerLazyImportComponent(route.lazyImport, component);
+  }
+
+  return component;
+}
+
 function toErrorComponent(routeObject: RouteObject): unknown {
   const route = routeObject as ModernRouteObject;
   if (route.ErrorBoundary) {
@@ -627,12 +754,14 @@ function createRouteFromRouteObject(opts: {
   const stableFallbackId =
     routeObject.id || modernRouteObject.file || routeObject.path || 'pathless';
 
+  const component = toRouteComponent(routeObject);
   const base: TanstackRouteOptions = {
     getParentRoute: () => parent,
-    component: toRouteComponent(routeObject),
+    component,
     pendingComponent: toPendingComponent(routeObject),
     errorComponent: toErrorComponent(routeObject),
-    wrapInSuspense: true,
+    validateSearch: modernRouteObject.validateSearch,
+    loaderDeps: modernRouteObject.loaderDeps,
     staticData: createRouteStaticData({
       modernRouteId: routeObject.id,
       modernRouteAction: modernRouteObject.action,
@@ -667,6 +796,7 @@ function createRouteFromRouteObject(opts: {
   }
 
   const route = createTanstackRoute(base);
+  wrapRouteComponentWithModernContext(route, component, routeObject.id);
 
   const children = routeObject.children;
   if (children && children.length > 0) {
@@ -702,7 +832,7 @@ function createRouteFromModernRoute(opts: {
 
   const pendingComponent = route.loading || route.pendingComponent;
   const errorComponent = route.error || route.errorComponent;
-  const component = route.component;
+  const component = toModernRouteComponent(route);
   const modernLoader = route.loader;
   const modernAction = route.action;
   const modernShouldRevalidate = route.shouldRevalidate;
@@ -724,7 +854,8 @@ function createRouteFromModernRoute(opts: {
     component: component || undefined,
     pendingComponent: pendingComponent || undefined,
     errorComponent: errorComponent || undefined,
-    wrapInSuspense: true,
+    validateSearch: route.validateSearch,
+    loaderDeps: route.loaderDeps,
     staticData: createRouteStaticData({
       modernRouteId: modernId,
       modernRouteAction: modernAction,
@@ -761,6 +892,7 @@ function createRouteFromModernRoute(opts: {
   }
 
   const tanstackRoute = createTanstackRoute(base);
+  wrapRouteComponentWithModernContext(tanstackRoute, component, modernId);
 
   const children = route.children as Array<NestedRoute | PageRoute> | undefined;
   if (children && children.length > 0) {
@@ -788,7 +920,9 @@ export function createRouteTreeFromModernRoutes(
       (r as ModernGeneratedRoute).isRoot,
   ) as ModernGeneratedRoute | undefined;
 
-  const rootComponent = rootModern?.component;
+  const rootComponent = rootModern
+    ? toModernRouteComponent(rootModern)
+    : undefined;
   const pendingComponent = rootModern?.loading;
   const errorComponent = rootModern?.error;
   const rootLoader = rootModern?.loader;
@@ -805,7 +939,8 @@ export function createRouteTreeFromModernRoutes(
     component: rootComponent || undefined,
     pendingComponent: pendingComponent || undefined,
     errorComponent: errorComponent || undefined,
-    wrapInSuspense: true,
+    validateSearch: rootModern?.validateSearch,
+    loaderDeps: rootModern?.loaderDeps,
     notFoundComponent: DefaultNotFound,
     staticData: createRouteStaticData({
       modernRouteId: rootModernId,
@@ -835,6 +970,12 @@ export function createRouteTreeFromModernRoutes(
   }
 
   const rootRoute = createTanstackRootRoute(rootRouteOptions);
+  if (rootComponent) {
+    rootRoute.options.component = withModernRouteMatchContext(
+      rootComponent,
+      rootRouteId,
+    ) as typeof rootRoute.options.component;
+  }
 
   const topLevel = rootModern
     ? (rootModern.children as Array<NestedRoute | PageRoute>) || []
@@ -870,13 +1011,17 @@ export function createRouteTreeFromRouteObjects(
     rootRevalidationState,
   );
 
+  const rootComponent = rootLikeRoute
+    ? toRouteComponent(rootLikeRoute)
+    : undefined;
   const rootRouteOptions: TanstackRootRouteOptions = {
-    component: rootLikeRoute ? toRouteComponent(rootLikeRoute) : undefined,
+    component: rootComponent,
     pendingComponent: rootLikeRoute
       ? toPendingComponent(rootLikeRoute)
       : undefined,
     errorComponent: rootLikeRoute ? toErrorComponent(rootLikeRoute) : undefined,
-    wrapInSuspense: true,
+    validateSearch: rootLikeRoute?.validateSearch,
+    loaderDeps: rootLikeRoute?.loaderDeps,
     notFoundComponent: DefaultNotFound,
     staticData: createRouteStaticData({
       modernRouteId: rootLikeRoute?.id,
@@ -907,6 +1052,12 @@ export function createRouteTreeFromRouteObjects(
   }
 
   const rootRoute = createTanstackRootRoute(rootRouteOptions);
+  if (rootComponent) {
+    rootRoute.options.component = withModernRouteMatchContext(
+      rootComponent,
+      rootRouteId,
+    ) as typeof rootRoute.options.component;
+  }
 
   const topLevel = rootLikeRoute
     ? [
@@ -925,18 +1076,38 @@ export function createRouteTreeFromRouteObjects(
 
 export function getModernRouteIdsFromMatches(router: AnyRouter): string[] {
   const matches = router.state.matches || [];
+  const routesById = (
+    router as AnyRouter & {
+      routesById?: Record<
+        string,
+        {
+          options?: {
+            staticData?: { modernRouteId?: unknown };
+          };
+        }
+      >;
+    }
+  ).routesById;
   const ids = matches
     .map(match => {
-      const route = (
-        match as {
-          route?: {
-            options?: {
-              staticData?: { modernRouteId?: unknown };
-            };
+      const normalizedMatch = match as {
+        route?: {
+          options?: {
+            staticData?: { modernRouteId?: unknown };
           };
-        }
-      ).route;
-      return route?.options?.staticData?.modernRouteId;
+        };
+        routeId?: unknown;
+      };
+      const routeId =
+        typeof normalizedMatch.routeId === 'string'
+          ? normalizedMatch.routeId
+          : undefined;
+      return (
+        normalizedMatch.route?.options?.staticData?.modernRouteId ??
+        (routeId
+          ? routesById?.[routeId]?.options?.staticData?.modernRouteId
+          : undefined)
+      );
     })
     .filter((id): id is string => typeof id === 'string');
   return Array.from(new Set(ids));

package/src/runtime/ssr-shim.d.ts

@@ -1,7 +1,5 @@
 declare module '@tanstack/react-router/ssr/client' {
-  export function RouterClient(props: {
-    router: unknown;
-  }): import('react').JSX.Element;
+  export function hydrate(router: unknown): Promise<unknown>;
 }
 
 declare module '@tanstack/react-router/ssr/server' {

package/src/runtime/types.ts

@@ -20,9 +20,22 @@ export type RouterConfig = {
   future?: Partial<{
     v7_startTransition: boolean;
   }>;
+  defaultStructuralSharing?: boolean;
   unstable_reloadOnURLMismatch?: boolean;
 };
 
+export const modernTanstackRouterFastDefaults = {
+  defaultStructuralSharing: true,
+} as const;
+
+export const getModernTanstackRouterFastDefaults = (
+  config: Partial<Pick<RouterConfig, 'defaultStructuralSharing'>> = {},
+) => ({
+  defaultStructuralSharing:
+    config.defaultStructuralSharing ??
+    modernTanstackRouterFastDefaults.defaultStructuralSharing,
+});
+
 export interface RouterRouteMatchSnapshot {
   routeId: string;
   assetRouteId?: string;

package/tests/router/cli.test.ts

@@ -1,9 +1,12 @@
 import { mkdir, mkdtemp, readFile, rm } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
+import { mergeConfig } from '@modern-js/plugin/cli';
 import type { Entrypoint } from '@modern-js/types';
 import { fs, NESTED_ROUTE_SPEC_FILE } from '@modern-js/utils';
 import {
+  createTanstackRsbuildRouteSplittingProfile,
+  isTanstackStartRouteModuleSource,
   tanstackRouterPlugin,
   writeTanstackRegisterFile,
   writeTanstackRouterTypesForEntries,
@@ -193,6 +196,12 @@ describe('tanstack router cli plugin', () => {
       },
     ]);
 
+    expect(taps.config()).toMatchObject({
+      output: {
+        splitRouteChunks: true,
+      },
+    });
+
     const specPath = path.join(distDirectory, NESTED_ROUTE_SPEC_FILE);
     await fs.outputJSON(specPath, {
       existing: [{ id: 'keep-me' }],
@@ -383,4 +392,234 @@ describe('tanstack router cli plugin', () => {
       }),
     );
   });
+
+  test('can opt out of Modern-owned route code splitting', async () => {
+    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({ routeCodeSplitting: false }).setup!(api as any);
+
+    expect(taps.config()).toMatchObject({
+      output: {
+        splitRouteChunks: false,
+      },
+    });
+  });
+
+  test('documents why TanStack Start Rspack splitter is not registered for Modern routes', () => {
+    const profile = createTanstackRsbuildRouteSplittingProfile({});
+
+    expect(profile).toMatchObject({
+      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);
+  });
+
+  test('preserves user-selected route and builder chunk splitting modes', () => {
+    const pluginDefaults = createTanstackRsbuildRouteSplittingProfile(
+      {},
+    ).defaultConfig;
+    const chunkSplits = [
+      { strategy: 'split-by-module' },
+      { strategy: 'split-by-experience' },
+      { strategy: 'all-in-one' },
+      { strategy: 'single-vendor' },
+      { strategy: 'split-by-size', minSize: 10_000, maxSize: 60_000 },
+      {
+        strategy: 'custom',
+        splitChunks: {
+          chunks: 'all',
+          cacheGroups: {
+            tractors: {
+              name: 'tractors',
+              test: /tractors/u,
+            },
+          },
+        },
+      },
+    ];
+
+    for (const chunkSplit of chunkSplits) {
+      expect(
+        mergeConfig([
+          pluginDefaults,
+          {
+            output: {
+              splitRouteChunks: false,
+            },
+            performance: {
+              chunkSplit,
+            },
+            splitChunks: false,
+          },
+        ]),
+      ).toMatchObject({
+        output: {
+          splitRouteChunks: false,
+        },
+        performance: {
+          chunkSplit,
+        },
+        splitChunks: false,
+      });
+    }
+
+    const pageSplitWithManualAsyncChunks = mergeConfig([
+      pluginDefaults,
+      {
+        performance: {
+          chunkSplit: {
+            strategy: 'custom',
+            splitChunks: {
+              chunks: 'async',
+            },
+          },
+        },
+      },
+    ]);
+
+    expect(pageSplitWithManualAsyncChunks).toMatchObject({
+      output: {
+        splitRouteChunks: true,
+      },
+      performance: {
+        chunkSplit: {
+          strategy: 'custom',
+          splitChunks: {
+            chunks: 'async',
+          },
+        },
+      },
+    });
+  });
+
+  test('keeps custom cache group details intact', () => {
+    const pluginDefaults = createTanstackRsbuildRouteSplittingProfile(
+      {},
+    ).defaultConfig;
+
+    const mergedConfig = mergeConfig([
+      pluginDefaults,
+      {
+        performance: {
+          chunkSplit: {
+            strategy: 'custom',
+            splitChunks: {
+              chunks: 'all',
+              cacheGroups: {
+                tractors: {
+                  name: 'tractors',
+                  test: /tractors/u,
+                },
+              },
+            },
+          },
+        },
+      },
+    ]);
+
+    expect(
+      (
+        mergedConfig as {
+          performance?: {
+            chunkSplit?: {
+              splitChunks?: {
+                cacheGroups?: {
+                  tractors?: {
+                    test?: RegExp;
+                  };
+                };
+              };
+            };
+          };
+        }
+      ).performance?.chunkSplit?.splitChunks?.cacheGroups?.tractors?.test,
+    ).toEqual(/tractors/u);
+    expect(mergedConfig).toMatchObject({
+      output: {
+        splitRouteChunks: true,
+      },
+      performance: {
+        chunkSplit: {
+          strategy: 'custom',
+          splitChunks: {
+            chunks: 'all',
+            cacheGroups: {
+              tractors: {
+                name: 'tractors',
+              },
+            },
+          },
+        },
+      },
+    });
+  });
+
+  test('plugin opt-out can still combine with manual builder chunking', () => {
+    const pluginDefaults = createTanstackRsbuildRouteSplittingProfile({
+      routeCodeSplitting: false,
+    }).defaultConfig;
+
+    expect(
+      mergeConfig([
+        pluginDefaults,
+        {
+          performance: {
+            chunkSplit: {
+              strategy: 'single-vendor',
+            },
+          },
+        },
+      ]),
+    ).toMatchObject({
+      output: {
+        splitRouteChunks: false,
+      },
+      performance: {
+        chunkSplit: {
+          strategy: 'single-vendor',
+        },
+      },
+    });
+  });
 });

package/tests/router/fastDefaults.test.ts

@@ -0,0 +1,25 @@
+import {
+  getModernTanstackRouterFastDefaults,
+  modernTanstackRouterFastDefaults,
+} from '../../src/runtime/types';
+
+describe('tanstack router fast defaults', () => {
+  test('enables structural sharing by default', () => {
+    expect(modernTanstackRouterFastDefaults).toEqual({
+      defaultStructuralSharing: true,
+    });
+    expect(getModernTanstackRouterFastDefaults()).toEqual({
+      defaultStructuralSharing: true,
+    });
+  });
+
+  test('allows explicit structural sharing override', () => {
+    expect(
+      getModernTanstackRouterFastDefaults({
+        defaultStructuralSharing: false,
+      }),
+    ).toEqual({
+      defaultStructuralSharing: false,
+    });
+  });
+});