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

package/src/runtime/rsc/ClientSlot.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import type React from 'react';
+import { useSlotContext } from './SlotContext';
+
+export function ClientSlot({ args, slot }: { args: unknown[]; slot: string }) {
+  const context = useSlotContext();
+  if (!context) {
+    throw new Error('ClientSlot must be rendered inside CompositeComponent.');
+  }
+
+  const implementation = context.implementations[slot];
+  if (typeof implementation === 'undefined') {
+    if (context.strict) {
+      throw new Error(`Missing RSC slot implementation for "${slot}".`);
+    }
+    return null;
+  }
+
+  if (typeof implementation === 'function') {
+    return <>{implementation(...args)}</>;
+  }
+
+  return <>{implementation as React.ReactNode}</>;
+}

package/src/runtime/rsc/CompositeComponent.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import type React from 'react';
+import { Suspense } from 'react';
+import { SlotProvider } from './SlotContext';
+import {
+  type AnyCompositeComponent,
+  type CompositeComponentProps,
+  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;
+}
+
+function CompositeInner<TComp extends AnyCompositeComponent>({
+  slotProps,
+  src,
+  strict,
+}: {
+  slotProps: Record<string, unknown>;
+  src: TComp;
+  strict?: boolean;
+}) {
+  const getTree = src[RSC_PROXY_GET_TREE];
+  if (!getTree) {
+    throw new Error(
+      'CompositeComponent src must come from createCompositeComponent().',
+    );
+  }
+
+  const tree = selectTreePath(getTree(), src[RSC_PROXY_PATH] || []);
+  return (
+    <SlotProvider implementations={slotProps} strict={strict}>
+      {tree}
+    </SlotProvider>
+  );
+}
+
+export function CompositeComponent<TComp extends AnyCompositeComponent>(
+  props: CompositeComponentProps<TComp>,
+) {
+  const { children, src, strict, ...slotProps } = props;
+  return (
+    <Suspense fallback={<EmptyFallback />}>
+      <CompositeInner
+        slotProps={{ ...slotProps, children }}
+        src={src}
+        strict={strict}
+      />
+    </Suspense>
+  );
+}

package/src/runtime/rsc/ReplayableStream.ts

@@ -0,0 +1,155 @@
+export interface ReplayableStreamOptions {
+  signal?: AbortSignal;
+}
+
+type Waiter = {
+  promise: Promise<void>;
+  resolve: () => void;
+};
+
+export const REPLAYABLE_STREAM_MARKER = Symbol.for(
+  'modern.tanstack.rsc.ReplayableStream',
+);
+
+export class ReplayableStream<T = Uint8Array> {
+  readonly [REPLAYABLE_STREAM_MARKER] = true;
+
+  private chunks: T[] = [];
+  private done = false;
+  private error: unknown;
+  private waiter: Waiter | null = null;
+  private released = false;
+  private reader: ReadableStreamDefaultReader<T> | null = null;
+  private abortListener: (() => void) | null = null;
+
+  constructor(
+    private source: ReadableStream<T>,
+    private options: ReplayableStreamOptions = {},
+  ) {
+    this.start();
+  }
+
+  private start() {
+    const signal = this.options.signal;
+    if (signal?.aborted) {
+      this.release();
+      return;
+    }
+
+    this.abortListener = () => this.release();
+    signal?.addEventListener('abort', this.abortListener, { once: true });
+
+    const reader = this.source.getReader();
+    this.reader = reader;
+
+    const pump = async () => {
+      try {
+        while (!this.released) {
+          const { done, value } = await reader.read();
+          if (done) {
+            break;
+          }
+          this.chunks.push(value);
+          this.notify();
+        }
+      } catch (err) {
+        if (!this.released) {
+          this.error = err;
+        }
+      } finally {
+        this.done = true;
+        this.detachAbortListener();
+        try {
+          reader.releaseLock();
+        } catch {}
+        if (this.reader === reader) {
+          this.reader = null;
+        }
+        this.notify();
+      }
+    };
+
+    void pump();
+  }
+
+  private detachAbortListener() {
+    const signal = this.options.signal;
+    if (signal && this.abortListener) {
+      signal.removeEventListener('abort', this.abortListener);
+    }
+    this.abortListener = null;
+  }
+
+  private notify() {
+    this.waiter?.resolve();
+    this.waiter = null;
+  }
+
+  private wait() {
+    if (this.done || this.released) {
+      return Promise.resolve();
+    }
+    if (!this.waiter) {
+      let resolve!: () => void;
+      const promise = new Promise<void>(res => {
+        resolve = res;
+      });
+      this.waiter = { promise, resolve };
+    }
+    return this.waiter.promise;
+  }
+
+  release() {
+    if (this.released) {
+      return;
+    }
+    this.released = true;
+    this.chunks = [];
+    this.detachAbortListener();
+    try {
+      void this.reader?.cancel(new Error('ReplayableStream released'));
+    } catch {}
+    this.notify();
+  }
+
+  isReleased() {
+    return this.released;
+  }
+
+  createReplayStream(): ReadableStream<T> {
+    if (this.released) {
+      return new ReadableStream<T>({
+        start(controller) {
+          controller.close();
+        },
+      });
+    }
+
+    let index = 0;
+    return new ReadableStream<T>({
+      pull: async controller => {
+        while (true) {
+          if (index < this.chunks.length) {
+            controller.enqueue(this.chunks[index++]);
+            return;
+          }
+
+          if (this.error) {
+            controller.error(this.error);
+            return;
+          }
+
+          if (this.done || this.released) {
+            controller.close();
+            return;
+          }
+
+          await this.wait();
+        }
+      },
+      cancel: () => {
+        // Canceling one replay reader must not cancel the shared upstream stream.
+      },
+    });
+  }
+}

