@parcel/rsc 2.13.1-canary.3398

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-present Devon Govett
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/client.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { HydrationOptions } from 'react-dom/client';
+export type CallServerCallback = <T>(id: string, args: any[]) => Promise<T>;
+export interface HydrateOptions extends HydrationOptions {
+    handleServerAction?: CallServerCallback;
+    onHmrReload?: () => void;
+}
+export declare function hydrate(options?: HydrateOptions): (value: ReactNode, cb?: () => void) => void;
+export interface RSCRequestInit extends Omit<RequestInit, 'body'> {
+    body?: any;
+}
+export declare function fetchRSC<T>(url: string | URL | Request, options?: RSCRequestInit): Promise<T>;

package/lib/node.d.ts

@@ -0,0 +1,9 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import { Readable } from 'stream';
+import { RSCToHTMLOptions, RSCOptions } from './server';
+export declare function renderRSC(root: any, options?: RSCOptions): Readable;
+export declare function renderHTML(root: any, options?: RSCToHTMLOptions): Promise<Readable>;
+export declare function renderRequest(request: IncomingMessage, response: ServerResponse, root: any, options?: RSCToHTMLOptions): Promise<void>;
+export declare function callAction(request: IncomingMessage, id: string | null | undefined): Promise<{
+    result: any;
+}>;

package/lib/server.d.ts

@@ -0,0 +1,32 @@
+import type { ErrorInfo } from 'react-dom/client';
+import { ComponentType } from 'react' with {
+    env: 'react-client'
+};
+export interface RSCOptions {
+    // environmentName?: string | (() => string),
+    // filterStackFrame?: (url: string, functionName: string) => boolean,
+    identifierPrefix?: string;
+    signal?: AbortSignal;
+    temporaryReferences?: any;
+    onError?: (error: unknown) => void;
+    onPostpone?: (reason: string) => void;
+}
+export declare function renderRSC(root: any, options?: RSCOptions): ReadableStream;
+export interface RSCToHTMLOptions {
+    component?: ComponentType;
+    identifierPrefix?: string;
+    namespaceURI?: string;
+    nonce?: string;
+    progressiveChunkSize?: number;
+    signal?: AbortSignal;
+    temporaryReferences?: any;
+    onError?: (error: unknown, errorInfo?: ErrorInfo) => string | void;
+}
+export declare function renderRSCToHTML(root: any, options?: RSCToHTMLOptions): Promise<ReadableStream>;
+export interface RenderRequestOptions extends RSCToHTMLOptions {
+    headers?: HeadersInit;
+}
+export declare function renderRequest(request: Request, root: any, options?: RenderRequestOptions): Promise<Response>;
+export declare function callAction(request: Request, id: string | null | undefined): Promise<{
+    result: any;
+}>;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@parcel/rsc",
+  "version": "2.13.1-canary.3398+735a635f7",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parcel-bundler/parcel.git"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./client": {
+      "types": "./lib/client.d.ts",
+      "default": "./src/client.tsx"
+    },
+    "./server": {
+      "types": "./lib/server.d.ts",
+      "default": "./src/server.tsx"
+    },
+    "./node": {
+      "types": "./lib/node.d.ts",
+      "default": "./src/node.tsx"
+    }
+  },
+  "dependencies": {
+    "react-server-dom-parcel": "canary",
+    "rsc-html-stream": "^0.0.4"
+  },
+  "devDependencies": {
+    "@types/node": ">= 18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "gitHead": "735a635f7eed538c449f37517b26247e0b19c1a4"
+}

package/src/client.tsx

