@loadbare/app 0.5.1 → 0.5.3

package/dist/build/assemble.js

@@ -22,7 +22,7 @@ import { addDefinitions, customElementTags, expand, } from "./expand.js";
 import { formatHtml } from "./format.js";
 import { ATTR_UNKNOWN_PAGE, PAGE_TEMPLATE_PREFIX, } from "../core/lb-constants.js";
 /**
- * The hub calls showModal() on whatever carries lb-unknown-page (hub/lb-hub.ts),
+ * The hub calls showModal() on whatever carries lb-unknown-page (hub/lb-hub.browser.ts),
  * so a chrome that puts the attribute on anything else would fail at
  * runtime, on whichever page happens to 404 first, rather than at build
  * time. The attribute is optional; only a wrong element on it is an error.

package/dist/build/elements.d.ts

@@ -10,7 +10,10 @@
  *     survives as an inert wrapper (see expand.ts).
  *
  * A tag with neither — no script anywhere and no definition — would do
- * nothing were it ever to reach the browser, so that is an error.
+ * nothing were it ever to reach the browser, so that is an error. When a
+ * module named after the tag exists but never said `.browser`, the error
+ * names that file: forgetting the word is the ordinary way to arrive here,
+ * and it is the one an author can fix in a rename.
  *
  * Both halves are looked for in the same ordered origins, and the later
  * origin wins: an application's own script overrides one from a package it

package/dist/build/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../build/elements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEzE,8FAA8F;AAC9F,MAAM,MAAM,QAAQ,GAClB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClB,8EAA8E;IAC9E,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CACjC;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,GACN,EAAE,cAAc,GAAG,aAAa,CAiChC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,EAC/B,MAAM,EAAE,MAAM,GACb,MAAM,CAcR"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../build/elements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEzE,8FAA8F;AAC9F,MAAM,MAAM,QAAQ,GAClB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClB,8EAA8E;IAC9E,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CACjC;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,GACN,EAAE,cAAc,GAAG,aAAa,CA+ChC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,EAC/B,MAAM,EAAE,MAAM,GACb,MAAM,CAcR"}

package/dist/build/elements.js

@@ -10,7 +10,10 @@
  *     survives as an inert wrapper (see expand.ts).
  *
  * A tag with neither — no script anywhere and no definition — would do
- * nothing were it ever to reach the browser, so that is an error.
+ * nothing were it ever to reach the browser, so that is an error. When a
+ * module named after the tag exists but never said `.browser`, the error
+ * names that file: forgetting the word is the ordinary way to arrive here,
+ * and it is the one an author can fix in a rename.
  *
  * Both halves are looked for in the same ordered origins, and the later
  * origin wins: an application's own script overrides one from a package it
@@ -44,6 +47,19 @@ export function resolveElements({ used, scans, }) {
         // content — otherwise nothing, ever, would upgrade or fill it, and the
         // tag would do nothing were it to reach the browser.
         if (!hasDefinition) {
+            // The likeliest reason, checked first: a module named after the tag is
+            // sitting right there without the word that would ship it. Say which
+            // file, because "there is no script" reads as a lie to someone looking
+            // straight at one.
+            for (const scan of scans) {
+                const near = scan.unmarked.get(tag);
+                if (near === undefined)
+                    continue;
+                throw new Error(`build: <${tag}> has no script, but '${near}' is named after it. ` +
+                    `A script reaches the browser only when its name says so — ` +
+                    `rename it '${path.basename(near, path.extname(near))}.browser` +
+                    `${path.extname(near)}' if that is what it is.`);
+            }
             throw new Error(`build: <${tag}> has neither a script nor a definition, so it would ` +
                 `do nothing (checked ${scans.map((s) => `'${s.name}'`).join(", ")})`);
         }

package/dist/build/origins.d.ts

@@ -2,11 +2,20 @@
  * Where a build's files come from — see docs/reference/builder.md.
  *
  * Three kinds of file reach the assembled application: a `.html` definition
- * that expands a tag, a `.ts` script that registers its class, and a `.css`
- * stylesheet. All three arrive from the same places, so all three are found
- * the same way: one ordered list of origins, scanned once each, read by
+ * that expands a tag, a `.browser.ts` script that registers its class, and a
+ * `.css` stylesheet. All three arrive from the same places, so all three are
+ * found the same way: one ordered list of origins, scanned once each, read by
  * whoever needs them.
  *
+ * A script says `.browser` because shipping is the thing worth being sure
+ * about. Under a plain `lb-thing.ts` rule a filename alone decides what
+ * crosses to the browser, so a module named after a tag someone else writes
+ * later is bundled without anyone having chosen that — and the author who
+ * would most like to know is the one who never considered it. Requiring the
+ * word puts the decision where a reader can see it, and leaves every
+ * unmarked module in a source tree exactly what it looks like: not browser
+ * code. It costs a widget author one word, once.
+ *
  * The order is the cascade, and it is the same for every file kind:
  *
  *   1. this package's own `hub/`
@@ -50,19 +59,30 @@ export interface OriginScan {
     specifier?: (tag: string) => string;
     /** Tag to its `.html` definition. */
     definitions: Map<string, string>;
