@gtkx/react 0.6.0 → 0.7.0

package/dist/nodes/header-bar.d.ts

@@ -1,19 +1,42 @@
 import type * as Adw from "@gtkx/ffi/adw";
 import type * as Gtk from "@gtkx/ffi/gtk";
+import { type PackContainer } from "../container-interfaces.js";
+import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-/**
- * Node for AdwHeaderBar that uses packStart for non-slot children.
- */
-export declare class AdwHeaderBarNode extends Node<Adw.HeaderBar> {
-    static matches(type: string): boolean;
+import { VirtualSlotNode } from "./virtual-slot.js";
+type HeaderBarWidget = Gtk.HeaderBar | Adw.HeaderBar | Gtk.ActionBar;
+export declare class PackContainerNode<T extends HeaderBarWidget> extends Node<T> implements PackContainer {
+    packStart(child: Gtk.Widget): void;
+    packEnd(child: Gtk.Widget): void;
+    removeFromPack(child: Gtk.Widget): void;
     appendChild(child: Node): void;
     removeChild(child: Node): void;
 }
-/**
- * Node for Gtk.HeaderBar that uses packStart for children.
- */
-export declare class HeaderBarNode extends Node<Gtk.HeaderBar> {
+export declare class AdwHeaderBarNode extends PackContainerNode<Adw.HeaderBar> {
+    static matches(type: string): boolean;
+}
+export declare class HeaderBarNode extends PackContainerNode<Gtk.HeaderBar> {
+    static matches(type: string): boolean;
+}
+type PackPosition = "start" | "end";
+type PackSlotProps = {
+    position: PackPosition;
+};
+declare abstract class PackSlotNode extends VirtualSlotNode<PackContainer, PackSlotProps> {
+    protected abstract readonly position: PackPosition;
+    protected isValidContainer(parent: Node): parent is Node & PackContainer;
+    protected extractSlotProps(_props: Props): PackSlotProps;
+    protected addToContainer(container: PackContainer, child: Gtk.Widget, props: PackSlotProps): void;
+    protected insertBeforeInContainer(container: PackContainer, child: Gtk.Widget, props: PackSlotProps, _before: Gtk.Widget): void;
+    protected removeFromContainer(container: PackContainer, child: Gtk.Widget): void;
+    protected updateInContainer(): void;
+}
+export declare class PackStartNode extends PackSlotNode {
+    protected readonly position: PackPosition;
+    static matches(type: string): boolean;
+}
+export declare class PackEndNode extends PackSlotNode {
+    protected readonly position: PackPosition;
     static matches(type: string): boolean;
-    appendChild(child: Node): void;
-    removeChild(child: Node): void;
 }
+export {};

package/dist/nodes/header-bar.js

@@ -1,10 +1,15 @@
+import { isPackContainer } from "../container-interfaces.js";
 import { Node } from "../node.js";
-/**
- * Node for AdwHeaderBar that uses packStart for non-slot children.
- */
-export class AdwHeaderBarNode extends Node {
-    static matches(type) {
-        return type === "AdwHeaderBar" || type === "AdwHeaderBar.Root";
+import { VirtualSlotNode } from "./virtual-slot.js";
+export class PackContainerNode extends Node {
+    packStart(child) {
+        this.widget.packStart(child);
+    }
+    packEnd(child) {
+        this.widget.packEnd(child);
+    }
+    removeFromPack(child) {
+        this.widget.remove(child);
     }
     appendChild(child) {
         const childWidget = child.getWidget();
@@ -12,34 +17,57 @@ export class AdwHeaderBarNode extends Node {
             child.attachToParent(this);
             return;
         }
-        this.widget.packStart(childWidget);
+        this.packStart(childWidget);
     }
     removeChild(child) {
         const childWidget = child.getWidget();
         if (childWidget) {
-            this.widget.remove(childWidget);
+            this.removeFromPack(childWidget);
         }
     }
 }
-/**
- * Node for Gtk.HeaderBar that uses packStart for children.
- */
-export class HeaderBarNode extends Node {
+export class AdwHeaderBarNode extends PackContainerNode {
     static matches(type) {
-        return type === "HeaderBar";
+        return type === "AdwHeaderBar" || type === "AdwHeaderBar.Root";
     }
-    appendChild(child) {
-        const childWidget = child.getWidget();
-        if (!childWidget) {
-            child.attachToParent(this);
-            return;
-        }
-        this.widget.packStart(childWidget);
+}
+export class HeaderBarNode extends PackContainerNode {
+    static matches(type) {
+        return type === "HeaderBar" || type === "HeaderBar.Root";
     }
-    removeChild(child) {
-        const childWidget = child.getWidget();
-        if (childWidget) {
-            this.widget.remove(childWidget);
+}
+class PackSlotNode extends VirtualSlotNode {
+    isValidContainer(parent) {
+        return isPackContainer(parent);
+    }
+    extractSlotProps(_props) {
+        return { position: this.position };
+    }
+    addToContainer(container, child, props) {
+        if (props.position === "start") {
+            container.packStart(child);
+        }
+        else {
+            container.packEnd(child);
         }
     }
+    insertBeforeInContainer(container, child, props, _before) {
+        this.addToContainer(container, child, props);
+    }
+    removeFromContainer(container, child) {
+        container.removeFromPack(child);
+    }
+    updateInContainer() { }
+}
+export class PackStartNode extends PackSlotNode {
+    position = "start";
+    static matches(type) {
+        return type === "HeaderBar.Start" || type === "AdwHeaderBar.Start" || type === "ActionBar.Start";
+    }
+}
+export class PackEndNode extends PackSlotNode {
+    position = "end";
+    static matches(type) {
+        return type === "HeaderBar.End" || type === "AdwHeaderBar.End" || type === "ActionBar.End";
+    }
 }

package/dist/nodes/indexed-child-container.d.ts

@@ -0,0 +1,16 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { ChildContainer } from "../container-interfaces.js";
+import { Node } from "../node.js";
+type IndexedWidget = Gtk.Widget & {
+    append(child: Gtk.Widget): void;
+    insert(child: Gtk.Widget, position: number): void;
+    remove(child: Gtk.Widget): void;
+};
+export declare abstract class IndexedChildContainerNode<T extends IndexedWidget> extends Node<T> implements ChildContainer {
+    protected abstract getInsertionIndex(before: Gtk.Widget): number;
+    protected getWidgetToRemove(child: Gtk.Widget): Gtk.Widget;
+    attachChild(child: Gtk.Widget): void;
+    insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
+    detachChild(child: Gtk.Widget): void;
+}
+export {};

package/dist/nodes/indexed-child-container.js

@@ -0,0 +1,22 @@
+import { Node } from "../node.js";
+export class IndexedChildContainerNode extends Node {
+    getWidgetToRemove(child) {
+        return child;
+    }
+    attachChild(child) {
+        this.widget.append(child);
+    }
+    insertChildBefore(child, before) {
+        const index = this.getInsertionIndex(before);
+        if (index >= 0) {
+            this.widget.insert(child, index);
+        }
+        else {
+            this.widget.append(child);
+        }
+    }
+    detachChild(child) {
+        const toRemove = this.getWidgetToRemove(child);
+        this.widget.remove(toRemove);
+    }
+}

package/dist/nodes/list-box.d.ts

@@ -1,9 +1,6 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
-import type { ChildContainer } from "../container-interfaces.js";
-import { Node } from "../node.js";
-export declare class ListBoxNode extends Node<Gtk.ListBox> implements ChildContainer {
+import { IndexedChildContainerNode } from "./indexed-child-container.js";
+export declare class ListBoxNode extends IndexedChildContainerNode<Gtk.ListBox> {
     static matches(type: string): boolean;
-    attachChild(child: Gtk.Widget): void;
-    insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
-    detachChild(child: Gtk.Widget): void;
+    protected getInsertionIndex(before: Gtk.Widget): number;
 }

package/dist/nodes/list-box.js

@@ -1,21 +1,13 @@
-import { Node } from "../node.js";
-const isListBoxRow = (widget) => "getIndex" in widget && "isSelected" in widget && typeof widget.getIndex === "function";
-export class ListBoxNode extends Node {
+import { isListBoxRow } from "../predicates.js";
+import { IndexedChildContainerNode } from "./indexed-child-container.js";
+export class ListBoxNode extends IndexedChildContainerNode {
     static matches(type) {
         return type === "ListBox";
     }
-    attachChild(child) {
-        this.widget.append(child);
-    }
-    insertChildBefore(child, before) {
+    getInsertionIndex(before) {
         if (isListBoxRow(before)) {
-            this.widget.insert(child, before.getIndex());
-        }
-        else {
-            this.widget.append(child);
+            return before.getIndex();
         }
-    }
-    detachChild(child) {
-        this.widget.remove(child);
+        return -1;
     }
 }

package/dist/nodes/list-item-factory.d.ts

@@ -0,0 +1,19 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type Reconciler from "react-reconciler";
+import type { RenderItemFn } from "../types.js";
+export type ListItemInfo = {
+    box: Gtk.Box;
+    fiberRoot: Reconciler.FiberRoot;
+};
+type ListItemFactoryConfig = {
+    factory: Gtk.SignalListItemFactory;
+    listItemCache: Map<number, ListItemInfo>;
+    getRenderFn: () => RenderItemFn<unknown>;
+    getItemAtPosition: (position: number) => unknown;
+};
+export type ListItemFactoryHandlers = {
+    handlerIds: number[];
+    disconnect: () => void;
+};
+export declare function connectListItemFactorySignals(config: ListItemFactoryConfig): ListItemFactoryHandlers;
+export {};

package/dist/nodes/list-item-factory.js

@@ -0,0 +1,58 @@
+import { getObject, getObjectId } from "@gtkx/ffi";
+import * as GObject from "@gtkx/ffi/gobject";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { createFiberRoot } from "../fiber-root.js";
+import { reconciler } from "../reconciler.js";
+export function connectListItemFactorySignals(config) {
+    const { factory, listItemCache, getRenderFn, getItemAtPosition } = config;
+    const handlerIds = [];
+    const setupId = factory.connect("setup", (_self, listItemObj) => {
+        const listItem = getObject(listItemObj.id);
+        const id = getObjectId(listItemObj.id);
+        const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
+        listItem.setChild(box);
+        const fiberRoot = createFiberRoot(box);
+        listItemCache.set(id, { box, fiberRoot });
+        const element = getRenderFn()(null);
+        reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
+    });
+    handlerIds.push(setupId);
+    const bindId = factory.connect("bind", (_self, listItemObj) => {
+        const listItem = getObject(listItemObj.id);
+        const id = getObjectId(listItemObj.id);
+        const info = listItemCache.get(id);
+        if (!info)
+            return;
+        const position = listItem.getPosition();
+        const item = getItemAtPosition(position);
+        const element = getRenderFn()(item ?? null);
+        reconciler.getInstance().updateContainer(element, info.fiberRoot, null, () => { });
+    });
+    handlerIds.push(bindId);
+    const unbindId = factory.connect("unbind", (_self, listItemObj) => {
+        const id = getObjectId(listItemObj.id);
+        const info = listItemCache.get(id);
+        if (!info)
+            return;
+        reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
+    });
+    handlerIds.push(unbindId);
+    const teardownId = factory.connect("teardown", (_self, listItemObj) => {
+        const id = getObjectId(listItemObj.id);
+        const info = listItemCache.get(id);
+        if (info) {
+            reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
+            queueMicrotask(() => listItemCache.delete(id));
+        }
+    });
+    handlerIds.push(teardownId);
+    return {
+        handlerIds,
+        disconnect: () => {
+            for (const handlerId of handlerIds) {
+                GObject.signalHandlerDisconnect(factory, handlerId);
+            }
+            handlerIds.length = 0;
+        },
+    };
+}

package/dist/nodes/list-view.d.ts

@@ -0,0 +1,24 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { Props } from "../factory.js";
+import type { Node } from "../node.js";
+import type { RenderItemFn } from "../types.js";
+import { type ListItemFactoryHandlers, type ListItemInfo } from "./list-item-factory.js";
+import { SelectableListNode, type SelectableListState } from "./selectable-list.js";
+import { VirtualItemNode } from "./virtual-item.js";
+type ListViewState = SelectableListState & {
+    factory: Gtk.SignalListItemFactory;
+    factoryHandlers: ListItemFactoryHandlers | null;
+    renderItem: RenderItemFn<unknown>;
+    listItemCache: Map<number, ListItemInfo>;
+};
+export declare class ListViewNode extends SelectableListNode<Gtk.ListView | Gtk.GridView, ListViewState> {
+    static consumedPropNames: string[];
+    static matches(type: string): boolean;
+    initialize(props: Props): void;
+    detachFromParent(parent: Node): void;
+    updateProps(oldProps: Props, newProps: Props): void;
+}
+export declare class ListItemNode extends VirtualItemNode {
+    static matches(type: string): boolean;
+}
+export {};

package/dist/nodes/list-view.js

@@ -0,0 +1,46 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { connectListItemFactorySignals } from "./list-item-factory.js";
+import { SelectableListNode } from "./selectable-list.js";
+import { VirtualItemNode } from "./virtual-item.js";
+export class ListViewNode extends SelectableListNode {
+    static consumedPropNames = ["renderItem", "selected", "onSelectionChanged", "selectionMode"];
+    static matches(type) {
+        return type === "ListView.Root" || type === "GridView.Root";
+    }
+    initialize(props) {
+        const selectionState = this.initializeSelectionState(props);
+        this.state = {
+            ...selectionState,
+            factory: new Gtk.SignalListItemFactory(),
+            factoryHandlers: null,
+            renderItem: props.renderItem,
+            listItemCache: new Map(),
+        };
+        super.initialize(props);
+        this.state.factoryHandlers = connectListItemFactorySignals({
+            factory: this.state.factory,
+            listItemCache: this.state.listItemCache,
+            getRenderFn: () => this.state.renderItem,
+            getItemAtPosition: (position) => this.getItems()[position] ?? null,
+        });
+        this.applySelectionModel();
+        this.widget.setFactory(this.state.factory);
+    }
+    detachFromParent(parent) {
+        this.state.factoryHandlers?.disconnect();
+        this.cleanupSelection();
+        super.detachFromParent(parent);
+    }
+    updateProps(oldProps, newProps) {
+        if (oldProps.renderItem !== newProps.renderItem) {
+            this.state.renderItem = newProps.renderItem;
+        }
+        this.updateSelectionProps(oldProps, newProps);
+        super.updateProps(oldProps, newProps);
+    }
+}
+export class ListItemNode extends VirtualItemNode {
+    static matches(type) {
+        return type === "ListView.Item" || type === "GridView.Item";
+    }
+}

package/dist/nodes/menu.d.ts

@@ -2,12 +2,12 @@ import * as Gio from "@gtkx/ffi/gio";
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-interface MenuEntry {
+type MenuEntry = {
     type: "item" | "section" | "submenu";
     label?: string;
     action?: string;
     menu?: Gio.Menu;
-}
+};
 interface MenuContainer {
     getMenu(): Gio.Menu;
     addMenuEntry(entry: MenuEntry): void;
@@ -24,15 +24,21 @@ declare abstract class MenuContainerNode<T extends Gtk.Widget | undefined> exten
     protected rebuildMenu(): void;
     protected onMenuRebuilt(): void;
 }
-export declare class PopoverMenuRootNode extends MenuContainerNode<Gtk.PopoverMenu> {
-    static matches(type: string): boolean;
+type MenuWidget = Gtk.Widget & {
+    setMenuModel(model: Gio.MenuModel | null): void;
+};
+declare abstract class MenuWidgetNode<T extends MenuWidget> extends MenuContainerNode<T> {
+    protected abstract createMenuWidget(menu: Gio.Menu): T;
     initialize(props: Props): void;
     protected onMenuRebuilt(): void;
 }
-export declare class PopoverMenuBarNode extends MenuContainerNode<Gtk.PopoverMenuBar> {
+export declare class PopoverMenuRootNode extends MenuWidgetNode<Gtk.PopoverMenu> {
     static matches(type: string): boolean;
-    initialize(props: Props): void;
-    protected onMenuRebuilt(): void;
+    protected createMenuWidget(menu: Gio.Menu): Gtk.PopoverMenu;
+}
+export declare class PopoverMenuBarNode extends MenuWidgetNode<Gtk.PopoverMenuBar> {
+    static matches(type: string): boolean;
+    protected createMenuWidget(menu: Gio.Menu): Gtk.PopoverMenuBar;
 }
 export declare class ApplicationMenuNode extends MenuContainerNode<never> {
     static matches(type: string): boolean;
@@ -43,6 +49,7 @@ export declare class ApplicationMenuNode extends MenuContainerNode<never> {
     protected onMenuRebuilt(): void;
 }
 export declare class MenuItemNode extends Node<never> {
+    static consumedPropNames: string[];
     static matches(type: string): boolean;
     protected isVirtual(): boolean;
     private entry;
@@ -55,7 +62,6 @@ export declare class MenuItemNode extends Node<never> {
     initialize(props: Props): void;
     attachToParent(parent: Node): void;
     detachFromParent(parent: Node): void;
-    protected consumedProps(): Set<string>;
     private isFieldInitializationIncomplete;
     updateProps(oldProps: Props, newProps: Props): void;
     private invokeCurrentCallback;
@@ -63,24 +69,24 @@ export declare class MenuItemNode extends Node<never> {
     private cleanupAction;
     private updateAccels;
 }
-export declare class MenuSectionNode extends MenuContainerNode<never> {
-    static matches(type: string): boolean;
+declare class MenuContainerItemNode extends MenuContainerNode<never> {
+    static consumedPropNames: string[];
+    protected entryType: "section" | "submenu";
+    protected matchType: string;
+    static matches(_type: string): boolean;
     protected isVirtual(): boolean;
     private entry;
     initialize(props: Props): void;
     attachToParent(parent: Node): void;
     detachFromParent(parent: Node): void;
-    protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
 }
-export declare class MenuSubmenuNode extends MenuContainerNode<never> {
+export declare class MenuSectionNode extends MenuContainerItemNode {
+    protected entryType: "section" | "submenu";
+    static matches(type: string): boolean;
+}
+export declare class MenuSubmenuNode extends MenuContainerItemNode {
+    protected entryType: "section" | "submenu";
     static matches(type: string): boolean;
-    protected isVirtual(): boolean;
-    private entry;
-    initialize(props: Props): void;
-    attachToParent(parent: Node): void;
-    detachFromParent(parent: Node): void;
-    protected consumedProps(): Set<string>;
-    updateProps(oldProps: Props, newProps: Props): void;
 }
 export {};

package/dist/nodes/menu.js

@@ -51,28 +51,29 @@ class MenuContainerNode extends Node {
     }
     onMenuRebuilt() { }
 }
-export class PopoverMenuRootNode extends MenuContainerNode {
-    static matches(type) {
-        return type === "PopoverMenu.Root";
-    }
+class MenuWidgetNode extends MenuContainerNode {
     initialize(props) {
-        this.widget = new Gtk.PopoverMenu(this.menu);
+        this.widget = this.createMenuWidget(this.menu);
         super.initialize(props);
     }
     onMenuRebuilt() {
         this.widget.setMenuModel(this.menu);
     }
 }
-export class PopoverMenuBarNode extends MenuContainerNode {
+export class PopoverMenuRootNode extends MenuWidgetNode {
     static matches(type) {
-        return type === "PopoverMenuBar";
+        return type === "PopoverMenu.Root";
     }
-    initialize(props) {
-        this.widget = new Gtk.PopoverMenuBar(this.menu);
-        super.initialize(props);
+    createMenuWidget(menu) {
+        return new Gtk.PopoverMenu(menu);
     }
-    onMenuRebuilt() {
-        this.widget.setMenuModel(this.menu);
+}
+export class PopoverMenuBarNode extends MenuWidgetNode {
+    static matches(type) {
+        return type === "PopoverMenuBar";
+    }
+    createMenuWidget(menu) {
+        return new Gtk.PopoverMenuBar(menu);
     }
 }
 export class ApplicationMenuNode extends MenuContainerNode {
@@ -98,6 +99,7 @@ export class ApplicationMenuNode extends MenuContainerNode {
     }
 }
 export class MenuItemNode extends Node {
+    static consumedPropNames = ["label", "onActivate", "accels"];
     static matches(type) {
         return type === "Menu.Item";
     }
@@ -131,13 +133,6 @@ export class MenuItemNode extends Node {
         this.cleanupAction();
         this.isAttached = false;
     }
-    consumedProps() {
-        const consumed = super.consumedProps();
-        consumed.add("label");
-        consumed.add("onActivate");
-        consumed.add("accels");
-        return consumed;
-    }
     isFieldInitializationIncomplete() {
         return !this.entry;
     }
@@ -173,7 +168,7 @@ export class MenuItemNode extends Node {
         this.action = new Gio.SimpleAction(this.actionName);
         this.signalHandlerId = this.action.connect("activate", () => this.invokeCurrentCallback());
         const app = getCurrentApp();
-        const action = getInterface(this.action, Gio.Action);
+        const action = getInterface(this.action.id, Gio.Action);
         if (!action) {
             throw new Error("Failed to get Gio.Action interface from SimpleAction");
         }
@@ -207,15 +202,19 @@ export class MenuItemNode extends Node {
         app.setAccelsForAction(`app.${this.actionName}`, accelArray);
     }
 }
-export class MenuSectionNode extends MenuContainerNode {
-    static matches(type) {
-        return type === "Menu.Section";
+class MenuContainerItemNode extends MenuContainerNode {
+    static consumedPropNames = ["label"];
+    entryType = "section";
+    matchType = "";
+    static matches(_type) {
+        return false;
     }
     isVirtual() {
         return true;
     }
     entry = { type: "section" };
     initialize(props) {
+        this.entry = { type: this.entryType };
         this.entry.menu = this.menu;
         this.entry.label = props.label;
         super.initialize(props);
@@ -230,11 +229,6 @@ export class MenuSectionNode extends MenuContainerNode {
             return;
         parent.removeMenuEntry(this.entry);
     }
-    consumedProps() {
-        const consumed = super.consumedProps();
-        consumed.add("label");
-        return consumed;
-    }
     updateProps(oldProps, newProps) {
         if (oldProps.label !== newProps.label && this.entry) {
             this.entry.label = newProps.label;
@@ -242,38 +236,15 @@ export class MenuSectionNode extends MenuContainerNode {
         super.updateProps(oldProps, newProps);
     }
 }
-export class MenuSubmenuNode extends MenuContainerNode {
+export class MenuSectionNode extends MenuContainerItemNode {
+    entryType = "section";
     static matches(type) {
-        return type === "Menu.Submenu";
-    }
-    isVirtual() {
-        return true;
-    }
-    entry = { type: "submenu" };
-    initialize(props) {
-        this.entry.menu = this.menu;
-        this.entry.label = props.label;
-        super.initialize(props);
-    }
-    attachToParent(parent) {
-        if (!isMenuContainer(parent))
-            return;
-        parent.addMenuEntry(this.entry);
-    }
-    detachFromParent(parent) {
-        if (!isMenuContainer(parent))
-            return;
-        parent.removeMenuEntry(this.entry);
-    }
-    consumedProps() {
-        const consumed = super.consumedProps();
-        consumed.add("label");
-        return consumed;
+        return type === "Menu.Section";
     }
-    updateProps(oldProps, newProps) {
-        if (oldProps.label !== newProps.label && this.entry) {
-            this.entry.label = newProps.label;
-        }
-        super.updateProps(oldProps, newProps);
+}
+export class MenuSubmenuNode extends MenuContainerItemNode {
+    entryType = "submenu";
+    static matches(type) {
+        return type === "Menu.Submenu";
     }
 }