@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.5 → 3.2.0-ultramodern.50

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);
@@ -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.5",
+  "version": "3.2.0-ultramodern.50",
   "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.5",
-    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.5",
-    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.5",
-    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.5"
+    "@tanstack/react-router": "1.170.8",
+    "@tanstack/router-core": "1.171.6",
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.50",
+    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.50",
+    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.50",
+    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.50"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "3.2.0-ultramodern.5",
+    "@modern-js/runtime": "3.2.0-ultramodern.50",
     "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.5",
-    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.5",
+    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.50",
+    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.50",
     "@scripts/rstest-config": "2.66.0"
   },
   "sideEffects": false,

package/src/cli/index.ts

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off nodeBuiltinImport:off strictBooleanExpressions:off
 import path from 'node:path';
 import type {
   AppNormalizedConfig,
@@ -257,24 +258,20 @@ export function tanstackRouterPlugin(
         return { entrypoint, plugins };
       });
 
-      api.checkEntryPoint(({ path: entryPath, entry }) => {
-        const { isRouteEntry } = getRuntimeRouterCli();
-        return {
-          path: entryPath,
-          entry: entry || isRouteEntry(entryPath, routesDir),
-        };
-      });
-
-      api.config(() => {
-        return {
-          source: {
-            include: [
-              /[\\/]node_modules[\\/]@tanstack[\\/]react-router[\\/]/,
-              path.resolve(__dirname, '../runtime').replace('cjs', 'esm'),
-            ],
-          },
-        };
-      });
+      api.checkEntryPoint(({ path: entryPath, entry }) => ({
+        path: entryPath,
+        entry:
+          entry || getRuntimeRouterCli().isRouteEntry(entryPath, routesDir),
+      }));
+
+      api.config(() => ({
+        source: {
+          include: [
+            /[\\/]node_modules[\\/]@tanstack[\\/]react-router[\\/]/,
+            path.resolve(__dirname, '../runtime').replace('cjs', 'esm'),
+          ],
+        },
+      }));
 
       api.modifyEntrypoints(async ({ entrypoints }) => {
         const { handleModifyEntrypoints } = getRuntimeRouterCli();

package/src/cli/tanstackTypes.ts

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off nodeBuiltinImport:off strictBooleanExpressions:off
 import type { AppToolsContext } from '@modern-js/app-tools';
 import type { NestedRouteForCli, PageRoute } from '@modern-js/types';
 import { findExists, formatImportPath, fs, slash } from '@modern-js/utils';
@@ -181,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;
 
@@ -241,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: {
@@ -295,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;
@@ -395,7 +416,11 @@ function createRouteStaticData(opts: {
   modernRouteAction?: unknown;
   modernRouteLoader?: unknown;
 }) {
-  const staticData: Record<string, unknown> = {};
+  const staticData: {
+    modernRouteId?: string;
+    modernRouteAction?: unknown;
+    modernRouteLoader?: unknown;
+  } = {};
 
   if (opts.modernRouteId) {
     staticData.modernRouteId = opts.modernRouteId;
@@ -409,7 +434,7 @@ function createRouteStaticData(opts: {
     staticData.modernRouteAction = opts.modernRouteAction;
   }
 
-  return Object.keys(staticData).length > 0 ? staticData : undefined;
+  return staticData;
 }
 
 function modernLoaderToTanstack<TLoader extends (args: any) => any>(

package/src/runtime/basepathRewrite.ts

@@ -1,3 +1,4 @@
+// @effect-diagnostics strictBooleanExpressions:off
 function normalizeBasepath(basepath: string): string {
   if (!basepath) {
     return '/';

package/src/runtime/dataMutation.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off extendsNativeError:off strictBooleanExpressions:off
 import type { AnyRouter } from '@tanstack/react-router';
 import { useRouter } from '@tanstack/react-router';
 import type React from 'react';

package/src/runtime/lifecycle.ts

@@ -1,3 +1,4 @@
+// @effect-diagnostics strictBooleanExpressions:off
 import type { TInternalRuntimeContext } from '@modern-js/runtime/context';
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type {

package/src/runtime/plugin.node.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off newPromise:off strictBooleanExpressions:off unnecessaryArrowBlock:off
 /// <reference path="./ssr-shim.d.ts" />
 
 import type { Plugin, RuntimePluginExtends } from '@modern-js/plugin';
@@ -25,7 +26,7 @@ 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 { createModernBasepathRewrite } from './basepathRewrite';
@@ -118,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>;
@@ -148,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;
   }

package/src/runtime/plugin.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics globalConsole:off strictBooleanExpressions:off
 /// <reference path="./ssr-shim.d.ts" />
 
 import type { Plugin, RuntimePluginExtends } from '@modern-js/plugin';
@@ -40,6 +41,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';
@@ -183,6 +185,7 @@ export const tanstackRouterPlugin = (
         }
 
         context.router = {
+          Link,
           useMatches,
           useLocation,
           useNavigate,

package/src/runtime/plugin.worker.tsx

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

package/src/runtime/routeTree.ts

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off strictBooleanExpressions:off
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type { NestedRoute, PageRoute } from '@modern-js/types';
 import type {
@@ -11,6 +12,7 @@ import {
   notFound,
   redirect,
 } from '@tanstack/react-router';
+import { createElement, type ElementType } from 'react';
 import { DefaultNotFound } from './DefaultNotFound';
 import {
   isTanstackRscPayloadNavigationEnabled,
@@ -117,6 +119,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;
 };
@@ -218,6 +229,72 @@ function normalizeModernLoaderResponse(result: unknown): unknown {
   return normalizeModernLoaderResult(result);
 }
 
+function pickRouteModuleComponent(
+  routeModule: unknown,
+): 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;
+  }
+
+  const module = routeModule as ModernRouteModule;
+  const component = module.default || module.Component;
+  if (
+    typeof component === 'function' ||
+    (component && typeof component === 'object' && '$$typeof' in component)
+  ) {
+    return component as ElementType<Record<string, unknown>>;
+  }
+
+  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);
@@ -518,6 +595,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;
   }
@@ -528,6 +617,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) {
@@ -701,7 +799,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;
@@ -787,7 +885,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;

package/src/runtime/rsc/ClientSlot.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics strictBooleanExpressions:off
 'use client';
 
 import type React from 'react';

package/src/runtime/rsc/CompositeComponent.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics strictBooleanExpressions:off
 'use client';
 
 import type React from 'react';

package/src/runtime/rsc/ReplayableStream.ts

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off newPromise:off strictBooleanExpressions:off
 export interface ReplayableStreamOptions {
   signal?: AbortSignal;
 }

package/src/runtime/rsc/RscNodeRenderer.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics strictBooleanExpressions:off
 'use client';
 
 import type React from 'react';

package/src/runtime/rsc/client.tsx

@@ -78,9 +78,8 @@ const adapter = createSerializationAdapter({
   toSerializable: (): never => {
     throw new Error('TanStack RSC data cannot be serialized on client.');
   },
-  fromSerializable: (value: SerializedRsc): AnyCompositeComponent => {
-    return createFromFlightStream(value) as AnyCompositeComponent;
-  },
+  fromSerializable: (value: SerializedRsc): AnyCompositeComponent =>
+    createFromFlightStream(value) as AnyCompositeComponent,
 });
 
 export function getTanstackRscSerializationAdapters() {

package/src/runtime/rsc/createRscProxy.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off processEnv:off strictBooleanExpressions:off
 'use client';
 
 import { createElement } from 'react';

package/src/runtime/rsc/payloadRouter.ts

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off globalFetch:off strictBooleanExpressions:off
 import type { PayloadRoute, ServerPayload } from '@modern-js/runtime/context';
 import { notFound, redirect } from '@tanstack/react-router';
 

package/src/runtime/rsc/server.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off processEnv:off strictBooleanExpressions:off
 import {
   createFromReadableStream,
   renderRsc,

package/src/runtime/rsc/slotUsageSanitizer.ts

@@ -1,3 +1,4 @@
+// @effect-diagnostics strictBooleanExpressions:off
 import { isValidElement } from 'react';
 import type { SerializableSlotArg } from './symbols';
 

package/src/runtime/utils.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics strictBooleanExpressions:off
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type { NestedRoute, PageRoute, SSRMode } from '@modern-js/types';
 import React from 'react';