@gtkx/native 0.2.1 → 0.2.3
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 -20
- package/dist/index.node +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -23,7 +23,7 @@ GTKX bridges React's component model with GTK4's native widget system. Write fam
|
|
|
23
23
|
- **React Components** — Use React hooks, state, and component patterns you already know
|
|
24
24
|
- **Hot Module Replacement** — Edit your code and see changes instantly, powered by Vite
|
|
25
25
|
- **Native Performance** — Direct FFI bindings to GTK4 via Rust and libffi
|
|
26
|
-
- **CLI & Scaffolding** — Get started in seconds with `npx @gtkx/cli create`
|
|
26
|
+
- **CLI & Scaffolding** — Get started in seconds with `npx @gtkx/cli@latest create`
|
|
27
27
|
- **CSS-in-JS Styling** — Emotion-style `css` template literals for GTK widgets
|
|
28
28
|
- **Testing Library** — Familiar `screen`, `userEvent`, and query APIs for testing components
|
|
29
29
|
|
|
@@ -32,7 +32,7 @@ GTKX bridges React's component model with GTK4's native widget system. Write fam
|
|
|
32
32
|
Create a new GTKX app with a single command:
|
|
33
33
|
|
|
34
34
|
```bash
|
|
35
|
-
npx @gtkx/cli create
|
|
35
|
+
npx @gtkx/cli@latest create
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
This launches an interactive wizard that sets up your project with TypeScript, your preferred package manager, and optional testing support.
|
|
@@ -40,7 +40,7 @@ This launches an interactive wizard that sets up your project with TypeScript, y
|
|
|
40
40
|
You can also pass options directly:
|
|
41
41
|
|
|
42
42
|
```bash
|
|
43
|
-
npx @gtkx/cli create my-app --app-id com.example.myapp --pm pnpm --testing vitest
|
|
43
|
+
npx @gtkx/cli@latest create my-app --app-id com.example.myapp --pm pnpm --testing vitest
|
|
44
44
|
```
|
|
45
45
|
|
|
46
46
|
Then start developing with HMR:
|
|
@@ -87,12 +87,16 @@ export const App = () => {
|
|
|
87
87
|
defaultHeight={300}
|
|
88
88
|
onCloseRequest={quit}
|
|
89
89
|
>
|
|
90
|
-
<Box
|
|
90
|
+
<Box
|
|
91
|
+
orientation={Orientation.VERTICAL}
|
|
92
|
+
spacing={12}
|
|
93
|
+
marginStart={20}
|
|
94
|
+
marginEnd={20}
|
|
95
|
+
marginTop={20}
|
|
96
|
+
marginBottom={20}
|
|
97
|
+
>
|
|
91
98
|
<Label.Root label={`Count: ${count}`} />
|
|
92
|
-
<Button
|
|
93
|
-
label="Increment"
|
|
94
|
-
onClicked={() => setCount((c) => c + 1)}
|
|
95
|
-
/>
|
|
99
|
+
<Button label="Increment" onClicked={() => setCount((c) => c + 1)} />
|
|
96
100
|
</Box>
|
|
97
101
|
</ApplicationWindow>
|
|
98
102
|
);
|
|
@@ -127,9 +131,7 @@ const primaryButton = css`
|
|
|
127
131
|
font-weight: bold;
|
|
128
132
|
`;
|
|
129
133
|
|
|
130
|
-
const MyButton = () =>
|
|
131
|
-
<Button label="Click me" cssClasses={[primaryButton]} />
|
|
132
|
-
);
|
|
134
|
+
const MyButton = () => <Button label="Click me" cssClasses={[primaryButton]} />;
|
|
133
135
|
```
|
|
134
136
|
|
|
135
137
|
GTK also provides built-in CSS classes like `suggested-action`, `destructive-action`, `card`, and `heading`.
|
|
@@ -174,11 +176,13 @@ test("can also use fireEvent for low-level signals", async () => {
|
|
|
174
176
|
### Available APIs
|
|
175
177
|
|
|
176
178
|
**Queries** - Find elements in the rendered tree (all async):
|
|
179
|
+
|
|
177
180
|
- `findBy*` / `findAllBy*` - Waits for element to appear
|
|
178
181
|
|
|
179
182
|
Query types: `ByRole`, `ByText`, `ByLabelText`, `ByTestId`
|
|
180
183
|
|
|
181
184
|
**User Interactions**:
|
|
185
|
+
|
|
182
186
|
- `userEvent.click(element)` - Simulate click
|
|
183
187
|
- `userEvent.dblClick(element)` - Simulate double click
|
|
184
188
|
- `userEvent.activate(element)` - Activate element (e.g., press Enter in input)
|
|
@@ -189,9 +193,11 @@ Query types: `ByRole`, `ByText`, `ByLabelText`, `ByTestId`
|
|
|
189
193
|
- `userEvent.deselectOptions(element, values)` - Deselect options in ListBox
|
|
190
194
|
|
|
191
195
|
**Low-level Events**:
|
|
196
|
+
|
|
192
197
|
- `fireEvent(element, signalName, ...args)` - Emit any GTK signal with optional arguments
|
|
193
198
|
|
|
194
199
|
**Utilities**:
|
|
200
|
+
|
|
195
201
|
- `waitFor(callback)` - Wait for condition
|
|
196
202
|
- `waitForElementToBeRemoved(element)` - Wait for element removal
|
|
197
203
|
|
|
@@ -218,15 +224,15 @@ pnpm test
|
|
|
218
224
|
|
|
219
225
|
## Packages
|
|
220
226
|
|
|
221
|
-
| Package
|
|
222
|
-
|
|
223
|
-
| [@gtkx/cli](packages/cli)
|
|
224
|
-
| [@gtkx/react](packages/react)
|
|
225
|
-
| [@gtkx/ffi](packages/ffi)
|
|
226
|
-
| [@gtkx/native](packages/native)
|
|
227
|
-
| [@gtkx/css](packages/css)
|
|
228
|
-
| [@gtkx/testing](packages/testing) | Testing utilities for GTKX components
|
|
229
|
-
| [@gtkx/gir](packages/gir)
|
|
227
|
+
| Package | Description |
|
|
228
|
+
| --------------------------------- | -------------------------------------------------- |
|
|
229
|
+
| [@gtkx/cli](packages/cli) | CLI for creating and developing GTKX apps with HMR |
|
|
230
|
+
| [@gtkx/react](packages/react) | React reconciler and JSX components |
|
|
231
|
+
| [@gtkx/ffi](packages/ffi) | TypeScript FFI bindings for GTK4 |
|
|
232
|
+
| [@gtkx/native](packages/native) | Rust native module for FFI bridge |
|
|
233
|
+
| [@gtkx/css](packages/css) | CSS-in-JS styling for GTK widgets |
|
|
234
|
+
| [@gtkx/testing](packages/testing) | Testing utilities for GTKX components |
|
|
235
|
+
| [@gtkx/gir](packages/gir) | GObject Introspection parser for codegen |
|
|
230
236
|
|
|
231
237
|
## Requirements
|
|
232
238
|
|
package/dist/index.node
CHANGED
|
Binary file
|