@loadbare/app 0.4.0

package/dist/core/lb-types.d.ts

@@ -0,0 +1,88 @@
+/** docs/requests.md — the operation set is closed. */
+export type HubRequest = {
+    op: "cell-change";
+    query: string;
+    key: string;
+    cell: string;
+    value: string;
+} | {
+    op: "tuple-insert";
+    query: string;
+    values: Record<string, string>;
+} | {
+    op: "tuple-update";
+    query: string;
+    key: string;
+    values: Record<string, string>;
+} | {
+    op: "tuple-delete";
+    query: string;
+    key: string;
+}
+/**
+ * Everything that is not a CRUD operation.
+ *
+ * The name is the application's and is looked up in the page's declared
+ * actions. What keeps this from being an RPC endpoint is that the name must
+ * already appear in the page's hooks: the browser cannot reach anything the
+ * page has not published, and there is no argument list — only where the
+ * interaction happened and, where a control has one, its value.
+ *
+ * A button carries no value, so the server computes the whole of the new
+ * state and the browser never displays a number it has not confirmed. A
+ * `<select>` carries one, because the choice is the interaction.
+ */
+ | {
+    op: "action";
+    name: string;
+    query?: string;
+    key?: string;
+    cell?: string;
+    value?: string;
+};
+/** One query's result: the cells of a single tuple. Every value is a string. */
+export type QueryResult = Record<string, string>;
+/**
+ * A query that returns many tuples — see docs/guide.md, "List processing".
+ *
+ * Two results, because a list widget must be told the difference. `rows` is
+ * the entire set and therefore also the order; `patch` names only what
+ * changed and leaves everything it does not name alone. Add and remove are
+ * one result rather than two because the interesting cases are both at once
+ * — a row whose sort key changed has to move, a swap is one out and one in —
+ * and two messages would paint the intermediate state.
+ *
+ * `op` is the same discriminant word the request union uses, so one
+ * vocabulary runs in both directions. It is therefore a reserved cell name:
+ * a tuple with a cell called `op` whose value is `rows` or `patch` would be
+ * read as a projection.
+ */
+export type Projection = {
+    op: "rows";
+    rows: QueryResult[];
+} | {
+    op: "patch";
+    rows?: QueryResult[];
+    drop?: string[];
+};
+/** A tuple is the sugar and the common case; a projection says so. */
+export type HubResult = QueryResult | Projection;
+export declare function isProjection(result: HubResult): result is Projection;
+/**
+ * Every response on the data channel is the same shape, whether it is a
+ * cold start or the narrowest refresh. The hub does not know which case
+ * it is in.
+ */
+export type HubData = Record<string, HubResult>;
+/**
+ * What a list widget implements. The hub delivers a projection by calling
+ * this and stops; where a row goes is the widget's, because only the widget
+ * knows whether it sorts, groups, or appends.
+ *
+ * One protocol name, not a table of tag names — the hub tests for the method,
+ * never for the element.
+ */
+export interface HubRowHost {
+    acceptRows(result: Projection): void;
+}
+//# sourceMappingURL=lb-types.d.ts.map

package/dist/core/lb-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-types.d.ts","sourceRoot":"","sources":["../../core/lb-types.ts"],"names":[],"mappings":"AAEA,sDAAsD;AACtD,MAAM,MAAM,UAAU,GAClB;IACE,EAAE,EAAE,aAAa,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,GACD;IAAE,EAAE,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,GACrE;IACE,EAAE,EAAE,cAAc,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC,GACD;IAAE,EAAE,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE;AACpD;;;;;;;;;;;;GAYG;GACD;IACE,EAAE,EAAE,QAAQ,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEN,gFAAgF;AAChF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEjD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,UAAU,GAClB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,WAAW,EAAE,CAAA;CAAE,GACnC;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAE3D,sEAAsE;AACtE,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjD,wBAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,IAAI,UAAU,CAGpE;AAED;;;;GAIG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEhD;;;;;;;GAOG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;CACtC"}

package/dist/core/lb-types.js

@@ -0,0 +1,5 @@
+// The wire vocabulary. Shared by browser and server.
+export function isProjection(result) {
+    const op = result.op;
+    return op === "rows" || op === "patch";
+}

