buninu-browser 0.6.0 → 0.7.0

package/README.md

@@ -96,9 +96,10 @@ the rest is passed on:
   argument goes to casty)
 - `--headless`: the engine alone, as
   a CDP endpoint
-- `--win32`, `--gtk`, `--appkit`,
-  `--qt`: native windowed frontends
-  (reserved, not implemented yet)
+- `--win32`: casty with a native Windows
+  window (Windows only)
+- `--gtk`, `--appkit`, `--qt`: native
+  windowed frontends (reserved, not implemented yet)
 - `--help`/`-h`, `--version`/`-V`,
   `--readme`: this launcher's help,
   version and backend details, and

package/index.js

@@ -9,8 +9,9 @@
  *   --casty      the terminal frontend (default): runs casty with
  *                CASTY_BROWSER set to this package's buninu-browser.js
  *   --headless   the engine alone (buninu-browser.js, a CDP endpoint)
- *   --win32, --gtk, --appkit, --qt
- *                reserved for the native windowed frontends (not implemented)
+ *   --win32      casty's native Windows frontend
+ *   --gtk, --appkit, --qt
+ *                reserved for native windowed frontends (not implemented)
  *
  *   --help, -h / --version, -V / --readme, --docs
  *                this launcher's help, version and README
@@ -33,7 +34,7 @@ export * from "./buninu-browser.js";
 
 const CASTY_PACKAGE = "@drxiaozhi/casty";
 const ENGINE = join(import.meta.dir, "buninu-browser.js");
