@gtkx/react 0.1.12 → 0.1.14

package/README.md

@@ -179,8 +179,8 @@ console.log(ref.value);
 ```tsx
 <Switch
   active={enabled}
-  onStateSet={() => {
-    setEnabled(e => !e);
+  onStateSet={(self, state) => {
+    setEnabled(state);
     return true;
   }}
 />
@@ -197,14 +197,15 @@ console.log(ref.value);
 **SpinButton** — Numeric input with increment/decrement
 
 ```tsx
-const adjustment = useRef(new Gtk.Adjustment({ value: 50, lower: 0, upper: 100, stepIncrement: 1 }));
-<SpinButton adjustment={adjustment.current.ptr} onValueChanged={() => setValue(adjustment.current.getValue())} />
+// Adjustment args: value, lower, upper, stepIncrement, pageIncrement, pageSize
+const adjustment = useMemo(() => new Gtk.Adjustment(50, 0, 100, 1, 10, 0), []);
+<SpinButton adjustment={adjustment} onValueChanged={(self) => setValue(self.getValue())} />
 ```
 
 **Scale** — Horizontal or vertical slider
 
 ```tsx
-<Scale hexpand drawValue adjustment={adjustment.current.ptr} />
+<Scale hexpand drawValue adjustment={adjustment} onValueChanged={(self) => setValue(self.getValue())} />
 ```
 
 ### Display Widgets

package/dist/codegen/jsx-generator.js

@@ -111,14 +111,14 @@ export class JsxGenerator {
             `import type { ReactNode, Ref } from "react";`,
             ...externalImports,
             `import type * as Gtk from "@gtkx/ffi/gtk";`,
-            `import type { GridChildProps, ItemProps, SlotProps } from "../types.js";`,
+            `import type { GridChildProps, ListItemProps, SlotProps } from "../types.js";`,
             "",
         ].join("\n");
     }
     generateCommonTypes(widgetClass) {
         const widgetPropsContent = this.generateWidgetPropsContent(widgetClass);
         return `
-export { SlotProps, GridChildProps, ItemProps };
+export { SlotProps, GridChildProps, ListItemProps };
 
 ${widgetPropsContent}
 `;
@@ -145,7 +145,7 @@ ${widgetPropsContent}
                     if (signal.doc) {
                         lines.push(formatDoc(signal.doc, "\t").trimEnd());
                     }
-                    lines.push(`\t${this.generateSignalHandler(signal)}`);
+                    lines.push(`\t${this.generateSignalHandler(signal, "Widget")}`);
                 }
             }
         }
@@ -304,7 +304,7 @@ ${widgetPropsContent}
                 if (signal.doc) {
                     lines.push(formatDoc(signal.doc, "\t").trimEnd());
                 }
-                lines.push(`\t${this.generateSignalHandler(signal)}`);
+                lines.push(`\t${this.generateSignalHandler(signal, widgetName)}`);
             }
         }
         if (isListWidget(widget.name)) {
@@ -412,10 +412,10 @@ ${widgetPropsContent}
         }
         return undefined;
     }
-    generateSignalHandler(signal) {
+    generateSignalHandler(signal, widgetName) {
         const signalName = toCamelCase(signal.name);
         const handlerName = `on${signalName.charAt(0).toUpperCase()}${signalName.slice(1)}`;
-        const handlerType = this.buildSignalHandlerType(signal);
+        const handlerType = this.buildSignalHandlerType(signal, widgetName);
         return `${handlerName}?: ${handlerType};`;
     }
     getSignalParamFfiType(typeName) {
@@ -446,8 +446,9 @@ ${widgetPropsContent}
             return tsType;
         return `Gtk.${tsType}`;
     }
-    buildSignalHandlerType(signal) {
-        const params = signal.parameters
+    buildSignalHandlerType(signal, widgetName) {
+        const selfParam = `self: Gtk.${toPascalCase(widgetName)}`;
+        const otherParams = signal.parameters
             ?.map((p) => {
             const ffiType = this.getSignalParamFfiType(p.type.name);
             if (ffiType) {
@@ -461,7 +462,8 @@ ${widgetPropsContent}
         const returnType = signal.returnType
             ? this.addNamespacePrefix(this.typeMapper.mapType(signal.returnType).ts)
             : "void";
-        return params ? `(${params}) => ${returnType}` : `() => ${returnType}`;
+        const params = otherParams ? `${selfParam}, ${otherParams}` : selfParam;
+        return `(${params}) => ${returnType}`;
     }
     generateExports(widgets, containerMetadata) {
         const lines = [];
@@ -516,10 +518,10 @@ ${widgetPropsContent}
                 elements.push(`"${widgetName}.${slot.slotName}": SlotProps;`);
             }
             if (isListWidget(widget.name)) {
-                elements.push(`"${widgetName}.Item": ItemProps<any>;`);
+                elements.push(`"${widgetName}.Item": ListItemProps;`);
             }
             if (isDropDownWidget(widget.name)) {
-                elements.push(`"${widgetName}.Item": ItemProps<any>;`);
+                elements.push(`"${widgetName}.Item": ListItemProps;`);
             }
             if (isGridWidget(widget.name)) {
                 elements.push(`"${widgetName}.Child": GridChildProps;`);

package/dist/factory.js

@@ -1,11 +1,6 @@
-import * as Gtk from "@gtkx/ffi/gtk";
-import { CONSTRUCTOR_PARAMS } from "./generated/jsx.js";
-import { ActionBarNode } from "./nodes/action-bar.js";
-import { DialogNode } from "./nodes/dialog.js";
 import { DropDownItemNode, DropDownNode } from "./nodes/dropdown.js";
 import { GridChildNode, GridNode } from "./nodes/grid.js";
 import { ListItemNode, ListViewNode } from "./nodes/list.js";
-import { NotebookNode } from "./nodes/notebook.js";
 import { OverlayNode } from "./nodes/overlay.js";
 import { SlotNode } from "./nodes/slot.js";
 import { WidgetNode } from "./nodes/widget.js";
@@ -16,43 +11,14 @@ const NODE_CLASSES = [
     DropDownNode,
     GridChildNode,
     GridNode,
-    NotebookNode,
     OverlayNode,
-    ActionBarNode,
     ListViewNode,
-    DialogNode,
     WidgetNode,
 ];
-const extractConstructorArgs = (type, props) => {
-    const params = CONSTRUCTOR_PARAMS[type];
-    if (!params)
-        return [];
-    return params.map((p) => props[p.name]);
-};
-const createWidget = (type, props, currentApp) => {
-    const WidgetClass = Gtk[type];
-    if (!WidgetClass)
-        throw new Error(`Unknown GTK widget type: ${type}`);
-    if (type === "ApplicationWindow") {
-        return new WidgetClass(currentApp);
-    }
-    const args = extractConstructorArgs(type, props);
-    return new WidgetClass(...args);
-};
-const normalizeType = (type) => (type.endsWith(".Root") ? type.slice(0, -5) : type);
 export const createNode = (type, props, currentApp) => {
-    const normalizedType = normalizeType(type);
-    let widget = null;
     for (const NodeClass of NODE_CLASSES) {
-        if (NodeClass.needsWidget && !widget) {
-            widget = createWidget(normalizedType, props, currentApp);
-        }
-        if (NodeClass.matches(type, widget)) {
-            const node = new NodeClass(type, widget, props);
-            if (NodeClass.needsWidget) {
-                node.updateProps({}, props);
-            }
-            return node;
+        if (NodeClass.matches(type)) {
+            return new NodeClass(type, props, currentApp);
         }
     }
     throw new Error(`No matching node class for type: ${type}`);