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

package/src/runtime/rsc/payloadRouter.ts

@@ -0,0 +1,318 @@
+import type { PayloadRoute, ServerPayload } from '@modern-js/runtime/context';
+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;
+  };
+};
+
+type LoadRouteDataOptions = {
+  hasClientLoader?: boolean;
+  loadClientData: () => Promise<unknown>;
+  request: Request;
+  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,
+  };
+}
+
+export function createTanstackRscServerPayload(
+  router: TanstackPayloadRouterLike,
+  options: {
+    omitClientLoaderData?: boolean;
+  } = {},
+): ServerPayload {
+  const matches = Array.isArray(router.state?.matches)
+    ? (router.state.matches as RouterMatchLike[])
+    : [];
+  const routes: PayloadRoute[] = [];
+  const loaderData: Record<string, unknown> = {};
+  const errors: Record<string, unknown> = {};
+
+  for (const match of matches) {
+    const payloadRoute = toPayloadRoute(match);
+    if (!payloadRoute) {
+      continue;
+    }
+
+    routes.push(payloadRoute);
+
+    if (
+      'loaderData' in match &&
+      typeof match.loaderData !== 'undefined' &&
+      !(options.omitClientLoaderData && payloadRoute.hasClientLoader)
+    ) {
+      loaderData[payloadRoute.id] = match.loaderData;
+    }
+
+    if (typeof match.error !== 'undefined') {
+      errors[payloadRoute.id] = match.error;
+    }
+  }
+
+  return {
+    type: 'render',
+    actionData: null,
+    errors: Object.keys(errors).length > 0 ? errors : null,
+    loaderData,
+    location: router.state?.location as ServerPayload['location'],
+    routes,
+  };
+}
+
+export function handleTanstackRscRedirect(
+  headers: Headers,
+  basename: string,
+  status: number,
+): Response {
+  const newHeaders = new Headers(headers);
+  let redirectUrl = headers.get('Location') || '/';
+
+  if (basename !== '/') {
+    redirectUrl = redirectUrl.replace(basename, '') || '/';
+  }
+
+  newHeaders.set('X-Modernjs-Redirect', redirectUrl);
+  newHeaders.set('X-Modernjs-BaseUrl', basename);
+  newHeaders.delete('Location');
+
+  return new Response(null, {
+    headers: newHeaders,
+    status,
+  });
+}
+
+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);
+  if (!payloadPromise) {
+    payloadPromise = fetchTanstackRscPayload(request).finally(() => {
+      payloadFetchCache.delete(key);
+    });
+    payloadFetchCache.set(key, payloadPromise);
+  }
+  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,
+  request,
+  routeId,
+}: LoadRouteDataOptions) {
+  if (hasClientLoader) {
+    return loadClientData();
+  }
+
+  if (!routeId) {
+    return loadClientData();
+  }
+
+  const payload = await loadTanstackRscPayload(request);
+  const errors = toRouteErrors(payload);
+  const routeError = errors[routeId];
+  if (typeof routeError !== 'undefined') {
+    if (isSerializedNotFound(routeError)) {
+      throw notFound({
+        ...(routeError as Record<string, unknown>),
+        routeId,
+      });
+    }
+    throw routeError;
+  }
+
+  const loaderData = toRouteLoaderData(payload);
+  if (routeId in loaderData) {
+    return loaderData[routeId];
+  }
+
+  const payloadRoute = payload.routes.find(route => route.id === routeId);
+  if (payloadRoute && payloadRoute.hasClientLoader) {
+    return loadClientData();
+  }
+
+  return undefined;
+}
+
+export function __setTanstackRscPayloadDecoderForTests(
+  decoder?: PayloadDecoder,
+) {
+  payloadDecoder = decoder;
+  payloadFetchCache.clear();
+}

package/src/runtime/rsc/server.tsx

