@webjsdev/cli 0.10.35 → 0.10.37

package/templates/gallery/modules/todo/components/todo-app.ts

@@ -82,7 +82,7 @@ export class TodoApp extends WebComponent({
             </span>
             <div class="grid gap-0.5">
               <h2 class="m-0 text-[1.4rem] font-bold tracking-[-0.02em] leading-none text-foreground">Tasks</h2>
-              <p class="m-0 text-[13px] text-muted-foreground/70 leading-none">${done} of ${list.length} done</p>
+              <p class="m-0 text-[13px] text-muted-foreground leading-none">${done} of ${list.length} done</p>
             </div>
             <span class="ml-auto text-[13px] font-semibold tabular-nums text-muted-foreground">${pct}%</span>
           </div>
@@ -97,7 +97,7 @@ export class TodoApp extends WebComponent({
           class="flex items-center gap-2 p-2 pl-4 rounded-2xl bg-card border border-border shadow-[0_1px_0_0_color-mix(in_oklch,var(--foreground)_5%,transparent)]">
           <input type="hidden" name="intent" value="create" />
           <input name="title" required maxlength="280" autocomplete="off" placeholder="What needs doing?"
-            class="flex-1 min-w-0 bg-transparent border-0 outline-none text-foreground text-[15px] placeholder:text-muted-foreground/70 py-1.5" />
+            class="flex-1 min-w-0 bg-transparent border-0 outline-none text-foreground text-[15px] placeholder:text-muted-foreground py-1.5" />
           <button type="submit"
             class="shrink-0 px-4 py-2 rounded-xl bg-primary text-primary-foreground font-semibold text-sm border-0 cursor-pointer transition-all hover:bg-primary/90 active:scale-[0.97]">Add</button>
         </form>
@@ -120,17 +120,17 @@ export class TodoApp extends WebComponent({
                 </button>
                 <!-- The title is a <label for> the toggle: clicking the text toggles
                      the task (works on JS and no-JS paths, and screen readers). -->
-                <label for="t-${todo.id}" class="flex-1 min-w-0 text-[15px] leading-snug break-words cursor-pointer select-none ${todo.completed ? 'line-through text-muted-foreground/70' : 'text-foreground'}">${todo.title}</label>
+                <label for="t-${todo.id}" class="flex-1 min-w-0 text-[15px] leading-snug break-words cursor-pointer select-none ${todo.completed ? 'line-through text-muted-foreground' : 'text-foreground'}">${todo.title}</label>
                 <!-- Delete: a proper icon button, revealed on row hover / focus. -->
                 <button type="submit" name="intent" value="delete" aria-label="Delete task"
                   @click=${(e: Event) => this.removeTodo(e, todo)}
-                  class="shrink-0 grid place-items-center w-7 h-7 rounded-lg border-0 bg-transparent text-muted-foreground/70 cursor-pointer opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all hover:text-destructive hover:bg-[color-mix(in_oklch,var(--color-destructive)_12%,transparent)]">
+                  class="shrink-0 grid place-items-center w-7 h-7 rounded-lg border-0 bg-transparent text-muted-foreground cursor-pointer opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all hover:text-destructive hover:bg-[color-mix(in_oklch,var(--color-destructive)_12%,transparent)]">
                   <svg viewBox="0 0 24 24" class="w-4 h-4 stroke-current fill-none" style="stroke-width:2;stroke-linecap:round;stroke-linejoin:round"><path d="M18 6 6 18M6 6l12 12"/></svg>
                 </button>
               </form>
             </li>
           `) : html`
-            <li class="text-center text-muted-foreground/70 text-sm py-14 border border-dashed border-border rounded-2xl">No tasks yet. Add your first one above.</li>
+            <li class="text-center text-muted-foreground text-sm py-14 border border-dashed border-border rounded-2xl">No tasks yet. Add your first one above.</li>
           `}
         </ul>
       </section>

package/templates/gallery/modules/websockets/components/ws-echo.ts

@@ -4,7 +4,7 @@
 // it never runs during SSR) and closed in disconnectedCallback. At SSR the
 // component renders its disconnected state, so with JS off the page still reads
 // (a live socket has no no-JS equivalent, which is the honest fallback here).
-import { WebComponent, signal, html, connectWS } from '@webjsdev/core';
+import { WebComponent, signal, html, connectWS, renderStream } from '@webjsdev/core';
 
 export class WsEcho extends WebComponent {
   private connected = signal(false);
@@ -36,6 +36,19 @@ export class WsEcho extends WebComponent {
     input.value = '';
   }
 
+  #streamN = 0;
+  // renderStream() applies a <webjs-stream> payload with native DOM methods:
+  // the SAME element-level applier a connectWS onMessage handler (or a
+  // broadcast() push) uses for surgical live updates, so a chat / presence /
+  // toast reuses it instead of hand-written DOM code. Here a button drives it
+  // locally; over a channel the server would send this HTML string.
+  private applyStreamUpdate() {
+    this.#streamN += 1;
+    renderStream(
+      `<webjs-stream action="append" target="ws-stream-log"><template><li class="px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground">streamed row #${this.#streamN}</li></template></webjs-stream>`,
+    );
+  }
+
   render() {
     const on = this.connected.get();
     return html`
@@ -55,6 +68,11 @@ export class WsEcho extends WebComponent {
             <li class="px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground font-mono">${line}</li>
           `)}
         </ul>
+        <div class="grid gap-2 border-t border-border pt-4">
+          <button @click=${() => this.applyStreamUpdate()}
+            class="w-fit px-3.5 py-1.5 rounded-xl bg-card border border-border text-foreground text-sm cursor-pointer transition-colors hover:border-border-strong">renderStream() an element-level update</button>
+          <ul id="ws-stream-log" class="grid gap-1.5 list-none m-0 p-0"></ul>
+        </div>
       </div>
     `;
   }

package/templates/gallery/modules/websockets/echo.test.ts

@@ -0,0 +1,21 @@
+// Example node test for booting the app in-process (from @webjsdev/server).
+// startServer({ appDir, port }) boots the whole app and resolves to
+// { server, close } (the same entry `webjs start` uses; port 0 picks a free
+// port, so a test never collides). Close it in a finally so the port is
+// released. This is the realistic way to smoke-test that the app boots and
+// listens; for asserting on responses without a socket, use the handle()
+// harness (see modules/server-actions/actions/greet.test.ts and the docs).
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { startServer } from '@webjsdev/server';
+
+const appDir = process.cwd();
+
+test('startServer boots the app in-process on an ephemeral port', async () => {
+  const { server, close } = await startServer({ appDir, dev: true, port: 0 });
+  try {
+    assert.ok(server.address(), 'the server is listening');
+  } finally {
+    await close();
+  }
+});

package/templates/instrumentation.ts

@@ -0,0 +1,16 @@
+// Optional boot-time hook (app root, sibling of app/). register() runs once at
+// server start, the place to wire APM / logging / tracing. setOnError(fn) (from
+// @webjsdev/server) registers a sink for every request error the framework
+// catches (an SSR render crash, a thrown server action, a 500), so you can
+// forward it to Sentry / a logger with the request context. Call setOnError
+// INSIDE register() so it runs within the instrumentation context (a top-level
+// call has no context yet and is a no-op). Delete this file if you do not need
+// the hook.
+import { setOnError } from '@webjsdev/server';
+
+export function register() {
+  setOnError((error, ctx) => {
+    // Replace with your APM. `ctx` carries request context (e.g. a correlation id).
+    console.error('[instrumentation] request error:', error, ctx ?? '');
+  });
+}