@reckona/mreact-compat 0.0.66 → 0.0.67

package/src/fiber.ts

@@ -0,0 +1,148 @@
+import { NoFlags, type Flags } from "./fiber-flags.js";
+import { NoLanes, type Lane, type Lanes } from "./fiber-lanes.js";
+
+export type FiberTag =
+  | "host-root"
+  | "host-component"
+  | "host-text"
+  | "fragment"
+  | "function-component"
+  | "forward-ref"
+  | "class-component"
+  | "context-provider"
+  | "context-consumer"
+  | "portal"
+  | "memo"
+  | "lazy"
+  | "profiler"
+  | "strict-mode"
+  | "suspense"
+  | "suspense-list"
+  | "error-boundary";
+
+export interface Fiber {
+  tag: FiberTag;
+  type: unknown;
+  key: string | undefined;
+  pendingProps: unknown;
+  memoizedProps: unknown;
+  memoizedState: unknown;
+  return: Fiber | undefined;
+  child: Fiber | undefined;
+  sibling: Fiber | undefined;
+  alternate: Fiber | undefined;
+  stateNode: unknown;
+  flags: Flags;
+  subtreeFlags: Flags;
+  deletions: Fiber[] | undefined;
+  lanes: Lanes;
+  childLanes: Lanes;
+  hydrateExisting: boolean;
+}
+
+export interface FiberRoot {
+  container: Element;
+  current: Fiber;
+  finishedWork: Fiber | undefined;
+  pendingLanes: Lanes;
+  suspendedLanes: Lanes;
+  pingedLanes: Lanes;
+  expiredLanes: Lanes;
+  entangledLanes: Lanes;
+  callbackNode: unknown;
+  callbackPriority: Lane;
+  workInProgress: Fiber | undefined;
+  workInProgressRootRenderLanes: Lanes;
+  workInProgressElement: unknown;
+  hydrationState: FiberHydrationState | undefined;
+}
+
+export interface FiberHydrationState {
+  parent: ParentNode;
+  nextHydratableNode: Node | null;
+  before: ChildNode | null;
+  after: ChildNode | null;
+  resumeId?: string;
+}
+
+export function createFiber(
+  tag: FiberTag,
+  pendingProps: unknown = undefined,
+  key?: string,
+): Fiber {
+  return {
+    tag,
+    type: undefined,
+    key,
+    pendingProps,
+    memoizedProps: undefined,
+    memoizedState: undefined,
+    return: undefined,
+    child: undefined,
+    sibling: undefined,
+    alternate: undefined,
+    stateNode: undefined,
+    flags: NoFlags,
+    subtreeFlags: NoFlags,
+    deletions: undefined,
+    lanes: NoLanes,
+    childLanes: NoLanes,
+    hydrateExisting: false,
+  };
+}
+
+export function createHostRootFiber(): Fiber {
+  return createFiber("host-root", undefined);
+}
+
+export function createFiberRoot(container: Element): FiberRoot {
+  const current = createHostRootFiber();
+  const root: FiberRoot = {
+    container,
+    current,
+    finishedWork: undefined,
+    pendingLanes: NoLanes,
+    suspendedLanes: NoLanes,
+    pingedLanes: NoLanes,
+    expiredLanes: NoLanes,
+    entangledLanes: NoLanes,
+    callbackNode: undefined,
+    callbackPriority: NoLanes,
+    workInProgress: undefined,
+    workInProgressRootRenderLanes: NoLanes,
+    workInProgressElement: undefined,
+    hydrationState: undefined,
+  };
+  current.stateNode = root;
+  return root;
+}
+
+export function createWorkInProgress(
+  current: Fiber,
+  pendingProps: unknown,
+): Fiber {
+  let workInProgress = current.alternate;
+
+  if (workInProgress === undefined) {
+    workInProgress = createFiber(current.tag, pendingProps, current.key);
+    workInProgress.type = current.type;
+    workInProgress.stateNode = current.stateNode;
+    workInProgress.alternate = current;
+    current.alternate = workInProgress;
+  } else {
+    workInProgress.pendingProps = pendingProps;
+    workInProgress.flags = NoFlags;
+    workInProgress.subtreeFlags = NoFlags;
+    workInProgress.deletions = undefined;
+  }
+
+  workInProgress.child = current.child;
+  workInProgress.sibling = current.sibling;
+  workInProgress.return = current.return;
+  workInProgress.memoizedProps = current.memoizedProps;
+  workInProgress.memoizedState = current.memoizedState;
+  workInProgress.lanes = current.lanes;
+  workInProgress.childLanes = current.childLanes;
+  workInProgress.hydrateExisting = false;
+  return workInProgress;
+}

package/src/flight-decoder.ts

