@loadbare/app 0.25.0 → 0.26.0

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

@@ -1,7 +1,7 @@
 /// <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_PLACE, 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, parmsRow, } from "../core/lb-types.js";
-import { addUnentered, applyResponse, discardUnentered, applyRow, blankRow, focusIn, gatherInto, select, forget, isControl, isFormAssociated, keptAnswer, placeAgain, within, } from "./lb-apply.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_URL_LINK, ATTR_URL_PUSH, ATTR_URL_UNKNOWN, COMMAND_EDIT, COMMAND_NEW, COMMAND_RELEASE, COMMAND_PLACE, FILTERS_COLUMN_QUERY, FILTERS_QUERY, 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, KIND_ROWS, 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_READ, REQUEST_ROW_DELETE, REQUEST_ROW_INSERT, REQUEST_ROW_UPDATE, SORT_COLUMN_ORDER, SORT_COLUMN_QUERY, SORT_QUERY, URL_COLUMN_PAGE_LABEL, URL_COLUMN_PAGE_UNKNOWN, URL_COLUMN_PATH, URL_QUERY, } from "../core/lb-constants.js";
+import { isRowRequest, nextLocation, pageNameFor, parmsRow, oneRow, } from "../core/lb-types.js";
+import { addUnentered, applyResponse, discardUnentered, applyRow, blankRow, focusIn, gatherInto, forget, isControl, isFormAssociated, keptAnswer, placeAgain, templateIn, within, } from "./lb-apply.js";
 import { attachPlaced, detachRemoved, placed, requestDone, upgradeAbsent, } from "./lb-lifecycle.js";
 export { applyResponse, applyRow } from "./lb-apply.js";
 /** What each request Loadbare provides cannot be issued without. */
@@ -55,8 +55,7 @@ function formOwnerOf(el) {
         : null;
 }
 /**
- * The controls a request gathers — see docs/reference/data-binding.md,
- * "Gathering":
+ * The controls a request gathers:
  *
  *   1. the element carrying `lb-request` has `lb-column`: it alone;
  *   2. the element is a `<form>`: the controls whose form owner it is;
@@ -194,24 +193,6 @@ const insertedFrom = new WeakMap();
 const pointed = new WeakMap();
 /** The pointed form each request gathered from, until it succeeds. */
 const savedFrom = new WeakMap();
-/**
- * The `lb-select` checkboxes showing for a query, under the hub an element
- * is in. One parked by `lb-show` is in template content, out of reach, so
- * only a selection the user can see counts.
- */
-function selectorsFor(el, query) {
-    const root = el.closest(HUB_TAG_NAME) ?? el.ownerDocument;
-    return [...root.querySelectorAll(`[${ATTR_SELECT}]`)].filter((box) => {
-        const live = liveRowOf(box);
-        return live !== null && queryOf(live)?.getAttribute(ATTR_QUERY) === query;
-    });
-}
-/** The keys of the rows a query's showing checkboxes select. */
-function selectedKeys(boxes) {
-    return boxes
-        .filter((box) => box.checked)
-        .map((box) => liveRowOf(box).getAttribute(ATTR_KEY_VALUE));
-}
 /**
  * Complete a request from where its element sits. Every request passes
  * through here, whoever issued it; a field it already carries is its
@@ -281,7 +262,7 @@ function complete(request, el) {
     }
     // A query the hub serves has one row, keyed by the path, so a request for
     // one from anywhere on the page is for that row.
-    if (request.query === URL_QUERY || request.query === CHOICES_QUERY) {
+    if (request.query === URL_QUERY) {
         request.key ??= location.pathname;
     }
     if (name === REQUEST_ROW_INSERT && group?.form) {
@@ -307,28 +288,9 @@ function complete(request, el) {
             return false;
         }
     }
-    // A request that names no one row acts on the rows the user selected,
-    // when its query shows checkboxes to select them by. An insert adds a row
-    // and selects nothing. With none ticked, an update or a delete has
-    // nothing to act on, and is not sent, as for a row not yet entered.
-    if (request.key === undefined &&
-        request.keys === undefined &&
-        request.query !== undefined &&
-        !unentered &&
-        name !== REQUEST_ROW_INSERT) {
-        const boxes = selectorsFor(el, request.query);
-        if (boxes.length > 0) {
-            request.keys = selectedKeys(boxes);
-            if (request.keys.length === 0 &&
-                (name === REQUEST_ROW_UPDATE || name === REQUEST_ROW_DELETE)) {
-                return false;
-            }
-        }
-    }
     const needs = NEEDS[name];
     if (needs) {
-        const missing = needs.filter((field) => (request[field] === undefined &&
-            !(field === "key" && request.keys !== undefined)) ||
+        const missing = needs.filter((field) => request[field] === undefined ||
             (field === "values" &&
                 Object.keys(request.values).length === 0 &&
                 request.rows === undefined));
@@ -420,9 +382,18 @@ function pageHostFor(page) {
  * browser is showing rides after it verbatim, so every round trip reaches
  * the server with the query parms in hand.
  */
