@gtkx/react 0.1.40 → 0.1.42

package/dist/batch.d.ts

@@ -0,0 +1,5 @@
+type FlushCallback = () => void;
+export declare const beginCommit: () => void;
+export declare const endCommit: () => void;
+export declare const scheduleFlush: (callback: FlushCallback) => void;
+export {};

package/dist/batch.js

@@ -0,0 +1,20 @@
+const pendingFlushes = new Set();
+let inCommit = false;
+export const beginCommit = () => {
+    inCommit = true;
+};
+export const endCommit = () => {
+    inCommit = false;
+    for (const callback of pendingFlushes) {
+        callback();
+    }
+    pendingFlushes.clear();
+};
+export const scheduleFlush = (callback) => {
+    if (inCommit) {
+        pendingFlushes.add(callback);
+    }
+    else {
+        callback();
+    }
+};

package/dist/codegen/jsx-generator.js

@@ -315,11 +315,10 @@ ${widgetPropsContent}
             lines.push("");
             lines.push(`\t/**`);
             lines.push(`\t * Render function for list items.`);
-            lines.push(`\t * Called with null during setup/unbind and with the actual item during bind.`);
-            lines.push(`\t * The ref callback must be attached to the root widget to set it as the list item's child.`);
+            lines.push(`\t * Called with null during setup (for loading state) and with the actual item during bind.`);
             lines.push(`\t */`);
             lines.push(`\t// biome-ignore lint/suspicious/noExplicitAny: allows typed renderItem callbacks`);
