@webjsdev/cli 0.10.55 → 0.10.57

package/templates/gallery/modules/stream/components/browser/stream-demo.test.js

@@ -0,0 +1,64 @@
+// Co-located browser test for the stream demo, in real Chromium with real SSR
+// and hydration. The runner UI is `tdd` (suite/test) and there is no assertion
+// library, so a tiny inline assert does the job.
+//
+// This pins the one thing the row fragment has to get right: the SEEDED rows
+// (rendered from the html`` shape) and the STREAMED rows (rendered from the
+// string shape) come off one class list, so a mutation cannot leave the list
+// styled two ways. Both shapes are exercised through the real component.
+import { html } from '@webjsdev/core';
+import { ssrFixture } from '@webjsdev/core/testing';
+import '../stream-demo.ts';
+
+const assert = (cond, msg) => { if (!cond) throw new Error(msg || 'assertion failed'); };
+const rows = (el) => [...el.querySelectorAll('#stream-list > li')];
+const button = (el, label) => [...el.querySelectorAll('button')].find((b) => b.textContent.trim() === label);
+const tick = () => new Promise((r) => setTimeout(r, 0));
+
+suite('<stream-demo>', () => {
+  test('SSRs the two seeded rows as direct list children', async () => {
+    const el = await ssrFixture(html`<stream-demo></stream-demo>`);
+    const ids = rows(el).map((li) => li.id);
+    assert(ids.join(',') === 'row-1,row-2', `seeded ids, got ${ids}`);
+    // A direct child, no wrapper element between the list and the row. That is
+    // the structural reason the row is a fragment and not a display-only element.
+    assert(rows(el).every((li) => li.parentElement.id === 'stream-list'), 'rows are direct children of the list');
+  });
+
+  test('a streamed row carries the same classes as a seeded row', async () => {
+    const el = await ssrFixture(html`<stream-demo></stream-demo>`);
+    const seeded = rows(el)[0].className;
+    button(el, 'Append').click();
+    await tick();
+    const all = rows(el);
+    assert(all.length === 3, `three rows after append, got ${all.length}`);
+    const streamed = all[2];
+    assert(streamed.id === 'row-3', `appended row is row-3, got ${streamed.id}`);
+    assert(streamed.className === seeded, `streamed row classes match seeded:\n  ${streamed.className}\n  ${seeded}`);
+  });
+
+  test('the string shape escapes its holes', async () => {
+    // The html`` shape escapes its own holes; this plain-string one has to do
+    // it by hand, and it is the shape a reader copies. A raw value here would
+    // become markup as soon as renderStream() inserted it.
+    const { streamRowHTML } = await import('../../utils/ui/row.ts');
+    const out = streamRowHTML('x" onload="boom', '<img src=x onerror=boom>');
+    assert(!out.includes('<img'), `text hole is escaped, got ${out}`);
+    assert(!out.includes('" onload'), `attribute hole is escaped, got ${out}`);
+  });
+
+  test('replace keeps the id and reset restores the seed list', async () => {
+    const el = await ssrFixture(html`<stream-demo></stream-demo>`);
+    button(el, 'Replace Row 1').click();
+    await tick();
+    assert(rows(el)[0].id === 'row-1', 'replace keeps row-1');
+    assert(rows(el)[0].textContent.includes('replaced'), 'replace swaps the content');
+    button(el, 'Prepend').click();
+    await tick();
+    button(el, 'Reset').click();
+    await tick();
+    const ids = rows(el).map((li) => li.id);
+    assert(ids.join(',') === 'row-1,row-2', `reset restores the seed list, got ${ids}`);
+    assert(rows(el)[0].textContent.trim() === 'Row 1', 'reset restores the seed content');
+  });
+});

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 },
   });