-async function fetchItems(page, request) {
+async function fetchItems(page, request, parms) {
     const path = page.split("/").map(encodeURIComponent).join("/");
-    const url = `${LB_ENDPOINT}/${path}${location.search}`;
+    // Parms set for this request alone, as a bound row's key is for the lists
+    // inside it. An empty one is still sent: it names no row.
+    let query = location.search;
+    if (parms) {
+        const search = new URLSearchParams(location.search);
+        for (const [name, value] of Object.entries(parms))
+            search.set(name, value);
+        query = `?${search.toString()}`;
+    }
+    const url = `${LB_ENDPOINT}/${path}${query}`;
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), LB_REQUEST_TIMEOUT_MS);
     try {
@@ -516,7 +487,7 @@ function clear(form) {
  */
 function point(form, row, key, live) {
     clear(form);
-    if (row)
+    if (row !== null)
         applyRow(form, row);
     form.setAttribute(ATTR_KEY_VALUE, key);
     live?.setAttribute(ATTR_ROW_EDITING, "");
@@ -599,7 +570,7 @@ 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. */
+    /** The hub's own state, as the query `lb-hub-status` serves it. */
     trips = 0;
     loadState = HUB_LOAD_LOADING;
     serverState = "";
@@ -621,10 +592,18 @@ class LbHub extends HTMLElement {
             // The element that issued the request, not e.currentTarget (the hub
             // itself, since the event bubbles).
             const origin = e.target ?? undefined;
-            if (request.query?.startsWith(LB_RESERVED_PREFIX)) {
+            if (request.query === URL_QUERY) {
                 void this.answer(request, origin);
                 return;
             }
+            if (request.query === SORT_QUERY) {
+                void this.chooseSort(request, origin);
+                return;
+            }
+            if (request.query === FILTERS_QUERY) {
+                void this.chooseFilters(request, origin);
+                return;
+            }
             void this.send(request, origin);
         });
         // A form commits on submit. The submitter's own lb-request replaces the
@@ -665,14 +644,6 @@ class LbHub extends HTMLElement {
                     edited(e.target);
             }, { capture: true });
         }
-        // A selector selects its row, and is no column.
-        this.addEventListener("change", (e) => {
-            const box = e.target;
-            if (box?.hasAttribute(ATTR_SELECT)) {
-                select(box, box.checked);
-            }
-        });
-        // A control commits on change.
         this.addEventListener("change", (e) => {
             const el = e.target;
             if (!el || !el.hasAttribute(ATTR_REQUEST) || !isControl(el))
@@ -781,10 +752,12 @@ class LbHub extends HTMLElement {
                     return;
                 }
                 point(form, row, key, live);
+                void this.readNested(form, key);
                 return;
             }
             case COMMAND_NEW:
                 point(form, null, "", null);
+                void this.readNested(form, "");
                 return;
             case COMMAND_RELEASE:
                 release(form);
@@ -794,6 +767,36 @@ class LbHub extends HTMLElement {
                     `names no command Loadbare provides, ignoring`);
         }
     }
+    /**
+     * Make the lists nested in a form follow the row it is now bound to: drop
+     * the rows not yet entered there, and ask the server for each list's
+     * query again with the row's key as the parm its key column names. A new
+     * row's key is empty, so its lists answer with none. A form bound to
+     * another row, or a page moved on, before the answer returns lands
+     * nothing.
+     */
+    async readNested(form, key) {
+        const lists = [...form.querySelectorAll(`[${ATTR_QUERY}]`)].filter((el) => queryOf(el) === form && templateIn(el) !== null);
+        if (lists.length === 0)
+            return;
+        const column = keptAnswer(this, form.getAttribute(ATTR_QUERY))?.key;
+        if (column === undefined)
+            return;
+        for (const list of lists) {
+            for (const row of list.querySelectorAll(`[${ATTR_KEY_VALUE}=""]`)) {
+                if (queryOf(row) === list)
+                    discardUnentered(row);
+            }
+        }
+        const queries = [...new Set(lists.map((el) => el.getAttribute(ATTR_QUERY)))];
+        const at = here();
+        const items = await this.roundTrip(this.page, { name: REQUEST_READ, queries }, undefined, { [column]: key });
+        if (items instanceof Error || here() !== at)
+            return;
+        if (form.getAttribute(ATTR_KEY_VALUE) !== key)
+            return;
+        applyResponse(this, items);
+    }
     /**
      * Place a list's rows by the order and the filter again, from the rows
      * the hub holds: no round trip, since the user asks only to see what they
@@ -845,11 +848,6 @@ class LbHub extends HTMLElement {
             else
                 landed = await this.follow(url, load, origin);
         }
-        // The selected rows have been acted on, and the selection is done.
-        if (request.keys !== undefined && request.query !== undefined) {
-            for (const box of selectorsFor(this, request.query))
-                select(box, false);
-        }
         // 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.
@@ -889,7 +887,7 @@ class LbHub extends HTMLElement {
      * element that issued it carries `lb-request-pending` while it is in
      * flight, and `lb-request-error` when it fails. The error on failure.
      */
