@uniflowed/router 0.0.0-alpha.34 → 0.0.0-alpha.35

package/internal/error-view.js

@@ -0,0 +1,189 @@
+// @flow
+//
+// Internal to `@uniflowed/router`: what renders in place of a subtree that threw.
+//
+// The framework's error page, the component that picks between it and a
+// project's `$error.js`, the page a route that resolved to its error boundary
+// renders, and the class boundary that catches a throw while the browser
+// renders. Every one of them is the browser's: a boundary is a class, and a
+// retry is a navigation, so none of this can run in a graph resolved under
+// React's `react-server` condition — which is why it is out of `./runtime.js`'s
+// top half and in a module of its own. See ubugeeei-prod/uf#519.
+
+"use client";
+
+import * as React from "react";
+
+import type { RouteError } from "./routing.js";
+import type { ErrorModule } from "./resolve.js";
+import { errorTitle, renderable, routeErrorFor } from "./resolve.js";
+import { useRouterState } from "./runtime.js";
+
+/**
+ * The framework's error page, for a project that declares no `$error.js`.
+ *
+ * It says which of the three happened and offers the reset, and it does *not*
+ * print the thrown error: on the server that message is written for whoever
+ * deployed the application — a query, a path, a token in a stack — and this
+ * markup is sent to whoever asked for the page. `uf dev` reports the throw in
+ * the terminal and `uf build` fails the route, which are the places the person
+ * who can act on it is looking.
+ */
+component DefaultRouteError(error: RouteError, reset: () => void) {
+  const title = errorTitle(error);
+  const detail = match (error) {
+    {kind: "unauthorized"} => "This page needs you to be signed in.",
+    {kind: "forbidden"} => "You do not have access to this page.",
+    {kind: "thrown"} => "This page could not be rendered.",
+  };
+  return (
+    <main>
+      <title>{title}</title>
+      <h1>{title}</h1>
+      <p>{detail}</p>
+      <button type="button" onClick={reset}>
+        Try again
+      </button>
+    </main>
+  );
+}
+
+/** The component an error module renders: `default`, or the named `Error`. */
+function errorComponent(module: ErrorModule): React.ComponentType<ErrorRenderProps> {
+  const component = module.default ?? module.Error;
+  if (component == null) {
+    throw new Error(
+      "@uniflowed/router: an error module must export a component as `default` or `Error`",
+    );
+  }
+  return renderable(component);
+}
+
+/** The props an error boundary's component receives. */
+type ErrorRenderProps = {|
+  readonly error: RouteError,
+  readonly reset: () => void,
+|};
+
+/**
+ * The error UI, from whichever module is in scope.
+ *
+ * One component for both ways in — the class boundary below, which catches a
+ * throw while the browser renders, and `ResolvedErrorPage`, which is what the
+ * server renders because React's boundaries do not run in `renderToString`.
+ * Two paths to the same screen is exactly the pair that drifts.
+ */
+component RouteErrorView(module: ?ErrorModule, error: RouteError, reset: () => void) {
+  if (module == null) {
+    return <DefaultRouteError error={error} reset={reset} />;
+  }
+  const Boundary = errorComponent(module);
+  return <Boundary error={error} reset={reset} />;
+}
+
+/**
+ * The page of a route that resolved to an error.
+ *
+ * A resolved error route carries the error and the module on the route itself,
+ * so this is a static component rather than a closure the resolver builds:
+ * `RouteView` composes it in its layouts exactly like a page, which is what
+ * makes "inside the layouts above the boundary" one code path and not two.
+ *
+ * `reset()` here is `router.refresh()` — this route resolved to an error
+ * because a loader or an import threw, so re-running the resolution is what
+ * trying again means. On the server `refresh` does nothing, which is correct:
+ * a static render has nothing to re-run.
+ */
+export component ResolvedErrorPage() {
+  const { route, view, router } = useRouterState();
+  const reset = () => {
+    router.refresh().catch(() => {});
+  };
+
+  // Unreachable otherwise: this is only ever the page of an error route that was
+  // resolved from its modules. A route React Server Components rendered has
+  // [`ErrorRoutePage`] instead, with the boundary's module handed over as a prop.
+  if (route.error == null || view.kind !== "modules") {
+    return null;
+  }
+  return (
+    <RouteErrorView module={view.resolved.errorBoundary.module} error={route.error} reset={reset} />
+  );
+}
+
+/**
+ * The page of a route that resolved to an error, rendered by React Server
+ * Components.
+ *
+ * [`ResolvedErrorPage`] reads the error and the boundary's module out of the
+ * router, which holds a whole resolved route in a single-page application. The
+ * route a Flight payload hands the browser carries neither — the module is the
+ * server's, and what crosses is the part a hook reads — so the Flight renderer
+ * passes both as props: the boundary's module as `{ default: <client
+ * reference> }`, which is what a `"use client"` `$error.js` becomes on the way,
+ * and the error, which React serialises the way it serialises any error value.
+ * The retry is the same `router.refresh()`, because trying again still means
+ * resolving the route again. See ubugeeei-prod/uf#519.
+ */
+export component ErrorRoutePage(module: ?ErrorModule, error: RouteError) {
+  const { router } = useRouterState();
+  const reset = () => {
+    router.refresh().catch(() => {});
+  };
+  return <RouteErrorView module={module} error={error} reset={reset} />;
+}
+
+type RouteErrorBoundaryProps = {|
+  readonly module: ?ErrorModule,
+  readonly resetKey: string,
+  readonly children: React.Node,
+|};
+
+type RouteErrorBoundaryState = {| readonly error: ?RouteError |};
+
+/**
+ * The boundary that catches a throw while the browser renders the subtree.
+ *
+ * A class, because `getDerivedStateFromError` is React's contract for this and
+ * there is no hook that does it — this is the one place in the router where
+ * following React's public contract means not using a function component.
+ *
+ * Recovering on navigation is `componentDidUpdate` watching `resetKey`, not
+ * `key={pathname}` on the boundary. Keying it remounts the subtree on *every*
+ * navigation, error or not, and everything below the boundary goes with it —
+ * which is the layouts, whose whole purpose is to survive navigation with
+ * their scroll position and their open sections intact.
+ */
+export class RouteErrorBoundary extends React.Component<
+  RouteErrorBoundaryProps,
+  RouteErrorBoundaryState,
+> {
+  constructor(props: RouteErrorBoundaryProps) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: mixed): RouteErrorBoundaryState {
+    return { error: routeErrorFor(error) };
+  }
+
+  componentDidUpdate(previous: RouteErrorBoundaryProps) {
+    if (this.state.error != null && previous.resetKey !== this.props.resetKey) {
+      this.setState({ error: null });
+    }
+  }
+
+  render(): React.Node {
+    const { error } = this.state;
+    if (error == null) {
+      return this.props.children;
+    }
+    return (
+      <RouteErrorView
+        module={this.props.module}
+        error={error}
+        reset={() => this.setState({ error: null })}
+      />
+    );
+  }
+}

