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

package/src/runtime/lifecycle.ts

@@ -1,151 +1,16 @@
-// @effect-diagnostics strictBooleanExpressions:off
-import type { TInternalRuntimeContext } from '@modern-js/runtime/context';
-import type { RouteObject } from '@modern-js/runtime-utils/router';
-import type {
-  InternalRouterRuntimeState,
-  InternalRouterServerSnapshot,
-  RouterFramework,
-  RouterRouteMatchSnapshot,
-  RouterServerPrepareResult,
-} from './types';
-
-export type RouterLifecyclePhase = 'ssr-prepare' | 'client-create' | 'hydrate';
-
-export type RouterLifecycleContext = {
-  framework: RouterFramework;
-  phase: RouterLifecyclePhase;
-  routes: RouteObject[];
-  runtimeContext: TInternalRuntimeContext;
-  basename?: string;
-  hydrationData?: unknown;
-  router?: unknown;
-  matches?: RouterRouteMatchSnapshot[];
-  cleanup?: () => void | Promise<void>;
-  serverSnapshot?: InternalRouterServerSnapshot;
-};
-
-type RouterSnapshotLike = Partial<InternalRouterServerSnapshot>;
-
-function toHydrationScripts(state: {
-  hydrationScript?: string;
-  hydrationScripts?: string[];
-}) {
-  if (state.hydrationScripts?.length) {
-    return state.hydrationScripts;
-  }
-
-  return state.hydrationScript ? [state.hydrationScript] : undefined;
-}
-
-function getMatchedRouteIdsFromMatches(matches?: RouterRouteMatchSnapshot[]) {
-  const routeIds = matches
-    ?.map(match => match.assetRouteId ?? match.routeId)
-    .filter((routeId): routeId is string => typeof routeId === 'string');
-
-  return routeIds?.length ? routeIds : undefined;
-}
-
-export function createRouterServerSnapshot(
-  state: RouterSnapshotLike,
-): InternalRouterServerSnapshot {
-  const hydrationScripts = toHydrationScripts(state);
-  const matchedRouteIds =
-    state.matchedRouteIds ?? getMatchedRouteIdsFromMatches(state.matches);
-
-  return {
-    ...state,
-    ...(hydrationScripts?.length
-      ? {
-          hydrationScript: state.hydrationScript ?? hydrationScripts[0],
-          hydrationScripts,
-        }
-      : {}),
-    ...(matchedRouteIds ? { matchedRouteIds } : {}),
-  };
-}
-
-export function createRouterRuntimeState(
-  state: InternalRouterRuntimeState,
-): InternalRouterRuntimeState {
-  const hasSnapshotState =
-    Boolean(state.serverSnapshot) ||
-    Boolean(state.hydrationScript) ||
-    Boolean(state.hydrationScripts?.length) ||
-    Boolean(state.matchedRouteIds?.length) ||
-    Boolean(state.matches?.length);
-  const serverSnapshot = state.serverSnapshot
-    ? createRouterServerSnapshot({
-        ...state.serverSnapshot,
-        framework: state.serverSnapshot.framework ?? state.framework,
-        basename: state.serverSnapshot.basename ?? state.basename,
-        hydrationScript:
-          state.serverSnapshot.hydrationScript ?? state.hydrationScript,
-        hydrationScripts:
-          state.serverSnapshot.hydrationScripts ?? state.hydrationScripts,
-        matchedRouteIds:
-          state.serverSnapshot.matchedRouteIds ?? state.matchedRouteIds,
-        matches: state.serverSnapshot.matches ?? state.matches,
-      })
-    : hasSnapshotState
-      ? createRouterServerSnapshot({
-          framework: state.framework,
-          basename: state.basename,
-          hydrationScript: state.hydrationScript,
-          hydrationScripts: state.hydrationScripts,
-          matchedRouteIds: state.matchedRouteIds,
-          matches: state.matches,
-        })
-      : undefined;
-  const hydrationScripts = toHydrationScripts({
-    hydrationScript: state.hydrationScript ?? serverSnapshot?.hydrationScript,
-    hydrationScripts:
-      state.hydrationScripts ?? serverSnapshot?.hydrationScripts,
-  });
-  const matchedRouteIds =
-    state.matchedRouteIds ??
-    serverSnapshot?.matchedRouteIds ??
-    getMatchedRouteIdsFromMatches(state.matches);
-
-  return {
-    ...state,
-    ...(hydrationScripts?.length
-      ? {
-          hydrationScript: state.hydrationScript ?? hydrationScripts[0],
-          hydrationScripts,
-        }
-      : {}),
-    ...(matchedRouteIds ? { matchedRouteIds } : {}),
-    ...(serverSnapshot ? { serverSnapshot } : {}),
-  };
-}
-
-export function applyRouterRuntimeState(
-  runtimeContext: TInternalRuntimeContext,
-  state: InternalRouterRuntimeState,
-) {
-  const normalized = createRouterRuntimeState(state);
-  const mutableRuntimeContext = runtimeContext as any;
-  mutableRuntimeContext.routerFramework = normalized.framework;
-  mutableRuntimeContext.routerInstance = normalized.instance;
-  mutableRuntimeContext.routerHydrationScript = normalized.hydrationScript;
-  mutableRuntimeContext.routerMatchedRouteIds = normalized.matchedRouteIds;
-  mutableRuntimeContext.routerRuntime = normalized;
-  if (normalized.serverSnapshot) {
-    mutableRuntimeContext.routerServerSnapshot = normalized.serverSnapshot;
-  }
-
-  return runtimeContext;
-}
-
-export function applyRouterServerPrepareResult(
-  runtimeContext: TInternalRuntimeContext,
-  result: RouterServerPrepareResult,
-) {
-  const state = createRouterRuntimeState({
-    ...result.state,
-    cleanup: result.cleanup ?? result.state.cleanup,
-    serverSnapshot: result.snapshot ?? result.state.serverSnapshot,
-  });
-  applyRouterRuntimeState(runtimeContext, state);
-  return runtimeContext;
-}
+/**
+ * The router runtime state helpers are owned by @modern-js/runtime (the same
+ * implementation backs the built-in react-router provider and the SSR
+ * pipeline). This module only re-exports them so every router provider
+ * writes to the exact same runtime-context extension slot.
+ */
+export {
+  applyRouterRuntimeState,
+  applyRouterServerPrepareResult,
+  createRouterRuntimeState,
+  createRouterServerSnapshot,
+  getRouterRuntimeState,
+  getRouterServerSnapshot,
+  type RouterLifecycleContext,
+  type RouterLifecyclePhase,
+} from '@modern-js/runtime/context';