@@ -0,0 +1,205 @@
+import type { ElementType } from "./element.js";
+import {
+  createFlightServerReferenceStub,
+  decodeFlightElementModel,
+} from "./flight-element-builder.js";
+import type {
+  FlightClientReference,
+  FlightModel,
+  FlightResponse,
+  FlightServerReference,
+  FlightTypedArrayName,
+} from "./flight-types.js";
+
+export interface DecodeFlightOptions {
+  loadClientReference(reference: FlightClientReference): ElementType<Record<string, unknown>>;
+  callServerReference?(
+    reference: FlightServerReference,
+    args: unknown[],
+  ): unknown | Promise<unknown>;
+}
+
+// Issue 079: cap recursion depth so a deeply-nested Flight payload
+// cannot stack-overflow the client decoder.
+const MAX_FLIGHT_DECODE_DEPTH = 256;
+
+class FlightDecodeError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "FlightDecodeError";
+  }
+}
+
+export function decodeFlightModel(
+  model: FlightModel,
+  response: FlightResponse,
+  options: DecodeFlightOptions,
+  depth = 0,
+): unknown {
+  if (depth > MAX_FLIGHT_DECODE_DEPTH) {
+    throw new FlightDecodeError(
+      `MR_FLIGHT_TOO_DEEP: nested deeper than ${MAX_FLIGHT_DECODE_DEPTH} levels`,
+    );
+  }
+  if (
+    model === null ||
+    typeof model === "string" ||
+    typeof model === "number" ||
+    typeof model === "boolean"
+  ) {
+    return model;
+  }
+
+  if (Array.isArray(model)) {
+    return model.map((item) => decodeFlightModel(item, response, options, depth + 1));
+  }
+
+  if (model.kind === "undefined") {
+    return undefined;
+  }
+
+  if (model.kind === "date") {
+    return new Date(model.value);
+  }
+
+  if (model.kind === "bigint") {
+    return BigInt(model.value);
+  }
+
+  if (model.kind === "number") {
+    switch (model.value) {
+      case "Infinity":
+        return Infinity;
+      case "-Infinity":
+        return -Infinity;
+      case "-0":
+        return -0;
+      case "NaN":
+        return Number.NaN;
+    }
+  }
+
+  if (model.kind === "symbol") {
+    return Symbol.for(model.name);
+  }
+
+  if (model.kind === "map") {
+    return new Map(
+      model.entries.map(([key, value]) => [
+        decodeFlightModel(key, response, options, depth + 1),
+        decodeFlightModel(value, response, options, depth + 1),
+      ]),
+    );
+  }
+
+  if (model.kind === "set") {
+    return new Set(
+      model.values.map((value) => decodeFlightModel(value, response, options, depth + 1)),
+    );
+  }
+
+  if (model.kind === "form-data") {
+    const formData = new FormData();
+
+    for (const [name, value] of model.entries) {
+      const decoded = decodeFlightModel(value, response, options, depth + 1);
+      formData.append(name, decoded instanceof Blob ? decoded : String(decoded ?? ""));
+    }
+
+    return formData;
+  }
+
+  if (model.kind === "iterable") {
+    return model.values.map((value) => decodeFlightModel(value, response, options, depth + 1));
+  }
+
+  if (model.kind === "array-buffer") {
+    return createArrayBuffer(model.bytes);
+  }
+
+  if (model.kind === "typed-array") {
+    return createTypedArray(model.arrayType, model.bytes);
+  }
+
+  if (model.kind === "data-view") {
+    return new DataView(createArrayBuffer(model.bytes));
+  }
+
+  if (model.kind === "error") {
+    const error = new Error(model.message);
+    error.name = model.name;
+    if (model.digest !== undefined) {
+      (error as Error & { digest?: string }).digest = model.digest;
+    }
+    throw error;
+  }
+
+  if (model.kind === "promise") {
+    throw new Error(`React Flight chunk ${model.id} is still pending.`);
+  }
+
+  if (model.kind === "element") {
+    return decodeFlightElementModel(
+      model,
+      response,
+      options,
+      (value, childDepth = 0) => decodeFlightModel(value, response, options, childDepth),
+      depth,
+      assertFlightDecodeDepth,
+    );
+  }
+
+  if (model.kind === "server-reference") {
+    return createFlightServerReferenceStub(
+      model.id,
+      response,
+      options,
+      (value, childDepth = 0) => decodeFlightModel(value, response, options, childDepth),
+    );
+  }
+
+  throw new Error(`Unexpected Flight model kind: ${model.kind}`);
+}
+
+function assertFlightDecodeDepth(depth: number): void {
+  if (depth > MAX_FLIGHT_DECODE_DEPTH) {
+    throw new FlightDecodeError(
+      `MR_FLIGHT_TOO_DEEP: nested deeper than ${MAX_FLIGHT_DECODE_DEPTH} levels`,
+    );
+  }
+}
+
+function createArrayBuffer(bytes: number[]): ArrayBuffer {
+  const array = Uint8Array.from(bytes);
+
+  return array.buffer.slice(array.byteOffset, array.byteOffset + array.byteLength);
+}
+
+function createTypedArray(arrayType: FlightTypedArrayName, bytes: number[]): unknown {
+  const buffer = createArrayBuffer(bytes);
+
+  switch (arrayType) {
+    case "Int8Array":
+      return new Int8Array(buffer);
+    case "Uint8Array":
+      return new Uint8Array(buffer);
+    case "Uint8ClampedArray":
+      return new Uint8ClampedArray(buffer);
+    case "Int16Array":
+      return new Int16Array(buffer);
+    case "Uint16Array":
+      return new Uint16Array(buffer);
+    case "Int32Array":
+      return new Int32Array(buffer);
+    case "Uint32Array":
+      return new Uint32Array(buffer);
+    case "Float32Array":
+      return new Float32Array(buffer);
+    case "Float64Array":
+      return new Float64Array(buffer);
+    case "BigInt64Array":
+      return new BigInt64Array(buffer);
+    case "BigUint64Array":
+      return new BigUint64Array(buffer);
+  }
+}

