@lunardinos/browser 0.2.4 → 0.2.6

package/dist/src/testing/measure-bytes.js

@@ -0,0 +1,171 @@
+/**
+ * Measure what the recorder uploads per minute of an active and an idle user.
+ *
+ *   bun packages/browser/src/testing/measure-bytes.ts [--minutes 5] [--idle 10] [--seed 1]
+ *
+ * Runs the production recorder (`createLunarDinosRecorder`) in real Chromium on
+ * a fake clock, against an app-like page: a shift list with cards and avatars,
+ * a detail view and a form, switched by SPA navigations the way the framework
+ * SDKs report them. The user is active the whole time — mouse, scroll, clicks,
+ * typing, a navigation every 20 s. Then the user leaves the tab open and idle
+ * for `--idle` minutes while the page keeps re-rendering its clock and badges,
+ * as real apps poll and animate. Every upload is intercepted and counted as it
+ * goes over the wire (gzip where the recorder compresses).
+ *
+ * The page is synthetic, so the absolute number is a baseline, not a forecast:
+ * compare runs of this script before and after a recorder change.
+ */
+import { chromium } from "playwright";
+import { buildRecorderBundle } from "./recorder-bundle";
+const args = process.argv.slice(2);
+const opt = (n, d) => {
+    const i = args.indexOf(`--${n}`);
+    return i === -1 ? d : args[i + 1];
+};
+const minutes = Number(opt("minutes", "5"));
+const idleMinutes = Number(opt("idle", "10"));
+const seed = Number(opt("seed", "1"));
+const CSS = `
+body { font-family: system-ui, sans-serif; margin: 0; color: #222; background: #fafafa; }
+header { display: flex; gap: 16px; padding: 12px 24px; background: #1e1e2e; color: #fff; }
+header a { color: inherit; text-decoration: none; }
+main { padding: 24px; max-width: 960px; margin: 0 auto; }
+.card { display: flex; gap: 12px; align-items: center; padding: 12px; margin: 8px 0; background: #fff; border: 1px solid #ddd; border-radius: 8px; }
+.card img { width: 32px; height: 32px; border-radius: 50%; }
+.card .title { font-weight: 600; }
+.card .meta { color: #666; font-size: 13px; }
+.badge { padding: 2px 8px; border-radius: 999px; background: #e0f2e9; color: #14532d; font-size: 12px; }
+form label { display: block; margin: 12px 0 4px; }
+form input, form textarea, form select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
+button { padding: 8px 16px; border-radius: 6px; border: 0; background: #4f46e5; color: #fff; }
+`;
+// An avatar of the kind an app serves: same-origin, so the recorder inlines it.
+const AVATAR = `<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><rect width="256" height="256" fill="#89b4fa"/><circle cx="128" cy="100" r="48" fill="#fff"/><rect x="48" y="170" width="160" height="80" rx="40" fill="#fff"/></svg>`;
+const HTML = `<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><title>Schichten</title><style>${CSS}</style></head>
+<body><header><a href="#" data-route="/shifts">Schichten</a><a href="#" data-route="/profile">Profil</a><span id="clock"></span></header>
+<main id="app"></main>
+<script src="/recorder.js"></script>
+<script>{
+let s = ${seed};
+const rnd = () => ((s = (s * 1103515245 + 12345) % 2147483648) / 2147483648);
+const app = document.getElementById('app');
+const views = {
+  '/shifts': () => {
+    let h = '<h1>Offene Schichten</h1><input id="search" placeholder="Suchen">';
+    for (let i = 0; i < 40; i++) h += '<div class="card" data-id="' + i + '"><img src="/avatar.svg?u=' + (i % 8) + '"><div><div class="title">Frühdienst Station ' + (i % 7 + 1) + '</div><div class="meta">Klinikum Nord · 06:00–14:00 · ' + (20 + i) + ' €/h</div></div><span class="badge">offen</span></div>';
+    return h;
+  },
+  '/shifts/[id]': (id) => '<h1>Schicht ' + id + '</h1><div class="card"><img src="/avatar.svg?u=1"><div><div class="title">Frühdienst</div><div class="meta">Klinikum Nord</div></div></div><p>' + 'Beschreibung der Schicht. '.repeat(30) + '</p><button id="apply">Bewerben</button>',
+  '/profile': () => '<h1>Profil</h1><form><label>Name</label><input id="name"><label>Qualifikation</label><select id="qual"><option>Pflegefachkraft</option><option>Pflegehelfer</option></select><label>Notizen</label><textarea id="notes"></textarea><button type="button">Speichern</button></form>',
+};
+const recorder = LunarDinos.createLunarDinosRecorder({ apiKey: 'measure', endpoint: 'https://ingest.test' });
+function render(pattern, params) {
+  app.innerHTML = views[pattern](params && params.id);
+}
+function meta(pattern, params) {
+  const href = pattern === '/shifts/[id]' ? '/shifts/' + params.id : pattern;
+  return { href: location.origin + href, title: document.title, routePattern: pattern, params };
+}
+window.__navigate = (pattern, params = null) => {
+  render(pattern, params);
+  recorder.emitPageEvent(meta(pattern, params));
+};
+render('/shifts');
+recorder.start({ pageMetadata: meta('/shifts', null) });
+setInterval(() => {
+  document.getElementById('clock').textContent = new Date().toLocaleTimeString();
+  const card = app.querySelector('.card .badge');
+  if (card && rnd() < 0.3) card.textContent = rnd() < 0.5 ? 'offen' : 'vergeben';
+}, 1000);
+window.__flush = () => recorder.flush();
+}</script></body></html>`;
+const recorderJs = await buildRecorderBundle();
+const newTally = () => ({ wire: 0, json: 0, requests: 0, events: {} });
+const active = newTally();
+const idle = newTally();
+let tally = active;
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
+await page.route("https://app.test/**", (route) => {
+    const u = new URL(route.request().url());
+    if (u.pathname === "/")
+        return route.fulfill({ contentType: "text/html", body: HTML });
+    if (u.pathname === "/recorder.js")
+        return route.fulfill({ contentType: "application/javascript", body: recorderJs });
+    if (u.pathname === "/avatar.svg")
+        return route.fulfill({ contentType: "image/svg+xml", body: AVATAR });
+    return route.fulfill({ status: 404, body: "" });
+});
+await page.route("https://ingest.test/**", async (route) => {
+    const req = route.request();
+    if (req.method() !== "POST")
+        return route.fulfill({ status: 204, body: "" });
+    const body = req.postDataBuffer() ?? Buffer.alloc(0);
+    tally.wire += body.length;
+    tally.requests++;
+    const gzipped = req.headers()["content-encoding"] === "gzip";
+    const json = gzipped ? Bun.gunzipSync(new Uint8Array(body)) : body;
+    tally.json += json.length;
+    const { events } = JSON.parse(new TextDecoder().decode(json));
+    for (const e of events) {
+        const k = e.type === 3 ? `3.${e.data?.source}` : e.type === 5 ? `5.${e.data?.tag}` : String(e.type);
+        tally.events[k] = (tally.events[k] ?? 0) + 1;
+    }
+    return route.fulfill({ status: 200, body: "{}" });
+});
+await page.clock.install({ time: new Date("2026-01-01T10:00:00Z") });
+page.on("pageerror", (e) => console.error("pageerror", e.message));
+await page.goto("https://app.test/");
+/** Let the recorder's async gzip and fetch settle on the real clock. */
+const settle = () => new Promise((r) => setTimeout(r, 30));
+const routes = [
+    ["/shifts", null],
+    ["/shifts/[id]", { id: "7" }],
+    ["/profile", null],
+    ["/shifts/[id]", { id: "12" }],
+];
+let navs = 0;
+for (let sec = 0; sec < minutes * 60; sec++) {
+    await page.mouse.move(200 + ((sec * 37) % 800), 150 + ((sec * 53) % 500), { steps: 4 });
+    if (sec % 3 === 0)
+        await page.mouse.wheel(0, sec % 6 === 0 ? 300 : -200);
+    if (sec % 20 === 19) {
+        const [pattern, params] = routes[++navs % routes.length];
+        await page.evaluate(([p, q]) => window.__navigate(p, q), [pattern, params]);
+    }
+    if (sec % 7 === 0) {
+        const input = page.locator("#search, #name").first();
+        if (await input.count())
+            await input.fill(`eingabe ${sec}`);
+    }
+    if (sec % 9 === 0)
+        await page.mouse.click(300, 300);
+    await page.clock.runFor(1000);
+    await settle();
+}
+/** Upload what's buffered and let it land, so it counts toward the phase that made it. */
+async function drain() {
+    await page.evaluate(() => window.__flush());
+    await page.clock.runFor(100);
+    await new Promise((r) => setTimeout(r, 300));
+}
+await drain();
+tally = idle;
+for (let sec = 0; sec < idleMinutes * 60; sec += 10) {
+    await page.clock.runFor(10_000);
+    await settle();
+}
+await drain();
+await browser.close();
+function report(label, t, mins) {
+    if (mins === 0)
+        return;
+    const perMin = (n) => `${(n / mins / 1024).toFixed(1)} KB`;
+    console.log(`${mins} ${label} minutes, ${t.requests} uploads`);
+    console.log(`  wire: ${perMin(t.wire)} per ${label} minute (${(t.wire / 1024).toFixed(0)} KB total)`);
+    console.log(`  json: ${perMin(t.json)} per ${label} minute (${(t.json / 1024).toFixed(0)} KB total)`);
+    console.log("  events:", t.events);
+}
+console.log(`${navs} navigations`);
+report("active", active, minutes);
+report("idle", idle, idleMinutes);

