@webjsdev/cli 0.10.29 → 0.10.31

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

@@ -0,0 +1,62 @@
+// A WebSocket echo client. connectWS() (from '@webjsdev/core') opens the socket,
+// auto-reconnects with backoff, JSON-encodes/decodes, and queues sends while
+// disconnected. The connection is opened in connectedCallback (browser-only, so
+// 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';
+
+export class WsEcho extends WebComponent {
+  private connected = signal(false);
+  private lines = signal<string[]>([]);
+  #conn: ReturnType<typeof connectWS> | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.#conn = connectWS('/features/websockets/echo', {
+      onOpen: () => this.connected.set(true),
+      onClose: () => this.connected.set(false),
+      onMessage: (msg: unknown) => this.lines.set([...this.lines.get(), String(msg)]),
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#conn?.close();
+    this.#conn = null;
+  }
+
+  private send(e: SubmitEvent) {
+    e.preventDefault();
+    const form = e.target as HTMLFormElement;
+    const input = form.elements.namedItem('msg') as HTMLInputElement;
+    const text = input.value.trim();
+    if (!text) return;
+    this.#conn?.send(text);
+    input.value = '';
+  }
+
+  render() {
+    const on = this.connected.get();
+    return html`
+      <div class="grid gap-4 max-w-[420px]">
+        <div class="flex items-center gap-2 text-sm">
+          <span class="w-2 h-2 rounded-full ${on ? 'bg-primary' : 'bg-muted-foreground/40'}"></span>
+          <span class="text-muted-foreground">${on ? 'connected' : 'connecting (live echo needs JavaScript)'}</span>
+        </div>
+        <form @submit=${(e: SubmitEvent) => this.send(e)} class="flex gap-2">
+          <input name="msg" autocomplete="off" placeholder="Say something"
+            class="flex-1 px-3 py-2 rounded-xl bg-card border border-border text-foreground text-sm outline-none focus:border-border-strong" />
+          <button type="submit"
+            class="px-3.5 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]">Send</button>
+        </form>
+        <ul class="grid gap-1.5 list-none m-0 p-0">
+          ${this.lines.get().map((line) => html`
+            <li class="px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground font-mono">${line}</li>
+          `)}
+        </ul>
+      </div>
+    `;
+  }
+}
+WsEcho.register('ws-echo');

package/templates/lib/utils/ui.ts

@@ -16,11 +16,11 @@
  */
 import { html } from '@webjsdev/core';
 
-/** `● label` kicker: small caps, accent colour, above headings. */
+/** `● label` kicker: small caps, brand colour, above headings. */
 export function rubric(label: string, mb: 'sm' | 'md' = 'md') {
   const mbCls = mb === 'sm' ? 'mb-3' : 'mb-4';
   return html`
-    <span class="block font-mono text-[11px] leading-none font-semibold tracking-[0.2em] uppercase text-accent ${mbCls}">● ${label}</span>
+    <span class="block font-mono text-[11px] leading-none font-semibold tracking-[0.2em] uppercase text-primary ${mbCls}">● ${label}</span>
   `;
 }
 
@@ -68,10 +68,10 @@ export function banner(content: unknown) {
   `;
 }
 
-/** Inline accent link: used inside body copy and banners. */
+/** Inline brand link: used inside body copy and banners. */
 export function accentLink(href: string, label: unknown) {
   return html`
-    <a href=${href} class="text-accent font-semibold no-underline hover:underline hover:underline-offset-[3px]">${label}</a>
+    <a href=${href} class="text-primary font-semibold no-underline hover:underline hover:underline-offset-[3px]">${label}</a>
   `;
 }
 

package/templates/test/hello/browser/hello.test.js

@@ -51,11 +51,17 @@ suite('Example browser tests', () => {
     await assertNoA11yViolations(el);
   });
 
-  // Replace with your component tests:
-  // test('my-widget renders correctly', async () => {
-  //   await import('../../components/my-widget.ts');
-  //   const el = await ssrFixture(html`<my-widget></my-widget>`);
-  //   assert.ok(el.shadowRoot ?? el.firstElementChild);
-  //   await assertNoA11yViolations(el);   // opt-in a11y check
+  // Your REAL `.ts` app components load here. `webjs test --browser` serves
+  // them through the webjs dev pipeline (TypeScript stripped, any `.server.ts`
+  // action import rewritten to an RPC stub, `#` aliases resolved), so a
+  // component that talks to the server works in a real browser, not just a
+  // node test. Point the import at a component your app actually has:
+  //
+  // test('todo-list adds a row optimistically', async () => {
+  //   await import('../../../components/todo-list.ts');  // imports create-todo.server.ts
+  //   const el = await ssrFixture(html`<todo-list></todo-list>`);
+  //   el.querySelector('button')?.click();               // fires the action RPC
+  //   // assert on the DOM, then optionally:
+  //   await assertNoA11yViolations(el);
   // });
 });

