@gtkx/react 0.1.46 → 0.1.48

package/README.md

@@ -68,7 +68,7 @@ export const App = () => {
       defaultHeight={300}
       onCloseRequest={quit}
     >
-      <Box orientation={Orientation.VERTICAL} spacing={12} margin={20}>
+      <Box orientation={Orientation.VERTICAL} spacing={12} marginStart={20} marginEnd={20} marginTop={20} marginBottom={20}>
         <Label.Root label={`Count: ${count}`} />
         <Button
           label="Increment"
@@ -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.d.ts

@@ -44,6 +44,7 @@ export declare class JsxGenerator {
     private getRequiredConstructorParams;
     private getConstructorParams;
     private generateConstructorArgsMetadata;
+    private generatePropSettersMap;
     private generateSetterGetterMap;
     private collectAllProperties;
     private getAncestorInterfaces;

package/dist/codegen/jsx-generator.js

@@ -118,6 +118,7 @@ export class JsxGenerator {
             this.generateCommonTypes(widgetClass),
             widgetPropsInterfaces,
             this.generateConstructorArgsMetadata(widgets),
+            this.generatePropSettersMap(widgets),
             this.generateSetterGetterMap(widgets),
             this.generateExports(widgets, containerMetadata),
             this.generateJsxNamespace(widgets, containerMetadata),
@@ -135,14 +136,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}
 `;
@@ -410,6 +411,28 @@ ${widgetPropsContent}
         }
         return `export const CONSTRUCTOR_PARAMS: Record<string, { name: string; hasDefault: boolean }[]> = {\n${entries.join(",\n")},\n};\n`;
     }
+    generatePropSettersMap(widgets) {
+        const widgetEntries = [];
+        for (const widget of widgets) {
+            const propSetterPairs = [];
+            const allProps = this.collectAllProperties(widget);
+            for (const prop of allProps) {
+                if (prop.setter) {
+                    const propName = toCamelCase(prop.name);
+                    const setterName = toCamelCase(prop.setter);
+                    propSetterPairs.push(`"${propName}": "${setterName}"`);
+                }
+            }
+            if (propSetterPairs.length > 0) {
+                const widgetName = toPascalCase(widget.name);
+                widgetEntries.push(`\t${widgetName}: { ${propSetterPairs.join(", ")} }`);
+            }
+        }
+        if (widgetEntries.length === 0) {
+            return `export const PROP_SETTERS: Record<string, Record<string, string>> = {};\n`;
+        }
+        return `export const PROP_SETTERS: Record<string, Record<string, string>> = {\n${widgetEntries.join(",\n")},\n};\n`;
+    }
     generateSetterGetterMap(widgets) {
         const widgetEntries = [];
         for (const widget of widgets) {
@@ -440,7 +463,7 @@ ${widgetPropsContent}
             for (const prop of current.properties) {
                 if (!seen.has(prop.name)) {
                     seen.add(prop.name);
-                    props.push({ setter: prop.setter, getter: prop.getter });
+                    props.push({ name: prop.name, setter: prop.setter, getter: prop.getter });
                 }
             }
             for (const ifaceName of current.implements) {
@@ -449,7 +472,7 @@ ${widgetPropsContent}
                     for (const prop of iface.properties) {
                         if (!seen.has(prop.name)) {
                             seen.add(prop.name);
-                            props.push({ setter: prop.setter, getter: prop.getter });
+                            props.push({ name: prop.name, setter: prop.setter, getter: prop.getter });
                         }
                     }
                 }
@@ -641,8 +664,15 @@ ${widgetPropsContent}
             lines.push(`}`);
         }
         else if (isColumnViewWidget(widgetName)) {
-            // Root wrapper (non-generic)
-            lines.push(`function ${name}Root(props: ${name}Props): import("react").ReactElement {`);
+            // Root props type - extends with ColumnViewRootProps for sorting support
+            // Uses generics: T for item type, C for column ID union type
+            lines.push(`interface ${name}RootPropsExtended<T = unknown, C extends string = string> extends ${name}Props, ColumnViewRootProps<C> {`);
+            lines.push(`\t/** Comparison function for sorting items by column. Takes item a, item b, and column id. */`);
+            lines.push(`\tsortFn?: (a: T, b: T, columnId: C) => number;`);
+            lines.push(`}`);
+            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/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.
  *
@@ -5933,6 +5933,7 @@ export declare const CONSTRUCTOR_PARAMS: Record<string, {
     name: string;
     hasDefault: boolean;
 }[]>;
+export declare const PROP_SETTERS: Record<string, Record<string, string>>;
 export declare const SETTER_GETTERS: Record<string, Record<string, string>>;
 /**
  * The base class for all widgets.
@@ -7074,7 +7075,11 @@ 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<C> {
+    /** Comparison function for sorting items by column. Takes item a, item b, and column id. */
+    sortFn?: (a: T, b: T, columnId: C) => number;
+}
+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;