@loadbare/app 0.20.0 → 0.22.0

package/dist/hub/lb-hub.browser.js

@@ -1,5 +1,5 @@
 /// <reference lib="dom" />
-import { ATTR_COLUMN, ATTR_COLUMN_VALUE, ATTR_KEY_VALUE, ATTR_PAGE, ATTR_PAGE_TITLE, ATTR_QUERY, ATTR_REQUEST, ATTR_REQUEST_ERROR, ATTR_REQUEST_PENDING, ATTR_REQUEST_REFUSED, ATTR_ROW_EDITING, ATTR_SELECT, ATTR_URL_LINK, ATTR_URL_PUSH, ATTR_URL_UNKNOWN, CHOICES_QUERY, COMMAND_EDIT, COMMAND_NEW, COMMAND_RELEASE, COMMAND_SORT, HUB_TAG_NAME, KIND_ROW, LB_DONE_EVENT_NAME, LB_ENDPOINT, LB_EVENT_NAME, LB_REFUSAL_STATUS, LB_REQUEST_TIMEOUT_MS, LB_COMMAND_PREFIX, LB_RESERVED_PREFIX, LIVE_ROW, REQUEST_ROW_DELETE, REQUEST_ROW_INSERT, REQUEST_ROW_UPDATE, URL_COLUMN_PAGE_LABEL, URL_COLUMN_PAGE_UNKNOWN, URL_COLUMN_PATH, URL_QUERY, } from "../core/lb-constants.js";
+import { ATTR_COLUMN, ATTR_COLUMN_VALUE, ATTR_KEY_VALUE, ATTR_PAGE, ATTR_PAGE_TITLE, ATTR_QUERY, ATTR_REQUEST, ATTR_REQUEST_ERROR, ATTR_REQUEST_PENDING, ATTR_REQUEST_REFUSED, ATTR_ROW_EDITING, ATTR_SELECT, ATTR_URL_LINK, ATTR_URL_PUSH, ATTR_URL_UNKNOWN, CHOICES_QUERY, COMMAND_EDIT, COMMAND_NEW, COMMAND_RELEASE, COMMAND_SORT, HUB_COLUMN_AS_OF, HUB_COLUMN_ERROR, HUB_COLUMN_LOAD_STATE, HUB_COLUMN_PENDING, HUB_COLUMN_SERVER_STATE, HUB_ERROR_NETWORK, HUB_ERROR_TIMEOUT, HUB_LOAD_FAILED, HUB_LOAD_LOADED, HUB_LOAD_LOADING, HUB_QUERY, HUB_SERVER_FAILING, HUB_SERVER_REACHABLE, HUB_SERVER_UNREACHABLE, HUB_TAG_NAME, KIND_ROW, LB_DONE_EVENT_NAME, LB_ENDPOINT, LB_EVENT_NAME, LB_REFUSAL_STATUS, LB_REQUEST_TIMEOUT_MS, LB_COMMAND_PREFIX, LB_RESERVED_PREFIX, LIVE_ROW, REQUEST_ROW_DELETE, REQUEST_ROW_INSERT, REQUEST_ROW_UPDATE, URL_COLUMN_PAGE_LABEL, URL_COLUMN_PAGE_UNKNOWN, URL_COLUMN_PATH, URL_QUERY, } from "../core/lb-constants.js";
 import { isRowRequest, nextLocation, pageNameFor, } from "../core/lb-types.js";
 import { applyResponse, applyRow, blankRow, focusIn, gatherInto, select, forget, isControl, isFormAssociated, keptAnswer, resort, within, } from "./lb-apply.js";
 import { attachPlaced, detachRemoved, placed, requestDone, upgradeAbsent, } from "./lb-lifecycle.js";
@@ -143,6 +143,18 @@ class RefusedError extends Error {
         this.name = "RefusedError";
     }
 }