package/templates/test/hello/e2e/hello.test.ts

@@ -1,12 +1,14 @@
-/**
- * Example E2E test: replace with tests for your user flows.
- *
- * Run:  WEBJS_E2E=1 webjs test
- * Or:   WEBJS_E2E=1 node --test test/**/e2e/**/*.test.ts
- *
- * Requires: puppeteer-core + chromium installed.
- *   npm i -D puppeteer-core
- */
+// Example E2E test: replace with tests for your user flows.
+//
+// Run:  WEBJS_E2E=1 webjs test
+//       (or point node --test at your e2e test files directly)
+//
+// Requires: puppeteer-core + chromium installed.
+//   npm i -D puppeteer-core
+//
+// Note: this header uses line comments on purpose. A JSDoc block comment
+// here cannot contain a glob like test/**/e2e/ because the ** followed by /
+// closes the block comment early and breaks TypeScript stripping.
 import { test, describe, before, after } from 'node:test';
 import assert from 'node:assert/strict';
 import { spawn } from 'node:child_process';

package/templates/test/hello/hello.test.ts

@@ -1,9 +1,7 @@
-/**
- * Example unit test: replace with tests for your modules.
- *
- * Run:  webjs test
- * Or:   node --test test/**/*.test.ts
- */
+// Example unit test: replace with tests for your modules.
+//
+// Run:  webjs test
+// Or:   node --test 'test/**/*.test.ts'
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { html } from '@webjsdev/core';

package/templates/web-test-runner.config.js

@@ -1,12 +1,8 @@
 /**
  * Web Test Runner configuration.
  *
- * Runs browser tests (components, directives, interactions) in real
- * Chromium via Playwright. Server tests (actions, queries) use node:test.
- *
- * Tests are organised by feature. Each feature folder may have a
- * `browser/` subfolder containing real-browser tests; the glob below
- * picks them up wherever they live.
+ * Runs browser tests (components, directives, interactions) in real Chromium
+ * via Playwright. Server tests (actions, queries) use node:test.
  *
  *   test/<feature>/<file>.test.ts             ← node tests
  *   test/<feature>/browser/<file>.test.js     ← this runner
@@ -15,15 +11,94 @@
  *   webjs test              # runs both server + browser tests
  *   webjs test --browser    # browser tests only
  *   webjs test --server     # server tests only
+ *
+ * A webjs browser test imports the REAL app: a `.ts` component that imports a
+ * `'use server'` action. Plain web-test-runner serves raw TypeScript with no
+ * transform, so that never loads. This config proxies every module request to
+ * the webjs dev pipeline via `createBrowserTestHandler`, so the browser gets
+ * the SAME output as `webjs dev`: TypeScript stripped, a `.server.ts` import
+ * rewritten to a typed RPC stub, `#`-alias imports resolved, `@webjsdev/core`
+ * served, and the importmap injected. (#806)
  */
 import { playwrightLauncher } from '@web/test-runner-playwright';