-const RESERVED_FRONTENDS = new Set(["--win32", "--gtk", "--appkit", "--qt"]);
+const RESERVED_FRONTENDS = new Set(["--gtk", "--appkit", "--qt"]);
 const INFORMATION = new Map([
   ["--help", "help"], ["-h", "help"], ["-help", "help"],
   ["--version", "version"], ["-V", "version"], ["-version", "version"],
@@ -52,6 +53,7 @@ export function chooseFrontend(argv) {
     return { frontend: first.slice(2), args: rest };
 
   if (first === "--casty") return { frontend: "casty", args: rest };
+  if (first === "--win32") return { frontend: "win32", args: rest };
   if (first === "--headless") return { frontend: "headless", args: rest };
   if (RESERVED_FRONTENDS.has(first)) return { frontend: first.slice(2), args: rest, reserved: true };
   if (INFORMATION.has(first)) return { frontend: INFORMATION.get(first), args: rest, information: true };
@@ -96,7 +98,9 @@ ${typeof waylandHelp === "undefined" ? "" : waylandHelp}  --casty
   --quickshell-wayland, --quickshell-headless, --quickshell-casty
       Experimental Quickshell CLI (-p FILE_OR_DIRECTORY / -c CONFIG)
       Use -- before backend arguments; each entry supports --help
-  --win32, --gtk, --appkit, --qt
+  --win32
+      Native Windows window driven by casty (Windows only)
+  --gtk, --appkit, --qt
       Native windowed frontends (reserved, not implemented yet)
 
 Browser identity:
@@ -129,7 +133,7 @@ function printVersion() {
   console.log("Platform:", `${process.platform}-${process.arch}`);
   console.log("Engine:", ENGINE);
   console.log("casty launcher:", castyCommand([]).join(" "));
-  console.log("Frontends: casty (default), headless; reserved: win32, gtk, appkit, qt");
+  console.log("Frontends: casty (default), headless, win32; reserved: gtk, appkit, qt");
 }
 
 async function printReadme() {
@@ -176,6 +180,6 @@ if (import.meta.main) {
 
   const code = frontend === "headless"
     ? await run([process.execPath, ENGINE, ...args])
-    : await run(castyCommand(args), { ...process.env, CASTY_BROWSER: ENGINE });
+    : await run(castyCommand(frontend === "win32" ? ["--win32", ...args] : args), { ...process.env, CASTY_BROWSER: ENGINE });
   process.exit(code ?? 1);
 }

package/lib/cdp-server.js

@@ -44,15 +44,10 @@ export class CdpServer {
       const offset = frame?.scrollOffset;
       const scrollOffset = Number.isFinite(offset?.x) && Number.isFinite(offset?.y)
         ? { x: offset.x, y: offset.y } : null;
-      for (const target of state.targets.values()) {
-        if (target.screencast && target.screencastEmit) {
-          target.screencastScrollOffset = scrollOffset;
-          pushScreencastFrame(context, state, target);
-        }
-      }
-      if (state.implicitTarget?.screencast) {
-        state.implicitTarget.screencastScrollOffset = scrollOffset;
-        pushScreencastFrame(context, state, state.implicitTarget);
+      for (const target of [...state.targets.values(), state.implicitTarget]) {
+        if (!target) continue;
+        for (const stream of screencasts(target)) stream.scrollOffset = scrollOffset;
+        void pushScreencastFrame(context, state, target);
       }
     });
     context.onLifecycle?.((name) => {
@@ -173,6 +168,8 @@ export class CdpServer {
             const msg = JSON.parse(text);
             id = msg.id;
             sessionId = msg.sessionId;
+            if (sessionId && state.sessionOwners.get(sessionId) !== ws)
+              throw Error("No session owned by this connection");
             let dispatchSessionId = sessionId;
             if (!dispatchSessionId && ws.data?.targetId) {
               dispatchSessionId = `page-${ws.data.targetId}`;
@@ -219,12 +216,17 @@ export class CdpServer {
         },
         close(ws) {
           for (const target of state.targets.values()) {
-            if (target.screencastEmit?.owner === ws) stopScreencast(target);
+            stopScreencast(target, ws);
             if (target.lifecycleEmit?.owner === ws) target.lifecycleEmit = null;
           }
           const implicit = state.implicitTarget;
-          if (implicit?.screencastEmit?.owner === ws) stopScreencast(implicit);
+          if (implicit) stopScreencast(implicit, ws);
           if (implicit?.lifecycleEmit?.owner === ws) implicit.lifecycleEmit = null;
+          for (const [id, owner] of state.sessionOwners) {
+            if (owner !== ws) continue;
+            state.sessionOwners.delete(id);
+            state.sessions.delete(id);
+          }
           serverLog("[CdpServer] client disconnected");
         },
       },
@@ -288,6 +290,7 @@ function createCdpState() {
     nextScreencastFrameId: 1,
     targets: new Map(),
     sessions: new Map(),
+    sessionOwners: new Map(),
     objects: new Map(),
     initialNavigations: new Map(),
     implicitTarget: null,
@@ -329,6 +332,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
         const target = state.targets.get(targetId);
         target.attached = true;
         state.sessions.set(attachedSessionId, targetId);
+        state.sessionOwners.set(attachedSessionId, emit.owner);
         emit("Target.attachedToTarget", {
           sessionId: attachedSessionId,
           targetInfo: createTargetInfo(target),
@@ -345,6 +349,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       const sessionId = `session-${state.nextSessionId++}`;
       target.attached = true;
       state.sessions.set(sessionId, params.targetId);
+      state.sessionOwners.set(sessionId, emit.owner);
       return { sessionId };
     }
     case "Target.getTargets":
@@ -378,6 +383,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       for (const [attachedSessionId, targetId] of state.sessions) {
         if (targetId !== params.targetId) continue;
         state.sessions.delete(attachedSessionId);
+        state.sessionOwners.delete(attachedSessionId);
         emit("Target.detachedFromTarget", {
           sessionId: attachedSessionId,
           targetId,
@@ -387,9 +393,14 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       emit("Target.targetDestroyed", { targetId: params.targetId });
       return { success: true };
     }
-    case "Target.detachFromTarget":
+    case "Target.detachFromTarget": {
+      const target = state.targets.get(state.sessions.get(params.sessionId));
+      if (state.sessionOwners.get(params.sessionId) !== emit.owner) throw Error("No session owned by this connection");
+      if (target) stopScreencast(target, emit.owner, params.sessionId);
       state.sessions.delete(params.sessionId);
+      state.sessionOwners.delete(params.sessionId);
       return {};
+    }
     case "Page.enable":
       return {};
     case "Page.getResourceContent": {
@@ -470,7 +481,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       // A javascript: URL runs in the current document: no new loader or history entry.
       if (/^\s*javascript:/i.test(String(params.url))) {
         await ctx.navigate?.(String(params.url).trim());
-        if (target.screencast) await pushScreencastFrame(ctx, state, target);
+        if (target.screencasts.size) await pushScreencastFrame(ctx, state, target);
         return { frameId: target.frameId, loaderId: target.loaderId };
       }
       // Events of the next document belong to its new loader.
@@ -479,7 +490,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       navigateTarget(state, target, params.url, emit, { addHistory: true });
       target.title = await getContextTitle(ctx, target);
       target.history[target.historyIndex].title = target.title;
-      if (target.screencast) {
+      if (target.screencasts.size) {
         await pushScreencastFrame(ctx, state, target);
       }
       state.initialNavigations.get(target.targetId)?.navigated.resolve();
@@ -532,22 +543,26 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
     }
     case "Page.startScreencast": {
       const target = getSessionTarget(state, sessionId);
-      stopScreencast(target);
-      target.screencast = { ...params };
-      target.screencastEmit = emit;
-      // As in Chrome, the reply does not wait for the first frame (nor the
-      // renderer, which may still be starting); frames follow as events.
-      void pushScreencastFrame(ctx, state, target);
+      stopScreencast(target, emit.owner, sessionId ?? null);
+      let sessions = target.screencasts.get(emit.owner);
+      if (!sessions) target.screencasts.set(emit.owner, sessions = new Map());
+      const stream = { params: { ...params }, emit, active: true, busy: false,
+        pending: false, scrollOffset: null, frames: new Set() };
+      sessions.set(sessionId ?? null, stream);
+      // Do not wait for a capture; each viewer owns its own backpressure.
+      void pushScreencastFrame(ctx, state, target, stream);
       return {};
     }
     case "Page.screencastFrameAck": {
       const target = getSessionTarget(state, sessionId);
-      if (target.screencastFrames.delete(params.sessionId) && target.screencastPending) void pushScreencastFrame(ctx, state, target);
+      const stream = target.screencasts.get(emit.owner)?.get(sessionId ?? null);
+      if (stream?.frames.delete(params.sessionId) && stream.pending)
+        void pushScreencastFrame(ctx, state, target, stream);
       return {};
     }
     case "Page.stopScreencast": {
       const target = getSessionTarget(state, sessionId);
-      stopScreencast(target);
+      stopScreencast(target, emit.owner, sessionId ?? null);
       return {};
     }
     case "Page.reload": {
@@ -727,7 +742,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
           navigateTarget(state,target,navigation.url,emit,{addHistory:true});
           target.title=navigation.title ?? await getContextTitle(ctx,target);
           target.history[target.historyIndex].title=target.title;
-          if(target.screencast)await pushScreencastFrame(ctx,state,target);
+          if(target.screencasts.size)await pushScreencastFrame(ctx,state,target);
         }
         return {};
       }
@@ -743,7 +758,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
           navigateTarget(state, target, navigation.url, emit, { addHistory: true });
           target.title = navigation.title ?? await getContextTitle(ctx, target);
           target.history[target.historyIndex].title = target.title;
-          if (target.screencast) await pushScreencastFrame(ctx, state, target);
+          if (target.screencasts.size) await pushScreencastFrame(ctx, state, target);
         }
       }
       return {};
@@ -852,9 +867,7 @@ function createTarget(state, url = "about:blank", options = {}) {
       height: options.height ?? 600,
       deviceScaleFactor: 1,
     },
-    screencast: null,
-    screencastScrollOffset: null,
-    screencastFrames: new Set(),
+    screencasts: new Map(),
   };
   state.targets.set(targetId, target);
   state.initialNavigations.set(targetId, {
@@ -898,54 +911,67 @@ function emitLifecycle(target, name) {
 // Bound the amount of image data queued to a slow CDP client. Two outstanding
 // frames keep the pipe moving while acknowledging one; later updates coalesce.
 const MAX_SCREENCAST_FRAMES = 2;
-function stopScreencast(target) {
-  target.screencast = null;
-  target.screencastEmit = null;
-  target.screencastPending = false;
-  target.screencastScrollOffset = null;
-  target.screencastFrames.clear();
+function* screencasts(target) {
+  for (const sessions of target.screencasts.values()) yield* sessions.values();
 }
 
-/** One capture at a time, with bounded unacknowledged frames. */
-async function pushScreencastFrame(ctx, state, target) {
-  if (!target.screencast || !target.screencastEmit) return;
-  if (target.screencastBusy || target.screencastFrames.size >= MAX_SCREENCAST_FRAMES) {
-    target.screencastPending = true;
+// No owner means target destruction. An owner without a session means disconnect.
+function stopScreencast(target, owner, sessionId) {
+  const owners = owner === undefined ? target.screencasts : new Map([[owner, target.screencasts.get(owner)]]);
+  for (const [key, sessions] of owners) {
+    if (!sessions) continue;
+    for (const [id, stream] of sessions) {
+      if (sessionId !== undefined && id !== sessionId) continue;
+      stream.active = false;
+      stream.pending = false;
+      stream.scrollOffset = null;
+      stream.frames.clear();
+      sessions.delete(id);
+    }
+    if (!sessions.size) target.screencasts.delete(key);
+  }
+}
+
+/** One capture at a time per viewer, with bounded unacknowledged frames. */
+async function pushScreencastFrame(ctx, state, target, stream) {
+  if (!stream) {
+    await Promise.all([...screencasts(target)].map(s => pushScreencastFrame(ctx, state, target, s)));
+    return;
+  }
+  if (!stream.active) return;
+  if (stream.busy || stream.frames.size >= MAX_SCREENCAST_FRAMES) {
+    stream.pending = true;
     return;
   }
-  target.screencastBusy = true;
+  stream.busy = true;
   try {
     do {
-      target.screencastPending = false;
-      await emitScreencastFrame(ctx, state, target);
-    } while (target.screencastPending && target.screencast && target.screencastEmit
-      && target.screencastFrames.size < MAX_SCREENCAST_FRAMES);
+      stream.pending = false;
+      await emitScreencastFrame(ctx, state, target, stream);
+    } while (stream.pending && stream.active && stream.frames.size < MAX_SCREENCAST_FRAMES);
   } catch (error) {
     serverError(`[CdpServer] screencast frame failed: ${error?.message ?? error}`);
   } finally {
-    target.screencastBusy = false;
+    stream.busy = false;
   }
 }
 
-async function emitScreencastFrame(ctx, state, target) {
-  const stream = target.screencast, emit = target.screencastEmit;
+async function emitScreencastFrame(ctx, state, target, stream) {
+  const options = stream.params, emit = stream.emit;
   const loaderId = target.loaderId;
-  // This belongs to one invalidation, not a lasting cache. Pending updates
-  // replace it with the latest position; start/restart without one still query.
-  const notifiedOffset = target.screencastScrollOffset;
-  target.screencastScrollOffset = null;
-  // Private zero-area screencast: signal invalidation without rendering pixels.
-  // captureScreenshot keeps its ordinary clip validation.
-  const zeroArea = stream.clip?.width === 0 && stream.clip?.height === 0;
+  // Pending updates replace this snapshot with the latest position.
+  const notifiedOffset = stream.scrollOffset;
+  stream.scrollOffset = null;
+  const zeroArea = options.clip?.width === 0 && options.clip?.height === 0;
   const data = zeroArea
     ? "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Wl6SAAAAABJRU5ErkJggg=="
-    : await screenshotData(ctx, target, stream);
-  if (!data || stream !== target.screencast || emit !== target.screencastEmit || loaderId !== target.loaderId) return;
+    : await screenshotData(ctx, target, options);
+  if (!data || !stream.active || loaderId !== target.loaderId) return;
   const scrollOffset = zeroArea && notifiedOffset ? notifiedOffset
     : await ctx.scrollOffset?.() ?? { x: 0, y: 0 };
-  if (stream !== target.screencast || emit !== target.screencastEmit || loaderId !== target.loaderId) return;
+  if (!stream.active || loaderId !== target.loaderId) return;
   const sessionId = state.nextScreencastFrameId++;
-  target.screencastFrames.add(sessionId);
+  stream.frames.add(sessionId);
   emit("Page.screencastFrame", {
     data,
     metadata: {
@@ -972,7 +998,7 @@ function getPendingInitialNavigationTarget(state) {
 
 function navigateTarget(state, target, url, emit, options = {}) {
   const deferLifecycle = typeof state.context?.onLifecycle === "function";
-  target.screencastScrollOffset = null;
+  for (const stream of screencasts(target)) stream.scrollOffset = null;
   target.lifecycleEmit = null;
   target.url = url;
   loadDocument(target, url);
@@ -1067,9 +1093,7 @@ function getImplicitTarget(state) {
 
   state.implicitTarget = {
     targetId: "implicit-target",
-    screencast: null,
-    screencastScrollOffset: null,
-    screencastFrames: new Set(),
+    screencasts: new Map(),
     frameId: "implicit-target",
     loaderId: "implicit-loader",
     type: "page",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buninu-browser",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Buninu Browser is a browser engine written in JavaScript and WebAssembly for Bun.",
   "keywords": [
     "buninu",

package/test/cdp-viewers.test.js

@@ -0,0 +1,43 @@
+import {test, expect} from 'bun:test';
+import {CdpServer} from '../lib/cdp-server.js';
+const until=async fn=>{for(let i=0;i<200;i++){if(fn())return;await Bun.sleep(5);}throw Error('viewer update timed out');};
+async function connect(url){
+  const ws=new WebSocket(url), events=[], pending=new Map();let id=0;
+  ws.onmessage=({data})=>{const m=JSON.parse(data);if(m.id){const p=pending.get(m.id);pending.delete(m.id);m.error?p.reject(Error(m.error.message)):p.resolve(m.result);}else events.push(m);};
+  await new Promise((resolve,reject)=>{ws.onopen=resolve;ws.onerror=reject;});
+  return {ws,events,send(method,params={},sessionId){return new Promise((resolve,reject)=>{pending.set(++id,{resolve,reject});ws.send(JSON.stringify({id,method,params,sessionId}));});}};
+}
+for(const direct of [false,true])test(`independent viewer ACK, stop and disconnect (${direct?'page sockets':'sessions'})`,async()=>{
+  let frame;const server=CdpServer.create({screenshot:options=>options.format??'png',onFrame:fn=>frame=fn}).listen(0);
+  const clients=[];
+  try{
+    const root=await connect(`ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);clients.push(root);
+    const {targetId}=await root.send('Target.createTarget',{url:'about:blank'});
+    async function viewer(){const c=await connect(`ws://127.0.0.1:${server.port}/devtools/${direct?'page/'+targetId:'browser/cdp-server'}`);clients.push(c);const sid=direct?undefined:(await c.send('Target.attachToTarget',{targetId,flatten:true})).sessionId;return {c,sid,send:(m,p)=>c.send(m,p,sid),frames:()=>c.events.filter(e=>e.method==='Page.screencastFrame')};}
+    const a=await viewer(),b=await viewer();
+    await a.send('Page.startScreencast',{format:'png'});await b.send('Page.startScreencast',{format:'jpeg'});
+    await until(()=>a.frames().length===1&&b.frames().length===1);
+    expect(a.frames()[0].params.data).toBe('png');expect(b.frames()[0].params.data).toBe('jpeg');
+    frame();await until(()=>a.frames().length===2&&b.frames().length===2);
+    for(let i=0;i<5;i++)frame();
+    // A cannot ACK B's frames, even when both watch the same target.
+    await a.send('Page.screencastFrameAck',{sessionId:b.frames()[0].params.sessionId});
+    await Bun.sleep(20);expect(a.frames()).toHaveLength(2);expect(b.frames()).toHaveLength(2);
+    await b.send('Page.screencastFrameAck',{sessionId:b.frames()[0].params.sessionId});await until(()=>b.frames().length===3);
+    expect(a.frames()).toHaveLength(2);
+    await a.send('Page.stopScreencast');
+    await b.send('Page.screencastFrameAck',{sessionId:b.frames()[1].params.sessionId});frame();await until(()=>b.frames().length===4);
+    a.c.ws.close();await Bun.sleep(20);
+    await b.send('Page.screencastFrameAck',{sessionId:b.frames()[2].params.sessionId});frame();await until(()=>b.frames().length===5);
+    const replacement=await viewer();await replacement.send('Page.startScreencast');await until(()=>replacement.frames().length===1);
+    await b.send('Page.stopScreencast');frame();await until(()=>replacement.frames().length===2);
+    if(!direct){
+      await expect(root.send('Page.stopScreencast',{},b.sid)).rejects.toThrow('No session owned');
+      const {sessionId}=await replacement.c.send('Target.attachToTarget',{targetId,flatten:true});
+      await replacement.c.send('Page.startScreencast',{format:'jpeg'},sessionId);
+      await until(()=>replacement.c.events.some(e=>e.method==='Page.screencastFrame'&&e.sessionId===sessionId));
+      await replacement.send('Page.stopScreencast');frame();
+      await until(()=>replacement.c.events.filter(e=>e.method==='Page.screencastFrame'&&e.sessionId===sessionId).length===2);
+    }
+  }finally{for(const c of clients)c.ws.close();server.stop(true);}
+});

package/test/index.test.js

@@ -4,6 +4,7 @@ import { castyCommand, chooseFrontend } from "../index.js";
 test("the first argument picks the frontend; anything else goes to casty whole", () => {
   expect(chooseFrontend(["--casty", "example.com", "--", "--mobile"])).toEqual({ frontend: "casty", args: ["example.com", "--", "--mobile"] });
   expect(chooseFrontend(["--headless", "--remote-debugging-port=9222"])).toEqual({ frontend: "headless", args: ["--remote-debugging-port=9222"] });
+  expect(chooseFrontend(["--win32", "example.com"])).toEqual({ frontend: "win32", args: ["example.com"] });
   expect(chooseFrontend(["--gtk", "x"])).toEqual({ frontend: "gtk", args: ["x"], reserved: true });
   expect(chooseFrontend(["github.com", "--", "--mobile"])).toEqual({ frontend: "casty", args: ["github.com", "--", "--mobile"] });
   expect(chooseFrontend(["--mobile"])).toEqual({ frontend: "casty", args: ["--mobile"] });