+/**
+ * A round trip that failed, and why, in the words `lb-error` uses: the
+ * network, the deadline, or the HTTP status the server answered with.
+ */
+class RoundTripError extends Error {
+    reason;
+    constructor(reason, message) {
+        super(message);
+        this.reason = reason;
+        this.name = "RoundTripError";
+    }
+}
 const shown = [];
 function validates(el) {
     const v = el;
@@ -390,19 +402,28 @@ async function fetchItems(page, request) {
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), LB_REQUEST_TIMEOUT_MS);
     try {
-        // An empty body is how the hub asks for the page's queries.
-        const res = await fetch(url, {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            body: JSON.stringify(request ?? {}),
-            signal: controller.signal,
-        });
+        let res;
+        try {
+            // An empty body is how the hub asks for the page's queries.
+            res = await fetch(url, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify(request ?? {}),
+                signal: controller.signal,
+            });
+        }
+        catch (err) {
+            const reason = controller.signal.aborted
+                ? HUB_ERROR_TIMEOUT
+                : HUB_ERROR_NETWORK;
+            throw new RoundTripError(reason, `lb-hub: ${reason === HUB_ERROR_TIMEOUT ? "no answer in time" : String(err)} for ${url}`);
+        }
         if (res.status === LB_REFUSAL_STATUS) {
             const body = (await res.json().catch(() => ({})));
             throw new RefusedError(body.refusal ?? {});
         }
         if (!res.ok) {
-            throw new Error(`lb-hub: server responded ${res.status} for ${url}`);
+            throw new RoundTripError(String(res.status), `lb-hub: server responded ${res.status} for ${url}`);
         }
         return (await res.json());
     }