package/src/runtime/rsc/RscNodeRenderer.tsx

@@ -0,0 +1,45 @@
+'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;
+}
+
+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] || [])}</>;
+}
+
+export function RscNodeRenderer({
+  data,
+}: {
+  data: AnyRenderableServerComponent;
+}) {
+  return (
+    <Suspense fallback={<EmptyFallback />}>
+      <RscNodeRenderInner data={data} />
+    </Suspense>
+  );
+}

package/src/runtime/rsc/SlotContext.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import type React from 'react';
+import { createContext, use } from 'react';
+
+export type SlotImplementations = Record<string, unknown>;
+
+const SlotContext = createContext<{
+  implementations: SlotImplementations;
+  strict: boolean;
+} | null>(null);
+
+export function useSlotContext() {
+  return use(SlotContext);
+}
+
+export function SlotProvider({
+  children,
+  implementations,
+  strict,
+}: {
+  children?: React.ReactNode;
+  implementations: SlotImplementations;
+  strict?: boolean;
+}) {
+  return (
+    <SlotContext value={{ implementations, strict: strict === true }}>
+      {children}
+    </SlotContext>
+  );
+}

package/src/runtime/rsc/client.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { createSerializationAdapter } from '@tanstack/react-router';
+import { use } from 'react';
+import { CompositeComponent } from './CompositeComponent';
+import { createRscProxy } from './createRscProxy';
+import type {
+  AnyCompositeComponent,
+  RscSlotUsageEvent,
+  ServerComponentStream,
+} from './symbols';
+
+export type {
+  AnyCompositeComponent,
+  AnyRenderableServerComponent,
+  CompositeComponentProps,
+} from './symbols';
+export { CompositeComponent };
+
+type SerializedRsc = {
+  kind: 'renderable' | 'composite';
+  stream: ReadableStream<Uint8Array>;
+  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) {
+  const streamWrapper: ServerComponentStream = {
+    createReplayStream: () => serialized.stream,
+  };
+
+  return createRscProxy(createTreeGetter(serialized.stream), {
+    renderable: serialized.kind === 'renderable',
+    slotUsagesStream: serialized.slotUsagesStream,
+    stream: streamWrapper,
+  });
+}
+
+const adapter = createSerializationAdapter({
+  key: '$MODERN_TANSTACK_RSC',
+  test: (_value: unknown): _value is never => false,
+  toSerializable: (): never => {
+    throw new Error('TanStack RSC data cannot be serialized on client.');
+  },
+  fromSerializable: (value: SerializedRsc): AnyCompositeComponent => {
+    return createFromFlightStream(value) as AnyCompositeComponent;
+  },
+});
+
+export function getTanstackRscSerializationAdapters() {
+  return [adapter];
+}
+
+export const rscSerializationAdapter = getTanstackRscSerializationAdapters;

