@gtkx/react 0.6.1 → 0.8.0

package/dist/nodes/grid.js

@@ -1,6 +1,6 @@
 import { isGridContainer } from "../container-interfaces.js";
 import { Node } from "../node.js";
-import { getNumberProp } from "../props.js";
+import { VirtualSlotNode } from "./virtual-slot.js";
 export class GridNode extends Node {
     static matches(type) {
         return type === "Grid.Root";
@@ -12,78 +12,35 @@ export class GridNode extends Node {
         this.widget.remove(child);
     }
 }
-export class GridChildNode extends Node {
+export class GridChildNode extends VirtualSlotNode {
     static matches(type) {
         return type === "Grid.Child";
     }
-    isVirtual() {
-        return true;
+    isValidContainer(parent) {
+        return isGridContainer(parent);
     }
-    column = 0;
-    row = 0;
-    columnSpan = 1;
-    rowSpan = 1;
-    childWidget = null;
-    parentContainer = null;
-    initialize(props) {
-        this.column = getNumberProp(props, "column", 0);
-        this.row = getNumberProp(props, "row", 0);
-        this.columnSpan = getNumberProp(props, "columnSpan", 1);
-        this.rowSpan = getNumberProp(props, "rowSpan", 1);
-        super.initialize(props);
+    extractSlotProps(props) {
+        return {
+            column: props.column ?? 0,
+            row: props.row ?? 0,
+            columnSpan: props.columnSpan ?? 1,
+            rowSpan: props.rowSpan ?? 1,
+        };
     }
-    appendChild(child) {
-        const widget = child.getWidget();
-        if (widget) {
-            this.childWidget = widget;
-            if (this.parentContainer) {
-                this.attachChildToGrid();
-            }
-        }
+    addToContainer(container, child, props) {
+        container.attachToGrid(child, props.column, props.row, props.columnSpan, props.rowSpan);
     }
-    removeChild(child) {
-        const widget = child.getWidget();
-        if (widget && this.childWidget === widget) {
-            this.detachChildFromGrid();
-            this.childWidget = null;
-        }
+    insertBeforeInContainer(container, child, props, _before) {
+        this.addToContainer(container, child, props);
     }
-    attachChildToGrid() {
-        if (!this.parentContainer || !this.childWidget)
-            return;
-        this.parentContainer.attachToGrid(this.childWidget, this.column, this.row, this.columnSpan, this.rowSpan);
+    removeFromContainer(container, child) {
+        container.removeFromGrid(child);
     }
-    detachChildFromGrid() {
-        if (!this.parentContainer || !this.childWidget)
-            return;
-        this.parentContainer.removeFromGrid(this.childWidget);
-    }
-    attachToParent(parent) {
-        if (isGridContainer(parent)) {
-            this.parentContainer = parent;
-            if (this.childWidget) {
-                this.attachChildToGrid();
-            }
-        }
-    }
-    detachFromParent(parent) {
-        if (isGridContainer(parent)) {
-            this.detachChildFromGrid();
-            this.parentContainer = null;
-        }
+    updateInContainer(container, child, props) {
+        container.removeFromGrid(child);
+        container.attachToGrid(child, props.column, props.row, props.columnSpan, props.rowSpan);
     }
     updateProps(oldProps, newProps) {
-        const positionChanged = oldProps.column !== newProps.column ||
-            oldProps.row !== newProps.row ||
-            oldProps.columnSpan !== newProps.columnSpan ||
-            oldProps.rowSpan !== newProps.rowSpan;
-        if (positionChanged) {
-            this.detachChildFromGrid();
-            this.column = getNumberProp(newProps, "column", 0);
-            this.row = getNumberProp(newProps, "row", 0);
-            this.columnSpan = getNumberProp(newProps, "columnSpan", 1);
-            this.rowSpan = getNumberProp(newProps, "rowSpan", 1);
-            this.attachChildToGrid();
-        }
+        this.updateSlotPropsIfChanged(oldProps, newProps, ["column", "row", "columnSpan", "rowSpan"]);
     }
 }

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,60 @@ 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);
+        }
+        else {
+            child.detachFromParent(this);
         }
     }
 }
-/**
- * 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,8 +1,9 @@
 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;
+    protected getInsertionIndex(before: Gtk.Widget): number;
+    private unparentFromRow;
     attachChild(child: Gtk.Widget): void;
     insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
     detachChild(child: Gtk.Widget): void;

package/dist/nodes/list-box.js

@@ -1,21 +1,48 @@
-import { Node } from "../node.js";
-const isListBoxRow = (widget) => "getIndex" in widget && "isSelected" in widget && typeof widget.getIndex === "function";
-export class ListBoxNode extends Node {
+import { beginBatch, endBatch } from "@gtkx/ffi";
+import { isListBoxRow } from "../predicates.js";
+import { IndexedChildContainerNode } from "./indexed-child-container.js";
+export class ListBoxNode extends IndexedChildContainerNode {
     static matches(type) {
         return type === "ListBox";
     }
+    getInsertionIndex(before) {
+        const beforeParent = before.getParent();
+        if (beforeParent && isListBoxRow(beforeParent)) {
+            return beforeParent.getIndex();
+        }
+        return -1;
+    }
+    unparentFromRow(child) {
+        const parent = child.getParent();
+        if (parent && isListBoxRow(parent)) {
+            beginBatch();
+            parent.setChild(null);
+            this.widget.remove(parent);
+            endBatch();
+        }
+    }
     attachChild(child) {
+        this.unparentFromRow(child);
         this.widget.append(child);
     }
     insertChildBefore(child, before) {
-        if (isListBoxRow(before)) {
-            this.widget.insert(child, before.getIndex());
+        this.unparentFromRow(child);
+        const index = this.getInsertionIndex(before);
+        if (index >= 0) {
+            this.widget.insert(child, index);
         }
         else {
             this.widget.append(child);
         }
     }
     detachChild(child) {
-        this.widget.remove(child);
+        if (isListBoxRow(child)) {
+            beginBatch();
+            child.setChild(null);
+            this.widget.remove(child);
+            endBatch();
+            return;
+        }
+        this.unparentFromRow(child);
     }
 }

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 {};