Set up FB integration with React Flight Server

Author: imdreamrunner

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-fb.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-flight-server-fb';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+export * from 'react-client/src/ReactClientDebugConfigBrowser';
+export * from 'react-flight-server-fb/src/client/ReactFlightClientConfigBundlerFB';
+export * from 'react-flight-server-fb/src/client/ReactFlightClientConfigTargetFBBrowser';
+export * from 'react-flight-server-fb/src/client/ReactFlightClientConfigDOMFB';
+export const usedWithSSR = false;

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-fb.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {default as rendererVersion} from 'shared/ReactVersion';
+export const rendererPackageName = 'react-flight-server-fb';
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+export * from 'react-client/src/ReactClientDebugConfigNode';
+export * from 'react-flight-server-fb/src/client/ReactFlightClientConfigBundlerFB';
+export * from 'react-flight-server-fb/src/client/ReactFlightClientConfigTargetFBBrowser';
+export * from 'react-flight-server-fb/src/client/ReactFlightClientConfigDOMFB';
+export const usedWithSSR = false;

packages/react-flight-server-fb/README.md

@@ -0,0 +1,5 @@
+# react-flight-server-fb
+
+React Flight bindings for DOM using Meta's internal bundler.
+
+**Use it at your own risk.**

packages/react-flight-server-fb/ReactFlightClient.js.flow

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+type TemporaryReferenceSet = mixed;
+
+type ReactServerValue = mixed;
+
+type CallServerCallback = <A, T>(string, args: A) => Promise<T>;
+
+type FindSourceMapURLCallback = (
+  fileName: string,
+  environment: string,
+) => ?string;
+
+type Options = {
+  callServer?: CallServerCallback,
+  debugChannel?: {writable?: WritableStream, readable?: ReadableStream, ...},
+  temporaryReferences?: TemporaryReferenceSet,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
+  environmentName?: string,
+  startTime?: number,
+  endTime?: number,
+};
+
+declare export function createFromFetch<T>(
+  promiseForResponse: Promise<Response>,
+  options?: Options,
+): Promise<T>;
+
+declare export function createFromReadableStream<T>(
+  stream: ReadableStream,
+  options?: Options,
+): Promise<T>;
+
+declare export function createServerReference<A: Iterable<any>, T>(
+  id: string,
+  callServer: CallServerCallback,
+  encodeFormAction?: mixed,
+  findSourceMapURL?: FindSourceMapURLCallback,
+  functionName?: string,
+): (...A) => Promise<T>;
+
+declare export function createTemporaryReferenceSet(): TemporaryReferenceSet;
+
+declare export function encodeReply(
+  value: ReactServerValue,
+  options?: {temporaryReferences?: TemporaryReferenceSet, signal?: AbortSignal},
+): Promise<string | URLSearchParams | FormData>;
+
+declare export function registerServerReference<T: Function>(
+  reference: T,
+  id: string,
+): T;

packages/react-flight-server-fb/ReactFlightServer.js.flow

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Readable, Writable, Duplex} from 'stream';
+
+type TemporaryReferenceSet = mixed;
+
+type ReactClientValue = mixed;
+
+type ClientReference<T> = {
+  $$typeof: symbol,
+  $$id: string,
+  $$hblp: mixed,
+};
+
+type Options = {
+  debugChannel?: Readable | Writable | Duplex | WebSocket,
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+};
+
+type PipeableStream = {
+  abort(reason: mixed): void,
+  pipe<T: Writable>(destination: T): T,
+};
+
+type PrerenderOptions = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+  signal?: AbortSignal,
+  startTime?: number,
+};
+
+declare export function renderToPipeableStream(
+  model: ReactClientValue,
+  options?: Options,
+): PipeableStream;
+
+declare export function renderToString(
+  model: ReactClientValue,
+  options?: PrerenderOptions,
+): Promise<string>;
+
+declare export function registerClientReference<T>(
+  proxyImplementation: any,
+  id: string,
+  hblp: mixed,
+): ClientReference<T>;
+
+type ServerReference<T: Function> = T & {
+  $$typeof: symbol,
+  $$id: string,
+  $$bound: null | Array<ReactClientValue>,
+  $$location?: Error,
+};
+
+declare export function registerServerReference<T: Function>(
+  reference: T,
+  id: string,
+): ServerReference<T>;
+
+declare export function createTemporaryReferenceSet(): TemporaryReferenceSet;
+
+declare export function decodeReply<T>(
+  body: string | FormData,
+  options?: {
+    temporaryReferences?: TemporaryReferenceSet,
+    arraySizeLimit?: number,
+  },
+): Promise<T>;
+
+declare export function decodeAction<T>(
+  body: FormData,
+  serverManifest: mixed,
+): Promise<() => T> | null;
+
+declare export function decodeFormState<S>(
+  actionResult: S,
+  body: FormData,
+  serverManifest: mixed,
+): Promise<[S, string, string, number] | null>;

