@loadbare/app 0.5.5 → 0.6.0

package/dist/tests/expand.test.js

@@ -38,9 +38,6 @@ function defs(entries) {
 // that must not produce output. Each asserts on the message as well as the
 // throw: an author reads the message, and it is the whole of the diagnosis.
 describe("expansion rejects", () => {
-    it("a hub tag with no definition", () => {
-        assert.throws(() => expand(`<lb-nope></lb-nope>`, defs({})), /<lb-nope> has no definition/);
-    });
     it("a parameter the definition never declared", () => {
         assert.throws(() => expand(`<lb-thing exp-label="Name"></lb-thing>`, defs({ "lb-thing": `<div></div>` })), /given exp-label, but its definition has no \{\{label\}\}/);
     });
@@ -101,6 +98,30 @@ describe("substitution", () => {
         const html = expand(`<lb-thing></lb-thing>`, defs({ "lb-thing": `<label>{{label}}</label>` }));
         assert.match(html, /<label><\/label>/);
     });
+    it("falls back to a default the definition wrote", () => {
+        const html = expand(`<lb-thing></lb-thing>`, defs({ "lb-thing": `<button>{{text|OK}}</button>` }));
+        assert.match(html, /<button>OK<\/button>/);
+    });
+    it("lets a supplied value win over a default", () => {
+        const html = expand(`<lb-thing exp-text="Go"></lb-thing>`, defs({ "lb-thing": `<button>{{text|OK}}</button>` }));
+        assert.match(html, /<button>Go<\/button>/);
+    });
+    it("trims whitespace around a name and its default", () => {
+        // A spaced form that shipped as literal braces would be a silent failure
+        // found in the browser, so the space is not part of either side.
+        const html = expand(`<lb-thing></lb-thing>`, defs({
+            "lb-thing": `<button title="{{ tip | Press me }}">{{ text | OK }}</button>`,
+        }));
+        assert.match(html, /<button title="Press me">OK<\/button>/);
+    });
+    it("emits an attribute whose default is empty", () => {
+        // The one case a default distinguishes from no default: presence.
+        // readonly="{{readonly|}}" is a boolean attribute on unless a tag turns
+        // it off — which, since a supplied value is a string, a tag cannot do;
+        // the default is for a definition that wants the attribute there.
+        const html = expand(`<lb-thing></lb-thing>`, defs({ "lb-thing": `<input readonly="{{readonly|}}" />` }));
+        assert.match(html, /<input readonly="">/);
+    });
     it("reaches placeholders inside template content", () => {
         // lb-picker ships a row template of its own, so {{key}} written inside
         // one has to be a placeholder rather than literal text that ships.
@@ -202,6 +223,12 @@ describe("placement", () => {
         const html = expand(`<app-box>hi</app-box>`, defs({}));
         assert.match(html, /<app-box>hi<\/app-box>/);
     });
+    it("leaves a tag with no definition alone, whatever its name", () => {
+        // No name is special, the hub's own tag included. A tag that has neither
+        // a definition nor a script is refused once, in build/elements.ts.
+        const html = expand(`<lb-nope></lb-nope><lb-hub></lb-hub>`, defs({}));
+        assert.match(html, /<lb-nope><\/lb-nope><lb-hub><\/lb-hub>/);
+    });
 });
 // --- Loading -------------------------------------------------------------
 describe("loadDefinitions", () => {

package/dist/tests/helpers/hub.d.ts

@@ -0,0 +1,73 @@
+/**
+ * A window for tier 4 — see docs/testing.md.
+ *
+ * Tier 3 needed no globals: the landing code is handed a root and calls
+ * methods on it. The hub is the opposite. It extends `HTMLElement`, it
+ * registers itself with `customElements` when its module loads, and it
+ * reaches `document`, `history` and `location` on its own. So the window has
+ * to exist before the module does, which is why the hub is imported
+ * dynamically, after `installWindow()` has run:
+ *
+ *     installWindow();
+ *     await import("../hub/lb-hub.browser");
+ *
+ * One window per test file, since registration is global and permanent.
+ *
+ * Two things the hub reaches for do not exist in jsdom 25 and are supplied
+ * here. `fetch` is absent, and a scripted one is what a test wants in any
+ * case. `HTMLDialogElement.showModal` is absent, so it is recorded rather
+ * than performed. Everything else — `history.pushState`, `popstate`, event
+ * delegation, form controls — is jsdom's own.
+ */
+import type { HubData, HubRequest } from "../../core/lb-types";
+/** One round trip the hub asked for. */
+export interface Sent {
+    page: string;
+    request: HubRequest | Record<string, never>;
+}
+export interface Server {
+    /** Every round trip, in order. */
+    sent: Sent[];
+    /** What the next round trip answers with. Replace it per test. */
+    answer: HubData;
+    /** Set to fail the next round trip instead of answering it. */
+    fail?: string;
+}
+/** The scripted server every test in a file shares. */
+export declare const server: Server;
+export declare function installWindow(): void;
+/**
+ * Put a built document in place and hand back the hub in it.
+ *
+ * `pages` are the page hosts the builder would have written, keyed by stub —
+ * see build/assemble.ts. `chrome` is what goes inside `<lb-hub>` beside
+ * `<main>`. `path` is where the browser is when the hub connects, and it is
+ * reset for every mount so no test inherits where the last one navigated to.
+ *
+ * Connecting the hub is what runs `connectedCallback`, and that navigates,
+ * so the caller awaits the first round trip before asserting.
+ */
+export declare function mountHub(chrome: string, pages?: Record<string, string>, path?: string): Promise<Element>;
+/**
+ * Let the hub's pending round trip finish.
+ *
+ * `navigate` is async and nothing hands a test its promise, so a test waits
+ * on the microtask queue the way the page does. Two turns: one for the fetch
+ * and one for reading its body.
+ */
+export declare function settle(): Promise<void>;
+/**
+ * Step back and let the hub answer.
+ *
+ * `history.back()` is queued rather than synchronous, so a test waits for
+ * the `popstate` the hub is listening for and then for the round trip it
+ * starts.
+ */
+export declare function back(): Promise<void>;
+/** Fire the event a person's click fires. */
+export declare function click(el: Element): Promise<void>;
+/** Fire the event a form's submit fires. */
+export declare function submit(form: Element): Promise<void>;
+/** Dispatch a request the way a widget does. */
+export declare function send(el: Element, detail: HubRequest | undefined): Promise<void>;
+//# sourceMappingURL=hub.d.ts.map

package/dist/tests/helpers/hub.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hub.d.ts","sourceRoot":"","sources":["../../../tests/helpers/hub.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAyB/D,wCAAwC;AACxC,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,MAAM;IACrB,kCAAkC;IAClC,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,kEAAkE;IAClE,MAAM,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,uDAAuD;AACvD,eAAO,MAAM,MAAM,EAAE,MAAiC,CAAC;AAEvD,wBAAgB,aAAa,IAAI,IAAI,CAgDpC;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,QAAQ,CAC5B,MAAM,EAAE,MAAM,EACd,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAiB,EAC7C,IAAI,SAAM,GACT,OAAO,CAAC,OAAO,CAAC,CAQlB;AAED;;;;;;GAMG;AACH,wBAAsB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAG5C;AAED;;;;;;GAMG;AACH,wBAAsB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAO1C;AAED,6CAA6C;AAC7C,wBAAsB,KAAK,CAAC,EAAE,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAKtD;AAED,4CAA4C;AAC5C,wBAAsB,MAAM,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAGzD;AAED,gDAAgD;AAChD,wBAAsB,IAAI,CACxB,EAAE,EAAE,OAAO,EACX,MAAM,EAAE,UAAU,GAAG,SAAS,GAC7B,OAAO,CAAC,IAAI,CAAC,CAGf"}

package/dist/tests/helpers/hub.js

@@ -0,0 +1,151 @@
+/**
+ * A window for tier 4 — see docs/testing.md.
+ *
+ * Tier 3 needed no globals: the landing code is handed a root and calls
+ * methods on it. The hub is the opposite. It extends `HTMLElement`, it
+ * registers itself with `customElements` when its module loads, and it
+ * reaches `document`, `history` and `location` on its own. So the window has
+ * to exist before the module does, which is why the hub is imported
+ * dynamically, after `installWindow()` has run:
+ *
+ *     installWindow();
+ *     await import("../hub/lb-hub.browser");
+ *
+ * One window per test file, since registration is global and permanent.
+ *
+ * Two things the hub reaches for do not exist in jsdom 25 and are supplied
+ * here. `fetch` is absent, and a scripted one is what a test wants in any
+ * case. `HTMLDialogElement.showModal` is absent, so it is recorded rather
+ * than performed. Everything else — `history.pushState`, `popstate`, event
+ * delegation, form controls — is jsdom's own.
+ */
+import { JSDOM, VirtualConsole } from "jsdom";
+/** The globals the hub reaches for as it loads and runs. */
+const GLOBALS = [
+    "window",
+    "document",
+    "customElements",
+    "HTMLElement",
+    "HTMLFormElement",
+    "HTMLInputElement",
+    "HTMLSelectElement",
+    "HTMLTextAreaElement",
+    "HTMLTemplateElement",
+    "HTMLDialogElement",
+    "HTMLAnchorElement",
+    "Element",
+    "Node",
+    "Event",
+    "CustomEvent",
+    "MouseEvent",
+    "DocumentFragment",
+    "history",
+    "location",
+];
+/** The scripted server every test in a file shares. */
+export const server = { sent: [], answer: {} };
+export function installWindow() {
+    // jsdom reports a real anchor's navigation as an unimplemented feature.
+    // That is the point of the test that clicks one — the hub left it to the
+    // browser — so the complaint is dropped rather than printed.
+    const quiet = new VirtualConsole();
+    quiet.sendTo(console, { omitJSDOMErrors: true });
+    const { window } = new JSDOM(`<!doctype html><body></body>`, {
+        url: "http://localhost/",
+        virtualConsole: quiet,
+    });
+    for (const name of GLOBALS) {
+        globalThis[name] = window[name];
+    }
+    // The hub registers `popstate` on the global rather than on a window it
+    // was handed, so the global's listener registry has to be the window's.
+    globalThis.addEventListener = window.addEventListener.bind(window);
+    globalThis.removeEventListener = window.removeEventListener.bind(window);
+    // Recorded, not performed: jsdom has <dialog> but none of its behavior.
+    // The hub only ever asks whether it is open and opens it, so that pair is
+    // the whole of what a test needs.
+    const dialog = window.HTMLDialogElement.prototype;
+    dialog.showModal = function () {
+        this.setAttribute("open", "");
+    };
+    dialog.close = function () {
+        this.removeAttribute("open");
+    };
+    server.sent = [];
+    server.answer = {};
+    delete server.fail;
+    globalThis.fetch = (async (url, init) => {
+        server.sent.push({
+            page: new URL(url, "http://localhost/").searchParams.get("page") ?? "",
+            request: JSON.parse(init.body),
+        });
+        if (server.fail)
+            throw new Error(server.fail);
+        return {
+            ok: true,
+            json: async () => server.answer,
+        };
+    });
+}
+/**
+ * Put a built document in place and hand back the hub in it.
+ *
+ * `pages` are the page hosts the builder would have written, keyed by stub —
+ * see build/assemble.ts. `chrome` is what goes inside `<lb-hub>` beside
+ * `<main>`. `path` is where the browser is when the hub connects, and it is
+ * reset for every mount so no test inherits where the last one navigated to.
+ *
+ * Connecting the hub is what runs `connectedCallback`, and that navigates,
+ * so the caller awaits the first round trip before asserting.
+ */
+export async function mountHub(chrome, pages = { index: "" }, path = "/") {
+    history.replaceState(null, "", path);
+    const hosts = Object.entries(pages)
+        .map(([name, html]) => `<template lb-page="${name}">${html}</template>`)
+        .join("");
+    document.body.innerHTML = `<lb-hub><main></main>${chrome}</lb-hub>${hosts}`;
+    await settle();
+    return document.body.firstElementChild;
+}
+/**
+ * Let the hub's pending round trip finish.
+ *
+ * `navigate` is async and nothing hands a test its promise, so a test waits
+ * on the microtask queue the way the page does. Two turns: one for the fetch
+ * and one for reading its body.
+ */
+export async function settle() {
+    for (let i = 0; i < 4; i++)
+        await Promise.resolve();
+    await new Promise((r) => setTimeout(r, 0));
+}
+/**
+ * Step back and let the hub answer.
+ *
+ * `history.back()` is queued rather than synchronous, so a test waits for
+ * the `popstate` the hub is listening for and then for the round trip it
+ * starts.
+ */
+export async function back() {
+    const stepped = new Promise((resolve) => {
+        globalThis.addEventListener("popstate", () => resolve(), { once: true });
+    });
+    history.back();
+    await stepped;
+    await settle();
+}
+/** Fire the event a person's click fires. */
+export async function click(el) {
+    el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    await settle();
+}
+/** Fire the event a form's submit fires. */
+export async function submit(form) {
+    form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+    await settle();
+}
+/** Dispatch a request the way a widget does. */
+export async function send(el, detail) {
+    el.dispatchEvent(new CustomEvent("lb-request", { bubbles: true, detail }));
+    await settle();
+}

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

@@ -6,21 +6,14 @@
  */
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import { applyData, applyTuple } from "../hub/lb-apply";
+import { applyData, applyRow } from "../hub/lb-apply";
 import { body, one } from "./helpers/dom";
 import { captured } from "./helpers/console";
-/** An element that is a list widget as far as the hub is concerned. */
-function rowHost(html) {
-    const el = one(html);
-    el.seen = [];
-    el.acceptRows = (result) => void el.seen.push(result);
-    return el;
-}
-// --- One tuple into one scope -------------------------------------------
-describe("applyTuple", () => {
+// --- One row into one scope ---------------------------------------------
+describe("applyRow", () => {
     it("gives a native element its value as text", () => {
         const scope = one(`<div><span lb-cell="name"></span></div>`);
-        applyTuple(scope, { name: "Ada" });
+        applyRow(scope, { name: "Ada" });
         assert.equal(scope.querySelector("span").textContent, "Ada");
     });
     it("gives a widget its value as an attribute", () => {
@@ -28,7 +21,7 @@ describe("applyTuple", () => {
         // value and renders it itself. The test is lexical — a hyphen in the tag
         // name — and the hub holds no knowledge of any particular element.
         const scope = one(`<div><lb-input lb-cell="name"></lb-input></div>`);
-        applyTuple(scope, { name: "Ada" });
+        applyRow(scope, { name: "Ada" });
         const widget = scope.querySelector("lb-input");
         assert.equal(widget.getAttribute("lb-value"), "Ada");
         assert.equal(widget.textContent, "", "the widget's children are its own");
@@ -38,12 +31,12 @@ describe("applyTuple", () => {
         // it displays. Requiring a wrapper would require an element HTML does
         // not allow.
         const scope = one(`<option lb-cell="name"></option>`);
-        applyTuple(scope, { name: "Ada" });
+        applyRow(scope, { name: "Ada" });
         assert.equal(scope.textContent, "Ada");
     });
     it("fills every element naming the same cell", () => {
         const scope = one(`<div><b lb-cell="name"></b><i lb-cell="name"></i></div>`);
-        applyTuple(scope, { name: "Ada" });
+        applyRow(scope, { name: "Ada" });
         assert.equal(scope.querySelector("b").textContent, "Ada");
         assert.equal(scope.querySelector("i").textContent, "Ada");
     });
@@ -56,7 +49,7 @@ describe("applyTuple", () => {
         // model. But nothing stops an author writing a cell on a <tr> that has
         // cells inside it, and this is what they would get.
         const scope = body(`<table><tbody><tr lb-cell="line"><td lb-cell="amount"></td></tr></tbody></table>`).querySelector("tr");
-        applyTuple(scope, { line: "Total", amount: "10" });
+        applyRow(scope, { line: "Total", amount: "10" });
         assert.equal(scope.textContent, "Total");
         assert.equal(scope.children.length, 0, "the amount cell is gone");
     });
@@ -65,88 +58,119 @@ describe("applyTuple", () => {
         // widget receives its value as an attribute and renders it itself. The
         // asymmetry follows from what a cell means on each kind of element.
         const scope = one(`<lb-input lb-cell="line"><input /></lb-input>`);
-        applyTuple(scope, { line: "Total" });
+        applyRow(scope, { line: "Total" });
         assert.equal(scope.getAttribute("lb-value"), "Total");
         assert.equal(scope.children.length, 1);
     });
-    it("leaves a cell the tuple did not name alone", () => {
+    it("leaves a cell the row did not name alone", () => {
         const scope = one(`<div><span lb-cell="name">Ada</span><span lb-cell="role">lead</span></div>`);
-        applyTuple(scope, { role: "staff" });
+        applyRow(scope, { role: "staff" });
         assert.equal(scope.querySelector(`[lb-cell="name"]`).textContent, "Ada");
         assert.equal(scope.querySelector(`[lb-cell="role"]`).textContent, "staff");
     });
     it("says nothing about a cell with nowhere to land", () => {
         const scope = one(`<div><span lb-cell="name"></span></div>`);
-        assert.doesNotThrow(() => applyTuple(scope, { absent: "x" }));
+        assert.doesNotThrow(() => applyRow(scope, { absent: "x" }));
     });
     it("lands a value as text, so data cannot become markup", () => {
         // The same guarantee expansion makes at build time, made here at run
         // time and by the same means: the DOM API rather than a string.
         const scope = one(`<div><span lb-cell="name"></span></div>`);
-        applyTuple(scope, { name: `<img src=x onerror=alert(1)>` });
+        applyRow(scope, { name: `<img src=x onerror=alert(1)>` });
         assert.equal(scope.querySelectorAll("img").length, 0);
         assert.equal(scope.querySelector("span").textContent, `<img src=x onerror=alert(1)>`);
     });
     it("lands the empty string as the empty string", () => {
         const scope = one(`<div><span lb-cell="name">Ada</span></div>`);
-        applyTuple(scope, { name: "" });
+        applyRow(scope, { name: "" });
         assert.equal(scope.querySelector("span").textContent, "");
     });
 });
 // --- A whole response ----------------------------------------------------
 describe("applyData", () => {
-    it("lands each result in the scope its query names", async () => {
-        const root = body(`<div lb-query="greeting"><span lb-cell="text"></span></div>` +
-            `<div lb-query="count"><span lb-cell="n"></span></div>`);
+    it("lands each result in the scope its name binds", () => {
+        const root = body(`<div lb-row="greeting"><span lb-cell="text"></span></div>` +
+            `<div lb-row="count"><span lb-cell="n"></span></div>`);
         applyData(root, { greeting: { text: "hello" }, count: { n: "3" } });
-        assert.equal(root.querySelector(`[lb-query="greeting"] span`).textContent, "hello");
-        assert.equal(root.querySelector(`[lb-query="count"] span`).textContent, "3");
-    });
-    it("fills every scope naming the same query", () => {
-        // Two projections of one query on one page: the hub resolves by name and
-        // does not care how many places asked.
-        const root = body(`<div lb-query="total"><span lb-cell="n"></span></div>` +
-            `<p lb-query="total"><span lb-cell="n"></span></p>`);
+        assert.equal(root.querySelector(`[lb-row="greeting"] span`).textContent, "hello");
+        assert.equal(root.querySelector(`[lb-row="count"] span`).textContent, "3");
+    });
+    it("fills every scope naming the same name", () => {
+        // One name shown in two places: the hub resolves by name and does not
+        // care how many places asked.
+        const root = body(`<div lb-row="total"><span lb-cell="n"></span></div>` +
+            `<p lb-row="total"><span lb-cell="n"></span></p>`);
         applyData(root, { total: { n: "7" } });
         for (const el of root.querySelectorAll("span")) {
             assert.equal(el.textContent, "7");
         }
     });
-    it("reports a query with no scope, and lands the rest anyway", async () => {
-        const root = body(`<div lb-query="count"><span lb-cell="n"></span></div>`);
+    it("reports a name with no scope, and lands the rest anyway", async () => {
+        const root = body(`<div lb-row="count"><span lb-cell="n"></span></div>`);
         const { warn } = await captured(() => applyData(root, { ghost: { x: "1" }, count: { n: "3" } }));
-        assert.match(warn.join("\n"), /no scope for query 'ghost', skipping/);
+        assert.match(warn.join("\n"), /no scope for 'ghost', skipping/);
         assert.equal(root.querySelector("span").textContent, "3");
     });
-    it("hands a projection to the widget, whole", () => {
-        const host = rowHost(`<lb-list lb-query="members"></lb-list>`);
-        const root = body("");
-        root.append(host);
-        const result = { op: "rows", rows: [{ id: "1" }] };
-        applyData(root, { members: result });
-        assert.deepEqual(host.seen, [result]);
-    });
-    it("reports a projection landing on something that is not a list", async () => {
-        // 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.
-        const root = body(`<div lb-query="members"></div>`);
-        const { error } = await captured(() => applyData(root, { members: { op: "rows", rows: [{ id: "1" }] } }));
-        assert.match(error.join("\n"), /query 'members' returned rows, but <div> is not a list widget/);
-    });
-    it("reads a tuple carrying a cell called op as a projection", async () => {
-        // The reserved name, from the browser's side. Stated in
-        // core/lb-types.ts and worth failing loudly if it ever moves.
-        const root = body(`<div lb-query="members"></div>`);
-        const { error } = await captured(() => applyData(root, { members: { op: "rows" } }));
-        assert.match(error.join("\n"), /is not a list widget/);
-    });
-    it("lands a tuple whose op cell is not a projection word", () => {
-        const root = body(`<div lb-query="row"><span lb-cell="op"></span></div>`);
-        applyData(root, { row: { op: "deleted" } });
-        assert.equal(root.querySelector("span").textContent, "deleted");
+    it("reconciles a list scope, with no widget in it at all", () => {
+        // The repeater widget is gone: a plain element carrying lb-list and a
+        // row template inside it is the whole of a list.
+        const root = body(`<ul lb-list="members">` +
+            `<template lb-key="id"><li lb-cell="name"></li></template>` +
+            `</ul>`);
+        applyData(root, {
+            members: [
+                { id: "1", name: "Ada" },
+                { id: "2", name: "Bab" },
+            ],
+        });
+        assert.deepEqual([...root.querySelectorAll("li")].map((el) => el.textContent), ["Ada", "Bab"]);
+    });
+    it("lands a patch in a list scope, because the name declared the shape", () => {
+        // A patch and a row are both objects. What tells them apart is the
+        // attribute that asked, not the value that arrived.
+        const root = body(`<ul lb-list="members">` +
+            `<template lb-key="id"><li lb-cell="name"></li></template>` +
+            `</ul>`);
+        applyData(root, { members: [{ id: "1", name: "Ada" }] });
+        applyData(root, { members: { rows: [{ id: "2", name: "Bab" }] } });
+        assert.deepEqual([...root.querySelectorAll("li")].map((el) => el.textContent), ["Ada", "Bab"]);
+    });
+    it("refuses a name bound as a list in one place and a row in another", async () => {
+        // Cardinality is a property of the name, so this is a mistake in the
+        // markup rather than a case to reconcile.
+        const root = body(`<ul lb-list="members">` +
+            `<template lb-key="id"><li lb-cell="name"></li></template>` +
+            `</ul>` +
+            `<div lb-row="members"><span lb-cell="name"></span></div>`);
+        const { error } = await captured(() => applyData(root, { members: [{ id: "1", name: "Ada" }] }));
+        assert.match(error.join("\n"), /a list in one place and a row in another/);
+        assert.equal(root.querySelectorAll("li").length, 0, "nothing landed");
+    });
+    it("refuses rows arriving at a row scope", async () => {
+        const root = body(`<div lb-row="members"><span lb-cell="n"></span></div>`);
+        const { error } = await captured(() => applyData(root, { members: [{ id: "1" }] }));
+        assert.match(error.join("\n"), /bound with lb-row but answered with rows/);
+    });
+    it("does not carry a row into a nested scope", () => {
+        // A nested scope of either kind begins a new one, so a cell named alike
+        // inside it belongs to the inner name.
+        const root = body(`<div lb-row="outer"><span lb-cell="name"></span>` +
+            `<p lb-row="inner"><span lb-cell="name"></span></p></div>`);
+        applyData(root, { inner: { name: "in" }, outer: { name: "out" } });
+        const [first, second] = root.querySelectorAll("span");
+        assert.equal(first.textContent, "out");
+        assert.equal(second.textContent, "in");
+    });
+    it("lands a column called op like any other", () => {
+        // It used to be reserved, because the hub read it to tell a row from a
+        // set. Cardinality is declared now, so nothing inspects a value and no
+        // column name is spoken for.
+        const root = body(`<div lb-row="thing"><span lb-cell="op"></span></div>`);
+        applyData(root, { thing: { op: "rows" } });
+        assert.equal(root.querySelector("span").textContent, "rows");
     });
     it("does nothing with an empty response", () => {
-        const root = body(`<div lb-query="count"><span lb-cell="n">3</span></div>`);
+        const root = body(`<div lb-row="count"><span lb-cell="n">3</span></div>`);
         applyData(root, {});
         assert.equal(root.querySelector("span").textContent, "3");
     });

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

@@ -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.
  *