package/dist/demo-static/src/widgets/app-box.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A plain custom element with no tie to the framework: no lb- prefix, no
+ * expansion definition, nothing but customElements.define. It exists to
+ * prove the builder resolves and bundles a tag by directory convention
+ * alone, exactly as it does for a widget the framework ships itself.
+ *
+ * Its look comes from app-box.css, a plain class rather than the style
+ * attribute — a style attribute is inline script by another name, and the
+ * CSP this framework targets refuses it exactly as it refuses inline
+ * <script>.
+ */
+declare class AppBox extends HTMLElement {
+    connectedCallback(): void;
+}
+//# sourceMappingURL=app-box.d.ts.map

package/dist/demo-static/src/widgets/app-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-box.d.ts","sourceRoot":"","sources":["../../../../demo-static/src/widgets/app-box.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,cAAM,MAAO,SAAQ,WAAW;IAC9B,iBAAiB;CAGlB"}

package/dist/demo-static/src/widgets/app-box.js

@@ -0,0 +1,19 @@
+"use strict";
+/// <reference lib="dom" />
+/**
+ * A plain custom element with no tie to the framework: no lb- prefix, no
+ * expansion definition, nothing but customElements.define. It exists to
+ * prove the builder resolves and bundles a tag by directory convention
+ * alone, exactly as it does for a widget the framework ships itself.
+ *
+ * Its look comes from app-box.css, a plain class rather than the style
+ * attribute — a style attribute is inline script by another name, and the
+ * CSP this framework targets refuses it exactly as it refuses inline
+ * <script>.
+ */
+class AppBox extends HTMLElement {
+    connectedCallback() {
+        this.classList.add("app-box");
+    }
+}
+customElements.define("app-box", AppBox);

package/dist/hub/lb-apply.d.ts

@@ -0,0 +1,13 @@
+import { type QueryResult, type HubData } from "../core/lb-types";
+/**
+ * Fill one scope from one tuple.
+ *
+ * The root counts as a cell if it carries one. A `<tr>` holds its cells in
+ * `<td>` children, but `<option>`'s content model is text, so an option row
+ * has to be the cell it displays. Requiring a wrapper there would require an
+ * element HTML does not allow.
+ */
+export declare function applyTuple(root: Element, cells: QueryResult): void;
+/** Land a whole response. Every query result arrives through here. */
+export declare function applyData(root: ParentNode, data: HubData): void;
+//# sourceMappingURL=lb-apply.d.ts.map

package/dist/hub/lb-apply.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-apply.d.ts","sourceRoot":"","sources":["../../hub/lb-apply.ts"],"names":[],"mappings":"AAcA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,OAAO,EAEb,MAAM,kBAAkB,CAAC;AAkB1B;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI,CAMlE;AAmBD,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,CAY/D"}

package/dist/hub/lb-apply.js

@@ -0,0 +1,77 @@
+/// <reference lib="dom" />
+/**
+ * Landing data on a live host — see docs/guide.md, "Applying a response".
+ *
+ * This is one file rather than part of the hub because a list widget needs
+ * the same operation. It clones a row and fills it with a tuple, and filling
+ * a row is filling a scope: the only difference is how much of the page the
+ * root covers. A widget imports `applyTuple` the way it imports `ATTR_VALUE`,
+ * so there is one implementation of what a cell means and nobody reaches into
+ * anybody's children.
+ */
+import { ATTR_CELL, ATTR_QUERY, ATTR_VALUE } from "../core/lb-constants";
+import { isProjection, } from "../core/lb-types";
+/**
+ * A cell lands one of two ways. A custom element owns whatever control it
+ * wraps, so it receives the value as an attribute and renders it itself.
+ * Because the browser runs `attributeChangedCallback` for attributes already
+ * present when a widget upgrades, that is the same operation whether the host
+ * was inserted a microsecond ago or an hour ago.
+ *
+ * A native element has no behavior of its own, so its value is its text.
+ * The test is lexical — a hyphen in the tag name — and the hub holds no
+ * knowledge of any particular element.
+ */
+function land(el, value) {
+    if (el.localName.includes("-"))
+        el.setAttribute(ATTR_VALUE, value);
+    else
+        el.textContent = value;
+}
+/**
+ * Fill one scope from one tuple.
+ *
+ * The root counts as a cell if it carries one. A `<tr>` holds its cells in
+ * `<td>` children, but `<option>`'s content model is text, so an option row
+ * has to be the cell it displays. Requiring a wrapper there would require an
+ * element HTML does not allow.
+ */
+export function applyTuple(root, cells) {
+    for (const [cell, value] of Object.entries(cells)) {
+        const selector = `[${ATTR_CELL}="${cell}"]`;
+        if (root.matches(selector))
+            land(root, value);
+        for (const el of root.querySelectorAll(selector))
+            land(el, value);
+    }
+}
+/**
+ * A projection has to reach a widget. A native element has one destination
+ * for a value and no way to acquire children, so a list is not something it
+ * can be asked to show.
+ */
+function landRows(scope, query, result) {
+    const host = scope;
+    if (typeof host.acceptRows !== "function") {
+        console.error(`lb-hub: query '${query}' returned rows, but <${scope.localName}> ` +
+            `is not a list widget`);
+        return;
+    }
+    host.acceptRows(result);
+}
+/** Land a whole response. Every query result arrives through here. */
+export function applyData(root, data) {
+    for (const [query, result] of Object.entries(data)) {
+        const scopes = root.querySelectorAll(`[${ATTR_QUERY}="${query}"]`);
+        if (scopes.length === 0) {
+            console.warn(`lb-hub: no scope for query '${query}', skipping`);
+            continue;
+        }
+        for (const scope of scopes) {
+            if (isProjection(result))
+                landRows(scope, query, result);
+            else
+                applyTuple(scope, result);
+        }
+    }
+}

