@gtkx/react 0.9.4 → 0.10.0

package/dist/nodes/internal/list-store.js

@@ -0,0 +1,69 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { scheduleAfterCommit } from "../../scheduler.js";
+export class ListStore {
+    items = new Map();
+    model = new Gtk.StringList();
+    newSortedIds = [];
+    sortedIds = [];
+    shouldSync = false;
+    addItem(id, item) {
+        this.items.set(id, item);
+        const existingIndex = this.newSortedIds.indexOf(id);
+        if (existingIndex !== -1) {
+            this.newSortedIds.splice(existingIndex, 1);
+        }
+        this.newSortedIds.push(id);
+        this.scheduleSync();
+    }
+    removeItem(id) {
+        const index = this.newSortedIds.indexOf(id);
+        if (index !== -1) {
+            this.newSortedIds.splice(index, 1);
+            this.items.delete(id);
+            this.scheduleSync();
+        }
+    }
+    insertItemBefore(id, beforeId, item) {
+        this.items.set(id, item);
+        const existingIndex = this.newSortedIds.indexOf(id);
+        if (existingIndex !== -1) {
+            this.newSortedIds.splice(existingIndex, 1);
+        }
+        const beforeIndex = this.newSortedIds.indexOf(beforeId);
+        if (beforeIndex === -1) {
+            this.newSortedIds.push(id);
+        }
+        else {
+            this.newSortedIds.splice(beforeIndex, 0, id);
+        }
+        this.scheduleSync();
+    }
+    updateItem(id, item) {
+        if (this.items.has(id)) {
+            this.items.set(id, item);
+        }
+        else {
+            this.addItem(id, item);
+        }
+    }
+    getItem(id) {
+        return this.items.get(id);
+    }
+    getModel() {
+        return this.model;
+    }
+    scheduleSync() {
+        if (this.shouldSync) {
+            return;
+        }
+        this.shouldSync = true;
+        scheduleAfterCommit(() => this.sync());
+    }
+    sync() {
+        this.shouldSync = false;
+        const newOrder = this.newSortedIds;
+        const oldLength = this.sortedIds.length;
+        this.model.splice(0, oldLength, newOrder.length > 0 ? newOrder : undefined);
+        this.sortedIds = [...newOrder];
+    }
+}

package/dist/nodes/internal/predicates.d.ts

@@ -0,0 +1,26 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+export declare const isAppendable: (obj: unknown) => obj is Gtk.Widget & {
+    append: (child: Gtk.Widget) => void;
+};
+export declare const isAddable: (obj: unknown) => obj is Gtk.Widget & {
+    add: (child: Gtk.Widget) => void;
+};
+export declare const isSingleChild: (obj: unknown) => obj is Gtk.Widget & {
+    setChild: (child: Gtk.Widget | null) => void;
+};
+export declare const isRemovable: (obj: unknown) => obj is Gtk.Widget & {
+    remove: (child: Gtk.Widget) => void;
+};
+export declare const isReorderable: (obj: unknown) => obj is Gtk.Widget & {
+    reorderChildAfter: (child: Gtk.Widget, sibling?: Gtk.Widget) => void;
+    insertChildAfter: (child: Gtk.Widget, sibling?: Gtk.Widget) => void;
+};
+export declare const isInsertable: (obj: unknown) => obj is Gtk.Widget & {
+    insert: (child: Gtk.Widget, position: number) => void;
+    getFirstChild: () => Gtk.Widget | null;
+};
+export declare const isEditable: (obj: unknown) => obj is Gtk.Widget & {
+    getPosition: () => number;
+    setPosition: (position: number) => void;
+    getText: () => string;
+};

package/dist/nodes/internal/predicates.js

@@ -0,0 +1,36 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+export const isAppendable = (obj) => {
+    return obj instanceof Gtk.Widget && "append" in obj && typeof obj.append === "function";
+};
+export const isAddable = (obj) => {
+    return obj instanceof Gtk.Widget && "add" in obj && typeof obj.add === "function";
+};
+export const isSingleChild = (obj) => {
+    return obj instanceof Gtk.Widget && "setChild" in obj && typeof obj.setChild === "function";
+};
+export const isRemovable = (obj) => {
+    return obj instanceof Gtk.Widget && "remove" in obj && typeof obj.remove === "function";
+};
+export const isReorderable = (obj) => {
+    return (obj instanceof Gtk.Widget &&
+        "reorderChildAfter" in obj &&
+        typeof obj.reorderChildAfter === "function" &&
+        "insertChildAfter" in obj &&
+        typeof obj.insertChildAfter === "function");
+};
+export const isInsertable = (obj) => {
+    return (obj instanceof Gtk.Widget &&
+        "insert" in obj &&
+        typeof obj.insert === "function" &&
+        "getFirstChild" in obj &&
+        typeof obj.getFirstChild === "function");
+};
+export const isEditable = (obj) => {
+    return (obj instanceof Gtk.Widget &&
+        "getPosition" in obj &&
+        typeof obj.getPosition === "function" &&
+        "setPosition" in obj &&
+        typeof obj.setPosition === "function" &&
+        "getText" in obj &&
+        typeof obj.getText === "function");
+};