-            lines.push(`\trenderItem: (item: any, ref: import("react").RefCallback<Gtk.Widget>) => import("react").ReactElement;`);
+            lines.push(`\trenderItem: (item: any) => import("react").ReactElement;`);
         }
         if (isDropDownWidget(widget.name)) {
             lines.push("");

package/dist/fiber-root.d.ts

@@ -0,0 +1,3 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type Reconciler from "react-reconciler";
+export declare const createFiberRoot: (container?: Gtk.Widget) => Reconciler.FiberRoot;

package/dist/fiber-root.js

@@ -0,0 +1,6 @@
+import { ROOT_NODE_CONTAINER } from "./factory.js";
+import { reconciler } from "./reconciler.js";
+export const createFiberRoot = (container) => {
+    const instance = reconciler.getInstance();
+    return instance.createContainer(container ?? ROOT_NODE_CONTAINER, 0, null, false, null, "", (error) => console.error("Fiber root render error:", error), () => { }, () => { }, () => { }, null);
+};

package/dist/generated/jsx.d.ts

@@ -566,7 +566,7 @@ export interface GridViewProps extends ListBaseProps {
     singleClickActivate?: boolean;
     tabBehavior?: Gtk.ListTabBehavior;
     onActivate?: (self: Gtk.GridView, position: number) => void;
-    renderItem: (item: any, ref: import("react").RefCallback<Gtk.Widget>) => import("react").ReactElement;
+    renderItem: (item: any) => import("react").ReactElement;
     ref?: Ref<Gtk.GridView>;
 }
 export interface HeaderBarProps extends WidgetProps {
@@ -724,7 +724,7 @@ export interface ListViewProps extends ListBaseProps {
     singleClickActivate?: boolean;
     tabBehavior?: Gtk.ListTabBehavior;
     onActivate?: (self: Gtk.ListView, position: number) => void;
-    renderItem: (item: any, ref: import("react").RefCallback<Gtk.Widget>) => import("react").ReactElement;
+    renderItem: (item: any) => import("react").ReactElement;
     ref?: Ref<Gtk.ListView>;
 }
 export interface LockButtonProps extends ButtonProps {

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

@@ -7,11 +7,13 @@ export declare class ColumnViewNode extends Node<Gtk.ColumnView> {
     private selectionModel;
     private items;
     private columns;
+    private committedLength;
     constructor(type: string, props: Props, app: Gtk.Application);
     getItems(): unknown[];
     addColumn(column: ColumnViewColumnNode): void;
     removeColumn(column: ColumnViewColumnNode): void;
     insertColumnBefore(column: ColumnViewColumnNode, before: ColumnViewColumnNode): void;
+    private syncStringList;
     addItem(item: unknown): void;
     insertItemBefore(item: unknown, beforeItem: unknown): void;
     removeItem(item: unknown): void;
@@ -23,7 +25,7 @@ export declare class ColumnViewColumnNode extends Node {
     private factory;
     private renderCell;
     private columnView;
-    private fiberRoots;
+    private listItemCache;
     constructor(type: string, props: Props, app: Gtk.Application);
     getGtkColumn(): Gtk.ColumnViewColumn;
     setColumnView(columnView: ColumnViewNode | null): void;

package/dist/nodes/column-view.js

@@ -1,7 +1,9 @@
 import { getObject, getObjectId } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { createFiberRoot, updateSync } from "../flush-sync.js";
+import { scheduleFlush } from "../batch.js";
+import { createFiberRoot } from "../fiber-root.js";
 import { Node } from "../node.js";
+import { reconciler } from "../reconciler.js";
 export class ColumnViewNode extends Node {
     static matches(type) {
         return type === "ColumnView.Root";
@@ -10,6 +12,7 @@ export class ColumnViewNode extends Node {
     selectionModel;
     items = [];
     columns = [];
+    committedLength = 0;
     constructor(type, props, app) {
         super(type, props, app);
         this.stringList = new Gtk.StringList([]);
@@ -43,24 +46,33 @@ export class ColumnViewNode extends Node {
         this.widget.insertColumn(beforeIndex, column.getGtkColumn());
         column.setColumnView(this);
     }
+    syncStringList = () => {
+        const newLength = this.items.length;
+        if (newLength === this.committedLength)
+            return;
+        const placeholders = Array.from({ length: newLength }, () => "");
+        this.stringList.splice(0, this.committedLength, placeholders);
+        this.committedLength = newLength;
+    };
     addItem(item) {
         this.items.push(item);
-        this.stringList.append("");
+        scheduleFlush(this.syncStringList);
     }
     insertItemBefore(item, beforeItem) {
         const beforeIndex = this.items.indexOf(beforeItem);
         if (beforeIndex === -1) {
-            this.addItem(item);
-            return;
+            this.items.push(item);
+        }
+        else {
+            this.items.splice(beforeIndex, 0, item);
         }
-        this.items.splice(beforeIndex, 0, item);
-        this.stringList.splice(beforeIndex, 0, [""]);
+        scheduleFlush(this.syncStringList);
     }
     removeItem(item) {
         const index = this.items.indexOf(item);
         if (index !== -1) {
             this.items.splice(index, 1);
-            this.stringList.remove(index);
+            scheduleFlush(this.syncStringList);
         }
     }
 }
@@ -75,7 +87,7 @@ export class ColumnViewColumnNode extends Node {
     factory;
     renderCell;
     columnView = null;
-    fiberRoots = new Map();
+    listItemCache = new Map();
     constructor(type, props, app) {
         super(type, props, app);
         this.factory = new Gtk.SignalListItemFactory();
@@ -91,51 +103,43 @@ export class ColumnViewColumnNode extends Node {
             this.gtkColumn.setFixedWidth(props.fixedWidth);
         }
         this.factory.connect("setup", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj, Gtk.ListItem);
-            const id = getObjectId(listItemObj);
-            const fiberRoot = createFiberRoot();
-            this.fiberRoots.set(id, fiberRoot);
-            let rootWidget = null;
-            const ref = (widget) => {
-                if (widget && !rootWidget) {
-                    rootWidget = widget;
-                    listItem.setChild(widget);
-                }
-            };
-            const element = this.renderCell(null, ref);
-            updateSync(element, fiberRoot);
+            const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
+            const id = getObjectId(listItemObj.ptr);
+            const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
+            listItem.setChild(box);
+            const fiberRoot = createFiberRoot(box);
+            this.listItemCache.set(id, { box, fiberRoot });
+            const element = this.renderCell(null);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
         });
         this.factory.connect("bind", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj, Gtk.ListItem);
-            const id = getObjectId(listItemObj);
-            const fiberRoot = this.fiberRoots.get(id);
-            if (!fiberRoot)
+            const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
+            const id = getObjectId(listItemObj.ptr);
+            const info = this.listItemCache.get(id);
+            if (!info)
                 return;
             const position = listItem.getPosition();
             if (this.columnView) {
                 const items = this.columnView.getItems();
                 const item = items[position];
-                const ref = () => { };
-                const element = this.renderCell(item ?? null, ref);
-                updateSync(element, fiberRoot);
+                const element = this.renderCell(item ?? null);
+                reconciler.getInstance().updateContainer(element, info.fiberRoot, null, () => { });
             }
         });
         this.factory.connect("unbind", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj);
-            const fiberRoot = this.fiberRoots.get(id);
-            if (!fiberRoot)
+            const id = getObjectId(listItemObj.ptr);
+            const info = this.listItemCache.get(id);
+            if (!info)
                 return;
-            const ref = () => { };
-            const element = this.renderCell(null, ref);
-            updateSync(element, fiberRoot);
+            reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
         });
         this.factory.connect("teardown", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj);
-            const fiberRoot = this.fiberRoots.get(id);
-            if (!fiberRoot)
-                return;
-            updateSync(null, fiberRoot);
-            this.fiberRoots.delete(id);
+            const id = getObjectId(listItemObj.ptr);
+            const info = this.listItemCache.get(id);
+            if (info) {
+                reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
+                this.listItemCache.delete(id);
+            }
         });
     }
     getGtkColumn() {

package/dist/nodes/list.d.ts

@@ -8,8 +8,10 @@ export declare class ListViewNode extends Node<Gtk.ListView | Gtk.GridView> {
     private factory;
     private items;
     private renderItem;
-    private fiberRoots;
+    private listItemCache;
+    private committedLength;
     constructor(type: string, props: Props, app: Gtk.Application);
+    private syncStringList;
     addItem(item: unknown): void;
     insertItemBefore(item: unknown, beforeItem: unknown): void;
     removeItem(item: unknown): void;

package/dist/nodes/list.js

@@ -1,7 +1,9 @@
 import { getObject, getObjectId } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { createFiberRoot, updateSync } from "../flush-sync.js";
+import { scheduleFlush } from "../batch.js";
+import { createFiberRoot } from "../fiber-root.js";
 import { Node } from "../node.js";
+import { reconciler } from "../reconciler.js";
 export class ListViewNode extends Node {
     static matches(type) {
         return type === "ListView.Root" || type === "GridView.Root";
@@ -11,7 +13,8 @@ export class ListViewNode extends Node {
     factory;
     items = [];
     renderItem;
-    fiberRoots = new Map();
+    listItemCache = new Map();
+    committedLength = 0;
     constructor(type, props, app) {
         super(type, props, app);
         this.stringList = new Gtk.StringList([]);
@@ -19,70 +22,71 @@ export class ListViewNode extends Node {
         this.factory = new Gtk.SignalListItemFactory();
         this.renderItem = props.renderItem;
         this.factory.connect("setup", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj, Gtk.ListItem);
-            const id = getObjectId(listItemObj);
-            const fiberRoot = createFiberRoot();
-            this.fiberRoots.set(id, fiberRoot);
-            let rootWidget = null;
-            const ref = (widget) => {
-                if (widget && !rootWidget) {
-                    rootWidget = widget;
-                    listItem.setChild(widget);
-                }
-            };
-            const element = this.renderItem(null, ref);
-            updateSync(element, fiberRoot);
+            const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
+            const id = getObjectId(listItemObj.ptr);
+            const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
+            listItem.setChild(box);
+            const fiberRoot = createFiberRoot(box);
+            this.listItemCache.set(id, { box, fiberRoot });
+            const element = this.renderItem(null);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
         });
         this.factory.connect("bind", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj, Gtk.ListItem);
-            const id = getObjectId(listItemObj);
-            const fiberRoot = this.fiberRoots.get(id);
-            if (!fiberRoot)
+            const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
+            const id = getObjectId(listItemObj.ptr);
+            const info = this.listItemCache.get(id);
+            if (!info)
                 return;
             const position = listItem.getPosition();
             const item = this.items[position];
-            const ref = () => { };
-            const element = this.renderItem(item ?? null, ref);
-            updateSync(element, fiberRoot);
+            const element = this.renderItem(item);
+            reconciler.getInstance().updateContainer(element, info.fiberRoot, null, () => { });
         });
         this.factory.connect("unbind", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj);
-            const fiberRoot = this.fiberRoots.get(id);
-            if (!fiberRoot)
+            const id = getObjectId(listItemObj.ptr);
+            const info = this.listItemCache.get(id);
+            if (!info)
                 return;
-            const ref = () => { };
-            const element = this.renderItem(null, ref);
-            updateSync(element, fiberRoot);
+            reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
         });
         this.factory.connect("teardown", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj);
-            const fiberRoot = this.fiberRoots.get(id);
-            if (!fiberRoot)
-                return;
-            updateSync(null, fiberRoot);
-            this.fiberRoots.delete(id);
+            const id = getObjectId(listItemObj.ptr);
+            const info = this.listItemCache.get(id);
+            if (info) {
+                reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
+                this.listItemCache.delete(id);
+            }
         });
         this.widget.setModel(this.selectionModel);
         this.widget.setFactory(this.factory);
     }