package/dist/hub/lb-hub.d.ts

@@ -0,0 +1,2 @@
+export { applyData, applyTuple } from "./lb-apply";
+//# sourceMappingURL=lb-hub.d.ts.map

package/dist/hub/lb-hub.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-hub.d.ts","sourceRoot":"","sources":["../../hub/lb-hub.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/hub/lb-hub.js

@@ -0,0 +1,242 @@
+/// <reference lib="dom" />
+import { ATTR_ACTION, ATTR_CELL, ATTR_DELETE, ATTR_ERROR, ATTR_INSERT, ATTR_KEY, ATTR_NAV_LINK, ATTR_PENDING, ATTR_QUERY, ATTR_UPDATE, HUB_TAG_NAME, PAGE_TEMPLATE_PREFIX, LB_DATA_ENDPOINT, LB_EVENT_NAME, LB_REQUEST_ENDPOINT, LB_REQUEST_TIMEOUT_MS, } from "../core/lb-constants";
+import { applyData } from "./lb-apply";
+export { applyData, applyTuple } from "./lb-apply";
+/**
+ * Where a click happened, in the addressing vocabulary. An action carries
+ * these and nothing else, so there is no channel for a browser-supplied
+ * argument.
+ */
+function coordinates(el) {
+    const query = el.closest(`[${ATTR_QUERY}]`)?.getAttribute(ATTR_QUERY);
+    const key = el.closest(`[${ATTR_KEY}]`)?.getAttribute(ATTR_KEY);
+    const cell = el.getAttribute(ATTR_CELL);
+    return {
+        ...(query === null || query === undefined ? {} : { query }),
+        ...(key === null || key === undefined ? {} : { key }),
+        ...(cell === null ? {} : { cell }),
+    };
+}
+/**
+ * The value a cell is currently showing, for gathering rather than landing.
+ *
+ * A cell is always either a native form control itself (a bare
+ * `<input lb-cell>`) or a widget that wraps one (`<lb-input>`, `<lb-select>`)
+ * — that wrapping is structural, not incidental, which is what lets this be
+ * one rule instead of one per widget type.
+ */
+function controlValue(el) {
+    const control = el instanceof HTMLInputElement ||
+        el instanceof HTMLSelectElement ||
+        el instanceof HTMLTextAreaElement
+        ? el
+        : el.querySelector("input, select, textarea");
+    return control?.value;
+}
+/**
+ * Every lb-cell inside a form, gathered into one values map. Shared by
+ * lb-insert and lb-update — both submit a batch of cells, and differ only in
+ * whether a key comes with them.
+ */
+function gatherValues(form) {
+    const values = {};
+    for (const cell of form.querySelectorAll(`[${ATTR_CELL}]`)) {
+        const name = cell.getAttribute(ATTR_CELL);
+        const value = controlValue(cell);
+        if (value === undefined) {
+            console.warn(`lb-hub: lb-cell '${name}' has no control to read, ignoring it`, cell);
+            continue;
+        }
+        values[name] = value;
+    }
+    return values;
+}
+/** A path names a page host, and nothing finer. */
+function pageNameFor(path) {
+    const name = path.replace(/^\/+|\/+$/g, "");
+    return name === "" ? "counter" : name;
+}
+/**
+ * Fetch one round trip against the client-side deadline. Throws — rather
+ * than swallowing — on a non-ok response, a network failure, or a timeout,
+ * so a caller that needs to know the request failed (as opposed to one that
+ * only ever wants the freshest data, like navigate()) can tell the two
+ * apart from a genuinely empty result.
+ */
+async function fetchData(url, init) {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), LB_REQUEST_TIMEOUT_MS);
+    try {
+        const res = await fetch(url, { ...init, signal: controller.signal });
+        if (!res.ok) {
+            throw new Error(`lb-hub: server responded ${res.status} for ${url}`);
+        }
+        return (await res.json());
+    }
+    finally {
+        clearTimeout(timeout);
+    }
+}
+/**
+ * The hub is a singleton outside <main>. It survives every page change,
+ * so it needs no id to disambiguate it.
+ */
+class LbHub extends HTMLElement {
+    main;
+    /**
+     * The page currently in <main>. Hooks are declared per page, so a request
+     * has to say which page it came from. The page rides on the URL rather
+     * than in the request, leaving the operation set closed.
+     */
+    page = "";
+    connectedCallback() {
+        this.main = this.querySelector("main");
+        this.addEventListener(LB_EVENT_NAME, (e) => {
+            const request = e.detail;
+            if (!request?.op) {
+                console.warn(`lb-hub: event without an op, ignoring`, request);
+                return;
+            }
+            // The element that dispatched the request, not e.currentTarget (the
+            // hub itself, since the event bubbles) — pending/error state belongs
+            // at the origin so a widget can watch its own attributes.
+            const origin = e.target;
+            origin?.removeAttribute(ATTR_ERROR);
+            origin?.setAttribute(ATTR_PENDING, "");
+            const url = `${LB_REQUEST_ENDPOINT}?page=${encodeURIComponent(this.page)}`;
+            void fetchData(url, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify(request),
+            })
+                .then((data) => applyData(this.main, data))
+                .catch((err) => {
+                console.error(`lb-hub: request failed`, err);
+                origin?.setAttribute(ATTR_ERROR, "");
+            })
+                .finally(() => origin?.removeAttribute(ATTR_PENDING));
+        });
+        /**
+         * A native element carrying an action. The hub builds the request and
+         * dispatches it from that element as the ordinary bubbling event, rather
+         * than sending it directly, so an ancestor widget can still stop it and
+         * confirm. A native action button and a hand-written widget therefore
+         * produce identical events.
+         *
+         * A widget carrying an action is left alone — it owns its own interaction
+         * and decides what counts as performing it, which for a <select> is a
+         * change rather than a click. The test is the same lexical one applyData
+         * uses: a hyphen in the tag name.
+         */
+        this.addEventListener("click", (e) => {
+            const el = e.target?.closest(`[${ATTR_ACTION}]`);
+            if (!el || el.localName.includes("-"))
+                return;
+            e.preventDefault();
+            const detail = {
+                op: "action",
+                name: el.getAttribute(ATTR_ACTION),
+                ...coordinates(el),
+            };
+            el.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
+        });
+        // The CRUD counterpart to the lb-action delegation above: a native
+        // element needs no declared name to delete the row it is in, only its
+        // own query/key coordinates.
+        this.addEventListener("click", (e) => {
+            const el = e.target?.closest(`[${ATTR_DELETE}]`);
+            if (!el || el.localName.includes("-"))
+                return;
+            e.preventDefault();
+            const { query, key } = coordinates(el);
+            if (!query || !key) {
+                console.warn(`lb-hub: lb-delete with no query/key coordinates, ignoring`, el);
+                return;
+            }
+            const detail = { op: "tuple-delete", query, key };
+            el.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
+        });
+        // The CRUD op that gathers rather than addresses a single cell: every
+        // lb-cell inside the form becomes one entry of the values map. There is
+        // no key, because there is no row yet — only the query, found the same
+        // way coordinates() finds one for a click, says what it is inserting
+        // into.
+        this.addEventListener("submit", (e) => {
+            const form = e.target?.closest(`[${ATTR_INSERT}]`);
+            if (!form)
+                return;
+            e.preventDefault();
+            const { query } = coordinates(form);
+            if (!query) {
+                console.warn(`lb-hub: lb-insert with no lb-query, ignoring`, form);
+                return;
+            }
+            const detail = {
+                op: "tuple-insert",
+                query,
+                values: gatherValues(form),
+            };
+            form.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
+        });
+        // The batch counterpart to cell-change: same gathering as lb-insert, but
+        // with the key of the row it is a form for — a list's row template root,
+        // or a form inside one, has it from the same ancestor a delete button
+        // reads.
+        this.addEventListener("submit", (e) => {
+            const form = e.target?.closest(`[${ATTR_UPDATE}]`);
+            if (!form)
+                return;
+            e.preventDefault();
+            const { query, key } = coordinates(form);
+            if (!query || !key) {
+                console.warn(`lb-hub: lb-update with no query/key coordinates, ignoring`, form);
+                return;
+            }
+            const detail = {
+                op: "tuple-update",
+                query,
+                key,
+                values: gatherValues(form),
+            };
+            form.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
+        });
+        // Only anchors that opted in. Everything else is a real link.
+        this.addEventListener("click", (e) => {
+            const link = e.target?.closest(`a[${ATTR_NAV_LINK}]`);
+            if (!link)
+                return;
+            e.preventDefault();
+            const path = new URL(link.href).pathname;
+            history.pushState(null, "", path);
+            void this.navigate(path);
+        });
+        addEventListener("popstate", () => void this.navigate(location.pathname));
+        void this.navigate(location.pathname);
+    }
+    /**
+     * Navigation is the one operation that replaces host DOM. The host is
+     * already in the document, so selecting a page is getElementById() and
+     * there is no fetching mechanism on the host channel.
+     */
+    async navigate(path) {
+        const page = pageNameFor(path);
+        const template = document.getElementById(PAGE_TEMPLATE_PREFIX + page);
+        if (!(template instanceof HTMLTemplateElement)) {
+            console.error(`lb-hub: no page host for '${page}'`);
+            return;
+        }
+        let data = {};
+        try {
+            data = await fetchData(`${LB_DATA_ENDPOINT}?page=${encodeURIComponent(page)}`);
+        }
+        catch (err) {
+            console.error(`lb-hub: failed to load data for '${page}'`, err);
+        }
+        this.page = page;
+        // Insert and hydrate in one synchronous block: the browser does not
+        // paint mid-task, so there is no empty flash.
+        this.main.replaceChildren(template.content.cloneNode(true));
+        applyData(this.main, data);
+    }
+}
+customElements.define(HUB_TAG_NAME, LbHub);

