@gtkx/native 0.21.0 → 1.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,70 +1,173 @@
1
1
  <p align="center">
2
- <img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/main/logo.svg" alt="GTKX" width="100" height="100">
2
+ <img src="https://raw.githubusercontent.com/gtkx-org/gtkx/main/logo.svg" alt="GTKX" width="100" />
3
3
  </p>
4
4
 
5
5
  <h1 align="center">GTKX</h1>
6
6
 
7
7
  <p align="center">
8
- <strong>Linux application development for the modern age powered by GTK4 and React</strong>
8
+ The React framework for Linux.<br />
9
+ Build GTK4 and Adwaita apps in TypeScript, with React components and hooks driving GNOME's own widgets. What you ship is a GNOME app.
9
10
  </p>
10
11
 
11
12
  <p align="center">
12
- <a href="https://www.npmjs.com/package/@gtkx/react"><img src="https://img.shields.io/npm/v/@gtkx/react.svg" alt="npm version"></a>
13
- <a href="https://github.com/gtkx-org/gtkx/actions"><img src="https://img.shields.io/github/actions/workflow/status/eugeniodepalo/gtkx/ci.yml" alt="CI"></a>
14
- <a href="https://github.com/gtkx-org/gtkx/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MPL--2.0-blue.svg" alt="License"></a>
15
- <a href="https://github.com/gtkx-org/gtkx/discussions"><img src="https://img.shields.io/badge/discussions-GitHub-blue" alt="GitHub Discussions"></a>
13
+ <a href="https://www.npmjs.com/package/create-gtkx"><img src="https://img.shields.io/npm/v/create-gtkx?color=cb3837&logo=npm&label=create-gtkx" alt="npm version" /></a>
14
+ <a href="https://www.npmjs.com/package/create-gtkx"><img src="https://img.shields.io/npm/dm/create-gtkx?color=cb3837&logo=npm&label=downloads" alt="npm downloads" /></a>
15
+ <img src="https://img.shields.io/badge/node-%E2%89%A524-339933?logo=node.js&logoColor=white" alt="Node >= 24" />
16
+ <a href="https://github.com/gtkx-org/gtkx/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MPL--2.0-blue.svg" alt="License: MPL-2.0" /></a>
17
+ <a href="https://github.com/gtkx-org/gtkx/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/gtkx-org/gtkx/ci.yml?branch=main&logo=github&label=CI" alt="CI status" /></a>
18
+ <img src="https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript&logoColor=white" alt="TypeScript" />
19
+ </p>
20
+
21
+ <p align="center">
22
+ <a href="https://gtkx.dev">Homepage</a> &middot;
23
+ <a href="https://gtkx.dev/guide/why-gtkx">Documentation</a> &middot;
24
+ <a href="https://github.com/gtkx-org/gtkx/tree/main/examples">Examples</a> &middot;
25
+ <a href="https://github.com/gtkx-org/gtkx/blob/main/CONTRIBUTING.md">Contributing</a>
16
26
  </p>
17
27
 
18
28
  ---
19
29
 
30
+ GTKX generates fully typed bindings for the entire GTK4 and Adwaita surface directly from GObject-Introspection. On top of those bindings you get the React programming model: components and hooks driving GObject instances, with Fast Refresh while you develop.
31
+
20
32
  <p align="center">
21
- <img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/main/demo.gif" alt="GTKX Demo" width="100%">
33
+ <img src="https://raw.githubusercontent.com/gtkx-org/gtkx/main/examples/tutorial/assets/screenshot.png" alt="The Tasks app: an Adwaita window with a sidebar of smart views and colored lists on the left, and a boxed task list on the right." />
22
34
  </p>
23
35
 
