@reckona/mreact-server 0.0.181 → 0.0.183

package/dist/reorder.js

@@ -1,17 +1,31 @@
 /** Moves out-of-order fragments into their matching placeholders within a DOM root. */
 export function applyOutOfOrderFragments(root = document) {
     const fragments = Array.from(root.querySelectorAll("template[data-mreact-oob-fragment]"));
+    const completionMarkers = new Map();
+    for (const marker of root.querySelectorAll("[data-mreact-oob-complete]")) {
+        const id = marker.getAttribute("data-mreact-oob-complete");
+        if (!completionMarkers.has(id)) {
+            completionMarkers.set(id, marker);
+        }
+    }
+    const placeholders = new Map();
+    for (const placeholder of root.querySelectorAll("[data-mreact-oob-placeholder]")) {
+        const id = placeholder.getAttribute("data-mreact-oob-placeholder");
+        if (!placeholders.has(id)) {
+            placeholders.set(id, placeholder);
+        }
+    }
     for (const fragment of fragments) {
         const id = fragment.dataset.mreactOobFragment;
         if (id === undefined) {
             continue;
         }
-        const completionMarker = Array.from(root.querySelectorAll("[data-mreact-oob-complete]")).find((candidate) => candidate.getAttribute("data-mreact-oob-complete") === id);
+        const completionMarker = completionMarkers.get(id);
         if (completionMarker === undefined) {
             continue;
         }
-        const placeholder = root.querySelector(`[data-mreact-oob-placeholder="${cssEscape(id)}"]`);
-        if (placeholder === null) {
+        const placeholder = placeholders.get(id);
+        if (placeholder === undefined) {
             continue;
         }
         placeholder.replaceWith(fragment.content.cloneNode(true));
@@ -19,7 +33,4 @@ export function applyOutOfOrderFragments(root = document) {
         completionMarker.remove();
     }
 }
-function cssEscape(value) {
-    return value.replaceAll("\\", "\\\\").replaceAll("\"", "\\\"");
-}
 //# sourceMappingURL=reorder.js.map

package/dist/reorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"reorder.js","sourceRoot":"","sources":["../src/reorder.ts"],"names":[],"mappings":"AAAA,uFAAuF;AACvF,MAAM,UAAU,wBAAwB,CAAC,OAAmB,QAAQ;IAClE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAC1B,IAAI,CAAC,gBAAgB,CACnB,oCAAoC,CACrC,CACF,CAAC;IAEF,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;QACjC,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,CAAC;QAE9C,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;YACrB,SAAS;QACX,CAAC;QAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACjC,IAAI,CAAC,gBAAgB,CAAU,4BAA4B,CAAC,CAC7D,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,0BAA0B,CAAC,KAAK,EAAE,CAAC,CAAC;QAEjF,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;YACnC,SAAS;QACX,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CACpC,iCAAiC,SAAS,CAAC,EAAE,CAAC,IAAI,CACnD,CAAC;QAEF,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACzB,SAAS;QACX,CAAC;QAED,WAAW,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1D,QAAQ,CAAC,MAAM,EAAE,CAAC;QAClB,gBAAgB,CAAC,MAAM,EAAE,CAAC;IAC5B,CAAC;AACH,CAAC;AAED,SAAS,SAAS,CAAC,KAAa;IAC9B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AACjE,CAAC","sourcesContent":["/** Moves out-of-order fragments into their matching placeholders within a DOM root. */\nexport function applyOutOfOrderFragments(root: ParentNode = document): void {\n  const fragments = Array.from(\n    root.querySelectorAll<HTMLTemplateElement>(\n      \"template[data-mreact-oob-fragment]\",\n    ),\n  );\n\n  for (const fragment of fragments) {\n    const id = fragment.dataset.mreactOobFragment;\n\n    if (id === undefined) {\n      continue;\n    }\n\n    const completionMarker = Array.from(\n      root.querySelectorAll<Element>(\"[data-mreact-oob-complete]\"),\n    ).find((candidate) => candidate.getAttribute(\"data-mreact-oob-complete\") === id);\n\n    if (completionMarker === undefined) {\n      continue;\n    }\n\n    const placeholder = root.querySelector<Element>(\n      `[data-mreact-oob-placeholder=\"${cssEscape(id)}\"]`,\n    );\n\n    if (placeholder === null) {\n      continue;\n    }\n\n    placeholder.replaceWith(fragment.content.cloneNode(true));\n    fragment.remove();\n    completionMarker.remove();\n  }\n}\n\nfunction cssEscape(value: string): string {\n  return value.replaceAll(\"\\\\\", \"\\\\\\\\\").replaceAll(\"\\\"\", \"\\\\\\\"\");\n}\n"]}
+{"version":3,"file":"reorder.js","sourceRoot":"","sources":["../src/reorder.ts"],"names":[],"mappings":"AAAA,uFAAuF;AACvF,MAAM,UAAU,wBAAwB,CAAC,OAAmB,QAAQ;IAClE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAC1B,IAAI,CAAC,gBAAgB,CACnB,oCAAoC,CACrC,CACF,CAAC;IACF,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAA0B,CAAC;IAC5D,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAU,4BAA4B,CAAC,EAAE,CAAC;QAClF,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;QAC3D,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;YAC/B,iBAAiB,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IACD,MAAM,YAAY,GAAG,IAAI,GAAG,EAA0B,CAAC;IACvD,KAAK,MAAM,WAAW,IAAI,IAAI,CAAC,gBAAgB,CAAU,+BAA+B,CAAC,EAAE,CAAC;QAC1F,MAAM,EAAE,GAAG,WAAW,CAAC,YAAY,CAAC,6BAA6B,CAAC,CAAC;QACnE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;YAC1B,YAAY,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;QACjC,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,CAAC;QAE9C,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;YACrB,SAAS;QACX,CAAC;QAED,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACnD,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;YACnC,SAAS;QACX,CAAC;QAED,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACzC,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,SAAS;QACX,CAAC;QAED,WAAW,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1D,QAAQ,CAAC,MAAM,EAAE,CAAC;QAClB,gBAAgB,CAAC,MAAM,EAAE,CAAC;IAC5B,CAAC;AACH,CAAC","sourcesContent":["/** Moves out-of-order fragments into their matching placeholders within a DOM root. */\nexport function applyOutOfOrderFragments(root: ParentNode = document): void {\n  const fragments = Array.from(\n    root.querySelectorAll<HTMLTemplateElement>(\n      \"template[data-mreact-oob-fragment]\",\n    ),\n  );\n  const completionMarkers = new Map<string | null, Element>();\n  for (const marker of root.querySelectorAll<Element>(\"[data-mreact-oob-complete]\")) {\n    const id = marker.getAttribute(\"data-mreact-oob-complete\");\n    if (!completionMarkers.has(id)) {\n      completionMarkers.set(id, marker);\n    }\n  }\n  const placeholders = new Map<string | null, Element>();\n  for (const placeholder of root.querySelectorAll<Element>(\"[data-mreact-oob-placeholder]\")) {\n    const id = placeholder.getAttribute(\"data-mreact-oob-placeholder\");\n    if (!placeholders.has(id)) {\n      placeholders.set(id, placeholder);\n    }\n  }\n\n  for (const fragment of fragments) {\n    const id = fragment.dataset.mreactOobFragment;\n\n    if (id === undefined) {\n      continue;\n    }\n\n    const completionMarker = completionMarkers.get(id);\n    if (completionMarker === undefined) {\n      continue;\n    }\n\n    const placeholder = placeholders.get(id);\n    if (placeholder === undefined) {\n      continue;\n    }\n\n    placeholder.replaceWith(fragment.content.cloneNode(true));\n    fragment.remove();\n    completionMarker.remove();\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-server",
-  "version": "0.0.181",
+  "version": "0.0.183",
   "description": "Server rendering, streaming, hydration, and Flight primitives for mreact.",
   "keywords": [
     "flight",
@@ -61,7 +61,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@reckona/mreact-shared": "0.0.181",
-    "@reckona/mreact-compat": "0.0.181"
+    "@reckona/mreact-compat": "0.0.183",
+    "@reckona/mreact-shared": "0.0.183"
   }
 }

package/src/boundary.ts

@@ -472,7 +472,7 @@ function isPromiseLike(value: unknown): value is PromiseLike<void> {
   return isPromiseLikeUnknown(value);
 }
 
-const outOfOrderReorderScript = `(()=>{function apply(root){const fragments=Array.from(root.querySelectorAll("template[data-mreact-oob-fragment]"));for(const fragment of fragments){const id=fragment.getAttribute("data-mreact-oob-fragment");if(id===null)continue;const markers=Array.from(root.querySelectorAll("[data-mreact-oob-complete]"));const marker=markers.find((candidate)=>candidate.getAttribute("data-mreact-oob-complete")===id);if(marker===undefined)continue;const placeholders=Array.from(root.querySelectorAll("[data-mreact-oob-placeholder]"));const placeholder=placeholders.find((candidate)=>candidate.getAttribute("data-mreact-oob-placeholder")===id);if(placeholder===undefined)continue;placeholder.replaceWith(fragment.content.cloneNode(true));fragment.remove();marker.remove();}}apply(document);new MutationObserver(()=>apply(document)).observe(document.documentElement,{childList:true,subtree:true});})();`;
+const outOfOrderReorderScript = `(()=>{function apply(root){const fragments=Array.from(root.querySelectorAll("template[data-mreact-oob-fragment]"));const markers=new Map();for(const marker of root.querySelectorAll("[data-mreact-oob-complete]")){const id=marker.getAttribute("data-mreact-oob-complete");if(!markers.has(id))markers.set(id,marker);}const placeholders=new Map();for(const placeholder of root.querySelectorAll("[data-mreact-oob-placeholder]")){const id=placeholder.getAttribute("data-mreact-oob-placeholder");if(!placeholders.has(id))placeholders.set(id,placeholder);}for(const fragment of fragments){const id=fragment.getAttribute("data-mreact-oob-fragment");if(id===null)continue;const marker=markers.get(id);if(marker===undefined)continue;const placeholder=placeholders.get(id);if(placeholder===undefined)continue;placeholder.replaceWith(fragment.content.cloneNode(true));fragment.remove();marker.remove();}}apply(document);new MutationObserver(()=>apply(document)).observe(document.documentElement,{childList:true,subtree:true});})();`;
 
 const reactSuspenseRevealScriptBody = `(self.$RC=self.$RC||function(bid,sid){var b=document.getElementById(bid);var s=document.getElementById(sid);if(!b||!s)return;var p=b.parentNode;var e=b.nextSibling;var d=0;var r=[];for(var n=e;n;n=n.nextSibling){if(n.nodeType===8){if(n.data==="$"||n.data==="$?"||n.data==="$!")d++;else if(n.data==="/$"){if(d===0){e=n;break;}d--;}}r.push(n);}for(var i=0;r[i];i++)p.removeChild(r[i]);while(s.firstChild)p.insertBefore(s.firstChild,e);s.remove();b.data="$";})`;
 

package/src/flight.ts

@@ -1704,202 +1704,228 @@ function parseReactFlightId(value: string): number {
   return Number.parseInt(value, 16);
 }
 
-async function serializeFlightValue(
+type FlightSerializationResult<T extends FlightModel = FlightModel> = T | Promise<T>;
+
+function serializeFlightValue(
   value: unknown,
   state: FlightSerializationState,
   depth: number,
-): Promise<FlightModel> {
+): FlightSerializationResult {
   if (depth > MAX_FLIGHT_DECODE_DEPTH) flightTooDeep();
 
-  const awaited = await value;
+  if (isThenable(value)) {
+    return Promise.resolve(value).then((awaited) => serializeFlightValue(awaited, state, depth));
+  }
 
-  if (awaited === null) {
+  if (value === null) {
     return null;
   }
 
-  if (awaited === undefined) {
+  if (value === undefined) {
     return { kind: "undefined" };
   }
 
-  if (typeof awaited === "string" || typeof awaited === "boolean") {
-    return awaited;
+  if (typeof value === "string" || typeof value === "boolean") {
+    return value;
   }
 
-  if (typeof awaited === "number") {
-    if (Number.isNaN(awaited)) {
+  if (typeof value === "number") {
+    if (Number.isNaN(value)) {
       return { kind: "number", value: "NaN" };
     }
 
-    if (awaited === Infinity) {
+    if (value === Infinity) {
       return { kind: "number", value: "Infinity" };
     }
 
-    if (awaited === -Infinity) {
+    if (value === -Infinity) {
       return { kind: "number", value: "-Infinity" };
     }
 
-    if (Object.is(awaited, -0)) {
+    if (Object.is(value, -0)) {
       return { kind: "number", value: "-0" };
     }
 
-    return awaited;
+    return value;
   }
 
-  if (typeof awaited === "bigint") {
-    return { kind: "bigint", value: awaited.toString() };
+  if (typeof value === "bigint") {
+    return { kind: "bigint", value: value.toString() };
   }
 
-  if (typeof awaited === "symbol") {
-    return { kind: "symbol", name: Symbol.keyFor(awaited) ?? awaited.description ?? "" };
+  if (typeof value === "symbol") {
+    return { kind: "symbol", name: Symbol.keyFor(value) ?? value.description ?? "" };
   }
 
-  if (Array.isArray(awaited)) {
-    return await Promise.all(awaited.map((item) => serializeFlightValue(item, state, depth + 1)));
+  if (Array.isArray(value)) {
+    return resolveFlightArray(value.map((item) => serializeFlightValue(item, state, depth + 1)));
   }
 
-  if (isServerReference(awaited)) {
-    return {
+  if (isServerReference(value)) {
+    const id = getServerReferenceId(value, state);
+    return resolveFlightResult(id, (resolvedId) => ({
       kind: "server-reference",
-      id: await getServerReferenceId(awaited, state),
-    };
+      id: resolvedId,
+    }));
   }
 
-  if (isReactCompatElement(awaited)) {
-    return await serializeElement(awaited, state, depth + 1);
+  if (isReactCompatElement(value)) {
+    return serializeElement(value, state, depth + 1);
   }
 
-  if (awaited instanceof Date) {
-    return { kind: "date", value: awaited.toJSON() };
+  if (value instanceof Date) {
+    return { kind: "date", value: value.toJSON() };
   }
 
-  if (awaited instanceof Map) {
-    return {
-      kind: "map",
-      entries: await Promise.all(
-        Array.from(awaited.entries()).map(
-          async ([key, value]) =>
-            [
-              await serializeFlightValue(key, state, depth + 1),
-              await serializeFlightValue(value, state, depth + 1),
-            ] as [FlightModel, FlightModel],
+  if (value instanceof Map) {
+    const entries = resolveFlightArray(
+      Array.from(value.entries()).map(([key, entryValue]) =>
+        resolveFlightTuple(
+          serializeFlightValue(key, state, depth + 1),
+          serializeFlightValue(entryValue, state, depth + 1),
         ),
       ),
-    };
+    );
+    return resolveFlightResult(entries, (resolvedEntries) => ({
+      kind: "map",
+      entries: resolvedEntries,
+    }));
   }
 
-  if (awaited instanceof Set) {
-    return {
-      kind: "set",
-      values: await Promise.all(
-        Array.from(awaited.values()).map((value) => serializeFlightValue(value, state, depth + 1)),
+  if (value instanceof Set) {
+    const values = resolveFlightArray(
+      Array.from(value.values()).map((entryValue) =>
+        serializeFlightValue(entryValue, state, depth + 1),
       ),
-    };
+    );
+    return resolveFlightResult(values, (resolvedValues) => ({
+      kind: "set",
+      values: resolvedValues,
+    }));
   }
 
-  if (isFormDataLike(awaited)) {
-    return {
-      kind: "form-data",
-      entries: await Promise.all(
-        Array.from(awaited.entries()).map(
-          async ([key, value]) =>
-            [key, await serializeFlightValue(value, state, depth + 1)] as [string, FlightModel],
-        ),
+  if (isFormDataLike(value)) {
+    const entries = resolveFlightArray(
+      Array.from(value.entries()).map(([key, entryValue]) =>
+        resolveFlightResult(serializeFlightValue(entryValue, state, depth + 1), (resolvedValue) => [
+          key,
+          resolvedValue,
+        ] as [string, FlightModel]),
       ),
-    };
+    );
+    return resolveFlightResult(entries, (resolvedEntries) => ({
+      kind: "form-data",
+      entries: resolvedEntries,
+    }));
   }
 
-  if (isIterableObject(awaited)) {
-    return {
+  if (isIterableObject(value)) {
+    const values = resolveFlightArray(
+      Array.from(value).map((entryValue) => serializeFlightValue(entryValue, state, depth + 1)),
+    );
+    return resolveFlightResult(values, (resolvedValues) => ({
       kind: "iterable",
-      values: await Promise.all(
-        Array.from(awaited).map((value) => serializeFlightValue(value, state, depth + 1)),
-      ),
-    };
+      values: resolvedValues,
+    }));
   }
 
-  if (awaited instanceof Error) {
+  if (value instanceof Error) {
     return {
       kind: "error",
-      name: awaited.name,
-      message: awaited.message,
+      name: value.name,
+      message: value.message,
     };
   }
 
-  if (typeof awaited === "object") {
-    return await serializeObject(awaited as Record<string, unknown>, state, depth + 1);
+  if (typeof value === "object") {
+    return serializeObject(value as Record<string, unknown>, state, depth + 1);
   }
 
-  throw new TypeError(`Unsupported Flight value: ${typeof awaited}`);
+  throw new TypeError(`Unsupported Flight value: ${typeof value}`);
 }
 
-async function serializeElement(
+function serializeElement(
   element: ReactCompatElementLike,
   state: FlightSerializationState,
   depth: number,
-): Promise<FlightElementModel | FlightModel> {
+): FlightSerializationResult<FlightElementModel | FlightModel> {
   if (typeof element.type === "function") {
-    return await serializeFlightValue(element.type(element.props), state, depth + 1);
+    return serializeFlightValue(element.type(element.props), state, depth + 1);
   }
 
   if (isClientReference(element.type)) {
-    return {
+    const elementType = element.type;
+    const props = serializeProps(element.props, state, depth + 1);
+    return resolveFlightResult(props, (resolvedProps) => ({
       kind: "element",
       type: {
         kind: "client-reference",
-        id: getClientReferenceId(element.type, state),
+        id: getClientReferenceId(elementType, state),
       },
       key: element.key,
-      props: await serializeProps(element.props, state, depth + 1),
-    };
+      props: resolvedProps,
+    }));
   }
 
   if (typeof element.type === "string") {
-    return {
+    const elementType = element.type;
+    const props = serializeProps(element.props, state, depth + 1);
+    return resolveFlightResult(props, (resolvedProps) => ({
       kind: "element",
-      type: element.type,
+      type: elementType,
       key: element.key,
-      props: await serializeProps(element.props, state, depth + 1),
-    };
+      props: resolvedProps,
+    }));
   }
 
   if (element.type === REACT_COMPAT_FRAGMENT_TYPE) {
-    return {
+    const props = serializeProps(element.props, state, depth + 1);
+    return resolveFlightResult(props, (resolvedProps) => ({
       kind: "element",
       type: { kind: "fragment" },
       key: element.key,
-      props: await serializeProps(element.props, state, depth + 1),
-    };
+      props: resolvedProps,
+    }));
   }
 
   throw new TypeError("Unsupported Flight element type.");
 }
 
-async function serializeProps(
+function serializeProps(
   props: Record<string, unknown>,
   state: FlightSerializationState,
   depth: number,
-): Promise<Record<string, FlightModel>> {
-  const entries = await Promise.all(
-    Object.entries(props).map(
-      async ([key, value]) => [key, await serializeFlightValue(value, state, depth + 1)] as const,
+): FlightSerializationResult<Record<string, FlightModel>> {
+  const entries = resolveFlightArray(
+    Object.entries(props).map(([key, value]) =>
+      resolveFlightResult(serializeFlightValue(value, state, depth + 1), (resolvedValue) => [
+        key,
+        resolvedValue,
+      ]),
     ),
   );
 
-  return Object.fromEntries(entries);
+  return resolveFlightResult(entries, (resolvedEntries) => Object.fromEntries(resolvedEntries));
 }
 
-async function serializeObject(
+function serializeObject(
   object: Record<string, unknown>,
   state: FlightSerializationState,
   depth: number,
-): Promise<FlightObjectModel> {
-  return Object.fromEntries(
-    await Promise.all(
-      Object.entries(object).map(
-        async ([key, value]) => [key, await serializeFlightValue(value, state, depth + 1)] as const,
+): FlightSerializationResult<FlightObjectModel> {
+  const entries = resolveFlightArray(
+    Object.entries(object).map(([key, value]) =>
+      resolveFlightResult(
+        serializeFlightValue(value, state, depth + 1),
+        (resolvedValue) => [key, resolvedValue] as const,
       ),
     ),
-  ) as FlightObjectModel;
+  );
+
+  return resolveFlightResult(
+    entries,
+    (resolvedEntries) => Object.fromEntries(resolvedEntries) as FlightObjectModel,
+  );
 }
 
 function getClientReferenceId(reference: ClientReference, state: FlightSerializationState): number {
@@ -1921,14 +1947,24 @@ function getClientReferenceId(reference: ClientReference, state: FlightSerializa
   return id;
 }
 
-async function getServerReferenceId(
+function getServerReferenceId(
   reference: ServerReference,
   state: FlightSerializationState,
-): Promise<number> {
+): number | Promise<number> {
   const serializedBound =
     reference.bound === undefined
       ? undefined
-      : await Promise.all(reference.bound.map((value) => serializeFlightValue(value, state, 0)));
+      : resolveFlightArray(reference.bound.map((value) => serializeFlightValue(value, state, 0)));
+  return resolveFlightResult(serializedBound, (resolvedBound) =>
+    getServerReferenceIdForBound(reference, state, resolvedBound),
+  );
+}
+
+function getServerReferenceIdForBound(
+  reference: ServerReference,
+  state: FlightSerializationState,
+  serializedBound: FlightModel[] | undefined,
+): number {
   const key = `${reference.moduleId}:${reference.exportName}:${JSON.stringify(serializedBound ?? null)}`;
   const existing = state.serverReferenceIndexes.get(key);
 
@@ -1947,6 +1983,24 @@ async function getServerReferenceId(
   return id;
 }
 
+function resolveFlightArray<T>(values: Array<T | Promise<T>>): T[] | Promise<T[]> {
+  return values.some(isThenable) ? Promise.all(values) : (values as T[]);
+}
+
+function resolveFlightTuple<TLeft, TRight>(
+  left: TLeft | Promise<TLeft>,
+  right: TRight | Promise<TRight>,
+): [TLeft, TRight] | Promise<[TLeft, TRight]> {
+  return isThenable(left) || isThenable(right) ? Promise.all([left, right]) : [left, right];
+}
+
+function resolveFlightResult<T, TResult>(
+  value: T | Promise<T>,
+  map: (value: T) => TResult,
+): TResult | Promise<TResult> {
+  return isThenable(value) ? value.then(map) : map(value);
+}
+
 function isReactCompatElement(value: unknown): value is ReactCompatElementLike {
   return (
     typeof value === "object" &&
@@ -1955,6 +2009,14 @@ function isReactCompatElement(value: unknown): value is ReactCompatElementLike {
   );
 }
 
+function isThenable(value: unknown): value is PromiseLike<unknown> {
+  return (
+    value !== null &&
+    (typeof value === "object" || typeof value === "function") &&
+    typeof (value as { then?: unknown }).then === "function"
+  );
+}
+
 function isFormDataLike(value: unknown): value is FormData {
   return typeof FormData !== "undefined" && value instanceof FormData;
 }

package/src/reorder.ts

@@ -5,6 +5,20 @@ export function applyOutOfOrderFragments(root: ParentNode = document): void {
       "template[data-mreact-oob-fragment]",
     ),
   );
+  const completionMarkers = new Map<string | null, Element>();
+  for (const marker of root.querySelectorAll<Element>("[data-mreact-oob-complete]")) {
+    const id = marker.getAttribute("data-mreact-oob-complete");
+    if (!completionMarkers.has(id)) {
+      completionMarkers.set(id, marker);
+    }
+  }
+  const placeholders = new Map<string | null, Element>();
+  for (const placeholder of root.querySelectorAll<Element>("[data-mreact-oob-placeholder]")) {
+    const id = placeholder.getAttribute("data-mreact-oob-placeholder");
+    if (!placeholders.has(id)) {
+      placeholders.set(id, placeholder);
+    }
+  }
 
   for (const fragment of fragments) {
     const id = fragment.dataset.mreactOobFragment;
@@ -13,19 +27,13 @@ export function applyOutOfOrderFragments(root: ParentNode = document): void {
       continue;
     }
 
-    const completionMarker = Array.from(
-      root.querySelectorAll<Element>("[data-mreact-oob-complete]"),
-    ).find((candidate) => candidate.getAttribute("data-mreact-oob-complete") === id);
-
+    const completionMarker = completionMarkers.get(id);
     if (completionMarker === undefined) {
       continue;
     }
 
-    const placeholder = root.querySelector<Element>(
-      `[data-mreact-oob-placeholder="${cssEscape(id)}"]`,
-    );
-
-    if (placeholder === null) {
+    const placeholder = placeholders.get(id);
+    if (placeholder === undefined) {
       continue;
     }
 
@@ -34,7 +42,3 @@ export function applyOutOfOrderFragments(root: ParentNode = document): void {
     completionMarker.remove();
   }
 }
-
-function cssEscape(value: string): string {
-  return value.replaceAll("\\", "\\\\").replaceAll("\"", "\\\"");
-}