@gtkx/components 2.0.0-beta.6 → 2.0.0-beta.8

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.
Files changed (2) hide show
  1. package/README.md +43 -40
  2. package/package.json +10 -9
package/README.md CHANGED
@@ -5,9 +5,9 @@
5
5
  <h1 align="center">GTKX</h1>
6
6
 
7
7
  <p align="center">
8
- The React framework for Linux, built on GTK.<br />
9
- Write native GTK4 desktop applications with React and TypeScript.
10
- Real GTK widgets, the GNOME stack, and standard web tooling.
8
+ The React framework for Linux.<br />
9
+ Write native GNOME applications with React and TypeScript.
10
+ Real Adwaita and GTK4 widgets with standard web tooling.
11
11
  </p>
12
12
 
13
13
  <p align="center">
@@ -38,11 +38,12 @@
38
38
 
39
39
  ## Demo
40
40
 
41
- The intrinsic elements in this snippet render GTK4 widgets, and ordinary React hooks and events drive them:
41
+ This app starts with an Adwaita application shell, renders native GTK4 widgets inside it, and uses ordinary React hooks and events:
42
42
 
43
43
  ```tsx
44
44
  import * as Gtk from "@gtkx/gi/gtk";
45
- import { GtkApplication, GtkApplicationWindow, GtkBox, GtkButton, GtkLabel } from "@gtkx/jsx/gtk";
45
+ import { AdwApplication, AdwApplicationWindow, AdwHeaderBar, AdwToolbarView } from "@gtkx/jsx/adw";
46
+ import { GtkBox, GtkButton, GtkLabel } from "@gtkx/jsx/gtk";
46
47
  import { createRoot, quit } from "@gtkx/react";
47
48
  import { useState } from "react";
48
49
 
@@ -50,38 +51,40 @@ const Counter = () => {
50
51
  const [count, setCount] = useState(0);
51
52
 
52
53
  return (
53
- <GtkApplicationWindow
54
+ <AdwApplicationWindow
54
55
  title="Hello GTKX"
55
56
  defaultWidth={400}
56
57
  defaultHeight={300}
57
58
  onCloseRequest={quit}
58
59
  >
59
- <GtkBox
60
- orientation={Gtk.Orientation.VERTICAL}
61
- spacing={20}
62
- marginTop={40}
63
- marginBottom={40}
64
- marginStart={40}
65
- marginEnd={40}
66
- valign={Gtk.Align.CENTER}
67
- halign={Gtk.Align.CENTER}
68
- >
69
- <GtkLabel cssClasses={["title-1"]}>Welcome to GTKX!</GtkLabel>
70
- <GtkLabel cssClasses={["title-2"]}>{`Count: ${count}`}</GtkLabel>
71
- <GtkButton
72
- label="Increment"
73
- onClicked={() => setCount((c) => c + 1)}
74
- cssClasses={["suggested-action", "pill"]}
75
- />
76
- </GtkBox>
77
- </GtkApplicationWindow>
60
+ <AdwToolbarView topBar={<AdwHeaderBar />}>
61
+ <GtkBox
62
+ orientation={Gtk.Orientation.VERTICAL}
63
+ spacing={20}
64
+ marginTop={40}
65
+ marginBottom={40}
66
+ marginStart={40}
67
+ marginEnd={40}
68
+ valign={Gtk.Align.CENTER}
69
+ halign={Gtk.Align.CENTER}
70
+ >
71
+ <GtkLabel cssClasses={["title-1"]}>Welcome to GTKX!</GtkLabel>
72
+ <GtkLabel cssClasses={["title-2"]}>{`Count: ${String(count)}`}</GtkLabel>
73
+ <GtkButton
74
+ label="Increment"
75
+ onClicked={() => setCount((c) => c + 1)}
76
+ cssClasses={["suggested-action", "pill"]}
77
+ />
78
+ </GtkBox>
79
+ </AdwToolbarView>
80
+ </AdwApplicationWindow>
78
81
  );
79
82
  };
80
83
 
81
84
  const App = () => (
82
- <GtkApplication>
85
+ <AdwApplication>
83
86
  <Counter />
84
- </GtkApplication>
87
+ </AdwApplication>
85
88
  );
86
89
 
87
90
  createRoot().render(<App />);
@@ -91,9 +94,9 @@ This is the [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/
91
94
 
92
95
  ## Why GTKX
93
96
 
94
- ### A declarative layer for the GNOME stack
97
+ ### Adwaita-first application development
95
98
 
96
- 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:
99
+ GTKX uses Adwaita as the foundation for applications, windows, navigation, dialogs, and adaptive layouts, with the complete GTK4 toolkit underneath. It adds a declarative React layer and an integrated TypeScript toolchain to the GNOME platform:
97
100
 
98
101
  - a React reconciler that exposes every GObject as a JSX element,
99
102
  - a CLI for scaffolding, development, and production builds,
@@ -102,17 +105,17 @@ GTK4 is mature, and GtkBuilder XML can lay out a static interface, but nothing r
102
105
  - a Testing Library-style API for querying and driving your widgets in tests,
103
106
  - and a Model Context Protocol (MCP) server that exposes your live app to AI agents.
104
107
 
105
- ### The full GNOME API surface
108
+ ### Native GNOME widgets, without a compatibility layer
106
109
 
107
- 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.
110
+ React Native and similar frameworks hide the native toolkit so one API can run everywhere. GTKX renders real Adwaita and GTK4 widgets and exposes any other GObject-Introspection library on your system. It is GNOME-native and Linux-only by design.
108
111
 
109
112
  ### Why Node.js, and why generated bindings
110
113
 
111
114
  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 what running on Node.js means day to day.
112
115
 
113
- 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.
116
+ GTKX generates the TypeScript types and native FFI calls from the same GObject-Introspection data, so the types cannot drift from the calls they back. `Adw-1` is the sole default GIR root; its GIR include pulls in `Gtk-4.0`, so codegen covers both complete API surfaces. Neither belongs in a GTKX 2 `libraries` list.
114
117
 
115
- At runtime, the native Rust core calls straight into the system GTK4, Adwaita, and GLib libraries through libffi, without loading libgirepository at all.
118
+ At runtime, the native Rust core calls straight into the system Adwaita, GTK4, and GLib libraries through libffi, without loading libgirepository at all.
116
119
 
117
120
  ## Quick start
118
121
 
@@ -121,10 +124,10 @@ GTKX is Linux-only and needs Node.js 26.7 or later. See [Requirements](#requirem
121
124
  Scaffold a new app with the `create-gtkx` initializer:
122
125
 
123
126
  ```sh