24
- ---
36
+ <p align="center">
37
+ <em>The Tasks app you build in the <a href="https://gtkx.dev/tutorial/">tutorial</a>.</em>
38
+ </p>
39
+
40
+ ## Demo
41
+
42
+ The intrinsic elements in this snippet render GTK4 widgets, and ordinary React hooks and events drive them:
43
+
44
+ ```tsx
45
+ import * as Gtk from "@gtkx/gi/gtk";
46
+ import { GtkApplication, GtkApplicationWindow, GtkBox, GtkButton, GtkLabel } from "@gtkx/jsx/gtk";
47
+ import { createRoot, quit } from "@gtkx/react";
48
+ import { useState } from "react";
49
+
50
+ const Counter = () => {
51
+ const [count, setCount] = useState(0);
52
+
53
+ return (
54
+ <GtkApplicationWindow
55
+ title="Hello GTKX"
56
+ defaultWidth={400}
57
+ defaultHeight={300}
58
+ onCloseRequest={quit}
59
+ >
60
+ <GtkBox
61
+ orientation={Gtk.Orientation.VERTICAL}
62
+ spacing={20}
63
+ marginTop={40}
64
+ marginBottom={40}
65
+ marginStart={40}
66
+ marginEnd={40}
67
+ valign={Gtk.Align.CENTER}
68
+ halign={Gtk.Align.CENTER}
69
+ >
70
+ <GtkLabel cssClasses={["title-1"]}>Welcome to GTKX!</GtkLabel>
71
+ <GtkLabel cssClasses={["title-2"]}>{`Count: ${count}`}</GtkLabel>
72
+ <GtkButton
73
+ label="Increment"
74
+ onClicked={() => setCount((c) => c + 1)}
75
+ cssClasses={["suggested-action", "pill"]}
76
+ />
77
+ </GtkBox>
78
+ </GtkApplicationWindow>
79
+ );
80
+ };
81
+
82
+ const App = () => (
83
+ <GtkApplication>
84
+ <Counter />
85
+ </GtkApplication>
86
+ );
87
+
88
+ createRoot().render(<App />);
89
+ ```
90
+
91
+ This is the [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world) example, with `app.tsx` and `index.tsx` combined into a single snippet. `@gtkx/gi` and `@gtkx/jsx` are per-project bindings generated by the CLI, not packages you install from npm.
92
+
93
+ ## Why GTKX
94
+
95
+ ### A declarative layer for the GNOME stack
96
+
97
+ GTK4 is mature, and GtkBuilder XML can lay out a static interface, but nothing re-renders that interface when your application state changes, and nothing hot-reloads it as you work. GTKX adds that missing layer, and the tooling around it, on top of the stack you already know:
98
+
99
+ - a React reconciler that exposes every GObject as a JSX element,
100
+ - a CLI for scaffolding, development, and production builds,
101
+ - a dev server with Fast Refresh that patches your running UI in place,
102
+ - CSS-in-JS styling and high-level list, grid, and dialog components,
103
+ - a Testing Library-style API for querying and driving your widgets in tests,
104
+ - and a Model Context Protocol (MCP) server that exposes your live app to AI agents.
105
+
106
+ ### The full GNOME API surface
107
+
108
+ React Native and similar frameworks hide the native toolkit so one API can run everywhere. GTKX exposes it: GTK4, Adwaita, and any other GObject-Introspection library on your system. Linux-only by design.
109
+
110
+ ### Why Node.js, and why generated bindings
111
+
112
+ GTKX runs on Node.js, which puts native modules, the npm ecosystem, and the tooling built for Node.js APIs within reach. GJS is GNOME's own runtime, built on SpiderMonkey rather than V8; node-gtk runs on Node.js but is lightly maintained, on the older nan/V8 ABI rather than N-API, and still centered on GTK3. The [why-gtkx guide](https://gtkx.dev/guide/why-gtkx) covers the comparison in full.
25
113
 
26
- GTKX is a modern framework for building native Linux applications using React and GTK. It provides the full range of GTK4, GLib, and Node.js APIs, allowing you to create rich, performant desktop applications with the tools and libraries you already know.
114
+ GTKX generates the TypeScript types and the native FFI calls from the same GObject-Introspection data, so the types cannot drift from the calls they back. Codegen covers the whole GTK4 and Adwaita surface.
27
115
 
28
- ## Features
116
+ At runtime, the native Rust core calls straight into the system GTK4, Adwaita, and GLib libraries through libffi, without loading libgirepository at all.
29
117
 
30
- - **React 19** — Hooks, concurrent features, and the component model you know
31
- - **Fully native Node.js environment** - Runs on vanilla Node.js, with the help of a Neon native module
32
- - **TypeScript first** — Full type safety with auto-generated bindings
33
- - **Rich GLib support** — Provides bindings for most modern GLib/GObject libraries, including Adwaita
34
- - **HMR** — Fast refresh during development powered by Vite
35
- - **CSS-in-JS styling** — Easy styling with GTK CSS powered by Emotion
36
- - **Testing library** — Testing Library-inspired API for testing components and E2E
118
+ ## Quick start
37
119
 
