@gtkx/vitest 0.10.4 → 0.11.0

package/README.md

@@ -0,0 +1,103 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/main/logo.svg" alt="GTKX" width="60" height="60">
+</p>
+
+<h1 align="center">GTKX</h1>
+
+<p align="center">
+  <strong>Build native GTK4 desktop applications with React and TypeScript.</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@gtkx/react"><img src="https://img.shields.io/npm/v/@gtkx/react.svg" alt="npm version"></a>
+  <a href="https://github.com/eugeniodepalo/gtkx/actions"><img src="https://img.shields.io/github/actions/workflow/status/eugeniodepalo/gtkx/ci.yml" alt="CI"></a>
+  <a href="https://github.com/eugeniodepalo/gtkx/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MPL--2.0-blue.svg" alt="License"></a>
+  <a href="https://github.com/eugeniodepalo/gtkx/discussions"><img src="https://img.shields.io/badge/discussions-GitHub-blue" alt="GitHub Discussions"></a>
+</p>
+
+---
+
+GTKX lets you write Linux desktop applications using React. Your components render as native GTK4 widgets through a Rust FFI bridge—no webviews, no Electron, just native performance with the developer experience you already know.
+
+## Quick Start
+
+```bash
+npx @gtkx/cli create my-app
+cd my-app
+npm run dev
+```
+
+## Example
+
+```tsx
+import {
+  GtkApplicationWindow,
+  GtkBox,
+  GtkButton,
+  GtkLabel,
+  quit,
+  render,
+} from "@gtkx/react";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { useState } from "react";
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <GtkApplicationWindow
+      title="Counter"
+      defaultWidth={300}
+      defaultHeight={200}
+      onCloseRequest={quit}
+    >
+      <GtkBox
+        orientation={Gtk.Orientation.VERTICAL}
+        spacing={20}
+        valign={Gtk.Align.CENTER}
+      >
+        <GtkLabel label={`Count: ${count}`} cssClasses={["title-1"]} />
+        <GtkButton label="Increment" onClicked={() => setCount((c) => c + 1)} />
+      </GtkBox>
+    </GtkApplicationWindow>
+  );
+};
+
+render(<App />, "com.example.counter");
+```
+
+## Features
+
+- **React 19** — Hooks, concurrent features, and the component model you know
+- **Native GTK4 widgets** — Real native controls, not web components in a webview
+- **Adwaita support** — Modern GNOME styling with Libadwaita components
+- **Hot Module Replacement** — Fast refresh during development
+- **TypeScript first** — Full type safety with auto-generated bindings
+- **CSS-in-JS styling** — Familiar styling patterns adapted for GTK
+- **Testing utilities** — Component testing similar to Testing Library
+
+## Examples
+
+Explore complete applications in the [`examples/`](./examples) directory:
+
+- **[gtk-demo](./examples/gtk-demo)** — Full replica of the official GTK demo app
+- **[hello-world](./examples/hello-world)** — Minimal application showing a counter
+- **[todo](./examples/todo)** — Full-featured todo application with Adwaita styling and testing
+- **[deploying](./examples/deploying)** — Example of packaging and distributing a GTKX app
+
+## Documentation
+
+Visit [https://eugeniodepalo.github.io/gtkx](https://eugeniodepalo.github.io/gtkx/) for the full documentation.
+
+## Contributing
+
+Contributions are welcome! Please see the [contributing guidelines](./CONTRIBUTING.md) and check out the [good first issues](https://github.com/eugeniodepalo/gtkx/labels/good%20first%20issue).
+
+## Community
+
+- [GitHub Discussions](https://github.com/eugeniodepalo/gtkx/discussions) — Questions, ideas, and general discussion
+- [Issue Tracker](https://github.com/eugeniodepalo/gtkx/issues) — Bug reports and feature requests
+
+## License
+
+[MPL-2.0](./LICENSE)

package/dist/index.d.ts

@@ -1,2 +1 @@
-export type { GtkxOptions } from "./plugin.js";
 export { default } from "./plugin.js";

package/dist/plugin.d.ts

@@ -1,34 +1,3 @@
 import type { Plugin } from "vitest/config";
-export interface GtkxOptions {
-    /**
-     * Additional setup files to run after the GTKX worker setup.
-     * These files will be loaded after the display is configured.
-     */
-    setupFiles?: string[];
-}
-/**
- * Vitest plugin for GTKX applications.
- *
- * This plugin configures Vitest to run GTK tests with proper display isolation:
- * - Starts Xvfb instances for headless display (one per worker)
- * - Sets GTK environment variables automatically
- * - Configures test pool for process isolation
- *
- * When using `@gtkx/testing`, no additional setup is needed - the `render()`
- * function handles GTK application lifecycle automatically.
- *
- * @example
- * ```typescript
- * // vitest.config.ts
- * import gtkx from "@gtkx/vitest";
- *
- * export default defineConfig({
- *     plugins: [gtkx()],
- *     test: {
- *         include: ["tests/**\/*.test.{ts,tsx}"],
- *     },
- * });
- * ```
- */
-declare const gtkx: (options?: GtkxOptions) => Plugin;
+declare const gtkx: () => Plugin;
 export default gtkx;

package/dist/plugin.js

@@ -1,62 +1,121 @@
-import { createHash } from "node:crypto";
-import { tmpdir } from "node:os";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const getStateDir = (projectRoot) => {
-    const hash = createHash("md5").update(projectRoot).digest("hex").slice(0, 8);
-    return join(tmpdir(), `gtkx-vitest-${hash}`);
+import { spawn } from "node:child_process";
+import { existsSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { availableParallelism, tmpdir } from "node:os";
+import { join } from "node:path";
+const getStateDir = () => join(tmpdir(), `gtkx-vitest-${process.pid}`);
+const getBaseDisplay = () => {
+    const slot = process.pid % 500;
+    return 50 + slot * 10;
 };
-/**
- * Vitest plugin for GTKX applications.
- *
- * This plugin configures Vitest to run GTK tests with proper display isolation:
- * - Starts Xvfb instances for headless display (one per worker)
- * - Sets GTK environment variables automatically
- * - Configures test pool for process isolation
- *
- * When using `@gtkx/testing`, no additional setup is needed - the `render()`
- * function handles GTK application lifecycle automatically.
- *
- * @example
- * ```typescript
- * // vitest.config.ts
- * import gtkx from "@gtkx/vitest";
- *
- * export default defineConfig({
- *     plugins: [gtkx()],
- *     test: {
- *         include: ["tests/**\/*.test.{ts,tsx}"],
- *     },
- * });
- * ```
- */
-const gtkx = (options) => {
-    const workerSetupPath = join(__dirname, "worker-setup.js");
-    const globalSetupPath = join(__dirname, "global-setup.js");
-    const userSetupFiles = options?.setupFiles ?? [];
+const waitForDisplay = (display, timeout = 5000) => new Promise((resolve) => {
+    const start = Date.now();
+    const check = () => {
+        const lockFile = `/tmp/.X${display}-lock`;
+        if (existsSync(lockFile)) {
+            resolve(true);
+            return;
+        }
+        if (Date.now() - start > timeout) {
+            resolve(false);
+            return;
+        }
+        setTimeout(check, 50);
+    };
+    check();
+});
+const startXvfb = async (display) => {
+    const xvfb = spawn("Xvfb", [`:${display}`, "-screen", "0", "1024x768x24"], {
+        stdio: "ignore",
+        detached: true,
+    });
+    xvfb.unref();
+    const ready = await waitForDisplay(display);
+    if (!ready) {
+        xvfb.kill();
+        return null;
+    }
+    return xvfb;
+};
+const gtkx = () => {
+    const workerSetupPath = join(import.meta.dirname, "setup.js");
+    const stateDir = getStateDir();
+    const xvfbProcesses = [];
+    let handlersRegistered = false;
+    let tornDown = false;
+    const setup = async (vitest) => {
+        const configuredWorkers = vitest.config.maxWorkers;
+        const maxWorkers = typeof configuredWorkers === "number" ? configuredWorkers : availableParallelism();
+        if (existsSync(stateDir)) {
+            rmSync(stateDir, { recursive: true, force: true });
+        }
+        mkdirSync(stateDir, { recursive: true });
+        const baseDisplay = getBaseDisplay();
+        const displays = [];
+        const results = await Promise.all(Array.from({ length: maxWorkers }, (_, i) => startXvfb(baseDisplay + i)));
+        for (let i = 0; i < results.length; i++) {
+            const xvfb = results[i];
+            if (xvfb) {
+                xvfbProcesses.push(xvfb);
+                displays.push(baseDisplay + i);
+            }
+        }
+        if (displays.length === 0) {
+            throw new Error("Failed to start any Xvfb instances");
+        }
+        for (const display of displays) {
+            writeFileSync(join(stateDir, `display-${display}.available`), "");
+        }
+    };
+    const teardown = () => {
+        if (tornDown) {
+            return;
+        }
+        tornDown = true;
+        for (const xvfb of xvfbProcesses) {
+            try {
+                xvfb.kill("SIGTERM");
+            }
+            catch { }
+        }
+        if (existsSync(stateDir)) {
+            rmSync(stateDir, { recursive: true, force: true });
+        }
+    };
+    const reporter = {
+        onInit() {
+            if (handlersRegistered) {
+                return;
+            }
+            handlersRegistered = true;
+            process.on("exit", teardown);
+            process.on("SIGTERM", teardown);
+            process.on("SIGINT", teardown);
+        },
+        async onTestRunStart(specifications) {
+            const firstSpec = specifications[0];
+            if (firstSpec && xvfbProcesses.length === 0) {
+                await setup(firstSpec.project.vitest);
+            }
+        },
+        onTestRunEnd() {
+            teardown();
+        },
+    };
     return {
         name: "gtkx",
         config(config) {
-            const existingGlobalSetup = config.test?.globalSetup ?? [];
-            const projectRoot = config.root ?? process.cwd();
-            const stateDir = getStateDir(projectRoot);
+            const setupFiles = config.test?.setupFiles ?? [];
             process.env.GTKX_STATE_DIR = stateDir;
             return {
                 test: {
-                    globalSetup: [
-                        ...(Array.isArray(existingGlobalSetup) ? existingGlobalSetup : [existingGlobalSetup]),
-                        globalSetupPath,
-                    ],
-                    setupFiles: [workerSetupPath, ...userSetupFiles],
+                    setupFiles: [workerSetupPath, ...(Array.isArray(setupFiles) ? setupFiles : [setupFiles])],
                     pool: "forks",
-                    maxWorkers: 1,
-                },
-                esbuild: {
-                    jsx: "automatic",
                 },
             };
         },
+        configureVitest({ vitest }) {
+            vitest.config.reporters.push(reporter);
+        },
     };
 };
 export default gtkx;

package/dist/{worker-setup.js → setup.js}

@@ -1,4 +1,3 @@
-import { execSync } from "node:child_process";
 import { existsSync, readdirSync, renameSync } from "node:fs";
 import { join } from "node:path";
 const GTKX_STATE_DIR = process.env.GTKX_STATE_DIR;
@@ -7,8 +6,9 @@ const CLAIM_RETRY_DELAY_MS = 100;
 if (!GTKX_STATE_DIR) {
     throw new Error("GTKX_STATE_DIR not set - gtkx plugin must be used");
 }
+const sleepBuffer = new Int32Array(new SharedArrayBuffer(4));
 const sleepSync = (ms) => {
-    execSync(`sleep ${ms / 1000}`, { stdio: "ignore" });
+    Atomics.wait(sleepBuffer, 0, 0, ms);
 };
 const tryClaimDisplay = () => {
     if (!existsSync(GTKX_STATE_DIR)) {
@@ -45,21 +45,23 @@ const releaseDisplay = (display) => {
     }
     catch { }
 };
-process.env.GDK_BACKEND = "x11";
-process.env.GSK_RENDERER = "cairo";
-process.env.LIBGL_ALWAYS_SOFTWARE = "1";
-process.env.NO_AT_BRIDGE = "1";
 const display = claimDisplay();
 if (display === null) {
-    throw new Error("Failed to claim display - globalSetup may not have run");
+    throw new Error("Failed to claim display - ensure gtkx plugin is configured");
 }
+process.env.GDK_BACKEND = "x11";
+process.env.GSK_RENDERER = "cairo";
+process.env.LIBGL_ALWAYS_SOFTWARE = "1";
 process.env.DISPLAY = `:${display}`;
-process.on("exit", () => releaseDisplay(display));
-process.on("SIGTERM", () => {
+const cleanup = () => {
     releaseDisplay(display);
-    process.exit(0);
+};
+process.on("exit", cleanup);
+process.on("SIGTERM", () => {
+    cleanup();
+    process.exit(143);
 });
 process.on("SIGINT", () => {
-    releaseDisplay(display);
-    process.exit(0);
+    cleanup();
+    process.exit(130);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/vitest",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "description": "Vitest plugin for GTKX applications with Xvfb display isolation",
   "keywords": [
     "gtk",
@@ -32,12 +32,12 @@
     "dist"
   ],
   "devDependencies": {
-    "vitest": "^4.0.0"
+    "vitest": "^4.0.16"
   },
   "peerDependencies": {
-    "vitest": ">=2.0.0"
+    "vitest": ">=4"
   },
   "scripts": {
-    "build": "tsc -b"
+    "build": "tsc -b && cp ../../README.md ."
   }
 }

package/dist/global-setup.d.ts

@@ -1,3 +0,0 @@
-import type { TestProject } from "vitest/node";
-export declare const setup: (project: TestProject) => Promise<void>;
-export declare const teardown: () => Promise<void>;

package/dist/global-setup.js

@@ -1,89 +0,0 @@
-import { spawn } from "node:child_process";
-import { existsSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
-const getBaseDisplay = () => {
-    const pid = process.pid;
-    const slot = pid % 500;
-    return 50 + slot * 10;
-};
-const xvfbProcesses = [];
-let currentStateDir = null;
-const waitForDisplay = (display, timeout = 5000) => {
-    return new Promise((resolve) => {
-        const start = Date.now();
-        const check = () => {
-            const lockFile = `/tmp/.X${display}-lock`;
-            if (existsSync(lockFile)) {
-                resolve(true);
-                return;
-            }
-            if (Date.now() - start > timeout) {
-                resolve(false);
-                return;
-            }
-            setTimeout(check, 50);
-        };
-        check();
-    });
-};
-const startXvfb = async (display) => {
-    const xvfb = spawn("Xvfb", [`:${display}`, "-screen", "0", "1024x768x24"], {
-        stdio: "ignore",
-        detached: true,
-    });
-    xvfb.unref();
-    const ready = await waitForDisplay(display);
-    if (!ready) {
-        xvfb.kill();
-        return null;
-    }
-    return xvfb;
-};
-export const setup = async (project) => {
-    const config = project.config;
-    const maxWorkers = typeof config.maxWorkers === "number"
-        ? config.maxWorkers
-        : typeof config.maxWorkers === "string"
-            ? Number.parseInt(config.maxWorkers, 10)
-            : 4;
-    const stateDir = process.env.GTKX_STATE_DIR;
-    if (!stateDir) {
-        throw new Error("Expected GTKX_STATE_DIR environment variable to be set");
-    }
-    currentStateDir = stateDir;
-    if (existsSync(stateDir)) {
-        rmSync(stateDir, { recursive: true });
-    }
-    mkdirSync(stateDir, { recursive: true });
-    const baseDisplay = getBaseDisplay();
-    const displays = [];
-    const pids = [];
-    for (let i = 0; i < maxWorkers; i++) {
-        const display = baseDisplay + i;
-        const xvfb = await startXvfb(display);
-        if (xvfb) {
-            xvfbProcesses.push(xvfb);
-            displays.push(display);
-            pids.push(xvfb.pid ?? 0);
-        }
-    }
-    if (displays.length === 0) {
-        throw new Error("Failed to start any Xvfb instances");
-    }
-    const state = { displays, pids };
-    writeFileSync(join(stateDir, "state.json"), JSON.stringify(state));
-    for (const display of displays) {
-        writeFileSync(join(stateDir, `display-${display}.available`), "");
-    }
-};
-export const teardown = async () => {
-    for (const xvfb of xvfbProcesses) {
-        try {
-            xvfb.kill("SIGTERM");
-        }
-        catch { }
-    }
-    if (currentStateDir && existsSync(currentStateDir)) {
-        rmSync(currentStateDir, { recursive: true });
-    }
-};