@gtkx/react 0.9.4 → 0.10.0

package/README.md

@@ -1,47 +1,43 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/HEAD/logo.svg" alt="GTKX Logo" width="128" height="128">
+  <img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/main/logo.svg" alt="GTKX" width="80" height="80">
 </p>
 
 <h1 align="center">GTKX</h1>
 
 <p align="center">
-  <strong>Build native GTK4 desktop apps with React</strong>
+  <strong>Build native GTK4 desktop applications with React and TypeScript.</strong>
 </p>
 
 <p align="center">
-  <a href="https://eugeniodepalo.github.io/gtkx">Documentation</a> ·
-  <a href="#quick-start">Quick Start</a> ·
-  <a href="#examples">Examples</a> ·
-  <a href="#contributing">Contributing</a>
+  <a href="https://www.npmjs.com/package/@gtkx/react"><img src="https://img.shields.io/npm/v/@gtkx/react.svg" alt="npm version"></a>
+  <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>
+  <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>
+  <a href="https://github.com/eugeniodepalo/gtkx/discussions"><img src="https://img.shields.io/badge/discussions-GitHub-blue" alt="GitHub Discussions"></a>
 </p>
 
 ---
 
-GTKX lets you build native Linux desktop applications using React and TypeScript. Write familiar React code that renders as native GTK4 widgets—no Electron, no web views.
-
-## Features
-
-- **React** — Hooks, state, props, and components you already know
-- **HMR** — Edit code and see changes instantly via Vite
-- **Native** — Direct FFI bindings to GTK4 via Rust and libffi
-- **CLI** — `npx @gtkx/cli@latest create` scaffolds a ready-to-go project
-- **CSS-in-JS** — Emotion-style `css` template literals for GTK styling
-- **Testing** — Testing Library-style `screen`, `userEvent`, and queries
+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.
 
 ## Quick Start
 
 ```bash
-npx @gtkx/cli@latest create my-app
+npx @gtkx/cli create my-app
 cd my-app
 npm run dev
 ```
 
-Edit your code and see changes instantly—no restart needed.
-
-### Example
+## Example
 
 ```tsx
-import { render, ApplicationWindow, Box, Button, quit } from "@gtkx/react";
+import {
+  GtkApplicationWindow,
+  GtkBox,
+  GtkButton,
+  GtkLabel,
+  quit,
+  render,
+} from "@gtkx/react";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { useState } from "react";
 
@@ -49,67 +45,59 @@ const App = () => {
   const [count, setCount] = useState(0);
 
   return (
-    <ApplicationWindow title="Counter" onCloseRequest={quit}>
-      <Box orientation={Gtk.Orientation.VERTICAL} spacing={12}>
-        {`Count: ${count}`}
-        <Button label="Increment" onClicked={() => setCount((c) => c + 1)} />
-      </Box>
-    </ApplicationWindow>
+    <GtkApplicationWindow
+      title="Counter"
+      defaultWidth={300}
+      defaultHeight={200}
+      onCloseRequest={quit}
+    >
+      <GtkBox
+        orientation={Gtk.Orientation.VERTICAL}
+        spacing={20}
+        valign={Gtk.Align.CENTER}
+      >
+        <GtkLabel label={`Count: ${count}`} cssClasses={["title-1"]} />
+        <GtkButton label="Increment" onClicked={() => setCount((c) => c + 1)} />
+      </GtkBox>
+    </GtkApplicationWindow>
   );
 };
 
-render(<App />, "org.example.Counter");
+render(<App />, "com.example.counter");
 ```
 
