@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.30 → 3.5.0-ultramodern.32

package/src/runtime/rsc/CompositeComponent.tsx

@@ -1,29 +1,41 @@
 // @effect-diagnostics strictBooleanExpressions:off
 'use client';
 
-import type React from 'react';
 import { Suspense } from 'react';
 import { SlotProvider } from './SlotContext';
+import { EmptyFallback, renderSelectedTree } from './shared';
 import {
   type AnyCompositeComponent,
   type CompositeComponentProps,
   RSC_PROXY_GET_TREE,
-  RSC_PROXY_PATH,
+  SERVER_COMPONENT_STREAM,
 } from './symbols';
+import { createTreeGetterFromFlightStream } from './treeGetter';
 
-function EmptyFallback() {
-  return null;
-}
+const rawServerValueGetters = new WeakMap<object, () => unknown>();
+
+function getRawServerTreeGetter(src: unknown) {
+  if (!src || (typeof src !== 'object' && typeof src !== 'function')) {
+    return;
+  }
+
+  const source = src as {
+    [SERVER_COMPONENT_STREAM]?: {
+      createReplayStream?: () => ReadableStream<Uint8Array>;
+    };
+  };
+  const stream = source[SERVER_COMPONENT_STREAM];
+  if (typeof stream?.createReplayStream !== 'function') {
+    return;
+  }
 
-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];
+  let getTree = rawServerValueGetters.get(src);
+  if (!getTree) {
+    getTree = createTreeGetterFromFlightStream(stream.createReplayStream());
+    rawServerValueGetters.set(src, getTree);
   }