package/src/runtime/rsc/createRscProxy.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import { createElement } from 'react';
+import { RscNodeRenderer } from './RscNodeRenderer';
+import {
+  RENDERABLE_RSC,
+  RSC_PROXY_GET_TREE,
+  RSC_PROXY_PATH,
+  RSC_SLOT_USAGES,
+  RSC_SLOT_USAGES_STREAM,
+  type RscSlotUsageEvent,
+  SERVER_COMPONENT_STREAM,
+  type ServerComponentStream,
+} from './symbols';
+
+type CreateProxyOptions = {
+  getTree: () => unknown;
+  path: string[];
+  renderable: boolean;
+  slotUsages?: RscSlotUsageEvent[];
+  slotUsagesStream?: ReadableStream<RscSlotUsageEvent>;
+  stream?: ServerComponentStream;
+};
+
+const UNHANDLED = Symbol('modern.tanstack.rsc.unhandled');
+
+function handleProxyTrap(
+  kind: 'get' | 'has',
+  prop: PropertyKey,
+  options: CreateProxyOptions,
+) {
+  switch (prop) {
+    case '__SEROVAL_STREAM__':
+    case '__SEROVAL_SEQUENCE__':
+    case Symbol.iterator:
+    case Symbol.asyncIterator:
+      return kind === 'get' ? undefined : false;
+    case SERVER_COMPONENT_STREAM:
+      return kind === 'get' ? options.stream : Boolean(options.stream);
+    case RENDERABLE_RSC:
+      return kind === 'get' ? options.renderable : true;
+    case RSC_PROXY_GET_TREE:
+      return kind === 'get' ? options.getTree : true;
+    case RSC_PROXY_PATH:
+      return kind === 'get' ? options.path : true;
+    case RSC_SLOT_USAGES_STREAM:
+      return kind === 'get'
+        ? options.slotUsagesStream
+        : Boolean(options.slotUsagesStream);
+    case RSC_SLOT_USAGES:
+      return kind === 'get' ? options.slotUsages : Boolean(options.slotUsages);
+    case 'then':
+      return kind === 'get' ? undefined : UNHANDLED;
+    case 'toString':
+      return kind === 'get' ? Object.prototype.toString : UNHANDLED;
+    case 'valueOf':
+      return kind === 'get' ? Object.prototype.valueOf : UNHANDLED;
+    case 'constructor':
+      return kind === 'get' ? Object : UNHANDLED;
+    default:
+      return UNHANDLED;
+  }
+}
+
+function createRscProxyInternal(options: CreateProxyOptions): any {
+  const childCache = new Map<string, unknown>();
+  const dataProxy = options.renderable
+    ? createRscProxyInternal({ ...options, renderable: false })
+    : undefined;
+  const target = options.renderable
+    ? createElement(RscNodeRenderer, { data: dataProxy })
+    : {};
+
+  const getChild = (key: string) => {
+    if (!childCache.has(key)) {
+      childCache.set(
+        key,
+        createRscProxyInternal({
+          ...options,
+          path: [...options.path, key],
+        }),
+      );
+    }
+    return childCache.get(key);
+  };
+
+  return new Proxy(target as Record<PropertyKey, unknown>, {
+    get(proxyTarget, prop) {
+      const handled = handleProxyTrap('get', prop, options);
+      if (handled !== UNHANDLED) {
+        return handled;
+      }
+
+      if (options.renderable) {
+        if (prop === 'props') {
+          return proxyTarget.props;
+        }
+        if (prop === 'data') {
+          return dataProxy;
+        }
+        if (prop in proxyTarget) {
+          return proxyTarget[prop];
+        }
+      }
+
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      return getChild(prop);
+    },
+    getOwnPropertyDescriptor(proxyTarget, prop) {
+      return options.renderable
+        ? Object.getOwnPropertyDescriptor(proxyTarget, prop)
+        : undefined;
+    },
+    getPrototypeOf(proxyTarget) {
+      return options.renderable
+        ? Object.getPrototypeOf(proxyTarget)
+        : Object.prototype;
+    },
+    has(proxyTarget, prop) {
+      const handled = handleProxyTrap('has', prop, options);
+      if (handled !== UNHANDLED) {
+        return Boolean(handled);
+      }
+
+      if (options.renderable) {
+        return prop in proxyTarget || typeof prop === 'string';
+      }
+
+      return typeof prop === 'string';
+    },
+    ownKeys(proxyTarget) {
+      return options.renderable ? Reflect.ownKeys(proxyTarget) : [];
+    },
+  });
+}
+
+export function createRscProxy(
+  getTree: () => unknown,
+  options: {
+    renderable?: boolean;
+    slotUsages?: RscSlotUsageEvent[];
+    slotUsagesStream?: ReadableStream<RscSlotUsageEvent>;
+    stream?: ServerComponentStream;
+  } = {},
+) {
+  const slotUsages =
+    process.env.NODE_ENV === 'development' && options.slotUsagesStream
+      ? (options.slotUsages ?? [])
+      : options.slotUsages;
+
+  if (
+    process.env.NODE_ENV === 'development' &&
+    options.slotUsagesStream &&
+    slotUsages
+  ) {
+    void consumeSlotUsages(options.slotUsagesStream, slotUsages);
+  }
+
+  return createRscProxyInternal({
+    getTree,
+    path: [],
+    renderable: options.renderable === true,
+    slotUsages,
+    slotUsagesStream: options.slotUsagesStream,
+    stream: options.stream,
+  });
+}
+
+async function consumeSlotUsages(
+  stream: ReadableStream<RscSlotUsageEvent>,
+  slotUsages: RscSlotUsageEvent[],
+) {
+  try {
+    const reader = stream.getReader();
+    for (;;) {
+      const { value, done } = await reader.read();
+      if (done) {
+        break;
+      }
+      if (value?.slot) {
+        slotUsages.push(value);
+      }
+    }
+  } catch {
+    // Development-only metadata should not affect rendering.
+  }
+}

package/src/runtime/rsc/index.ts

@@ -0,0 +1,10 @@
+export {
+  CompositeComponent,
+  getTanstackRscSerializationAdapters,
+  rscSerializationAdapter,
+} from './client';
+export type {
+  AnyCompositeComponent,
+  AnyRenderableServerComponent,
+  CompositeComponentProps,
+} from './symbols';