@@ -0,0 +1,64 @@
+import { ReactNode, startTransition, useInsertionEffect } from 'react';
+import {createFromReadableStream, createFromFetch, encodeReply, setServerCallback, createTemporaryReferenceSet} from 'react-server-dom-parcel/client';
+import {rscStream} from 'rsc-html-stream/client';
+import { hydrateRoot, HydrationOptions, Root } from 'react-dom/client';
+
+// Stream in initial RSC payload embedded in the HTML.
+let initialRSCPayload: Promise<ReactNode>;
+function RSCRoot({value, cb}: {value?: ReactNode, cb?: () => void}) {
+  initialRSCPayload ??= createFromReadableStream<ReactNode>(rscStream);
+  useInsertionEffect(() => {
+    cb?.();
+  });
+  return value === undefined ? initialRSCPayload : value;
+}
+
+export type CallServerCallback = <T>(id: string, args: any[]) => Promise<T>;
+export interface HydrateOptions extends HydrationOptions {
+  handleServerAction?: CallServerCallback,
+  onHmrReload?: () => void
+}
+
+export function hydrate(options?: HydrateOptions): (value: ReactNode, cb?: () => void) => void {
+  if (options?.handleServerAction) {
+    setServerCallback(options.handleServerAction);
+  }
+
+  if (options?.onHmrReload) {
+    window.addEventListener('parcelhmrreload', e => {
+      e.preventDefault();
+      options?.onHmrReload?.();
+    });
+  }
+
+  let root: Root;
+  startTransition(() => {
+    root = hydrateRoot(document, <RSCRoot />, options);
+  });
+
+  return (value: ReactNode, cb?: () => void) => {
+    startTransition(() => {
+      root?.render(<RSCRoot value={value} cb={() => {cb?.(); cb = undefined}} />);
+    });
+  };
+}
+
+export interface RSCRequestInit extends Omit<RequestInit, 'body'> {
+  body?: any
+}
+
+export async function fetchRSC<T>(url: string | URL | Request, options?: RSCRequestInit): Promise<T> {
+  const temporaryReferences = createTemporaryReferenceSet();
+  const response = fetch(url, {
+    ...options,
+    headers: {
+      Accept: 'text/x-component',
+      ...options?.headers,
+    },
+    body: options && 'body' in options 
+      ? await encodeReply(options.body, {temporaryReferences, signal: options?.signal})
+      : undefined,
+  });
+
+  return createFromFetch<T>(response, {temporaryReferences});
+}

package/src/node.tsx

@@ -0,0 +1,48 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import type { ReadableStream as NodeReadableStream } from 'stream/web';
+
+import {Readable} from 'stream';
+import {renderToReadableStream, createTemporaryReferenceSet} from 'react-server-dom-parcel/server.edge';
+import {RSCToHTMLOptions, RSCOptions, renderRSCToHTML as renderRSCToHTMLBase, callAction as callActionBase} from './server';
+
+export function renderRSC(root: any, options?: RSCOptions): Readable {
+  return Readable.fromWeb(renderToReadableStream(root, options) as NodeReadableStream);
+}
+
+export async function renderHTML(root: any, options?: RSCToHTMLOptions): Promise<Readable> {
+  let htmlStream = await renderRSCToHTMLBase(root, options);
+  return Readable.fromWeb(htmlStream as NodeReadableStream);
+}
+
+const temporaryReferencesSymbol = Symbol.for('temporaryReferences')
+
+export async function renderRequest(request: IncomingMessage, response: ServerResponse, root: any, options?: RSCToHTMLOptions): Promise<void> {
+  options = {
+    ...options,
+    temporaryReferences: options?.temporaryReferences ?? (request as any)[temporaryReferencesSymbol]
+  };
+  
+  if (request.headers.accept?.includes('text/html')) {
+    let html = await renderHTML(root, options);
+    response.setHeader('Content-Type', 'text/html');
+    html.pipe(response);
+  } else {
+    response.setHeader('Content-Type', 'text/x-component');
+    renderRSC(root, options).pipe(response);
+  }
+}
+
+export async function callAction(request: IncomingMessage, id: string | null | undefined): Promise<{result: any}> {
+  (request as any)[temporaryReferencesSymbol] ??= createTemporaryReferenceSet();
+
+  let req = new Request('http://localhost' + request.url, {
+    method: 'POST',
+    headers: request.headers as any,
+    body: Readable.toWeb(request) as ReadableStream,
+    // @ts-ignore
+    duplex: 'half'
+  });
+
+  (req as any)[temporaryReferencesSymbol] = (request as any)[temporaryReferencesSymbol];
+  return callActionBase(req, id);
+}

