@loadbare/app 0.5.6 → 0.6.0

package/dist/tests/lb-express.test.js

@@ -2,7 +2,7 @@
  * The Express adapter — see docs/testing.md, tier 2.
  *
  * server/lb-express.ts is the only file that knows both HTTP and Hub. What
- * it owes is small and exact: two endpoints and no third, the page from the
+ * it owes is small and exact: one endpoint and no second, the page from the
  * query string, and an operation it does not yet handle refused rather than
  * half-handled.
  *
@@ -13,7 +13,7 @@
 import assert from "node:assert/strict";
 import { after, before, describe, it } from "node:test";
 import express from "express";
-import { LB_DATA_ENDPOINT, LB_REQUEST_ENDPOINT } from "../core/lb-constants";
+import { LB_ENDPOINT } from "../core/lb-constants";
 import { hubRoutes } from "../server/lb-express";
 import { captured } from "./helpers/console";
 const calls = [];
@@ -33,15 +33,15 @@ const engine = {
         calls.push({ kind: "cell-change", page, where, ctx });
         return { members: { n: "3" } };
     },
-    async runTupleDelete(page, where, ctx) {
+    async runRowDelete(page, where, ctx) {
         calls.push({ kind: "tuple-delete", page, where, ctx });
         return { members: { n: "4" } };
     },
-    async runTupleInsert(page, where, ctx) {
+    async runRowInsert(page, where, ctx) {
         calls.push({ kind: "tuple-insert", page, where, ctx });
         return { members: { n: "5" } };
     },
-    async runTupleUpdate(page, where, ctx) {
+    async runRowUpdate(page, where, ctx) {
         calls.push({ kind: "tuple-update", page, where, ctx });
         return { members: { n: "6" } };
     },
@@ -61,16 +61,16 @@ before(async () => {
 });
 after(() => void server.close());
 function post(page, body, raw) {
-    return fetch(`${base}${LB_REQUEST_ENDPOINT}?page=${page}`, {
+    return fetch(`${base}${LB_ENDPOINT}?page=${page}`, {
         method: "POST",
         headers: { "content-type": "application/json" },
         body: raw ?? JSON.stringify(body),
     });
 }
-describe("the data endpoint", () => {
+describe("a request with no action", () => {
     it("runs the page named in the query string", async () => {
         calls.length = 0;
-        const res = await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
+        const res = await post("hello", {});
         assert.equal(res.status, 200);
         assert.deepEqual(await res.json(), { greeting: { text: "hello" } });
         assert.equal(calls.length, 1);
@@ -81,17 +81,20 @@ describe("the data endpoint", () => {
         // The engine answers for a page it does not have; the route's job is only
         // to pass on what it was given rather than to invent a default.
         calls.length = 0;
-        await fetch(`${base}${LB_DATA_ENDPOINT}`);
+        await fetch(`${base}${LB_ENDPOINT}`, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: "{}",
+        });
         assert.equal(calls[0].page, "");
     });
 });
-describe("the request endpoint", () => {
+describe("a request carrying an action", () => {
     it("runs the action, with where the interaction happened", async () => {
         calls.length = 0;
         const res = await post("roster", {
-            op: "action",
-            name: "pick",
-            query: "members",
+            action: "pick",
+            list: "members",
             key: "7",
             cell: "role",
             value: "lead",
@@ -99,7 +102,8 @@ describe("the request endpoint", () => {
         assert.equal(res.status, 200);
         assert.deepEqual(await res.json(), { count: { n: "2" } });
         assert.deepEqual(calls[0].where, {
-            query: "members",
+            list: "members",
+            row: undefined,
             key: "7",
             cell: "role",
             value: "lead",
@@ -111,27 +115,28 @@ describe("the request endpoint", () => {
         // A button carries no value and may sit outside any scope. Undefined
         // stays undefined rather than becoming the empty string.
         calls.length = 0;
-        await post("counter", { op: "action", name: "bump" });
+        await post("counter", { action: "bump" });
         assert.deepEqual(calls[0].where, {
-            query: undefined,
+            list: undefined,
+            row: undefined,
             key: undefined,
             cell: undefined,
             value: undefined,
         });
     });
-    it("refuses an op it does not recognise, rather than guessing", async () => {
+    it("refuses a reserved name it does not implement, rather than guessing", async () => {
         calls.length = 0;
-        const { result: res, warn } = await captured(() => post("roster", { op: "tuple-upsert", query: "members", key: "1" }));
+        const { result: res, warn } = await captured(() => post("roster", { action: "lb-row-upsert", list: "members", key: "1" }));
         assert.equal(res.status, 400);
         assert.deepEqual(await res.json(), {});
         assert.deepEqual(calls, [], "the engine was never reached");
-        assert.match(warn.join("\n"), /operation 'tuple-upsert' not implemented/);
+        assert.match(warn.join("\n"), /operation 'lb-row-upsert' not implemented/);
     });
     it("runs a cell-change, with where the interaction happened", async () => {
         calls.length = 0;
         const res = await post("roster", {
-            op: "cell-change",
-            query: "members",
+            action: "lb-cell-change",
+            list: "members",
             key: "7",
             cell: "name",
             value: "Ada",
@@ -139,7 +144,7 @@ describe("the request endpoint", () => {
         assert.equal(res.status, 200);
         assert.deepEqual(await res.json(), { members: { n: "3" } });
         assert.deepEqual(calls[0].where, {
-            query: "members",
+            list: "members",
             key: "7",
             cell: "name",
             value: "Ada",
@@ -150,27 +155,27 @@ describe("the request endpoint", () => {
     it("runs a tuple-delete, with the key of the row", async () => {
         calls.length = 0;
         const res = await post("roster", {
-            op: "tuple-delete",
-            query: "members",
+            action: "lb-row-delete",
+            list: "members",
             key: "7",
         });
         assert.equal(res.status, 200);
         assert.deepEqual(await res.json(), { members: { n: "4" } });
-        assert.deepEqual(calls[0].where, { query: "members", key: "7" });
+        assert.deepEqual(calls[0].where, { list: "members", key: "7" });
         assert.equal(calls[0].kind, "tuple-delete");
         assert.equal(calls[0].page, "roster");
     });
     it("runs a tuple-insert, with the gathered values", async () => {
         calls.length = 0;
         const res = await post("roster", {
-            op: "tuple-insert",
-            query: "members",
+            action: "lb-row-insert",
+            list: "members",
             values: { name: "Ada", role: "Analyst" },
         });
         assert.equal(res.status, 200);
         assert.deepEqual(await res.json(), { members: { n: "5" } });
         assert.deepEqual(calls[0].where, {
-            query: "members",
+            list: "members",
             values: { name: "Ada", role: "Analyst" },
         });
         assert.equal(calls[0].kind, "tuple-insert");
@@ -179,15 +184,15 @@ describe("the request endpoint", () => {
     it("runs a tuple-update, with the key and the gathered values", async () => {
         calls.length = 0;
         const res = await post("roster", {
-            op: "tuple-update",
-            query: "members",
+            action: "lb-row-update",
+            list: "members",
             key: "7",
             values: { name: "Ada", role: "Analyst" },
         });
         assert.equal(res.status, 200);
         assert.deepEqual(await res.json(), { members: { n: "6" } });
         assert.deepEqual(calls[0].where, {
-            query: "members",
+            list: "members",
             key: "7",
             values: { name: "Ada", role: "Analyst" },
         });
@@ -202,12 +207,12 @@ describe("the request endpoint", () => {
     });
     it("survives an operation that throws, rather than crashing", async () => {
         calls.length = 0;
-        const { result: res, error } = await captured(() => post("roster", { op: "action", name: "explode", query: "members" }));
+        const { result: res, error } = await captured(() => post("roster", { action: "explode", list: "members" }));
         assert.equal(res.status, 500);
         assert.deepEqual(await res.json(), {});
-        assert.match(error.join("\n"), /operation 'action' threw/);
+        assert.match(error.join("\n"), /'explode' threw/);
         // And the process is still serving.
-        const next = await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
+        const next = await post("hello", {});
         assert.equal(next.status, 200);
     });
     it("survives a body that is not JSON", async () => {
@@ -217,7 +222,7 @@ describe("the request endpoint", () => {
         assert.deepEqual(calls, []);
         // And the process is still serving. A parse failure is one request's
         // problem, not the server's.
-        const next = await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
+        const next = await post("hello", {});
         assert.equal(next.status, 200);
     });
 });
@@ -228,9 +233,9 @@ describe("the context", () => {
         // process is the mistake this asserts against.
         contexts = 0;
         calls.length = 0;
-        await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
-        await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
-        await post("counter", { op: "action", name: "bump" });
+        await post("hello", {});
+        await post("hello", {});
+        await post("counter", { action: "bump" });
         assert.equal(contexts, 3);
         assert.notEqual(calls[0].ctx, calls[1].ctx);
         assert.notEqual(calls[1].ctx, calls[2].ctx);

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

@@ -0,0 +1,14 @@
+/**
+ * The hub element — see hub/lb-hub.browser.ts and docs/testing.md.
+ *
+ * Tier 4. jsdom is evidence for what the hub does to the document it is
+ * already holding: which element an event came from, what request that
+ * produces, which attributes land where, and which page host a path selects.
+ * A real network and a real frame belong to the browser tier, which is not
+ * built.
+ *
+ * The hub registers itself as its module loads, so the window goes in first
+ * and the module is imported after it.
+ */
+export {};
+//# sourceMappingURL=lb-hub.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lb-hub.test.d.ts","sourceRoot":"","sources":["../../tests/lb-hub.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG"}

package/dist/tests/lb-hub.test.js

@@ -0,0 +1,319 @@
+/**
+ * The hub element — see hub/lb-hub.browser.ts and docs/testing.md.
+ *
+ * Tier 4. jsdom is evidence for what the hub does to the document it is
+ * already holding: which element an event came from, what request that
+ * produces, which attributes land where, and which page host a path selects.
+ * A real network and a real frame belong to the browser tier, which is not
+ * built.
+ *
+ * The hub registers itself as its module loads, so the window goes in first
+ * and the module is imported after it.
+ */
+import assert from "node:assert/strict";
+import { before, describe, it } from "node:test";
+import { captured } from "./helpers/console";
+import { back, click, installWindow, mountHub, send, server, settle, submit, } from "./helpers/hub";
+installWindow();
+before(async () => {
+    await import("../hub/lb-hub.browser");
+});
+/** A live row, as the hub stamps one. */
+const ROSTER = `
+  <ul lb-list="roster">
+    <li lb-key-value="42">
+      <span lb-cell="name">Ann</span>
+      <button lb-action="lb-row-delete">x</button>
+    </li>
+    <template lb-key="id"><li><span lb-cell="name"></span></li></template>
+  </ul>`;
+describe("what a native element asks for", () => {
+    it("builds a delete from the list and the key around the button", async () => {
+        const hub = await mountHub(ROSTER);
+        server.sent.length = 0;
+        await click(hub.querySelector("button"));
+        assert.deepEqual(server.sent[0]?.request, {
+            action: "lb-row-delete",
+            list: "roster",
+            key: "42",
+        });
+    });
+    it("builds an insert from a form in a list scope, gathering its cells", async () => {
+        const hub = await mountHub(`
+      <form lb-list="roster" lb-action="lb-row-insert">
+        <input lb-cell="name" value="Bo" />
+      </form>`);
+        server.sent.length = 0;
+        await submit(hub.querySelector("form"));
+        assert.deepEqual(server.sent[0]?.request, {
+            action: "lb-row-insert",
+            list: "roster",
+            values: { name: "Bo" },
+        });
+    });
+    it("builds an update from a form inside a live row", async () => {
+        const hub = await mountHub(`
+      <ul lb-list="roster">
+        <li lb-key-value="42">
+          <form lb-action="lb-row-update">
+            <input lb-cell="name" value="Ann B" />
+          </form>
+        </li>
+      </ul>`);
+        server.sent.length = 0;
+        await submit(hub.querySelector("form"));
+        assert.deepEqual(server.sent[0]?.request, {
+            action: "lb-row-update",
+            list: "roster",
+            key: "42",
+            values: { name: "Ann B" },
+        });
+    });
+    it("carries whatever binding is in scope for a declared action, and no value", async () => {
+        const hub = await mountHub(`
+      <section lb-row="prefs">
+        <button lb-action="reset" lb-cell="active_tab">Reset</button>
+      </section>`);
+        server.sent.length = 0;
+        await click(hub.querySelector("button"));
+        assert.deepEqual(server.sent[0]?.request, {
+            action: "reset",
+            row: "prefs",
+            cell: "active_tab",
+        });
+    });
+    it("reports a cell with no control to read, and sends the rest", async () => {
+        const hub = await mountHub(`
+      <form lb-list="roster" lb-action="lb-row-insert">
+        <span lb-cell="label">not a control</span>
+        <input lb-cell="name" value="Bo" />
+      </form>`);
+        server.sent.length = 0;
+        const { warn } = await captured(() => submit(hub.querySelector("form")));
+        assert.match(warn.join("\n"), /lb-cell 'label' has no control to read/);
+        assert.deepEqual(server.sent[0]?.request, {
+            action: "lb-row-insert",
+            list: "roster",
+            values: { name: "Bo" },
+        });
+    });
+    it("refuses a reserved name it cannot turn into an operation", async () => {
+        // A cell change needs a widget to say what a change is, so a bare button
+        // naming one is a mistake the hub can see.
+        const hub = await mountHub(`
+      <ul lb-list="roster">
+        <li lb-key-value="42">
+          <button lb-action="lb-cell-change" lb-cell="name">go</button>
+        </li>
+      </ul>`);
+        server.sent.length = 0;
+        const { warn } = await captured(() => click(hub.querySelector("button")));
+        assert.match(warn.join("\n"), /cannot be sent from here/);
+        assert.equal(server.sent.length, 0);
+    });
+    it("refuses a delete with no key, since nothing says which row", async () => {
+        const hub = await mountHub(`
+      <ul lb-list="roster">
+        <button lb-action="lb-row-delete">x</button>
+      </ul>`);
+        server.sent.length = 0;
+        const { warn } = await captured(() => click(hub.querySelector("button")));
+        assert.match(warn.join("\n"), /cannot be sent from here/);
+        assert.equal(server.sent.length, 0);
+    });
+});
+describe("which interactions the hub takes", () => {
+    it("finds the nearest lb-action above the element clicked", async () => {
+        const hub = await mountHub(`
+      <section lb-row="prefs">
+        <button lb-action="reset"><span>Reset</span></button>
+      </section>`);
+        server.sent.length = 0;
+        await click(hub.querySelector("span"));
+        assert.equal(server.sent[0]?.request.action, "reset");
+    });
+    it("leaves a widget's own click alone, since the widget owns it", async () => {
+        const hub = await mountHub(`<section lb-row="prefs"><lb-thing lb-action="reset"></lb-thing></section>`);
+        server.sent.length = 0;
+        await click(hub.querySelector("lb-thing"));
+        assert.equal(server.sent.length, 0);
+    });
+    it("sends a form's action once, on its submit rather than on the click", async () => {
+        // The button submits the form, so both listeners see the interaction.
+        // Only the submit turns into a request.
+        const hub = await mountHub(`
+      <form lb-list="roster" lb-action="lb-row-insert">
+        <input lb-cell="name" value="Bo" />
+        <button>Add</button>
+      </form>`);
+        server.sent.length = 0;
+        await click(hub.querySelector("button"));
+        assert.equal(server.sent.length, 1);
+        assert.deepEqual(server.sent[0]?.request, {
+            action: "lb-row-insert",
+            list: "roster",
+            values: { name: "Bo" },
+        });
+    });
+    it("ignores an element carrying no action at all", async () => {
+        const hub = await mountHub(`<button>Plain</button>`);
+        server.sent.length = 0;
+        await click(hub.querySelector("button"));
+        assert.equal(server.sent.length, 0);
+    });
+});
+describe("what the hub refuses to forward", () => {
+    it("refuses an event with no action", async () => {
+        const hub = await mountHub(`<button>go</button>`);
+        server.sent.length = 0;
+        const { warn } = await captured(() => send(hub.querySelector("button"), undefined));
+        assert.match(warn.join("\n"), /event without an action/);
+        assert.equal(server.sent.length, 0);
+    });
+    it("refuses a reserved name that is not one of the four", async () => {
+        const hub = await mountHub(`<button>go</button>`);
+        server.sent.length = 0;
+        const { error } = await captured(() => send(hub.querySelector("button"), { action: "lb-row-rename" }));
+        assert.match(error.join("\n"), /names no operation/);
+        assert.equal(server.sent.length, 0);
+    });
+    it("forwards an operation a widget built, which the hub would not build itself", async () => {
+        const hub = await mountHub(`<lb-thing></lb-thing>`);
+        server.sent.length = 0;
+        await send(hub.querySelector("lb-thing"), {
+            action: "lb-cell-change",
+            list: "roster",
+            key: "42",
+            cell: "name",
+            value: "Ann",
+        });
+        assert.equal(server.sent[0]?.request.action, "lb-cell-change");
+    });
+});
+describe("request state", () => {
+    it("stamps the element that dispatched, not the hub", async () => {
+        const hub = await mountHub(`<section lb-row="prefs"><button lb-action="reset">go</button></section>`);
+        const button = hub.querySelector("button");
+        let pendingWhileInFlight = false;
+        server.answer = {};
+        const watching = new Promise((resolve) => {
+            globalThis.queueMicrotask(() => {
+                pendingWhileInFlight = button.hasAttribute("lb-pending");
+                resolve();
+            });
+        });
+        button.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+        await watching;
+        await settle();
+        assert.equal(pendingWhileInFlight, true);
+        assert.equal(button.hasAttribute("lb-pending"), false);
+        assert.equal(hub.hasAttribute("lb-pending"), false);
+    });
+    it("sets lb-error on a failed round trip and clears it on the next", async () => {
+        const hub = await mountHub(`<section lb-row="prefs"><button lb-action="reset">go</button></section>`);
+        const button = hub.querySelector("button");
+        server.fail = "network down";
+        const { error } = await captured(() => click(button));
+        assert.match(error.join("\n"), /request failed/);
+        assert.equal(button.hasAttribute("lb-error"), true);
+        assert.equal(button.hasAttribute("lb-pending"), false);
+        delete server.fail;
+        await click(button);
+        assert.equal(button.hasAttribute("lb-error"), false);
+    });
+});
+describe("finding a page host", () => {
+    it("lands the page the path names", async () => {
+        const hub = await mountHub(``, {
+            index: `<h1>Home</h1>`,
+            members: `<h1>Members</h1>`,
+        });
+        assert.match(hub.querySelector("main").innerHTML, /Home/);
+    });
+    it("reports a path with no host and opens the unknown-page dialog", async () => {
+        const { error } = await captured(() => mountHub(`<dialog lb-unknown-page></dialog>`, { index: `<h1>Home</h1>` }, "/nowhere"));
+        assert.match(error.join("\n"), /no page host for 'nowhere'/);
+        assert.equal(document.querySelector("dialog").hasAttribute("open"), true);
+    });
+    it("reports and carries on when a chrome declares no dialog", async () => {
+        const { error } = await captured(() => mountHub(``, { index: `<h1>Home</h1>` }, "/nowhere"));
+        assert.match(error.join("\n"), /no page host for 'nowhere'/);
+    });
+    it("reports two hosts for one name and takes the first", async () => {
+        // The builder refuses this — build/locations.ts — so reaching it means
+        // the document was assembled by something else.
+        const { error } = await captured(async () => {
+            history.replaceState(null, "", "/");
+            document.body.innerHTML =
+                `<lb-hub><main></main></lb-hub>` +
+                    `<template lb-page="index"><h1>First</h1></template>` +
+                    `<template lb-page="index"><h1>Second</h1></template>`;
+            await settle();
+        });
+        assert.match(error.join("\n"), /2 page hosts carry lb-page="index"/);
+        assert.match(document.querySelector("main").innerHTML, /First/);
+    });
+});
+describe("navigation", () => {
+    it("swaps the host on an lb-nav-link and reverses it on popstate", async () => {
+        const hub = await mountHub(`<nav><a href="/members" lb-nav-link>Members</a></nav>`, { index: `<h1>Home</h1>`, members: `<h1>Members</h1>` });
+        const main = hub.querySelector("main");
+        assert.match(main.innerHTML, /Home/);
+        await click(hub.querySelector("a"));
+        assert.equal(location.pathname, "/members");
+        assert.match(main.innerHTML, /Members/);
+        await back();
+        assert.match(main.innerHTML, /Home/);
+    });
+    it("leaves an anchor without lb-nav-link to the browser", async () => {
+        const hub = await mountHub(`<nav><a href="/members">Members</a></nav>`, {
+            index: `<h1>Home</h1>`,
+            members: `<h1>Members</h1>`,
+        });
+        await click(hub.querySelector("a"));
+        assert.equal(location.pathname, "/");
+        assert.match(hub.querySelector("main").innerHTML, /Home/);
+    });
+    it("asks the server for the page the path names", async () => {
+        const hub = await mountHub(`<nav><a href="/members" lb-nav-link>Members</a></nav>`, { index: ``, members: `` });
+        server.sent.length = 0;
+        await click(hub.querySelector("a"));
+        assert.equal(server.sent[0]?.page, "members");
+    });
+    it("lands the navigation row with the path and the link that names it", async () => {
+        const hub = await mountHub(`<nav><a href="/members" lb-nav-link>Members</a></nav>
+       <p lb-row="lb-navigation">
+         <span lb-cell="page-label"></span> at <span lb-cell="page-uri"></span>
+       </p>`, { index: ``, members: `` });
+        await click(hub.querySelector("a"));
+        const row = hub.querySelector(`[lb-row="lb-navigation"]`);
+        assert.equal(row.querySelector(`[lb-cell="page-label"]`).textContent, "Members");
+        assert.equal(row.querySelector(`[lb-cell="page-uri"]`).textContent, "/members");
+    });
+    it("leaves the label empty when no link names the page", async () => {
+        const hub = await mountHub(`<p lb-row="lb-navigation"><span lb-cell="page-label"></span></p>`);
+        const label = hub.querySelector(`[lb-cell="page-label"]`);
+        assert.equal(label.textContent, "");
+    });
+});
+describe("revealing the body", () => {
+    it("takes hidden off once a page has landed", async () => {
+        document.body.setAttribute("hidden", "");
+        await mountHub(``, { index: `<h1>Home</h1>` });
+        assert.equal(document.body.hasAttribute("hidden"), false);
+    });
+    it("takes hidden off even when the path names no page", async () => {
+        document.body.setAttribute("hidden", "");
+        await captured(() => mountHub(``, { index: `<h1>Home</h1>` }, "/nowhere"));
+        assert.equal(document.body.hasAttribute("hidden"), false);
+    });
+    it("takes hidden off even when the data fails to load", async () => {
+        document.body.setAttribute("hidden", "");
+        server.fail = "network down";
+        await captured(async () => {
+            await mountHub(``, { index: `<h1>Home</h1>` });
+        });
+        delete server.fail;
+        assert.equal(document.body.hasAttribute("hidden"), false);
+    });
+});

package/dist/tests/{lb-rows.test.d.ts → lb-list.test.d.ts}

@@ -9,4 +9,4 @@
  * convergence, and two properties state it better than twenty examples.
  */
 export {};
-//# sourceMappingURL=lb-rows.test.d.ts.map
+//# sourceMappingURL=lb-list.test.d.ts.map

package/dist/tests/lb-list.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-list.test.d.ts","sourceRoot":"","sources":["../../tests/lb-list.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG"}