xbintsc 0.3.68 → 0.3.79

package/README.md

@@ -12,7 +12,7 @@ The design goals are:
 1. **Incremental compilation** — builds are content-addressed and skipped when nothing changed.
 2. **Well-factored modules** — lexer, parser, binder, codegen, driver, extensions each live in their own directory with their own tests.
 3. **Extensive tests** — per-module unit tests plus end-to-end tests that compile and run real binaries.
-4. **Pluggable extensions** — Node `fs`, Bun APIs, … are optional compile modules, not core code.
+4. **Pluggable extensions** — Node `fs`, the `gui` HTML/CSS renderer , … are optional compile modules, not core code.
 5. **Self-hosting** — the compiler compiles itself: `src/cli/main.ts` builds into a native `xbintsc` binary whose emitted LLVM IR is a fixpoint across generations. CI builds these binaries for every platform and a release attaches them.
 6. **Multi-platform** — macOS, Linux and Windows on x64 and arm64 (Apple Silicon / AArch64), validated by GitHub Actions on native runners.
 
@@ -231,6 +231,60 @@ const { ir } = compileString("console.log(1 + 1);");
 const result = build("program.ts", { emit: "exe", outDir: "build" });
 ```
 
+## GUI applications (HTML/CSS)
+
+xbintsc can also build **native desktop applications whose UI is HTML/CSS**. The
+optional `gui` extension links a self-hosted, GPU-accelerated HTML/CSS renderer
+(its own HTML parser, CSS cascade, layout and SDL_GPU compositor — no system
+WebView, no bundled browser) into the executable and exposes it as an importable
+module:
+
+```ts
+// app.ts
+import { createWindow, run } from "gui";
+// The .html asset loader AOT-compiles the document's scripts (see below)
+import page from "./page.html";
+
+const win = createWindow({ title: "Demo", width: 900, height: 600 });
+win.on("click", (e: any) => console.log(e.x, e.y, e.target));
+win.loadHTML(page);
+run();                          // main loop, until every window closes
+```
+
+```bash
+# Source checkout: build the engine archive once (fetches and builds SDL3,
+# FreeType and HarfBuzz), then run the bundled example
+npm run gui
+npx tsx src/cli/main.ts run examples/gui/hello.ts --ext gui
+
+# A prebuilt Linux/macOS release archive already ships the engine:
+xbintsc run app.ts --ext gui
+```
+
+A document's `<script>` bodies are **AOT-compiled** by xbintsc into the binary —
+inline scripts (a bare `<script>` is already treated as TypeScript) and external
+`<script src="./app.ts">` files alike — so there is still no JavaScript engine at
+runtime. Element handles, DOM mutation, events and the rest of the scripting
+surface are documented in [doc/gui-scripts.md](./doc/gui-scripts.md).
+
+In a project, list the extension in `xbintsc.config.json`
+(`"extensions": ["gui"]`) and the flag becomes unnecessary, exactly as for
+`node`. `XT_GUI_AUTOCLOSE_MS=<ms>` closes all windows after a delay, which is how
+the end-to-end tests run the examples headlessly.
+
+Two examples live in the repository: [`examples/gui/hello.ts`](./examples/gui/hello.ts)
+(an HTML/CSS window plus a reactive counter) and
+[`examples/gui/pelican-bike`](./examples/gui/pelican-bike), a playable 2D game
+whose document also opens unchanged in a browser.
+
+Platforms and full details: [doc/gui.md](./doc/gui.md) is the engine overview
+(architecture and roadmap); the per-function documents live under
+[doc/gui/](./doc/gui) — API, DOM/CSS, layout, rendering, media, input, animation,
+runtime, build and known issues. Linux and macOS are built and exercised in CI
+and their release archives ship the engine (`gui.a`); the Windows archive (`gui.lib`, D3D12) is
+produced by the same script but is still provisional and is not shipped in the
+release yet.
+
 ## Incremental compilation
 
 The driver keys each build on the entry source hash, compiler version, options,
@@ -240,9 +294,10 @@ sources are compiled once and cached on the same principle.
 
 ## Extensions
 
-An extension is a plain object (`src/extensions/registry.ts`). The `node`
-extension is itself split into one folder per Node module, each pairing its
-exports with the C sources that implement them:
+An extension is a plain object (`src/extensions/registry.ts`). Two are bundled:
+[`gui`](#gui-applications-htmlcss), a GPU HTML/CSS renderer
+(see [doc/gui.md](./doc/gui.md)), and `node`, itself split into one folder per
+Node module, each pairing its exports with the C sources that implement them:
 
 ```
 src/extensions/node/       runtime/ext_node/

package/README.zh-CN.md

