@gtkx/react 0.1.47 → 0.1.49

package/README.md

@@ -186,6 +186,14 @@ A comprehensive showcase of GTK4 widgets and features:
 turbo start --filter=gtk4-demo
 ```
 
+### List Example
+
+Comprehensive showcase of ListView, GridView, and ColumnView with sorting:
+
+```bash
+turbo start --filter=list-example
+```
+
 ## Packages
 
 | Package | Description |

package/dist/codegen/jsx-generator.js

@@ -5,7 +5,6 @@ const COLUMN_VIEW_WIDGET = "ColumnView";
 const DROPDOWN_WIDGETS = new Set(["DropDown"]);
 const GRID_WIDGETS = new Set(["Grid"]);
 const NOTEBOOK_WIDGET = "Notebook";
-const TEXT_VIEW_WIDGET = "TextView";
 const INTERNALLY_PROVIDED_PARAMS = {
     ApplicationWindow: new Set(["application"]),
 };
@@ -34,7 +33,6 @@ const isColumnViewWidget = (widgetName) => widgetName === COLUMN_VIEW_WIDGET;
 const isDropDownWidget = (widgetName) => DROPDOWN_WIDGETS.has(widgetName);
 const isGridWidget = (widgetName) => GRID_WIDGETS.has(widgetName);
 const isNotebookWidget = (widgetName) => widgetName === NOTEBOOK_WIDGET;
-const isTextViewWidget = (widgetName) => widgetName === TEXT_VIEW_WIDGET;
 const sanitizeDoc = (doc) => {
     let result = doc;
     result = result.replace(/<picture>[\s\S]*?<\/picture>/gi, "");
@@ -136,14 +134,14 @@ export class JsxGenerator {
             `import type { ReactNode, Ref } from "react";`,
             ...externalImports,
             `import type * as Gtk from "@gtkx/ffi/gtk";`,
-            `import type { ColumnViewColumnProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps } from "../types.js";`,
+            `import type { ColumnViewColumnProps, ColumnViewRootProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps } from "../types.js";`,
             "",
         ].join("\n");
     }
     generateCommonTypes(widgetClass) {
         const widgetPropsContent = this.generateWidgetPropsContent(widgetClass);
         return `
-export { ColumnViewColumnProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps };
+export { ColumnViewColumnProps, ColumnViewRootProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps };
 
 ${widgetPropsContent}
 `;
@@ -336,24 +334,14 @@ ${widgetPropsContent}
             lines.push(`\t * Render function for list items.`);
             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: Internal type, use generic ListView<T> export`);
-            lines.push(`\trenderItem: (item: any) => import("react").ReactElement;`);
+            lines.push(`\trenderItem: (item: unknown) => import("react").ReactElement;`);
         }
         if (isDropDownWidget(widget.name)) {
             lines.push("");
             lines.push(`\t/** Function to convert item to display label */`);
-            lines.push(`\t// biome-ignore lint/suspicious/noExplicitAny: Internal type, use generic DropDown<T> export`);
-            lines.push(`\titemLabel?: (item: any) => string;`);
+            lines.push(`\titemLabel?: (item: unknown) => string;`);
             lines.push(`\t/** Called when selection changes */`);
-            lines.push(`\t// biome-ignore lint/suspicious/noExplicitAny: Internal type, use generic DropDown<T> export`);
-            lines.push(`\tonSelectionChanged?: (item: any, index: number) => void;`);
-        }
-        if (isTextViewWidget(widget.name)) {
-            lines.push("");
-            lines.push(`\t/** The contents of the text buffer. */`);
-            lines.push(`\ttext?: string;`);
-            lines.push(`\t/** Called when the text buffer content changes */`);
-            lines.push(`\tonChanged?: (text: string) => void;`);
+            lines.push(`\tonSelectionChanged?: (item: unknown, index: number) => void;`);
         }
         lines.push("");
         lines.push(`\tref?: Ref<Gtk.${widgetName}>;`);