package/internal/flight-browser.js

@@ -0,0 +1,230 @@
+// @flow
+//
+// Internal to `@uniflowed/router`: React Server Components, in the browser.
+//
+// A route's tree reaches the browser as React's Flight payload
+// (ubugeeei-prod/uf#519), by one of two doors. The first page arrives inside
+// its document, as the chunks `./flight-chunks.js` describes, and is read here
+// while the document is still streaming so that `hydrateRoot` can start before
+// the slowest boundary has resolved. Every page after that is a `fetch` of the
+// route's payload URL (`./flight.js`), read the same way by React's own client.
+//
+// # The one hook React's Parcel client asks for
+//
+// `react-server-dom-parcel` resolves a client reference through a global
+// `parcelRequire`: `load(url)` for each chunk a reference names, then
+// `parcelRequire(id)` for the module, synchronously, once they have loaded. uf
+// has no Parcel; this module is that hook. A reference's id *is* its chunk's
+// URL — `@uniflowed/vite` writes it that way — so loading a chunk and
+// remembering its namespace under the same string is the whole of it.
+//
+// It imports same-origin URLs and nothing else. The payload comes from the
+// page's own origin, so a URL that points somewhere else is not a URL uf wrote,
+// and turning it into an `import()` would be letting bytes decide which script
+// runs.
+
+import { createFromFetch, createFromReadableStream } from "react-server-dom-parcel/client.browser";
+
+import { FLIGHT_CHUNK_ATTRIBUTE, flightChunkBytes } from "./flight-chunks.js";
+import { FLIGHT_CONTENT_TYPE, type FlightRoot, documentPathOf, flightUrl } from "./flight.js";
+
+/** A module namespace, as far as the loader looks into one. */
+type ModuleNamespace = { +[string]: mixed };
+
+/**
+ * Install the module hook React's Flight client resolves references through.
+ *
+ * Once per page. Defined rather than assigned, for the reason
+ * `./boundaries.js` gives about its own global: a name a page already defined
+ * as an accessor cannot be assigned to, and hydration must not throw over it.
+ */
+export function installBrowserModules(): void {
+  const loaded: Map<string, ModuleNamespace> = new Map();
+  // A function with three properties, which is the shape React's Parcel client
+  // calls: `parcelRequire(id)` for a module, `parcelRequire.load(url)` for the
+  // chunk it lives in. Declared and then given its properties, so the hook is
+  // built rather than merged into something that already existed.
+  function parcelRequire(id: string): ModuleNamespace {
+    const namespace = loaded.get(id);
+    if (namespace == null) {
+      throw new Error(
+        `@uniflowed/router: the client module ${id} was required before it loaded. React's ` +
+          "Flight client loads every chunk a reference names before it asks for the module.",
+      );
+    }
+    return namespace;
+  }
+  parcelRequire.load = (url: string): Promise<void> => {
+    const target = new URL(url, window.location.href);
+    if (target.origin !== window.location.origin) {
+      return Promise.reject(
+        new Error(
+          `@uniflowed/router: a payload named the client module ${url}, which is not on this ` +
+            "page's origin. uf writes same-origin chunk URLs only, so it is not loaded.",
+        ),
+      );
+    }
+    return import(target.href).then((namespace: ModuleNamespace) => {
+      loaded.set(url, namespace);
+    });
+  };
+  parcelRequire.extendImportMap = (): void => {
+    throw new Error("@uniflowed/router: a payload asked for an import map, which uf never writes");
+  };
+  parcelRequire.meta = { publicUrl: "", devServer: null };
+  Object.defineProperty(globalThis, "parcelRequire", {
+    value: parcelRequire,
+    writable: true,
+    configurable: true,
+  });
+}
+
+/** The parts of a `Document` the reader uses. */
+type DocumentLike = interface {
+  readonly querySelectorAll: (selector: string) => Iterable<ElementLike>,
+  readonly documentElement: mixed,
+};
+
+/** The parts of an `Element` the reader uses. */
+type ElementLike = interface {
+  readonly textContent: string | null,
+};
+
+/**
+ * The payload a document carries, as the byte stream React's client reads.
+ *
+ * Every chunk element already in the document is read at once, in document
+ * order, and a `MutationObserver` reads the ones the server has not written
+ * yet. The stream ends at the end marker and the observer is disconnected with
+ * it, so a prerendered document — every chunk already there — never installs
+ * one.
+ *
+ * `observe` is passed in rather than reached for, so the reader can be driven
+ * by a test with a document it mutates by hand; `domObserver` in
+ * `./payload-rows.js` is the browser's.
+ */
+export function documentPayload(
+  document: DocumentLike,
+  observe: ?(callback: () => void) => (() => void) | null,
+): ReadableStream<Uint8Array> {
+  const seen: WeakSet<ElementLike> = new WeakSet();
+  let stop: (() => void) | null = null;
+  let done = false;
+  return new ReadableStream({
+    start(controller) {
+      const sweep = () => {
+        if (done) {
+          return;
+        }
+        for (const element of document.querySelectorAll(`script[${FLIGHT_CHUNK_ATTRIBUTE}]`)) {
+          if (seen.has(element)) {
+            continue;
+          }
+          seen.add(element);
+          let bytes;
+          try {
+            bytes = flightChunkBytes(element.textContent ?? "null");
+          } catch (error) {
+            done = true;
+            stop?.();
+            controller.error(error);
+            return;
+          }
+          if (bytes == null) {
+            done = true;
+            stop?.();
+            controller.close();
+            return;
+          }
+          controller.enqueue(bytes);
+        }
+      };
+      sweep();
+      if (!done && observe != null) {
+        stop = observe(sweep);
+      }
+    },
+    cancel() {
+      done = true;
+      stop?.();
+    },
+  });
+}
+
+/** Read the payload a document carries into its root value. */
+export function readDocumentPayload(
+  document: DocumentLike,
+  observe: ?(callback: () => void) => (() => void) | null,
+): Promise<FlightRoot> {
+  return createFromReadableStream(documentPayload(document, observe));
+}
+
+/** What fetching a route's payload turned into. */
+export type FetchedFlight =
+  | {|
+      readonly kind: "flight",
+      /** The route the server answered for: a redirect's target, when there was one. */
+      readonly url: string,
+      readonly root: Promise<FlightRoot>,
+    |}
+  | {|
+      /**
+       * The answer was not a payload: a redirect off this origin, or a host
+       * that had no payload for the URL. The browser should load `url` as a
+       * document.
+       */
+      readonly kind: "document",
+      readonly url: string,
+    |};
+
+/**
+ * Fetch `url`'s payload.
+ *
+ * A redirect is followed by `fetch`, and the route the payload is for is read
+ * back off the URL the answer came from — so a loader's `redirect()` during a
+ * navigation lands the history entry on the target, as a document request
+ * would have. Anything that is not a payload is handed back as a document to
+ * load instead of being fed to React's client.
+ *
+ * The status is not what decides, the content type is. A route that resolved
+ * to its not-found or error boundary is answered with a 404 or a 500 *and a
+ * payload*, and that payload is the page to show; what is not a payload — a
+ * static host's `404.html` for a file it does not have, a middleware's own
+ * refusal — is a document, whatever its status.
+ */
+export async function fetchFlight(url: string): Promise<FetchedFlight> {
+  let response: Response;
+  try {
+    response = await fetch(flightUrl(url), {
+      credentials: "same-origin",
+      headers: { accept: FLIGHT_CONTENT_TYPE },
+    });
+  } catch {
+    // A request that could not be made or followed: a dropped connection, or a
+    // redirect to another origin — a sign-in page — which `fetch` may not
+    // follow without CORS. The browser can still load the document, and a
+    // top-level navigation follows any redirect, so that is what the router
+    // does rather than leave the click doing nothing.
+    return { kind: "document", url };
+  }
+  const landed = new URL(response.url, window.location.href);
+  const document = documentPathOf(landed.pathname);
+  const type = response.headers.get("content-type") ?? "";
+  if (
+    landed.origin !== window.location.origin ||
+    document == null ||
+    !type.startsWith(FLIGHT_CONTENT_TYPE)
+  ) {
+    void response.body?.cancel();
+    // The URL the reader asked for when the redirect did not end on a payload,
+    // rather than the one it ended on. A middleware that answered with its
+    // sign-in page wrote a `next=` naming the payload URL; loading the document
+    // URL lets it see the document and name that instead.
+    return { kind: "document", url: document == null ? url : `${document}${landed.search}` };
+  }
+  return {
+    kind: "flight",
+    url: `${document}${landed.search}`,
+    root: createFromFetch(Promise.resolve(response)),
+  };
+}