-    /** Tag to its `.ts` script, extension stripped. */
+    /** Tag to its `.browser.ts` script, the trailing `.ts` stripped. */
     scripts: Map<string, string>;
+    /**
+     * Tag to the unmarked module that would have claimed it — `lb-thing.ts`
+     * where `lb-thing.browser.ts` was meant. Nothing is built from this. It is
+     * here so build/elements.ts can name the file when the tag turns out to
+     * have nothing to register it.
+     */
+    unmarked: Map<string, string>;
     /** Every `.css` file here, sorted by filename with the full path breaking a tie. */
     css: string[];
 }
 /**
  * One origin's contribution, classified by filename alone.
  *
- * A `.html` or `.ts` file is a widget's only when its basename is a tag —
- * which is what excludes `chrome.html`, `about.page.html`, `about.hooks.ts`
- * and `imports.ts` here without naming any of them. Those are the
- * application's own files, and build/locations.ts picks them out of `src`
- * separately.
+ * A `.html` file is a widget's only when its basename is a tag, and a module
+ * only when it is `<tag>.browser.ts` — which is what excludes `chrome.html`,
+ * `about.page.html`, `about.hooks.ts` and `imports.ts` here without naming
+ * any of them. Those are the application's own files, and
+ * build/locations.ts picks them out of `src` separately.
+ *
+ * A module named after a tag without the `.browser` goes in `unmarked`, so
+ * an author who forgot the word gets told which file to rename rather than
+ * being told their tag does not exist.
  */
 export declare function scanOrigin(origin: Origin): Promise<OriginScan>;
 /** The shape of an `imports.ts` module's default export: the packages an application pulls widgets from. */