package/dist/hub/lb-rows.d.ts

@@ -0,0 +1,18 @@
+import type { Projection, QueryResult } from "../core/lb-types";
+/**
+ * Where a row belongs, called with the row detached on its first appearance.
+ *
+ * The default puts it immediately before the template, so rows accumulate in
+ * the order they arrive and the template stays put as the insertion marker.
+ */
+export type Place = (row: Element, tuple: QueryResult, template: HTMLTemplateElement) => void;
+/**
+ * Land a projection in a widget's subtree.
+ *
+ * `rows` is the whole set, so it decides membership and order: every row is
+ * placed in the order given, and a row whose key did not arrive is gone.
+ * `patch` disturbs only what it names — a row it did not mention keeps its
+ * contents and its position.
+ */
+export declare function applyRows(scope: Element, result: Projection, place?: Place): void;
+//# sourceMappingURL=lb-rows.d.ts.map

package/dist/hub/lb-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-rows.d.ts","sourceRoot":"","sources":["../../hub/lb-rows.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGhE;;;;;GAKG;AACH,MAAM,MAAM,KAAK,GAAG,CAClB,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,mBAAmB,KAC1B,IAAI,CAAC;AAwCV;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,UAAU,EAClB,KAAK,GAAE,KAAc,GACpB,IAAI,CAkDN"}