package/internal/flight-chunks.js

@@ -0,0 +1,181 @@
+// @flow
+//
+// Internal to `@uniflowed/router`: a Flight payload, written into a document
+// and read back out of one.
+//
+// A document a server streams carries the payload the browser hydrates from,
+// beside the HTML rendered from it: every chunk React's Flight renderer wrote
+// is copied into a `<script type="application/json" data-uf-flight>` element
+// as the HTML streams, and the browser reads the elements back into the byte
+// stream React's Flight client consumes. This module is the encoding of one
+// chunk in each direction, and nothing else, so the writer (`./stream.js`) and
+// the reader (`./flight-browser.js`) cannot disagree about it.
+//
+// # `application/json`, and not a script that runs
+//
+// The obvious mechanism is an inline script that pushes each chunk into a
+// global. `./runtime.js` and `./payload-rows.js` have already made the case
+// against it for uf's documents: a script that runs is a script a content
+// security policy has to allow, and application data in a script element with
+// no type is application data handed to the JavaScript parser. A JSON script
+// runs nothing, and a `MutationObserver` notices each one as it lands.
+//
+// # Text, and bytes that are not text
+//
+// A payload is bytes. Almost all of it is UTF-8 text — rows of JSON — and it is
+// written as a JSON string, which is what makes it readable in a document. A
+// typed array a server component passed as a prop is a row of raw bytes that
+// need not be valid UTF-8, and a decoder that replaced them would hand React a
+// different array. So a run of bytes that does not decode strictly is written
+// as base64 instead, and the reader turns each element back into exactly the
+// bytes the writer was given.
+//
+// A chunk boundary can fall inside a multi-byte character, which is not an
+// invalid sequence and must not be treated as one: the writer keeps an
+// incomplete tail back and prepends it to the next chunk.
+
+/** The attribute every payload chunk element carries. */
+export const FLIGHT_CHUNK_ATTRIBUTE: string = "data-uf-flight";
+
+/** What one element holds: text, bytes that are not text, or the end. */
+export type FlightChunk = string | {| readonly bytes: string |} | null;
+
+/**
+ * An element's text: a JSON value with the three escapes an inline element
+ * needs.
+ *
+ * `<` so a payload holding `</script>` cannot close the element early, and
+ * U+2028 and U+2029 because JSON is sometimes read as JavaScript. The same
+ * escape `./payload.js` applies, for the same reasons.
+ */
+function elementJson(value: FlightChunk): string {
+  return JSON.stringify(value)
+    .replace(/</g, "\\u003c")
+    .replace(/\u2028/g, "\\u2028")
+    .replace(/\u2029/g, "\\u2029");
+}
+
+/** The element for one chunk, or the end marker for `null`. */
+export function flightChunkElement(chunk: FlightChunk): string {
+  return `<script type="application/json" ${FLIGHT_CHUNK_ATTRIBUTE}>${elementJson(chunk)}</script>`;
+}
+
+/**
+ * A writer's state: the bytes of an incomplete character, carried to the next
+ * chunk.
+ *
+ * One per document, made by [`createChunkEncoder`], because the carry is a fact
+ * about the stream and two documents must never share one.
+ */
+export type ChunkEncoder = {|
+  /** The elements for one chunk of payload bytes; possibly none. */
+  readonly encode: (bytes: Uint8Array) => string,
+  /** The elements for whatever is carried, and the end marker. */
+  readonly end: () => string,
+|};
+
+export function createChunkEncoder(): ChunkEncoder {
+  const strict = new TextDecoder("utf-8", { fatal: true });
+  let carry: Uint8Array = new Uint8Array(0);
+
+  function encode(bytes: Uint8Array): string {
+    const joined = concat(carry, bytes);
+    const complete = completeLength(joined);
+    carry = joined.slice(complete);
+    if (complete === 0) {
+      return "";
+    }
+    const body = joined.subarray(0, complete);
+    try {
+      return flightChunkElement(strict.decode(body));
+    } catch {
+      return flightChunkElement({ bytes: base64(body) });
+    }
+  }
+
+  function end(): string {
+    const rest = carry;
+    carry = new Uint8Array(0);
+    const tail = rest.length === 0 ? "" : flightChunkElement({ bytes: base64(rest) });
+    return `${tail}${flightChunkElement(null)}`;
+  }
+
+  return { encode, end };
+}
+
+/**
+ * The bytes one element holds, or `null` for the end marker.
+ *
+ * Refuses anything that is not one of the three shapes the writer produces,
+ * rather than guessing: a document carrying some other value in an element
+ * with this attribute was not written by this module.
+ */
+export function flightChunkBytes(text: string): Uint8Array | null {
+  const value: mixed = JSON.parse(text);
+  if (value === null) {
+    return null;
+  }
+  if (typeof value === "string") {
+    return new TextEncoder().encode(value);
+  }
+  if (
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    typeof value.bytes === "string" &&
+    Object.keys(value).length === 1
+  ) {
+    return fromBase64(value.bytes);
+  }
+  throw new Error(`@uniflowed/router: a ${FLIGHT_CHUNK_ATTRIBUTE} element holds no payload chunk`);
+}
+
+/**
+ * How many leading bytes of `bytes` end on a character boundary.
+ *
+ * Walks back over at most three continuation bytes to the lead byte of the last
+ * character and keeps it back when the character is not yet whole. A byte that
+ * is not a valid lead at all is left in — the strict decoder is what says so,
+ * and holding it back would carry it forever.
+ */
+function completeLength(bytes: Uint8Array): number {
+  const length = bytes.length;
+  let at = length - 1;
+  let continuation = 0;
+  while (at >= 0 && continuation < 3 && (bytes[at] & 0xc0) === 0x80) {
+    at -= 1;
+    continuation += 1;
+  }
+  if (at < 0) {
+    return length;
+  }
+  const lead = bytes[at];
+  const needed = lead >= 0xf0 ? 4 : lead >= 0xe0 ? 3 : lead >= 0xc0 ? 2 : 1;
+  return length - at >= needed ? length : at;
+}
+
+function concat(first: Uint8Array, second: Uint8Array): Uint8Array {
+  if (first.length === 0) {
+    return second;
+  }
+  const joined = new Uint8Array(first.length + second.length);
+  joined.set(first, 0);
+  joined.set(second, first.length);
+  return joined;
+}
+
+function base64(bytes: Uint8Array): string {
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary);
+}
+
+function fromBase64(text: string): Uint8Array {
+  const binary = atob(text);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return bytes;
+}