@@ -0,0 +1,303 @@
+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 { ClientSlot } from './ClientSlot';
+import { createRscProxy } from './createRscProxy';
+import { ReplayableStream } from './ReplayableStream';
+import { sanitizeSlotArgs } from './slotUsageSanitizer';
+import {
+  type AnyCompositeComponent,
+  type AnyRenderableServerComponent,
+  isRenderableServerComponent,
+  isServerComponent,
+  RSC_SLOT_USAGES_STREAM,
+  type RscSlotUsageEvent,
+  SERVER_COMPONENT_STREAM,
+  type ServerComponentStream,
+} from './symbols';
+
+export { CompositeComponent } from './CompositeComponent';
+export type {
+  AnyCompositeComponent,
+  AnyRenderableServerComponent,
+  CompositeComponentProps,
+} from './symbols';
+
+type SlotEmitter<T> = {
+  close: () => void;
+  emit: (value: T) => void;
+  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;
+}) {
+  const cache = new Map<string, (...args: unknown[]) => React.ReactNode>();
+  return new Proxy({} as Record<string, unknown>, {
+    get(_target, prop) {
+      if (prop === 'then' || typeof prop !== 'string') {
+        return undefined;
+      }
+
+      if (prop === 'children') {
+        options?.onSlotCall?.('children', []);
+        return createElement(ClientSlot, { args: [], slot: 'children' });
+      }
+
+      if (!cache.has(prop)) {
+        cache.set(prop, (...args: unknown[]) => {
+          options?.onSlotCall?.(prop, args);
+          return createElement(ClientSlot, { args, slot: prop });
+        });
+      }
+      return cache.get(prop);
+    },
+  });
+}
+
+function toReplayableFlightStream(
+  node: React.ReactElement,
+  handlers?: {
+    onCancel?: () => void;
+    onDone?: () => void;
+    onError?: () => void;
+  },
+) {
+  const flightStream = renderRsc({
+    element: node,
+  }) as ReadableStream<Uint8Array>;
+  return new ReplayableStream(
+    handlers ? wrapReadableStream(flightStream, handlers) : flightStream,
+  );
+}
+
+export async function renderServerComponent<TNode extends React.ReactNode>(
+  node: TNode,
+): Promise<TNode & AnyRenderableServerComponent<TNode>> {
+  const stream = toReplayableFlightStream(<>{node}</>);
+  const streamWrapper: ServerComponentStream = {
+    createReplayStream: () => stream.createReplayStream(),
+  };
+
+  return createRscProxy(createTreeGetter(streamWrapper), {
+    renderable: true,
+    stream: streamWrapper,
+  }) as TNode & AnyRenderableServerComponent<TNode>;
+}
+
+export async function createCompositeComponent<
+  TProps extends object = Record<string, unknown>,
+  TReturn = React.ReactNode,
+>(
+  component: (props: TProps) => React.ReactNode | Promise<React.ReactNode>,
+): Promise<AnyCompositeComponent<TProps, TReturn>> {
+  const slotUsagesEmitter =
+    process.env.NODE_ENV === 'development'
+      ? createReadableStreamEmitter<RscSlotUsageEvent>()
+      : undefined;
+
+  const slotProxy = createSlotProxy({
+    onSlotCall: slotUsagesEmitter
+      ? (slot, args) => {
+          const sanitizedArgs = sanitizeSlotArgs(args);
+          slotUsagesEmitter.emit({
+            slot,
+            ...(sanitizedArgs.length ? { args: sanitizedArgs } : {}),
+          });
+        }
+      : undefined,
+  }) as TProps;
+
+  async function ServerComponentWrapper() {
+    return component(slotProxy);
+  }
+
+  const flightStream = toReplayableFlightStream(
+    createElement(ServerComponentWrapper as React.FC),
+    slotUsagesEmitter
+      ? {
+          onCancel: slotUsagesEmitter.close,
+          onDone: slotUsagesEmitter.close,
+          onError: slotUsagesEmitter.close,
+        }
+      : undefined,
+  );
+  const streamWrapper: ServerComponentStream = {
+    createReplayStream: () => flightStream.createReplayStream(),
+  };
+
+  return createRscProxy(createTreeGetter(streamWrapper), {
+    renderable: false,
+    slotUsagesStream: slotUsagesEmitter?.stream,
+    stream: streamWrapper,
+  }) as AnyCompositeComponent<TProps, TReturn>;
+}
+
+type SerializedRsc = {
+  kind: 'renderable' | 'composite';
+  stream: RawStream;
+  slotUsagesStream?: ReadableStream<RscSlotUsageEvent>;
+};
+
+const adapter = createSerializationAdapter({
+  key: '$MODERN_TANSTACK_RSC',
+  test: isServerComponent,
+  toSerializable: (component): SerializedRsc => {
+    const streamWrapper = component[SERVER_COMPONENT_STREAM];
+    if (!streamWrapper) {
+      throw new Error('Cannot serialize TanStack RSC without a Flight stream.');
+    }
+
+    const kind = isRenderableServerComponent(component)
+      ? 'renderable'
+      : 'composite';
+    const slotUsagesStream =
+      process.env.NODE_ENV === 'development' && kind === 'composite'
+        ? component[RSC_SLOT_USAGES_STREAM]
+        : undefined;
+
+    return {
+      kind,
+      stream: new RawStream(streamWrapper.createReplayStream(), {
+        hint: 'text',
+      }),
+      ...(slotUsagesStream ? { slotUsagesStream } : {}),
+    };
+  },
+  fromSerializable: (): never => {
+    throw new Error('TanStack RSC data should not be deserialized on server.');
+  },
+});
+
+export function getTanstackRscSerializationAdapters() {
+  return [adapter];
+}
+
+export const rscSerializationAdapter = getTanstackRscSerializationAdapters;
+
+function createReadableStreamEmitter<T>(): SlotEmitter<T> {
+  let closed = false;
+  const queue: T[] = [];
+  let controller: ReadableStreamDefaultController<T> | null = null;
+
+  const stream = new ReadableStream<T>({
+    start(ctrl) {
+      controller = ctrl;
+      for (const value of queue) {
+        ctrl.enqueue(value);
+      }
+      queue.length = 0;
+      if (closed) {
+        ctrl.close();
+      }
+    },
+    cancel() {
+      closed = true;
+      controller = null;
+      queue.length = 0;
+    },
+  });
+
+  const emit = (value: T) => {
+    if (closed) {
+      return;
+    }
+    if (!controller) {
+      queue.push(value);
+      return;
+    }
+    try {
+      controller.enqueue(value);
+    } catch {}
+  };
+
+  const close = () => {
+    if (closed) {
+      return;
+    }
+    closed = true;
+    try {
+      controller?.close();
+    } catch {}
+    controller = null;
+  };
+
+  return { close, emit, stream };
+}
+
+function wrapReadableStream<T>(
+  source: ReadableStream<T>,
+  handlers: {
+    onCancel?: () => void;
+    onDone?: () => void;
+    onError?: () => void;
+  },
+) {
+  const reader = source.getReader();
+  let finished = false;
+
+  const finish = (kind: 'cancel' | 'done' | 'error') => {
+    if (finished) {
+      return;
+    }
+    finished = true;
+    if (kind === 'cancel') {
+      handlers.onCancel?.();
+    } else if (kind === 'error') {
+      handlers.onError?.();
+    } else {
+      handlers.onDone?.();
+    }
+    try {
+      reader.releaseLock();
+    } catch {}
+  };
+
+  return new ReadableStream<T>({
+    async pull(controller) {
+      try {
+        const { done, value } = await reader.read();
+        if (done) {
+          controller.close();
+          finish('done');
+          return;
+        }
+        controller.enqueue(value);
+      } catch (err) {
+        try {
+          controller.error(err);
+        } catch {}
+        finish('error');
+      }
+    },
+    async cancel(reason) {
+      try {
+        await reader.cancel(reason);
+      } catch {}
+      finish('cancel');
+    },
+  });
+}