package/dist/nodes/internal/signal-store.d.ts

@@ -0,0 +1,9 @@
+import * as GObject from "@gtkx/ffi/gobject";
+export type SignalHandler = (...args: any[]) => any;
+export declare class SignalStore {
+    private signalHandlers;
+    private disconnect;
+    private connect;
+    set(obj: GObject.GObject, signal: string, handler?: SignalHandler): void;
+    clear(): void;
+}

package/dist/nodes/internal/signal-store.js

@@ -0,0 +1,54 @@
+import { getObjectId } from "@gtkx/ffi";
+import * as GObject from "@gtkx/ffi/gobject";
+import { isCommitting } from "../../host-config.js";
+const LIFECYCLE_SIGNALS = new Set([
+    "realize",
+    "unrealize",
+    "map",
+    "unmap",
+    "show",
+    "hide",
+    "destroy",
+    "resize",
+    "render",
+    "setup",
+    "bind",
+    "unbind",
+    "teardown",
+]);
+export class SignalStore {
+    signalHandlers = new Map();
+    disconnect(obj, signal) {
+        const objectId = getObjectId(obj.id);
+        const key = `${objectId}:${signal}`;
+        const existing = this.signalHandlers.get(key);
+        if (existing) {
+            GObject.signalHandlerDisconnect(existing.obj, existing.handlerId);
+            this.signalHandlers.delete(key);
+        }
+    }
+    connect(obj, signal, handler) {
+        const objectId = getObjectId(obj.id);
+        const key = `${objectId}:${signal}`;
+        const wrappedHandler = (...args) => {
+            if (isCommitting() && !LIFECYCLE_SIGNALS.has(signal)) {
+                return;
+            }
+            return handler(...args);
+        };
+        const handlerId = obj.connect(signal, wrappedHandler);
+        this.signalHandlers.set(key, { obj, handlerId });
+    }
+    set(obj, signal, handler) {
+        this.disconnect(obj, signal);
+        if (handler) {
+            this.connect(obj, signal, handler);
+        }
+    }
+    clear() {
+        for (const [_, { obj, handlerId }] of this.signalHandlers) {
+            GObject.signalHandlerDisconnect(obj, handlerId);
+        }
+        this.signalHandlers.clear();
+    }
+}

package/dist/nodes/internal/simple-list-store.d.ts

@@ -0,0 +1,14 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+export declare class SimpleListStore {
+    private ids;
+    private model;
+    addItem(id: string, label: string): void;
+    appendItem(id: string, label: string): void;
+    removeItem(id: string): void;
+    insertItemBefore(id: string, beforeId: string, label: string): void;
+    updateItem(id: string, label: string): void;
+    getItem(id: string): string | null;
+    getIdAtIndex(index: number): string | undefined;
+    getIndexById(id: string): number | undefined;
+    getModel(): Gtk.StringList;
+}

package/dist/nodes/internal/simple-list-store.js

@@ -0,0 +1,60 @@
+import { batch } from "@gtkx/ffi";
+import * as Gtk from "@gtkx/ffi/gtk";
+export class SimpleListStore {
+    ids = [];
+    model = new Gtk.StringList();
+    addItem(id, label) {
+        this.ids.push(id);
+        this.model.append(label);
+    }
+    appendItem(id, label) {
+        const existingIndex = this.ids.indexOf(id);
+        batch(() => {
+            if (existingIndex >= 0) {
+                this.model.remove(existingIndex);
+                this.ids.splice(existingIndex, 1);
+            }
+            this.ids.push(id);
+            this.model.append(label);
+        });
+    }
+    removeItem(id) {
+        const index = this.ids.indexOf(id);
+        if (index < 0) {
+            return;
+        }
+        this.model.remove(index);
+        this.ids.splice(index, 1);
+    }
+    insertItemBefore(id, beforeId, label) {
+        const beforeIndex = this.ids.indexOf(beforeId);
+        if (beforeIndex < 0) {
+            this.addItem(id, label);
+        }
+        else {
+            this.ids.splice(beforeIndex, 0, id);
+            this.model.splice(beforeIndex, 0, [label]);
+        }
+    }
+    updateItem(id, label) {
+        const index = this.ids.indexOf(id);
+        if (index < 0) {
+            this.addItem(id, label);
+            return;
+        }
+        this.model.splice(index, 1, [label]);
+    }
+    getItem(id) {
+        return this.model.getString(this.ids.indexOf(id));
+    }
+    getIdAtIndex(index) {
+        return this.ids[index];
+    }
+    getIndexById(id) {
+        const index = this.ids.indexOf(id);
+        return index >= 0 ? index : undefined;
+    }
+    getModel() {
+        return this.model;
+    }
+}

