@gtkx/react 0.12.0 → 0.13.0

package/dist/nodes/virtual-child.js

@@ -0,0 +1,62 @@
+import { isObjectEqual } from "@gtkx/ffi";
+import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+export class VirtualChildNode extends VirtualNode {
+    parent;
+    children = [];
+    setParent(newParent) {
+        this.parent = newParent;
+    }
+    unmount() {
+        const parent = this.parent;
+        const childrenToRemove = [...this.children];
+        if (parent && childrenToRemove.length > 0) {
+            scheduleAfterCommit(() => {
+                for (const widget of childrenToRemove) {
+                    const currentParent = widget.getParent();
+                    if (currentParent && isObjectEqual(currentParent, parent)) {
+                        parent.remove(widget);
+                    }
+                }
+            }, CommitPriority.HIGH);
+        }
+        this.children = [];
+        this.parent = undefined;
+        super.unmount();
+    }
+    appendChild(child) {
+        if (!(child instanceof WidgetNode)) {
+            throw new Error(`Cannot append '${child.typeName}' to '${this.typeName}': expected Widget`);
+        }
+        const widget = child.container;
+        this.children.push(widget);
+        scheduleAfterCommit(() => {
+            if (this.parent) {
+                this.attachChild(this.parent, widget);
+            }
+        });
+    }
+    insertBefore(child) {
+        this.appendChild(child);
+    }
+    removeChild(child) {
+        if (!(child instanceof WidgetNode)) {
+            throw new Error(`Cannot remove '${child.typeName}' from '${this.typeName}': expected Widget`);
+        }
+        const widget = child.container;
+        const parent = this.parent;
+        const index = this.children.indexOf(widget);
+        if (index !== -1) {
+            this.children.splice(index, 1);
+        }
+        scheduleAfterCommit(() => {
+            if (parent) {
+                const currentParent = widget.getParent();
+                if (currentParent && isObjectEqual(currentParent, parent)) {
+                    parent.remove(widget);
+                }
+            }
+        }, CommitPriority.HIGH);
+    }
+}

package/dist/nodes/widget.js

@@ -93,23 +93,23 @@ export class WidgetNode extends Node {
             ...Object.keys(filterProps(oldProps ?? {}, ["children"])),
             ...Object.keys(filterProps(newProps ?? {}, ["children"])),
         ]);
+        const pendingSignals = [];
         for (const name of propNames) {
             const oldValue = oldProps?.[name];
             const newValue = newProps[name];
             if (oldValue === newValue)
                 continue;
             if (EVENT_CONTROLLER_PROPS.has(name)) {
-                this.updateEventControllerProp(name, newValue ?? null);
+                pendingSignals.push({ name, newValue });
                 continue;
             }
             if (name === "onNotify") {
-                this.updateNotifyHandler(newValue ?? null);
+                pendingSignals.push({ name, newValue });
                 continue;
             }
             const signalName = this.propNameToSignalName(name);
             if (resolveSignal(this.container, signalName)) {
-                const handler = typeof newValue === "function" ? newValue : undefined;
-                signalStore.set(this, this.container, signalName, handler);
+                pendingSignals.push({ name, newValue });
             }
             else if (newValue !== undefined) {
                 const isEditableText = name === "text" && isEditable(this.container);
@@ -122,8 +122,22 @@ export class WidgetNode extends Node {
                 this.setProperty(name, newValue);
             }
         }
+        for (const { name, newValue } of pendingSignals) {
+            if (EVENT_CONTROLLER_PROPS.has(name)) {
+                this.updateEventControllerProp(name, newValue ?? null);
+            }
+            else if (name === "onNotify") {
+                this.updateNotifyHandler(newValue ?? null);
+            }
+            else {
+                const signalName = this.propNameToSignalName(name);
+                const handler = typeof newValue === "function" ? newValue : undefined;
+                signalStore.set(this, this.container, signalName, handler);
+            }
+        }
     }
     updateEventControllerProp(propName, handler) {
+        const wrappedHandler = handler ? (_self, ...args) => handler(...args) : undefined;
         switch (propName) {
             case "onEnter":
             case "onLeave":
@@ -133,7 +147,7 @@ export class WidgetNode extends Node {
                     this.container.addController(this.motionController);
                 }
                 const signalName = propName === "onEnter" ? "enter" : propName === "onLeave" ? "leave" : "motion";
-                signalStore.set(this, this.motionController, signalName, handler);
+                signalStore.set(this, this.motionController, signalName, wrappedHandler);
                 break;
             }
             case "onPressed":
@@ -143,7 +157,7 @@ export class WidgetNode extends Node {
                     this.container.addController(this.clickController);
                 }
                 const signalName = propName === "onPressed" ? "pressed" : "released";
-                signalStore.set(this, this.clickController, signalName, handler);
+                signalStore.set(this, this.clickController, signalName, wrappedHandler);
                 break;
             }
             case "onKeyPressed":
