@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.8 → 3.2.0-ultramodern.81

package/dist/esm-node/runtime/routeTree.mjs

@@ -1,5 +1,6 @@
 import "node:module";
 import { createRootRoute, createRoute, notFound, redirect } from "@tanstack/react-router";
+import { createElement } from "react";
 import { DefaultNotFound } from "./DefaultNotFound.mjs";
 import { isTanstackRscPayloadNavigationEnabled, loadTanstackRscRouteData } from "./rsc/payloadRouter.mjs";
 function createTanstackRoute(options) {
@@ -55,6 +56,33 @@ function normalizeModernLoaderResponse(result) {
     }
     return normalizeModernLoaderResult(result);
 }
+function pickRouteModuleComponent(routeModule) {
+    if ('function' == typeof routeModule || routeModule && 'object' == typeof routeModule && '$$typeof' in routeModule) return routeModule;
+    if (!routeModule || 'object' != typeof routeModule) return;
+    const module = routeModule;
+    const component = module.default || module.Component;
+    if ('function' == typeof component || component && 'object' == typeof component && '$$typeof' in component) return component;
+}
+function createServerLazyImportComponent(lazyImport, fallbackComponent) {
+    if ("u" > typeof document) return fallbackComponent;
+    let resolvedComponent;
+    let pendingLoad;
+    const load = async ()=>{
+        if (resolvedComponent) return resolvedComponent;
+        const routeModule = await lazyImport();
+        const component = pickRouteModuleComponent(routeModule);
+        if (component) resolvedComponent = component;
+        return resolvedComponent;
+    };
+    const Component = (props)=>{
+        if (resolvedComponent) return createElement(resolvedComponent, props);
+        pendingLoad ||= load();
+        throw pendingLoad;
+    };
+    Component.load = load;
+    Component.preload = load;
+    return Component;
+}
 function isAbsoluteUrl(value) {
     try {
         new URL(value);
@@ -127,7 +155,7 @@ function wrapModernLoader(modernRoute, modernLoader, revalidationState, options
             const signal = ctx?.abortController?.signal || ctx?.signal || new AbortController().signal;
             const baseRequest = ctx?.context?.request instanceof Request ? ctx.context.request : void 0;
             const href = 'string' == typeof ctx?.location ? ctx.location : ctx?.location?.publicHref || ctx?.location?.href || ctx?.location?.url?.href || '';
-            const request = baseRequest ? new Request(baseRequest, {
+            const request = void 0 !== baseRequest ? new Request(baseRequest, {
                 signal
             }) : createModernRequest(href, signal);
             const params = mapParamsForModernLoader({
@@ -192,7 +220,7 @@ function wrapRouteObjectLoader(route, revalidationState, options = {}) {
             const signal = ctx?.abortController?.signal || ctx?.signal || new AbortController().signal;
             const baseRequest = ctx?.context?.request instanceof Request ? ctx.context.request : void 0;
             const href = 'string' == typeof ctx?.location ? ctx.location : ctx?.location?.publicHref || ctx?.location?.href || ctx?.location?.url?.href || '';
-            const request = baseRequest ? new Request(baseRequest, {
+            const request = void 0 !== baseRequest ? new Request(baseRequest, {
                 signal
             }) : createModernRequest(href, signal);
             const params = mapParamsForRouteObjectLoader({
@@ -229,10 +257,18 @@ function wrapRouteObjectLoader(route, revalidationState, options = {}) {
 }
 function toRouteComponent(routeObject) {
     const route = routeObject;
+    const lazyImport = 'function' == typeof route.lazyImport ? route.lazyImport : void 0;
+    const fallbackComponent = route.Component ? route.Component : route.element ? ()=>route.element : void 0;
+    if (lazyImport && fallbackComponent) return createServerLazyImportComponent(lazyImport, fallbackComponent);
     if (route.Component) return route.Component;
     const element = route.element;
     if (element) return ()=>element;
 }
+function toModernRouteComponent(route) {
+    const component = route.component || void 0;
+    if ('function' == typeof route.lazyImport && component) return createServerLazyImportComponent(route.lazyImport, component);
+    return component;
+}
 function toErrorComponent(routeObject) {
     const route = routeObject;
     if (route.ErrorBoundary) return route.ErrorBoundary;
@@ -313,7 +349,7 @@ function createRouteFromModernRoute(opts) {
     const stableFallbackId = modernId || route._component || route.filename || route.data || ('function' == typeof route.loader ? route.id : void 0);
     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;
@@ -360,7 +396,7 @@ function createRouteFromModernRoute(opts) {
 }
 function createRouteTreeFromModernRoutes(routes, options = {}) {
     const rootModern = routes.find((r)=>r && 'nested' === r.type && r.isRoot);
-    const rootComponent = rootModern?.component;
+    const rootComponent = rootModern ? toModernRouteComponent(rootModern) : void 0;
     const pendingComponent = rootModern?.loading;
     const errorComponent = rootModern?.error;
     const rootLoader = rootModern?.loader;

package/dist/types/runtime/plugin.worker.d.ts

@@ -0,0 +1 @@
+export { default, tanstackRouterPlugin, } from './plugin.node';

package/package.json

@@ -18,7 +18,7 @@
     "modern.js",
     "tanstack-router"
   ],
-  "version": "3.2.0-ultramodern.8",
+  "version": "3.2.0-ultramodern.81",
   "engines": {
     "node": ">=20"
   },
@@ -86,15 +86,15 @@
   },
   "dependencies": {
     "@swc/helpers": "^0.5.21",
-    "@tanstack/react-router": "1.170.1",
-    "@tanstack/router-core": "1.170.1",
-    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.8",
-    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.8",
-    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.8",
-    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.8"
+    "@tanstack/react-router": "1.170.8",
+    "@tanstack/router-core": "1.171.6",
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.81",
+    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.81",
+    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.81",
+    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.81"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "3.2.0-ultramodern.8",
+    "@modern-js/runtime": "3.2.0-ultramodern.81",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },
@@ -103,14 +103,14 @@
     "@tanstack/history": "1.162.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^25.8.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260516.1",
+    "@typescript/native-preview": "7.0.0-dev.20260527.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.8",
-    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.8",
+    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.81",
+    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.81",
     "@scripts/rstest-config": "2.66.0"
   },
   "sideEffects": false,

package/src/cli/tanstackTypes.ts

@@ -182,6 +182,7 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
   const statements: string[] = [];
 
   const loaderImportMap = new Map<string, string>();
+  const usedRouteVarNames = new Set<string>();
   let loaderIndex = 0;
   let routeIndex = 0;
 
@@ -242,10 +243,20 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
     return { loaderName: importName, actionName };
   };
 
+  const reserveRouteVarName = (preferred: string) => {
+    let candidate = preferred;
+    let suffix = 1;
+    while (usedRouteVarNames.has(candidate)) {
+      candidate = `${preferred}_${suffix++}`;
+    }
+    usedRouteVarNames.add(candidate);
+    return candidate;
+  };
+
   const createRouteVarName = (route: NestedRouteForCli | PageRoute) => {
     const id = (route as any).id as string | undefined;
     const base = id ? makeLegalIdentifier(id) : `r_${routeIndex++}`;
-    return `route_${base}`;
+    return reserveRouteVarName(`route_${base}`);
   };
 
   const buildRoute = async (opts: {
@@ -296,18 +307,27 @@ export async function generateTanstackRouterTypesSourceForEntry(opts: {
       routeOpts.push(staticDataSnippet);
     }
 
-    statements.push(
-      `const ${varName} = createRoute({\n  ${routeOpts.join('\n  ')}\n});`,
-    );
-
     const children = (route as any).children as
       | Array<NestedRouteForCli | PageRoute>
       | undefined;
+    const hasChildren = Boolean(children && children.length > 0);
+    const routeCtorVarName = hasChildren
+      ? reserveRouteVarName(`${varName}__base`)
+      : varName;
+
+    statements.push(
+      `const ${routeCtorVarName} = createRoute({\n  ${routeOpts.join('\n  ')}\n});`,
+    );
+
     if (children && children.length > 0) {
       const childVars = await Promise.all(
-        children.map(child => buildRoute({ parentVar: varName, route: child })),
+        children.map(child =>
+          buildRoute({ parentVar: routeCtorVarName, route: child }),
+        ),
+      );
+      statements.push(
+        `const ${varName} = ${routeCtorVarName}.addChildren([${childVars.join(', ')}]);`,
       );
-      statements.push(`${varName}.addChildren([${childVars.join(', ')}]);`);
     }
 
     return varName;
@@ -370,7 +390,7 @@ function isRedirectResponse(res: Response) {
 }
 
 function throwTanstackRedirect(location: string) {
-  const target = location || '/';
+  const target = location.length > 0 ? location : '/';
   try {
     void new URL(target);
     throw redirect({ href: target });
@@ -396,21 +416,87 @@ function createRouteStaticData(opts: {
   modernRouteAction?: unknown;
   modernRouteLoader?: unknown;
 }) {
-  const staticData: Record<string, unknown> = {};
+  const staticData: {
+    modernRouteId?: string;
+    modernRouteAction?: unknown;
+    modernRouteLoader?: unknown;
+  } = {};
 
-  if (opts.modernRouteId) {
+  if (typeof opts.modernRouteId === 'string' && opts.modernRouteId.length > 0) {
     staticData.modernRouteId = opts.modernRouteId;
   }
 
-  if (opts.modernRouteLoader) {
+  if (typeof opts.modernRouteLoader !== 'undefined') {
     staticData.modernRouteLoader = opts.modernRouteLoader;
   }
 
-  if (opts.modernRouteAction) {
+  if (typeof opts.modernRouteAction !== 'undefined') {
     staticData.modernRouteAction = opts.modernRouteAction;
   }
 
-  return Object.keys(staticData).length > 0 ? staticData : undefined;
+  return staticData;
+}
+
+function getLoaderSignal(ctx: any): AbortSignal {
+  const abortSignal = ctx?.abortController?.signal;
+  if (abortSignal instanceof AbortSignal) {
+    return abortSignal;
+  }
+  if (ctx?.signal instanceof AbortSignal) {
+    return ctx.signal;
+  }
+  return new AbortController().signal;
+}
+
+function getLoaderHref(ctx: any): string {
+  if (typeof ctx?.location === 'string') {
+    return ctx.location;
+  }
+
+  const publicHref = ctx?.location?.publicHref;
+  if (typeof publicHref === 'string') {
+    return publicHref;
+  }
+
+  const href = ctx?.location?.href;
+  if (typeof href === 'string') {
+    return href;
+  }
+
+  const urlHref = ctx?.location?.url?.href;
+  return typeof urlHref === 'string' ? urlHref : '';
+}
+
+function getLoaderParams(ctx: any): Record<string, string> {
+  return typeof ctx?.params === 'object' && ctx.params !== null ? ctx.params : {};
+}
+
+function handleModernLoaderResult<LoaderResult>(result: LoaderResult): LoaderResult {
+  if (isResponse(result)) {
+    if (isRedirectResponse(result)) {
+      const location = result.headers.get('Location') ?? '/';
+      throwTanstackRedirect(location);
+    }
+    if (result.status === 404) {
+      throw notFound();
+    }
+  }
+
+  return result;
+}
+
+function handleModernLoaderError(err: unknown): never {
+  if (isResponse(err)) {
+    if (isRedirectResponse(err)) {
+      const location = err.headers.get('Location') ?? '/';
+      throwTanstackRedirect(location);
+    }
+    if (err.status === 404) {
+      throw notFound();
+    }
+  }
+
+  throw err;
 }
 
 function modernLoaderToTanstack<TLoader extends (args: any) => any>(
@@ -419,57 +505,31 @@ function modernLoaderToTanstack<TLoader extends (args: any) => any>(
 ) {
   type LoaderResult = Awaited<ReturnType<TLoader>>;
 
-  return async (ctx: any): Promise<LoaderResult> => {
+  return (ctx: any): Promise<LoaderResult> => {
     try {
-      const signal: AbortSignal =
-        ctx?.abortController?.signal ||
-        ctx?.signal ||
-        new AbortController().signal;
+      const signal = getLoaderSignal(ctx);
       const baseRequest: Request | undefined =
         ctx?.context?.request instanceof Request ? ctx.context.request : undefined;
 
-      const href =
-        typeof ctx?.location === 'string'
-          ? ctx.location
-          : ctx?.location?.publicHref ||
-            ctx?.location?.href ||
-            ctx?.location?.url?.href ||
-            '';
+      const href = getLoaderHref(ctx);
 
-      const request = baseRequest
+      const request = baseRequest !== undefined
         ? new Request(baseRequest, { signal })
         : new Request(href, { signal });
 
-      const params = mapParamsForModernLoader(ctx?.params || {}, opts.hasSplat);
-
-      const result = await (modernLoader as any)({
-        request,
-        params,
-        context: ctx?.context?.requestContext,
-      });
-
-      if (isResponse(result)) {
-        if (isRedirectResponse(result)) {
-          const location = result.headers.get('Location') || '/';
-          throwTanstackRedirect(location);
-        }
-        if (result.status === 404) {
-          throw notFound();
-        }
-      }
+      const params = mapParamsForModernLoader(getLoaderParams(ctx), opts.hasSplat);
 
-      return result as LoaderResult;
+      return Promise.resolve(
+        (modernLoader as any)({
+          request,
+          params,
+          context: ctx?.context?.requestContext,
+        }),
+      )
+        .then((result: LoaderResult) => handleModernLoaderResult(result))
+        .catch(handleModernLoaderError);
     } catch (err) {
-      if (isResponse(err)) {
-        if (isRedirectResponse(err)) {
-          const location = err.headers.get('Location') || '/';
-          throwTanstackRedirect(location);
-        }
-        if (err.status === 404) {
-          throw notFound();
-        }
-      }
-      throw err;
+      handleModernLoaderError(err);
     }
   };
 }

package/src/runtime/plugin.node.tsx

@@ -26,9 +26,9 @@ import {
   createRouter,
   RouterProvider,
 } from '@tanstack/react-router';
-import { attachRouterServerSsrUtils } from '@tanstack/react-router/ssr/server';
+import { attachRouterServerSsrUtils } from '@tanstack/router-core/ssr/server';
 import type React from 'react';
-import { Suspense, useContext } from 'react';
+import { useContext } from 'react';
 import { createModernBasepathRewrite } from './basepathRewrite';
 import {
   modifyRoutes as modifyRoutesHook,
@@ -119,6 +119,17 @@ type PreloadableRouteComponent = {
   preload?: (props?: Record<string, unknown>) => Promise<unknown> | unknown;
 };
 
+type ReactLazyRouteComponent = {
+  _init?: (payload: unknown) => unknown;
+  _payload?: unknown;
+};
+
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return Boolean(
+    value && typeof (value as PromiseLike<unknown>).then === 'function',
+  );
+}
+
 type TanstackRouterWithServerSsr = AnyRouter & {
   resolveRedirect?: (redirect: Response) => Response;
   routesById?: Record<string, RouterRouteWithOptions>;
@@ -149,7 +160,37 @@ function isPreloadableRouteComponent(
   );
 }
 
+function isReactLazyRouteComponent(
+  component: unknown,
+): component is ReactLazyRouteComponent {
+  return (
+    Boolean(component) &&
+    typeof component === 'object' &&
+    typeof (component as ReactLazyRouteComponent)._init === 'function' &&
+    '_payload' in component
+  );
+}
+
+async function preloadReactLazyRouteComponent(
+  component: ReactLazyRouteComponent,
+) {
+  try {
+    component._init?.(component._payload);
+  } catch (thrown) {
+    if (!isPromiseLike(thrown)) {
+      throw thrown;
+    }
+    await thrown;
+    component._init?.(component._payload);
+  }
+}
+
 async function preloadRouteComponent(component: unknown) {
+  if (isReactLazyRouteComponent(component)) {
+    await preloadReactLazyRouteComponent(component);
+    return;
+  }
+
   if (!isPreloadableRouteComponent(component)) {
     return;
   }
@@ -458,9 +499,12 @@ export const tanstackRouterPlugin = (
         context.ssrContext?.response.status(tanstackRouter.state.statusCode);
 
         await serverRouter.serverSsr?.dehydrate?.();
-        await waitForRouterSerialization(serverRouter);
 
         if (isRSCNavigation) {
+          // RSC navigations consume the server payload directly. Normal HTML SSR
+          // emits the buffered bootstrap script below and must not wait here
+          // because Modern's non-streaming hook has not rendered the app yet.
+          await waitForRouterSerialization(serverRouter);
           setTanstackRscServerPayload(
             createTanstackRscServerPayload(serverRouter, {
               omitClientLoaderData: true,
@@ -516,9 +560,7 @@ export const tanstackRouterPlugin = (
             }
 
             const routerWrapper = (
-              <Suspense fallback={null}>
-                <RouterProvider router={router as AnyRouter} />
-              </Suspense>
+              <RouterProvider router={router as AnyRouter} />
             );
 
             return App ? <App>{routerWrapper}</App> : routerWrapper;

package/src/runtime/plugin.tsx

@@ -25,7 +25,6 @@ import {
   useRouter,
 } from '@tanstack/react-router';
 import { RouterClient } from '@tanstack/react-router/ssr/client';
-import * as React from 'react';
 import { useContext, useMemo } from 'react';
 import { createModernBasepathRewrite } from './basepathRewrite';
 import {
@@ -41,6 +40,7 @@ import {
   applyRouterRuntimeState,
   type RouterLifecycleContext,
 } from './lifecycle';
+import { Link } from './prefetchLink';
 import { createRouteTreeFromRouteObjects } from './routeTree';
 import { getTanstackRscSerializationAdapters } from './rsc/client';
 import type { RouterConfig } from './types';
@@ -184,6 +184,7 @@ export const tanstackRouterPlugin = (
         }
 
         context.router = {
+          Link,
           useMatches,
           useLocation,
           useNavigate,
@@ -368,9 +369,7 @@ export const tanstackRouterPlugin = (
           }
 
           const RouterContent = hasSSRBootstrap ? (
-            <React.Suspense fallback={null}>
-              <RouterClient router={router} />
-            </React.Suspense>
+            <RouterClient router={router} />
           ) : (
             <RouterProvider router={router} />
           );

package/src/runtime/plugin.worker.tsx

@@ -0,0 +1,4 @@
+export {
+  default,
+  tanstackRouterPlugin,
+} from './plugin.node';