@gtkx/react 0.3.4 → 0.4.0

package/README.md

@@ -41,7 +41,14 @@ Edit your code and see changes instantly—no restart needed.
 ### Example
 
 ```tsx
-import { render, ApplicationWindow, Box, Button, Label, quit } from "@gtkx/react";
+import {
+  render,
+  ApplicationWindow,
+  Box,
+  Button,
+  Label,
+  quit,
+} from "@gtkx/react";
 import { Orientation } from "@gtkx/ffi/gtk";
 import { useState } from "react";
 
@@ -74,7 +81,7 @@ const primary = css`
   color: white;
 `;
 
-<Button label="Click me" cssClasses={[primary]} />
+<Button label="Click me" cssClasses={[primary]} />;
 ```
 
 GTK also provides built-in classes like `suggested-action`, `destructive-action`, `card`, and `heading`.
@@ -90,7 +97,9 @@ afterEach(() => cleanup());
 test("increments count", async () => {
   await render(<App />);
 
-  const button = await screen.findByRole(AccessibleRole.BUTTON, { name: "Increment" });
+  const button = await screen.findByRole(AccessibleRole.BUTTON, {
+    name: "Increment",
+  });
   await userEvent.click(button);
 
   await screen.findByText("Count: 1");
@@ -103,10 +112,10 @@ User events: `click`, `dblClick`, `type`, `clear`, `tab`, `selectOptions`
 
 ## Examples
 
-| Example | Description |
-| ------- | ----------- |
-| [gtk4-demo](examples/gtk4-demo) | Widget showcase |
-| [todo](examples/todo) | Todo app with tests |
+| Example                         | Description         |
+| ------------------------------- | ------------------- |
+| [gtk4-demo](examples/gtk4-demo) | Widget showcase     |
+| [todo](examples/todo)           | Todo app with tests |
 
 ```bash
 cd examples/gtk4-demo && pnpm dev
@@ -114,15 +123,15 @@ cd examples/gtk4-demo && pnpm dev
 
 ## Packages
 
-| Package | Description |
-| ------- | ----------- |
-| [@gtkx/cli](packages/cli) | CLI with HMR dev server |
-| [@gtkx/react](packages/react) | React reconciler and JSX components |
-| [@gtkx/ffi](packages/ffi) | TypeScript bindings for GTK4/GLib/GIO |
-| [@gtkx/native](packages/native) | Rust native module (libffi bridge) |
-| [@gtkx/css](packages/css) | CSS-in-JS styling |
-| [@gtkx/testing](packages/testing) | Testing utilities |
-| [@gtkx/gir](packages/gir) | GObject Introspection parser |
+| Package                           | Description                           |
+| --------------------------------- | ------------------------------------- |
+| [@gtkx/cli](packages/cli)         | CLI with HMR dev server               |
+| [@gtkx/react](packages/react)     | React reconciler and JSX components   |
+| [@gtkx/ffi](packages/ffi)         | TypeScript bindings for GTK4/GLib/GIO |
+| [@gtkx/native](packages/native)   | Rust native module (libffi bridge)    |
+| [@gtkx/css](packages/css)         | CSS-in-JS styling                     |
+| [@gtkx/testing](packages/testing) | Testing utilities                     |
+| [@gtkx/gir](packages/gir)         | GObject Introspection parser          |
 
 ## Requirements
 
@@ -136,7 +145,6 @@ We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
 
 - [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)
-- [Read the Code of Conduct](CODE_OF_CONDUCT.md)
 
 ## License
 

package/dist/factory.js

@@ -13,6 +13,7 @@ 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 { WidgetNode } from "./nodes/widget.js";
 import { WindowNode } from "./nodes/window.js";
 export { ROOT_NODE_CONTAINER } from "./nodes/root.js";
@@ -33,6 +34,7 @@ const SPECIALIZED_NODES = [
     WindowNode,
     AboutDialogNode,
     TextViewNode,
+    ToggleButtonNode,
     ApplicationMenuNode,
     PopoverMenuRootNode,
     PopoverMenuBarNode,

package/dist/node.js

@@ -136,9 +136,15 @@ export class Node {
         for (const { key } of signalUpdates) {
             this.disconnectSignal(this.propKeyToEventName(key));
         }
+        if (propertyUpdates.length > 0) {
+            widget.freezeNotify();
+        }
         for (const { key, newValue } of propertyUpdates) {
             this.setProperty(widget, key, newValue);
         }
+        if (propertyUpdates.length > 0) {
+            widget.thawNotify();
+        }
         for (const { key, newValue } of signalUpdates) {
             if (typeof newValue === "function") {
                 this.connectSignal(widget, this.propKeyToEventName(key), newValue);

package/dist/nodes/menu.js

@@ -177,7 +177,11 @@ export class MenuItemNode extends Node {
             this.onActivateCallback?.();
         });
         const app = getCurrentApp();
-        app.addAction(getInterface(this.action, Gio.Action));
+        const action = getInterface(this.action, Gio.Action);
+        if (!action) {
+            throw new Error("Failed to get Gio.Action interface from SimpleAction");
+        }
+        app.addAction(action);
         this.entry.action = `app.${this.actionName}`;
         if (this.currentAccels) {
             this.updateAccels(this.currentAccels);

package/dist/nodes/toggle-button.d.ts

@@ -0,0 +1,25 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { Props } from "../factory.js";
+import { Node } from "../node.js";
+type ToggleButtonState = {
+    lastPropsActive: boolean | undefined;
+};
+/**
+ * Specialized node for GtkToggleButton that prevents signal feedback loops.
+ *
+ * When multiple ToggleButtons share the same state (controlled components),
+ * React syncing the `active` prop via setActive() triggers the `toggled` signal.
+ * This node guards against that by tracking the expected active state and
+ * suppressing callbacks when the signal was caused by a programmatic update.
+ */
+export declare class ToggleButtonNode extends Node<Gtk.ToggleButton, ToggleButtonState> {
+    static matches(type: string): boolean;
+    initialize(props: Props): void;
+    attachToParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
+    detachFromParent(parent: Node): void;
+    protected consumedProps(): Set<string>;
+    updateProps(_oldProps: Props, newProps: Props): void;
+    protected connectSignal(widget: Gtk.Widget, eventName: string, handler: (...args: unknown[]) => unknown): void;
+}
+export {};

package/dist/nodes/toggle-button.js

@@ -0,0 +1,77 @@
+import { isChildContainer } from "../container-interfaces.js";
+import { Node } from "../node.js";
+/**
+ * Specialized node for GtkToggleButton that prevents signal feedback loops.
+ *
+ * When multiple ToggleButtons share the same state (controlled components),
+ * React syncing the `active` prop via setActive() triggers the `toggled` signal.
+ * This node guards against that by tracking the expected active state and
+ * suppressing callbacks when the signal was caused by a programmatic update.
+ */
+export class ToggleButtonNode extends Node {
+    static matches(type) {
+        return type === "ToggleButton.Root";
+    }
+    initialize(props) {
+        this.state = { lastPropsActive: undefined };
+        super.initialize(props);
+    }
+    attachToParent(parent) {
+        if (isChildContainer(parent)) {
+            parent.attachChild(this.widget);
+            return;
+        }
+        super.attachToParent(parent);
+    }
+    attachToParentBefore(parent, before) {
+        if (isChildContainer(parent)) {
+            const beforeWidget = before.getWidget();
+            if (beforeWidget) {
+                parent.insertChildBefore(this.widget, beforeWidget);
+            }
+            else {
+                parent.attachChild(this.widget);
+            }
+            return;
+        }
+        super.attachToParentBefore(parent, before);
+    }
+    detachFromParent(parent) {
+        if (isChildContainer(parent)) {
+            parent.detachChild(this.widget);
+            return;
+        }
+        super.detachFromParent(parent);
+    }
+    consumedProps() {
+        return new Set(["children", "active"]);
+    }
+    updateProps(_oldProps, newProps) {
+        const widget = this.getWidget();
+        if (!widget) {
+            super.updateProps(_oldProps, newProps);
+            return;
+        }
+        const newActive = newProps.active;
+        if (typeof newActive === "boolean") {
+            this.state.lastPropsActive = newActive;
+            if (widget.getActive() !== newActive) {
+                widget.setActive(newActive);
+            }
+        }
+        super.updateProps(_oldProps, newProps);
+    }
+    connectSignal(widget, eventName, handler) {
+        if (eventName === "toggled") {
+            const wrappedHandler = (...args) => {
+                if (this.widget?.getActive() === this.state.lastPropsActive) {
+                    return;
+                }
+                return handler(...args);
+            };
+            super.connectSignal(widget, eventName, wrappedHandler);
+            return;
+        }
+        super.connectSignal(widget, eventName, handler);
+    }
+}

package/dist/reconciler.js

@@ -1,3 +1,4 @@
+import { beginBatch, endBatch } from "@gtkx/ffi";
 import React from "react";
 import ReactReconciler from "react-reconciler";
 import { beginCommit, endCommit } from "./batch.js";
@@ -56,11 +57,13 @@ class Reconciler {
                 parent.insertBefore(child, beforeChild);
             },
             prepareForCommit: () => {
+                beginBatch();
                 beginCommit();
                 return null;
             },
             resetAfterCommit: () => {
                 endCommit();
+                endBatch();
             },
             commitTextUpdate: (textInstance, oldText, newText) => {
                 textInstance.updateProps({ label: oldText }, { label: newText });

package/dist/render.js

@@ -24,8 +24,10 @@ export let container = null;
 export const render = (element, appId, flags) => {
     start(appId, flags);
     const instance = reconciler.getInstance();
-    container = instance.createContainer(ROOT_NODE_CONTAINER, 0, null, false, null, "", (error, info) => {
-        console.error("Uncaught error in GTKX application:", error, info);
-    }, (_error, _info) => { }, (_error, _info) => { }, () => { }, null);
+    container = instance.createContainer(ROOT_NODE_CONTAINER, 0, null, false, null, "", (error) => {
+        throw error;
+    }, (error) => {
+        console.error("Error caught by ErrorBoundary:", error);
+    }, () => { }, () => { }, null);
     instance.updateContainer(element, container, null, () => { });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtk",
@@ -36,10 +36,10 @@
   ],
   "dependencies": {
     "react-reconciler": "0.33.0",
-    "@gtkx/ffi": "0.3.4"
+    "@gtkx/ffi": "0.4.0"
   },
   "devDependencies": {
-    "@gtkx/gir": "0.3.4"
+    "@gtkx/gir": "0.4.0"
   },
   "peerDependencies": {
     "react": "^19"