package/dist/hub/lb-rows.js

@@ -0,0 +1,106 @@
+/// <reference lib="dom" />
+/**
+ * The row machinery a list widget shares — see docs/guide.md, "List
+ * processing".
+ *
+ * A widget owns where a row goes and nothing else. Cloning the template,
+ * matching a tuple to the row already showing it, and filling that row are
+ * the same in every list, so they are here, and a widget that sorts or groups
+ * supplies one function rather than a second implementation of all of it.
+ */
+import { ATTR_KEY, ATTR_ROW_COUNT } from "../core/lb-constants";
+import { applyTuple } from "./lb-apply";
+const before = (row, _tuple, template) => {
+    template.parentElement.insertBefore(row, template);
+};
+/** The row template: the one the page author wrote inside this widget. */
+function templateIn(scope) {
+    const template = scope.querySelector("template");
+    if (!template) {
+        console.error(`lb-rows: <${scope.localName}> has no <template> to clone`);
+        return null;
+    }
+    if (!template.getAttribute(ATTR_KEY)) {
+        console.error(`lb-rows: the <template> in <${scope.localName}> has no ${ATTR_KEY} ` +
+            `naming the column that identifies a row`);
+        return null;
+    }
+    return template;
+}
+/**
+ * The rows already showing, by the key value each carries.
+ *
+ * `lb-key` names the key column on the template and carries the key value on
+ * a live row. One name in two positions, and never ambiguous, because a
+ * template is not a row.
+ */
+function showing(scope, template) {
+    const rows = new Map();
+    for (const el of scope.querySelectorAll(`[${ATTR_KEY}]`)) {
+        if (el !== template)
+            rows.set(el.getAttribute(ATTR_KEY), el);
+    }
+    return rows;
+}
+/**
+ * Land a projection in a widget's subtree.
+ *
+ * `rows` is the whole set, so it decides membership and order: every row is
+ * placed in the order given, and a row whose key did not arrive is gone.
+ * `patch` disturbs only what it names — a row it did not mention keeps its
+ * contents and its position.
+ */
+export function applyRows(scope, result, place = before) {
+    const template = templateIn(scope);
+    if (!template)
+        return;
+    const keyCell = template.getAttribute(ATTR_KEY);
+    const rows = showing(scope, template);
+    const upsert = (tuple) => {
+        const key = tuple[keyCell];
+        if (key === undefined) {
+            console.error(`lb-rows: a tuple for <${scope.localName}> has no '${keyCell}' cell`);
+            return null;
+        }
+        let row = rows.get(key);
+        const fresh = row === undefined;
+        if (!row) {
+            row = template.content.firstElementChild.cloneNode(true);
+            row.setAttribute(ATTR_KEY, key);
+            rows.set(key, row);
+        }
+        // Fill before insertion. The attributes are already there when the row
+        // upgrades, which is the same thing that makes hydration and refresh one
+        // operation everywhere else.
+        applyTuple(row, tuple);
+        if (fresh || result.op === "rows")
+            place(row, tuple, template);
+        return key;
+    };
+    if (result.op === "rows") {
+        const arrived = new Set();
+        for (const tuple of result.rows) {
+            const key = upsert(tuple);
+            if (key !== null)
+                arrived.add(key);
+        }
+        for (const [key, row] of rows)
+            if (!arrived.has(key))
+                row.remove();
+    }
+    else {
+        for (const tuple of result.rows ?? [])
+            upsert(tuple);
+        for (const key of result.drop ?? [])
+            rows.get(key)?.remove();
+    }
+    // How many rows are showing, counted from the DOM rather than from either
+    // branch above, so a set and a patch report the same fact the same way.
+    //
+    // It is stamped here because only this function knows the count: it is the
+    // one conditional a page cannot be sent, since the server answers with rows
+    // and says nothing about how many survived reconciliation. A page says what
+    // an empty list looks like in a stylesheet, and no list widget carries code
+    // for it. See docs/guide.md, "Conditional rendering".
+    scope.setAttribute(ATTR_ROW_COUNT, String(showing(scope, template).size));
+}