-## Styling
-
-```tsx
-import { css } from "@gtkx/css";
-import { Button } from "@gtkx/react";
-
-const primary = css`
-  padding: 16px 32px;
-  border-radius: 24px;
-  background: linear-gradient(135deg, #3584e4, #9141ac);
-  color: white;
-`;
-
-<Button label="Click me" cssClasses={[primary]} />;
-```
-
-## Testing
-
-```tsx
-import { cleanup, render, screen, userEvent } from "@gtkx/testing";
-import * as Gtk from "@gtkx/ffi/gtk";
-
-afterEach(() => cleanup());
+## Features
 
-test("increments count", async () => {
-  await render(<App />);
+- **React 19** — Hooks, concurrent features, and the component model you know
+- **Native GTK4 widgets** — Real native controls, not web components in a webview
+- **Adwaita support** — Modern GNOME styling with Libadwaita components
+- **Hot Module Replacement** — Fast refresh during development
+- **TypeScript first** — Full type safety with auto-generated bindings
+- **CSS-in-JS styling** — Familiar styling patterns adapted for GTK
+- **Testing utilities** — Component testing similar to Testing Library
 
-  const button = await screen.findByRole(Gtk.AccessibleRole.BUTTON, {
-    name: "Increment",
-  });
+## Examples
 
-  await userEvent.click(button);
+Explore complete applications in the [`examples/`](./examples) directory:
 
-  await screen.findByText("Count: 1");
-});
-```
+- **[gtk-demo](./examples/gtk-demo)** — Full replica of the official GTK demo app
+- **[hello-world](./examples/hello-world)** — Minimal application showing a counter
+- **[todo](./examples/todo)** — Full-featured todo application with Adwaita styling and testing
+- **[deploying](./examples/deploying)** — Example of packaging and distributing a GTKX app
 
-## Requirements
+## Documentation
 
-- Node.js 20+ (Deno support experimental)
-- GTK4 Runtime (`gtk4` on Fedora, `libgtk-4-1` on Ubuntu)
+Visit [https://eugeniodepalo.github.io/gtkx](https://eugeniodepalo.github.io/gtkx/) for the full documentation.
 
 ## Contributing
 
-We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+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).
+
+## Community
 
-- [Report a bug](https://github.com/eugeniodepalo/gtkx/issues/new?template=bug_report.md)
-- [Request a feature](https://github.com/eugeniodepalo/gtkx/issues/new?template=feature_request.md)
+- [GitHub Discussions](https://github.com/eugeniodepalo/gtkx/discussions) — Questions, ideas, and general discussion
+- [Issue Tracker](https://github.com/eugeniodepalo/gtkx/issues) — Bug reports and feature requests
 
 ## License
 
-[MPL-2.0](LICENSE)
+[MPL-2.0](./LICENSE)

package/dist/errors.d.ts

@@ -1,8 +1,8 @@
-export declare class GTKXError extends Error {
+export declare class GtkxError extends Error {
     widgetType?: string | undefined;
     componentStack?: string | undefined;
     constructor(message: string, widgetType?: string | undefined, componentStack?: string | undefined);
     toString(): string;
 }
-export declare function formatRenderError(error: unknown, widgetType?: string): GTKXError;
-export declare function formatBoundaryError(error: unknown): GTKXError;
+export declare function formatRenderError(error: unknown, widgetType?: string): GtkxError;
+export declare function formatBoundaryError(error: unknown): GtkxError;

package/dist/errors.js

@@ -1,17 +1,17 @@
-export class GTKXError extends Error {
+export class GtkxError extends Error {
     widgetType;
     componentStack;
     constructor(message, widgetType, componentStack) {
         super(message);
         this.widgetType = widgetType;
         this.componentStack = componentStack;
-        this.name = "GTKXError";
+        this.name = "GtkxError";
         if (Error.captureStackTrace) {
-            Error.captureStackTrace(this, GTKXError);
+            Error.captureStackTrace(this, GtkxError);
         }
     }
     toString() {
-        const parts = [`GTKXError: ${this.message}`];
+        const parts = [`GtkxError: ${this.message}`];
         if (this.widgetType) {
             parts.push(`Widget Type: ${this.widgetType}`);
         }
@@ -22,17 +22,17 @@ export class GTKXError extends Error {
     }
 }
 export function formatRenderError(error, widgetType) {
-    if (error instanceof GTKXError) {
+    if (error instanceof GtkxError) {
         return error;
     }
     const message = error instanceof Error ? error.message : String(error);
     const formattedMessage = widgetType ? `Failed to render ${widgetType}: ${message}` : `Render error: ${message}`;
-    return new GTKXError(formattedMessage, widgetType);
+    return new GtkxError(formattedMessage, widgetType);
 }
 export function formatBoundaryError(error) {
-    if (error instanceof GTKXError) {
+    if (error instanceof GtkxError) {
         return error;
     }
     const message = error instanceof Error ? error.message : String(error);
-    return new GTKXError(`Error caught by boundary: ${message}`);
+    return new GtkxError(`Error caught by boundary: ${message}`);
 }

package/dist/factory.d.ts

@@ -1,6 +1,4 @@
-import type * as Gtk from "@gtkx/ffi/gtk";
 import type { Node } from "./node.js";
-import { type ROOT_NODE_CONTAINER } from "./nodes/root.js";
-export type Props = Record<string, unknown>;
-export { ROOT_NODE_CONTAINER } from "./nodes/root.js";
-export declare const createNode: (type: string, props: Props, widget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER) => Node;
+import type { Container, Props } from "./types.js";
+import "./nodes/index.js";
+export declare const createNode: (typeName: string, props: Props, existingContainer?: Container, rootContainer?: Container) => Node;

package/dist/factory.js

@@ -1,75 +1,22 @@
-import { AboutDialogNode } from "./nodes/about-dialog.js";
-import { ActionBarNode } from "./nodes/action-bar.js";
-import { ColumnViewColumnNode, ColumnViewItemNode, ColumnViewNode } from "./nodes/column-view.js";
-import { ComboRowNode } from "./nodes/combo-row.js";
-import { DropDownItemNode, DropDownNode } from "./nodes/drop-down.js";
-import { FlowBoxNode } from "./nodes/flow-box.js";
-import { GridChildNode, GridNode } from "./nodes/grid.js";
-import { AdwHeaderBarNode, HeaderBarNode, PackEndNode, PackStartNode } from "./nodes/header-bar.js";
-import { ListBoxNode } from "./nodes/list-box.js";
-import { ListItemNode, ListViewNode } from "./nodes/list-view.js";
-import { ApplicationMenuNode, MenuItemNode, MenuSectionNode, MenuSubmenuNode, PopoverMenuBarNode, PopoverMenuRootNode, } from "./nodes/menu.js";
-import { NotebookNode, NotebookPageNode } from "./nodes/notebook.js";
-import { OverlayNode } from "./nodes/overlay.js";
-import { RootNode } from "./nodes/root.js";
-import { SlotNode } from "./nodes/slot.js";
-import { StackNode, StackPageNode } from "./nodes/stack.js";
-import { TextViewNode } from "./nodes/text-view.js";
-import { ToggleButtonNode } from "./nodes/toggle-button.js";
-import { ToolbarViewSlotNode } from "./nodes/toolbar-view.js";
-import { ViewStackNode } from "./nodes/view-stack.js";
-import { WidgetNode } from "./nodes/widget.js";
-import { WindowNode } from "./nodes/window.js";
-export { ROOT_NODE_CONTAINER } from "./nodes/root.js";
-const VIRTUAL_NODES = [
-    ColumnViewColumnNode,
-    ColumnViewItemNode,
-    ListItemNode,
-    DropDownItemNode,
-    GridChildNode,
-    NotebookPageNode,
-    StackPageNode,
-    MenuItemNode,
-    MenuSectionNode,
-    MenuSubmenuNode,
-    ToolbarViewSlotNode,
-    PackStartNode,
-    PackEndNode,
-    SlotNode,
-];
-const SPECIALIZED_NODES = [
-    WindowNode,
-    AboutDialogNode,
-    TextViewNode,
-    ToggleButtonNode,
-    ApplicationMenuNode,
-    PopoverMenuRootNode,
-    PopoverMenuBarNode,
-];
-const CONTAINER_NODES = [
-    ActionBarNode,
-    FlowBoxNode,
-    ListBoxNode,
-    DropDownNode,
-    ComboRowNode,
-    GridNode,
-    OverlayNode,
-    ColumnViewNode,
-    ListViewNode,
-    NotebookNode,
-    StackNode,
-    ViewStackNode,
-    AdwHeaderBarNode,
-    HeaderBarNode,
-];
-const NODE_CLASSES = [RootNode, ...VIRTUAL_NODES, ...SPECIALIZED_NODES, ...CONTAINER_NODES, WidgetNode];
-export const createNode = (type, props, widget) => {
+import { NAMESPACE_REGISTRY } from "./generated/registry.js";
+import { NODE_CLASSES } from "./registry.js";
+import "./nodes/index.js";
+const resolveContainerClass = (type) => {
+    for (const [prefix, namespace] of NAMESPACE_REGISTRY) {
+        if (type.startsWith(prefix)) {
+            const className = type.slice(prefix.length);
+            return namespace[className];
+        }
+    }
+};
+export const createNode = (typeName, props, existingContainer, rootContainer) => {
+    const containerClass = resolveContainerClass(typeName);
     for (const NodeClass of NODE_CLASSES) {
-        if (NodeClass.matches(type, widget)) {
-            const node = new NodeClass(type, widget);
-            node.initialize(props);
-            return node;
+        if (NodeClass.matches(typeName, existingContainer ?? containerClass)) {
+            const container = existingContainer ??
+                (containerClass && NodeClass.createContainer(props, containerClass, rootContainer));
+            return new NodeClass(typeName, props, container, rootContainer);
         }
     }
-    throw new Error(`No matching node class for type: ${type}`);
+    throw new Error(`Unable to find node class for type '${typeName}'`);
 };

package/dist/fiber-root.d.ts

@@ -1,3 +1,3 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
 import type Reconciler from "react-reconciler";
-export declare const createFiberRoot: (container?: Gtk.Widget) => Reconciler.FiberRoot;
+export declare const createFiberRoot: (container: Gtk.Widget) => Reconciler.FiberRoot;

package/dist/fiber-root.js

@@ -1,6 +1,5 @@
-import { ROOT_NODE_CONTAINER } from "./factory.js";
 import { reconciler } from "./reconciler.js";
 export const createFiberRoot = (container) => {
     const instance = reconciler.getInstance();
-    return instance.createContainer(container ?? ROOT_NODE_CONTAINER, 0, null, false, null, "", (error) => console.error("Fiber root render error:", error), () => { }, () => { }, () => { }, null);
+    return instance.createContainer(container, 0, null, false, null, "", (error) => console.error("Fiber root render error:", error), () => { }, () => { }, () => { }, null);
 };

package/dist/generated/internal.d.ts

@@ -1,7 +1,4 @@
 /** Internal metadata for the reconciler. Not part of the public API. */
-export declare const CONSTRUCTOR_PARAMS: Record<string, {
-    name: string;
-    hasDefault: boolean;
-}[]>;
-export declare const PROP_SETTERS: Record<string, Record<string, string>>;
-export declare const SETTER_GETTERS: Record<string, Record<string, string>>;
+export declare const CONSTRUCTOR_PROPS: Record<string, string[]>;
+export declare const PROPS: Record<string, Record<string, [string | null, string]>>;
+export declare const SIGNALS: Record<string, Set<string>>;