@@ -11,7 +11,7 @@
 1. **增量编译** —— 构建以内容寻址，没有变化时直接跳过。
 2. **模块划分清晰** —— 词法、语法、绑定、代码生成、驱动、扩展各自独立目录，并有各自的测试。
 3. **测试充分** —— 每个模块单元测试，外加真正编译并运行二进制的端到端测试。
-4. **可插拔扩展** —— Node `fs`、Bun API 等是可选的编译模块，而非核心代码。
+4. **可插拔扩展** —— Node `fs`、`gui` HTML/CSS 渲染器 等是可选的编译模块，而非核心代码。
 5. **自举（self-hosting）** —— 编译器可编译自身：`src/cli/main.ts` 能构建为原生 `xbintsc` 二进制，其产出的 LLVM IR 跨代达到不动点。CI 会为各平台构建这些二进制，Release 则附上这些产物。
 6. **多平台** —— 在 x64 与 arm64（Apple Silicon / AArch64）上支持 macOS、Linux 与 Windows，并由 GitHub Actions 在各自架构的原生 runner 上验证。
 
@@ -183,6 +183,54 @@ const { ir } = compileString("console.log(1 + 1);");
 const result = build("program.ts", { emit: "exe", outDir: "build" });
 ```
 
+## GUI 应用（HTML/CSS）
+
+xbintsc 也能构建 **界面用 HTML/CSS 编写的原生桌面应用**。可选的 `gui` 扩展会把一个
+自研的、GPU 加速的 HTML/CSS 渲染器（自有 HTML 解析器、CSS 层叠、布局与 SDL_GPU
+合成器，不使用系统 WebView，也不内嵌浏览器）链接进可执行文件，并作为可 `import`
+的模块暴露出来：
+
+```ts
+// app.ts
+import { createWindow, run } from "gui";
+// .html 资产加载器会把文档里的脚本提前编译（见下文）
+import page from "./page.html";
+
+const win = createWindow({ title: "Demo", width: 900, height: 600 });
+win.on("click", (e: any) => console.log(e.x, e.y, e.target));
+win.loadHTML(page);
+run();                          // 主循环，直到所有窗口关闭
+```
+
+```bash
+# 源码检出：先构建一次引擎归档（会获取并构建 SDL3、FreeType 与 HarfBuzz），
+# 然后运行仓库自带示例
+npm run gui
+npx tsx src/cli/main.ts run examples/gui/hello.ts --ext gui
+
+# 预编译的 Linux/macOS 发布包已经内含该引擎：
+xbintsc run app.ts --ext gui
+```
+
+文档里的 `<script>` 脚本会被 xbintsc **提前编译（AOT）**进二进制——内联脚本
+（裸 `<script>` 本身就按 TypeScript 处理）与外部 `<script src="./app.ts">` 文件
+都是如此——因此运行时依然没有 JavaScript 引擎。元素句柄、DOM 变更、事件与脚本接口
+见 [doc/zh-CN/gui-scripts.md](./doc/zh-CN/gui-scripts.md)。
+
+在项目里把扩展写进 `xbintsc.config.json`（`"extensions": ["gui"]`）即可省去
+`--ext gui`，与 `node` 完全一样。设置 `XT_GUI_AUTOCLOSE_MS=<ms>` 可在指定毫秒后
+自动关闭所有窗口，端到端测试正是用它无头运行示例。
+
+仓库里有两个示例：[`examples/gui/hello.ts`](./examples/gui/hello.ts)（HTML/CSS 窗口
+加一个响应式计数器）与 [`examples/gui/pelican-bike`](./examples/gui/pelican-bike)
+——一个可玩的 2D 游戏，它的同一份文档在浏览器里也能直接打开。
+
+平台与完整说明：[doc/zh-CN/gui.md](./doc/zh-CN/gui.md) 是引擎总览（架构与
+路线图）；按功能拆分的文档位于 [doc/zh-CN/gui/](./doc/zh-CN/gui) —— API、
+DOM/CSS、布局、绘制、媒体、输入、动画、运行时、构建与已知问题。Linux 与 macOS 已在 CI 中构建
+并实际运行，其发布包内含引擎（`gui.a`）；Windows 的 `gui.lib`（D3D12）由同一脚本产出，但仍是
+暂定状态，尚未随发布包提供。
+
 ## 增量编译
 
 驱动以入口源码哈希、编译器版本、编译选项、平台与启用的扩展集合作为每次构建的
@@ -191,7 +239,9 @@ const result = build("program.ts", { emit: "exe", outDir: "build" });
 
 ## 扩展
 
-扩展是一个普通对象（`src/extensions/registry.ts`）。`node` 扩展本身按每个 Node
+扩展是一个普通对象（`src/extensions/registry.ts`）。内置扩展有两个：`gui`，
+它贡献的是一个 GPU HTML/CSS 渲染器（见下文「GUI 应用（HTML/CSS）」一节与
+[doc/zh-CN/gui.md](./doc/zh-CN/gui.md)）；以及 `node`，它本身按每个 Node
 模块拆分目录，每个模块把它对外导出的绑定与实现它们的 C 源配对：
 
 ```

