From d86baf4ae5dee6ec8121130c8b01d0dd612e79c8 Mon Sep 17 00:00:00 2001 From: Simon van Lierde Date: Fri, 30 Oct 2026 21:52:12 +0100 Subject: [PATCH] feat(ui): add just ui-serve to look at a UI change locally - just ui-serve builds the viewer and serves it with the committed real data, port 4400 by default - the test server now listens on 127.0.0.1 only, and the browser tests use that address - ui/README.md says how to look at a UI PR: ui-serve, or CI's ui-screenshots artifact Signed-off-by: Simon van Lierde --- justfile | 6 ++++++ ui/README.md | 4 ++++ ui/e2e/serve.mjs | 2 +- ui/playwright.config.ts | 4 ++-- 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/justfile b/justfile index 08966d1..61f2303 100644 --- a/justfile +++ b/justfile @@ -110,6 +110,12 @@ site: scripts/compat_site.py site scripts/site_index.py site +# Build the viewer and serve it on 127.0.0.1:PORT with the committed real data, to look at a UI +# change (a PR checked out with `gh pr checkout`). From a laptop: ssh -L PORT:localhost:PORT HOST. +ui-serve port="4400": + # A local look only, so the host's pnpm may stand in for the pinned one (CI uses the pin). + cd ui && export npm_config_manage_package_manager_versions=false && pnpm install --frozen-lockfile && pnpm run build && node e2e/serve.mjs {{ port }} + # Write the UI's data from results/ to OUT (scripts/export_ui.py says what it reads). # Needs uv: change points come from Apache Otava, in an environment of its own. ui-data out: diff --git a/ui/README.md b/ui/README.md index fd55b66..cf8bf6c 100644 --- a/ui/README.md +++ b/ui/README.md @@ -31,6 +31,10 @@ They serve `dist/` with [test/fixtures/real/](test/fixtures/real/) as its data: `just ui-data` run on the public `results` branch. To refresh it, run `just ui-data` from a clone that has asv's mirrors in `.asv/` (they give the release names) into that folder. +To look at a UI change, `just ui-serve` (port 4400 by default) builds the viewer and serves it +with that same data. CI's `ui` job also keeps the browser tests' screenshots as the +`ui-screenshots` artifact for 14 days: `gh run download -n ui-screenshots`. + The site reads `index.json` from `PUBLIC_DATA_URL`, an absolute URL or a path relative to the page, `data/` by default. Set it at build time: diff --git a/ui/e2e/serve.mjs b/ui/e2e/serve.mjs index aff6a05..df765f9 100644 --- a/ui/e2e/serve.mjs +++ b/ui/e2e/serve.mjs @@ -19,4 +19,4 @@ createServer((req, res) => { } res.writeHead(200, { "content-type": TYPES[extname(file)] ?? "application/octet-stream" }); createReadStream(file).pipe(res); -}).listen(Number(process.argv[2])); +}).listen(Number(process.argv[2]), "127.0.0.1"); // this host only diff --git a/ui/playwright.config.ts b/ui/playwright.config.ts index c355c06..1df1444 100644 --- a/ui/playwright.config.ts +++ b/ui/playwright.config.ts @@ -7,10 +7,10 @@ const port = Number(process.env.E2E_PORT ?? 4417); export default defineConfig({ testDir: "e2e", reporter: process.env.CI ? "github" : "list", - use: { baseURL: `http://localhost:${port}/`, browserName: "chromium" }, + use: { baseURL: `http://127.0.0.1:${port}/`, browserName: "chromium" }, webServer: { command: `node e2e/serve.mjs ${port}`, - url: `http://localhost:${port}/`, + url: `http://127.0.0.1:${port}/`, reuseExistingServer: !process.env.CI, }, });