@gtkx/react 0.15.0 → 0.17.1

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

@@ -1,122 +1,109 @@
-import { getNativeId } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { createFiberRoot } from "../../fiber-root.js";
 import { reconciler } from "../../reconciler.js";
-import { signalStore } from "./signal-store.js";
-export class TreeListItemRenderer {
-    factory;
-    store;
-    fiberRoots = new Map();
+import { BaseItemRenderer } from "./base-item-renderer.js";
+export class TreeListItemRenderer extends BaseItemRenderer {
     expanders = new Map();
     setupComplete = new Set();
     pendingBinds = new Map();
-    tornDown = new Set();
     renderFn = () => null;
-    estimatedItemHeight;
-    constructor() {
-        this.factory = new Gtk.SignalListItemFactory();
-        this.initialize();
-    }
-    getFactory() {
-        return this.factory;
-    }
+    boundItems = new Map();
     setRenderFn(renderFn) {
         this.renderFn = renderFn;
     }
-    setStore(store) {
-        this.store = store;
-    }
-    setEstimatedItemHeight(height) {
-        this.estimatedItemHeight = height;
+    rebindItem(id) {
+        const binding = this.boundItems.get(id);
+        if (!binding)
+            return;
+        const fiberRoot = this.fiberRoots.get(binding.ptr);
+        if (!fiberRoot)
+            return;
+        const expander = this.expanders.get(binding.ptr);
+        if (!expander)
+            return;
+        this.renderBind(binding.ptr, expander, binding.treeListRow, id, fiberRoot);
     }
-    getStore() {
-        if (!this.store) {
-            throw new Error("Expected tree store to be set on TreeListItemRenderer");
-        }
-        return this.store;
+    getStoreTypeName() {
+        return "tree store";
     }
     dispose() {
-        signalStore.clear(this);
-        this.fiberRoots.clear();
+        super.dispose();
         this.expanders.clear();
         this.setupComplete.clear();
         this.pendingBinds.clear();
-        this.tornDown.clear();
+        this.boundItems.clear();
     }
-    initialize() {
-        signalStore.set(this, this.factory, "setup", (_self, listItem) => {
-            const ptr = getNativeId(listItem.handle);
-            const expander = new Gtk.TreeExpander();
-            const box = new Gtk.Box(Gtk.Orientation.VERTICAL);
-            if (this.estimatedItemHeight !== undefined) {
-                box.setSizeRequest(-1, this.estimatedItemHeight);
-            }
-            expander.setChild(box);
-            listItem.setChild(expander);
-            const fiberRoot = createFiberRoot(box);
-            this.fiberRoots.set(ptr, fiberRoot);
-            this.expanders.set(ptr, expander);
-            const element = this.renderFn?.(null, null);
-            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {
-                if (this.tornDown.has(ptr))
-                    return;
-                this.setupComplete.add(ptr);
-                this.processPendingBind(ptr);
-            });
-        });
-        signalStore.set(this, this.factory, "bind", (_self, listItem) => {
-            const ptr = getNativeId(listItem.handle);
-            const fiberRoot = this.fiberRoots.get(ptr);
-            const expander = this.expanders.get(ptr);
-            if (!fiberRoot || !expander)
-                return;
+    renderItem(_ptr) {
+        return this.renderFn?.(null, null);
+    }
+    getItemFromListItem(listItem) {
+        const treeListRow = listItem.getItem();
+        if (!(treeListRow instanceof Gtk.TreeListRow))
+            return null;
+        const stringObject = treeListRow.getItem();
+        if (!(stringObject instanceof Gtk.StringObject))
+            return null;
+        return this.getStore().getItem(stringObject.getString());
+    }
+    onSetup(listItem, ptr) {
+        const expander = new Gtk.TreeExpander();
+        const box = this.createBox();
+        expander.setChild(box);
+        listItem.setChild(expander);
+        this.expanders.set(ptr, expander);
+        return box;
+    }
+    onSetupComplete(ptr) {
+        this.setupComplete.add(ptr);
+        this.processPendingBind(ptr);
+    }
+    onBind(listItem, ptr, fiberRoot) {
+        const expander = this.expanders.get(ptr);
+        if (!expander)
+            return;
+        const treeListRow = listItem.getItem();
+        if (!(treeListRow instanceof Gtk.TreeListRow))
+            return;
+        expander.setListRow(treeListRow);
+        const stringObject = treeListRow.getItem();
+        if (!(stringObject instanceof Gtk.StringObject))
+            return;
+        const id = stringObject.getString();
+        this.boundItems.set(id, { ptr, treeListRow });
+        if (!this.setupComplete.has(ptr)) {
+            this.pendingBinds.set(ptr, { treeListRow, expander, id });
+            return;
+        }
+        this.renderBind(ptr, expander, treeListRow, id, fiberRoot);
+    }
+    onUnbind(listItem) {
+        const expander = listItem.getChild();
+        if (expander instanceof Gtk.TreeExpander) {
+            expander.setListRow(null);
             const treeListRow = listItem.getItem();
-            if (!(treeListRow instanceof Gtk.TreeListRow))
-                return;
-            expander.setListRow(treeListRow);
-            const stringObject = treeListRow.getItem();
-            if (!(stringObject instanceof Gtk.StringObject))
-                return;
-            const id = stringObject.getString();
-            if (!this.setupComplete.has(ptr)) {
-                this.pendingBinds.set(ptr, { treeListRow, expander, id });
-                return;
+            if (treeListRow instanceof Gtk.TreeListRow) {
+                const stringObject = treeListRow.getItem();
+                if (stringObject instanceof Gtk.StringObject) {
+                    this.boundItems.delete(stringObject.getString());
+                }
             }
-            this.renderBind(ptr, expander, treeListRow, id);
-        });
-        signalStore.set(this, this.factory, "unbind", (_self, listItem) => {
-            const expander = listItem.getChild();
-            if (expander instanceof Gtk.TreeExpander) {
-                expander.setListRow(null);
-            }
-        });
-        signalStore.set(this, this.factory, "teardown", (_self, listItem) => {
-            const ptr = getNativeId(listItem.handle);
-            const fiberRoot = this.fiberRoots.get(ptr);
-            if (fiberRoot) {
-                this.tornDown.add(ptr);
-                reconciler.getInstance().updateContainer(null, fiberRoot, null, () => { });
-                queueMicrotask(() => {
-                    this.fiberRoots.delete(ptr);
-                    this.expanders.delete(ptr);
-                    this.setupComplete.delete(ptr);
-                    this.pendingBinds.delete(ptr);
-                    this.tornDown.delete(ptr);
-                });
-            }
-        });
+        }
+    }
+    onTeardown(_listItem, ptr) {
+        this.expanders.delete(ptr);
+        this.setupComplete.delete(ptr);
+        this.pendingBinds.delete(ptr);
     }
     processPendingBind(ptr) {
         const pending = this.pendingBinds.get(ptr);
         if (!pending)
             return;
         this.pendingBinds.delete(ptr);
-        this.renderBind(ptr, pending.expander, pending.treeListRow, pending.id);
-    }
-    renderBind(ptr, expander, treeListRow, id) {
         const fiberRoot = this.fiberRoots.get(ptr);
-        if (!fiberRoot)
-            return;
+        if (fiberRoot) {
+            this.renderBind(ptr, pending.expander, pending.treeListRow, pending.id, fiberRoot);
+        }
+    }
+    renderBind(ptr, expander, treeListRow, id, fiberRoot) {
         const itemData = this.getStore().getItem(id);
         if (itemData) {
             if (itemData.indentForDepth !== undefined) {
@@ -133,12 +120,14 @@ export class TreeListItemRenderer {
         reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {
             if (this.tornDown.has(ptr))
                 return;
+            if (this.estimatedItemHeight !== null)
+                return;
             const currentExpander = this.expanders.get(ptr);
             if (!currentExpander)
                 return;
             const box = currentExpander.getChild();
-            if (box instanceof Gtk.Box) {
-                box.setSizeRequest(-1, -1);
+            if (box) {
+                this.clearBoxSizeRequest(box);
             }
         });
     }

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

@@ -1,28 +1,25 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-export interface TreeItemData<T = unknown> {
+export type TreeItemUpdatedCallback = (id: string) => void;
+export type 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();
+    private items;
+    private onItemUpdated;
+    setOnItemUpdated(callback: TreeItemUpdatedCallback | null): void;
+    updateItem(id: string, item: TreeItemData): void;
     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 | null;
+    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

@@ -1,112 +1,138 @@
-import { batch } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { CommitPriority, scheduleAfterCommit } from "../../scheduler.js";
 export class TreeStore {
-    items = new Map();
     rootIds = [];
-    newRootIds = [];
     children = new Map();
-    newChildren = new Map();
-    rootModel;
+    rootModel = new Gtk.StringList();
     childModels = new Map();
-    shouldSync = false;
-    constructor() {
-        this.rootModel = new Gtk.StringList();
+    items = new Map();
+    onItemUpdated = null;
+    setOnItemUpdated(callback) {
+        this.onItemUpdated = callback;
+    }
+    updateItem(id, item) {
+        if (this.items.has(id)) {
+            this.items.set(id, item);
+            this.onItemUpdated?.(id);
+        }
+        else {
+            this.addItem(id, item);
+        }
     }
     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);
+            const existingIndex = this.rootIds.indexOf(id);
+            if (existingIndex >= 0) {
+                this.rootModel.remove(existingIndex);
+                this.rootIds.splice(existingIndex, 1);
             }
-            this.newRootIds.push(id);
+            this.rootIds.push(id);
+            this.rootModel.append(id);
         }
         else {
-            let siblings = this.newChildren.get(parentId);
+            let siblings = this.children.get(parentId);
             if (!siblings) {
                 siblings = [];
-                this.newChildren.set(parentId, siblings);
+                this.children.set(parentId, siblings);
             }
             const existingIndex = siblings.indexOf(id);
-            if (existingIndex !== -1) {
+            if (existingIndex >= 0) {
+                const model = this.childModels.get(parentId);
+                if (model) {
+                    model.remove(existingIndex);
+                }
                 siblings.splice(existingIndex, 1);
             }
             siblings.push(id);
+            let model = this.childModels.get(parentId);
+            if (!model) {
+                model = new Gtk.StringList();
+                this.childModels.set(parentId, model);
+            }
+            model.append(id);
         }
-        this.scheduleSync();
     }
     removeItem(id, parentId) {
         this.items.delete(id);
-        this.newChildren.delete(id);
+        this.children.delete(id);
+        this.childModels.delete(id);
         if (parentId === undefined) {
-            const index = this.newRootIds.indexOf(id);
-            if (index !== -1) {
-                this.newRootIds.splice(index, 1);
+            const index = this.rootIds.indexOf(id);
+            if (index >= 0) {
+                this.rootIds.splice(index, 1);
+                this.rootModel.remove(index);
             }
         }
         else {
-            const siblings = this.newChildren.get(parentId);
+            const siblings = this.children.get(parentId);
             if (siblings) {
                 const index = siblings.indexOf(id);
-                if (index !== -1) {
+                if (index >= 0) {
                     siblings.splice(index, 1);
+                    const model = this.childModels.get(parentId);
+                    if (model) {
+                        model.remove(index);
+                    }
                 }
                 if (siblings.length === 0) {
-                    this.newChildren.delete(parentId);
+                    this.children.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 existingIndex = this.rootIds.indexOf(id);
+            if (existingIndex >= 0) {
+                this.rootModel.remove(existingIndex);
+                this.rootIds.splice(existingIndex, 1);
             }
-            const beforeIndex = this.newRootIds.indexOf(beforeId);
-            if (beforeIndex === -1) {
-                this.newRootIds.push(id);
+            const beforeIndex = this.rootIds.indexOf(beforeId);
+            if (beforeIndex < 0) {
+                this.rootIds.push(id);
+                this.rootModel.append(id);
             }
             else {
-                this.newRootIds.splice(beforeIndex, 0, id);
+                this.rootIds.splice(beforeIndex, 0, id);
+                this.rootModel.splice(beforeIndex, 0, [id]);
             }
         }
         else {
-            let siblings = this.newChildren.get(parentId);
+            let siblings = this.children.get(parentId);
             if (!siblings) {
                 siblings = [];
-                this.newChildren.set(parentId, siblings);
+                this.children.set(parentId, siblings);
+            }
+            let model = this.childModels.get(parentId);
+            if (!model) {
+                model = new Gtk.StringList();
+                this.childModels.set(parentId, model);
             }
             const existingIndex = siblings.indexOf(id);
-            if (existingIndex !== -1) {
+            if (existingIndex >= 0) {
+                model.remove(existingIndex);
                 siblings.splice(existingIndex, 1);
             }
             const beforeIndex = siblings.indexOf(beforeId);
-            if (beforeIndex === -1) {
+            if (beforeIndex < 0) {
                 siblings.push(id);
+                model.append(id);
             }
             else {
                 siblings.splice(beforeIndex, 0, id);
+                model.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) ?? null;
+        return this.items.get(id);
     }
     getRootModel() {
         return this.rootModel;
     }
     getChildrenModel(parentId) {
-        const childIds = this.children.get(parentId) ?? this.newChildren.get(parentId);
+        const childIds = this.children.get(parentId);
         if (!childIds || childIds.length === 0) {
             return null;
         }
@@ -121,32 +147,4 @@ export class TreeStore {
         const childIds = this.children.get(parentId);
         return childIds !== undefined && childIds.length > 0;
     }
-    scheduleSync() {
-        if (this.shouldSync) {
-            return;
-        }
-        this.shouldSync = true;
-        scheduleAfterCommit(() => this.sync(), CommitPriority.LOW);
-    }
-    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 model = this.childModels.get(parentId);
-                if (model) {
-                    const oldLength = model.getNItems();
-                    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

@@ -1,9 +1,12 @@
 import type { Container, ContainerClass, Props } from "../../types.js";
 type AnyClass = new (...args: any[]) => any;
 export declare const matchesAnyClass: (classes: readonly AnyClass[], containerOrClass?: Container | ContainerClass | null) => boolean;
-export declare const isContainerType: (cls: AnyClass, containerOrClass?: Container | ContainerClass | null) => boolean;
 export declare const matchesInterface: (methods: readonly string[], containerOrClass?: Container | ContainerClass | null) => boolean;
-export declare const filterProps: (props: Props, excludeKeys: string[]) => Props;
-export declare const resolvePropMeta: (container: Container, key: string) => [string | null, string] | null;
-export declare const resolveSignal: (container: Container, signalName: string) => boolean;
+export declare const filterProps: (props: Props, excludeKeys: readonly string[]) => Props;
+export declare const resolvePropMeta: (instance: Container, key: string) => [string | null, string] | null;
+export declare const resolveSignal: (instance: Container, signalName: string) => boolean;
+export declare const propNameToSignalName: (propName: string) => string;
+export declare const hasChanged: <T>(oldProps: T | null, newProps: T, key: keyof T) => boolean;
+export declare const shallowArrayEqual: <T extends Record<string, unknown>>(a: T[], b: T[]) => boolean;
+export declare const primitiveArrayEqual: <T extends string | number | boolean>(a: T[] | null | undefined, b: T[] | null | undefined) => boolean;
 export {};

package/dist/nodes/internal/utils.js

@@ -7,7 +7,6 @@ export const matchesAnyClass = (classes, containerOrClass) => {
         containerOrClass === cls ||
         Object.prototype.isPrototypeOf.call(cls, containerOrClass));
 };
-export const isContainerType = (cls, containerOrClass) => matchesAnyClass([cls], containerOrClass);
 export const matchesInterface = (methods, containerOrClass) => {
     if (!containerOrClass) {
         return false;
@@ -24,9 +23,9 @@ export const filterProps = (props, excludeKeys) => {
     }
     return result;
 };
-const walkPrototypeChain = (container, lookup) => {
+const walkPrototypeChain = (instance, lookup) => {
     // biome-ignore lint/complexity/noBannedTypes: Walking prototype chain requires Function type
-    let current = container.constructor;
+    let current = instance.constructor;
     while (current) {
         const typeName = current.glibTypeName;
         if (typeName) {
@@ -43,5 +42,51 @@ const walkPrototypeChain = (container, lookup) => {
     }
     return null;
 };
-export const resolvePropMeta = (container, key) => walkPrototypeChain(container, (typeName) => PROPS[typeName]?.[key] ?? null);
-export const resolveSignal = (container, signalName) => walkPrototypeChain(container, (typeName) => (SIGNALS[typeName]?.has(signalName) ? true : null)) ?? false;
+export const resolvePropMeta = (instance, key) => walkPrototypeChain(instance, (typeName) => PROPS[typeName]?.[key] ?? null);
+export const resolveSignal = (instance, signalName) => {
+    if (signalName === "notify")
+        return true;
+    return walkPrototypeChain(instance, (typeName) => (SIGNALS[typeName]?.has(signalName) ? true : null)) ?? false;
+};
+export const propNameToSignalName = (propName) => {
+    if (!propName.startsWith("on"))
+        return propName;
+    return propName
+        .slice(2)
+        .replace(/([A-Z])/g, "-$1")
+        .toLowerCase()
+        .replace(/^-/, "");
+};
+export const hasChanged = (oldProps, newProps, key) => !oldProps || oldProps[key] !== newProps[key];
+export const shallowArrayEqual = (a, b) => {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        const itemA = a[i];
+        const itemB = b[i];
+        if (!itemA || !itemB)
+            return false;
+        const keysA = Object.keys(itemA);
+        const keysB = Object.keys(itemB);
+        if (keysA.length !== keysB.length)
+            return false;
+        for (const key of keysA) {
+            if (itemA[key] !== itemB[key])
+                return false;
+        }
+    }
+    return true;
+};
+export const primitiveArrayEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+};

package/dist/nodes/level-bar.js

@@ -1,69 +1,34 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import { registerNodeClass } from "../registry.js";
-import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
-import { isContainerType } from "./internal/utils.js";
-import { LevelBarOffsetNode } from "./level-bar-offset.js";
+import { filterProps, matchesAnyClass, shallowArrayEqual } from "./internal/utils.js";
 import { WidgetNode } from "./widget.js";
+const OWN_PROPS = ["offsets"];
 class LevelBarNode extends WidgetNode {
     static priority = 1;
-    offsetChildren = [];
     appliedOffsetIds = new Set();
     static matches(_type, containerOrClass) {
-        return isContainerType(Gtk.LevelBar, containerOrClass);
+        return matchesAnyClass([Gtk.LevelBar], containerOrClass);
     }
-    appendChild(child) {
-        if (child instanceof LevelBarOffsetNode) {
-            child.setLevelBar(this.container, () => this.scheduleRebuildAllOffsets());
-            this.offsetChildren.push(child);
-            scheduleAfterCommit(() => {
-                const id = child.addOffset();
-                if (id) {
-                    this.appliedOffsetIds.add(id);
-                }
-            });
-            return;
-        }
-        super.appendChild(child);
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
     }
-    insertBefore(child, before) {
-        if (child instanceof LevelBarOffsetNode) {
-            child.setLevelBar(this.container, () => this.scheduleRebuildAllOffsets());
-            const beforeIndex = this.offsetChildren.indexOf(before);
-            if (beforeIndex >= 0) {
-                this.offsetChildren.splice(beforeIndex, 0, child);
-            }
-            else {
-                this.offsetChildren.push(child);
-            }
-            this.scheduleRebuildAllOffsets();
-            return;
-        }
-        super.insertBefore(child, before);
+    applyOwnProps(oldProps, newProps) {
+        this.applyOffsets(oldProps, newProps);
     }
-    removeChild(child) {
-        if (child instanceof LevelBarOffsetNode) {
-            const index = this.offsetChildren.indexOf(child);
-            if (index >= 0) {
-                this.offsetChildren.splice(index, 1);
-            }
-            this.scheduleRebuildAllOffsets(CommitPriority.HIGH);
+    applyOffsets(oldProps, newProps) {
+        const newOffsets = newProps.offsets ?? [];
+        if (shallowArrayEqual(oldProps?.offsets ?? [], newOffsets)) {
             return;
         }
-        super.removeChild(child);
-    }
-    scheduleRebuildAllOffsets(priority = CommitPriority.NORMAL) {
-        scheduleAfterCommit(() => {
-            for (const id of this.appliedOffsetIds) {
-                this.container.removeOffsetValue(id);
-            }
-            this.appliedOffsetIds.clear();
-            for (const offset of this.offsetChildren) {
-                const id = offset.addOffset();
-                if (id) {
-                    this.appliedOffsetIds.add(id);
-                }
-            }
-        }, priority);
+        for (const id of this.appliedOffsetIds) {
+            this.container.removeOffsetValue(id);
+        }
+        this.appliedOffsetIds.clear();
+        for (const offset of newOffsets) {
+            this.container.addOffsetValue(offset.id, offset.value);
+            this.appliedOffsetIds.add(offset.id);
+        }
     }
 }
 registerNodeClass(LevelBarNode);