package/dist/src/testing/recorder-bundle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The production recorder built for the browser, exposing
+ * `LunarDinos.createLunarDinosRecorder` on the page.
+ */
+export declare function buildRecorderBundle(): Promise<string>;
+//# sourceMappingURL=recorder-bundle.d.ts.map

package/dist/src/testing/recorder-bundle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recorder-bundle.d.ts","sourceRoot":"","sources":["../../../src/testing/recorder-bundle.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,MAAM,CAAC,CAa3D"}

package/dist/src/testing/recorder-bundle.js

@@ -0,0 +1,19 @@
+import { mkdtempSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+/**
+ * The production recorder built for the browser, exposing
+ * `LunarDinos.createLunarDinosRecorder` on the page.
+ */
+export async function buildRecorderBundle() {
+    const outdir = mkdtempSync(join(tmpdir(), "recorder-bundle-"));
+    const entry = join(outdir, "entry.ts");
+    await Bun.write(entry, `import { createLunarDinosRecorder } from "${import.meta.dir}/../recorder-core";\n(globalThis as any).LunarDinos = { createLunarDinosRecorder };\n`);
+    // Via the CLI: Bun.build inside `bun test` can't resolve workspace packages.
+    const build = Bun.spawnSync(["bun", "build", entry, "--target=browser", `--outdir=${outdir}`], {
+        cwd: import.meta.dir,
+    });
+    if (build.exitCode !== 0)
+        throw new Error(`bundle failed: ${build.stderr}`);
+    return Bun.file(join(outdir, "entry.js")).text();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunardinos/browser",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "exports": {
     ".": {
@@ -19,6 +19,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@lunardinos/rrweb-record": "0.1.0"
+    "@lunardinos/rrweb-record": "0.1.0",
+    "playwright": "^1.50.0"
   }
 }