@webjsdev/cli 0.10.56 → 0.10.58

package/templates/gallery/modules/stream/components/stream-demo.ts

@@ -13,6 +13,15 @@
 // region-swap would clobber.
 import { WebComponent, html, renderStream } from '@webjsdev/core';
 import { buttonClass } from '#components/ui/button.ts';
+// The row markup lives in ONE place, a feature-local view fragment under
+// `utils/ui/` (see references/styling.md for that folder). A fragment rather
+// than a display-only <stream-row> element because BOTH of this demo's uses
+// rule an element out, which is the test to apply: the seeded list needs a
+// direct `<ul> > <li>` child (a wrapper tag would sit between them and break
+// the selector and the list semantics), and the streamed payload is an HTML
+// STRING, which a component cannot produce at all. Where a wrapper IS fine,
+// prefer the component.
+import { streamRow, streamRowHTML } from '../utils/ui/row.ts';
 
 // Build a <webjs-stream> payload string. It is a plain string (NOT an html``
 // template), so interpolating the row markup here is fine. `remove` needs no
@@ -22,9 +31,6 @@ function streamPayload(action: string, target: string, inner = '') {
   return `<webjs-stream action="${action}" target="${target}">${body}</webjs-stream>`;
 }
 
-const rowCls = 'flex items-center gap-2 px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground';
-const row = (id: string, label: string) => `<li id="${id}" class="${rowCls}">${label}</li>`;
-
 export class StreamDemo extends WebComponent {
   // A plain instance field, NOT a signal: incremented to mint unique row ids.
   // It is never read inside render(), so appending a row does not re-render the
@@ -37,16 +43,16 @@ export class StreamDemo extends WebComponent {
   // never runs. Name your handlers something else (see muscle-memory-gotchas).
   appendRow() {
     this.#n++;
-    renderStream(streamPayload('append', 'stream-list', row(`row-${this.#n}`, `Row ${this.#n} (appended)`)));
+    renderStream(streamPayload('append', 'stream-list', streamRowHTML(`row-${this.#n}`, `Row ${this.#n} (appended)`)));
   }
   prependRow() {
     this.#n++;
-    renderStream(streamPayload('prepend', 'stream-list', row(`row-${this.#n}`, `Row ${this.#n} (prepended)`)));
+    renderStream(streamPayload('prepend', 'stream-list', streamRowHTML(`row-${this.#n}`, `Row ${this.#n} (prepended)`)));
   }
   replaceFirst() {
     // `replace` swaps the target element itself. The replacement keeps id row-1,
     // so the button stays repeatable.
-    renderStream(streamPayload('replace', 'row-1', row('row-1', 'Row 1 (replaced)')));
+    renderStream(streamPayload('replace', 'row-1', streamRowHTML('row-1', 'Row 1 (replaced)')));
   }
   removeSecond() {
     // `remove` deletes the target and needs no <template>.
@@ -54,7 +60,7 @@ export class StreamDemo extends WebComponent {
   }
   reset() {
     // `update` replaces the target's children, restoring the seed list.
-    renderStream(streamPayload('update', 'stream-list', row('row-1', 'Row 1') + row('row-2', 'Row 2')));
+    renderStream(streamPayload('update', 'stream-list', streamRowHTML('row-1', 'Row 1') + streamRowHTML('row-2', 'Row 2')));
   }
 
   render() {
@@ -71,8 +77,7 @@ export class StreamDemo extends WebComponent {
         <!-- The target list. renderStream() mutates it by id; this markup renders
              once and is never re-rendered by the component. -->
         <ul id="stream-list" class="grid gap-2 m-0 p-0 list-none">
-          <li id="row-1" class="flex items-center gap-2 px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground">Row 1</li>
-          <li id="row-2" class="flex items-center gap-2 px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground">Row 2</li>
+          ${streamRow('row-1', 'Row 1')}${streamRow('row-2', 'Row 2')}
         </ul>
       </div>
     `;

package/templates/gallery/modules/stream/utils/ui/row.ts

@@ -0,0 +1,41 @@
+// A feature-local VIEW FRAGMENT: pure, returns markup, used only by the stream
+// demo. It lives in `modules/<feature>/utils/ui/` rather than `utils/` (which
+// holds helpers returning DATA) or `components/` (which holds custom elements).
+// See .agents/skills/webjs/references/styling.md.
+//
+// WHY a fragment and not a display-only <stream-row> element: an element is a
+// tag in the DOM, and neither caller can carry one. The list wants a direct
+// `<ul> > <li>` child, so a wrapper would break that selector and the list
+// semantics; and <webjs-stream> takes its payload as an HTML STRING, which no
+// component can return. That is the test, not bytes: where a wrapper element is
+// harmless, reach for the component instead.
+//
+// Hence the two shapes below, off one class list, so the streamed row and the
+// seeded rows cannot drift apart. That drift was live: the class list used to
+// exist three times in this feature, once in a `rowCls` const and twice inlined
+// in the component's own template, which did not use the const.
+import { html, escapeAttr, escapeText } from '@webjsdev/core';
+
+const ROW =
+  'flex items-center gap-2 px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground';
+
+/**
+ * The row as a template, for the component's own render(). `unknown` on the
+ * label because it forwards straight into an `html` hole, which renders a
+ * string, a number, a TemplateResult, or an array of those.
+ */
+export function streamRow(id: string, label: unknown) {
+  return html`<li id=${id} class=${ROW}>${label}</li>`;
+}
+
+/**
+ * The same row as an HTML string, for a <webjs-stream> template payload.
+ *
+ * ESCAPE EVERY HOLE HERE. The `html` tag above escapes its own holes; this
+ * plain template literal does NOT, so an unescaped value becomes markup the
+ * moment renderStream() puts it in the document. The demo only ever passes its
+ * own literals, but this is the shape people copy, so it does the safe thing.
+ */
+export function streamRowHTML(id: string, label: string): string {
+  return `<li id="${escapeAttr(id)}" class="${ROW}">${escapeText(label)}</li>`;
+}

package/templates/gallery/test/rate-limit/rate-limit.test.ts

@@ -5,6 +5,7 @@ import { dirname, resolve } from 'node:path';
 
 import { createRequestHandler } from '@webjsdev/server';
 import { testRequest } from '@webjsdev/server/testing';
+import type { Handle } from '@webjsdev/server/testing';
 
 const appDir = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..');
 
@@ -22,7 +23,7 @@ const MAX = 5;
 // X-Forwarded-For that DISAGREES, standing in for the CDN egress address the
 // real deploy puts there, so a test that passes only because the two agree
 // cannot exist.
-function ping(handle: (req: Request) => Promise<Response>, visitor: string, cdnEgress = '172.68.1.9') {
+function ping(handle: Handle, visitor: string, cdnEgress = '172.68.1.9') {
   return testRequest(handle, PING, {
     headers: { 'cf-connecting-ip': visitor, 'x-forwarded-for': cdnEgress },
   });

package/templates/partials/agents-playbook-api.md

@@ -44,15 +44,20 @@ cross-origin access use the `cors()` middleware from `@webjsdev/server`; with
 
 ### 5. Verify before you call it done
 
-Run each of these and fix what it reports, in order:
+Run `npm run ci` and fix what it reports. It is one command for every gate,
+the step list declared in `package.json` under `webjs.ci`, with a result line
+per step:
 
-- `npm run check` (correctness: no browser-import or boundary violation).
-- `npm run doctor` (project health; CI runs it too). It fails on whatever
-  `package.json` `webjs.doctor.gate` marks `error`, plus the two hard toolchain
-  checks that are fatal with no gate entry, `NODE_VERSION` and
-  `TSCONFIG_ERASABLE`.
-- `npm run typecheck` (zero type errors).
-- `npm test` (unit tests for the endpoints and modules you built).
+- `webjs check` (correctness: no browser-import or boundary violation).
+- `webjs doctor` (project health). It fails on whatever `package.json`
+  `webjs.doctor.gate` marks `error`, plus the two hard toolchain checks that
+  are fatal with no gate entry, `NODE_VERSION` and `TSCONFIG_ERASABLE`.
+- `webjs typecheck` (zero type errors).
+- A dependency audit.
+- The test layers for the endpoints and modules you built.
+
+The GitHub workflow runs the same list, so a green local run predicts CI.
+While iterating, `npm run ci -- --only Tests` runs one layer.
 
 Then boot `npm run dev` and probe each endpoint for the expected status and JSON
 shape.
@@ -66,6 +71,7 @@ npm run dev             # dev server at http://localhost:8080
 npm run start           # production server
 npm test                # unit + browser tests
 npm run typecheck
+npm run ci              # every gate, one command (the webjs.ci steps in package.json)
 npm run check           # correctness checks
 npm run doctor          # project health (severity per check: webjs.doctor.gate)
 npm run db:generate && npm run db:migrate

package/templates/partials/agents-playbook-fullstack.md

@@ -95,16 +95,21 @@ accessor). Use the shorthand for primitives
 
 ### 7. Verify before you call it done
 
-Run each of these and fix what it reports, in order:
-
-- `npm run check` (correctness: no browser-import or boundary violation).
-- `npm run doctor` (project health; CI runs it too). It fails on whatever
-  `package.json` `webjs.doctor.gate` marks `error`, plus the two hard toolchain
-  checks that are fatal with no gate entry, `NODE_VERSION` and
-  `TSCONFIG_ERASABLE`.
-- `npm run typecheck` (zero type errors).
-- `npm test` (unit and browser tests for the features you built).
-- `npm run css:build` (compile Tailwind).
+Run `npm run ci` and fix what it reports. It is one command for every gate,
+the step list declared in `package.json` under `webjs.ci`, with a result line
+per step:
+
+- `webjs check` (correctness: no browser-import or boundary violation).
+- `webjs doctor` (project health). It fails on whatever `package.json`
+  `webjs.doctor.gate` marks `error`, plus the two hard toolchain checks that
+  are fatal with no gate entry, `NODE_VERSION` and `TSCONFIG_ERASABLE`.
+- `webjs typecheck` (zero type errors).
+- A dependency audit.
+- The server, browser, and e2e test layers for the features you built.
+
+The GitHub workflow runs the same list, so a green local run predicts CI.
+While iterating, `npm run ci -- --only Tests` runs one layer. Then
+`npm run css:build` (compile Tailwind).
 
 Then boot `npm run dev`, confirm every page route returns HTTP 200, and open
 every route you changed in a real browser and play through its states: `check`
@@ -121,6 +126,7 @@ npm run start                # production server
 npm test                     # unit + browser tests
 npm run typecheck
 npm run css:build            # compile Tailwind
+npm run ci                   # every gate, one command (the webjs.ci steps in package.json)
 npm run check                # correctness checks
 npm run doctor               # project health (severity per check: webjs.doctor.gate)
 npx webjsdev ui add <name>   # copy a ui primitive into components/ui/