@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.12 → 3.2.0-ultramodern.121

package/src/runtime/index.tsx

@@ -1,5 +1,6 @@
+import './register';
+
 export * from '@tanstack/react-router';
-export { useMatch } from '@tanstack/react-router';
 export type {
   Fetcher,
   FetcherState,
@@ -12,6 +13,14 @@ export {
   RouteActionResponseError,
   useFetcher,
 } from './dataMutation';
+export type { ModernRouterContext } from './loaderBridge';
+export {
+  createRouteStaticData,
+  isAbsoluteUrl,
+  modernLoaderToTanstack,
+  throwTanstackRedirect,
+} from './loaderBridge';
+export { Outlet } from './outlet';
 export {
   tanstackRouterPlugin,
   tanstackRouterPlugin as default,
@@ -22,9 +31,10 @@ export type {
   PrefetchBehavior,
 } from './prefetchLink';
 export { Link, NavLink } from './prefetchLink';
-export type {
-  AnyCompositeComponent,
-  AnyRenderableServerComponent,
-  CompositeComponentProps,
-} from './rsc/client';
-export { CompositeComponent } from './rsc/client';
+export type { TanstackRouterState } from './state';
+export { getTanstackRouterState } from './state';
+export type { RouterConfig } from './types';
+export {
+  getModernTanstackRouterFastDefaults,
+  modernTanstackRouterFastDefaults,
+} from './types';

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;
+}