@loadbare/app 0.4.0 → 0.5.1

package/dist/client.js

@@ -1,522 +0,0 @@
-"use strict";
-(() => {
-  // core/lb-constants.ts
-  var ATTR_QUERY = "lb-query";
-  var ATTR_KEY = "lb-key";
-  var ATTR_CELL = "lb-cell";
-  var ATTR_VALUE = "lb-value";
-  var ATTR_GROUP = "lb-group";
-  var ATTR_SORT = "lb-sort";
-  var ATTR_ROW_COUNT = "data-rows";
-  var LB_EVENT_NAME = "lb-request";
-  var ATTR_ACTION = "lb-action";
-  var ATTR_DELETE = "lb-delete";
-  var ATTR_INSERT = "lb-insert";
-  var ATTR_UPDATE = "lb-update";
-  var ATTR_NAV_LINK = "lb-nav-link";
-  var PAGE_TEMPLATE_PREFIX = "page-";
-  var HUB_TAG_NAME = "lb-hub";
-  var ATTR_PENDING = "data-lb-pending";
-  var ATTR_ERROR = "data-lb-error";
-  var LB_DATA_ENDPOINT = "/lb/data";
-  var LB_REQUEST_ENDPOINT = "/lb";
-  var LB_REQUEST_TIMEOUT_MS = 1e4;
-
-  // widgets/lb-input.ts
-  var LbInput = class extends HTMLElement {
-    static observedAttributes = [ATTR_VALUE];
-    attributeChangedCallback(_name, _old, value) {
-      const input = this.querySelector("input");
-      if (!input) {
-        console.error(`lb-input: no <input> to receive the value`);
-        return;
-      }
-      input.value = value;
-    }
-    connectedCallback() {
-      this.addEventListener("change", () => {
-        const input = this.querySelector("input");
-        if (!input) {
-          console.error(`lb-input: change with no <input>, ignoring`);
-          return;
-        }
-        const query = this.closest(`[${ATTR_QUERY}]`)?.getAttribute(ATTR_QUERY);
-        const key = this.closest(`[${ATTR_KEY}]`)?.getAttribute(ATTR_KEY);
-        const cell = this.getAttribute(ATTR_CELL);
-        if (!query || !key || !cell) {
-          console.error(
-            `lb-input: change with no query/key/cell coordinates, ignoring`
-          );
-          return;
-        }
-        const detail = {
-          op: "cell-change",
-          query,
-          key,
-          cell,
-          value: input.value
-        };
-        this.dispatchEvent(
-          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
-        );
-      });
-    }
-  };
-  customElements.define("lb-input", LbInput);
-
-  // widgets/lb-select.ts
-  var LbSelect = class extends HTMLElement {
-    static observedAttributes = [ATTR_VALUE];
-    attributeChangedCallback(_name, _old, value) {
-      const select = this.querySelector("select");
-      if (!select) {
-        console.error(`lb-select: no <select> to receive the value`);
-        return;
-      }
-      select.value = value;
-    }
-    connectedCallback() {
-      this.addEventListener("change", () => {
-        const select = this.querySelector("select");
-        if (!select) {
-          console.error(`lb-select: change with no <select>, ignoring`);
-          return;
-        }
-        const name = this.getAttribute(ATTR_ACTION);
-        if (!name) {
-          console.error(`lb-select: no ${ATTR_ACTION}, nothing to send`);
-          return;
-        }
-        const detail = {
-          op: "action",
-          name,
-          value: select.value
-        };
-        this.dispatchEvent(
-          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
-        );
-      });
-    }
-  };
-  customElements.define("lb-select", LbSelect);
-
-  // core/lb-types.ts
-  function isProjection(result) {
-    const op = result.op;
-    return op === "rows" || op === "patch";
-  }
-
-  // hub/lb-apply.ts
-  function land(el, value) {
-    if (el.localName.includes("-")) el.setAttribute(ATTR_VALUE, value);
-    else el.textContent = value;
-  }
-  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);
-    }
-  }
-  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);
-  }
-  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);
-      }
-    }
-  }
-
-  // hub/lb-rows.ts
-  var before = (row, _tuple, template) => {
-    template.parentElement.insertBefore(row, template);
-  };
-  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;
-  }
-  function showing(scope, template) {
-    const rows = /* @__PURE__ */ new Map();
-    for (const el of scope.querySelectorAll(`[${ATTR_KEY}]`)) {
-      if (el !== template) rows.set(el.getAttribute(ATTR_KEY), el);
-    }
-    return rows;
-  }
-  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 === void 0) {
-        console.error(
-          `lb-rows: a tuple for <${scope.localName}> has no '${keyCell}' cell`
-        );
-        return null;
-      }
-      let row = rows.get(key);
-      const fresh = row === void 0;
-      if (!row) {
-        row = template.content.firstElementChild.cloneNode(true);
-        row.setAttribute(ATTR_KEY, key);
-        rows.set(key, row);
-      }
-      applyTuple(row, tuple);
-      if (fresh || result.op === "rows") place(row, tuple, template);
-      return key;
-    };
-    if (result.op === "rows") {
-      const arrived = /* @__PURE__ */ 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();
-    }
-    scope.setAttribute(ATTR_ROW_COUNT, String(showing(scope, template).size));
-  }
-
-  // widgets/lb-list.ts
-  var LbList = class extends HTMLElement {
-    acceptRows(result) {
-      applyRows(this, result);
-    }
-  };
-  customElements.define("lb-list", LbList);
-
-  // widgets/lb-options.ts
-  var LbOptions = class extends HTMLElement {
-    acceptRows(result) {
-      applyRows(this, result, this.place);
-      for (const option of this.querySelectorAll(`option[${ATTR_KEY}]`)) {
-        option.setAttribute("value", option.getAttribute(ATTR_KEY));
-      }
-      for (const group of this.querySelectorAll("optgroup")) {
-        if (!group.querySelector("option")) group.remove();
-      }
-    }
-    place = (row, tuple, template) => {
-      const select = this.querySelector("select");
-      const groupCell = template.getAttribute(ATTR_GROUP);
-      if (!groupCell) {
-        select.insertBefore(row, template);
-        return;
-      }
-      this.groupFor(select, template, tuple[groupCell] ?? "").append(row);
-    };
-    /** The group with this label, or a new one in front of the template. */
-    groupFor(select, template, label) {
-      for (const group2 of select.querySelectorAll("optgroup")) {
-        if (group2.label === label) return group2;
-      }
-      const group = document.createElement("optgroup");
-      group.label = label;
-      select.insertBefore(group, template);
-      return group;
-    }
-    connectedCallback() {
-      this.addEventListener("change", () => {
-        const select = this.querySelector("select");
-        if (!select) {
-          console.error(`lb-options: change with no <select>, ignoring`);
-          return;
-        }
-        const name = this.getAttribute(ATTR_ACTION);
-        if (!name) {
-          console.error(`lb-options: no ${ATTR_ACTION}, nothing to send`);
-          return;
-        }
-        const detail = { op: "action", name, value: select.value };
-        this.dispatchEvent(
-          new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail })
-        );
-      });
-    }
-  };
-  customElements.define("lb-options", LbOptions);
-
-  // widgets/lb-table.ts
-  var GROUP_ROW = "data-group";
-  var LbTable = class extends HTMLElement {
-    acceptRows(result) {
-      applyRows(this, result, this.place);
-      for (const heading of this.querySelectorAll(`tr[${GROUP_ROW}]`)) {
-        if (this.section(heading).rows.length === 0) heading.remove();
-      }
-    }
-    /**
-     * Group first, then sort within the group.
-     *
-     * Inserting a row before the first one that sorts after it keeps the
-     * section ordered, whatever else is in it — which is what lets a whole set
-     * and a single patched row take the same path.
-     */
-    place = (row, tuple, template) => {
-      const groupCell = template.getAttribute(ATTR_GROUP);
-      const sortCell = template.getAttribute(ATTR_SORT);
-      const heading = groupCell ? this.headingFor(template, tuple[groupCell] ?? "") : null;
-      const { rows, end } = this.section(heading);
-      const value = sortCell ? tuple[sortCell] ?? "" : "";
-      const after = sortCell ? rows.find((other) => other !== row && cellOf(other, sortCell) > value) : void 0;
-      template.parentElement.insertBefore(row, after ?? end);
-    };
-    /**
-     * The rows of one section, and the node it ends at.
-     *
-     * A section runs from its heading to the next heading, or to the template
-     * if there is none after it. Without grouping there is one section and it
-     * is the whole body — the heading row the page wrote is skipped along the
-     * way, because it carries no key and is therefore not a row.
-     */
-    section(heading) {
-      const template = this.querySelector("template");
-      const rows = [];
-      let node = heading ? heading.nextElementSibling : template.parentElement.firstElementChild;
-      while (node && node !== template && !node.hasAttribute(GROUP_ROW)) {
-        if (node.hasAttribute(ATTR_KEY)) rows.push(node);
-        node = node.nextElementSibling;
-      }
-      return { rows, end: node ?? template };
-    }
-    /** The section with this label, or a new one in front of the template. */
-    headingFor(template, label) {
-      const body = template.parentElement;
-      for (const heading2 of body.querySelectorAll(`tr[${GROUP_ROW}]`)) {
-        if (heading2.getAttribute(GROUP_ROW) === label) return heading2;
-      }
-      const heading = document.createElement("tr");
-      heading.setAttribute(GROUP_ROW, label);
-      const cell = document.createElement("th");
-      cell.setAttribute("scope", "rowgroup");
-      cell.colSpan = template.content.firstElementChild?.childElementCount ?? 1;
-      cell.textContent = label;
-      heading.append(cell);
-      body.insertBefore(heading, template);
-      return heading;
-    }
-  };
-  function cellOf(row, cell) {
-    const selector = `[${ATTR_CELL}="${cell}"]`;
-    const el = row.matches(selector) ? row : row.querySelector(selector);
-    return el?.textContent ?? "";
-  }
-  customElements.define("lb-table", LbTable);
-
-  // widgets/lb-picker.ts
-  var LbPicker = class extends LbOptions {
-  };
-  customElements.define("lb-picker", LbPicker);
-
-  // hub/lb-hub.ts
-  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 === void 0 ? {} : { query },
-      ...key === null || key === void 0 ? {} : { key },
-      ...cell === null ? {} : { cell }
-    };
-  }
-  function controlValue(el) {
-    const control = el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement ? el : el.querySelector("input, select, textarea");
-    return control?.value;
-  }
-  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 === void 0) {
-        console.warn(
-          `lb-hub: lb-cell '${name}' has no control to read, ignoring it`,
-          cell
-        );
-        continue;
-      }
-      values[name] = value;
-    }
-    return values;
-  }
-  function pageNameFor(path) {
-    const name = path.replace(/^\/+|\/+$/g, "");
-    return name === "" ? "counter" : name;
-  }
-  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);
-    }
-  }
-  var LbHub = class 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;
-        }
-        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));
-      });
-      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 })
-        );
-      });
-      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 })
-        );
-      });
-      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 })
-        );
-      });
-      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 })
-        );
-      });
-      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;
-      this.main.replaceChildren(template.content.cloneNode(true));
-      applyData(this.main, data);
-    }
-  };
-  customElements.define(HUB_TAG_NAME, LbHub);
-})();

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