@@ -153,7 +167,7 @@ export class WidgetNode extends Node {
                     this.container.addController(this.keyController);
                 }
                 const signalName = propName === "onKeyPressed" ? "key-pressed" : "key-released";
-                signalStore.set(this, this.keyController, signalName, handler);
+                signalStore.set(this, this.keyController, signalName, wrappedHandler);
                 break;
             }
             case "onScroll": {
@@ -161,7 +175,7 @@ export class WidgetNode extends Node {
                     this.scrollController = new Gtk.EventControllerScroll(Gtk.EventControllerScrollFlags.BOTH_AXES);
                     this.container.addController(this.scrollController);
                 }
-                signalStore.set(this, this.scrollController, "scroll", handler);
+                signalStore.set(this, this.scrollController, "scroll", wrappedHandler);
                 break;
             }
         }

package/dist/nodes/window.d.ts

@@ -1 +1,23 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { Node } from "../node.js";
+import type { Container, ContainerClass, Props } from "../types.js";
+import { WidgetNode } from "./widget.js";
+type WindowProps = Props & {
+    defaultWidth?: number;
+    defaultHeight?: number;
+    onClose?: () => void;
+};
+export declare class WindowNode extends WidgetNode<Gtk.Window, WindowProps> {
+    static priority: number;
+    private menu;
+    static matches(_type: string, containerOrClass?: Container | ContainerClass | null): boolean;
+    static createContainer(props: Props, containerClass: typeof Gtk.Window, rootContainer?: Container): Gtk.Window;
+    constructor(typeName: string, props: WindowProps, container: Gtk.Window, rootContainer?: Container);
+    appendChild(child: Node): void;
+    removeChild(child: Node): void;
+    insertBefore(child: Node, before: Node): void;
+    mount(): void;
+    unmount(): void;
+    updateProps(oldProps: WindowProps | null, newProps: WindowProps): void;
+}
 export {};

package/dist/nodes/window.js

@@ -1,11 +1,12 @@
 import * as Adw from "@gtkx/ffi/adw";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { registerNodeClass } from "../registry.js";
+import { signalStore } from "./internal/signal-store.js";
 import { filterProps, isContainerType } from "./internal/utils.js";
 import { Menu } from "./models/menu.js";
 import { WidgetNode } from "./widget.js";