package/src/runtime/loaderBridge.ts

@@ -0,0 +1,257 @@
+// @effect-diagnostics strictBooleanExpressions:off
+/**
+ * Runtime bridge between Modern.js data loaders and TanStack Router.
+ *
+ * The generated `src/modern-tanstack/<entry>/router.gen.ts` files import these
+ * helpers instead of inlining them, so loader/redirect bugfixes ship with the
+ * package instead of requiring every app to regenerate its files. The
+ * hand-written route-tree builder (`routeTree.ts`) shares the response/redirect
+ * helpers for the same reason.
+ */
+import { notFound, redirect } from '@tanstack/react-router';
+
+/** Router context shape used by the generated TanStack router types. */
+export type ModernRouterContext = {
+  request?: Request;
+  requestContext?: unknown;
+};
+
+export 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'
+  );
+}
+
+const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
+
+export function isRedirectResponse(res: Response): boolean {
+  return redirectStatusCodes.has(res.status);
+}
+
+/**
+ * TanStack redirects are Response objects carrying the original redirect
+ * `options`. They must be re-thrown untouched — re-translating them through
+ * the Modern Response handling would lose `to`-based (internal) targets.
+ */
+export function isTanstackRedirect(value: unknown): boolean {
+  return (
+    isResponse(value) &&
+    typeof (value as { options?: unknown }).options === 'object'
+  );
+}
+
+export function isAbsoluteUrl(value: string): boolean {
+  try {
+    void new URL(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Re-throw a Modern.js `Location` redirect as a TanStack redirect.
+ *
+ * Prefers `to` for internal/relative redirects so the basepath rewrite can be
+ * applied; absolute (external) URLs go through `href` untouched.
+ */
+export function throwTanstackRedirect(location: string): never {
+  const target = location || '/';
+  if (isAbsoluteUrl(target)) {
+    throw redirect({ href: target });
+  }
+
+  throw redirect({ to: target });
+}
+
+/**
+ * React Router uses `*` for splat params, TanStack Router uses `_splat`.
+ * Modern loaders expect the React Router spelling.
+ */
+export function mapSplatParamsForModernLoader(
+  params: Record<string, string>,
+  hasSplat: boolean,
+): Record<string, string> {
+  if (!hasSplat) {
+    return params;
+  }
+
+  const { _splat, ...rest } = params as Record<string, string> & {
+    _splat?: string;
+  };
+  if (typeof _splat !== 'undefined') {
+    return { ...rest, '*': _splat };
+  }
+  return rest;
+}
+
+/**
+ * Static-data factory used by the generated router files: drops empty fields
+ * so route static data stays minimal.
+ */
+export function createRouteStaticData(opts: {
+  modernRouteId?: string;
+  modernRouteAction?: unknown;
+  modernRouteLoader?: unknown;
+}): {
+  modernRouteId?: string;
+  modernRouteAction?: unknown;
+  modernRouteLoader?: unknown;
+} {
+  const staticData: {
+    modernRouteId?: string;
+    modernRouteAction?: unknown;
+    modernRouteLoader?: unknown;
+  } = {};
+
+  if (typeof opts.modernRouteId === 'string' && opts.modernRouteId.length > 0) {
+    staticData.modernRouteId = opts.modernRouteId;
+  }
+
+  if (typeof opts.modernRouteLoader !== 'undefined') {
+    staticData.modernRouteLoader = opts.modernRouteLoader;
+  }
+
+  if (typeof opts.modernRouteAction !== 'undefined') {
+    staticData.modernRouteAction = opts.modernRouteAction;
+  }
+
+  return staticData;
+}
+
+type LoaderLikeContext = {
+  abortController?: AbortController;
+  signal?: AbortSignal;
+  context?: ModernRouterContext;
+  location?:
+    | string
+    | {
+        publicHref?: string;
+        href?: string;
+        url?: { href?: string };
+      };
+  params?: Record<string, string>;
+};
+
+function getLoaderSignal(ctx: LoaderLikeContext | undefined): 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: LoaderLikeContext | undefined): 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: LoaderLikeContext | undefined,
+): 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 (isTanstackRedirect(err)) {
+      throw err;
+    }
+    if (isRedirectResponse(err)) {
+      const location = err.headers.get('Location') ?? '/';
+      throwTanstackRedirect(location);
+    }
+    if (err.status === 404) {
+      throw notFound();
+    }
+  }
+
+  throw err;
+}
+
+/**
+ * Wrap a Modern.js data loader (`page.data.ts` loader/action style) into a
+ * TanStack Router loader: builds a `Request` from the loader context, maps
+ * splat params, and translates Response redirects/404s into TanStack
+ * `redirect()`/`notFound()`.
+ */
+export function modernLoaderToTanstack<TLoader extends (args: any) => any>(
+  opts: { hasSplat: boolean },
+  modernLoader: TLoader,
+): (ctx: unknown) => Promise<Awaited<ReturnType<TLoader>>> {
+  type LoaderResult = Awaited<ReturnType<TLoader>>;
+
+  return (rawCtx: unknown): Promise<LoaderResult> => {
+    const ctx = rawCtx as LoaderLikeContext | undefined;
+    try {
+      const signal = getLoaderSignal(ctx);
+      const baseRequest: Request | undefined =
+        ctx?.context?.request instanceof Request
+          ? ctx.context.request
+          : undefined;
+
+      const href = getLoaderHref(ctx);
+
+      const request =
+        baseRequest !== undefined
+          ? new Request(baseRequest, { signal })
+          : new Request(href, { signal });
+
+      const params = mapSplatParamsForModernLoader(
+        getLoaderParams(ctx),
+        opts.hasSplat,
+      );
+
+      return Promise.resolve(
+        (modernLoader as (args: unknown) => unknown)({
+          request,
+          params,
+          context: ctx?.context?.requestContext,
+        }) as LoaderResult,
+      )
+        .then((result: LoaderResult) => handleModernLoaderResult(result))
+        .catch(handleModernLoaderError);
+    } catch (err) {
+      handleModernLoaderError(err);
+    }
+  };
+}

