@gtkx/react 0.3.5 → 0.4.1

package/README.md

@@ -57,7 +57,7 @@ const App = () => {
 
   return (
     <ApplicationWindow title="Counter" onCloseRequest={quit}>
-      <Box orientation={Orientation.VERTICAL} spacing={12} margin={20}>
+      <Box orientation={Orientation.VERTICAL} spacing={12}>
         <Label.Root label={`Count: ${count}`} />
         <Button label="Increment" onClicked={() => setCount((c) => c + 1)} />
       </Box>
@@ -117,10 +117,6 @@ User events: `click`, `dblClick`, `type`, `clear`, `tab`, `selectOptions`
 | [gtk4-demo](examples/gtk4-demo) | Widget showcase     |
 | [todo](examples/todo)           | Todo app with tests |
 
-```bash
-cd examples/gtk4-demo && pnpm dev
-```
-
 ## Packages
 
 | Package                           | Description                           |
@@ -136,7 +132,7 @@ cd examples/gtk4-demo && pnpm dev
 ## Requirements
 
 - Node.js 20+
-- GTK4 (`gtk4-devel` on Fedora, `libgtk-4-dev` on Ubuntu)
+- GTK4 Runtime (`gtk4` on Fedora, `libgtk-4-1` on Ubuntu)
 - Linux
 
 ## Contributing

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.5",
+  "version": "0.4.1",
   "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.5"
+    "@gtkx/ffi": "0.4.1"
   },
   "devDependencies": {
-    "@gtkx/gir": "0.3.5"
+    "@gtkx/gir": "0.4.1"
   },
   "peerDependencies": {
     "react": "^19"