+    syncStringList = () => {
+        const newLength = this.items.length;
+        if (newLength === this.committedLength)
+            return;
+        const placeholders = Array.from({ length: newLength }, () => "");
+        this.stringList.splice(0, this.committedLength, placeholders);
+        this.committedLength = newLength;
+    };
     addItem(item) {
         this.items.push(item);
-        this.stringList.append("");
+        scheduleFlush(this.syncStringList);
     }
     insertItemBefore(item, beforeItem) {
         const beforeIndex = this.items.indexOf(beforeItem);
         if (beforeIndex === -1) {
-            this.addItem(item);
-            return;
+            this.items.push(item);
+        }
+        else {
+            this.items.splice(beforeIndex, 0, item);
         }
-        this.items.splice(beforeIndex, 0, item);
-        this.stringList.splice(beforeIndex, 0, [""]);
+        scheduleFlush(this.syncStringList);
     }
     removeItem(item) {
         const index = this.items.indexOf(item);
         if (index !== -1) {
             this.items.splice(index, 1);
-            this.stringList.remove(index);
+            scheduleFlush(this.syncStringList);
         }
     }
     consumedProps() {

package/dist/reconciler.js

@@ -1,6 +1,7 @@
 import { getCurrentApp } from "@gtkx/ffi";
 import React from "react";
 import ReactReconciler from "react-reconciler";
+import { beginCommit, endCommit } from "./batch.js";
 import { createNode } from "./factory.js";
 class Reconciler {
     instance;
@@ -20,7 +21,9 @@ class Reconciler {
             getRootHostContext: () => ({}),
             getChildHostContext: (parentHostContext) => parentHostContext,
             shouldSetTextContent: () => false,
-            createInstance: (type, props) => createNode(type, props, getCurrentApp()),
+            createInstance: (type, props) => {
+                return createNode(type, props, getCurrentApp());
+            },
             createTextInstance: (text) => createNode("Label.Root", { label: text }, getCurrentApp()),
             appendInitialChild: (parent, child) => parent.appendChild(child),
             finalizeInitialChildren: () => true,
@@ -45,8 +48,13 @@ class Reconciler {
                 const parent = this.createNodeFromContainer(container);
                 parent.insertBefore(child, beforeChild);
             },
-            prepareForCommit: () => null,
-            resetAfterCommit: () => { },
+            prepareForCommit: () => {
+                beginCommit();
+                return null;
+            },
+            resetAfterCommit: () => {
+                endCommit();
+            },
             commitTextUpdate: (textInstance, oldText, newText) => {
                 textInstance.updateProps({ label: oldText }, { label: newText });
             },

package/dist/types.d.ts

@@ -1,5 +1,4 @@
-import type * as Gtk from "@gtkx/ffi/gtk";
-import type { ReactElement, ReactNode, RefCallback } from "react";
+import type { ReactElement, ReactNode } from "react";
 export interface SlotProps {
     children?: ReactNode;
 }
@@ -12,17 +11,16 @@ export interface GridChildProps extends SlotProps {
     columnSpan?: number;
     rowSpan?: number;
 }
-export type RenderItemFn<T> = (item: T | null, ref: RefCallback<Gtk.Widget>) => ReactElement;
+export type RenderItemFn<T> = (item: T | null) => ReactElement;
 export interface ListViewRenderProps<T = unknown> {
     renderItem: RenderItemFn<T>;
 }
-export type RenderCellFn<T> = (item: T | null, ref: RefCallback<Gtk.Widget>) => ReactElement;
 export interface ColumnViewColumnProps {
     title?: string;
     expand?: boolean;
     resizable?: boolean;
     fixedWidth?: number;
-    renderCell: (item: any, ref: RefCallback<Gtk.Widget>) => ReactElement;
+    renderCell: (item: any) => ReactElement;
 }
 export interface NotebookPageProps extends SlotProps {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtk",
@@ -36,10 +36,10 @@
   ],
   "dependencies": {
     "react-reconciler": "0.33.0",
-    "@gtkx/ffi": "0.1.40"
+    "@gtkx/ffi": "0.1.42"
   },
   "devDependencies": {
-    "@gtkx/gir": "0.1.40"
+    "@gtkx/gir": "0.1.42"
   },
   "peerDependencies": {
     "react": "^19"

package/dist/flush-sync.d.ts

@@ -1,4 +0,0 @@
-import type { ReactNode } from "react";
-import type Reconciler from "react-reconciler";
-export declare const updateSync: (element: ReactNode, fiberRoot: Reconciler.FiberRoot) => void;
-export declare const createFiberRoot: () => Reconciler.FiberRoot;

package/dist/flush-sync.js

@@ -1,27 +0,0 @@
-import { ROOT_NODE_CONTAINER } from "./factory.js";
-import { reconciler } from "./reconciler.js";
-export const updateSync = (element, fiberRoot) => {
-    const instance = reconciler.getInstance();
-    const instanceAny = instance;
-    if (typeof instanceAny.flushSync === "function") {
-        instanceAny.flushSync(() => {
-            instance.updateContainer(element, fiberRoot, null, () => { });
-        });
-    }
-    else {
-        if (typeof instanceAny.updateContainerSync === "function") {
-            instanceAny.updateContainerSync(element, fiberRoot, null, () => { });
-        }
-        else {
-            instance.updateContainer(element, fiberRoot, null, () => { });
-        }
-        if (typeof instanceAny.flushSyncWork === "function") {
-            instanceAny.flushSyncWork();
-        }
-    }
-    instance.flushPassiveEffects();
-};
-export const createFiberRoot = () => {
-    const instance = reconciler.getInstance();
-    return instance.createContainer(ROOT_NODE_CONTAINER, 0, null, false, null, "", (error) => console.error("List item render error:", error), () => { }, () => { }, () => { }, null);
-};