package/dist/nodes/internal/tree-list-item-renderer.d.ts

@@ -0,0 +1,18 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { ReactNode } from "react";
+import type { SignalStore } from "./signal-store.js";
+import type { TreeStore } from "./tree-store.js";
+export type TreeRenderItemFn<T> = (item: T | null, row: Gtk.TreeListRow | null) => ReactNode;
+export declare class TreeListItemRenderer {
+    private factory;
+    private store?;
+    private fiberRoots;
+    private renderFn?;
+    private signalStore;
+    constructor(signalStore: SignalStore);
+    getFactory(): Gtk.SignalListItemFactory;
+    setRenderFn(renderFn?: TreeRenderItemFn<unknown>): void;
+    setStore(store?: TreeStore): void;
+    private getStore;
+    private initialize;
+}

package/dist/nodes/internal/tree-list-item-renderer.js

@@ -0,0 +1,90 @@
+import { getObjectId } from "@gtkx/ffi";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { createFiberRoot } from "../../fiber-root.js";
+import { reconciler } from "../../reconciler.js";
+export class TreeListItemRenderer {
+    factory;
+    store;
+    fiberRoots = new Map();
+    renderFn = () => null;
+    signalStore;
+    constructor(signalStore) {
+        this.signalStore = signalStore;
+        this.factory = new Gtk.SignalListItemFactory();
+        this.initialize();
+    }
+    getFactory() {
+        return this.factory;
+    }
+    setRenderFn(renderFn) {
+        this.renderFn = renderFn;
+    }
+    setStore(store) {
+        this.store = store;
+    }
+    getStore() {
+        if (!this.store) {
+            throw new Error("Expected tree store to be set on TreeListItemRenderer");
+        }
+        return this.store;
+    }
+    initialize() {
+        this.signalStore.set(this.factory, "setup", (_self, listItem) => {
+            const ptr = getObjectId(listItem.id);
+            const expander = new Gtk.TreeExpander();
+            const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
+            expander.setChild(box);
+            listItem.setChild(expander);
+            const fiberRoot = createFiberRoot(box);
+            this.fiberRoots.set(ptr, fiberRoot);
+            const element = this.renderFn?.(null, null);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
+        });
+        this.signalStore.set(this.factory, "bind", (_self, listItem) => {
+            const ptr = getObjectId(listItem.id);
+            const fiberRoot = this.fiberRoots.get(ptr);
+            if (!fiberRoot)
+                return;
+            const treeListRow = listItem.getItem();
+            if (!treeListRow)
+                return;
+            const expander = listItem.getChild();
+            expander.setListRow(treeListRow);
+            const stringObject = treeListRow.getItem();
+            if (!stringObject)
+                return;
+            const id = stringObject.getString();
+            const itemData = this.getStore().getItem(id);
+            if (itemData) {
+                if (itemData.indentForDepth !== undefined) {
+                    expander.setIndentForDepth(itemData.indentForDepth);
+                }
+                if (itemData.indentForIcon !== undefined) {
+                    expander.setIndentForIcon(itemData.indentForIcon);
+                }
+                if (itemData.hideExpander !== undefined) {
+                    expander.setHideExpander(itemData.hideExpander);
+                }
+            }
+            const element = this.renderFn?.(itemData?.value ?? null, treeListRow);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
+        });
+        this.signalStore.set(this.factory, "unbind", (_self, listItem) => {
+            const ptr = getObjectId(listItem.id);
+            const fiberRoot = this.fiberRoots.get(ptr);
+            if (!fiberRoot)
+                return;
+            const expander = listItem.getChild();
+            expander.setListRow(undefined);
+            reconciler.getInstance().updateContainer(null, fiberRoot, null, () => { });
+        });
+        this.signalStore.set(this.factory, "teardown", (_self, listItem) => {
+            const ptr = getObjectId(listItem.id);
+            const fiberRoot = this.fiberRoots.get(ptr);
+            if (fiberRoot) {
+                reconciler.getInstance().updateContainer(null, fiberRoot, null, () => { });
+                queueMicrotask(() => this.fiberRoots.delete(ptr));
+            }
+        });
+    }
+}

