@gtkx/native 0.1.28 → 0.1.30
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 +24 -23
- package/dist/index.node +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,13 +30,16 @@ GTKX bridges React's component model with GTK4's native widget system. Write fam
|
|
|
30
30
|
|
|
31
31
|
```bash
|
|
32
32
|
# Install dependencies
|
|
33
|
-
|
|
33
|
+
npm install @gtkx/react @gtkx/ffi react
|
|
34
|
+
|
|
35
|
+
# For TypeScript (recommended)
|
|
36
|
+
npm install -D @types/react tsx typescript
|
|
34
37
|
|
|
35
38
|
# For styling (optional)
|
|
36
|
-
|
|
39
|
+
npm install @gtkx/css
|
|
37
40
|
|
|
38
41
|
# For testing (optional)
|
|
39
|
-
|
|
42
|
+
npm install -D @gtkx/testing
|
|
40
43
|
```
|
|
41
44
|
|
|
42
45
|
Create your first app:
|
|
@@ -80,7 +83,7 @@ export const App = () => {
|
|
|
80
83
|
Run with:
|
|
81
84
|
|
|
82
85
|
```bash
|
|
83
|
-
|
|
86
|
+
npx tsx index.tsx
|
|
84
87
|
```
|
|
85
88
|
|
|
86
89
|
## Styling
|
|
@@ -113,33 +116,31 @@ Use `@gtkx/testing` for Testing Library-style component tests:
|
|
|
113
116
|
```tsx
|
|
114
117
|
import { cleanup, render, screen, userEvent, fireEvent } from "@gtkx/testing";
|
|
115
118
|
import { AccessibleRole } from "@gtkx/ffi/gtk";
|
|
116
|
-
import { afterEach, describe, expect, it } from "vitest";
|
|
117
119
|
import { App } from "./app.js";
|
|
118
120
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
it("increments count when clicking button", async () => {
|
|
123
|
-
render(<App />);
|
|
121
|
+
// Clean up after each test
|
|
122
|
+
afterEach(() => cleanup());
|
|
124
123
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
});
|
|
128
|
-
await userEvent.click(button);
|
|
124
|
+
test("increments count when clicking button", async () => {
|
|
125
|
+
render(<App />);
|
|
129
126
|
|
|
130
|
-
|
|
127
|
+
const button = await screen.findByRole(AccessibleRole.BUTTON, {
|
|
128
|
+
name: "Increment",
|
|
131
129
|
});
|
|
130
|
+
await userEvent.click(button);
|
|
132
131
|
|
|
133
|
-
|
|
134
|
-
|
|
132
|
+
await screen.findByText("Count: 1");
|
|
133
|
+
});
|
|
135
134
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
});
|
|
139
|
-
fireEvent.click(button);
|
|
135
|
+
test("can also use fireEvent for synchronous events", async () => {
|
|
136
|
+
render(<App />);
|
|
140
137
|
|
|
141
|
-
|
|
138
|
+
const button = await screen.findByRole(AccessibleRole.BUTTON, {
|
|
139
|
+
name: "Increment",
|
|
142
140
|
});
|
|
141
|
+
fireEvent.click(button);
|
|
142
|
+
|
|
143
|
+
await screen.findByText("Count: 1");
|
|
143
144
|
});
|
|
144
145
|
```
|
|
145
146
|
|
|
@@ -200,7 +201,7 @@ turbo start --filter=gtk4-demo
|
|
|
200
201
|
## Requirements
|
|
201
202
|
|
|
202
203
|
- Node.js 20+
|
|
203
|
-
- GTK4
|
|
204
|
+
- GTK4
|
|
204
205
|
- Linux (GTK4 is Linux-native)
|
|
205
206
|
|
|
206
207
|
## License
|
package/dist/index.node
CHANGED
|
Binary file
|