@reckona/mreact-compat 0.0.65 → 0.0.67

package/src/flight-protocol.ts

@@ -0,0 +1,71 @@
+export const reactFlightBinaryRowTags = [
+  "A",
+  "O",
+  "o",
+  "U",
+  "S",
+  "s",
+  "L",
+  "l",
+  "G",
+  "g",
+  "M",
+  "m",
+  "V",
+] as const;
+
+export const reactFlightRowTags = [
+  "C",
+  "D",
+  "E",
+  "F",
+  "H",
+  "I",
+  "J",
+  "N",
+  "P",
+  "R",
+  "T",
+  "W",
+  "X",
+  "x",
+  "r",
+] as const;
+
+export const reactFlightModelTokens = [
+  "$",
+  "$$",
+  "$@",
+  "$D",
+  "$E",
+  "$F",
+  "$I",
+  "$K",
+  "$L",
+  "$N",
+  "$Q",
+  "$S",
+  "$W",
+  "$Y",
+  "$Z",
+  "$i",
+  "$n",
+  "$u",
+  "$undefined",
+] as const;
+
+export type ReactFlightBinaryRowTag = (typeof reactFlightBinaryRowTags)[number];
+
+export interface ReactFlightProtocolCoverage {
+  binaryRowTags: string[];
+  modelTokens: string[];
+  rowTags: string[];
+}
+
+export function getReactFlightProtocolCoverage(): ReactFlightProtocolCoverage {
+  return {
+    binaryRowTags: [...reactFlightBinaryRowTags],
+    modelTokens: [...reactFlightModelTokens],
+    rowTags: [...reactFlightRowTags],
+  };
+}

package/src/flight-types.ts

@@ -0,0 +1,148 @@
+export interface FlightClientReference {
+  id: number;
+  moduleId: string;
+  exportName: string;
+  chunks?: string[];
+}
+
+export interface FlightServerReference {
+  id: number;
+  moduleId: string;
+  exportName: string;
+  bound?: FlightModel[];
+}
+
+export interface FlightResponse {
+  version: 1;
+  root: FlightModel;
+  clientReferences: FlightClientReference[];
+  serverReferences: FlightServerReference[];
+}
+
+export type FlightModel =
+  | null
+  | string
+  | number
+  | boolean
+  | FlightModel[]
+  | FlightObjectModel
+  | FlightElementModel
+  | FlightClientReferenceModel
+  | FlightServerReferenceModel
+  | FlightDateModel
+  | FlightBigIntModel
+  | FlightNumberModel
+  | FlightSymbolModel
+  | FlightMapModel
+  | FlightSetModel
+  | FlightFormDataModel
+  | FlightIterableModel
+  | FlightErrorModel
+  | FlightPromiseModel
+  | FlightArrayBufferModel
+  | FlightTypedArrayModel
+  | FlightDataViewModel
+  | { kind: "undefined" };
+
+export interface FlightObjectModel {
+  kind?: never;
+  [key: string]: FlightModel | undefined;
+}
+
+export interface FlightElementModel {
+  kind: "element";
+  type: string | FlightClientReferenceModel | { kind: "fragment" };
+  key: string | null;
+  props: Record<string, FlightModel>;
+}
+
+export interface FlightClientReferenceModel {
+  kind: "client-reference";
+  id: number;
+}
+
+export interface FlightServerReferenceModel {
+  kind: "server-reference";
+  id: number;
+}
+
+export interface FlightDateModel {
+  kind: "date";
+  value: string;
+}
+
+export interface FlightBigIntModel {
+  kind: "bigint";
+  value: string;
+}
+
+export interface FlightNumberModel {
+  kind: "number";
+  value: "Infinity" | "-Infinity" | "NaN" | "-0";
+}
+
+export interface FlightSymbolModel {
+  kind: "symbol";
+  name: string;
+}
+
+export interface FlightMapModel {
+  kind: "map";
+  entries: [FlightModel, FlightModel][];
+}
+
+export interface FlightSetModel {
+  kind: "set";
+  values: FlightModel[];
+}
+
+export interface FlightFormDataModel {
+  kind: "form-data";
+  entries: [string, FlightModel][];
+}
+
+export interface FlightIterableModel {
+  kind: "iterable";
+  values: FlightModel[];
+}
+
+export interface FlightErrorModel {
+  kind: "error";
+  name: string;
+  message: string;
+  digest?: string;
+}
+
+export interface FlightPromiseModel {
+  kind: "promise";
+  id: number;
+}
+
+export interface FlightArrayBufferModel {
+  kind: "array-buffer";
+  bytes: number[];
+}
+
+export interface FlightTypedArrayModel {
+  kind: "typed-array";
+  arrayType: FlightTypedArrayName;
+  bytes: number[];
+}
+
+export interface FlightDataViewModel {
+  kind: "data-view";
+  bytes: number[];
+}
+
+export type FlightTypedArrayName =
+  | "Int8Array"
+  | "Uint8Array"
+  | "Uint8ClampedArray"
+  | "Int16Array"
+  | "Uint16Array"
+  | "Int32Array"
+  | "Uint32Array"
+  | "Float32Array"
+  | "Float64Array"
+  | "BigInt64Array"
+  | "BigUint64Array";

package/src/flight.ts