package/dist/nodes/internal/tree-store.d.ts

@@ -0,0 +1,28 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+export interface TreeItemData<T = unknown> {
+    value: T;
+    indentForDepth?: boolean;
+    indentForIcon?: boolean;
+    hideExpander?: boolean;
+}
+export declare class TreeStore {
+    private items;
+    private rootIds;
+    private newRootIds;
+    private children;
+    private newChildren;
+    private rootModel;
+    private childModels;
+    private shouldSync;
+    constructor();
+    addItem(id: string, data: TreeItemData, parentId?: string): void;
+    removeItem(id: string, parentId?: string): void;
+    insertItemBefore(id: string, beforeId: string, data: TreeItemData, parentId?: string): void;
+    updateItem(id: string, data: TreeItemData): void;
+    getItem(id: string): TreeItemData | undefined;
+    getRootModel(): Gtk.StringList;
+    getChildrenModel(parentId: string): Gtk.StringList | null;
+    hasChildren(parentId: string): boolean;
+    private scheduleSync;
+    private sync;
+}

package/dist/nodes/internal/tree-store.js

@@ -0,0 +1,153 @@
+import { batch } from "@gtkx/ffi";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { scheduleAfterCommit } from "../../scheduler.js";
+export class TreeStore {
+    items = new Map();
+    rootIds = [];
+    newRootIds = [];
+    children = new Map();
+    newChildren = new Map();
+    rootModel;
+    childModels = new Map();
+    shouldSync = false;
+    constructor() {
+        this.rootModel = new Gtk.StringList();
+    }
+    addItem(id, data, parentId) {
+        this.items.set(id, data);
+        if (parentId === undefined) {
+            const existingIndex = this.newRootIds.indexOf(id);
+            if (existingIndex !== -1) {
+                this.newRootIds.splice(existingIndex, 1);
+            }
+            this.newRootIds.push(id);
+        }
+        else {
+            let siblings = this.newChildren.get(parentId);
+            if (!siblings) {
+                siblings = [];
+                this.newChildren.set(parentId, siblings);
+            }
+            const existingIndex = siblings.indexOf(id);
+            if (existingIndex !== -1) {
+                siblings.splice(existingIndex, 1);
+            }
+            siblings.push(id);
+        }
+        this.scheduleSync();
+    }
+    removeItem(id, parentId) {
+        this.items.delete(id);
+        this.newChildren.delete(id);
+        if (parentId === undefined) {
+            const index = this.newRootIds.indexOf(id);
+            if (index !== -1) {
+                this.newRootIds.splice(index, 1);
+            }
+        }
+        else {
+            const siblings = this.newChildren.get(parentId);
+            if (siblings) {
+                const index = siblings.indexOf(id);
+                if (index !== -1) {
+                    siblings.splice(index, 1);
+                }
+                if (siblings.length === 0) {
+                    this.newChildren.delete(parentId);
+                }
+            }
+        }
+        this.scheduleSync();
+    }
+    insertItemBefore(id, beforeId, data, parentId) {
+        this.items.set(id, data);
+        if (parentId === undefined) {
+            const existingIndex = this.newRootIds.indexOf(id);
+            if (existingIndex !== -1) {
+                this.newRootIds.splice(existingIndex, 1);
+            }
+            const beforeIndex = this.newRootIds.indexOf(beforeId);
+            if (beforeIndex === -1) {
+                this.newRootIds.push(id);
+            }
+            else {
+                this.newRootIds.splice(beforeIndex, 0, id);
+            }
+        }
+        else {
+            let siblings = this.newChildren.get(parentId);
+            if (!siblings) {
+                siblings = [];
+                this.newChildren.set(parentId, siblings);
+            }
+            const existingIndex = siblings.indexOf(id);
+            if (existingIndex !== -1) {
+                siblings.splice(existingIndex, 1);
+            }
+            const beforeIndex = siblings.indexOf(beforeId);
+            if (beforeIndex === -1) {
+                siblings.push(id);
+            }
+            else {
+                siblings.splice(beforeIndex, 0, id);
+            }
+        }
+        this.scheduleSync();
+    }
+    updateItem(id, data) {
+        if (this.items.has(id)) {
+            this.items.set(id, data);
+        }
+    }
+    getItem(id) {
+        return this.items.get(id);
+    }
+    getRootModel() {
+        return this.rootModel;
+    }
+    getChildrenModel(parentId) {
+        const childIds = this.children.get(parentId) ?? this.newChildren.get(parentId);
+        if (!childIds || childIds.length === 0) {
+            return null;
+        }
+        let model = this.childModels.get(parentId);
+        if (!model) {
+            model = new Gtk.StringList(childIds);
+            this.childModels.set(parentId, model);
+        }
+        return model;
+    }
+    hasChildren(parentId) {
+        const childIds = this.children.get(parentId);
+        return childIds !== undefined && childIds.length > 0;
+    }
+    scheduleSync() {
+        if (this.shouldSync) {
+            return;
+        }
+        this.shouldSync = true;
+        scheduleAfterCommit(() => this.sync());
+    }
+    sync() {
+        this.shouldSync = false;
+        batch(() => {
+            const oldRootLength = this.rootIds.length;
+            this.rootModel.splice(0, oldRootLength, this.newRootIds.length > 0 ? this.newRootIds : undefined);
+            this.rootIds = [...this.newRootIds];
+            for (const [parentId, newChildIds] of this.newChildren) {
+                const oldChildIds = this.children.get(parentId) ?? [];
+                const model = this.childModels.get(parentId);
+                if (model) {
+                    const oldLength = oldChildIds.length;
+                    model.splice(0, oldLength, newChildIds.length > 0 ? newChildIds : undefined);
+                }
+            }
+            for (const [parentId] of this.children) {
+                if (!this.newChildren.has(parentId)) {
+                    this.childModels.delete(parentId);
+                }
+            }
+            this.children = new Map(this.newChildren);
+        });
+    }
+}