package/dist/tests/e2e/gui-advanced.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * End-to-end tests for the `gui` extension — the layout/paint features added in
+ * this milestone: margin collapsing, flex wrapping, z-index, overflow clipping
+ * and floats.
+ */
+export {};

package/dist/tests/e2e/gui-advanced.test.js

@@ -0,0 +1,261 @@
+/**
+ * End-to-end tests for the `gui` extension — the layout/paint features added in
+ * this milestone: margin collapsing, flex wrapping, z-index, overflow clipping
+ * and floats.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+/** The shared `rect(selector)` helper embedded in each test program. */
+const RECT_HELPER = `
+  const rect = (selector) => {
+    const r = win.getBoundingClientRect(selector);
+    return r.x + "," + r.y + "," + r.width + "," + r.height;
+  };
+`;
+describe.skipIf(!guiAvailable)("gui extension — advanced layout/paint", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("collapses adjoining vertical margins between siblings", () => {
+        const { value } = harness.compileAndRun("margin", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        .a { height: 20px; margin-bottom: 30px; }
+        .b { height: 20px; margin-top: 10px; margin-bottom: 25px; }
+        .c { height: 20px; margin-top: 5px; margin-bottom: 30px; }
+        .d { height: 20px; margin-top: 15px; }
+      </style></head><body>
+        <div class="a" id="a"></div>
+        <div class="b" id="b"></div>
+        <div class="c" id="c"></div>
+        <div class="d" id="d"></div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "margin", width: 400, height: 300 });
+      win.on("ready", () => {
+        ${RECT_HELPER}
+        for (const id of ["a", "b", "c", "d"]) console.log(id + "=" + rect("#" + id));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // a ends at 20; collapse(30, 10) = 30, so b starts at 50 (not 60).
+        expect(value("a")).toBe("0,0,400,20");
+        expect(value("b")).toBe("0,50,400,20");
+        // b ends at 70; collapse(25, 5) = 25, so c starts at 95 (not 100).
+        expect(value("c")).toBe("0,95,400,20");
+        // c ends at 115; collapse(30, 15) = 30, so d starts at 145.
+        expect(value("d")).toBe("0,145,400,20");
+    });
+    it("counts a last child's bottom margin in the parent's height", () => {
+        const { value } = harness.compileAndRun("margin-parent", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #outer { padding-bottom: 0; }
+        #inner { height: 20px; margin-bottom: 25px; }
+        #after { height: 10px; }
+      </style></head><body>
+        <div id="outer"><div id="inner"></div></div>
+        <div id="after"></div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "margin-parent", width: 400, height: 300 });
+      win.on("ready", () => {
+        ${RECT_HELPER}
+        console.log("outer=" + rect("#outer"));
+        console.log("after=" + rect("#after"));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // The inner box ends at 20; its 25px bottom margin stays inside the outer
+        // (parent/child bottom-margin collapsing is not implemented), so the outer
+        // is 45 tall and #after starts at 45.
+        expect(value("outer")).toBe("0,0,400,45");
+        expect(value("after")).toBe("0,45,400,10");
+    });
+    it("wraps flex lines when they exceed the main size", () => {
+        const { value } = harness.compileAndRun("flex-wrap", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #row { display: flex; flex-wrap: wrap; width: 100px; }
+        #row div { width: 40px; height: 10px; }
+      </style></head><body>
+        <div id="row">
+          <div id="a"></div><div id="b"></div>
+          <div id="c"></div><div id="d"></div>
+        </div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "flex-wrap", width: 400, height: 300 });
+      win.on("ready", () => {
+        ${RECT_HELPER}
+        for (const id of ["a", "b", "c", "d"]) console.log(id + "=" + rect("#" + id));
+        console.log("row=" + rect("#row"));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // 40 + 40 fits on line 1; c and d wrap onto line 2.
+        expect(value("a")).toBe("0,0,40,10");
+        expect(value("b")).toBe("40,0,40,10");
+        expect(value("c")).toBe("0,10,40,10");
+        expect(value("d")).toBe("40,10,40,10");
+        // Two 10px lines make the container 20px tall.
+        expect(value("row")).toBe("0,0,100,20");
+    });
+    it("honours `flex-wrap: wrap-reverse`", () => {
+        const { value } = harness.compileAndRun("flex-wrap-reverse", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #row { display: flex; flex-wrap: wrap-reverse; align-content: flex-start; width: 100px; height: 40px; }
+        #row div { width: 40px; height: 10px; }
+      </style></head><body>
+        <div id="row">
+          <div id="a"></div><div id="b"></div>
+          <div id="c"></div><div id="d"></div>
+        </div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "wrap-reverse", width: 400, height: 300 });
+      win.on("ready", () => {
+        ${RECT_HELPER}
+        for (const id of ["a", "b", "c", "d"]) console.log(id + "=" + rect("#" + id));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // The cross axis is flipped: the first line (a, b) sits below the second.
+        expect(value("a")).toBe("0,30,40,10");
+        expect(value("b")).toBe("40,30,40,10");
+        expect(value("c")).toBe("0,20,40,10");
+        expect(value("d")).toBe("40,20,40,10");
+    });
+    it("paints `z-index` siblings in stacking order", () => {
+        const { stdout, value } = harness.compileAndRun("zindex", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        .box { position: absolute; top: 0; left: 0; width: 50px; height: 50px; }
+        #green { background: #00ff00; z-index: 2; }
+        #red { background: #ff0000; z-index: 1; }
+      </style></head><body>
+        <div class="box" id="green"></div>
+        <div class="box" id="red"></div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "zindex", width: 400, height: 300 });
+      win.on("ready", () => {
+        const list = win.paintList();
+        console.log("order-start");
+        console.log(list);
+        console.log("order-end");
+        console.log("red-before-green=" + (list.indexOf("#ff0000ff") < list.indexOf("#00ff00ff")));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("red-before-green")).toBe("true");
+        // The paint list still carries both backgrounds.
+        expect(stdout).toContain("#ff0000ff");
+        expect(stdout).toContain("#00ff00ff");
+    });
+    it("clips a subtree with `overflow: hidden`", () => {
+        const { value, stdout } = harness.compileAndRun("overflow", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #clip { width: 50px; height: 50px; overflow: hidden; }
+        #inner { width: 200px; height: 20px; background: #00ff00; }
+      </style></head><body>
+        <div id="clip"><div id="inner"></div></div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "overflow", width: 400, height: 300 });
+      win.on("ready", () => {
+        const r = win.getBoundingClientRect("#inner");
+        console.log("inner-rect=" + r.x + "," + r.y + "," + r.width + "," + r.height);
+        console.log("paint-list-start");
+        console.log(win.paintList());
+        console.log("paint-list-end");
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        const list = stdout.slice(stdout.indexOf("paint-list-start"), stdout.indexOf("paint-list-end"));
+        // Clipping does not change layout: the inner box is still 200px wide.
+        expect(value("inner-rect")).toBe("0,0,200,20");
+        // Its background is drawn inside the 50x50 padding-box clip.
+        expect(list).toContain("clip=0.0,0.0,50.0,50.0 rect x=0.0 y=0.0 w=200.0 h=20.0");
+    });
+    it("wraps inline content around a left float", () => {
+        const { value, stdout } = harness.compileAndRun("float", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #w { width: 100px; font-size: 20px; }
+        #f { float: left; width: 40px; height: 40px; background: #ff0000; }
+        #after { clear: both; height: 10px; }
+      </style></head><body>
+        <div id="w"><div id="f"></div>hello world foo bar baz<div id="after"></div></div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "float", width: 400, height: 300 });
+      win.on("ready", () => {
+        const f = win.getBoundingClientRect("#f");
+        console.log("float=" + f.x + "," + f.y + "," + f.width + "," + f.height);
+        const w = win.getBoundingClientRect("#w");
+        console.log("w-height=" + w.height);
+        console.log("paint-list-start");
+        console.log(win.paintList());
+        console.log("paint-list-end");
+        const a = win.getBoundingClientRect("#after");
+        console.log("after-y=" + a.y);
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // The float sits at the left edge and is 40x40.
+        expect(value("float")).toBe("0,0,40,40");
+        // The container grows to contain the float.
+        expect(Number(value("w-height"))).toBeGreaterThanOrEqual(40);
+        const list = stdout.slice(stdout.indexOf("paint-list-start"), stdout.indexOf("paint-list-end"));
+        // The first text line is pushed right of the float.
+        expect(list).toContain("text x=40.0");
+        // `clear: both` pushes the following block below the float.
+        expect(Number(value("after-y"))).toBeGreaterThanOrEqual(40);
+    });
+});
+//# sourceMappingURL=gui-advanced.test.js.map

package/dist/tests/e2e/gui-advanced.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-advanced.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-advanced.test.ts"],"names":[],"mappings":"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"}

package/dist/tests/e2e/gui-canvas.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * End-to-end tests for `<canvas>` support in the `gui` extension.
+ *
+ * A `<canvas>` is a replaced element laid out like an `<img>`, but its pixels
+ * come from a CPU rasteriser instead of a decoder. The script draws through the
+ * 2D context and the engine turns the bitmap into a GPU texture through the same
+ * image path as `media_id`/`src` (see `renderer_image.cpp`).
+ */
+export {};