@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.9 → 3.5.0-ultramodern.90

package/src/runtime/rsc/payloadRouter.ts

@@ -1,47 +1,25 @@
 // @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>;
-
-type RouterStaticData = {
-  modernRouteAction?: unknown;
-  modernRouteHandle?: unknown;
-  modernRouteHasAction?: unknown;
-  modernRouteHasClientLoader?: unknown;
-  modernRouteHasLoader?: unknown;
-  modernRouteId?: unknown;
-};
-
-type RouterRouteLike = {
-  id?: unknown;
-  options?: {
-    index?: unknown;
-    path?: unknown;
-    staticData?: RouterStaticData;
-  };
-  parentRoute?: RouterRouteLike;
-};
-
-type RouterMatchLike = {
-  error?: unknown;
-  id?: unknown;
-  loaderData?: unknown;
-  params?: unknown;
-  pathname?: unknown;
-  pathnameBase?: unknown;
-  route?: RouterRouteLike;
-  routeId?: unknown;
-};
-
-type TanstackPayloadRouterLike = {
-  state?: {
-    location?: unknown;
-    matches?: unknown;
-    statusCode?: unknown;
-  };
-};
+import { notFound } from '@tanstack/react-router';
+import { serializeTanstackRscFlightValues } from './flightSerialization';
+import {
+  isSerializedNotFound,
+  serializePayloadError,
+  toRouteErrors,
+  toRouteLoaderData,
+} from './payloadErrors';
+import {
+  createPayloadFetchKey,
+  fetchTanstackRscPayload,
+  payloadFetchCache,
+} from './payloadFetch';
+import type {
+  RouterMatchLike,
+  TanstackPayloadRouterLike,
+} from './payloadRoutes';
+import { toPayloadRoute, toPlainLocation } from './payloadRoutes';
+
+export { __setTanstackRscPayloadDecoderForTests } from './payloadFetch';
 
 type LoadRouteDataOptions = {
   hasClientLoader?: boolean;
@@ -50,102 +28,6 @@ type LoadRouteDataOptions = {
   routeId?: string;
 };
 
-const payloadFetchCache = new Map<string, Promise<ServerPayload>>();
-let payloadDecoder: PayloadDecoder | undefined;
-
-function getRouteId(match: RouterMatchLike) {
-  const routeId = match.routeId ?? match.route?.id ?? match.id;
-  return typeof routeId === 'string' ? routeId : undefined;
-}
-
-function getRouteStaticData(match: RouterMatchLike) {
-  return match.route?.options?.staticData || {};
-}
-
-function getRouteParentId(match: RouterMatchLike) {
-  const parentId = match.route?.parentRoute?.id;
-  return typeof parentId === 'string' ? parentId : undefined;
-}
-
-function toRoutePath(match: RouterMatchLike) {
-  const path = match.route?.options?.path;
-  return typeof path === 'string' ? path : undefined;
-}
-
-function toPayloadRoute(match: RouterMatchLike): PayloadRoute | undefined {
-  const routeId = getRouteId(match);
-  if (!routeId) {
-    return undefined;
-  }
-
-  const staticData = getRouteStaticData(match);
-  const params =
-    match.params && typeof match.params === 'object'
-      ? (match.params as Record<string, string>)
-      : {};
-  const pathname = typeof match.pathname === 'string' ? match.pathname : '';
-
-  return {
-    handle: staticData.modernRouteHandle,
-    hasAction: Boolean(
-      staticData.modernRouteHasAction || staticData.modernRouteAction,
-    ),
-    hasErrorBoundary: false,
-    hasLoader: Boolean(staticData.modernRouteHasLoader),
-    hasClientLoader: Boolean(staticData.modernRouteHasClientLoader),
-    id: routeId,
-    index: Boolean(match.route?.options?.index) || undefined,
-    params,
-    parentId: getRouteParentId(match),
-    path: toRoutePath(match),
-    pathname,
-    pathnameBase:
-      typeof match.pathnameBase === 'string' ? match.pathnameBase : pathname,
-  };
-}
-
-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: {
@@ -172,7 +54,9 @@ export function createTanstackRscServerPayload(
       typeof match.loaderData !== 'undefined' &&
       !(options.omitClientLoaderData && payloadRoute.hasClientLoader)
     ) {
-      loaderData[payloadRoute.id] = match.loaderData;
+      loaderData[payloadRoute.id] = serializeTanstackRscFlightValues(
+        match.loaderData,
+      );
     }
 
     if (typeof match.error !== 'undefined') {
@@ -185,7 +69,7 @@ export function createTanstackRscServerPayload(
     actionData: null,
     errors: Object.keys(errors).length > 0 ? errors : null,
     loaderData,
-    location: router.state?.location as ServerPayload['location'],
+    location: toPlainLocation(router.state?.location),
     routes,
   };
 }
@@ -199,7 +83,11 @@ export function handleTanstackRscRedirect(
   let redirectUrl = headers.get('Location') || '/';
 
   if (basename !== '/') {
-    redirectUrl = redirectUrl.replace(basename, '') || '/';
+    if (redirectUrl === basename) {
+      redirectUrl = '/';
+    } else if (redirectUrl.startsWith(`${basename}/`)) {
+      redirectUrl = redirectUrl.slice(basename.length);
+    }
   }
 
   newHeaders.set('X-Modernjs-Redirect', redirectUrl);
@@ -216,72 +104,6 @@ export function isTanstackRscPayloadNavigationEnabled() {
   return typeof window !== 'undefined';
 }
 
-async function decodePayload(stream: ReadableStream<Uint8Array>) {
-  if (payloadDecoder) {
-    return payloadDecoder(stream);
-  }
-
-  const runtime = await import('@modern-js/runtime/rsc/client');
-  return runtime.createFromReadableStream(stream);
-}
-
-function isServerPayload(value: unknown): value is ServerPayload {
-  return (
-    Boolean(value) &&
-    typeof value === 'object' &&
-    (value as ServerPayload).type === 'render' &&
-    Array.isArray((value as ServerPayload).routes)
-  );
-}
-
-function createPayloadFetchKey(request: Request) {
-  return request.url;
-}
-
-function isAbsoluteUrl(value: string) {
-  try {
-    void new URL(value);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-async function fetchTanstackRscPayload(request: Request) {
-  const headers = new Headers(request.headers);
-  headers.set('x-rsc-tree', 'true');
-
-  const response = await fetch(request.url, {
-    credentials: 'same-origin',
-    headers,
-    method: 'GET',
-    signal: request.signal,
-  });
-
-  const redirectLocation = response.headers.get('X-Modernjs-Redirect');
-  if (redirectLocation) {
-    if (isAbsoluteUrl(redirectLocation)) {
-      throw redirect({ href: redirectLocation });
-    }
-    throw redirect({ to: redirectLocation || '/' });
-  }
-
-  if (response.status === 404 && !response.body) {
-    throw notFound();
-  }
-
-  if (!response.body) {
-    throw new Error('TanStack RSC payload response body is null.');
-  }
-
-  const payload = await decodePayload(response.body);
-  if (!isServerPayload(payload)) {
-    throw new Error('Unexpected TanStack RSC payload type.');
-  }
-
-  return payload;
-}
-
 export function loadTanstackRscPayload(request: Request) {
   const key = createPayloadFetchKey(request);
   let payloadPromise = payloadFetchCache.get(key);
@@ -294,26 +116,6 @@ export function loadTanstackRscPayload(request: Request) {
   return payloadPromise;
 }
 
-function isSerializedNotFound(value: unknown) {
-  return (
-    Boolean(value) &&
-    typeof value === 'object' &&
-    (value as { isNotFound?: unknown }).isNotFound === true
-  );
-}
-
-function toRouteErrors(payload: ServerPayload) {
-  return payload.errors && typeof payload.errors === 'object'
-    ? (payload.errors as Record<string, unknown>)
-    : {};
-}
-
-function toRouteLoaderData(payload: ServerPayload) {
-  return payload.loaderData && typeof payload.loaderData === 'object'
-    ? (payload.loaderData as Record<string, unknown>)
-    : {};
-}
-
 export async function loadTanstackRscRouteData({
   hasClientLoader,
   loadClientData,
@@ -353,10 +155,3 @@ export async function loadTanstackRscRouteData({
 
   return undefined;
 }
-
-export function __setTanstackRscPayloadDecoderForTests(
-  decoder?: PayloadDecoder,
-) {
-  payloadDecoder = decoder;
-  payloadFetchCache.clear();
-}

package/src/runtime/rsc/payloadRoutes.ts

@@ -0,0 +1,122 @@
+// @effect-diagnostics asyncFunction:off globalFetch:off processEnv:off strictBooleanExpressions:off
+import type { PayloadRoute, ServerPayload } from '@modern-js/runtime/context';
+
+type RouterStaticData = {
+  modernRouteAction?: unknown;
+  modernRouteHandle?: unknown;
+  modernRouteHasAction?: unknown;
+  modernRouteHasClientLoader?: unknown;
+  modernRouteHasLoader?: unknown;
+  modernRouteId?: unknown;
+  modernRouteIsClientComponent?: unknown;
+};
+
+type RouterRouteLike = {
+  id?: unknown;
+  options?: {
+    index?: unknown;
+    path?: unknown;
+    staticData?: RouterStaticData;
+  };
+  parentRoute?: RouterRouteLike;
+};
+
+export type RouterMatchLike = {
+  error?: unknown;
+  id?: unknown;
+  loaderData?: unknown;
+  params?: unknown;
+  pathname?: unknown;
+  pathnameBase?: unknown;
+  route?: RouterRouteLike;
+  routeId?: unknown;
+};
+
+export type TanstackPayloadRouterLike = {
+  state?: {
+    location?: unknown;
+    matches?: unknown;
+    statusCode?: unknown;
+  };
+};
+
+function toPlainRecord(value: unknown): Record<string, unknown> {
+  if (!value || typeof value !== 'object') {
+    return {};
+  }
+
+  return Object.fromEntries(Object.entries(value as Record<string, unknown>));
+}
+
+export function toPlainLocation(location: unknown): ServerPayload['location'] {
+  if (!location || typeof location !== 'object') {
+    return location as ServerPayload['location'];
+  }
+
+  const plainLocation = toPlainRecord(location);
+
+  for (const key of ['search', 'state']) {
+    if (
+      plainLocation[key] &&
+      typeof plainLocation[key] === 'object' &&
+      !Array.isArray(plainLocation[key])
+    ) {
+      plainLocation[key] = toPlainRecord(plainLocation[key]);
+    }
+  }
+
+  return plainLocation as unknown as ServerPayload['location'];
+}
+
+export function getRouteId(match: RouterMatchLike) {
+  const routeId = match.routeId ?? match.route?.id ?? match.id;
+  return typeof routeId === 'string' ? routeId : undefined;
+}
+
+function getRouteStaticData(match: RouterMatchLike) {
+  return match.route?.options?.staticData || {};
+}
+
+function getRouteParentId(match: RouterMatchLike) {
+  const parentId = match.route?.parentRoute?.id;
+  return typeof parentId === 'string' ? parentId : undefined;
+}
+
+function toRoutePath(match: RouterMatchLike) {
+  const path = match.route?.options?.path;
+  return typeof path === 'string' ? path : undefined;
+}
+
+export function toPayloadRoute(
+  match: RouterMatchLike,
+): PayloadRoute | undefined {
+  const routeId = getRouteId(match);
+  if (!routeId) {
+    return undefined;
+  }
+
+  const staticData = getRouteStaticData(match);
+  const params =
+    match.params && typeof match.params === 'object'
+      ? (toPlainRecord(match.params) as Record<string, string>)
+      : {};
+  const pathname = typeof match.pathname === 'string' ? match.pathname : '';
+
+  return {
+    handle: staticData.modernRouteHandle,
+    hasAction: Boolean(
+      staticData.modernRouteHasAction || staticData.modernRouteAction,
+    ),
+    hasErrorBoundary: false,
+    hasLoader: Boolean(staticData.modernRouteHasLoader),
+    hasClientLoader: Boolean(staticData.modernRouteHasClientLoader),
+    id: routeId,
+    index: Boolean(match.route?.options?.index) || undefined,
+    params,
+    parentId: getRouteParentId(match),
+    path: toRoutePath(match),
+    pathname,
+    pathnameBase:
+      typeof match.pathnameBase === 'string' ? match.pathnameBase : pathname,
+  };
+}

package/src/runtime/rsc/payloadStorage.ts

@@ -0,0 +1,35 @@
+// @effect-diagnostics strictBooleanExpressions:off
+
+import type { ServerPayload } from '@modern-js/runtime/context';
+import { storage } from '@modern-js/runtime-utils/node';
+import type { TanstackRouterWithServerSsr } from '../ssrTypes';
+
+type TanstackRscStorageContext = {
+  serverPayload?: ServerPayload;
+  tanstackRscRouter?: TanstackRouterWithServerSsr;
+};
+
+export const setTanstackRscServerPayload = (payload: ServerPayload) => {
+  const storageContext = storage.useContext?.() as
+    | TanstackRscStorageContext
+    | undefined;
+  if (storageContext) {
+    storageContext.serverPayload = payload;
+  }
+};
+
+export const setTanstackRscRouter = (router: TanstackRouterWithServerSsr) => {
+  const storageContext = storage.useContext?.() as
+    | TanstackRscStorageContext
+    | undefined;
+  if (storageContext) {
+    storageContext.tanstackRscRouter = router;
+  }
+};
+
+export const getTanstackRscRouter = () => {
+  const storageContext = storage.useContext?.() as
+    | TanstackRscStorageContext
+    | undefined;
+  return storageContext?.tanstackRscRouter;
+};

package/src/runtime/rsc/server.tsx

@@ -1,13 +1,8 @@
 // @effect-diagnostics asyncFunction:off processEnv:off strictBooleanExpressions:off
-import {
-  createFromReadableStream,
-  renderRsc,
-} from '@modern-js/runtime/rsc/server';
-import { createSerializationAdapter } from '@tanstack/react-router';
-import { RawStream } from '@tanstack/router-core';
-import React, { createElement, use } from 'react';
+import { renderRsc } from '@modern-js/runtime/rsc/server';
+import { createSerializationAdapter, RawStream } from '@tanstack/router-core';
+import React, { createElement } from 'react';
 import { ClientSlot } from './ClientSlot';
-import { createRscProxy } from './createRscProxy';
 import { ReplayableStream } from './ReplayableStream';
 import { sanitizeSlotArgs } from './slotUsageSanitizer';
 import {
@@ -15,6 +10,7 @@ import {
   type AnyRenderableServerComponent,
   isRenderableServerComponent,
   isServerComponent,
+  RENDERABLE_RSC,
   RSC_SLOT_USAGES_STREAM,
   type RscSlotUsageEvent,
   SERVER_COMPONENT_STREAM,
@@ -34,25 +30,6 @@ type SlotEmitter<T> = {
   stream: ReadableStream<T>;
 };
 
-function createTreeGetter(stream: ServerComponentStream) {
-  let ready = false;
-  let tree: unknown;
-  const treePromise = Promise.resolve(
-    createFromReadableStream(stream.createReplayStream()),
-  ).then(value => {
-    tree = value;
-    ready = true;
-    return value;
-  });
-
-  return () => {
-    if (ready) {
-      return tree;
-    }
-    return use(treePromise);
-  };
-}
-
 function createSlotProxy(options?: {
   onSlotCall?: (slot: string, args: unknown[]) => void;
 }) {
@@ -79,6 +56,20 @@ function createSlotProxy(options?: {
   });
 }
 
+function createServerRscValue(options: {
+  renderable: boolean;
+  slotUsagesStream?: ReadableStream<RscSlotUsageEvent>;
+  stream: ServerComponentStream;
+}) {
+  return {
+    [SERVER_COMPONENT_STREAM]: options.stream,
+    ...(options.renderable ? { [RENDERABLE_RSC]: true } : {}),
+    ...(options.slotUsagesStream
+      ? { [RSC_SLOT_USAGES_STREAM]: options.slotUsagesStream }
+      : {}),
+  };
+}
+
 function toReplayableFlightStream(
   node: React.ReactElement,
   handlers?: {
@@ -103,7 +94,7 @@ export async function renderServerComponent<TNode extends React.ReactNode>(
     createReplayStream: () => stream.createReplayStream(),
   };
 
-  return createRscProxy(createTreeGetter(streamWrapper), {
+  return createServerRscValue({
     renderable: true,
     stream: streamWrapper,
   }) as TNode & AnyRenderableServerComponent<TNode>;
@@ -150,7 +141,7 @@ export async function createCompositeComponent<
     createReplayStream: () => flightStream.createReplayStream(),
   };
 
-  return createRscProxy(createTreeGetter(streamWrapper), {
+  return createServerRscValue({
     renderable: false,
     slotUsagesStream: slotUsagesEmitter?.stream,
     stream: streamWrapper,

package/src/runtime/rsc/shared.ts

@@ -0,0 +1,70 @@
+import type React from 'react';
+import {
+  type AnyCompositeComponent,
+  type AnyRenderableServerComponent,
+  RSC_PROXY_GET_TREE,
+  RSC_PROXY_PATH,
+  type RscSlotUsageEvent,
+} from './symbols';
+
+export const TANSTACK_RSC_FLIGHT_VALUE = '__modernTanstackRsc';
+
+export type SerializedTanstackRscFlightValue = {
+  [TANSTACK_RSC_FLIGHT_VALUE]: true;
+  kind: 'renderable' | 'composite';
+  slotUsagesStream?: ReadableStream<RscSlotUsageEvent>;
+  stream: ReadableStream<Uint8Array>;
+};
+
+export function isSerializedTanstackRscFlightValue(
+  value: unknown,
+): value is SerializedTanstackRscFlightValue {
+  return (
+    Boolean(value) &&
+    typeof value === 'object' &&
+    (value as { [TANSTACK_RSC_FLIGHT_VALUE]?: unknown })[
+      TANSTACK_RSC_FLIGHT_VALUE
+    ] === true &&
+    ((value as { kind?: unknown }).kind === 'renderable' ||
+      (value as { kind?: unknown }).kind === 'composite') &&
+    (value as { stream?: unknown }).stream instanceof ReadableStream
+  );
+}
+
+export function EmptyFallback() {
+  return null;
+}
+
+function selectTreePath(tree: unknown, path: string[]) {
+  let current = tree;
+  for (const key of path) {
+    if (current === null || typeof current !== 'object') {
+      return null;
+    }
+    current = (current as Record<string, unknown>)[key];
+  }
+  return current as React.ReactNode;
+}
+
+type RenderSelectedTreeSource =
+  | AnyRenderableServerComponent
+  | AnyCompositeComponent;
+
+type RenderSelectedTreeOptions = {
+  getTree?: (() => unknown) | undefined;
+  missingTreeError: string;
+};
+
+export function renderSelectedTree(
+  src: RenderSelectedTreeSource,
+  {
+    getTree = src[RSC_PROXY_GET_TREE],
+    missingTreeError,
+  }: RenderSelectedTreeOptions,
+) {
+  if (!getTree) {
+    throw new Error(missingTreeError);
+  }
+
+  return selectTreePath(getTree(), src[RSC_PROXY_PATH] || []);
+}

package/src/runtime/rsc/slotUsageSanitizer.ts

@@ -50,6 +50,10 @@ function sanitizeSlotArg(
     return String(value);
   }
 
+  if (typeof value === 'function') {
+    return '[Function]';
+  }
+
   if (seen.has(value)) {
     return '[Circular]';
   }

package/src/runtime/rsc/treeGetter.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { use } from 'react';
+
+type ModernRscClientRuntime = typeof import('@modern-js/runtime/rsc/client');
+type ServerRscClientRuntime =
+  typeof import('react-server-dom-rspack/client.edge');
+
+let modernRscClientRuntimePromise: Promise<ModernRscClientRuntime> | undefined;
+
+function loadModernRscClientRuntime() {
+  modernRscClientRuntimePromise ??= import(
+    '@modern-js/runtime/rsc/client'
+  ).then(runtime => {
+    runtime.setServerCallback(runtime.callServer);
+    return runtime;
+  });
+  return modernRscClientRuntimePromise;
+}
+
+async function createFromFlightStream(stream: ReadableStream<Uint8Array>) {
+  if (typeof window === 'undefined') {
+    const runtime: ServerRscClientRuntime = await import(
+      'react-server-dom-rspack/client.edge'
+    );
+    return runtime.createFromReadableStream(stream);
+  }
+
+  const runtime = await loadModernRscClientRuntime();
+  return runtime.createFromReadableStream(stream, {
+    callServer: runtime.callServer,
+  });
+}
+
+export function createTreeGetterFromFlightStream(
+  stream: ReadableStream<Uint8Array>,
+) {
+  let ready = false;
+  let tree: unknown;
+  const treePromise = createFromFlightStream(stream).then(value => {
+    tree = value;
+    ready = true;
+    return value;
+  });
+
+  return () => {
+    if (ready) {
+      return tree;
+    }
+    return use(treePromise);
+  };
+}

package/src/runtime/shared/isAbsoluteUrl.ts

@@ -0,0 +1,8 @@
+export function isAbsoluteUrl(value: string): boolean {
+  try {
+    void new URL(value);
+    return true;
+  } catch {
+    return false;
+  }
+}