package/dist/build/origins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"origins.d.ts","sourceRoot":"","sources":["../../build/origins.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,gHAAgH;AAChH,eAAO,MAAM,kBAAkB,QAAkC,CAAC;AAMlE,MAAM,WAAW,MAAM;IACrB,8EAA8E;IAC9E,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACrC;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,qCAAqC;IACrC,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,mDAAmD;IACnD,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,oFAAoF;IACpF,GAAG,EAAE,MAAM,EAAE,CAAC;CACf;AAsBD;;;;;;;;GAQG;AACH,wBAAsB,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CA4DpE;AAED,4GAA4G;AAC5G,MAAM,MAAM,eAAe,GAAG,MAAM,EAAE,CAAC;AAEvC;;;;;GAKG;AACH,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,eAAe,CAAC,CA4B1B;AAED;;;;;;;GAOG;AACH,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,MAAM,CAAC,CAkBjB;AAwED,MAAM,WAAW,WAAW;IAC1B,+FAA+F;IAC/F,aAAa,EAAE,MAAM,CAAC;IACtB,kGAAkG;IAClG,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAsB,YAAY,CAChC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,eAAe,EACzB,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,MAAM,EAAE,CAAC,CAkBnB;AAED;;;GAGG;AACH,wBAAsB,OAAO,CAC3B,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,MAAM,EACX,WAAW,CAAC,EAAE,MAAM,GACnB,OAAO,CAAC,UAAU,EAAE,CAAC,CAIvB;AAED,iEAAiE;AACjE,wBAAgB,OAAO,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,MAAM,EAAE,CAErD"}
+{"version":3,"file":"origins.d.ts","sourceRoot":"","sources":["../../build/origins.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAOH,gHAAgH;AAChH,eAAO,MAAM,kBAAkB,QAAkC,CAAC;AASlE,MAAM,WAAW,MAAM;IACrB,8EAA8E;IAC9E,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACrC;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,qCAAqC;IACrC,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,oEAAoE;IACpE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B;;;;;OAKG;IACH,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,oFAAoF;IACpF,GAAG,EAAE,MAAM,EAAE,CAAC;CACf;AAsBD;;;;;;;;;;;;GAYG;AACH,wBAAsB,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CA4EpE;AAED,4GAA4G;AAC5G,MAAM,MAAM,eAAe,GAAG,MAAM,EAAE,CAAC;AAEvC;;;;;GAKG;AACH,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,eAAe,CAAC,CA4B1B;AAED;;;;;;;GAOG;AACH,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,MAAM,CAAC,CAkBjB;AAwED,MAAM,WAAW,WAAW;IAC1B,+FAA+F;IAC/F,aAAa,EAAE,MAAM,CAAC;IACtB,kGAAkG;IAClG,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAsB,YAAY,CAChC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,eAAe,EACzB,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,MAAM,EAAE,CAAC,CAkBnB;AAED;;;GAGG;AACH,wBAAsB,OAAO,CAC3B,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,MAAM,EACX,WAAW,CAAC,EAAE,MAAM,GACnB,OAAO,CAAC,UAAU,EAAE,CAAC,CAIvB;AAED,iEAAiE;AACjE,wBAAgB,OAAO,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,MAAM,EAAE,CAErD"}

package/dist/build/origins.js

@@ -2,11 +2,20 @@
  * Where a build's files come from — see docs/reference/builder.md.
  *
  * Three kinds of file reach the assembled application: a `.html` definition
- * that expands a tag, a `.ts` script that registers its class, and a `.css`
- * stylesheet. All three arrive from the same places, so all three are found
- * the same way: one ordered list of origins, scanned once each, read by
+ * that expands a tag, a `.browser.ts` script that registers its class, and a
+ * `.css` stylesheet. All three arrive from the same places, so all three are
+ * found the same way: one ordered list of origins, scanned once each, read by
  * whoever needs them.
  *
+ * A script says `.browser` because shipping is the thing worth being sure
+ * about. Under a plain `lb-thing.ts` rule a filename alone decides what
+ * crosses to the browser, so a module named after a tag someone else writes
+ * later is bundled without anyone having chosen that — and the author who
+ * would most like to know is the one who never considered it. Requiring the
+ * word puts the decision where a reader can see it, and leaves every
+ * unmarked module in a source tree exactly what it looks like: not browser
+ * code. It costs a widget author one word, once.
+ *
  * The order is the cascade, and it is the same for every file kind:
  *
  *   1. this package's own `hub/`
@@ -36,7 +45,10 @@ import { pathToFileURL } from "node:url";
 /** Lowercase, hyphenated — the one shape every custom element tag has, and the one native elements never do. */
 export const CUSTOM_ELEMENT_TAG = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
 const HTML_SUFFIX = ".html";
-const SCRIPT_SUFFIXES = [".ts", ".js"];
+/** A widget script says so in its name: `lb-thing.browser.ts` and nothing else. */
+const BROWSER_SUFFIXES = [".browser.ts", ".browser.js"];
+/** What an unmarked module ends in — enough to recognise a near miss and say so. */
+const MODULE_SUFFIXES = [".ts", ".js"];
 const CSS_SUFFIX = ".css";
 /**
  * Every file under `dir`, its own nested `node_modules` excluded — those
@@ -62,15 +74,20 @@ async function filesUnder(dir) {
 /**
  * One origin's contribution, classified by filename alone.
  *
- * A `.html` or `.ts` file is a widget's only when its basename is a tag —
- * which is what excludes `chrome.html`, `about.page.html`, `about.hooks.ts`
- * and `imports.ts` here without naming any of them. Those are the
- * application's own files, and build/locations.ts picks them out of `src`
- * separately.
+ * A `.html` file is a widget's only when its basename is a tag, and a module
+ * only when it is `<tag>.browser.ts` — which is what excludes `chrome.html`,
+ * `about.page.html`, `about.hooks.ts` and `imports.ts` here without naming
+ * any of them. Those are the application's own files, and
+ * build/locations.ts picks them out of `src` separately.
+ *
+ * A module named after a tag without the `.browser` goes in `unmarked`, so
+ * an author who forgot the word gets told which file to rename rather than
+ * being told their tag does not exist.
  */
 export async function scanOrigin(origin) {
     const definitions = new Map();
     const scripts = new Map();
+    const unmarked = new Map();
     const css = [];
     const claim = (into, what, tag, file) => {
         const already = into.get(tag);
@@ -93,16 +110,30 @@ export async function scanOrigin(origin) {
                 }
             }
             else {
-                const suffix = SCRIPT_SUFFIXES.find((s) => name.endsWith(s));
-                if (!suffix)
+                const browser = BROWSER_SUFFIXES.find((s) => name.endsWith(s));
+                if (browser) {
+                    const tag = name.slice(0, -browser.length).toLowerCase();
+                    // Only the trailing ".ts" comes off, never the ".browser": what is
+                    // left becomes an import specifier, and esbuild resolves
+                    // "lb-thing.browser" to "lb-thing.browser.ts" the same way as to
+                    // ".js".
+                    if (CUSTOM_ELEMENT_TAG.test(tag)) {
+                        const ext = MODULE_SUFFIXES.find((e) => name.endsWith(e));
+                        claim(scripts, "script", tag, file.slice(0, -ext.length));
+                    }
                     continue;
-                const tag = name.slice(0, -suffix.length).toLowerCase();
-                // Without the extension: this becomes an import specifier, and
-                // esbuild resolves ".ts" from the bare path the same way as ".js".
-                // A `.d.ts` never reaches here — stripping ".ts" leaves a dot, which
-                // is not a tag.
-                if (CUSTOM_ELEMENT_TAG.test(tag)) {
-                    claim(scripts, "script", tag, file.slice(0, -suffix.length));
+                }
+                const ext = MODULE_SUFFIXES.find((e) => name.endsWith(e));
+                if (!ext)
+                    continue;
+                // A module whose name is a tag but which never said it was browser
+                // code. It contributes nothing. Remembering it costs a map entry and
+                // buys an error message that names the file instead of describing an
+                // absence. A `.d.ts` never reaches here — stripping ".ts" leaves a
+                // dot, which is not a tag.
+                const tag = name.slice(0, -ext.length).toLowerCase();
+                if (CUSTOM_ELEMENT_TAG.test(tag) && !unmarked.has(tag)) {
+                    unmarked.set(tag, file);
                 }
             }
         }
@@ -115,6 +146,7 @@ export async function scanOrigin(origin) {
         ...(origin.specifier ? { specifier: origin.specifier } : {}),
         definitions,
         scripts,
+        unmarked,
         css,
     };
 }

package/dist/hub/{lb-hub.d.ts → lb-hub.browser.d.ts}

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

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

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

package/dist/server/lb-express.js

@@ -15,7 +15,7 @@
  * lets the operation set stay closed.
  */
 import express from "express";
-import { LB_DATA_ENDPOINT, LB_REQUEST_ENDPOINT } from "../core/lb-constants";
+import { LB_DATA_ENDPOINT, LB_REQUEST_ENDPOINT } from "../core/lb-constants.js";
 export function hubRoutes(hub, contextFor) {
     const router = express.Router();
     // Mounted here rather than on the app so that Hub's need for a parsed

package/dist/tests/elements.test.js

@@ -73,7 +73,7 @@ describe("resolveElements", () => {
             scans: await scansFor(`${FIXTURES}/local`),
         });
         assert.equal(resolved.get("app-box")?.kind, "file");
-        assert.match(resolved.get("app-box").value, /local\/widgets\/app-box$/);
+        assert.match(resolved.get("app-box").value, /local\/widgets\/app-box\.browser$/);
     });
     it("resolves a tag found by scanning a declared package", async () => {
         const { resolved } = resolveElements({
@@ -81,7 +81,7 @@ describe("resolveElements", () => {
             scans: await scansFor(`${FIXTURES}/manifest`, `${FIXTURES}/pkg`),
         });
         assert.equal(resolved.get("acme-widget")?.kind, "file");
-        assert.match(resolved.get("acme-widget").value, /pkg\/acme-widget$/);
+        assert.match(resolved.get("acme-widget").value, /pkg\/acme-widget\.browser$/);
     });
     it("needs no script for a tag with only an .html definition", async () => {
         const { resolved } = resolveElements({
@@ -90,6 +90,17 @@ describe("resolveElements", () => {
         });
         assert.equal(resolved.size, 0);
     });
+    it("names the unmarked file when a tag's script forgot to say .browser", async () => {
+        await assert.rejects(async () => resolveElements({
+            used: new Set(["app-box"]),
+            scans: await scansFor(`${FIXTURES}/unmarked`),
+        }), (err) => {
+            assert.match(err.message, /<app-box> has no script/);
+            assert.match(err.message, /widgets[/\\]app-box\.ts' is named after it/);
+            assert.match(err.message, /rename it 'app-box\.browser\.ts'/);
+            return true;
+        });
+    });
     it("throws when a used tag registers nothing", async () => {
         await assert.rejects(async () => resolveElements({
             used: new Set(["nowhere-widget"]),
@@ -102,6 +113,6 @@ describe("resolveElements", () => {
             scans: await scansFor(`${FIXTURES}/collision`, `${FIXTURES}/pkg`),
         });
         assert.equal(resolved.get("acme-widget")?.kind, "file");
-        assert.match(resolved.get("acme-widget").value, /collision\/widgets\/acme-widget$/);
+        assert.match(resolved.get("acme-widget").value, /collision\/widgets\/acme-widget\.browser$/);
     });
 });

package/dist/tests/fixtures/elements/collision/widgets/acme-widget.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=acme-widget.browser.d.ts.map

package/dist/tests/fixtures/elements/collision/widgets/acme-widget.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"acme-widget.browser.d.ts","sourceRoot":"","sources":["../../../../../../tests/fixtures/elements/collision/widgets/acme-widget.browser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}

package/dist/tests/fixtures/elements/local/widgets/app-box.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=app-box.browser.d.ts.map

package/dist/tests/fixtures/elements/local/widgets/app-box.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-box.browser.d.ts","sourceRoot":"","sources":["../../../../../../tests/fixtures/elements/local/widgets/app-box.browser.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC"}

package/dist/tests/fixtures/elements/pkg/acme-widget.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=acme-widget.browser.d.ts.map

package/dist/tests/fixtures/elements/pkg/acme-widget.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"acme-widget.browser.d.ts","sourceRoot":"","sources":["../../../../../tests/fixtures/elements/pkg/acme-widget.browser.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC"}

package/dist/tests/fixtures/elements/unmarked/widgets/app-box.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A widget script that forgot to say `.browser` — the fixture behind the
+ * error that names the file instead of reporting an absence.
+ */
+export {};
+//# sourceMappingURL=app-box.d.ts.map

package/dist/tests/fixtures/elements/unmarked/widgets/app-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-box.d.ts","sourceRoot":"","sources":["../../../../../../tests/fixtures/elements/unmarked/widgets/app-box.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,CAAC"}

package/dist/tests/fixtures/elements/unmarked/widgets/app-box.js

@@ -0,0 +1 @@
+export {};

package/dist/tests/origins.test.js

@@ -28,10 +28,10 @@ const NO_BUILTIN = {
 };
 const base = (name) => path.basename(name);
 describe("scanOrigin", () => {
-    it("classifies by filename: a tag-shaped .html, .ts, and any .css", async () => {
+    it("classifies by filename: a tag-shaped .html, .browser.ts, and any .css", async () => {
         const dir = await tree({
             "app-box.html": "<div lb-slot></div>",
-            "app-box.ts": "export {};",
+            "app-box.browser.ts": "export {};",
             "theme.css": "* {}",
         });
         try {
@@ -44,6 +44,49 @@ describe("scanOrigin", () => {
             await rm(dir, { recursive: true, force: true });
         }
     });
+    it("leaves a module alone when its name does not say .browser", async () => {
+        const dir = await tree({
+            "app-box.html": "<div lb-slot></div>",
+            "secrets.ts": "export const KEY = 'shh';",
+            "app-box.ts": "export const KEY = 'shh';",
+        });
+        try {
+            const scan = await scanOrigin({ name: "src", dirs: [dir] });
+            assert.equal(scan.scripts.size, 0);
+        }
+        finally {
+            await rm(dir, { recursive: true, force: true });
+        }
+    });
+    it("remembers an unmarked module named after a tag, so the error can name it", async () => {
+        const dir = await tree({
+            "app-box.ts": "export {};",
+            "helpers.ts": "export {};",
+            "app-box.d.ts": "export {};",
+        });
+        try {
+            const scan = await scanOrigin({ name: "src", dirs: [dir] });
+            assert.deepEqual([...scan.unmarked.keys()], ["app-box"]);
+            assert.match(scan.unmarked.get("app-box"), /app-box\.ts$/);
+        }
+        finally {
+            await rm(dir, { recursive: true, force: true });
+        }
+    });
+    it("takes the marked file when both names are present", async () => {
+        const dir = await tree({
+            "app-box.ts": "export {};",
+            "app-box.browser.ts": "export {};",
+        });
+        try {
+            const scan = await scanOrigin({ name: "src", dirs: [dir] });
+            assert.match(scan.scripts.get("app-box"), /app-box\.browser$/);
+            assert.match(scan.unmarked.get("app-box"), /app-box\.ts$/);
+        }
+        finally {
+            await rm(dir, { recursive: true, force: true });
+        }
+    });
     it("ignores files whose basename is not a tag", async () => {
         const dir = await tree({
             "chrome.html": "<lb-hub><main></main></lb-hub>",
@@ -62,7 +105,7 @@ describe("scanOrigin", () => {
     });
     it("finds files at any depth, and sorts css by filename not directory", async () => {
         const dir = await tree({
-            "deep/nested/app-box.ts": "export {};",
+            "deep/nested/app-box.browser.ts": "export {};",
             "widgets/app-box.css": ".b {}",
             "00-reset.css": "* {}",
         });
@@ -89,8 +132,8 @@ describe("scanOrigin", () => {
     });
     it("throws when one origin has two scripts for the same tag", async () => {
         const dir = await tree({
-            "a/app-box.ts": "export {};",
-            "b/app-box.ts": "export {};",
+            "a/app-box.browser.ts": "export {};",
+            "b/app-box.browser.ts": "export {};",
         });
         try {
             await assert.rejects(() => scanOrigin({ name: "src", dirs: [dir] }), /'src' has two script files for <app-box>/);
@@ -102,15 +145,15 @@ describe("scanOrigin", () => {
     it("takes a compiled .js as a script, the way a published package ships one", async () => {
         const dir = await tree({
             "acme-widget.html": "<div lb-slot></div>",
-            "acme-widget.js": "export {};",
-            "acme-widget.d.ts": "export {};",
+            "acme-widget.browser.js": "export {};",
+            "acme-widget.browser.d.ts": "export {};",
         });
         try {
             const scan = await scanOrigin({ name: "@acme/widgets", dirs: [dir] });
             assert.deepEqual([...scan.definitions.keys()], ["acme-widget"]);
             // The .d.ts is not a second script: stripping ".ts" leaves a dot.
             assert.deepEqual([...scan.scripts.keys()], ["acme-widget"]);
-            assert.match(scan.scripts.get("acme-widget"), /acme-widget$/);
+            assert.match(scan.scripts.get("acme-widget"), /acme-widget\.browser$/);
         }
         finally {
             await rm(dir, { recursive: true, force: true });
@@ -168,9 +211,9 @@ describe("a package's declared widget directory", () => {
             "node_modules/acme/package.json": JSON.stringify({
                 loadbare: { widgets: "./dist" },
             }),
-            "node_modules/acme/dist/acme-widget.js": "export {};",
+            "node_modules/acme/dist/acme-widget.browser.js": "export {};",
             "node_modules/acme/dist/acme-widget.html": "<b lb-slot></b>",
-            "node_modules/acme/src/acme-widget.ts": "export {};",
+            "node_modules/acme/src/acme-widget.browser.ts": "export {};",
             "node_modules/acme/src/acme-widget.html": "<b lb-slot></b>",
             "node_modules/acme/README.md": "# acme",
             "imports.ts": `export default ["acme"];`,
@@ -179,7 +222,7 @@ describe("a package's declared widget directory", () => {
             const scans = await scanAll(NO_BUILTIN, src, path.join(src, "imports.ts"));
             const acme = scans.find((scan) => scan.name === "acme");
             assert.deepEqual([...acme.scripts.keys()], ["acme-widget"]);
-            assert.match(acme.scripts.get("acme-widget"), /dist[/\\]acme-widget$/);
+            assert.match(acme.scripts.get("acme-widget"), /dist[/\\]acme-widget\.browser$/);
             assert.match(acme.definitions.get("acme-widget"), /dist[/\\]acme-widget\.html$/);
         }
         finally {
@@ -189,7 +232,7 @@ describe("a package's declared widget directory", () => {
     it("scans the whole package when it declares nothing", async () => {
         const src = await tree({
             "node_modules/acme/package.json": "{}",
-            "node_modules/acme/widgets/acme-widget.ts": "export {};",
+            "node_modules/acme/widgets/acme-widget.browser.ts": "export {};",
         });
         try {
             const origins = await buildOrigins(NO_BUILTIN, ["acme"], src);
@@ -205,7 +248,7 @@ describe("a package's declared widget directory", () => {
             "node_modules/acme/package.json": JSON.stringify({
                 loadbare: { widgets: "./dist" },
             }),
-            "node_modules/acme/widgets/acme-widget.ts": "export {};",
+            "node_modules/acme/widgets/acme-widget.browser.ts": "export {};",
         });
         try {
             await assert.rejects(() => buildOrigins(NO_BUILTIN, ["acme"], src), /'acme' declares widgets at '\.\/dist', which is not in the installed package/);

package/docs/reference/builder.md

@@ -45,11 +45,17 @@ The builder classifies by name, not location.
 | `imports.ts`               | The packages this app takes widgets from          |
 | `*.css`                    | A stylesheet — see [CSS](./css.md)                |
 | Any other `.html`          | A widget definition, named for the tag it defines |
-| Any other tag-shaped `.ts` | A widget script, named for the tag it registers   |
+| `<tag>.browser.ts`         | A widget script, named for the tag it registers   |
 
 Give the application exactly one `chrome.html` and at most one `imports.ts`.
 Give every `.hooks.ts` and `.queries.ts` a `.page.html` of the same base name.
 
+Name a widget script `<tag>.browser.ts`, not `<tag>.ts`. Only a file whose
+name carries `.browser` is bundled for the browser; every other module under
+`--src` stays on the server side of the build, whatever it is called. Write
+`<tag>.ts` and the tag goes unregistered — the build says so, and names the
+file to rename.
+
 ## Widgets from packages
 
 List a package in `imports.ts` to take widgets from it:

package/docs/reference/custom-elements.md

@@ -4,14 +4,20 @@ A widget is a custom element, written as a set of files sharing one tag
 name. It serves two purposes, and an application uses it for either or for
 both at once.
 
-| File             | Holds                            |
-|------------------|----------------------------------|
-| `<tag-name>.html` | The markup the tag expands into |
-| `<tag-name>.ts`   | The class the tag registers     |
+| File                     | Holds                            |
+|--------------------------|----------------------------------|
+| `<tag-name>.html`        | The markup the tag expands into  |
+| `<tag-name>.browser.ts`  | The class the tag registers      |
 
 Write one of the two, or both, but write at least one. A tag with neither is
 a build error.
 
+The script says `.browser` because that is the file that crosses to the
+browser. Name it `<tag-name>.ts` and the builder leaves it alone: an
+unmarked module is server-side code as far as the build is concerned, which
+is what keeps a `stripe.ts` or a `config.ts` out of the bundle no matter what
+tag someone writes later.
+
 Custom elements are the only mechanism Loadbare offers for either purpose.
 An application decomposes its HTML by defining a tag, and delivers behavior
 to the browser by registering one; the builder recognizes no other way to do
@@ -197,7 +203,7 @@ an optional parameter out.
 
 ## Code
 
-A `.ts` file named for a tag registers that tag's class. A widget is an
+A `<tag>.browser.ts` file registers that tag's class. A widget is an
 ordinary custom element — Loadbare imposes no base class — and it takes part
 in data binding through three contracts: it receives a value, it sends a
 request, and it accepts a set of rows.
@@ -224,7 +230,7 @@ text — see [Data Binding](./data-binding.md#where-a-bound-value-lands).
 Observe it, and render the value however the widget renders things:
 
 ```ts
-// src/visit-count.ts
+// src/visit-count.browser.ts
 import { ATTR_VALUE } from "@loadbare/app/constants";
 
 class VisitCount extends HTMLElement {
@@ -309,8 +315,8 @@ Supply a `place` function to decide where a row goes — `(row, tuple,
 template) => void`, called with a fresh or reordered row. The default
 inserts immediately before the template, so rows accumulate in arrival
 order. A widget that groups or sorts supplies its own `place` instead of
-reimplementing matching and cloning around it; `lb-options.ts` and
-`lb-table.ts` in [`@loadbare/widgets`](./widgets.md) are two different
+reimplementing matching and cloning around it; `lb-options.browser.ts` and
+`lb-table.browser.ts` in [`@loadbare/widgets`](./widgets.md) are two different
 `place` functions over the same `applyRows`.
 
 Style an empty list against `data-rows` rather than carrying an empty-state

package/docs/testing.md

@@ -20,7 +20,7 @@ emulation has given up the only failure mode it was looking for.
 | 1    | Expansion and the build — `build/`               | node        |
 | 2    | The engine — `server/`, and the Express adapter  | node        |
 | 3    | Landing — `hub/lb-apply.ts`, `hub/lb-rows.ts`    | jsdom       |
-| 4    | The hub — `hub/lb-hub.ts`                        | jsdom       |
+| 4    | The hub — `hub/lb-hub.browser.ts`                        | jsdom       |
 
 All four tiers run under `npm test` today and need no dependency that is not
 already installed. A fifth environment — a real browser — is discussed at the

package/docs/tutorials/060-custom-element-code.md

@@ -29,13 +29,20 @@ using `lb-cell="count"`.
 ## Writing the class
 
 We put the Javascript class implementation into a file named 
-after the tag: `visit-count.ts`.  The loadbare builder will recognize
-the file as being associated with a custom element that was used 
-in the app, and add its class to `client.js`.
+after the tag, plus `.browser`: `visit-count.browser.ts`.  The loadbare
+builder will recognize the file as being associated with a custom element
+that was used in the app, and add its class to `client.js`.
+
+The `.browser` is required, and it is the only thing that puts a file in
+`client.js`.  Name the file `visit-count.ts` and the builder will leave it
+alone — it treats an unmarked module as server-side code, and reports the tag
+as having no script.  That is deliberate: `src/database.ts` from the earlier
+chapters sits in the same tree, and nothing an author writes in a page should
+be able to pull it into the browser.
 
 
 ```ts
-// src/visit-count.ts
+// src/visit-count.browser.ts
 import { ATTR_VALUE } from "@loadbare/app/constants";
 
 class VisitCount extends HTMLElement {

package/docs/tutorials/065-conditional-rendering.md

@@ -47,7 +47,7 @@ arithmetic of its own.
 ## Writing the class
 
 ```ts
-// src/lb-wizard.ts
+// src/lb-wizard.browser.ts
 import { ATTR_VALUE } from "@loadbare/app/constants";
 
 class LbWizard extends HTMLElement {

package/docs/tutorials/080-widget-requests.md

@@ -21,7 +21,7 @@ how Loadbare internals work.
 ```
 
 ```ts
-// src/note-input.ts
+// src/note-input.browser.ts
 import {
   ATTR_CELL,
   ATTR_KEY,
@@ -59,7 +59,7 @@ class NoteInput extends HTMLElement {
 customElements.define("note-input", NoteInput);
 ```
 
-A widget with both a `.html` and a `.ts` file shares one tag name; the
+A widget with both a `.html` and a `.browser.ts` file shares one tag name; the
 build finds each half independently. On change, it reads its own
 `lb-query`/`lb-key`/`lb-cell` coordinates and dispatches a `cell-change`
 request itself, the way `lb-update` does for a whole form.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@loadbare/app",
   "description": "High performance web app framework for server-bound applications",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "type": "module",
   "files": [
     "dist",
@@ -15,7 +15,7 @@
     "loadbare-app-build": "dist/build/cli.js"
   },
   "exports": {
-    ".": "./dist/hub/lb-hub.js",
+    ".": "./dist/hub/lb-hub.browser.js",
     "./constants": "./dist/core/lb-constants.js",
     "./types": "./dist/core/lb-types.js",
     "./rows": "./dist/hub/lb-rows.js",

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

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

package/dist/tests/fixtures/elements/collision/widgets/acme-widget.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=acme-widget.d.ts.map

package/dist/tests/fixtures/elements/collision/widgets/acme-widget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"acme-widget.d.ts","sourceRoot":"","sources":["../../../../../../tests/fixtures/elements/collision/widgets/acme-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}

package/dist/tests/fixtures/elements/local/widgets/app-box.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=app-box.d.ts.map

package/dist/tests/fixtures/elements/local/widgets/app-box.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-box.d.ts","sourceRoot":"","sources":["../../../../../../tests/fixtures/elements/local/widgets/app-box.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC"}

package/dist/tests/fixtures/elements/pkg/acme-widget.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=acme-widget.d.ts.map

package/dist/tests/fixtures/elements/pkg/acme-widget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"acme-widget.d.ts","sourceRoot":"","sources":["../../../../../tests/fixtures/elements/pkg/acme-widget.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC"}