A preview can hold every resource in its loading or error arm

An editor's canvas sets data-wf-resource="loading" or "error" on the
page's root, and each resource reads as in that arm, an error it has not
met reading as a 503 a server gives, so a page is designed as it loads
and as it fails without breaking its requests. The request still runs
and its answer is kept for when the arm is let go. A signal, so the page
follows the attribute as it comes and goes, as data-wf-validation does.

Author: monzeromer-dev

src/runtime/modules/net.js

@@ -241,10 +241,39 @@
   /// that fails keeps the data and "ready", and sets `error()` — until the
   /// next answer clears it — so a page can say the data is stale.
   /// `pending()` is true while any request of it runs, either kind.
+  /// The arm an editor's preview holds every resource in — the page's root
+  /// carrying `data-wf-resource="loading"` or `"error"` — so a page can be
+  /// designed as it loads and as it fails without breaking its requests.
+  /// A signal, so the page follows the attribute as it comes and goes.
+  let heldArm = null;
+  function armHeld() {
+    if (typeof document === "undefined" || !document.documentElement) return null;
+    if (!heldArm) {
+      const root = document.documentElement;
+      const read = () => {
+        const v = root.getAttribute("data-wf-resource");
+        return v === "loading" || v === "error" ? v : null;
+      };
+      heldArm = signal(read());
+      if (typeof MutationObserver === "function") {
+        new MutationObserver(() => heldArm.set(read()))
+          .observe(root, { attributes: true, attributeFilter: ["data-wf-resource"] });
+      }
+    }
+    return heldArm();
+  }
+
   function resource(url, options) {
-    const state = signal("loading");
+    const real = signal("loading");
     const data = signal(null);
-    const error = signal(null);
+    const failed = signal(null);
+    // What the page reads: the request's own state and error, unless the
+    // preview holds the arm, when an error it has not met reads as one a
+    // server gives.
+    const state = () => armHeld() || real();
+    state.set = (v) => real.set(v);
+    const error = () => armHeld() === "error" ? failed() || netError("status", "503 Service Unavailable", { status: 503 }) : failed();
+    error.set = (v) => failed.set(v);
     const refreshing = signal(false);
     const pending = signal(false);
     const opts = requestOptions(options);

tests/js/net.test.mjs

@@ -23,7 +23,7 @@ function load(fetchImpl, { online = true } = {}) {
     window, document, Node, Element, DocumentFragment, setTimeout, clearTimeout,
     fetchImpl, navigator, globalThis.AbortController, class {},
   );
-  return { WF };
+  return { WF, document };
 }
 
 /// Every microtask the engine has queued, run.
@@ -167,3 +167,31 @@ test("the network is a value a page can read", () => {
   assert.equal(typeof net.effectiveType, "string");
   assert.equal(typeof net.saveData, "boolean");
 });
+
+test("an editor's preview holds every resource in its loading or error arm", async () => {
+  {
+    const { WF, document } = load(async () => response([{ id: 1 }]));
+    document.documentElement.setAttribute("data-wf-resource", "error");
+    const rows = WF.resource("/api/rows", null);
+    await settle();
+    assert.equal(rows.state(), "error", "held in the error arm, though the request answered");
+    assert.equal(rows.error().status, 503, "with an error a server gives");
+    assert.equal(rows.error().message, "503 Service Unavailable");
+    assert.deepEqual(rows.data(), [{ id: 1 }], "and the answer kept for when it is let go");
+  }
+  {
+    const { WF, document } = load(async () => response([]));
+    document.documentElement.setAttribute("data-wf-resource", "loading");
+    const rows = WF.resource("/api/rows", null);
+    await settle();
+    assert.equal(rows.state(), "loading");
+    assert.equal(rows.error(), null);
+  }
+  {
+    const { WF, document } = load(async () => response([]));
+    document.documentElement.setAttribute("data-wf-resource", "ready");
+    const rows = WF.resource("/api/rows", null);
+    await settle();
+    assert.equal(rows.state(), "ready", "anything else is the request's own state");
+  }
+});