package/dist/server/lb-express.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The Express adapter — the standard hand-off from an Express router to a
+ * Hub built by createHub(). Every Hub application wires this same router,
+ * which is why it ships from here rather than being copied into each one.
+ *
+ * Express itself is a peer dependency: nothing outside this file imports it,
+ * so an application that hosts Hub some other way never pays for it.
+ *
+ * Two endpoints, and no third:
+ *
+ *   GET  /hub/data?page=<name>   the page's whole query set
+ *   POST /hub?page=<name>        one operation, then its refresh set
+ *
+ * The page rides on the query string rather than in the body, which is what
+ * lets the operation set stay closed.
+ */
+import { type Request, type Router } from "express";
+import type { Hub, HubContext } from "./lb-server";
+/**
+ * Building the context is the application's job — it is where an
+ * authenticated database handle comes from — so it is injected rather than
+ * assumed. Whatever established identity has already run by the time this
+ * router is reached; where that happens is the application's ordering
+ * decision, not Hub's.
+ */
+export type ContextFor = (req: Request) => HubContext;
+export declare function hubRoutes(hub: Hub, contextFor: ContextFor): Router;
+//# sourceMappingURL=lb-express.d.ts.map

package/dist/server/lb-express.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-express.d.ts","sourceRoot":"","sources":["../../server/lb-express.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAgB,EAAE,KAAK,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAG7D,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEnD;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK,UAAU,CAAC;AAEtD,wBAAgB,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,GAAG,MAAM,CA8DlE"}