@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.98 → 3.4.0-ultramodern.0

package/src/runtime/pluginCore.ts

@@ -0,0 +1,48 @@
+import type { Plugin, RuntimePluginExtends } from '@modern-js/plugin';
+import type { RuntimePluginAPI } from '@modern-js/plugin/runtime';
+import {
+  getGlobalLayoutApp,
+  getGlobalRoutes,
+  type TInternalRuntimeContext,
+} from '@modern-js/runtime/context';
+import { merge } from '@modern-js/runtime-utils/merge';
+import type { RouterExtendsHooks } from './hooks';
+import type { RouterConfig } from './types';
+
+export type TanstackRouterRuntimeConfig = {
+  plugins?: TanstackRouterRuntimePlugin[];
+  router?: Partial<RouterConfig>;
+  [key: string]: unknown;
+};
+
+type TanstackRouterRuntimeExtends = Required<
+  RuntimePluginExtends<TanstackRouterRuntimeConfig, TInternalRuntimeContext>
+> & {
+  extendHooks: RouterExtendsHooks;
+};
+
+export type TanstackRouterPluginAPI =
+  RuntimePluginAPI<TanstackRouterRuntimeExtends>;
+
+export type TanstackRouterRuntimePlugin = Plugin<
+  TanstackRouterPluginAPI,
+  TInternalRuntimeContext
+>;
+
+export function getMergedRouterConfig(
+  api: TanstackRouterPluginAPI,
+  userConfig: Partial<RouterConfig>,
+): RouterConfig {
+  const pluginConfig = api.getRuntimeConfig() as {
+    router?: Partial<RouterConfig>;
+  };
+  return merge(pluginConfig.router || {}, userConfig) as RouterConfig;
+}
+
+export function getFinalRouteConfig(mergedConfig: RouterConfig) {
+  return {
+    routes: getGlobalRoutes(),
+    globalApp: getGlobalLayoutApp(),
+    ...mergedConfig.routesConfig,
+  };
+}

package/src/runtime/prefetchLink.tsx

@@ -28,7 +28,7 @@ function resolvePreloadFromPrefetch(
     return prefetch;
   }
 
-  return preload;
+  return 'viewport';
 }
 
 export type LinkProps<

package/src/runtime/register.ts

@@ -0,0 +1,58 @@
+/**
+ * Registers the TanStack router provider with the @modern-js/runtime router
+ * provider registry. Importing '@modern-js/plugin-tanstack/runtime' is enough
+ * to make `runtime.router.framework: 'tanstack'` resolvable by the built-in
+ * router runtime plugin.
+ *
+ * This module is intentionally side-effectful (see `sideEffects` in
+ * package.json).
+ */
+import {
+  type RouterProviderFactory,
+  type RouterProviderPlugin,
+  registerRouterProvider,
+} from '@modern-js/runtime/context';
+import { Form, RouteActionResponseError, useFetcher } from './dataMutation';
+import { Outlet } from './outlet';
+import { tanstackRouterPlugin } from './plugin';
+import { Link, NavLink } from './prefetchLink';
+
+// The TanStack runtime plugin types its API against its own hook registry,
+// while the provider contract is typed against the built-in router hook
+// registry of @modern-js/runtime. The two are runtime-compatible (the
+// built-in router plugin registers the hooks and forwards its API to the
+// resolved provider), but nominally distinct — hence the explicit adapter
+// cast at this single boundary.
+const tanstackRouterProviderFactory: RouterProviderFactory = userConfig =>
+  tanstackRouterPlugin(userConfig) as unknown as RouterProviderPlugin;
+
+registerRouterProvider('tanstack', tanstackRouterProviderFactory);
+
+/**
+ * Compatibility bindings for the deprecated `@modern-js/runtime/tanstack-router`
+ * alias. `@modern-js/runtime` cannot depend on this package (the dependency
+ * direction is plugin-tanstack -> runtime), so the alias resolves the
+ * Modern.js specific bindings through this `Symbol.for` slot at use time.
+ *
+ * `??=` keeps the first copy: when Module Federation evaluates a second
+ * bundled copy of this module, both copies are functionally identical and the
+ * established registration wins (mirroring the router-provider registry).
+ */
+const COMPAT_BINDINGS_SLOT: unique symbol = Symbol.for(
+  '@modern-js/plugin-tanstack:runtime-compat-bindings',
+);
+
+export const tanstackRouterCompatBindings = {
+  Form,
+  Link,
+  NavLink,
+  Outlet,
+  RouteActionResponseError,
+  useFetcher,
+};
+
+(
+  globalThis as {
+    [COMPAT_BINDINGS_SLOT]?: typeof tanstackRouterCompatBindings;
+  }
+)[COMPAT_BINDINGS_SLOT] ??= tanstackRouterCompatBindings;