+import { createBrowserTestHandler } from '@webjsdev/server/testing';
+import { resolve } from 'node:path';
+import { Readable } from 'node:stream';
+
+// One webjs handler for the app, warmed once and shared. Top-level await so the
+// importmap is ready before `testRunnerHtml` is called for the first test file.
+const webjs = await createBrowserTestHandler(resolve('.'));
 
 export default {
+  // Browser tests are `.js` (web-test-runner serves them through its own test
+  // framework); the components + modules they import are `.ts`, served
+  // transformed by the webjs middleware below.
   files: ['test/**/browser/**/*.test.js'],
-  nodeResolve: true,
-  browsers: [
-    playwrightLauncher({ product: 'chromium' }),
+  // webjs's importmap resolves `@webjsdev/core`, the `#` app aliases, and
+  // vendors, so web-test-runner must NOT rewrite bare specifiers to
+  // node_modules paths.
+  nodeResolve: false,
+  // Inject the webjs importmap so a bare / `#`-aliased import in a served module
+  // resolves in the browser exactly as it does under `webjs dev`.
+  testRunnerHtml: (testFrameworkImport) =>
+    `<!DOCTYPE html>
+<html>
+  <head>${webjs.importmapHtml()}</head>
+  <body>
+    <script type="module" src="${testFrameworkImport}"></script>
+  </body>
+</html>`,
+  middleware: [
+    async (ctx, next) => {
+      // web-test-runner owns: its own internals (/__web-test-runner,
+      // /__web-dev-server, /__wds), the TEST FILES themselves (it wraps each
+      // for the test framework), and the DOCUMENT navigation (the test-runner
+      // HTML page, `Sec-Fetch-Dest: document`). If webjs served the page, WTR's
+      // test bootstrap would never load and the session would time out. NOTE:
+      // match the WTR/WDS prefixes specifically, NOT a broad `/__web`, because
+      // webjs's own paths are `/__webjs/...` and MUST be proxied below.
+      if (
+        ctx.path.startsWith('/__web-test-runner') ||
+        ctx.path.startsWith('/__web-dev-server') ||
+        ctx.path.startsWith('/__wds') ||
+        /\.test\.(js|mjs)$/.test(ctx.path) ||
+        (ctx.get('sec-fetch-dest') || '') === 'document'
+      ) {
+        return next();
+      }
+      // The dev live-reload SSE has no meaning in a test run; short-circuit it
+      // so it neither hangs nor logs a 404.
+      if (ctx.path === '/__webjs/events') {
+        ctx.status = 204;
+        return;
+      }
+      // Everything else (a `.ts` component, a `.server.ts` action, the `#`
+      // alias, `/__webjs/core/*`, vendors) goes through the webjs dev pipeline.
+      // A GET/HEAD has no body; a POST (a browser test firing an action RPC)
+      // carries one. `ctx.req` is a Node IncomingMessage, so wrap it in a web
+      // ReadableStream (the same `Readable.toWeb` the server's own request
+      // bridge uses), NOT pass the raw Node stream.
+      const hasBody = ctx.method !== 'GET' && ctx.method !== 'HEAD';
+      const req = new Request(`http://localhost${ctx.originalUrl || ctx.url}`, {
+        method: ctx.method,
+        headers: ctx.headers,
+        body: hasBody ? Readable.toWeb(ctx.req) : undefined,
+        duplex: 'half',
+      });
+      const res = await webjs.handle(req);
+      // A 404 means webjs does not own this path; let web-test-runner try.
+      if (res.status === 404) return next();
+      ctx.status = res.status;
+      // Copy headers, but handle Set-Cookie separately: `Headers.forEach`
+      // comma-joins multiple Set-Cookie into one malformed value, so use
+      // `getSetCookie()` and append each (an action driving a multi-cookie auth
+      // flow would otherwise lose a cookie in the browser).
+      res.headers.forEach((value, key) => { if (key.toLowerCase() !== 'set-cookie') ctx.set(key, value); });
+      for (const cookie of res.headers.getSetCookie?.() ?? []) ctx.append('set-cookie', cookie);
+      ctx.body = Buffer.from(await res.arrayBuffer());
+    },
   ],
+  browsers: [playwrightLauncher({ product: 'chromium' })],
   testFramework: {
     config: {
       ui: 'tdd',