buninu-browser 0.0.2

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "buninu-browser",
+  "version": "0.0.2",
+  "description": "Buninu Browser is a browser engine written in JavaScript and WebAssembly for Bun.",
+  "keywords": [
+    "buninu",
+    "buninu-linux",
+    "browser",
+    "browser-engine",
+    "headless-browser",
+    "bun",
+    "javascript",
+    "webassembly",
+    "wasm",
+    "cdp",
+    "chrome-devtools-protocol",
+    "casty",
+    "terminal",
+    "tty",
+    "kitty"
+  ],
+  "type": "module",
+  "main": "./index.js",
+  "bin": {
+    "buninu-browser": "./index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jjtseng93/buninu-browser.git"
+  },
+  "homepage": "https://github.com/jjtseng93/buninu-browser#readme",
+  "bugs": {
+    "url": "https://github.com/jjtseng93/buninu-browser/issues"
+  },
+  "license": "MIT",
+  "engines": {
+    "bun": ">=1.4.2"
+  }
+}

package/patches/happy-dom/0001-use-bun-entity-adapter.patch

@@ -0,0 +1,15 @@
+diff --git a/packages/happy-dom/src/utilities/XMLEncodeUtility.ts b/packages/happy-dom/src/utilities/XMLEncodeUtility.ts
+index c2cd7e8..bb7c093 100644
+--- a/packages/happy-dom/src/utilities/XMLEncodeUtility.ts
++++ b/packages/happy-dom/src/utilities/XMLEncodeUtility.ts
+@@ -1,4 +1,9 @@
+-import { decodeHTML, decodeHTMLAttribute, decodeXML, escapeText } from 'entities';
++import {
++	decodeHTML,
++	decodeHTMLAttribute,
++	decodeXML,
++	escapeText
++} from '../../../../../../lib/happy-dom/entities-adapter.js';
+ 
+ /**
+  * Pre-compiled RegExp patterns for encoding/decoding.

package/patches/happy-dom/0002-use-bun-platform-adapters.patch

@@ -0,0 +1,69 @@
+diff --git a/packages/happy-dom/src/file/FileReader.ts b/packages/happy-dom/src/file/FileReader.ts
+index 2de8270..0c5034b 100644
+--- a/packages/happy-dom/src/file/FileReader.ts
++++ b/packages/happy-dom/src/file/FileReader.ts
+@@ -1,4 +1,4 @@
+-import WhatwgMIMEType from 'whatwg-mimetype';
++import WhatwgMIMEType from '../../../../../../lib/happy-dom/mime-type-adapter.js';
+ import * as PropertySymbol from '../PropertySymbol.js';
+ import ProgressEvent from '../event/events/ProgressEvent.js';
+ import DOMExceptionNameEnum from '../exception/DOMExceptionNameEnum.js';
+diff --git a/packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts b/packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts
+index f2c85d6..961edb1 100644
+--- a/packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts
++++ b/packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts
+@@ -4,7 +4,7 @@ import type ICanvasShape from '../../canvas/ICanvasShape.js';
+ import ElementEventAttributeUtility from '../element/ElementEventAttributeUtility.js';
+ import type Event from '../../event/Event.js';
+ import WindowBrowserContext from '../../window/WindowBrowserContext.js';
+-import BufferImageSize from 'buffer-image-size';
++import ImageSize from '../../../../../../../lib/happy-dom/image-size-adapter.js';
+ import type Response from '../../fetch/Response.js';
+ import type Attr from '../attr/Attr.js';
+ 
+@@ -424,15 +424,18 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+ 			const buffer = Buffer.from(dataUrlMatch[2], 'base64');
+ 			this[PropertySymbol.complete] = true;
+ 			this[PropertySymbol.buffer] = buffer;
+-			try {
+-				const dimensions = BufferImageSize(buffer);
++			this[PropertySymbol.complete] = false;
++			ImageSize(buffer).then((dimensions) => {
+ 				this[PropertySymbol.naturalHeight] = dimensions.height;
+ 				this[PropertySymbol.naturalWidth] = dimensions.width;
+-			} catch (e) {
++				this[PropertySymbol.complete] = true;
++				this.dispatchEvent(new this[PropertySymbol.window].Event('load'));
++			}).catch(() => {
+ 				this[PropertySymbol.naturalHeight] = 0;
+ 				this[PropertySymbol.naturalWidth] = 0;
+-			}
+-			this.dispatchEvent(new this[PropertySymbol.window].Event('load'));
++				this[PropertySymbol.complete] = true;
++				this.dispatchEvent(new this[PropertySymbol.window].Event('error'));
++			});
+ 			return true;
+ 		}
+ 		return false;
+@@ -484,7 +487,7 @@ export default class HTMLImageElement extends HTMLElement implements ICanvasShap
+ 		this[PropertySymbol.buffer] = buffer;
+ 
+ 		try {
+-			const dimensions = BufferImageSize(buffer);
++			const dimensions = await ImageSize(buffer);
+ 			this[PropertySymbol.naturalHeight] = dimensions.height;
+ 			this[PropertySymbol.naturalWidth] = dimensions.width;
+ 		} catch (e) {
+diff --git a/packages/happy-dom/src/web-socket/WebSocket.ts b/packages/happy-dom/src/web-socket/WebSocket.ts
+index 3075e3a..bea5f97 100644
+--- a/packages/happy-dom/src/web-socket/WebSocket.ts
++++ b/packages/happy-dom/src/web-socket/WebSocket.ts
+@@ -5,7 +5,7 @@ import * as PropertySymbol from '../PropertySymbol.js';
+ import WindowBrowserContext from '../window/WindowBrowserContext.js';
+ import WebSocketReadyStateEnum from './WebSocketReadyStateEnum.js';
+ import Blob from '../file/Blob.js';
+-import WS from 'ws';
++import WS from '../../../../../../lib/happy-dom/websocket-adapter.js';
+ 
+ // https://tools.ietf.org/html/rfc7230#section-3.2.6
+ const SECURE_PROTOCOL_REGEXP = /^[!#$%&'*+\-.^_`|~\dA-Za-z]+$/;

package/patches/happy-dom/README.md

@@ -0,0 +1,38 @@
+# Happy DOM patch queue
+
+The vendored Happy DOM tree is based on upstream tag `v20.14.5`, commit
+`0d4cdbe7442af49d16b49ddf1acf7cc9684ed318`:
+
+- Upstream: <https://github.com/capricorn86/happy-dom>
+- Vendored tree: `vendor/happy-dom`
+- Patch paths are relative to the root of the upstream Happy DOM repository.
+
+Apply patches in numeric order after checking out the upstream commit into
+`vendor/happy-dom`:
+
+```sh
+git -C vendor/happy-dom apply --check ../../patches/happy-dom/0001-use-bun-entity-adapter.patch
+git -C vendor/happy-dom apply ../../patches/happy-dom/0001-use-bun-entity-adapter.patch
+git -C vendor/happy-dom apply --check ../../patches/happy-dom/0002-use-bun-platform-adapters.patch
+git -C vendor/happy-dom apply ../../patches/happy-dom/0002-use-bun-platform-adapters.patch
+```
+
+For the already-patched vendored tree, verify that the recorded patch can be
+removed cleanly without changing files:
+
+```sh
+git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0001-use-bun-entity-adapter.patch
+git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0002-use-bun-platform-adapters.patch
+```
+
+## Patch manifest
+
+| Patch | Modified upstream file | Reason | Verification |
+|---|---|---|---|
+| `0001-use-bun-entity-adapter.patch` | `packages/happy-dom/src/utilities/XMLEncodeUtility.ts` | Route entity decoding through the project-owned `Bun.markdown.render()` adapter instead of installing the external `entities` package. | `bun test test/entities-adapter.test.js` |
+| `0002-use-bun-platform-adapters.patch` | `packages/happy-dom/src/file/FileReader.ts`, `packages/happy-dom/src/nodes/html-image-element/HTMLImageElement.ts`, `packages/happy-dom/src/web-socket/WebSocket.ts` | Route the remaining static package imports through project-owned adapters backed by Bun APIs, so importing the DOM tree does not require installing npm dependencies. | `bun test test/html-parser.test.js test/happy-dom-platform-adapters.test.js` |
+
+Keep each local Happy DOM change in a separate numbered patch and add it to
+this table with its reason and focused test. When updating Happy DOM, regenerate
+and re-check the queue against the new pinned commit before changing the version
+record in `THIRD_PARTY_NOTICES.md`.

package/test/chromium-headless-shell

@@ -0,0 +1,5 @@
+#!/usr/bin/env bun
+
+import { main } from "../buninu-browser.js";
+
+process.exitCode = await main();

package/test/compositor.test.js

@@ -0,0 +1,154 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { createBrowser } from "../lib/headless-shell.js";
+import { cropViewport, encodeImage, rgbaBitmap } from "../lib/paint/frame.js";
+import { RendererHost } from "../lib/renderer/host.js";
+
+const tallPage = `<!doctype html><title>tall</title><body style="margin:0">${
+  Array.from({ length: 80 }, (_, index) => `<p style="margin:0;height:40px">line ${index}</p>`).join("")
+}</body>`;
+
+test("frames: viewport crops fill uncovered areas, and Bun.Image encodes the BMP wrapper exactly", async () => {
+  // A 2x2 red tile at page y=10; the 2x4 viewport at y=9 sees background, red, red, background.
+  const red = [255, 0, 0, 255];
+  const tile = {
+    pixels: new Uint8Array([...red, ...red, ...red, ...red]), pixelWidth: 2, pixelHeight: 2,
+    x: 0, y: 10, width: 2, height: 2, scale: 1, background: [0, 0, 255, 255],
+  };
+  const { pixels, width, height } = cropViewport(tile, 0, 9, 2, 4);
+  expect([width, height]).toEqual([2, 4]);
+  const rows = Array.from({ length: 4 }, (_, row) => [...pixels.subarray(row * 8, row * 8 + 4)]);
+  expect(rows).toEqual([[0, 0, 255, 255], red, red, [0, 0, 255, 255]]);
+
+  expect(rgbaBitmap(pixels, width, height).byteLength).toBe(14 + 108 + pixels.byteLength);
+  const png = await encodeImage(pixels, width, height);
+  expect(await new Bun.Image(png).metadata()).toEqual({ width: 2, height: 4, format: "png" });
+  const jpeg = await encodeImage(pixels, width, height, { format: "jpeg", quality: 90 });
+  expect((await new Bun.Image(jpeg).metadata()).format).toBe("jpeg");
+});
+
+test("the compositor answers screenshots and scrolling while the main thread is busy", async () => {
+  const host = new RendererHost({ timeout: 20_000 });
+  try {
+    await host.start();
+    await host.call("resize", 400, 300, 1);
+    await host.call("setUserAgent", "test");
+    await host.call("loadDocument", { url: "https://page.test/", source: tallPage, contentType: "text/html" });
+    await host.call("whenLoaded");
+    const top = await host.composite("screenshot");
+    expect(top.length).toBeGreaterThan(0);
+
+    // Block the renderer's main thread for 2.5 s.
+    const busy = host.call("evaluate", "(() => { const end = Date.now() + 2500; while (Date.now() < end); return 'done'; })()");
+    await Bun.sleep(300);
+    const started = performance.now();
+    expect(await host.composite("scroll", 0, 120)).toEqual({ x: 0, y: 120 });
+    const scrolled = await host.composite("screenshot");
+    expect(performance.now() - started).toBeLessThan(1500);
+    expect(scrolled).not.toBe(top);
+    expect(await busy).toBe("done");
+
+    // The main thread follows the compositor's scroll position once it is free.
+    expect(await host.call("scrollOffset")).toEqual({ x: 0, y: 120 });
+    // Its own screenshot is cut from the same tile.
+    expect(await host.call("screenshot")).toBe(await host.composite("screenshot"));
+
+    // Scrolling done by the main thread (a key press) moves the compositor too.
+    await host.call("press", "End");
+    const end = await host.composite("scrollOffset");
+    expect(end.y).toBe(80 * 40 - 300);
+  } finally {
+    host.close();
+  }
+}, 30_000);
+
+let server;
+let releaseStyles;
+let releaseScript;
+beforeAll(() => {
+  server = Bun.serve({
+    port: 0,
+    async fetch(request) {
+      const { pathname } = new URL(request.url);
+      if (pathname === "/slow.js") {
+        await new Promise((resolve) => (releaseScript = resolve));
+        return new Response("document.title = 'slow script ran';", { headers: { "content-type": "text/javascript" } });
+      }
+      if (pathname === "/busy") {
+        // A long page whose scripts change the DOM while a slow script keeps it loading.
+        return new Response(`<!doctype html><title>busy</title><body style="margin:0">${
+          Array.from({ length: 200 }, (_, index) => `<p style="margin:0;height:40px">row ${index}</p>`).join("")
+        }<script>document.body.dataset.touched = "yes";</script><script src="/slow.js"></script></body>`, {
+          headers: { "content-type": "text/html" },
+        });
+      }
+      if (pathname === "/slow.css") {
+        // Held until the test has looked at the preview.
+        await new Promise((resolve) => (releaseStyles = resolve));
+        return new Response("body { background: rgb(0, 0, 255); } p { color: white; }", {
+          headers: { "content-type": "text/css" },
+        });
+      }
+      return new Response(`<!doctype html><title>staged</title>
+        <link rel="stylesheet" href="/slow.css"><style>p { margin: 0 }</style>
+        <p>hello</p><script>document.title = "scripted";</script>`, { headers: { "content-type": "text/html" } });
+    },
+  });
+});
+afterAll(() => server?.stop(true));
+
+test("a preview is shown while stylesheets load, then the styled page, then scripts and load", async () => {
+  const browser = await createBrowser({ spareRenderer: false });
+  const { context } = browser;
+  const events = [];
+  context.onLifecycle((name) => events.push(name));
+  let frames = 0;
+  context.onFrame(() => frames++);
+  try {
+    await context.resize(320, 200, 1);
+    await context.navigate(`http://127.0.0.1:${server.port}/`);
+    // navigate returned at the first paint: the stylesheet is still pending.
+    expect(releaseStyles).toBeFunction();
+    expect(events).toEqual([]);
+    expect(context.lifecycleState()).toEqual([]);
+    expect(await context.evaluate("document.title")).toBe("staged");
+    expect(await context.evaluate("getComputedStyle(document.body).backgroundColor")).not.toBe("rgba(0, 0, 255, 1)");
+    const preview = await context.screenshot();
+
+    const framesBefore = frames;
+    releaseStyles();
+    const deadline = Date.now() + 10_000;
+    while (!events.includes("load") && Date.now() < deadline) await Bun.sleep(50);
+    expect(events).toEqual(["DOMContentLoaded", "load"]);
+    expect(context.lifecycleState()).toEqual(["DOMContentLoaded", "load"]);
+    expect(frames).toBeGreaterThan(framesBefore);
+    expect(await context.evaluate("getComputedStyle(document.body).backgroundColor")).toBe("rgba(0, 0, 255, 1)");
+    expect(await context.evaluate("document.title")).toBe("scripted");
+    expect(await context.screenshot()).not.toBe(preview);
+  } finally {
+    releaseStyles?.();
+    browser.close();
+  }
+}, 30_000);
+
+test("scrolling past the painted area repaints there even while scripts keep the page loading", async () => {
+  const browser = await createBrowser({ spareRenderer: false });
+  const { context } = browser;
+  try {
+    await context.resize(400, 300, 1);
+    const blank = await context.screenshot();
+    await context.navigate(`http://127.0.0.1:${server.port}/busy`);
+    expect(releaseScript).toBeFunction();
+    expect(context.lifecycleState()).not.toContain("load");
+    // Far below the first tile: the compositor shows background until the main thread paints there.
+    const { y } = await context.scroll(0, 6000);
+    expect(y).toBe(6000);
+    await Bun.sleep(1500);
+    const shot = await context.screenshot();
+    expect(shot).not.toBe(blank);
+    expect(shot.length).toBeGreaterThan(blank.length * 2);
+    expect(context.lifecycleState()).not.toContain("load");
+  } finally {
+    releaseScript?.();
+    browser.close();
+  }
+}, 30_000);