package/src/server.tsx

@@ -0,0 +1,117 @@
+import type { ErrorInfo } from 'react-dom/client';
+
+// Server dependencies.
+import {renderToReadableStream, loadServerAction, decodeReply, decodeAction, createTemporaryReferenceSet} from 'react-server-dom-parcel/server.edge';
+import {injectRSCPayload} from 'rsc-html-stream/server';
+
+// Client dependencies, used for SSR.
+// These must run in the same environment as client components (e.g. same instance of React).
+import {createFromReadableStream} from 'react-server-dom-parcel/client.edge' with {env: 'react-client'};
+import {renderToReadableStream as renderHTMLToReadableStream} from 'react-dom/server.edge' with {env: 'react-client'};
+import {ComponentType, ReactNode} from 'react' with {env: 'react-client'};
+
+export interface RSCOptions {
+  // environmentName?: string | (() => string),
+  // filterStackFrame?: (url: string, functionName: string) => boolean,
+  identifierPrefix?: string,
+  signal?: AbortSignal,
+  temporaryReferences?: any,
+  onError?: (error: unknown) => void,
+  onPostpone?: (reason: string) => void,
+}
+
+export function renderRSC(root: any, options?: RSCOptions): ReadableStream {
+  return renderToReadableStream(root, options);
+}
+
+export interface RSCToHTMLOptions {
+  component?: ComponentType,
+  identifierPrefix?: string;
+  namespaceURI?: string;
+  nonce?: string;
+  progressiveChunkSize?: number;
+  signal?: AbortSignal;
+  temporaryReferences?: any,
+  onError?: (error: unknown, errorInfo?: ErrorInfo) => string | void;
+}
+
+export async function renderRSCToHTML(root: any, options?: RSCToHTMLOptions): Promise<ReadableStream> {
+  let rscStream = renderToReadableStream(root, options);
+
+  // Use client react to render the RSC payload to HTML.
+  let [s1, s2] = rscStream.tee();
+  let data: Promise<ReactNode>;
+  function Content() {
+    // Important: this must be constructed inside a component for preinit scripts to be inserted.
+    data ??= createFromReadableStream<ReactNode>(s1);
+    return data;
+  }
+
+  let htmlStream = await renderHTMLToReadableStream(<Content />, {
+    ...options,
+    bootstrapScriptContent: (options?.component as any)?.bootstrapScript
+  });
+
+  return htmlStream.pipeThrough(injectRSCPayload(s2));
+}
+
+export interface RenderRequestOptions extends RSCToHTMLOptions {
+  headers?: HeadersInit
+}
+
+const temporaryReferencesSymbol = Symbol.for('temporaryReferences')
+
+export async function renderRequest(request: Request, root: any, options?: RenderRequestOptions): Promise<Response> {
+  options = {
+    ...options,
+    temporaryReferences: options?.temporaryReferences ?? (request as any)[temporaryReferencesSymbol]
+  };
+
+  if (request.headers.get('Accept')?.includes('text/html')) {
+    let html = await renderRSCToHTML(root, options);
+    return new Response(html, {
+      headers: {
+        ...options?.headers,
+        'Content-Type': 'text/html'
+      }
+    });
+  } else {
+    let rscStream = renderToReadableStream(root, options);
+    return new Response(rscStream, {
+      headers: {
+        ...options?.headers,
+        'Content-Type': 'text/x-component'
+      }
+    });
+  }
+}
+
+export async function callAction(request: Request, id: string | null | undefined): Promise<{result: any}> {
+  (request as any)[temporaryReferencesSymbol] ??= createTemporaryReferenceSet();
+
+  if (id) {
+    let action = await loadServerAction(id);
+    let body = request.headers.get('content-type')?.includes('multipart/form-data') 
+      ? await request.formData()
+      : await request.text();
+    let args = await decodeReply<any[]>(body, {
+      temporaryReferences: (request as any)[temporaryReferencesSymbol]
+    });
+
+    let result = action.apply(null, args);
+    try {
+      // Wait for any mutations
+      await result;
+    } catch {
+      // Handle the error on the client
+    }
+    return {result};
+  } else {
+    // Form submitted by browser (progressive enhancement).
+    let formData = await request.formData();
+    let action = await decodeAction(formData);
+    // Don't catch error here: this should be handled by the caller (e.g. render an error page).
+    let result = await action();
+    return {result};
+  }
+}

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "useDefineForClassFields": true,
+
+    /* Modules */
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+
+    /* Emit */
+    "noEmit": true,
+    "declaration": true,
+
+    /* Interop Constraints */
+    "isolatedModules": true,
+    "isolatedDeclarations": true,
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Type Checking */
+    "strict": true,
+
+    /* Completeness */
+    "skipLibCheck": true
+  }
+}