@@ -1,15 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,19 +0,0 @@
-"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/tests/fixtures/elements/collision/elements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../tests/fixtures/elements/collision/elements.ts"],"names":[],"mappings":";;;AAAA,wBAEE"}

package/dist/tests/fixtures/elements/collision/elements.js

@@ -1,3 +0,0 @@
-export default {
-    "acme-widget": "@acme/widget",
-};

package/dist/tests/fixtures/elements/manifest/elements.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    "acme-widget": string;
-};
-export default _default;
-//# sourceMappingURL=elements.d.ts.map

package/dist/tests/fixtures/elements/manifest/elements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../tests/fixtures/elements/manifest/elements.ts"],"names":[],"mappings":";;;AAAA,wBAEE"}

package/dist/tests/fixtures/elements/manifest/elements.js

@@ -1,3 +0,0 @@
-export default {
-    "acme-widget": "@acme/widget",
-};

package/dist/tests/fixtures/elements/manifest-bad-tag/elements.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    acmewidget: string;
-};
-export default _default;
-//# sourceMappingURL=elements.d.ts.map

package/dist/tests/fixtures/elements/manifest-bad-tag/elements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../tests/fixtures/elements/manifest-bad-tag/elements.ts"],"names":[],"mappings":";;;AAAA,wBAEE"}