package/dist/nodes/internal/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Container, ContainerClass, Props } from "../../types.js";
+export declare const isContainerType: (cls: new (...args: any[]) => Container, containerOrClass?: Container | ContainerClass) => boolean;
+export declare const filterProps: (props: Props, excludeKeys: string[]) => Props;

package/dist/nodes/internal/utils.js

@@ -0,0 +1,20 @@
+export const isContainerType = (
+// biome-ignore lint/suspicious/noExplicitAny: Required for contravariant behavior
+cls, containerOrClass) => {
+    if (!containerOrClass) {
+        return false;
+    }
+    if (containerOrClass instanceof cls) {
+        return true;
+    }
+    return containerOrClass === cls || Object.prototype.isPrototypeOf.call(cls, containerOrClass);
+};
+export const filterProps = (props, excludeKeys) => {
+    const result = {};
+    for (const key of Object.keys(props)) {
+        if (!excludeKeys.includes(key)) {
+            result[key] = props[key];
+        }
+    }
+    return result;
+};

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

@@ -0,0 +1,12 @@
+import type { ListItemProps } from "../jsx.js";
+import type { ListStore } from "./internal/list-store.js";
+import { VirtualNode } from "./virtual.js";
+type Props = Partial<ListItemProps>;
+export declare class ListItemNode<T extends Omit<ListStore, "items" | "model"> = ListStore, P extends Props = Props> extends VirtualNode<P> {
+    static priority: number;
+    private store?;
+    static matches(type: string): boolean;
+    setStore(store?: T): void;
+    updateProps(oldProps: P | null, newProps: P): void;
+}
+export {};

package/dist/nodes/list-item.js

@@ -0,0 +1,24 @@
+import { registerNodeClass } from "../registry.js";
+import { VirtualNode } from "./virtual.js";
+export class ListItemNode extends VirtualNode {
+    static priority = 1;
+    store;
+    static matches(type) {
+        return type === "ListItem";
+    }
+    setStore(store) {
+        this.store = store;
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!this.store) {
+            return;
+        }
+        if (!oldProps || oldProps.id !== newProps.id || oldProps.value !== newProps.value) {
+            if (newProps.id !== undefined) {
+                this.store.updateItem(newProps.id, newProps.value);
+            }
+        }
+    }
+}
+registerNodeClass(ListItemNode);

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

@@ -1,23 +1 @@
-import * as Gtk from "@gtkx/ffi/gtk";
-import type { Props } from "../factory.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;
-    unmount(): void;
-    updateProps(oldProps: Props, newProps: Props): void;
-}
-export declare class ListItemNode extends VirtualItemNode {
-    static matches(type: string): boolean;
-}
 export {};