-  return current as React.ReactNode;
+
+  return getTree;
 }
 
 function CompositeInner<TComp extends AnyCompositeComponent>({
@@ -35,14 +47,11 @@ function CompositeInner<TComp extends AnyCompositeComponent>({
   src: TComp;
   strict?: boolean;
 }) {
-  const getTree = src[RSC_PROXY_GET_TREE];
-  if (!getTree) {
-    throw new Error(
+  const tree = renderSelectedTree(src, {
+    getTree: src[RSC_PROXY_GET_TREE] || getRawServerTreeGetter(src),
+    missingTreeError:
       'CompositeComponent src must come from createCompositeComponent().',
-    );
-  }
-
-  const tree = selectTreePath(getTree(), src[RSC_PROXY_PATH] || []);
+  });
   return (
     <SlotProvider implementations={slotProps} strict={strict}>
       {tree}

package/src/runtime/rsc/RscNodeRenderer.tsx

@@ -1,36 +1,18 @@
 // @effect-diagnostics strictBooleanExpressions:off
 'use client';
 
-import type React from 'react';
 import { Suspense } from 'react';
-import {
-  type AnyRenderableServerComponent,
-  RSC_PROXY_GET_TREE,
-  RSC_PROXY_PATH,
-} from './symbols';
-
-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;
-}
+import { EmptyFallback, renderSelectedTree } from './shared';
+import type { AnyRenderableServerComponent } from './symbols';
 
 function RscNodeRenderInner({ data }: { data: AnyRenderableServerComponent }) {
-  const getTree = data[RSC_PROXY_GET_TREE];
-  if (!getTree) {
-    throw new Error('Renderable RSC is missing its decoded tree getter.');
-  }
-
-  return <>{selectTreePath(getTree(), data[RSC_PROXY_PATH] || [])}</>;
+  return (
+    <>
+      {renderSelectedTree(data, {
+        missingTreeError: 'Renderable RSC is missing its decoded tree getter.',
+      })}
+    </>
+  );
 }
 
 export function RscNodeRenderer({

package/src/runtime/rsc/client.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { createSerializationAdapter } from '@tanstack/react-router';
-import { use } from 'react';
 import { CompositeComponent } from './CompositeComponent';
 import { createRscProxy } from './createRscProxy';
+import type { SerializedTanstackRscFlightValue } from './shared';
 import type {
   AnyCompositeComponent,
   RscSlotUsageEvent,
   ServerComponentStream,
 } from './symbols';
+import { createTreeGetterFromFlightStream } from './treeGetter';
 
 export type {
   AnyCompositeComponent,
@@ -23,55 +24,26 @@ type SerializedRsc = {
   slotUsagesStream?: ReadableStream<RscSlotUsageEvent>;
 };
 
-type ModernRscClientRuntime = typeof import('@modern-js/runtime/rsc/client');
-
-let modernRscClientRuntimePromise: Promise<ModernRscClientRuntime> | undefined;
-
-function loadModernRscClientRuntime() {
-  modernRscClientRuntimePromise ??= import(
-    '@modern-js/runtime/rsc/client'
-  ).then(runtime => {
-    runtime.setServerCallback(runtime.callServer);
-    return runtime;
-  });
-  return modernRscClientRuntimePromise;
-}
-
-function createTreeGetter(stream: ReadableStream<Uint8Array>) {
-  let ready = false;
-  let tree: unknown;
-  const treePromise = loadModernRscClientRuntime()
-    .then(runtime =>
-      runtime.createFromReadableStream(stream, {
-        callServer: runtime.callServer,
-      }),
-    )
-    .then(value => {
-      tree = value;
-      ready = true;
-      return value;
-    });
-
-  return () => {
-    if (ready) {
-      return tree;
-    }
-    return use(treePromise);
-  };
-}
-
-function createFromFlightStream(serialized: SerializedRsc) {
+function createFromFlightStream(
+  serialized: SerializedRsc | SerializedTanstackRscFlightValue,
+) {
   const streamWrapper: ServerComponentStream = {
     createReplayStream: () => serialized.stream,
   };
 
-  return createRscProxy(createTreeGetter(serialized.stream), {
+  return createRscProxy(createTreeGetterFromFlightStream(serialized.stream), {
     renderable: serialized.kind === 'renderable',
     slotUsagesStream: serialized.slotUsagesStream,
     stream: streamWrapper,
   });
 }
 
+export function createTanstackRscValueFromFlight(
+  serialized: SerializedTanstackRscFlightValue,
+): AnyCompositeComponent {
+  return createFromFlightStream(serialized) as AnyCompositeComponent;
+}
+
 const adapter = createSerializationAdapter({
   key: '$MODERN_TANSTACK_RSC',
   test: (_value: unknown): _value is never => false,

package/src/runtime/rsc/flightSerialization.ts

@@ -0,0 +1,158 @@
+// @effect-diagnostics asyncFunction:off globalFetch:off processEnv:off strictBooleanExpressions:off
+import {
+  isSerializedTanstackRscFlightValue,
+  type SerializedTanstackRscFlightValue,
+  TANSTACK_RSC_FLIGHT_VALUE,
+} from './shared';
+import {
+  isRenderableServerComponent,
+  isServerComponent,
+  RSC_SLOT_USAGES_STREAM,
+  SERVER_COMPONENT_STREAM,
+} from './symbols';
+
+export function isPlainObject(
+  value: unknown,
+): value is Record<string, unknown> {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+
+export function serializeTanstackRscFlightValues(
+  value: unknown,
+  seen = new WeakMap<object, unknown>(),
+): unknown {
+  if (isServerComponent(value)) {
+    const streamWrapper = value[SERVER_COMPONENT_STREAM];
+    if (!streamWrapper) {
+      throw new Error('Cannot serialize TanStack RSC without a Flight stream.');
+    }
+
+    const kind = isRenderableServerComponent(value)
+      ? 'renderable'
+      : 'composite';
+    const slotUsagesStream =
+      process.env.NODE_ENV === 'development' && kind === 'composite'
+        ? value[RSC_SLOT_USAGES_STREAM]
+        : undefined;
+
+    return {
+      [TANSTACK_RSC_FLIGHT_VALUE]: true,
+      kind,
+      stream: streamWrapper.createReplayStream(),
+      ...(slotUsagesStream ? { slotUsagesStream } : {}),
+    } satisfies SerializedTanstackRscFlightValue;
+  }
+
+  if (!value || typeof value !== 'object') {
+    return value;
+  }
+  if (seen.has(value)) {
+    return seen.get(value);
+  }
+  if (value instanceof Map) {
+    const result = new Map<unknown, unknown>();
+    seen.set(value, result);
+    for (const [key, item] of value) {
+      result.set(
+        serializeTanstackRscFlightValues(key, seen),
+        serializeTanstackRscFlightValues(item, seen),
+      );
+    }
+    return result;
+  }
+  if (value instanceof Set) {
+    const result = new Set<unknown>();
+    seen.set(value, result);
+    for (const item of value) {
+      result.add(serializeTanstackRscFlightValues(item, seen));
+    }
+    return result;
+  }
+  if (Array.isArray(value)) {
+    const result: unknown[] = [];
+    seen.set(value, result);
+    for (const item of value) {
+      result.push(serializeTanstackRscFlightValues(item, seen));
+    }
+    return result;
+  }
+  if (!isPlainObject(value)) {
+    return value;
+  }
+
+  const result: Record<string, unknown> = {};
+  seen.set(value, result);
+  for (const [key, item] of Object.entries(value)) {
+    result[key] = serializeTanstackRscFlightValues(item, seen);
+  }
+  return result;
+}
+
+export async function reviveTanstackRscFlightValues(
+  value: unknown,
+  seen = new WeakMap<object, unknown>(),
+): Promise<unknown> {
+  let reviver:
+    | ((serialized: SerializedTanstackRscFlightValue) => unknown)
+    | undefined;
+
+  const getReviver = async () => {
+    if (!reviver) {
+      const client = await import('./client');
+      reviver = client.createTanstackRscValueFromFlight;
+    }
+    return reviver;
+  };
+
+  const visit = async (current: unknown): Promise<unknown> => {
+    if (isSerializedTanstackRscFlightValue(current)) {
+      return (await getReviver())(current);
+    }
+    if (!current || typeof current !== 'object') {
+      return current;
+    }
+    if (seen.has(current)) {
+      return seen.get(current);
+    }
+    if (current instanceof Map) {
+      const result = new Map<unknown, unknown>();
+      seen.set(current, result);
+      for (const [key, item] of current) {
+        result.set(await visit(key), await visit(item));
+      }
+      return result;
+    }
+    if (current instanceof Set) {
+      const result = new Set<unknown>();
+      seen.set(current, result);
+      for (const item of current) {
+        result.add(await visit(item));
+      }
+      return result;
+    }
+    if (Array.isArray(current)) {
+      const result: unknown[] = [];
+      seen.set(current, result);
+      for (const item of current) {
+        result.push(await visit(item));
+      }
+      return result;
+    }
+    if (!isPlainObject(current)) {
+      return current;
+    }
+
+    const result: Record<string, unknown> = {};
+    seen.set(current, result);
+    for (const [key, item] of Object.entries(current)) {
+      result[key] = await visit(item);
+    }
+    return result;
+  };
+
+  return visit(value);
+}

package/src/runtime/rsc/payloadErrors.ts

@@ -0,0 +1,73 @@
+// @effect-diagnostics asyncFunction:off globalFetch:off processEnv:off strictBooleanExpressions:off
+import type { ServerPayload } from '@modern-js/runtime/context';
+import { isRouteErrorResponse } from '@modern-js/runtime-utils/router';
+
+export function shouldRedactServerError(status = 500) {
+  return (
+    status >= 500 &&
+    process.env.NODE_ENV !== 'development' &&
+    process.env.NODE_ENV !== 'test'
+  );
+}
+
+export 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 } : {}),
+    };
+  }
+
+  if (shouldRedactServerError()) {
+    return {
+      message: 'Unexpected Server Error',
+      stack: undefined,
+      __type: 'Error',
+    };
+  }
+
+  return error;
+}
+
+export function isSerializedNotFound(value: unknown) {
+  return (
+    Boolean(value) &&
+    typeof value === 'object' &&
+    (value as { isNotFound?: unknown }).isNotFound === true
+  );
+}
+
+export function toRouteErrors(payload: ServerPayload) {
+  return payload.errors && typeof payload.errors === 'object'
+    ? (payload.errors as Record<string, unknown>)
+    : {};
+}
+
+export function toRouteLoaderData(payload: ServerPayload) {
+  return payload.loaderData && typeof payload.loaderData === 'object'
+    ? (payload.loaderData as Record<string, unknown>)
+    : {};
+}

package/src/runtime/rsc/payloadFetch.ts

@@ -0,0 +1,97 @@
+// @effect-diagnostics asyncFunction:off globalFetch:off processEnv:off strictBooleanExpressions:off
+import type { ServerPayload } from '@modern-js/runtime/context';
+import { notFound, redirect } from '@tanstack/react-router';
+import { reviveTanstackRscFlightValues } from './flightSerialization';
+
+type PayloadDecoder = (stream: ReadableStream<Uint8Array>) => Promise<unknown>;
+
+export const payloadFetchCache = new Map<string, Promise<ServerPayload>>();
+let payloadDecoder: PayloadDecoder | undefined;
+
+export async function decodePayload(stream: ReadableStream<Uint8Array>) {
+  if (payloadDecoder) {
+    return reviveTanstackRscFlightValues(await payloadDecoder(stream));
+  }
+
+  const runtime = await import('@modern-js/runtime/rsc/client');
+  return reviveTanstackRscFlightValues(
+    await runtime.createFromReadableStream(stream),
+  );
+}
+
+export function isServerPayload(value: unknown): value is ServerPayload {
+  return (
+    Boolean(value) &&
+    typeof value === 'object' &&
+    (value as ServerPayload).type === 'render' &&
+    Array.isArray((value as ServerPayload).routes)
+  );
+}
+
+export function createPayloadFetchKey(request: Request) {
+  return JSON.stringify([
+    request.url,
+    [...request.headers.entries()].sort(([left], [right]) =>
+      left.localeCompare(right),
+    ),
+  ]);
+}
+
+export function isAbsoluteUrl(value: string) {
+  try {
+    void new URL(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export 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({
+        headers: response.headers,
+        href: redirectLocation,
+        statusCode: response.status,
+      });
+    }
+    throw redirect({
+      headers: response.headers,
+      statusCode: response.status,
+      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 __setTanstackRscPayloadDecoderForTests(
+  decoder?: PayloadDecoder,
+) {
+  payloadDecoder = decoder;
+  payloadFetchCache.clear();
+}