package/src/runtime/routeTree.ts

@@ -1,6 +1,7 @@
 // @effect-diagnostics asyncFunction:off strictBooleanExpressions:off
+
+import { DefaultNotFound } from '@modern-js/runtime/context';
 import type { RouteObject } from '@modern-js/runtime-utils/router';
-import type { NestedRoute, PageRoute } from '@modern-js/types';
 import type {
   AnyRoute,
   AnyRouter,
@@ -10,10 +11,16 @@ import {
   createRootRoute,
   createRoute,
   notFound,
-  redirect,
+  rootRouteId,
 } from '@tanstack/react-router';
 import { createElement, type ElementType } from 'react';
-import { DefaultNotFound } from './DefaultNotFound';
+import {
+  isRedirectResponse,
+  isResponse,
+  isTanstackRedirect,
+  throwTanstackRedirect,
+} from './loaderBridge';
+import { withModernRouteMatchContext } from './outlet';
 import {
   isTanstackRscPayloadNavigationEnabled,
   loadTanstackRscRouteData,
@@ -82,38 +89,12 @@ type ModernRouteObject = RouteObject & {
   validateSearch?: unknown;
 };
 
-type ModernGeneratedRoute = (NestedRoute | PageRoute) & {
-  _component?: string;
-  action?: unknown;
-  children?: ModernGeneratedRoute[];
-  component?: unknown;
-  config?: { handle?: Record<string, unknown> } | unknown;
-  clientData?: unknown;
-  data?: string;
-  error?: unknown;
-  errorComponent?: unknown;
-  filename?: string;
-  handle?: Record<string, unknown>;
-  hasAction?: boolean;
-  hasClientLoader?: boolean;
-  hasLoader?: boolean;
-  inValidSSRRoute?: boolean;
-  id?: string;
-  index?: boolean;
-  isClientComponent?: boolean;
-  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>;
@@ -148,6 +129,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`, `*`).
@@ -177,28 +172,6 @@ function toTanstackPath(pathname: string): string {
     .join('/');
 }
 
-function isResponse(value: unknown): value is Response {
-  const record = value as { headers?: unknown; status?: unknown } | null;
-  return (
-    record != null &&
-    typeof record === 'object' &&
-    typeof record.status === 'number' &&
-    typeof record.headers === 'object'
-  );
-}
-
-function isTanstackRedirect(value: unknown): boolean {
-  return (
-    isResponse(value) &&
-    typeof (value as { options?: unknown }).options === 'object'
-  );
-}
-
-const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
-function isRedirectResponse(res: Response) {
-  return redirectStatusCodes.has(res.status);
-}
-
 function isModernDeferredData(
   value: unknown,
 ): value is ModernDeferredDataLike & { data: Record<string, unknown> } {
@@ -303,46 +276,6 @@ function createServerLazyImportComponent(
   return Component;
 }
 
-function isAbsoluteUrl(value: string) {
-  try {
-    void new URL(value);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function throwTanstackRedirect(location: string) {
-  const target = location || '/';
-  // Prefer `to` for internal/relative redirects so basepath can be applied.
-  // Use `href` for absolute redirects (external).
-  if (isAbsoluteUrl(target)) {
-    throw redirect({ href: target });
-  }
-
-  throw redirect({ to: target });
-}
-
-function mapParamsForModernLoader({
-  modernRoute,
-  params,
-}: {
-  modernRoute: NestedRoute | PageRoute;
-  params: RouteParams;
-}) {
-  // React Router uses `*` for splat params, TanStack Router uses `_splat`.
-  if (modernRoute.type === 'nested' && modernRoute.path?.includes('*')) {
-    const { _splat, ...rest } = params as RouteParams & {
-      _splat?: string;
-    };
-    if (typeof _splat !== 'undefined') {
-      return { ...rest, '*': _splat };
-    }
-    return rest;
-  }
-  return params;
-}
-
 function createModernRequest(input: string, signal: AbortSignal) {
   return new Request(input, { signal });
 }
@@ -400,92 +333,6 @@ function createModernShouldReload(
   };
 }
 
-function wrapModernLoader(
-  modernRoute: NestedRoute | PageRoute,
-  modernLoader: ModernLoader | undefined,
-  revalidationState?: RouteRevalidationState,
-  options: RouteTreeOptions = {},
-) {
-  const route = modernRoute as ModernGeneratedRoute;
-  return async (ctx: TanstackLoaderContext) => {
-    try {
-      if (revalidationState) {
-        rememberRouteLocation(revalidationState, ctx);
-      }
-
-      if (typeof route.lazyImport === 'function') {
-        try {
-          await route.lazyImport();
-        } catch {}
-      }
-
-      const signal: AbortSignal =
-        ctx?.abortController?.signal ||
-        ctx?.signal ||
-        new AbortController().signal;
-      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 request =
-        baseRequest !== undefined
-          ? new Request(baseRequest, { signal })
-          : createModernRequest(href, signal);
-      const params = mapParamsForModernLoader({
-        modernRoute,
-        params: ctx.params || {},
-      });
-
-      const loadModernData = async () => {
-        const result = modernLoader
-          ? await modernLoader({
-              request,
-              params,
-              context: ctx?.context?.requestContext,
-            })
-          : null;
-
-        return normalizeModernLoaderResponse(result);
-      };
-
-      if (options.rscPayloadRouter && isTanstackRscPayloadNavigationEnabled()) {
-        return loadTanstackRscRouteData({
-          hasClientLoader:
-            route.hasClientLoader || typeof route.clientData !== 'undefined',
-          loadClientData: loadModernData,
-          request,
-          routeId: ctx.route?.id,
-        });
-      }
-
-      return loadModernData();
-    } catch (err) {
-      if (isResponse(err)) {
-        if (isTanstackRedirect(err)) {
-          throw err;
-        }
-        if (isRedirectResponse(err)) {
-          const location = err.headers.get('Location') || '/';
-          throwTanstackRedirect(location);
-        }
-        if (err.status === 404) {
-          throw notFound();
-        }
-      }
-      throw err;
-    }
-  };
-}
-
 function isRouteObjectPathlessLayout(route: RouteObject) {
   return !route.path && !route.index;
 }
@@ -627,15 +474,6 @@ 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) {
@@ -734,9 +572,10 @@ 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),
     validateSearch: modernRouteObject.validateSearch,
@@ -775,6 +614,7 @@ function createRouteFromRouteObject(opts: {
   }
 
   const route = createTanstackRoute(base);
+  wrapRouteComponentWithModernContext(route, component, routeObject.id);
 
   const children = routeObject.children;
   if (children && children.length > 0) {
@@ -791,179 +631,6 @@ function createRouteFromRouteObject(opts: {
   return route;
 }
 
-function createRouteFromModernRoute(opts: {
-  options?: RouteTreeOptions;
-  parent: AnyRoute;
-  modernRoute: NestedRoute | PageRoute;
-}): AnyRoute {
-  const { options = {}, parent, modernRoute } = opts;
-  const route = modernRoute as ModernGeneratedRoute;
-  const revalidationState: RouteRevalidationState = {};
-
-  const modernId = route.id;
-  const stableFallbackId =
-    modernId ||
-    route._component ||
-    route.filename ||
-    route.data ||
-    (typeof route.loader === 'function' ? route.id : undefined);
-
-  const pendingComponent = route.loading || route.pendingComponent;
-  const errorComponent = route.error || route.errorComponent;
-  const component = toModernRouteComponent(route);
-  const modernLoader = route.loader;
-  const modernAction = route.action;
-  const modernShouldRevalidate = route.shouldRevalidate;
-  const shouldReload = createModernShouldReload(
-    modernShouldRevalidate,
-    revalidationState,
-  );
-
-  // Pathless layout: no path segment, but must remain in the tree.
-  const isPathlessLayout =
-    route.type === 'nested' &&
-    typeof route.index !== 'boolean' &&
-    typeof route.path === 'undefined';
-
-  const isIndexRoute = route.type === 'nested' && Boolean(route.index);
-
-  const base: TanstackRouteOptions = {
-    getParentRoute: () => parent,
-    component: component || undefined,
-    pendingComponent: pendingComponent || undefined,
-    errorComponent: errorComponent || undefined,
-    validateSearch: route.validateSearch,
-    loaderDeps: route.loaderDeps,
-    staticData: createRouteStaticData({
-      modernRouteId: modernId,
-      modernRouteAction: modernAction,
-      modernRouteHandle: mergeModernRouteHandle(route),
-      modernRouteHasAction: route.hasAction || Boolean(modernAction),
-      modernRouteHasClientLoader:
-        route.hasClientLoader || typeof route.clientData !== 'undefined',
-      modernRouteHasLoader:
-        route.hasLoader || typeof modernLoader === 'function',
-      modernRouteIsClientComponent: route.isClientComponent,
-      modernRouteLoader: modernLoader,
-      modernRouteShouldRevalidate: modernShouldRevalidate,
-    }),
-    loader: wrapModernLoader(
-      modernRoute,
-      modernLoader,
-      revalidationState,
-      options,
-    ),
-  };
-  if (route.inValidSSRRoute) {
-    base.ssr = false;
-  }
-  if (shouldReload) {
-    base.shouldReload = shouldReload;
-  }
-
-  if (isPathlessLayout) {
-    // Use a stable custom id for pathless layouts to avoid hydration mismatch.
-    base.id = stableFallbackId || 'pathless';
-  } else {
-    const rawPath = route.path;
-    base.path = isIndexRoute ? '/' : toTanstackPath(rawPath || '');
-  }
-
-  const tanstackRoute = createTanstackRoute(base);
-
-  const children = route.children as Array<NestedRoute | PageRoute> | undefined;
-  if (children && children.length > 0) {
-    const childRoutes = children.map(child =>
-      createRouteFromModernRoute({
-        options,
-        parent: tanstackRoute,
-        modernRoute: child,
-      }),
-    );
-    tanstackRoute.addChildren(childRoutes);
-  }
-
-  return tanstackRoute;
-}
-
-export function createRouteTreeFromModernRoutes(
-  routes: Array<NestedRoute | PageRoute>,
-  options: RouteTreeOptions = {},
-): ModernTanstackRootRoute {
-  const rootModern = routes.find(
-    r =>
-      r &&
-      (r as ModernGeneratedRoute).type === 'nested' &&
-      (r as ModernGeneratedRoute).isRoot,
-  ) as ModernGeneratedRoute | undefined;
-
-  const rootComponent = rootModern
-    ? toModernRouteComponent(rootModern)
-    : undefined;
-  const pendingComponent = rootModern?.loading;
-  const errorComponent = rootModern?.error;
-  const rootLoader = rootModern?.loader;
-  const rootAction = rootModern?.action;
-  const rootModernId = rootModern?.id;
-  const rootShouldRevalidate = rootModern?.shouldRevalidate;
-  const rootRevalidationState: RouteRevalidationState = {};
-  const rootShouldReload = createModernShouldReload(
-    rootShouldRevalidate,
-    rootRevalidationState,
-  );
-
-  const rootRouteOptions: TanstackRootRouteOptions = {
-    component: rootComponent || undefined,
-    pendingComponent: pendingComponent || undefined,
-    errorComponent: errorComponent || undefined,
-    validateSearch: rootModern?.validateSearch,
-    loaderDeps: rootModern?.loaderDeps,
-    notFoundComponent: DefaultNotFound,
-    staticData: createRouteStaticData({
-      modernRouteId: rootModernId,
-      modernRouteAction: rootAction,
-      modernRouteHandle: rootModern
-        ? mergeModernRouteHandle(rootModern)
-        : undefined,
-      modernRouteHasAction: rootModern?.hasAction || Boolean(rootAction),
-      modernRouteHasClientLoader:
-        rootModern?.hasClientLoader ||
-        typeof rootModern?.clientData !== 'undefined',
-      modernRouteHasLoader:
-        rootModern?.hasLoader || typeof rootLoader === 'function',
-      modernRouteIsClientComponent: rootModern?.isClientComponent,
-      modernRouteLoader: rootLoader,
-      modernRouteShouldRevalidate: rootShouldRevalidate,
-    }),
-    loader: rootModern
-      ? wrapModernLoader(rootModern, rootLoader, rootRevalidationState, options)
-      : undefined,
-  };
-  if (rootShouldReload) {
-    rootRouteOptions.shouldReload = rootShouldReload;
-  }
-  if (rootModern?.inValidSSRRoute) {
-    rootRouteOptions.ssr = false;
-  }
-
-  const rootRoute = createTanstackRootRoute(rootRouteOptions);
-
-  const topLevel = rootModern
-    ? (rootModern.children as Array<NestedRoute | PageRoute>) || []
-    : routes;
-
-  const childRoutes = topLevel.map(child =>
-    createRouteFromModernRoute({
-      options,
-      parent: rootRoute,
-      modernRoute: child,
-    }),
-  );
-
-  rootRoute.addChildren(childRoutes);
-  return rootRoute as unknown as ModernTanstackRootRoute;
-}
-
 function getRootLikeRouteObject(routes: RouteObject[]) {
   return routes.find(route => route.path === '/' && !route.index);
 }
@@ -982,8 +649,11 @@ 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,
@@ -1020,6 +690,12 @@ export function createRouteTreeFromRouteObjects(
   }
 
   const rootRoute = createTanstackRootRoute(rootRouteOptions);
+  if (rootComponent) {
+    rootRoute.options.component = withModernRouteMatchContext(
+      rootComponent,
+      rootRouteId,
+    ) as typeof rootRoute.options.component;
+  }
 
   const topLevel = rootLikeRoute
     ? [

package/src/runtime/router.ts

@@ -0,0 +1,15 @@
+/**
+ * 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, so the generated entry code value-imports `routerPlugin`
+ * from here. That single import both installs the framework-resolving router
+ * plugin of @modern-js/runtime AND registers the TanStack router provider
+ * (the './register' side effect) — the registration can therefore never be
+ * tree-shaken away from the entry that needs it.
+ */
+import './register';
+
+export { routerPlugin } from '@modern-js/runtime/router/internal';

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/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' {