-const PROPS = ["defaultWidth", "defaultHeight"];
-class WindowNode extends WidgetNode {
+const PROPS = ["defaultWidth", "defaultHeight", "onClose"];
+export class WindowNode extends WidgetNode {
     static priority = 1;
     menu;
     static matches(_type, containerOrClass) {
@@ -67,6 +68,14 @@ class WindowNode extends WidgetNode {
             const height = newProps.defaultHeight ?? -1;
             this.container.setDefaultSize(width, height);
         }
+        if (oldProps?.onClose !== newProps.onClose) {
+            const userHandler = newProps.onClose;
+            const wrappedHandler = () => {
+                userHandler?.();
+                return true;
+            };
+            signalStore.set(this, this.container, "close-request", wrappedHandler);
+        }
         super.updateProps(filterProps(oldProps ?? {}, PROPS), filterProps(newProps, PROPS));
     }
 }

package/dist/render.d.ts

@@ -69,7 +69,7 @@ export declare const setHotReloading: (value: boolean) => void;
  * import { render, quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onCloseRequest={quit}>
+ *   <GtkApplicationWindow title="My App" onClose={quit}>
  *     <GtkLabel label="Hello, GTKX!" />
  *   </GtkApplicationWindow>
  * );
@@ -107,16 +107,14 @@ export declare const update: (element: ReactNode) => Promise<void>;
  * Gracefully shuts down the GTK application.
  *
  * Unmounts the React component tree and stops the GTK main loop.
- * Typically used as the `onCloseRequest` handler for the application window.
- *
- * @returns `false` to allow GTK to close the window
+ * Typically used as the `onClose` handler for the application window.
  *
  * @example
  * ```tsx
  * import { quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onCloseRequest={quit}>
+ *   <GtkApplicationWindow title="My App" onClose={quit}>
  *     <GtkButton label="Quit" onClicked={quit} />
  *   </GtkApplicationWindow>
  * );

package/dist/render.js

@@ -84,7 +84,7 @@ export const setHotReloading = (value) => {
  * import { render, quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onCloseRequest={quit}>
+ *   <GtkApplicationWindow title="My App" onClose={quit}>
  *     <GtkLabel label="Hello, GTKX!" />
  *   </GtkApplicationWindow>
  * );
@@ -140,16 +140,14 @@ export const update = (element) => {
  * Gracefully shuts down the GTK application.
  *
  * Unmounts the React component tree and stops the GTK main loop.
- * Typically used as the `onCloseRequest` handler for the application window.
- *
- * @returns `false` to allow GTK to close the window
+ * Typically used as the `onClose` handler for the application window.
  *
  * @example
  * ```tsx
  * import { quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onCloseRequest={quit}>
+ *   <GtkApplicationWindow title="My App" onClose={quit}>
  *     <GtkButton label="Quit" onClicked={quit} />
  *   </GtkApplicationWindow>
  * );

package/dist/scheduler.d.ts

@@ -1,4 +1,16 @@
 type Callback = () => void;
-export declare const scheduleAfterCommit: (callback: Callback) => void;
+export declare enum CommitPriority {
+    /** Runs first. Used for widget removals to unparent before reparenting. */
+    HIGH = 0,
+    /** Runs after HIGH priority. Used for widget additions. */
+    NORMAL = 1,
+    /** Runs last. Used for model sync operations that need all data to be added first. */
+    LOW = 2
+}
+/**
+ * Schedule a callback to run after commit with the specified priority.
+ * HIGH priority callbacks run before NORMAL priority callbacks.
+ */
+export declare const scheduleAfterCommit: (callback: Callback, priority?: CommitPriority) => void;
 export declare const flushAfterCommit: () => void;
 export {};

package/dist/scheduler.js

@@ -1,10 +1,30 @@
-const pendingCallbacks = [];
-export const scheduleAfterCommit = (callback) => {
-    pendingCallbacks.push(callback);
+export var CommitPriority;
+(function (CommitPriority) {
+    /** Runs first. Used for widget removals to unparent before reparenting. */
+    CommitPriority[CommitPriority["HIGH"] = 0] = "HIGH";
+    /** Runs after HIGH priority. Used for widget additions. */
+    CommitPriority[CommitPriority["NORMAL"] = 1] = "NORMAL";
+    /** Runs last. Used for model sync operations that need all data to be added first. */
+    CommitPriority[CommitPriority["LOW"] = 2] = "LOW";
+})(CommitPriority || (CommitPriority = {}));
+const queues = {
+    [CommitPriority.HIGH]: [],
+    [CommitPriority.NORMAL]: [],
+    [CommitPriority.LOW]: [],
+};
+const priorities = [CommitPriority.HIGH, CommitPriority.NORMAL, CommitPriority.LOW];
+/**
+ * Schedule a callback to run after commit with the specified priority.
+ * HIGH priority callbacks run before NORMAL priority callbacks.
+ */
+export const scheduleAfterCommit = (callback, priority = CommitPriority.NORMAL) => {
+    queues[priority].push(callback);
 };
 export const flushAfterCommit = () => {
-    const callbacks = pendingCallbacks.splice(0);
-    for (const callback of callbacks) {
-        callback();
+    for (const priority of priorities) {
+        const callbacks = queues[priority].splice(0);
+        for (const callback of callbacks) {
+            callback();
+        }
     }
 };

package/dist/types.d.ts

@@ -1,4 +1,29 @@
+import type * as Gdk from "@gtkx/ffi/gdk";
 import type * as Gtk from "@gtkx/ffi/gtk";
 export type Container = Gtk.Widget | Gtk.Application;
 export type Props = Record<string, unknown>;
 export type ContainerClass = typeof Gtk.Widget | typeof Gtk.Application;
+/**
+ * Props for EventController-based event handlers.
+ *
+ * These props attach EventControllers to widgets for handling
+ * pointer motion, clicks, and keyboard events.
+ */
+export interface EventControllerProps {
+    /** Called when the pointer enters the widget */
+    onEnter?: (x: number, y: number) => void;
+    /** Called when the pointer leaves the widget */
+    onLeave?: () => void;
+    /** Called when the pointer moves over the widget */
+    onMotion?: (x: number, y: number) => void;
+    /** Called when a mouse button is pressed */
+    onPressed?: (nPress: number, x: number, y: number) => void;
+    /** Called when a mouse button is released */
+    onReleased?: (nPress: number, x: number, y: number) => void;
+    /** Called when a key is pressed (for focusable widgets) */
+    onKeyPressed?: (keyval: number, keycode: number, state: Gdk.ModifierType) => boolean;
+    /** Called when a key is released */
+    onKeyReleased?: (keyval: number, keycode: number, state: Gdk.ModifierType) => void;
+    /** Called when the widget is scrolled */
+    onScroll?: (dx: number, dy: number) => boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtkx",
@@ -37,8 +37,8 @@
   ],
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@gtkx/ffi": "0.12.0",
-    "@gtkx/gir": "0.12.0"
+    "@gtkx/ffi": "0.13.0",
+    "@gtkx/gir": "0.13.0"
   },
   "devDependencies": {
     "@types/react-reconciler": "^0.32.3"