package/types.d.ts

@@ -0,0 +1,81 @@
+declare module 'react-server-dom-parcel/client' {
+  type TemporaryReferenceSet = {__ref: true};
+  type ReactCustomFormAction = {
+    name?: string;
+    action?: string;
+    encType?: string;
+    method?: string;
+    target?: string;
+    data?: null | FormData;
+  };
+  type EncodeFormActionCallback = <A>(
+    id: any,
+    args: Promise<A>,
+  ) => ReactCustomFormAction;
+  type Options = {
+    nonce?: string;
+    encodeFormAction?: EncodeFormActionCallback;
+    temporaryReferences?: TemporaryReferenceSet;
+    replayConsoleLogs?: boolean;
+    environmentName?: string;
+  };
+
+  export function createFromFetch<T>(
+    res: Promise<Response>,
+    options?: Options,
+  ): Promise<T>;
+  export function createFromReadableStream<T>(
+    stream: ReadableStream,
+    options?: Options,
+  ): Promise<T>;
+  export function encodeReply(
+    value: any,
+    options?: {
+      temporaryReferences?: TemporaryReferenceSet;
+      signal?: AbortSignal | null | undefined;
+    },
+  ): Promise<string | URLSearchParams | FormData>;
+  export function createTemporaryReferenceSet(): TemporaryReferenceSet;
+
+  type CallServerCallback = <T>(id: string, args: any[]) => Promise<T>;
+  export function setServerCallback(cb: CallServerCallback): void;
+}
+
+declare module 'react-server-dom-parcel/client.edge' {
+  export function createFromReadableStream<T>(
+    stream: ReadableStream,
+  ): Promise<T>;
+}
+
+declare module 'react-server-dom-parcel/server.edge' {
+  type TemporaryReferenceSet = {__ref: true};
+  type Options = {
+    environmentName?: string | (() => string);
+    filterStackFrame?: (url: string, functionName: string) => boolean;
+    identifierPrefix?: string;
+    signal?: AbortSignal;
+    temporaryReferences?: TemporaryReferenceSet;
+    onError?: (error: unknown) => void;
+    onPostpone?: (reason: string) => void;
+  };
+
+  export function renderToReadableStream(
+    value: any,
+    options?: Options,
+  ): ReadableStream;
+  export function loadServerAction(
+    id: string,
+  ): Promise<(...args: any[]) => Promise<any>>;
+  export function decodeReply<T>(
+    body: string | FormData,
+    options?: {temporaryReferences?: TemporaryReferenceSet},
+  ): Promise<T>;
+  export function decodeAction(
+    body: FormData,
+  ): Promise<(...args: any[]) => Promise<any>>;
+  export function createTemporaryReferenceSet(): TemporaryReferenceSet;
+}
+
+declare module 'react-dom/server.edge' {
+  export * from 'react-dom/server';
+}