@parcel/rsc 3.0.0-alpha.0 → 3.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/rsc",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -14,7 +14,10 @@
     "url": "https://github.com/parcel-bundler/parcel.git"
   },
   "sideEffects": false,
-  "files": ["lib", "src"],
+  "files": [
+    "lib",
+    "src"
+  ],
   "exports": {
     ".": {
       "types": "./src/ssg.d.ts"
@@ -53,4 +56,4 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   }
-}
+}

package/src/client.tsx

@@ -1,6 +1,12 @@
 /* @jsxRuntime automatic */
 import {ReactNode, startTransition, useInsertionEffect} from 'react';
-import {createFromReadableStream, createFromFetch, encodeReply, setServerCallback as setReactServerCallback, createTemporaryReferenceSet} from 'react-server-dom-parcel/client';
+import {
+  createFromReadableStream,
+  createFromFetch,
+  encodeReply,
+  setServerCallback as setReactServerCallback,
+  createTemporaryReferenceSet,
+} from 'react-server-dom-parcel/client';
 import {rscStream} from 'rsc-html-stream/client';
 import {hydrateRoot, HydrationOptions, Root} from 'react-dom/client';
 
@@ -11,7 +17,7 @@ export function setServerCallback(cb: CallServerCallback): void {
 
 // Stream in initial RSC payload embedded in the HTML.
 let initialRSCPayload: Promise<ReactNode>;
-function RSCRoot({value, cb}: {value?: ReactNode, cb?: () => void}) {
+function RSCRoot({value, cb}: {value?: ReactNode; cb?: () => void}) {
   initialRSCPayload ??= createFromReadableStream<ReactNode>(rscStream);
   useInsertionEffect(() => {
     cb?.();
@@ -20,11 +26,13 @@ function RSCRoot({value, cb}: {value?: ReactNode, cb?: () => void}) {
 }
 
 export interface HydrateOptions extends HydrationOptions {
-  callServer?: CallServerCallback,
-  onHmrReload?: () => void
+  callServer?: CallServerCallback;
+  onHmrReload?: () => void;
 }
 
-export function hydrate(options?: HydrateOptions): (value: ReactNode, cb?: () => void) => void {
+export function hydrate(
+  options?: HydrateOptions,
+): (value: ReactNode, cb?: () => void) => void {
   if (options?.callServer) {
     setServerCallback(options.callServer);
   }
@@ -43,16 +51,27 @@ export function hydrate(options?: HydrateOptions): (value: ReactNode, cb?: () =>
 
   return (value: ReactNode, cb?: () => void) => {
     startTransition(() => {
-      root?.render(<RSCRoot value={value} cb={() => {cb?.(); cb = undefined}} />);
+      root?.render(
+        <RSCRoot
+          value={value}
+          cb={() => {
+            cb?.();
+            cb = undefined;
+          }}
+        />,
+      );
     });
   };
 }
 
 export interface RSCRequestInit extends Omit<RequestInit, 'body'> {
-  body?: any
+  body?: any;
 }
 
-export async function fetchRSC<T>(url: string | URL | Request, options?: RSCRequestInit): Promise<T> {
+export async function fetchRSC<T>(
+  url: string | URL | Request,
+  options?: RSCRequestInit,
+): Promise<T> {
   const temporaryReferences = createTemporaryReferenceSet();
   const response = fetch(url, {
     ...options,
@@ -60,9 +79,13 @@ export async function fetchRSC<T>(url: string | URL | Request, options?: RSCRequ
       Accept: 'text/x-component',
       ...options?.headers,
     },
-    body: options && 'body' in options 
-      ? await encodeReply(options.body, {temporaryReferences, signal: options?.signal})
-      : undefined,
+    body:
+      options && 'body' in options
+        ? await encodeReply(options.body, {
+            temporaryReferences,
+            signal: options?.signal,
+          })
+        : undefined,
   });
 
   return createFromFetch<T>(response, {temporaryReferences});

package/src/node.tsx

@@ -1,17 +1,31 @@
 /* @jsxRuntime automatic */
-import type { IncomingMessage, ServerResponse } from 'http';
-import type { ReadableStream as NodeReadableStream } from 'stream/web';
-import type { ReactNode } from 'react';
+import type {IncomingMessage, ServerResponse} from 'http';
+import type {ReadableStream as NodeReadableStream} from 'stream/web';
+import type {ReactNode} from 'react';
 
 import {Readable} from 'stream';
-import {renderToReadableStream, createTemporaryReferenceSet} from 'react-server-dom-parcel/server.edge';
-import {RSCToHTMLOptions, RSCOptions, renderHTML as renderHTMLBase, callAction as callActionBase, renderDevError} from './server';
+import {
+  renderToReadableStream,
+  createTemporaryReferenceSet,
+} from 'react-server-dom-parcel/server.edge';
+import {
+  RSCToHTMLOptions,
+  RSCOptions,
+  renderHTML as renderHTMLBase,
+  callAction as callActionBase,
+  renderDevError,
+} from './server';
 
 export function renderRSC(root: any, options?: RSCOptions): Readable {
-  return Readable.fromWeb(renderToReadableStream(root, options) as NodeReadableStream);
+  return Readable.fromWeb(
+    renderToReadableStream(root, options) as NodeReadableStream,
+  );
 }
 
-export async function renderHTML(root: any, options?: RSCToHTMLOptions): Promise<Readable> {
+export async function renderHTML(
+  root: any,
+  options?: RSCToHTMLOptions,
+): Promise<Readable> {
   let htmlStream = await renderHTMLBase(root, options);
   return Readable.fromWeb(htmlStream as NodeReadableStream);
 }
@@ -19,15 +33,22 @@ export async function renderHTML(root: any, options?: RSCToHTMLOptions): Promise
 const temporaryReferencesSymbol = Symbol.for('temporaryReferences');
 
 export interface RenderRequestOptions extends RSCToHTMLOptions {
-  renderError?: (err: Error) => ReactNode
+  renderError?: (err: Error) => ReactNode;
 }
 
-export async function renderRequest(request: IncomingMessage, response: ServerResponse, root: any, options?: RenderRequestOptions): Promise<void> {
+export async function renderRequest(
+  request: IncomingMessage,
+  response: ServerResponse,
+  root: any,
+  options?: RenderRequestOptions,
+): Promise<void> {
   options = {
     ...options,
-    temporaryReferences: options?.temporaryReferences ?? (request as any)[temporaryReferencesSymbol]
+    temporaryReferences:
+      options?.temporaryReferences ??
+      (request as any)[temporaryReferencesSymbol],
   };
-  
+
   if (request.headers.accept?.includes('text/html')) {
     try {
       let html = await renderHTML(root, options);
@@ -38,7 +59,7 @@ export async function renderRequest(request: IncomingMessage, response: ServerRe
       let error = err instanceof Error ? err : new Error(String(err));
       let renderedError;
       try {
-        renderedError = options?.renderError 
+        renderedError = options?.renderError
           ? await renderHTMLBase(options.renderError(error), options)
           : await renderDevError(error, options);
       } catch {
@@ -56,7 +77,10 @@ export async function renderRequest(request: IncomingMessage, response: ServerRe
   }
 }
 
-export async function callAction(request: IncomingMessage, id: string | null | undefined): Promise<{result: any}> {
+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, {
@@ -64,9 +88,11 @@ export async function callAction(request: IncomingMessage, id: string | null | u
     headers: request.headers as any,
     body: Readable.toWeb(request) as ReadableStream,
     // @ts-ignore
-    duplex: 'half'
+    duplex: 'half',
   });
 
-  (req as any)[temporaryReferencesSymbol] = (request as any)[temporaryReferencesSymbol];
+  (req as any)[temporaryReferencesSymbol] = (request as any)[
+    temporaryReferencesSymbol
+  ];
   return callActionBase(req, id);
 }

package/src/runtime-helpers.js

@@ -1,12 +1,10 @@
-/* eslint-env browser */
-/* eslint-disable react/display-name */
-
 'use parcel-rsc-runtime';
 
 import {createElement, Fragment} from 'react';
 
 export function stylesheetResource(href) {
   return createElement('link', {
+    key: href,
     rel: 'stylesheet',
     href,
     precedence: 'default',
@@ -14,16 +12,16 @@ export function stylesheetResource(href) {
 }
 
 export function modulePreloadResource(href) {
-  return createElement('link', {rel: 'modulepreload', href});
+  return createElement('link', {key: href, rel: 'modulepreload', href});
 }
 
 export function scriptPreloadResource(href) {
-  return createElement('link', {rel: 'preload', as: 'script', href});
+  return createElement('link', {key: href, rel: 'preload', as: 'script', href});
 }
 
 export function wrapClientReferenceWithResources(Reference, resources) {
   return props =>
-    createElement(Fragment, null, ...resources, createElement(Reference, props));
+    createElement(Fragment, null, resources, createElement(Reference, props));
 }
 
 export function createResourcesProxy(
@@ -93,7 +91,7 @@ function createResourcesValueProxy(value, resources, bootstrapScript) {
       apply(target, thisArg, args) {
         let result = Reflect.apply(target, thisArg, args);
         return isReactComponent
-          ? createElement(Fragment, null, ...resources, result)
+          ? createElement(Fragment, null, resources, result)
           : result;
       },
     });

package/src/server.tsx

@@ -1,24 +1,34 @@
 /* @jsxRuntime automatic */
-import type { ErrorInfo } from 'react-dom/client';
+import type {ErrorInfo} from 'react-dom/client';
 
 // Server dependencies.
-import {renderToReadableStream, loadServerAction, decodeReply, decodeAction, createTemporaryReferenceSet} from 'react-server-dom-parcel/server.edge';
+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 {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,
+  identifierPrefix?: string;
+  signal?: AbortSignal;
+  temporaryReferences?: any;
+  onError?: (error: unknown) => void;
+  onPostpone?: (reason: string) => void;
 }
 
 export function renderRSC(root: any, options?: RSCOptions): ReadableStream {
@@ -26,17 +36,20 @@ export function renderRSC(root: any, options?: RSCOptions): ReadableStream {
 }
 
 export interface RSCToHTMLOptions {
-  component?: ComponentType,
+  component?: ComponentType;
   identifierPrefix?: string;
   namespaceURI?: string;
   nonce?: string;
   progressiveChunkSize?: number;
   signal?: AbortSignal;
-  temporaryReferences?: any,
+  temporaryReferences?: any;
   onError?: (error: unknown, errorInfo?: ErrorInfo) => string | void;
 }
 
-export async function renderHTML(root: any, options?: RSCToHTMLOptions): Promise<ReadableStream> {
+export async function renderHTML(
+  root: any,
+  options?: RSCToHTMLOptions,
+): Promise<ReadableStream> {
   let rscStream = renderToReadableStream(root, options);
 
   // Use client react to render the RSC payload to HTML.
@@ -57,16 +70,22 @@ export async function renderHTML(root: any, options?: RSCToHTMLOptions): Promise
 }
 
 export interface RenderRequestOptions extends RSCToHTMLOptions {
-  headers?: HeadersInit,
-  renderError?: (err: Error) => ReactNode
+  headers?: HeadersInit;
+  renderError?: (err: Error) => ReactNode;
 }
 
-const temporaryReferencesSymbol = Symbol.for('temporaryReferences')
+const temporaryReferencesSymbol = Symbol.for('temporaryReferences');
 
-export async function renderRequest(request: Request, root: any, options?: RenderRequestOptions): Promise<Response> {
+export async function renderRequest(
+  request: Request,
+  root: any,
+  options?: RenderRequestOptions,
+): Promise<Response> {
   options = {
     ...options,
-    temporaryReferences: options?.temporaryReferences ?? (request as any)[temporaryReferencesSymbol]
+    temporaryReferences:
+      options?.temporaryReferences ??
+      (request as any)[temporaryReferencesSymbol],
   };
 
   if (request.headers.get('Accept')?.includes('text/html')) {
@@ -75,14 +94,14 @@ export async function renderRequest(request: Request, root: any, options?: Rende
       return new Response(html, {
         headers: {
           ...options?.headers,
-          'Content-Type': 'text/html'
-        }
+          'Content-Type': 'text/html',
+        },
       });
     } catch (err) {
       let error = err instanceof Error ? err : new Error(String(err));
       let res;
       try {
-        res = options?.renderError 
+        res = options?.renderError
           ? await renderHTML(options.renderError(error), options)
           : await renderDevError(error, options);
       } catch {
@@ -92,8 +111,8 @@ export async function renderRequest(request: Request, root: any, options?: Rende
         status: 500,
         headers: {
           ...options?.headers,
-          'Content-Type': 'text/html'
-        }
+          'Content-Type': 'text/html',
+        },
       });
     }
   } else {
@@ -101,22 +120,27 @@ export async function renderRequest(request: Request, root: any, options?: Rende
     return new Response(rscStream, {
       headers: {
         ...options?.headers,
-        'Content-Type': 'text/x-component'
-      }
+        'Content-Type': 'text/x-component',
+      },
     });
   }
 }
 
-export async function callAction(request: Request, id: string | null | undefined): Promise<{result: any}> {
+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') 
+    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]
+      temporaryReferences: (request as any)[temporaryReferencesSymbol],
     });
 
     let result = action.apply(null, args);
@@ -137,7 +161,10 @@ export async function callAction(request: Request, id: string | null | undefined
   }
 }
 
-export async function renderDevError(error: Error, options: RSCToHTMLOptions): Promise<ReadableStream | string> {
+export async function renderDevError(
+  error: Error,
+  options: RSCToHTMLOptions,
+): Promise<ReadableStream | string> {
   if (process.env.NODE_ENV !== 'production') {
     let content = (
       <html>
@@ -163,8 +190,8 @@ export async function renderDevError(error: Error, options: RSCToHTMLOptions): P
     return await renderHTML(content, {
       ...options,
       component: {
-        bootstrapScript
-      } as any
+        bootstrapScript,
+      } as any,
     });
   } else {
     return '<h1>Something went wrong!</h1>';