38
- ## Quick Start
120
+ GTKX is Linux-only and needs Node.js 24 or later. See [Requirements](#requirements).
39
121
 
40
- ```bash
41
- npx @gtkx/cli create my-app
122
+ Scaffold a new app with the `create-gtkx` initializer:
123
+
124
+ ```sh
125
+ npm create gtkx@rc
126
+ ```
127
+
128
+ The same command works with other package managers: `pnpm create gtkx@rc` or `yarn create gtkx@rc`.
129
+
130
+ Then run your new app:
131
+
132
+ ```sh
42
133
  cd my-app
43
134
  npm run dev
44
135
  ```
45
136
 
46
- ## Examples
137
+ To go further, follow the [tutorial](https://gtkx.dev/tutorial/).
47
138
 
48
- Explore complete applications in the [`examples/`](./examples) directory:
139
+ ## Documentation
49
140
 
50
- - **[hello-world](./examples/hello-world)** Minimal application showing a counter
51
- - **[gtk-demo](./examples/gtk-demo)** — Full replica of the official GTK demo app
52
- - **[tutorial](./examples/tutorial)** — Notes app from the tutorial with GSettings and Adwaita
53
- - **[browser](./examples/browser)** — Simple browser using WebKitWebView
141
+ The documentation at **[gtkx.dev](https://gtkx.dev)** includes a step-by-step tutorial that builds a complete GNOME app, from scaffolding to packaging and shipping, plus guides and a full API reference.
54
142
 
55
- ## Documentation
143
+ **[Read the docs &rarr;](https://gtkx.dev/guide/why-gtkx)**
56
144
 
57
- Visit [https://gtkx.dev](https://gtkx.dev) for the full documentation.
145
+ ## Requirements
58
146
 
59
- ## Contributing
147
+ GTKX is Linux-only. You need:
60
148
 
61
- Contributions are welcome! Please see the [contributing guidelines](./CONTRIBUTING.md).
149
+ - Linux with the GTK4 (4.20 or later), Adwaita (1.8 or later), and GLib development libraries
150
+ - Node.js 24 or later
62
151
 
63
- ## Community
152
+ The `@gtkx/native` addon ships prebuilt for x64 and arm64 glibc Linux; other targets need to build it from the GTKX repository, which requires a Rust toolchain.
153
+
154
+ ## Examples
155
+
156
+ Explore the [example apps](https://github.com/gtkx-org/gtkx/tree/main/examples):
157
+
158
+ - [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world): the counter above.
159
+ - [`gtk-demo`](https://github.com/gtkx-org/gtkx/tree/main/examples/gtk-demo): a React port of the official GTK4 widget showcase, covering lists, dialogs, gestures, CSS, and OpenGL.
160
+ - [`browser`](https://github.com/gtkx-org/gtkx/tree/main/examples/browser): a WebKitWebView-based web browser.
161
+ - [`tutorial`](https://github.com/gtkx-org/gtkx/tree/main/examples/tutorial): the Tasks app the documentation builds.
162
+
163
+ ## Status
164
+
165
+ GTKX 1.0 is at the release candidate stage.
166
+
167
+ ## Contributing
64
168
 
65
- - [GitHub Discussions](https://github.com/gtkx-org/gtkx/discussions) Questions, ideas, and general discussion
66
- - [Issue Tracker](https://github.com/gtkx-org/gtkx/issues) — Bug reports and feature requests
169
+ Contributions are welcome. See [CONTRIBUTING.md](https://github.com/gtkx-org/gtkx/blob/main/CONTRIBUTING.md), the [Code of Conduct](https://github.com/gtkx-org/gtkx/blob/main/CODE_OF_CONDUCT.md), and the [security policy](https://github.com/gtkx-org/gtkx/blob/main/SECURITY.md). Building the repo needs Node.js 24 or later, pnpm, and a Rust toolchain.
67
170
 
68
171
  ## License
69
172
 
70
- [MPL-2.0](./LICENSE)
173
+ GTKX is licensed under [MPL-2.0](https://github.com/gtkx-org/gtkx/blob/main/LICENSE).
package/index.d.ts ADDED
@@ -0,0 +1,190 @@
1
+ /* auto-generated by NAPI-RS */
2
+ /* eslint-disable */
3
+
4
+ export declare class ExternalObject<T> {
5
+ readonly '': {
6
+ readonly '': unique symbol
7
+ [K: symbol]: T
8
+ }
9
+ }
10
+ /**
11
+ * Allocates a zero-filled native memory block of `size` bytes and returns an opaque handle to it.
12
+ * The optional `gtype` must be a registered boxed `GType` and selects `g_boxed_free` as the
13
+ * handle's destructor instead of `g_free`.
14
+ */
15
+ export declare function alloc(size: number, gtype?: bigint | undefined | null): ExternalObject<Handle>
16
+
17
+ /**
18
+ * Container layout used to marshal an array: a plain C `array`, a `glist`, `gslist`, `gptrarray`,
19
+ * `garray`, `gbytearray`, a `sized` buffer, or a `fixed`-length buffer.
20
+ */
21
+ export type ArrayKind = 'array'|
22
+ 'glist'|
23
+ 'gslist'|
24
+ 'gptrarray'|
25
+ 'garray'|
26
+ 'gbytearray'|
27
+ 'sized'|
28
+ 'fixed';
29
+
30
+ /**
31
+ * Resolves `symbolName` in `sharedLibrary` and precompiles its argument and return marshalling
32
+ * into a reusable call descriptor that `call` can invoke.
33
+ */
34
+ export declare function bind(sharedLibrary: string, symbolName: string, argDescriptors: Array<Descriptor>, returnDescriptor: Descriptor): ExternalObject<CallDescriptor>
35
+
36
+ /**
37
+ * Invokes a previously bound native function, encoding `values` and decoding the return value
38
+ * according to the call descriptor. Out and inout ('ref') arguments are written back in place.
39
+ */
40
+ export declare function call(descriptor: ExternalObject<CallDescriptor>, values: unknown[]): unknown
41
+
42
+ /**
43
+ * Lifetime of a marshalled callback closure: `call` lasts only for the duration of the call,
44
+ * `notified` is freed by a destroy notify, `async` spans a single async use, `forever` is never freed.
45
+ */
46
+ export type CallbackScope = 'call'|
47
+ 'notified'|
48
+ 'async'|
49
+ 'forever';
50
+
51
+ /** Copies `size` bytes from the `src` handle's memory into the `dest` handle's memory. */
52
+ export declare function copy(dest: ExternalObject<Handle>, src: ExternalObject<Handle>, size: number): unknown
53
+
54
+ /**
55
+ * Describes how a single native value (a function argument, a return value, or a struct field)
56
+ * is marshalled between JavaScript and C. The `kind` field selects the variant.
57
+ */
58
+ export type Descriptor =
59
+ | { kind: 'int8' }
60
+ | { kind: 'uint8' }
61
+ | { kind: 'int16' }
62
+ | { kind: 'uint16' }
63
+ | { kind: 'int32' }
64
+ | { kind: 'uint32' }
65
+ | { kind: 'int64' }
66
+ | { kind: 'uint64' }
67
+ | { kind: 'bigint64' }
68
+ | { kind: 'biguint64' }
69
+ | { kind: 'float32' }
70
+ | { kind: 'float64' }
71
+ | { kind: 'enum', sharedLibrary: string, getTypeFnName: string, signed: boolean }
72
+ | { kind: 'flags', sharedLibrary: string, getTypeFnName: string, signed: boolean }
73
+ | { kind: 'boolean' }
74
+ | { kind: 'string', ownership: Ownership, length?: number }
75
+ | { kind: 'object', ownership: Ownership }
76
+ | { kind: 'unichar' }
77
+ | { kind: 'void' }
78
+ | { kind: 'buffer' }
79
+ | { kind: 'boxed', ownership: Ownership, typeName: string, sharedLibrary?: string, getTypeFnName?: string, freeFnName?: string, callerAllocated?: boolean, size?: number, inline?: boolean }
80
+ | { kind: 'struct', ownership: Ownership, size?: number, callerAllocated?: boolean, inline?: boolean }
81
+ | { kind: 'fundamental', ownership: Ownership, sharedLibrary: string, refFnName: string, unrefFnName: string, typeName?: string, inline?: boolean }
82
+ | { kind: 'array', itemDescriptor: Descriptor, arrayKind: ArrayKind, ownership: Ownership, sizeParamIndex?: number, fixedSize?: number, elementSize?: number }
83
+ | { kind: 'hashtable', keyDescriptor: Descriptor, valueDescriptor: Descriptor, ownership: Ownership }
84
+ | { kind: 'callback', argDescriptors: Array<Descriptor>, returnDescriptor: Descriptor, hasDestroy?: boolean, userDataIndex?: number, scope?: CallbackScope }
85
+ | { kind: 'ref', innerDescriptor: Descriptor, inout?: boolean }
86
+
87
+ /** Returns the `GType` of the `GObject` referenced by `handle`, or 0 when the pointer is null. */
88
+ export declare function getType(handle: ExternalObject<Handle>): bigint
89
+
90
+ /**
91
+ * Returns the JavaScript wrapper object previously attached to the handle's `GObject`,
92
+ * or null when no wrapper is set.
93
+ */
94
+ export declare function getWrapper(handle: ExternalObject<Handle>): object | null
95
+
96
+ /**
97
+ * Installs the Node environment and the `GLib` main-loop integration on the current thread.
98
+ * Call once before any other native function.
99
+ */
100
+ export declare function init(): void
101
+
102
+ /**
103
+ * Enables or disables keeping the Node event loop alive while the `GLib` run loop is otherwise
104
+ * idle.
105
+ */
106
+ export declare function keepAlive(enable: boolean): void
107
+
108
+ /**
109
+ * Ownership transfer mode for a marshalled value: `borrowed` leaves the native side owning it,
110
+ * `full` transfers ownership (and the responsibility to free it) across the FFI boundary.
111
+ */
112
+ export type Ownership = 'borrowed'|
113
+ 'full';
114
+
115
+ /** Tears down the `GLib` main loop integration installed by `init`. */
116
+ export declare function quit(): void
117
+
118
+ /**
119
+ * Reads and decodes a value at `offset` bytes into the handle's memory, using `fieldDescriptor`
120
+ * to interpret the raw bytes.
121
+ */
122
+ export declare function read(handle: ExternalObject<Handle>, fieldDescriptor: Descriptor, offset: number): unknown
123
+
124
+ /**
125
+ * Registers a new `GObject` subtype named `name` deriving from `parentType`, wiring up any vfunc
126
+ * overrides and implemented interfaces, and returns the new `GType`.
127
+ */
128
+ export declare function registerClass(name: string, parentType: bigint, options?: RegisterClassOptions | undefined | null): bigint
129
+
130
+ /** An interface a registered class implements, together with the interface vfuncs it provides. */
131
+ export interface RegisterClassInterface {
132
+ /** `GType` of the interface to implement. */
133
+ type: bigint
134
+ /**
135
+ * Byte size of the interface's vtable struct, used to bounds-check each vfunc's `byteOffset`.
136
+ * `g_type_query` reports nothing for an interface type, so the size has to come from the same
137
+ * generated metadata the offsets do; when it is omitted the offsets are only alignment-checked.
138
+ */
139
+ vtableSize?: number
140
+ /** Interface vfunc implementations to install. */
141
+ vfuncs: Array<RegisterClassVfunc>
142
+ }
143
+
144
+ /** Optional configuration for `registerClass`: vfunc overrides, implemented interfaces and properties. */
145
+ export interface RegisterClassOptions {
146
+ /** Virtual function overrides for the class itself. */
147
+ vfuncs?: Array<RegisterClassVfunc>
148
+ /** Interfaces the class implements, each with its own vfuncs. */
149
+ interfaces?: Array<RegisterClassInterface>
150
+ /** Properties to install on the class. */
151
+ properties?: Array<RegisterClassProperty>
152
+ }
153
+
154
+ /** A property the registered class installs on its class structure. */
155
+ export interface RegisterClassProperty {
156
+ /** Property id the class's `get_property`/`set_property` vfuncs dispatch on. Must be non-zero. */
157
+ id: number
158
+ /** Handle to the `GParamSpec` describing the property. Ownership transfers to the class. */
159
+ pspec: ExternalObject<Handle>
160
+ }
161
+
162
+ /**
163
+ * A single virtual function override for a registered class: which slot to patch and how its
164
+ * arguments and return value are marshalled to and from the JavaScript implementation.
165
+ */
166
+ export interface RegisterClassVfunc {
167
+ /** Byte offset of the vfunc slot within the class (or interface) struct. */
168
+ byteOffset: number
169
+ /** Descriptor for each argument passed to the JavaScript implementation. */
170
+ argDescriptors: Array<Descriptor>
171
+ /** Descriptor for the value the JavaScript implementation returns. */
172
+ returnDescriptor: Descriptor
173
+ /** The JavaScript function that implements the vfunc. */
174
+ fn: (...args: never[]) => unknown
175
+ }
176
+
177
+ /**
178
+ * Calls the `getTypeFnName` registration function in `sharedLibrary` and returns the resulting
179
+ * `GType`, or 0 when the symbol is absent.
180
+ */
181
+ export declare function resolveType(sharedLibrary: string, getTypeFnName: string): bigint
182
+
183
+ /**
184
+ * Attaches the JavaScript `wrapper` object to the handle's `GObject` and registers a finalizer
185
+ * that releases it when the wrapper is garbage collected.
186
+ */
187
+ export declare function setWrapper(handle: ExternalObject<Handle>, wrapper: object): void
188
+
189
+ /** Encodes `value` with `fieldDescriptor` and writes it into the handle's memory at `offset` bytes. */
190
+ export declare function write(handle: ExternalObject<Handle>, fieldDescriptor: Descriptor, offset: number, value: unknown): unknown