@reckona/mreact-router 0.0.155 → 0.0.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-router",
-  "version": "0.0.155",
+  "version": "0.0.157",
   "description": "File-system app router, SSR, actions, and deployment adapters for mreact.",
   "keywords": [
     "jsx",
@@ -105,20 +105,20 @@
   },
   "dependencies": {
     "typescript": "^6.0.3",
-    "@reckona/mreact": "0.0.155",
-    "@reckona/mreact-compat": "0.0.155",
-    "@reckona/mreact-compiler": "0.0.155",
-    "@reckona/mreact-devtools": "0.0.155",
-    "@reckona/mreact-reactive-core": "0.0.155",
-    "@reckona/mreact-query": "0.0.155",
-    "@reckona/mreact-reactive-dom": "0.0.155",
-    "@reckona/mreact-server": "0.0.155",
-    "@reckona/mreact-shared": "0.0.155"
+    "@reckona/mreact-compat": "0.0.157",
+    "@reckona/mreact-devtools": "0.0.157",
+    "@reckona/mreact-query": "0.0.157",
+    "@reckona/mreact-reactive-core": "0.0.157",
+    "@reckona/mreact-compiler": "0.0.157",
+    "@reckona/mreact": "0.0.157",
+    "@reckona/mreact-reactive-dom": "0.0.157",
+    "@reckona/mreact-server": "0.0.157",
+    "@reckona/mreact-shared": "0.0.157"
   },
   "peerDependencies": {
     "vite": ">=8 <9"
   },
   "optionalDependencies": {
-    "@reckona/mreact-router-native": "0.0.155"
+    "@reckona/mreact-router-native": "0.0.157"
   }
 }

package/src/adapters/cloudflare.ts

@@ -5,9 +5,11 @@ import {
   __MREACT_QUERY_STATE_SCRIPT_ID,
   createQueryClient,
   dehydrate,
+  installQueryAsyncStorage,
   isQueryClientScopeUnavailableError,
   runWithQueryClient,
   type DehydratedQueryClient,
+  type QueryAsyncStorage,
   type QueryClient,
 } from "@reckona/mreact-query";
 import type {
@@ -489,18 +491,92 @@ function injectCloudflareQueryStateScript(html: string, state: DehydratedQueryCl
     : `${html}${script}`;
 }
 
-function runWithCloudflareQueryClient<T>(queryClient: QueryClient, fn: () => T): T {
+async function runWithCloudflareQueryClient<T>(
+  queryClient: QueryClient,
+  fn: () => T,
+): Promise<Awaited<T>> {
   try {
-    return runWithQueryClient(queryClient, fn);
+    return await runWithQueryClient(queryClient, fn);
   } catch (error) {
     if (isQueryClientScopeUnavailableError(error)) {
-      return fn();
+      installQueryAsyncStorage(cloudflareQueryClientStorage);
+      return await runWithSerializedCloudflareQueryClient(queryClient, fn);
     }
 
     throw error;
   }
 }
 
+const cloudflareQueryClientStorage = createCloudflareQueryClientStorage();
+let cloudflareQueryClientFallbackQueue: Promise<void> = Promise.resolve();
+
+async function runWithSerializedCloudflareQueryClient<T>(
+  queryClient: QueryClient,
+  fn: () => T,
+): Promise<Awaited<T>> {
+  const previous = cloudflareQueryClientFallbackQueue;
+  let releaseCurrent!: () => void;
+  const current = new Promise<void>((resolve) => {
+    releaseCurrent = resolve;
+  });
+  cloudflareQueryClientFallbackQueue = previous.then(() => current, () => current);
+
+  await previous;
+
+  try {
+    return await runWithQueryClient(queryClient, fn);
+  } finally {
+    releaseCurrent();
+  }
+}
+
+function createCloudflareQueryClientStorage(): QueryAsyncStorage<QueryClient> {
+  const stores: QueryClient[] = [];
+
+  return {
+    getStore() {
+      return stores.at(-1);
+    },
+    run<TResult>(store: QueryClient, callback: () => TResult): TResult {
+      stores.push(store);
+      let popSynchronously = true;
+
+      try {
+        const result = callback();
+
+        if (isPromiseLike(result)) {
+          popSynchronously = false;
+          return Promise.resolve(result).finally(() => {
+            removeCloudflareQueryClientStore(stores, store);
+          }) as TResult;
+        }
+
+        return result;
+      } finally {
+        if (popSynchronously) {
+          removeCloudflareQueryClientStore(stores, store);
+        }
+      }
+    },
+  };
+}
+
+function removeCloudflareQueryClientStore(stores: QueryClient[], store: QueryClient): void {
+  const index = stores.lastIndexOf(store);
+
+  if (index >= 0) {
+    stores.splice(index, 1);
+  }
+}
+
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return (
+    (typeof value === "object" || typeof value === "function") &&
+    value !== null &&
+    typeof (value as { then?: unknown }).then === "function"
+  );
+}
+
 async function dispatchCloudflareServerRoute<Env>(
   module: CloudflareServerRouteModule<Env>,
   request: Request,

package/src/client.ts

@@ -3786,6 +3786,13 @@ function __mreactApplyOutOfOrderFragments(root) {
       continue;
     }
 
+    const completionMarker = Array.from(root.querySelectorAll("[data-mreact-oob-complete]"))
+      .find((candidate) => candidate.getAttribute("data-mreact-oob-complete") === id);
+
+    if (completionMarker === undefined) {
+      continue;
+    }
+
     const placeholder = Array.from(root.querySelectorAll("[data-mreact-oob-placeholder]"))
       .find((candidate) => candidate.getAttribute("data-mreact-oob-placeholder") === id);
 
@@ -3795,6 +3802,7 @@ function __mreactApplyOutOfOrderFragments(root) {
 
     placeholder.replaceWith(fragment.content.cloneNode(true));
     fragment.remove();
+    completionMarker.remove();
   }
 }
 

package/src/render.ts

@@ -3500,9 +3500,12 @@ async function renderVisibleOutOfOrderFragment<T>(
   );
   await fragmentSink.drain();
 
-  sink.append(
-    `<template data-mreact-oob-fragment="${escapeHtmlAttribute(id)}">${fragmentSink.toString()}</template>`,
-  );
+  sink.append(renderVisibleOutOfOrderFragmentHtml(id, fragmentSink.toString()));
+}
+
+function renderVisibleOutOfOrderFragmentHtml(id: string, html: string): string {
+  const escapedId = escapeHtmlAttribute(id);
+  return `<template data-mreact-oob-fragment="${escapedId}">${html}</template><mreact-oob-complete hidden data-mreact-oob-complete="${escapedId}"></mreact-oob-complete>`;
 }
 
 async function appendServerStreamModule(