@gtkx/react 0.10.5 → 0.11.1
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 +103 -0
- package/dist/factory.js +1 -0
- package/dist/generated/internal.d.ts +27 -1
- package/dist/generated/internal.js +920 -9714
- package/dist/generated/jsx.d.ts +8029 -17908
- package/dist/generated/jsx.js +70 -9013
- package/dist/generated/registry.d.ts +0 -1
- package/dist/node.d.ts +1 -1
- package/dist/nodes/action-row-child.js +3 -2
- package/dist/nodes/action-row.js +3 -7
- package/dist/nodes/application.js +1 -1
- package/dist/nodes/autowrapped.js +7 -5
- package/dist/nodes/column-view-column.js +1 -1
- package/dist/nodes/column-view.js +4 -3
- package/dist/nodes/fixed-child.js +3 -3
- package/dist/nodes/grid-child.js +4 -4
- package/dist/nodes/internal/constants.d.ts +1 -0
- package/dist/nodes/internal/constants.js +10 -0
- package/dist/nodes/internal/list-item-renderer.d.ts +1 -1
- package/dist/nodes/internal/list-item-renderer.js +4 -2
- package/dist/nodes/internal/predicates.d.ts +18 -9
- package/dist/nodes/internal/signal-store.d.ts +1 -1
- package/dist/nodes/internal/simple-list-store.d.ts +2 -2
- package/dist/nodes/internal/simple-list-store.js +2 -2
- package/dist/nodes/internal/tree-list-item-renderer.d.ts +1 -1
- package/dist/nodes/internal/tree-list-item-renderer.js +7 -3
- package/dist/nodes/internal/tree-store.d.ts +1 -1
- package/dist/nodes/internal/tree-store.js +1 -1
- package/dist/nodes/internal/utils.d.ts +7 -1
- package/dist/nodes/internal/utils.js +33 -6
- package/dist/nodes/list-item.d.ts +1 -1
- package/dist/nodes/list-view.js +3 -3
- package/dist/nodes/models/list.js +3 -3
- package/dist/nodes/models/menu.js +2 -2
- package/dist/nodes/models/tree-list.js +11 -10
- package/dist/nodes/notebook-page-tab.d.ts +1 -1
- package/dist/nodes/notebook-page.d.ts +3 -3
- package/dist/nodes/notebook-page.js +2 -2
- package/dist/nodes/notebook.js +4 -4
- package/dist/nodes/overlay-child.js +2 -1
- package/dist/nodes/pack-child.js +3 -2
- package/dist/nodes/pack.js +3 -7
- package/dist/nodes/popover-menu.js +3 -4
- package/dist/nodes/simple-list-view.js +6 -7
- package/dist/nodes/slot.d.ts +1 -1
- package/dist/nodes/slot.js +9 -7
- package/dist/nodes/stack-page.js +2 -1
- package/dist/nodes/stack.js +3 -4
- package/dist/nodes/toolbar-child.js +2 -1
- package/dist/nodes/tree-list-item.d.ts +3 -3
- package/dist/nodes/tree-list-item.js +3 -3
- package/dist/nodes/widget.d.ts +10 -2
- package/dist/nodes/widget.js +112 -111
- package/dist/nodes/window.js +1 -1
- package/package.json +6 -7
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/main/logo.svg" alt="GTKX" width="60" height="60">
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">GTKX</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<strong>Build native GTK4 desktop applications with React and TypeScript.</strong>
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
<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/eugeniodepalo/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/eugeniodepalo/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/eugeniodepalo/gtkx/discussions"><img src="https://img.shields.io/badge/discussions-GitHub-blue" alt="GitHub Discussions"></a>
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
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.
|
|
21
|
+
|
|
22
|
+
## Quick Start
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npx @gtkx/cli create my-app
|
|
26
|
+
cd my-app
|
|
27
|
+
npm run dev
|
|
28
|
+
```
|
|
29
|
+
|
|
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
|
+
onCloseRequest={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
|
+
- **Hot Module Replacement** — Fast refresh during development
|
|
75
|
+
- **TypeScript first** — Full type safety with auto-generated bindings
|
|
76
|
+
- **CSS-in-JS styling** — Familiar styling patterns adapted for GTK
|
|
77
|
+
- **Testing utilities** — Component testing similar to Testing Library
|
|
78
|
+
|
|
79
|
+
## Examples
|
|
80
|
+
|
|
81
|
+
Explore complete applications in the [`examples/`](./examples) directory:
|
|
82
|
+
|
|
83
|
+
- **[gtk-demo](./examples/gtk-demo)** — Full replica of the official GTK demo app
|
|
84
|
+
- **[hello-world](./examples/hello-world)** — Minimal application showing a counter
|
|
85
|
+
- **[todo](./examples/todo)** — Full-featured todo application with Adwaita styling and testing
|
|
86
|
+
- **[deploying](./examples/deploying)** — Example of packaging and distributing a GTKX app
|
|
87
|
+
|
|
88
|
+
## Documentation
|
|
89
|
+
|
|
90
|
+
Visit [https://eugeniodepalo.github.io/gtkx](https://eugeniodepalo.github.io/gtkx/) for the full documentation.
|
|
91
|
+
|
|
92
|
+
## Contributing
|
|
93
|
+
|
|
94
|
+
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).
|
|
95
|
+
|
|
96
|
+
## Community
|
|
97
|
+
|
|
98
|
+
- [GitHub Discussions](https://github.com/eugeniodepalo/gtkx/discussions) — Questions, ideas, and general discussion
|
|
99
|
+
- [Issue Tracker](https://github.com/eugeniodepalo/gtkx/issues) — Bug reports and feature requests
|
|
100
|
+
|
|
101
|
+
## License
|
|
102
|
+
|
|
103
|
+
[MPL-2.0](./LICENSE)
|
package/dist/factory.js
CHANGED
|
@@ -1,4 +1,30 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Internal metadata for the reconciler.
|
|
3
|
+
* This is the SINGLE SOURCE OF TRUTH for widget classification.
|
|
4
|
+
* Not part of the public API.
|
|
5
|
+
*/
|
|
6
|
+
import * as Adw from "@gtkx/ffi/adw";
|
|
7
|
+
import * as Gtk from "@gtkx/ffi/gtk";
|
|
8
|
+
/** List widgets that require renderItem prop. */
|
|
9
|
+
export declare const LIST_WIDGET_CLASSES: readonly [typeof Gtk.GridView, typeof Gtk.ListView];
|
|
10
|
+
/** Dropdown widgets with special item handling. */
|
|
11
|
+
export declare const DROP_DOWN_CLASSES: readonly [typeof Adw.ComboRow, typeof Gtk.DropDown];
|
|
12
|
+
/** Column view widgets with column-based layout. */
|
|
13
|
+
export declare const COLUMN_VIEW_CLASSES: readonly [typeof Gtk.ColumnView];
|
|
14
|
+
/** Widgets that auto-wrap children (ListBox wraps in ListBoxRow, FlowBox wraps in FlowBoxChild). */
|
|
15
|
+
export declare const AUTOWRAP_CLASSES: readonly [typeof Gtk.FlowBox, typeof Gtk.ListBox];
|
|
16
|
+
/** Stack widgets that show one child at a time. */
|
|
17
|
+
export declare const STACK_CLASSES: readonly [typeof Gtk.Stack, typeof Adw.ViewStack];
|
|
18
|
+
/** Notebook widgets with tabbed interface. */
|
|
19
|
+
export declare const NOTEBOOK_CLASSES: readonly [typeof Gtk.Notebook];
|
|
20
|
+
/** Widgets that support popover menu children. */
|
|
21
|
+
export declare const POPOVER_MENU_CLASSES: readonly [typeof Gtk.MenuButton, typeof Gtk.PopoverMenu, typeof Gtk.PopoverMenuBar];
|
|
22
|
+
/** Methods that define the packable interface (pack start/end positioning). */
|
|
23
|
+
export declare const PACK_INTERFACE_METHODS: string[];
|
|
24
|
+
/** Methods that define the prefix/suffix interface (Adwaita action rows). */
|
|
25
|
+
export declare const PREFIX_SUFFIX_INTERFACE_METHODS: string[];
|
|
26
|
+
/** Constructor parameters for each widget type, derived from GIR analysis. */
|
|
2
27
|
export declare const CONSTRUCTOR_PROPS: Record<string, string[]>;
|
|
3
28
|
export declare const PROPS: Record<string, Record<string, [string | null, string]>>;
|
|
29
|
+
/** Signal names for each widget type, derived from CodegenWidgetMeta. */
|
|
4
30
|
export declare const SIGNALS: Record<string, Set<string>>;
|