@@ -664,8 +652,10 @@ ${widgetPropsContent}
             lines.push(`}`);
         }
         else if (isColumnViewWidget(widgetName)) {
-            // Root wrapper (non-generic)
-            lines.push(`function ${name}Root(props: ${name}Props): import("react").ReactElement {`);
+            lines.push(`interface ${name}RootPropsExtended<T = unknown, C extends string = string> extends ${name}Props, ColumnViewRootProps<T, C> {}`);
+            lines.push(``);
+            // Root wrapper (generic)
+            lines.push(`function ${name}Root<T = unknown, C extends string = string>(props: ${name}RootPropsExtended<T, C>): import("react").ReactElement {`);
             lines.push(`\treturn createElement("${name}.Root", props);`);
             lines.push(`}`);
             lines.push(``);

package/dist/container-interfaces.d.ts

@@ -0,0 +1,51 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { Node } from "./node.js";
+/**
+ * Interface for containers that manage child widgets with attach/detach semantics.
+ * Used by ActionBar, FlowBox, ListBox, Overlay.
+ */
+export interface ChildContainer {
+    attachChild(child: Gtk.Widget): void;
+    insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
+    detachChild(child: Gtk.Widget): void;
+}
+/**
+ * Interface for page-based containers like Notebook.
+ */
+export interface PageContainer {
+    addPage(child: Gtk.Widget, label: string): void;
+    insertPageBefore(child: Gtk.Widget, label: string, beforeChild: Gtk.Widget): void;
+    removePage(child: Gtk.Widget): void;
+    updatePageLabel(child: Gtk.Widget, label: string): void;
+}
+/**
+ * Interface for grid-based containers.
+ */
+export interface GridContainer {
+    attachToGrid(child: Gtk.Widget, column: number, row: number, colSpan: number, rowSpan: number): void;
+    removeFromGrid(child: Gtk.Widget): void;
+}
+/**
+ * Interface for item-based containers like ListView, ColumnView, DropDown.
+ */
+export interface ItemContainer<T> {
+    addItem(item: T): void;
+    insertItemBefore(item: T, beforeItem: T): void;
+    removeItem(item: T): void;
+}
+/**
+ * Interface for column-based containers like ColumnView.
+ * Note: Column type is generic to support both raw Gtk.ColumnViewColumn and wrapper nodes.
+ */
+export interface ColumnContainer {
+    addColumn(column: unknown): void;
+    insertColumnBefore(column: unknown, beforeColumn: unknown): void;
+    removeColumn(column: unknown): void;
+    getItems(): unknown[];
+    getSortFn(): ((a: unknown, b: unknown, columnId: string) => number) | null;
+}
+export declare const isChildContainer: (node: Node) => node is Node & ChildContainer;
+export declare const isPageContainer: (node: Node) => node is Node & PageContainer;
+export declare const isGridContainer: (node: Node) => node is Node & GridContainer;
+export declare const isItemContainer: <T>(node: Node) => node is Node & ItemContainer<T>;
+export declare const isColumnContainer: (node: Node) => node is Node & ColumnContainer;

package/dist/container-interfaces.js

@@ -0,0 +1,5 @@
+export const isChildContainer = (node) => "attachChild" in node && "detachChild" in node && "insertChildBefore" in node;
+export const isPageContainer = (node) => "addPage" in node && "removePage" in node && "insertPageBefore" in node && "updatePageLabel" in node;
+export const isGridContainer = (node) => "attachToGrid" in node && "removeFromGrid" in node;
+export const isItemContainer = (node) => "addItem" in node && "insertItemBefore" in node && "removeItem" in node;
+export const isColumnContainer = (node) => "addColumn" in node && "removeColumn" in node && "getSortFn" in node;

package/dist/factory.d.ts

@@ -3,4 +3,4 @@ import type { Node } from "./node.js";
 import { type ROOT_NODE_CONTAINER } from "./nodes/root.js";
 export type Props = Record<string, unknown>;
 export { ROOT_NODE_CONTAINER } from "./nodes/root.js";
-export declare const createNode: (type: string, props: Props, app: Gtk.Application, existingWidget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER) => Node;
+export declare const createNode: (type: string, props: Props, existingWidget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER) => Node;

package/dist/factory.js

@@ -1,16 +1,22 @@
+import { AboutDialogNode } from "./nodes/about-dialog.js";
+import { ActionBarNode } from "./nodes/action-bar.js";
 import { ColumnViewColumnNode, ColumnViewItemNode, ColumnViewNode } from "./nodes/column-view.js";
 import { DropDownItemNode, DropDownNode } from "./nodes/dropdown.js";
+import { FlowBoxNode } from "./nodes/flow-box.js";
 import { GridChildNode, GridNode } from "./nodes/grid.js";
 import { ListItemNode, ListViewNode } from "./nodes/list.js";
+import { ListBoxNode } from "./nodes/list-box.js";
 import { NotebookNode, NotebookPageNode } from "./nodes/notebook.js";
 import { OverlayNode } from "./nodes/overlay.js";
 import { RootNode } from "./nodes/root.js";
 import { SlotNode } from "./nodes/slot.js";
 import { TextViewNode } from "./nodes/text-view.js";
 import { WidgetNode } from "./nodes/widget.js";
+import { WindowNode } from "./nodes/window.js";
 export { ROOT_NODE_CONTAINER } from "./nodes/root.js";
 const NODE_CLASSES = [
     RootNode,
+    // Virtual nodes (no widget)
     ColumnViewColumnNode,
     ColumnViewItemNode,
     ListItemNode,
@@ -18,19 +24,27 @@ const NODE_CLASSES = [
     GridChildNode,
     NotebookPageNode,
     SlotNode,
+    // Specialized widget nodes
+    WindowNode,
+    AboutDialogNode,
     TextViewNode,
+    // Container nodes
+    ActionBarNode,
+    FlowBoxNode,
+    ListBoxNode,
     DropDownNode,
     GridNode,
     OverlayNode,
     ColumnViewNode,
     ListViewNode,
     NotebookNode,
+    // Catch-all (must be last)
     WidgetNode,
 ];
-export const createNode = (type, props, app, existingWidget) => {
+export const createNode = (type, props, existingWidget) => {
     for (const NodeClass of NODE_CLASSES) {
-        if (NodeClass.matches(type, props, existingWidget)) {
-            return new NodeClass(type, props, app, existingWidget);
+        if (NodeClass.matches(type, existingWidget)) {
+            return new NodeClass(type, props, existingWidget);
         }
     }
     throw new Error(`No matching node class for type: ${type}`);

package/dist/generated/jsx.d.ts

@@ -3,8 +3,8 @@ import type { ReactNode, Ref } from "react";
 import type * as Gdk from "@gtkx/ffi/gdk";
 import type * as Gio from "@gtkx/ffi/gio";
 import type * as Gtk from "@gtkx/ffi/gtk";
-import type { ColumnViewColumnProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps } from "../types.js";
-export { ColumnViewColumnProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps, };
+import type { ColumnViewColumnProps, ColumnViewRootProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps } from "../types.js";
+export { ColumnViewColumnProps, ColumnViewRootProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps, };
 /**
  * The base class for all widgets.
  *
@@ -1861,9 +1861,9 @@ export interface DropDownProps extends WidgetProps {
      */
     onActivate?: (self: Gtk.DropDown) => void;
     /** Function to convert item to display label */
-    itemLabel?: (item: any) => string;
+    itemLabel?: (item: unknown) => string;
     /** Called when selection changes */
-    onSelectionChanged?: (item: any, index: number) => void;
+    onSelectionChanged?: (item: unknown, index: number) => void;
     ref?: Ref<Gtk.DropDown>;
 }
 /** Props for the {@link EditableLabel} widget. */
@@ -2917,7 +2917,7 @@ export interface GridViewProps extends ListBaseProps {
      * Render function for list items.
      * Called with null during setup (for loading state) and with the actual item during bind.
      */
-    renderItem: (item: any) => import("react").ReactElement;
+    renderItem: (item: unknown) => import("react").ReactElement;
     ref?: Ref<Gtk.GridView>;
 }
 /** Props for the {@link HeaderBar} widget. */
@@ -3735,7 +3735,7 @@ export interface ListViewProps extends ListBaseProps {
      * Render function for list items.
      * Called with null during setup (for loading state) and with the actual item during bind.
      */
-    renderItem: (item: any) => import("react").ReactElement;
+    renderItem: (item: unknown) => import("react").ReactElement;
     ref?: Ref<Gtk.ListView>;
 }
 /** Props for the {@link LockButton} widget. */
@@ -5684,10 +5684,6 @@ export interface TextViewProps extends WidgetProps {
      * The default binding for this signal is `Insert`.
      */
     onToggleOverwrite?: (self: Gtk.TextView) => void;
-    /** The contents of the text buffer. */
-    text?: string;
-    /** Called when the text buffer content changes */
-    onChanged?: (text: string) => void;
     ref?: Ref<Gtk.TextView>;
 }
 /** Props for the {@link ToggleButton} widget. */
@@ -7075,7 +7071,9 @@ export declare const ColorChooserWidget: "ColorChooserWidget";
  * it gets the .color style class.
  */
 export declare const ColorDialogButton: "ColorDialogButton";
-declare function ColumnViewRoot(props: ColumnViewProps): import("react").ReactElement;
+interface ColumnViewRootPropsExtended<T = unknown, C extends string = string> extends ColumnViewProps, ColumnViewRootProps<T, C> {
+}
+declare function ColumnViewRoot<T = unknown, C extends string = string>(props: ColumnViewRootPropsExtended<T, C>): import("react").ReactElement;
 interface ColumnViewGenericColumnProps<T> extends Omit<ColumnViewColumnProps, "renderCell"> {
     /** Render function for column cells. Called with null during setup. */
     renderCell: (item: T | null) => import("react").ReactElement;

package/dist/node.d.ts

@@ -1,13 +1,13 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { Props, ROOT_NODE_CONTAINER } from "./factory.js";
 export declare abstract class Node<T extends Gtk.Widget | undefined = Gtk.Widget | undefined> {
-    static matches(_type: string, _props: Props, _existingWidget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER): boolean;
+    static matches(_type: string, _existingWidget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER): boolean;
     protected signalHandlers: Map<string, number>;
     protected widget: T;
     protected widgetType: string;
     protected isVirtual(): boolean;
-    constructor(type: string, props: Props, app: Gtk.Application, existingWidget?: Gtk.Widget);
-    protected createWidget(type: string, props: Props, app: Gtk.Application): T;
+    constructor(type: string, props: Props, existingWidget?: Gtk.Widget);
+    protected createWidget(type: string, props: Props): T;
     getWidget(): T;
     appendChild(child: Node): void;
     removeChild(child: Node): void;
@@ -21,5 +21,5 @@ export declare abstract class Node<T extends Gtk.Widget | undefined = Gtk.Widget
     protected disconnectSignal(eventName: string): void;
     protected connectSignal(widget: Gtk.Widget, eventName: string, handler: (...args: unknown[]) => unknown): void;
     protected setProperty(widget: Gtk.Widget, key: string, value: unknown): void;
-    mount(_app: Gtk.Application): void;
+    mount(): void;
 }

package/dist/node.js

@@ -1,3 +1,4 @@
+import { getCurrentApp } from "@gtkx/ffi";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { CONSTRUCTOR_PARAMS, PROP_SETTERS, SETTER_GETTERS } from "./generated/jsx.js";
@@ -9,7 +10,7 @@ const extractConstructorArgs = (type, props) => {
     return params.map((p) => props[p.name]);
 };
 export class Node {
-    static matches(_type, _props, _existingWidget) {
+    static matches(_type, _existingWidget) {
         return false;
     }
     signalHandlers = new Map();
@@ -18,16 +19,16 @@ export class Node {
     isVirtual() {
         return false;
     }
-    constructor(type, props, app, existingWidget) {
+    constructor(type, props, existingWidget) {
         this.widgetType = type.split(".")[0] || type;
         if (existingWidget) {
             this.widget = existingWidget;
             return;
         }
-        this.widget = (this.isVirtual() ? undefined : this.createWidget(type, props, app));
+        this.widget = (this.isVirtual() ? undefined : this.createWidget(type, props));
         this.updateProps({}, props);
     }
-    createWidget(type, props, app) {
+    createWidget(type, props) {
         const normalizedType = type.split(".")[0] || type;
         // biome-ignore lint/performance/noDynamicNamespaceImportAccess: dynamic widget creation
         const WidgetClass = Gtk[normalizedType];
@@ -35,7 +36,7 @@ export class Node {
             throw new Error(`Unknown GTK widget type: ${normalizedType}`);
         }
         if (WidgetClass === Gtk.ApplicationWindow) {
-            return new WidgetClass(app);
+            return new WidgetClass(getCurrentApp());
         }
         return new WidgetClass(...extractConstructorArgs(normalizedType, props));
     }
@@ -164,5 +165,5 @@ export class Node {
         }
         setter.call(widget, value);
     }
-    mount(_app) { }
+    mount() { }
 }

package/dist/nodes/about-dialog.d.ts

@@ -0,0 +1,9 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import { Node } from "../node.js";
+export declare class AboutDialogNode extends Node<Gtk.AboutDialog> {
+    static matches(type: string): boolean;
+    attachToParent(_parent: Node): void;
+    attachToParentBefore(_parent: Node, _before: Node): void;
+    detachFromParent(_parent: Node): void;
+    mount(): void;
+}

package/dist/nodes/about-dialog.js

@@ -0,0 +1,14 @@
+import { Node } from "../node.js";
+export class AboutDialogNode extends Node {
+    static matches(type) {
+        return type === "AboutDialog";
+    }
+    attachToParent(_parent) { }
+    attachToParentBefore(_parent, _before) { }
+    detachFromParent(_parent) {
+        this.widget.destroy();
+    }
+    mount() {
+        this.widget.present();
+    }
+}

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

@@ -0,0 +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 ActionBarNode extends Node<Gtk.ActionBar> implements ChildContainer {
+    static matches(type: string): boolean;
+    attachChild(child: Gtk.Widget): void;
+    insertChildBefore(child: Gtk.Widget, _before: Gtk.Widget): void;
+    detachChild(child: Gtk.Widget): void;
+}

package/dist/nodes/action-bar.js

@@ -0,0 +1,15 @@
+import { Node } from "../node.js";
+export class ActionBarNode extends Node {
+    static matches(type) {
+        return type === "ActionBar";
+    }
+    attachChild(child) {
+        this.widget.packStart(child);
+    }
+    insertChildBefore(child, _before) {
+        this.attachChild(child);
+    }
+    detachChild(child) {
+        this.widget.remove(child);
+    }
+}

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

@@ -1,34 +1,59 @@
 import * as Gtk from "@gtkx/ffi/gtk";
+import { type ColumnContainer, type ItemContainer } from "../container-interfaces.js";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-export declare class ColumnViewNode extends Node<Gtk.ColumnView> {
+import type { ColumnSortFn } from "../types.js";
+export declare class ColumnViewNode extends Node<Gtk.ColumnView> implements ItemContainer<unknown>, ColumnContainer {
     static matches(type: string): boolean;
     private stringList;
     private selectionModel;
+    private sortListModel;
     private items;
     private columns;
     private committedLength;
-    constructor(type: string, props: Props, app: Gtk.Application);
+    private sortColumn;
+    private sortOrder;
+    private sortFn;
+    private isSorting;
+    private onSortChange;
+    private sorterChangedHandlerId;
+    private lastNotifiedColumn;
+    private lastNotifiedOrder;
+    constructor(type: string, props: Props);
+    private connectSorterChangedSignal;
+    private waitForSortComplete;
+    private disconnectSorterChangedSignal;
+    private notifySortChange;
     getItems(): unknown[];
-    addColumn(column: ColumnViewColumnNode): void;
+    getSortFn(): ColumnSortFn<unknown, string> | null;
+    compareItems(a: unknown, b: unknown, columnId: string): number;
+    addColumn(columnNode: ColumnViewColumnNode): void;
+    private applySortByColumn;
+    findColumnById(id: string): ColumnViewColumnNode | undefined;
     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;
+    protected consumedProps(): Set<string>;
+    updateProps(oldProps: Props, newProps: Props): void;
 }
 export declare class ColumnViewColumnNode extends Node {
     static matches(type: string): boolean;
     protected isVirtual(): boolean;
-    private gtkColumn;
+    private column;
     private factory;
     private renderCell;
     private columnView;
     private listItemCache;
-    constructor(type: string, props: Props, app: Gtk.Application);
-    getGtkColumn(): Gtk.ColumnViewColumn;
+    private columnId;
+    private sorter;
+    constructor(type: string, props: Props);
+    getColumn(): Gtk.ColumnViewColumn;
+    getId(): string | null;
     setColumnView(columnView: ColumnViewNode | null): void;
+    updateSorterFromRoot(): void;
     attachToParent(parent: Node): void;
     attachToParentBefore(parent: Node, before: Node): void;
     detachFromParent(parent: Node): void;
@@ -39,7 +64,7 @@ export declare class ColumnViewItemNode extends Node {
     static matches(type: string): boolean;
     protected isVirtual(): boolean;
     private item;
-    constructor(type: string, props: Props, app: Gtk.Application);
+    constructor(type: string, props: Props);
     getItem(): unknown;
     attachToParent(parent: Node): void;
     attachToParentBefore(parent: Node, before: Node): void;