package/dist/tests/fixtures/elements/manifest-bad-tag/elements.js

@@ -1,3 +0,0 @@
-export default {
-    acmewidget: "@acme/widget",
-};

package/dist/tests/fixtures/elements/manifest-bad-value/elements.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    "acme-widget": number;
-};
-export default _default;
-//# sourceMappingURL=elements.d.ts.map

package/dist/tests/fixtures/elements/manifest-bad-value/elements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../tests/fixtures/elements/manifest-bad-value/elements.ts"],"names":[],"mappings":";;;AAAA,wBAEE"}

package/dist/tests/fixtures/elements/manifest-bad-value/elements.js

@@ -1,3 +0,0 @@
-export default {
-    "acme-widget": 42,
-};

package/dist/tests/golden.test.d.ts

@@ -1,19 +0,0 @@
-/**
- * Golden files — see docs/testing.md, tier 1.
- *
- * Every page in demo/pages is expanded against the real definition
- * directories and compared to a stored copy of its output. Ten cheap tests
- * that cover the whole chain at once, including the directory ordering that
- * lets an application override a built-in widget.
- *
- * The stored copy is formatted, because a golden file nobody can read is a
- * diff nobody reviews. Formatting is cosmetic and may decline (see
- * build/format.ts); if it does, the comparison is still exact — both sides
- * went through the same function.
- *
- *     npm run test:golden      rewrite the stored copies
- *
- * Rewriting is not blessing. The diff is the point.
- */
-export {};
-//# sourceMappingURL=golden.test.d.ts.map

package/dist/tests/golden.test.d.ts.map

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