@gtkx/react 0.1.24 → 0.1.26

package/dist/factory.d.ts

@@ -1,4 +1,4 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
 import type { Node } from "./node.js";
 export type Props = Record<string, unknown>;
-export declare const createNode: (type: string, props: Props, app: Gtk.Application) => Node;
+export declare const createNode: (type: string, props: Props, app: Gtk.Application, existingWidget?: Gtk.Widget) => Node;

package/dist/factory.js

@@ -5,20 +5,20 @@ import { OverlayNode } from "./nodes/overlay.js";
 import { SlotNode } from "./nodes/slot.js";
 import { WidgetNode } from "./nodes/widget.js";
 const NODE_CLASSES = [
-    SlotNode,
     ListItemNode,
     DropDownItemNode,
-    DropDownNode,
     GridChildNode,
+    SlotNode,
+    DropDownNode,
     GridNode,
     OverlayNode,
     ListViewNode,
     WidgetNode,
 ];
-export const createNode = (type, props, app) => {
+export const createNode = (type, props, app, existingWidget) => {
     for (const NodeClass of NODE_CLASSES) {
         if (NodeClass.matches(type)) {
-            return new NodeClass(type, props, app);
+            return new NodeClass(type, props, app, existingWidget);
         }
     }
     throw new Error(`No matching node class for type: ${type}`);

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export { createPortal } from "./portal.js";
 export { reconciler } from "./reconciler.js";
 export { render } from "./render.js";
 export declare const quit: () => boolean;
+export declare const getApp: () => import("@gtkx/ffi/gtk").Application;

package/dist/index.js

@@ -14,3 +14,4 @@ export const quit = () => {
     }
     return true;
 };
+export const getApp = () => reconciler.getApp();

package/dist/node.d.ts

@@ -5,14 +5,15 @@ export declare abstract class Node<T extends Gtk.Widget | undefined = Gtk.Widget
     protected signalHandlers: Map<string, number>;
     protected widget: T;
     protected isVirtual(): boolean;
-    constructor(type: string, props: Props, app: Gtk.Application);
+    constructor(type: string, props: Props, app: Gtk.Application, existingWidget?: Gtk.Widget);
     protected createWidget(type: string, props: Props, app: Gtk.Application): T;
     getWidget(): T;
     appendChild(child: Node): void;
     removeChild(child: Node): void;
-    insertBefore(child: Node, _before: Node): void;
+    insertBefore(child: Node, before: Node): void;
     attachToParent(parent: Node): void;
     detachFromParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
     protected setSignalProperty(widget: Gtk.Widget, key: string, handler: unknown): void;

package/dist/node.js

@@ -17,7 +17,11 @@ export class Node {
     isVirtual() {
         return false;
     }
-    constructor(type, props, app) {
+    constructor(type, props, app, existingWidget) {
+        if (existingWidget) {
+            this.widget = existingWidget;
+            return;
+        }
         this.widget = (this.isVirtual() ? undefined : this.createWidget(type, props, app));
         this.updateProps({}, props);
     }
@@ -27,7 +31,7 @@ export class Node {
         if (!WidgetClass) {
             throw new Error(`Unknown GTK widget type: ${normalizedType}`);
         }
-        if (normalizedType === "ApplicationWindow") {
+        if (WidgetClass === Gtk.ApplicationWindow) {
             return new WidgetClass(app);
         }
         return new WidgetClass(...extractConstructorArgs(normalizedType, props));
@@ -41,8 +45,8 @@ export class Node {
     removeChild(child) {
         child.detachFromParent(this);
     }
-    insertBefore(child, _before) {
-        this.appendChild(child);
+    insertBefore(child, before) {
+        child.attachToParentBefore(this, before);
     }
     attachToParent(parent) {
         const parentWidget = parent.getWidget();
@@ -50,7 +54,7 @@ export class Node {
         if (!parentWidget || !widget)
             return;
         if (isAppendable(parentWidget)) {
-            parentWidget.append(widget);
+            widget.insertBefore(parentWidget, null);
         }
         else if (isSingleChild(parentWidget)) {
             parentWidget.setChild(widget);
@@ -68,6 +72,19 @@ export class Node {
             parentWidget.setChild(null);
         }
     }
+    attachToParentBefore(parent, before) {
+        const parentWidget = parent.getWidget();
+        const widget = this.getWidget();
+        const beforeWidget = before.getWidget();
+        if (!parentWidget || !widget)
+            return;
+        if (isAppendable(parentWidget) && beforeWidget) {
+            widget.insertBefore(parentWidget, beforeWidget);
+        }
+        else {
+            this.attachToParent(parent);
+        }
+    }
     consumedProps() {
         return new Set(["children"]);
     }

package/dist/nodes/list.d.ts

@@ -11,6 +11,7 @@ export declare class ListViewNode extends Node<Gtk.ListView> {
     private factorySignalHandlers;
     constructor(type: string, props: Props, app: Gtk.Application);
     addItem(item: unknown): void;
+    insertItemBefore(item: unknown, beforeItem: unknown): void;
     removeItem(item: unknown): void;
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
@@ -23,5 +24,6 @@ export declare class ListItemNode extends Node {
     constructor(type: string, props: Props, app: Gtk.Application);
     getItem(): unknown;
     attachToParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
     detachFromParent(parent: Node): void;
 }

package/dist/nodes/list.js

@@ -43,6 +43,15 @@ export class ListViewNode extends Node {
         this.items.push(item);
         this.stringList.append("");
     }
+    insertItemBefore(item, beforeItem) {
+        const beforeIndex = this.items.indexOf(beforeItem);
+        if (beforeIndex === -1) {
+            this.addItem(item);
+            return;
+        }
+        this.items.splice(beforeIndex, 0, item);
+        this.stringList.splice(beforeIndex, 0, [""]);
+    }
     removeItem(item) {
         const index = this.items.indexOf(item);
         if (index !== -1) {
@@ -92,6 +101,14 @@ export class ListItemNode extends Node {
             parent.addItem(this.item);
         }
     }
+    attachToParentBefore(parent, before) {
+        if (parent instanceof ListViewNode && before instanceof ListItemNode) {
+            parent.insertItemBefore(this.item, before.getItem());
+        }
+        else {
+            this.attachToParent(parent);
+        }
+    }
     detachFromParent(parent) {
         if (parent instanceof ListViewNode) {
             parent.removeItem(this.item);

package/dist/nodes/overlay.d.ts

@@ -5,5 +5,6 @@ export declare class OverlayNode extends Node<Gtk.Overlay> {
     private mainChild;
     private overlayChildren;
     attachChild(childWidget: Gtk.Widget): void;
+    insertChildBefore(childWidget: Gtk.Widget, beforeWidget: Gtk.Widget): void;
     detachChild(childWidget: Gtk.Widget): void;
 }

package/dist/nodes/overlay.js

@@ -15,6 +15,25 @@ export class OverlayNode extends Node {
             this.widget.addOverlay(childWidget);
         }
     }
+    insertChildBefore(childWidget, beforeWidget) {
+        if (this.mainChild === null) {
+            this.mainChild = childWidget;
+            this.widget.setChild(childWidget);
+            return;
+        }
+        if (this.mainChild === beforeWidget) {
+            this.overlayChildren.unshift(childWidget);
+            this.widget.addOverlay(childWidget);
+            return;
+        }
+        const beforeIndex = this.overlayChildren.indexOf(beforeWidget);
+        if (beforeIndex === -1) {
+            this.attachChild(childWidget);
+            return;
+        }
+        this.overlayChildren.splice(beforeIndex, 0, childWidget);
+        this.widget.addOverlay(childWidget);
+    }
     detachChild(childWidget) {
         if (this.mainChild === childWidget) {
             this.widget.setChild(null);

package/dist/nodes/widget.d.ts

@@ -1,16 +1,13 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-export declare class WidgetWrapper extends Node<Gtk.Widget> {
-    constructor(widget: Gtk.Widget, app: Gtk.Application);
-    protected isVirtual(): boolean;
-}
 export declare class WidgetNode extends Node<Gtk.Widget> {
     static matches(_type: string): boolean;
     attachToParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
     detachFromParent(parent: Node): void;
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
-    mount(app: Gtk.Application): void;
-    dispose(app: Gtk.Application): void;
+    mount(_app: Gtk.Application): void;
+    dispose(_app: Gtk.Application): void;
 }

package/dist/nodes/widget.js

@@ -13,15 +13,6 @@ const COMBINED_PROPS = [
         },
     },
 ];
-export class WidgetWrapper extends Node {
-    constructor(widget, app) {
-        super("", {}, app);
-        this.widget = widget;
-    }
-    isVirtual() {
-        return true;
-    }
-}
 export class WidgetNode extends Node {
     static matches(_type) {
         return true;
@@ -47,6 +38,40 @@ export class WidgetNode extends Node {
         }
         super.attachToParent(parent);
     }
+    attachToParentBefore(parent, before) {
+        if (this.widget instanceof Gtk.AboutDialog) {
+            return;
+        }
+        if (parent instanceof OverlayNode) {
+            const beforeWidget = before.getWidget();
+            if (beforeWidget) {
+                parent.insertChildBefore(this.widget, beforeWidget);
+            }
+            else {
+                parent.attachChild(this.widget);
+            }
+            return;
+        }
+        const parentWidget = parent.getWidget();
+        const beforeWidget = before.getWidget();
+        if (!parentWidget)
+            return;
+        if (parentWidget instanceof Gtk.ActionBar) {
+            parentWidget.packStart(this.widget);
+            return;
+        }
+        if (parentWidget instanceof Gtk.Notebook && beforeWidget) {
+            const beforePageNum = parentWidget.pageNum(beforeWidget);
+            if (beforePageNum >= 0) {
+                parentWidget.insertPage(this.widget, beforePageNum);
+            }
+            else {
+                parentWidget.appendPage(this.widget);
+            }
+            return;
+        }
+        super.attachToParentBefore(parent, before);
+    }
     detachFromParent(parent) {
         if (this.widget instanceof Gtk.AboutDialog) {
             return;
@@ -73,7 +98,6 @@ export class WidgetNode extends Node {
     }
     consumedProps() {
         const consumed = super.consumedProps();
-        consumed.add("application");
         for (const handler of COMBINED_PROPS) {
             for (const prop of handler.props) {
                 consumed.add(prop);
@@ -94,21 +118,14 @@ export class WidgetNode extends Node {
         }
         super.updateProps(oldProps, newProps);
     }
-    mount(app) {
-        if (this.widget instanceof Gtk.AboutDialog) {
-            const activeWindow = app.getActiveWindow();
-            if (activeWindow) {
-                this.widget.setTransientFor(activeWindow);
-            }
-        }
+    mount(_app) {
         if (this.widget instanceof Gtk.Window) {
             this.widget.present();
         }
     }
-    dispose(app) {
-        super.dispose(app);
+    dispose(_app) {
         if (this.widget instanceof Gtk.Window) {
-            this.widget.close();
+            this.widget.destroy();
         }
     }
 }

package/dist/reconciler.d.ts

@@ -17,6 +17,7 @@ declare class Reconciler {
     getInstance(): ReconcilerInstance;
     private createHostConfig;
     private createReconcilerContext;
+    private createNodeFromContainer;
 }
 export declare const reconciler: Reconciler;
 export {};

package/dist/reconciler.js

@@ -2,7 +2,6 @@ import * as Gtk from "@gtkx/ffi/gtk";
 import React from "react";
 import ReactReconciler from "react-reconciler";
 import { createNode } from "./factory.js";
-import { WidgetWrapper } from "./nodes/widget.js";
 class Reconciler {
     instance;
     app = null;
@@ -45,19 +44,16 @@ class Reconciler {
             removeChild: (parent, child) => parent.removeChild(child),
             insertBefore: (parent, child, beforeChild) => parent.insertBefore(child, beforeChild),
             removeChildFromContainer: (container, child) => {
-                if (container instanceof Gtk.Widget) {
-                    child.detachFromParent(new WidgetWrapper(container, this.getApp()));
-                }
+                const parent = this.createNodeFromContainer(container);
+                parent.removeChild(child);
             },
             appendChildToContainer: (container, child) => {
-                if (container instanceof Gtk.Widget) {
-                    child.attachToParent(new WidgetWrapper(container, this.getApp()));
-                }
+                const parent = this.createNodeFromContainer(container);
+                parent.appendChild(child);
             },
-            insertInContainerBefore: (container, child, _beforeChild) => {
-                if (container instanceof Gtk.Widget) {
-                    child.attachToParent(new WidgetWrapper(container, this.getApp()));
-                }
+            insertInContainerBefore: (container, child, beforeChild) => {
+                const parent = this.createNodeFromContainer(container);
+                parent.insertBefore(child, beforeChild);
             },
             prepareForCommit: () => null,
             resetAfterCommit: () => { },
@@ -104,5 +100,11 @@ class Reconciler {
         const context = React.createContext(value);
         return context;
     }
+    createNodeFromContainer(container) {
+        if (container instanceof Gtk.Widget) {
+            return createNode(container.constructor.name, {}, this.getApp(), container);
+        }
+        return createNode("Application", {}, this.getApp(), container);
+    }
 }
 export const reconciler = new Reconciler();

package/dist/render.d.ts

@@ -1,5 +1,4 @@
 import type { ApplicationFlags } from "@gtkx/ffi/gio";
-import type { Application } from "@gtkx/ffi/gtk";
 import type { ReactNode } from "react";
 export declare let container: unknown;
-export declare const render: (element: ReactNode, appId: string, flags?: ApplicationFlags) => Application;
+export declare const render: (element: ReactNode, appId: string, flags?: ApplicationFlags) => void;

package/dist/render.js

@@ -9,5 +9,4 @@ export const render = (element, appId, flags) => {
         console.error("Uncaught error in GTKX application:", error, info);
     }, (_error, _info) => { }, (_error, _info) => { }, () => { }, null);
     instance.updateContainer(element, container, null, () => { });
-    return app;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtk",
@@ -40,10 +40,10 @@
   ],
   "dependencies": {
     "react-reconciler": "0.33.0",
-    "@gtkx/ffi": "0.1.24"
+    "@gtkx/ffi": "0.1.26"
   },
   "devDependencies": {
-    "@gtkx/gir": "0.1.24"
+    "@gtkx/gir": "0.1.26"
   },
   "peerDependencies": {
     "react": "^19"
@@ -51,6 +51,6 @@
   "scripts": {
     "build": "tsc -b && cp ../../README.md .",
     "codegen": "tsx scripts/codegen.ts",
-    "test": "GDK_BACKEND=x11 xvfb-run -a vitest run"
+    "test": "if [ -n \"$CI\" ]; then vitest run; else GDK_BACKEND=x11 xvfb-run -a vitest run; fi"
   }
 }