124
- npm create gtkx
127
+ npm create gtkx@beta
125
128
  ```
126
129
 
127
- The same command works with other package managers: `pnpm create gtkx` or `yarn create gtkx`.
130
+ The same command works with other package managers: `pnpm create gtkx@beta` or `yarn create gtkx@beta`.
128
131
 
129
132
  Then run your new app:
130
133
 
@@ -145,7 +148,7 @@ The documentation at **[gtkx.dev](https://gtkx.dev)** includes a step-by-step tu
145
148
 
146
149
  GTKX is Linux-only. You need:
147
150
 
148
- - Linux with the GTK4 (4.20 or later), Adwaita (1.8 or later), and GLib development libraries
151
+ - Linux with the Adwaita (1.8 or later), GTK4 (4.20 or later), and GLib development libraries
149
152
  - Node.js 26.7 or later
150
153
 
151
154
  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.
@@ -154,10 +157,10 @@ The `@gtkx/native` addon ships prebuilt for x64 and arm64 glibc Linux; other tar
154
157
 
155
158
  Explore the [example apps](https://github.com/gtkx-org/gtkx/tree/main/examples):
156
159
 
157
- - [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world): the counter above.
158
- - [`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.
159
- - [`browser`](https://github.com/gtkx-org/gtkx/tree/main/examples/browser): a WebKitWebView-based web browser.
160
- - [`animations`](https://github.com/gtkx-org/gtkx/tree/main/examples/animations): a tour of `@gtkx/animated`, React Spring animations driven by the GTK frame clock.
160
+ - [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world): the Adwaita counter above.
161
+ - [`gtk-demo`](https://github.com/gtkx-org/gtkx/tree/main/examples/gtk-demo): the official GTK4 widget showcase in an Adwaita application shell, covering lists, dialogs, gestures, CSS, and OpenGL.
162
+ - [`browser`](https://github.com/gtkx-org/gtkx/tree/main/examples/browser): an Adwaita browser built around `WebKitWebView`.
163
+ - [`animations`](https://github.com/gtkx-org/gtkx/tree/main/examples/animations): an Adwaita showcase for `@gtkx/animated`, with React Spring animations driven by the GTK frame clock.
161
164
  - [`navigation`](https://github.com/gtkx-org/gtkx/tree/main/examples/navigation): a tour of `@gtkx/navigation`, React Navigation's stack, tab, and drawer navigators rendered with libadwaita.
162
165
  - [`tutorial`](https://github.com/gtkx-org/gtkx/tree/main/examples/tutorial): the Tasks app the documentation builds.
163
166
 
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@gtkx/components",
3
- "version": "2.0.0-beta.6",
4
- "description": "High-level GTK components: collection views, menus, containers.",
3
+ "version": "2.0.0-beta.8",
4
+ "description": "Adwaita and GTK collection views, dropdowns, combo rows, and toasts.",
5
5
  "keywords": [
6
6
  "gtkx",
7
7
  "gtk",
8
8
  "gtk4",
9
9
  "adwaita",
10
+ "gnome",
10
11
  "react",
11
12
  "components",
12
13
  "linux",
@@ -52,18 +53,18 @@
52
53
  "node": ">=26.7.0"
53
54
  },
54
55
  "dependencies": {
55
- "@gtkx/react": "2.0.0-beta.6",
56
- "@gtkx/runtime": "2.0.0-beta.6",
57
- "@gtkx/utils": "2.0.0-beta.6"
56
+ "@gtkx/react": "2.0.0-beta.8",
57
+ "@gtkx/runtime": "2.0.0-beta.8",
58
+ "@gtkx/utils": "2.0.0-beta.8"
58
59
  },
59
60
  "peerDependencies": {
60
61
  "react": "^19.2"
61
62
  },
62
63
  "devDependencies": {
63
- "@gtkx/config": "2.0.0-beta.6",
64
- "@gtkx/testing": "2.0.0-beta.6",
65
- "@gtkx/vitest": "2.0.0-beta.6",
66
- "vitest": "^4.1.11"
64
+ "@gtkx/config": "2.0.0-beta.8",
65
+ "@gtkx/testing": "2.0.0-beta.8",
66
+ "@gtkx/vitest": "2.0.0-beta.8",
67
+ "vitest": "^5.0.0"
67
68
  },
68
69
  "scripts": {
69
70
  "release": "tsx ../../scripts/release-package.ts"