packages/react-flight-server-fb/client.browser.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/client/ReactFlightDOMClientBrowser';

packages/react-flight-server-fb/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-flight-server-fb",
+  "description": "React Server Components bindings for DOM using Meta's internal bundler. It is not intended to be imported directly.",
+  "version": "19.3.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://react.dev/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "client.browser.js"
+  ],
+  "exports": {
+    "./client": "./client.browser.js",
+    "./client.browser": "./client.browser.js",
+    "./src/*": "./src/*.js",
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-flight-server-fb"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

packages/react-flight-server-fb/src/ReactFlightFBReferences.js

@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactClientValue} from 'react-server/src/ReactFlightServer';
+
+export type ServerReference<T: Function> = T & {
+  $$typeof: symbol,
+  $$id: string,
+  $$bound: null | Array<ReactClientValue>,
+  $$location?: Error,
+};
+
+// eslint-disable-next-line no-unused-vars
+export type ClientReference<T> = {
+  $$typeof: symbol,
+  $$id: string,
+  $$hblp: mixed,
+};
+
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+const SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+
+export function isClientReference(reference: Object): boolean {
+  return reference.$$typeof === CLIENT_REFERENCE_TAG;
+}
+
+export function isServerReference(reference: Object): boolean {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+
+export function registerClientReference<T>(
+  proxyImplementation: any,
+  id: string,
+  hblp: mixed,
+): ClientReference<T> {
+  return Object.defineProperties(proxyImplementation, {
+    $$typeof: {value: CLIENT_REFERENCE_TAG},
+    $$id: {value: id},
+    $$hblp: {value: hblp},
+  });
+}
+
+// $FlowFixMe[method-unbinding]
+const FunctionBind = Function.prototype.bind;
+// $FlowFixMe[method-unbinding]
+const ArraySlice = Array.prototype.slice;
+function bind(this: ServerReference<any>): any {
+  // $FlowFixMe[incompatible-call]
+  const newFn = FunctionBind.apply(this, arguments);
+  if (this.$$typeof === SERVER_REFERENCE_TAG) {
+    if (__DEV__) {
+      const thisBind = arguments[0];
+      if (thisBind != null) {
+        console.error(
+          'Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().',
+        );
+      }
+    }
+    const args = ArraySlice.call(arguments, 1);
+    const $$typeof = {value: SERVER_REFERENCE_TAG};
+    const $$id = {value: this.$$id};
+    const $$bound = {value: this.$$bound ? this.$$bound.concat(args) : args};
+    return Object.defineProperties(
+      (newFn: any),
+      (__DEV__
+        ? {
+            $$typeof,
+            $$id,
+            $$bound,
+            $$location: {
+              value: this.$$location,
+              configurable: true,
+            },
+            bind: {value: bind, configurable: true},
+          }
+        : {
+            $$typeof,
+            $$id,
+            $$bound,
+            bind: {value: bind, configurable: true},
+          }) as PropertyDescriptorMap,
+    );
+  }
+  return newFn;
+}
+
+const serverReferenceToString = {
+  value: () => 'function () { [omitted code] }',
+  configurable: true,
+  writable: true,
+};
+
+export function registerServerReference<T: Function>(
+  reference: T,
+  id: string,
+): ServerReference<T> {
+  const $$typeof = {value: SERVER_REFERENCE_TAG};
+  const $$id = {
+    value: id,
+    configurable: true,
+  };
+  const $$bound = {value: null, configurable: true};
+  return Object.defineProperties(
+    (reference: any),
+    (__DEV__
+      ? {
+          $$typeof,
+          $$id,
+          $$bound,
+          $$location: {
+            value: Error('react-stack-top-frame'),
+            configurable: true,
+          },
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        }
+      : {
+          $$typeof,
+          $$id,
+          $$bound,
+          bind: {value: bind, configurable: true},
+          toString: serverReferenceToString,
+        }) as PropertyDescriptorMap,
+  );
+}