@gtkx/css 0.20.0 → 0.21.0
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 +26 -62
- package/dist/css.d.ts +1 -0
- package/dist/css.d.ts.map +1 -1
- package/dist/css.js.map +1 -1
- package/package.json +3 -3
- package/src/css.ts +1 -0
package/README.md
CHANGED
|
@@ -1,23 +1,39 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
|
|
2
|
+
<img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/main/logo.svg" alt="GTKX" width="100" height="100">
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<h1 align="center">GTKX</h1>
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
|
-
|
|
8
|
+
<strong>Linux application development for the modern age powered by GTK4 and React</strong>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
11
|
<p align="center">
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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>
|
|
16
16
|
</p>
|
|
17
17
|
|
|
18
18
|
---
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
<p align="center">
|
|
21
|
+
<img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/main/demo.gif" alt="GTKX Demo" width="100%">
|
|
22
|
+
</p>
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
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.
|
|
27
|
+
|
|
28
|
+
## Features
|
|
29
|
+
|
|
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
|
|
21
37
|
|
|
22
38
|
## Quick Start
|
|
23
39
|
|
|
@@ -27,66 +43,14 @@ cd my-app
|
|
|
27
43
|
npm run dev
|
|
28
44
|
```
|
|
29
45
|
|
|
30
|
-
## Example
|
|
31
|
-
|
|
32
|
-
```tsx
|
|
33
|
-
import {
|
|
34
|
-
GtkApplicationWindow,
|
|
35
|
-
GtkBox,
|
|
36
|
-
GtkButton,
|
|
37
|
-
GtkLabel,
|
|
38
|
-
quit,
|
|
39
|
-
render,
|
|
40
|
-
} from "@gtkx/react";
|
|
41
|
-
import * as Gtk from "@gtkx/ffi/gtk";
|
|
42
|
-
import { useState } from "react";
|
|
43
|
-
|
|
44
|
-
const App = () => {
|
|
45
|
-
const [count, setCount] = useState(0);
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<GtkApplicationWindow
|
|
49
|
-
title="Counter"
|
|
50
|
-
defaultWidth={300}
|
|
51
|
-
defaultHeight={200}
|
|
52
|
-
onClose={quit}
|
|
53
|
-
>
|
|
54
|
-
<GtkBox
|
|
55
|
-
orientation={Gtk.Orientation.VERTICAL}
|
|
56
|
-
spacing={20}
|
|
57
|
-
valign={Gtk.Align.CENTER}
|
|
58
|
-
>
|
|
59
|
-
<GtkLabel label={`Count: ${count}`} cssClasses={["title-1"]} />
|
|
60
|
-
<GtkButton label="Increment" onClicked={() => setCount((c) => c + 1)} />
|
|
61
|
-
</GtkBox>
|
|
62
|
-
</GtkApplicationWindow>
|
|
63
|
-
);
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
render(<App />, "com.example.counter");
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
## Features
|
|
70
|
-
|
|
71
|
-
- **React 19** — Hooks, concurrent features, and the component model you know
|
|
72
|
-
- **Native GTK4 widgets** — Real native controls, not web components in a webview
|
|
73
|
-
- **Adwaita support** — Modern GNOME styling with Libadwaita components
|
|
74
|
-
- **Declarative animations** — Framer Motion-like API using native Adwaita animations
|
|
75
|
-
- **Hot Module Replacement** — Fast refresh during development
|
|
76
|
-
- **TypeScript first** — Full type safety with auto-generated bindings
|
|
77
|
-
- **CSS-in-JS styling** — Familiar styling patterns adapted for GTK
|
|
78
|
-
- **Testing utilities** — Component testing similar to Testing Library
|
|
79
|
-
|
|
80
46
|
## Examples
|
|
81
47
|
|
|
82
48
|
Explore complete applications in the [`examples/`](./examples) directory:
|
|
83
49
|
|
|
84
|
-
- **[gtk-demo](./examples/gtk-demo)** — Full replica of the official GTK demo app
|
|
85
50
|
- **[hello-world](./examples/hello-world)** — Minimal application showing a counter
|
|
86
|
-
- **[
|
|
87
|
-
- **[
|
|
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
|
|
88
53
|
- **[browser](./examples/browser)** — Simple browser using WebKitWebView
|
|
89
|
-
- **[deploying](./examples/deploying)** — Example of packaging and distributing a GTKX app
|
|
90
54
|
|
|
91
55
|
## Documentation
|
|
92
56
|
|
|
@@ -94,7 +58,7 @@ Visit [https://gtkx.dev](https://gtkx.dev) for the full documentation.
|
|
|
94
58
|
|
|
95
59
|
## Contributing
|
|
96
60
|
|
|
97
|
-
Contributions are welcome! Please see the [contributing guidelines](./CONTRIBUTING.md)
|
|
61
|
+
Contributions are welcome! Please see the [contributing guidelines](./CONTRIBUTING.md).
|
|
98
62
|
|
|
99
63
|
## Community
|
|
100
64
|
|
package/dist/css.d.ts
CHANGED
package/dist/css.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAI3D
|
|
1
|
+
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAI3D;;;GAGG;AACH,KAAK,YAAY,GAAG,MAAM,GAAG;IAAE,OAAO,EAAE,KAAK,CAAA;CAAE,CAAC;AA6ChD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,GAAG,GAAI,GAAG,MAAM,gBAAgB,EAAE,KAAG,YAcjD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,EAAE,GAAI,GAAG,YAAY,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,KAAG,MAAM,EACE,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,MAAM,gBAAgB,EAAE,KAAG,IAQ1D,CAAC"}
|
package/dist/css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gtkx/css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.21.0",
|
|
4
4
|
"description": "Emotion-based CSS-in-JS for GTKX applications",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"gtkx",
|
|
@@ -43,10 +43,10 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@emotion/cache": "^11.14.0",
|
|
45
45
|
"@emotion/serialize": "^1.3.3",
|
|
46
|
-
"@gtkx/ffi": "0.
|
|
46
|
+
"@gtkx/ffi": "0.21.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@gtkx/vitest": "0.
|
|
49
|
+
"@gtkx/vitest": "0.21.0"
|
|
50
50
|
},
|
|
51
51
|
"scripts": {
|
|
52
52
|
"build": "tsc -b && cp ../../README.md .",
|