-    async roundTrip(page, request, origin) {
+    async roundTrip(page, request, origin, parms) {
         // 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;
@@ -900,7 +898,7 @@ class LbHub extends HTMLElement {
             this.loadState = HUB_LOAD_LOADING;
         this.landHub();
         try {
-            const items = await fetchItems(page, request);
+            const items = await fetchItems(page, request, parms);
             this.serverState = HUB_SERVER_REACHABLE;
             this.error = "";
             this.asOf = new Date().toISOString();
@@ -961,19 +959,15 @@ class LbHub extends HTMLElement {
         if (!this.querySelector(`[${ATTR_QUERY}="${HUB_QUERY}"]`))
             return;
         applyResponse(this, [
-            { query: HUB_QUERY, kind: KIND_ROW, key: URL_COLUMN_PATH, row },
+            { query: HUB_QUERY, kind: KIND_ROW, key: URL_COLUMN_PATH, rows: [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. It serves
-     * `lb-hub` too, which nothing but the hub writes.
+     * Answer a request for `lb-url`, the one query the hub serves, with no
+     * round trip: write the URL and load the page it names.
      */
     async answer(request, origin) {
-        if (request.query === CHOICES_QUERY && request.name === REQUEST_ROW_UPDATE) {
-            return done(origin, request, [this.choose(request.values ?? {})]);
-        }
-        if (request.query !== URL_QUERY || request.name !== REQUEST_ROW_UPDATE) {
+        if (request.name !== REQUEST_ROW_UPDATE) {
             const message = `lb-hub: '${request.name}' for '${request.query}' is not a request ` +
                 `the hub answers, ignoring`;
             console.error(message);
@@ -986,50 +980,64 @@ class LbHub extends HTMLElement {
         done(origin, request, await this.navigate(origin));
     }
     /**
-     * The user made choices: they join the ones already made, and the rows
-     * that read them are placed again from what the hub holds. The server is
-     * told, for a page that keeps them, and its answer lands like any other.
-     * What landed: the row of `lb-choices`.
+     * Answer an order the user chose: land its row of `lb-sort`, which places
+     * the rows it holds again by the new order, and send the order to the
+     * server to keep for the next page. Re-sorting is the browser's, from the
+     * rows it holds, so the round trip only persists the change.
      */
-    choose(values) {
-        const row = {
-            ...keptAnswer(this, CHOICES_QUERY)?.row,
-            ...values,
-            [URL_COLUMN_PATH]: location.pathname,
-        };
+    async chooseSort(request, origin) {
+        const query = request.key ?? "";
+        const order = request.values?.[SORT_COLUMN_ORDER] ?? "";
         const item = {
-            query: CHOICES_QUERY,
-            kind: KIND_ROW,
-            key: URL_COLUMN_PATH,
-            row,
+            query: SORT_QUERY,
+            kind: KIND_ROWS,
+            key: SORT_COLUMN_QUERY,
+            rows: [{ [SORT_COLUMN_QUERY]: query, [SORT_COLUMN_ORDER]: order }],
         };
         applyResponse(this, [item]);
-        void this.tell(row);
-        return item;
+        const items = await this.roundTrip(this.page, {
+            name: REQUEST_ROW_UPDATE,
+            query: SORT_QUERY,
+            key: query,
+            values: { [SORT_COLUMN_ORDER]: order },
+        }, undefined);
+        if (!(items instanceof Error))
+            applyResponse(this, items, { requested: true });
+        done(origin, request, [item]);
     }
     /**
-     * Send the server the user's choices, by `lb-row-update` for
-     * `lb-choices`, which runs the page's `onChoices`. No element waits on
-     * it, so none is pending, and a choice made while it is in flight is sent
-     * in turn.
+     * Answer a filter the user chose: merge it into the query's row of
+     * `lb-filters`, land it, and send the whole row to the server to keep for
+     * the next page. Filtering is the browser's, so no round trip answers the
+     * change; the round trip only persists it.
      */
-    async tell(row) {
-        const { [URL_COLUMN_PATH]: _, ...choices } = row;
-        const values = {};
-        for (const [column, value] of Object.entries(choices)) {
-            values[column] = value === null || value === undefined ? "" : String(value);
+    async chooseFilters(request, origin) {
+        const query = request.key ?? "";
+        const values = request.values ?? {};
+        const held = keptAnswer(this, FILTERS_QUERY)?.rows?.find((row) => row[FILTERS_COLUMN_QUERY] === query);
+        const row = { ...held, ...values, [FILTERS_COLUMN_QUERY]: query };
+        const item = {
+            query: FILTERS_QUERY,
+            kind: KIND_ROWS,
+            key: FILTERS_COLUMN_QUERY,
+            rows: [row],
+        };
+        applyResponse(this, [item]);
+        const columns = {};
+        for (const [column, value] of Object.entries(row)) {
+            if (column !== FILTERS_COLUMN_QUERY && typeof value === "string") {
+                columns[column] = value;
+            }
         }
-        const at = here();
         const items = await this.roundTrip(this.page, {
             name: REQUEST_ROW_UPDATE,
-            query: CHOICES_QUERY,
-            key: location.pathname,
-            values,
+            query: FILTERS_QUERY,
+            key: query,
+            values: columns,
         }, undefined);
-        if (items instanceof Error || here() !== at)
-            return;
-        if (items.length > 0)
+        if (!(items instanceof Error))
             applyResponse(this, items, { requested: true });
+        done(origin, request, [item]);
     }
     /**
      * Write a row for `lb-url` into the URL. A new page pushes a history
@@ -1056,7 +1064,7 @@ class LbHub extends HTMLElement {
      * asked for again that fails is not the request's failure.
      */
     async follow(item, load, origin) {
-        this.moveTo(item.row ?? {}, origin?.hasAttribute(ATTR_URL_PUSH) ?? false);
+        this.moveTo(oneRow(item) ?? {}, origin?.hasAttribute(ATTR_URL_PUSH) ?? false);
         if (load.length === 0) {
             const again = await this.navigate();
             return again instanceof Error ? [item] : [item, ...again];
@@ -1159,10 +1167,9 @@ class LbHub extends HTMLElement {
                 this.unplaced.push(this.main);
             forget(this);
             this.entering = true;
-            this.landChoices();
         }
         this.landUrl(template ? titleOf(template, page) : null);
-        // An app that ships `<body hidden>` (docs/reference/chrome.md) stays
+        // An app that ships `<body hidden>` stays
         // invisible until there is something coherent to show.
         document.body.hidden = false;
         if (!template) {
@@ -1174,24 +1181,6 @@ class LbHub extends HTMLElement {
         }
         return template;
     }
-    /**
-     * The user's choices as a page begins: none made, so every column an
-     * element under `lb-query="lb-choices"` shows lands empty. Choices hold
-     * until the page changes, unless the server restores them.
-     */
-    landChoices() {
-        const row = {};
-        for (const scope of this.querySelectorAll(`[${ATTR_QUERY}="${CHOICES_QUERY}"]`)) {
-            for (const el of within(scope, `[${ATTR_COLUMN}]`)) {
-                if (el !== scope)
-                    row[el.getAttribute(ATTR_COLUMN)] = "";
-            }
-        }
-        row[URL_COLUMN_PATH] = location.pathname;
-        applyResponse(this, [
-            { query: CHOICES_QUERY, kind: KIND_ROW, key: URL_COLUMN_PATH, row },
-        ]);
-    }
     /**
      * The hub's own query: one row, keyed by the path, whose other columns are
      * the query parms.
@@ -1221,7 +1210,7 @@ class LbHub extends HTMLElement {
         row[URL_COLUMN_PATH] = location.pathname;
         row[URL_COLUMN_PAGE_LABEL] = label;
         row[URL_COLUMN_PAGE_UNKNOWN] = label === null;
-        applyResponse(this, [{ query: URL_QUERY, kind: KIND_ROW, key: URL_COLUMN_PATH, row }]);
+        applyResponse(this, [{ query: URL_QUERY, kind: KIND_ROW, key: URL_COLUMN_PATH, rows: [row] }]);
     }
 }
 customElements.define(HUB_TAG_NAME, LbHub);