package/src/flight-element-builder.ts

@@ -0,0 +1,110 @@
+import { createElement, Fragment } from "./element.js";
+import type { ElementType } from "./element.js";
+import type { DecodeFlightOptions } from "./flight-decoder.js";
+import type {
+  FlightClientReference,
+  FlightElementModel,
+  FlightModel,
+  FlightResponse,
+  FlightServerReference,
+  FlightServerReferenceModel,
+} from "./flight-types.js";
+
+export type FlightModelDecoder = (model: FlightModel, depth?: number) => unknown;
+
+export function decodeFlightElementModel(
+  model: FlightElementModel,
+  response: FlightResponse,
+  options: DecodeFlightOptions,
+  decodeModel: FlightModelDecoder,
+  depth = 0,
+  assertDepth?: (depth: number) => void,
+): unknown {
+  const type = decodeElementType(model.type, response, options);
+  const propsDepth = depth + 1;
+  assertDepth?.(propsDepth);
+  const props = decodeProps(model.props, response, options, decodeModel, propsDepth);
+
+  return createElement(type, { ...props, key: model.key });
+}
+
+export function createFlightServerReferenceStub(
+  id: number,
+  response: FlightResponse,
+  options: DecodeFlightOptions,
+  decodeModel: FlightModelDecoder,
+): (...args: unknown[]) => unknown {
+  const reference = getServerReference(id, response);
+
+  return (...args: unknown[]) => {
+    if (options.callServerReference === undefined) {
+      throw new Error(`No server reference caller configured for ${reference.moduleId}.`);
+    }
+
+    const boundArgs = reference.bound?.map((value) => decodeModel(value)) ?? [];
+
+    return options.callServerReference(reference, [...boundArgs, ...args]);
+  };
+}
+
+function decodeElementType(
+  type: FlightElementModel["type"],
+  response: FlightResponse,
+  options: DecodeFlightOptions,
+): ElementType<Record<string, unknown>> {
+  if (typeof type === "string") {
+    return type;
+  }
+
+  if (type.kind === "fragment") {
+    return Fragment as ElementType<Record<string, unknown>>;
+  }
+
+  return options.loadClientReference(getClientReference(type.id, response));
+}
+
+function decodeProps(
+  props: Record<string, FlightModel>,
+  response: FlightResponse,
+  options: DecodeFlightOptions,
+  decodeModel: FlightModelDecoder,
+  depth: number,
+): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(props).map(([key, value]) => [
+      key,
+      valueIsServerReference(value)
+        ? createFlightServerReferenceStub(value.id, response, options, decodeModel)
+        : decodeModel(value, depth + 1),
+    ]),
+  );
+}
+
+function getClientReference(id: number, response: FlightResponse): FlightClientReference {
+  const reference = response.clientReferences.find((entry) => entry.id === id);
+
+  if (reference === undefined) {
+    throw new Error(`Unknown Flight client reference: ${id}`);
+  }
+
+  return reference;
+}
+
+function getServerReference(id: number, response: FlightResponse): FlightServerReference {
+  const reference = response.serverReferences.find((entry) => entry.id === id);
+
+  if (reference === undefined) {
+    throw new Error(`Unknown Flight server reference: ${id}`);
+  }
+
+  return reference;
+}
+
+function valueIsServerReference(value: FlightModel): value is FlightServerReferenceModel {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    !Array.isArray(value) &&
+    value.kind === "server-reference"
+  );
+}