package/src/runtime/outlet.tsx

@@ -0,0 +1,48 @@
+import { Outlet as TanstackOutlet } from '@tanstack/react-router';
+import {
+  createElement,
+  type ElementType,
+  memo,
+  type ReactElement,
+} from 'react';
+
+type RouteComponentProps = Record<string, unknown>;
+type PreloadableComponent = ElementType<RouteComponentProps> & {
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
+type WrappedPreloadableComponent = ((
+  props: RouteComponentProps,
+) => ReactElement | null) & {
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
+
+export const Outlet = memo(function ModernTanstackOutlet() {
+  return <TanstackOutlet />;
+});
+
+export function withModernRouteMatchContext(
+  component: unknown,
+  _routeId: string,
+): unknown {
+  if (component === null || component === undefined) {
+    return component;
+  }
+
+  const Component = component as ElementType<RouteComponentProps>;
+  const WrappedRouteComponent: WrappedPreloadableComponent = props =>
+    createElement(Component, props);
+
+  const preloadable = component as PreloadableComponent;
+  if (typeof preloadable.load === 'function') {
+    WrappedRouteComponent.load = preloadable.load.bind(preloadable);
+  }
+  if (typeof preloadable.preload === 'function') {
+    WrappedRouteComponent.preload = preloadable.preload.bind(preloadable);
+  } else if (typeof preloadable.load === 'function') {
+    WrappedRouteComponent.preload = WrappedRouteComponent.load;
+  }
+
+  return WrappedRouteComponent;
+}

package/src/runtime/plugin.node.tsx

@@ -1,23 +1,17 @@
 // @effect-diagnostics asyncFunction:off newPromise:off strictBooleanExpressions:off unnecessaryArrowBlock:off
 /// <reference path="./ssr-shim.d.ts" />
 
-import type { Plugin, RuntimePluginExtends } from '@modern-js/plugin';
-import type { RuntimePluginAPI } from '@modern-js/plugin/runtime';
 import {
   getGlobalEnableRsc,
-  getGlobalLayoutApp,
-  getGlobalRoutes,
   InternalRuntimeContext,
   type ServerPayload,
   type TInternalRuntimeContext,
 } from '@modern-js/runtime/context';
-import { merge } from '@modern-js/runtime-utils/merge';
 import {
   createRequestContext,
   type RequestContext,
   storage,
 } from '@modern-js/runtime-utils/node';
-import type { RouteObject } from '@modern-js/runtime-utils/router';
 import { time } from '@modern-js/runtime-utils/time';
 import { LOADER_REPORTER_NAME } from '@modern-js/utils/universal/constants';
 import {
@@ -26,25 +20,23 @@ import {
   createRouter,
   RouterProvider,
 } from '@tanstack/react-router';
-import { attachRouterServerSsrUtils } from '@tanstack/router-core/ssr/server';
 import type React from 'react';
 import { useContext } from 'react';
 import { createModernBasepathRewrite } from './basepathRewrite';
-import {
-  modifyRoutes as modifyRoutesHook,
-  onAfterCreateRouter as onAfterCreateRouterHook,
-  onAfterHydrateRouter as onAfterHydrateRouterHook,
-  onBeforeCreateRouter as onBeforeCreateRouterHook,
-  onBeforeCreateRoutes as onBeforeCreateRoutesHook,
-  onBeforeHydrateRouter as onBeforeHydrateRouterHook,
-  type RouterExtendsHooks,
-} from './hooks';
+import { routerProviderRegistryHooks } from './hooks';
 import { wrapTanstackSsrHydrationBoundary } from './hydrationBoundary';
 import {
   applyRouterServerPrepareResult,
   createRouterServerSnapshot,
+  getRouterRuntimeState,
   type RouterLifecycleContext,
 } from './lifecycle';
+import {
+  getFinalRouteConfig,
+  getMergedRouterConfig,
+  type TanstackRouterPluginAPI,
+  type TanstackRouterRuntimePlugin,
+} from './pluginCore';
 import {
   createRouteTreeFromRouteObjects,
   getModernRouteIdsFromMatches,
@@ -65,25 +57,6 @@ type ModernTanstackRouterContext = {
   requestContext: RequestContext<Record<string, unknown>>;
 };
 
-type TanstackRouterRuntimeConfig = {
-  plugins?: TanstackRouterRuntimePlugin[];
-  router?: Partial<RouterConfig>;
-  [key: string]: unknown;
-};
-
-type TanstackRouterRuntimeExtends = Required<
-  RuntimePluginExtends<TanstackRouterRuntimeConfig, TInternalRuntimeContext>
-> & {
-  extendHooks: RouterExtendsHooks;
-};
-
-type TanstackRouterPluginAPI = RuntimePluginAPI<TanstackRouterRuntimeExtends>;
-
-type TanstackRouterRuntimePlugin = Plugin<
-  TanstackRouterPluginAPI,
-  TInternalRuntimeContext
->;
-
 const setTanstackRscServerPayload = (payload: ServerPayload) => {
   const storageContext = storage.useContext?.() as
     | { serverPayload?: ServerPayload }
@@ -169,7 +142,8 @@ function isReactLazyRouteComponent(
   component: unknown,
 ): component is ReactLazyRouteComponent {
   return (
-    Boolean(component) &&
+    component !== null &&
+    component !== undefined &&
     typeof component === 'object' &&
     typeof (component as ReactLazyRouteComponent)._init === 'function' &&
     '_payload' in component
@@ -299,20 +273,6 @@ function createGetSsrHref(request: Request): string {
   return `${url.pathname}${url.search}${url.hash}`;
 }
 
-function stripSyntheticNotFoundRoute(routes: RouteObject[]): RouteObject[] {
-  return routes
-    .filter(route => !(route.path === '*' && !route.id && !route.loader))
-    .map(route => {
-      if (!route.children?.length) {
-        return route;
-      }
-      return {
-        ...route,
-        children: stripSyntheticNotFoundRoute(route.children),
-      };
-    });
-}
-
 function collectRouterErrors(
   tanstackRouter: AnyRouter,
 ): Record<string, unknown> | undefined {
@@ -339,40 +299,34 @@ function collectRouterErrors(
   return Object.keys(errors).length > 0 ? errors : undefined;
 }
 
+async function attachServerSsrUtils(router: TanstackRouterWithServerSsr) {
+  const { attachRouterServerSsrUtils } = await import(
+    '@tanstack/router-core/ssr/server'
+  );
+
+  attachRouterServerSsrUtils({
+    router,
+    manifest: undefined,
+  });
+}
+
 export const tanstackRouterPlugin = (
   userConfig: Partial<RouterConfig> = {},
 ): TanstackRouterRuntimePlugin => {
   const plugin: TanstackRouterRuntimePlugin = {
     name: '@modern-js/plugin-router-tanstack',
-    registryHooks: {
-      modifyRoutes: modifyRoutesHook,
-      onAfterCreateRouter: onAfterCreateRouterHook,
-      onAfterHydrateRouter: onAfterHydrateRouterHook,
-      onBeforeCreateRouter: onBeforeCreateRouterHook,
-      onBeforeCreateRoutes: onBeforeCreateRoutesHook,
-      onBeforeHydrateRouter: onBeforeHydrateRouterHook,
-    },
+    registryHooks: routerProviderRegistryHooks,
     setup: (api: TanstackRouterPluginAPI) => {
       api.onBeforeRender(async (context, interrupt) => {
-        const pluginConfig = api.getRuntimeConfig() as {
-          router?: Partial<RouterConfig>;
-        };
-        const mergedConfig = merge(
-          pluginConfig.router || {},
-          userConfig,
-        ) as RouterConfig;
+        const mergedConfig = getMergedRouterConfig(api, userConfig);
         const serializationAdapters = getGlobalEnableRsc()
           ? (await import('./rsc/server')).getTanstackRscSerializationAdapters()
           : undefined;
         const enableRsc = getGlobalEnableRsc();
 
-        const { basename = '', routesConfig, createRoutes } = mergedConfig;
+        const { basename = '', createRoutes } = mergedConfig;
 
-        const finalRouteConfig = {
-          routes: getGlobalRoutes(),
-          globalApp: getGlobalLayoutApp(),
-          ...routesConfig,
-        };
+        const finalRouteConfig = getFinalRouteConfig(mergedConfig);
 
         if (!finalRouteConfig.routes && !createRoutes) {
           return;
@@ -387,12 +341,7 @@ export const tanstackRouterPlugin = (
               routesConfig: finalRouteConfig,
               ssrMode: context.ssrContext?.mode,
             }) || [];
-        const normalizedRouteObjects = createRoutes
-          ? routeObjects
-          : stripSyntheticNotFoundRoute(routeObjects);
-        const modifiedRouteObjects = hooks.modifyRoutes.call(
-          normalizedRouteObjects,
-        );
+        const modifiedRouteObjects = hooks.modifyRoutes.call(routeObjects);
 
         if (!modifiedRouteObjects.length) {
           return;
@@ -457,10 +406,7 @@ export const tanstackRouterPlugin = (
         const serverRouter =
           tanstackRouter as unknown as TanstackRouterWithServerSsr;
 
-        attachRouterServerSsrUtils({
-          router: serverRouter,
-          manifest: undefined,
-        });
+        await attachServerSsrUtils(serverRouter);
 
         const end = time();
 
@@ -559,8 +505,7 @@ export const tanstackRouterPlugin = (
             const context = useContext(
               InternalRuntimeContext,
             ) as unknown as TInternalRuntimeContext;
-            const router =
-              context.routerInstance ?? context.routerRuntime?.instance;
+            const router = getRouterRuntimeState(context)?.instance;
             if (!router) {
               return App ? <App {...props} /> : null;
             }