package/src/runtime/rsc/slotUsageSanitizer.ts

@@ -0,0 +1,76 @@
+import { isValidElement } from 'react';
+import type { SerializableSlotArg } from './symbols';
+
+const REACT_ELEMENT_TYPE = Symbol.for('react.element');
+const REACT_PORTAL_TYPE = Symbol.for('react.portal');
+const REACT_TRANSITIONAL_ELEMENT_TYPE = Symbol.for(
+  'react.transitional.element',
+);
+
+function isReactElementLike(value: unknown) {
+  if (!value || (typeof value !== 'object' && typeof value !== 'function')) {
+    return false;
+  }
+
+  if (isValidElement(value)) {
+    return true;
+  }
+
+  const type = (value as { $$typeof?: unknown }).$$typeof;
+  return (
+    type === REACT_ELEMENT_TYPE ||
+    type === REACT_TRANSITIONAL_ELEMENT_TYPE ||
+    type === REACT_PORTAL_TYPE
+  );
+}
+
+function sanitizeSlotArg(
+  value: unknown,
+  seen: WeakSet<object>,
+): SerializableSlotArg {
+  if (isReactElementLike(value)) {
+    return 'React element';
+  }
+
+  if (value === null || value === undefined) {
+    return value;
+  }
+
+  if (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    typeof value === 'bigint'
+  ) {
+    return value;
+  }
+
+  if (typeof value !== 'object' && typeof value !== 'function') {
+    return String(value);
+  }
+
+  if (seen.has(value)) {
+    return '[Circular]';
+  }
+  seen.add(value);
+
+  if (Array.isArray(value)) {
+    return value.map(item => sanitizeSlotArg(item, seen));
+  }
+
+  const proto = Object.getPrototypeOf(value);
+  if (proto === Object.prototype || proto === null) {
+    const out: Record<string, SerializableSlotArg> = {};
+    for (const [key, item] of Object.entries(value)) {
+      out[key] = sanitizeSlotArg(item, seen);
+    }
+    return out;
+  }
+
+  return String(value);
+}
+
+export function sanitizeSlotArgs(args: unknown[]) {
+  const seen = new WeakSet<object>();
+  return args.map(arg => sanitizeSlotArg(arg, seen));
+}