@@ -0,0 +1,162 @@
+import type { ReactCompatNode } from "./element.js";
+import { hydrateRoot, type HydrateRootOptions } from "./render.js";
+import {
+  getReactFlightProtocolCoverage,
+  type ReactFlightProtocolCoverage,
+} from "./flight-protocol.js";
+import { decodeFlightModel, type DecodeFlightOptions } from "./flight-decoder.js";
+import { parseReactFlightPayload } from "./flight-parser.js";
+import type {
+  FlightArrayBufferModel,
+  FlightBigIntModel,
+  FlightClientReference,
+  FlightClientReferenceModel,
+  FlightDataViewModel,
+  FlightDateModel,
+  FlightElementModel,
+  FlightErrorModel,
+  FlightFormDataModel,
+  FlightIterableModel,
+  FlightMapModel,
+  FlightModel,
+  FlightNumberModel,
+  FlightPromiseModel,
+  FlightResponse,
+  FlightServerReference,
+  FlightServerReferenceModel,
+  FlightSetModel,
+  FlightSymbolModel,
+  FlightTypedArrayModel,
+  FlightTypedArrayName,
+} from "./flight-types.js";
+
+export { getReactFlightProtocolCoverage };
+export type {
+  DecodeFlightOptions,
+  FlightArrayBufferModel,
+  FlightBigIntModel,
+  FlightClientReference,
+  FlightClientReferenceModel,
+  FlightDataViewModel,
+  FlightDateModel,
+  FlightElementModel,
+  FlightErrorModel,
+  FlightFormDataModel,
+  FlightIterableModel,
+  FlightMapModel,
+  FlightModel,
+  FlightNumberModel,
+  FlightPromiseModel,
+  FlightResponse,
+  FlightServerReference,
+  FlightServerReferenceModel,
+  FlightSetModel,
+  FlightSymbolModel,
+  FlightTypedArrayModel,
+  FlightTypedArrayName,
+};
+export type { ReactFlightProtocolCoverage };
+
+export interface FetchServerReferenceCallerOptions {
+  fetch?: typeof fetch;
+  headers?: Record<string, string>;
+  credentials?: RequestCredentials;
+  csrfHeaderName?: string;
+  csrfToken?: string | (() => string);
+  nonceHeaderName?: string;
+  nonce?: string | (() => string);
+}
+
+export interface HydrateFlightOptions extends DecodeFlightOptions {
+  hydrate?: HydrateRootOptions;
+}
+
+export function parseFlightResponse(payload: string | ArrayBuffer | Uint8Array): FlightResponse {
+  return parseReactFlightPayload(payload);
+}
+
+export function decodeFlightResponse(
+  response: FlightResponse,
+  options: DecodeFlightOptions,
+): ReactCompatNode {
+  return decodeFlightModel(response.root, response, options) as ReactCompatNode;
+}
+
+export function readFlightResponse(
+  root: Document | ParentNode,
+  id?: string,
+): FlightResponse {
+  const selector =
+    id === undefined
+      ? "script[data-mreact-flight]"
+      : `script[data-mreact-flight]#${cssEscape(id)}`;
+  const script = root.querySelector(selector);
+
+  if (script === null || script.textContent === null) {
+    throw new Error("Flight response script was not found.");
+  }
+
+  return parseFlightResponse(script.textContent);
+}
+
+export function hydrateFlightResponse(
+  container: Element,
+  response: FlightResponse,
+  options: HydrateFlightOptions,
+): ReturnType<typeof import("./render.js").hydrateRoot> {
+  return hydrateRoot(container, decodeFlightResponse(response, options), options.hydrate);
+}
+
+export function createFetchServerReferenceCaller(
+  endpoint: string,
+  options: FetchServerReferenceCallerOptions = {},
+): NonNullable<DecodeFlightOptions["callServerReference"]> {
+  const fetchImpl = options.fetch ?? fetch;
+
+  return async (reference, args) => {
+    const response = await fetchImpl(endpoint, {
+      method: "POST",
+      credentials: options.credentials ?? "same-origin",
+      headers: createServerReferenceHeaders(options),
+      body: JSON.stringify({
+        moduleId: reference.moduleId,
+        exportName: reference.exportName,
+        ...(reference.bound === undefined ? {} : { bound: reference.bound }),
+        args,
+      }),
+    });
+    const payload = (await response.json()) as { ok?: boolean; value?: unknown; error?: string };
+
+    if (!response.ok || payload.ok !== true) {
+      throw new Error(payload.error ?? "Server action failed.");
+    }
+
+    return payload.value;
+  };
+}
+
+function createServerReferenceHeaders(
+  options: FetchServerReferenceCallerOptions,
+): Record<string, string> {
+  const csrfToken = readOptionalToken(options.csrfToken);
+  const nonce = readOptionalToken(options.nonce);
+
+  return {
+    "content-type": "application/json",
+    ...options.headers,
+    ...(csrfToken === undefined
+      ? {}
+      : { [options.csrfHeaderName ?? "x-mreact-csrf"]: csrfToken }),
+    ...(nonce === undefined
+      ? {}
+      : { [options.nonceHeaderName ?? "x-mreact-action-nonce"]: nonce }),
+  };
+}
+
+function readOptionalToken(token: string | (() => string) | undefined): string | undefined {
+  return typeof token === "function" ? token() : token;
+}
+
+function cssEscape(value: string): string {
+  return globalThis.CSS?.escape?.(value) ?? value.replaceAll('"', '\\"');
+}