package/internal/flight-ssr.js

@@ -0,0 +1,72 @@
+// @flow
+//
+// Internal to `@uniflowed/router`: React Server Components, while HTML renders.
+//
+// The HTML renderer does not render a route's modules. It reads the payload
+// the Flight renderer wrote (`../rsc.js`) with React's own Flight client and
+// renders what comes out, so the document is the payload's tree and not a
+// second rendering of the same modules — which is what lets a Server Component
+// be a module that neither this graph nor the browser ever evaluates.
+//
+// # Where a client component's server copy comes from
+//
+// A client reference in a payload names a chunk URL, which is the browser's
+// module. HTML still has to be rendered from the component, on the server, so
+// `@uniflowed/vite` builds a server copy of every client module and hands the
+// renderer a table from the browser's URL to that copy. React's Parcel client
+// resolves references through a global `parcelRequire`, exactly as in the
+// browser (`./flight-browser.js`), and this module is that hook on a server.
+//
+// The same global serves one application per process, which is what a uf
+// server is. `meta.publicUrl` is empty because the URLs a reference names are
+// already absolute paths: React asks the document to preload each chunk while
+// it renders, and those tags are right exactly as the payload spells them.
+
+import { createFromReadableStream } from "react-server-dom-parcel/client.edge";
+
+import type { FlightRoot } from "./flight.js";
+
+/** A module namespace, as far as the hook looks into one. */
+type ModuleNamespace = { +[string]: mixed };
+
+/** The server copy of the client module at a browser chunk URL. */
+export type ClientModuleLoader = (url: string) => Promise<ModuleNamespace>;
+
+/**
+ * Install the module hook React's Flight client resolves references through.
+ *
+ * Idempotent over the same loader and replaced by a different one, so a dev
+ * server that rebuilds its table installs the new table rather than keeping a
+ * stale one.
+ */
+export function installServerModules(load: ClientModuleLoader): void {
+  const loaded: Map<string, ModuleNamespace> = new Map();
+  // The browser's hook, on a server; `./flight-browser.js` has the shape.
+  function parcelRequire(id: string): ModuleNamespace {
+    const namespace = loaded.get(id);
+    if (namespace == null) {
+      throw new Error(
+        `@uniflowed/router: the client module ${id} was required before its server copy loaded`,
+      );
+    }
+    return namespace;
+  }
+  parcelRequire.load = (url: string): Promise<void> =>
+    load(url).then((namespace) => {
+      loaded.set(url, namespace);
+    });
+  parcelRequire.extendImportMap = (): void => {
+    throw new Error("@uniflowed/router: a payload asked for an import map, which uf never writes");
+  };
+  parcelRequire.meta = { publicUrl: "", devServer: null };
+  Object.defineProperty(globalThis, "parcelRequire", {
+    value: parcelRequire,
+    writable: true,
+    configurable: true,
+  });
+}
+
+/** Read a payload into its root value, as React's client does in the browser. */
+export function readPayload(stream: ReadableStream<Uint8Array>): Promise<FlightRoot> {
+  return createFromReadableStream(stream);
+}