@@ -485,6 +506,16 @@ function point(form, row, key, live) {
  * Let a pointed form go: empty it and drop its key. A form inside a
  * `<dialog>` closes it, and the dialog's `close` finds nothing left to do.
  */
+/**
+ * Whether a form's controls show a row on record: one whose key is not
+ * empty, as a form over a `row` query does once the answer to its insert
+ * lands the new row on it.
+ */
+function onRecord(form) {
+    const control = controlsOf(form)[0];
+    const query = control && queryOf(control);
+    return !!query && !!keyFrom(control, query);
+}
 function release(form) {
     if (!pointed.has(form))
         return;
@@ -544,6 +575,12 @@ class LbHub extends HTMLElement {
      * lands, so each custom element in it is filled before it is attached.
      */
     unplaced = [];
+    /** The hub's own state, as the query `lb-hub` serves it. */
+    trips = 0;
+    loadState = HUB_LOAD_LOADING;
+    serverState = "";
+    error = "";
+    asOf = "";
     connectedCallback() {
         this.main = this.querySelector("main");
         // Completed in the capture phase, on the way down, so every ancestor
@@ -750,6 +787,11 @@ class LbHub extends HTMLElement {
             withdraw(refused);
         }
         const at = here();
+        // A form pointed at a live row finishes an edit begun in that row, so
+        // its request is sent from inside the row's list. The row is the one it
+        // was pointed at when sent.
+        const saving = savedFrom.get(request);
+        const within = (saving && pointed.get(saving)) || origin;
         const items = await this.roundTrip(this.page, request, origin);
         if (items instanceof RefusedError)
             this.refused(request, items, origin);
@@ -765,7 +807,7 @@ class LbHub extends HTMLElement {
             const load = items.filter((item) => item !== url);
             landed = load;
             if (url === undefined) {
-                applyResponse(this, load, { requested: true, origin });
+                applyResponse(this, load, { requested: true, origin: within });
             }
             else
                 landed = await this.follow(url, load, origin);
@@ -775,12 +817,14 @@ class LbHub extends HTMLElement {
             for (const box of selectorsFor(this, request.query))
                 select(box, false);
         }
-        // A pointed form has done what it was pointed for, and lets go.
-        const saved = savedFrom.get(request);
-        if (saved)
-            release(saved);
-        else
-            insertedFrom.get(request)?.reset();
+        // A pointed form has done what it was pointed for, and lets go. A form
+        // an insert was gathered from starts over, unless the answer landed the
+        // new row on it.
+        const inserted = insertedFrom.get(request);
+        if (saving)
+            release(saving);
+        else if (inserted && !onRecord(inserted))
+            inserted.reset();
         done(origin, request, landed);
     }
     /**
@@ -813,26 +857,84 @@ class LbHub extends HTMLElement {
      * flight, and `lb-request-error` when it fails. The error on failure.
      */
     async roundTrip(page, request, origin) {
+        // A page load says how the page showing got its data, unless the URL
+        // has moved on by the time it returns, and a later load says instead.
+        const load = request === undefined;
+        const at = here();
         pending(origin, true);
+        this.trips++;
+        if (load)
+            this.loadState = HUB_LOAD_LOADING;
+        this.landHub();
         try {
-            return await fetchItems(page, request);
+            const items = await fetchItems(page, request);
+            this.serverState = HUB_SERVER_REACHABLE;
+            this.error = "";
+            this.asOf = new Date().toISOString();
+            if (load && here() === at)
+                this.loadState = HUB_LOAD_LOADED;
+            return items;
         }
         catch (err) {
             // A refusal is the handler's answer, not a failure: the request's
             // sender shows it, and nothing is reported.
-            if (err instanceof RefusedError)
+            if (err instanceof RefusedError) {
+                this.serverState = HUB_SERVER_REACHABLE;
+                this.error = "";
                 return err;
+            }
             console.error(`lb-hub: request failed for '${page}'`, err);
             origin?.setAttribute(ATTR_REQUEST_ERROR, "");
+            // A server that answered with an error is there and failing; one that
+            // never answered is out of reach.
+            this.error = err instanceof RoundTripError ? err.reason : HUB_ERROR_NETWORK;
+            this.serverState =
+                err instanceof RoundTripError && /^\d+$/.test(err.reason)
+                    ? HUB_SERVER_FAILING
+                    : HUB_SERVER_UNREACHABLE;
+            if (load && here() === at)
+                this.loadState = HUB_LOAD_FAILED;
             return err instanceof Error ? err : new Error(String(err));
         }
         finally {
             pending(origin, false);
+            this.trips--;
+            this.landHub();
+        }
+    }
+    /**
+     * The hub's own query: one row, keyed by the path, holding how the page's
+     * data and the server stand. The same columns are stamped on the hub
+     * itself, so a stylesheet can reach the whole document without the
+     * markup naming the query. An empty one is not stamped at all.
+     */
+    landHub() {
+        const row = {
+            [URL_COLUMN_PATH]: location.pathname,
+            [HUB_COLUMN_LOAD_STATE]: this.loadState,
+            [HUB_COLUMN_SERVER_STATE]: this.serverState,
+            [HUB_COLUMN_ERROR]: this.error,
+            [HUB_COLUMN_PENDING]: this.trips,
+            [HUB_COLUMN_AS_OF]: this.asOf,
+        };
+        for (const [name, value] of Object.entries(row)) {
+            if (name === URL_COLUMN_PATH)
+                continue;
+            if (value === "")
+                this.removeAttribute(name);
+            else
+                this.setAttribute(name, String(value));
         }
+        if (!this.querySelector(`[${ATTR_QUERY}="${HUB_QUERY}"]`))
+            return;
+        applyResponse(this, [
+            { query: HUB_QUERY, kind: KIND_ROW, key: URL_COLUMN_PATH, row },
+        ]);
     }
     /**
      * Answer a request for a query the hub serves, with no round trip. The
-     * hub serves `lb-url` and `lb-choices`, and updates them.
+     * hub serves `lb-url` and `lb-choices`, and updates them. It serves
+     * `lb-hub` too, which nothing but the hub writes.
      */
     async answer(request, origin) {
         if (request.query === CHOICES_QUERY && request.name === REQUEST_ROW_UPDATE) {
@@ -927,6 +1029,9 @@ class LbHub extends HTMLElement {
             return again instanceof Error ? [item] : [item, ...again];
         }
         const template = this.arrive();
+        // The request's answer carried the page's queries for where it moved.
+        this.loadState = HUB_LOAD_LOADED;
+        this.landHub();
         this.place();
         if (template)
             applyResponse(this, load);
@@ -954,6 +1059,9 @@ class LbHub extends HTMLElement {
     async navigate(origin) {
         const template = this.arrive();
         if (!template) {
+            // No page, so nothing to load: the unknown page is what shows.
+            this.loadState = HUB_LOAD_LOADED;
+            this.landHub();
             this.place();
             attachPlaced();
             return [];