@gtkx/react 0.1.23 → 0.1.25

package/dist/codegen/jsx-generator.js

@@ -231,9 +231,7 @@ ${widgetPropsContent}
         const parentPropsName = this.getParentPropsName(widget);
         const namedChildPropNames = new Set(metadata.namedChildSlots.map((s) => toCamelCase(s.propertyName)));
         const lines = [];
-        if (widget.doc) {
-            lines.push(formatDoc(widget.doc).trimEnd());
-        }
+        lines.push(`/** Props for the {@link ${widgetName}} widget. */`);
         lines.push(`export interface ${widgetName}Props extends ${parentPropsName} {`);
         const requiredCtorParams = this.getRequiredConstructorParams(widget);
         const seenProps = new Set();

package/dist/factory.d.ts

@@ -1,4 +1,4 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
 import type { Node } from "./node.js";
 export type Props = Record<string, unknown>;
-export declare const createNode: (type: string, props: Props, app: Gtk.Application) => Node;
+export declare const createNode: (type: string, props: Props, app: Gtk.Application, existingWidget?: Gtk.Widget) => Node;

package/dist/factory.js

@@ -5,20 +5,20 @@ import { OverlayNode } from "./nodes/overlay.js";
 import { SlotNode } from "./nodes/slot.js";
 import { WidgetNode } from "./nodes/widget.js";
 const NODE_CLASSES = [
-    SlotNode,
     ListItemNode,
     DropDownItemNode,
-    DropDownNode,
     GridChildNode,
+    SlotNode,
+    DropDownNode,
     GridNode,
     OverlayNode,
     ListViewNode,
     WidgetNode,
 ];
-export const createNode = (type, props, app) => {
+export const createNode = (type, props, app, existingWidget) => {
     for (const NodeClass of NODE_CLASSES) {
         if (NodeClass.matches(type)) {
-            return new NodeClass(type, props, app);
+            return new NodeClass(type, props, app, existingWidget);
         }
     }
     throw new Error(`No matching node class for type: ${type}`);

package/dist/node.d.ts

@@ -5,14 +5,15 @@ export declare abstract class Node<T extends Gtk.Widget | undefined = Gtk.Widget
     protected signalHandlers: Map<string, number>;
     protected widget: T;
     protected isVirtual(): boolean;
-    constructor(type: string, props: Props, app: Gtk.Application);
+    constructor(type: string, props: Props, app: Gtk.Application, existingWidget?: Gtk.Widget);
     protected createWidget(type: string, props: Props, app: Gtk.Application): T;
     getWidget(): T;
     appendChild(child: Node): void;
     removeChild(child: Node): void;
-    insertBefore(child: Node, _before: Node): void;
+    insertBefore(child: Node, before: Node): void;
     attachToParent(parent: Node): void;
     detachFromParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
     protected setSignalProperty(widget: Gtk.Widget, key: string, handler: unknown): void;

package/dist/node.js

@@ -17,7 +17,11 @@ export class Node {
     isVirtual() {
         return false;
     }
-    constructor(type, props, app) {
+    constructor(type, props, app, existingWidget) {
+        if (existingWidget) {
+            this.widget = existingWidget;
+            return;
+        }
         this.widget = (this.isVirtual() ? undefined : this.createWidget(type, props, app));
         this.updateProps({}, props);
     }
@@ -27,7 +31,7 @@ export class Node {
         if (!WidgetClass) {
             throw new Error(`Unknown GTK widget type: ${normalizedType}`);
         }
-        if (normalizedType === "ApplicationWindow") {
+        if (WidgetClass === Gtk.ApplicationWindow) {
             return new WidgetClass(app);
         }
         return new WidgetClass(...extractConstructorArgs(normalizedType, props));
@@ -41,8 +45,8 @@ export class Node {
     removeChild(child) {
         child.detachFromParent(this);
     }
-    insertBefore(child, _before) {
-        this.appendChild(child);
+    insertBefore(child, before) {
+        child.attachToParentBefore(this, before);
     }
     attachToParent(parent) {
         const parentWidget = parent.getWidget();
@@ -50,7 +54,7 @@ export class Node {
         if (!parentWidget || !widget)
             return;
         if (isAppendable(parentWidget)) {
-            parentWidget.append(widget);
+            widget.insertBefore(parentWidget, null);
         }
         else if (isSingleChild(parentWidget)) {
             parentWidget.setChild(widget);
@@ -68,6 +72,19 @@ export class Node {
             parentWidget.setChild(null);
         }
     }
+    attachToParentBefore(parent, before) {
+        const parentWidget = parent.getWidget();
+        const widget = this.getWidget();
+        const beforeWidget = before.getWidget();
+        if (!parentWidget || !widget)
+            return;
+        if (isAppendable(parentWidget) && beforeWidget) {
+            widget.insertBefore(parentWidget, beforeWidget);
+        }
+        else {
+            this.attachToParent(parent);
+        }
+    }
     consumedProps() {
         return new Set(["children"]);
     }

package/dist/nodes/list.d.ts

@@ -11,6 +11,7 @@ export declare class ListViewNode extends Node<Gtk.ListView> {
     private factorySignalHandlers;
     constructor(type: string, props: Props, app: Gtk.Application);
     addItem(item: unknown): void;
+    insertItemBefore(item: unknown, beforeItem: unknown): void;
     removeItem(item: unknown): void;
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
@@ -23,5 +24,6 @@ export declare class ListItemNode extends Node {
     constructor(type: string, props: Props, app: Gtk.Application);
     getItem(): unknown;
     attachToParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
     detachFromParent(parent: Node): void;
 }

package/dist/nodes/list.js

@@ -43,6 +43,15 @@ export class ListViewNode extends Node {
         this.items.push(item);
         this.stringList.append("");
     }
+    insertItemBefore(item, beforeItem) {
+        const beforeIndex = this.items.indexOf(beforeItem);
+        if (beforeIndex === -1) {
+            this.addItem(item);
+            return;
+        }
+        this.items.splice(beforeIndex, 0, item);
+        this.stringList.splice(beforeIndex, 0, [""]);
+    }
     removeItem(item) {
         const index = this.items.indexOf(item);
         if (index !== -1) {
@@ -92,6 +101,14 @@ export class ListItemNode extends Node {
             parent.addItem(this.item);
         }
     }
+    attachToParentBefore(parent, before) {
+        if (parent instanceof ListViewNode && before instanceof ListItemNode) {
+            parent.insertItemBefore(this.item, before.getItem());
+        }
+        else {
+            this.attachToParent(parent);
+        }
+    }
     detachFromParent(parent) {
         if (parent instanceof ListViewNode) {
             parent.removeItem(this.item);

package/dist/nodes/overlay.d.ts

@@ -5,5 +5,6 @@ export declare class OverlayNode extends Node<Gtk.Overlay> {
     private mainChild;
     private overlayChildren;
     attachChild(childWidget: Gtk.Widget): void;
+    insertChildBefore(childWidget: Gtk.Widget, beforeWidget: Gtk.Widget): void;
     detachChild(childWidget: Gtk.Widget): void;
 }

package/dist/nodes/overlay.js

@@ -15,6 +15,25 @@ export class OverlayNode extends Node {
             this.widget.addOverlay(childWidget);
         }
     }
+    insertChildBefore(childWidget, beforeWidget) {
+        if (this.mainChild === null) {
+            this.mainChild = childWidget;
+            this.widget.setChild(childWidget);
+            return;
+        }
+        if (this.mainChild === beforeWidget) {
+            this.overlayChildren.unshift(childWidget);
+            this.widget.addOverlay(childWidget);
+            return;
+        }
+        const beforeIndex = this.overlayChildren.indexOf(beforeWidget);
+        if (beforeIndex === -1) {
+            this.attachChild(childWidget);
+            return;
+        }
+        this.overlayChildren.splice(beforeIndex, 0, childWidget);
+        this.widget.addOverlay(childWidget);
+    }
     detachChild(childWidget) {
         if (this.mainChild === childWidget) {
             this.widget.setChild(null);

package/dist/nodes/widget.d.ts

@@ -1,16 +1,13 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-export declare class WidgetWrapper extends Node<Gtk.Widget> {
-    constructor(widget: Gtk.Widget, app: Gtk.Application);
-    protected isVirtual(): boolean;
-}
 export declare class WidgetNode extends Node<Gtk.Widget> {
     static matches(_type: string): boolean;
     attachToParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
     detachFromParent(parent: Node): void;
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
-    mount(app: Gtk.Application): void;
-    dispose(app: Gtk.Application): void;
+    mount(_app: Gtk.Application): void;
+    dispose(_app: Gtk.Application): void;
 }

package/dist/nodes/widget.js

@@ -13,15 +13,6 @@ const COMBINED_PROPS = [
         },
     },
 ];
-export class WidgetWrapper extends Node {
-    constructor(widget, app) {
-        super("", {}, app);
-        this.widget = widget;
-    }
-    isVirtual() {
-        return true;
-    }
-}
 export class WidgetNode extends Node {
     static matches(_type) {
         return true;
@@ -47,6 +38,40 @@ export class WidgetNode extends Node {
         }
         super.attachToParent(parent);
     }
+    attachToParentBefore(parent, before) {
+        if (this.widget instanceof Gtk.AboutDialog) {
+            return;
+        }
+        if (parent instanceof OverlayNode) {
+            const beforeWidget = before.getWidget();
+            if (beforeWidget) {
+                parent.insertChildBefore(this.widget, beforeWidget);
+            }
+            else {
+                parent.attachChild(this.widget);
+            }
+            return;
+        }
+        const parentWidget = parent.getWidget();
+        const beforeWidget = before.getWidget();
+        if (!parentWidget)
+            return;
+        if (parentWidget instanceof Gtk.ActionBar) {
+            parentWidget.packStart(this.widget);
+            return;
+        }
+        if (parentWidget instanceof Gtk.Notebook && beforeWidget) {
+            const beforePageNum = parentWidget.pageNum(beforeWidget);
+            if (beforePageNum >= 0) {
+                parentWidget.insertPage(this.widget, beforePageNum);
+            }
+            else {
+                parentWidget.appendPage(this.widget);
+            }
+            return;
+        }
+        super.attachToParentBefore(parent, before);
+    }
     detachFromParent(parent) {
         if (this.widget instanceof Gtk.AboutDialog) {
             return;
@@ -73,7 +98,6 @@ export class WidgetNode extends Node {
     }
     consumedProps() {
         const consumed = super.consumedProps();
-        consumed.add("application");
         for (const handler of COMBINED_PROPS) {
             for (const prop of handler.props) {
                 consumed.add(prop);
@@ -94,21 +118,14 @@ export class WidgetNode extends Node {
         }
         super.updateProps(oldProps, newProps);
     }
-    mount(app) {
-        if (this.widget instanceof Gtk.AboutDialog) {
-            const activeWindow = app.getActiveWindow();
-            if (activeWindow) {
-                this.widget.setTransientFor(activeWindow);
-            }
-        }
+    mount(_app) {
         if (this.widget instanceof Gtk.Window) {
             this.widget.present();
         }
     }
-    dispose(app) {
-        super.dispose(app);
+    dispose(_app) {
         if (this.widget instanceof Gtk.Window) {
-            this.widget.close();
+            this.widget.destroy();
         }
     }
 }

package/dist/reconciler.d.ts

@@ -17,6 +17,7 @@ declare class Reconciler {
     getInstance(): ReconcilerInstance;
     private createHostConfig;
     private createReconcilerContext;
+    private createNodeFromContainer;
 }
 export declare const reconciler: Reconciler;
 export {};

package/dist/reconciler.js

@@ -2,7 +2,6 @@ import * as Gtk from "@gtkx/ffi/gtk";
 import React from "react";
 import ReactReconciler from "react-reconciler";
 import { createNode } from "./factory.js";
-import { WidgetWrapper } from "./nodes/widget.js";
 class Reconciler {
     instance;
     app = null;
@@ -45,19 +44,16 @@ class Reconciler {
             removeChild: (parent, child) => parent.removeChild(child),
             insertBefore: (parent, child, beforeChild) => parent.insertBefore(child, beforeChild),
             removeChildFromContainer: (container, child) => {
-                if (container instanceof Gtk.Widget) {
-                    child.detachFromParent(new WidgetWrapper(container, this.getApp()));
-                }
+                const parent = this.createNodeFromContainer(container);
+                parent.removeChild(child);
             },
             appendChildToContainer: (container, child) => {
-                if (container instanceof Gtk.Widget) {
-                    child.attachToParent(new WidgetWrapper(container, this.getApp()));
-                }
+                const parent = this.createNodeFromContainer(container);
+                parent.appendChild(child);
             },
-            insertInContainerBefore: (container, child, _beforeChild) => {
-                if (container instanceof Gtk.Widget) {
-                    child.attachToParent(new WidgetWrapper(container, this.getApp()));
-                }
+            insertInContainerBefore: (container, child, beforeChild) => {
+                const parent = this.createNodeFromContainer(container);
+                parent.insertBefore(child, beforeChild);
             },
             prepareForCommit: () => null,
             resetAfterCommit: () => { },
@@ -104,5 +100,11 @@ class Reconciler {
         const context = React.createContext(value);
         return context;
     }
+    createNodeFromContainer(container) {
+        if (container instanceof Gtk.Widget) {
+            return createNode(container.constructor.name, {}, this.getApp(), container);
+        }
+        return createNode("Application", {}, this.getApp(), container);
+    }
 }
 export const reconciler = new Reconciler();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtk",
@@ -40,10 +40,10 @@
   ],
   "dependencies": {
     "react-reconciler": "0.33.0",
-    "@gtkx/ffi": "0.1.23"
+    "@gtkx/ffi": "0.1.25"
   },
   "devDependencies": {
-    "@gtkx/gir": "0.1.23"
+    "@gtkx/gir": "0.1.25"
   },
   "peerDependencies": {
     "react": "^19"
@@ -51,6 +51,6 @@
   "scripts": {
     "build": "tsc -b && cp ../../README.md .",
     "codegen": "tsx scripts/codegen.ts",
-    "test": "GDK_BACKEND=x11 xvfb-run -a vitest run"
+    "test": "if [ -n \"$CI\" ]; then vitest run; else GDK_BACKEND=x11 xvfb-run -a vitest run; fi"
   }
 }

package/README.md

@@ -1,208 +0,0 @@
-<p align="center">
-  <img src="https://raw.githubusercontent.com/eugeniodepalo/gtkx/HEAD/logo.svg" alt="GTKX Logo" width="128" height="128">
-</p>
-
-<h1 align="center">GTKX</h1>
-
-<p align="center">
-  <strong>Build native GTK4 desktop applications with React and TypeScript</strong>
-</p>
-
-<p align="center">
-  <a href="https://eugeniodepalo.github.io/gtkx">Documentation</a> ·
-  <a href="#quick-start">Quick Start</a> ·
-  <a href="#examples">Examples</a>
-</p>
-
----
-
-GTKX bridges React's component model with GTK4's native widget system. Write familiar React code and render it as native Linux desktop applications with full access to GTK4 widgets, signals, and styling.
-
-## Features
-
-- **React Components** — Use React hooks, state, and component patterns you already know
-- **Type-Safe** — Full TypeScript support with auto-generated types from GTK4 introspection data
-- **Native Performance** — Direct FFI bindings to GTK4 via Rust and libffi
-- **CSS-in-JS Styling** — Emotion-style `css` template literals for GTK widgets
-- **Testing Library** — Familiar `screen`, `userEvent`, and query APIs for testing components
-
-## Quick Start
-
-```bash
-# Install dependencies
-pnpm add @gtkx/react react
-
-# For styling (optional)
-pnpm add @gtkx/css
-
-# For testing (optional)
-pnpm add -D @gtkx/testing
-```
-
-Create your first app:
-
-```tsx
-// index.tsx
-import { render } from "@gtkx/react";
-import { App } from "./app.js";
-
-render(<App />, "org.example.MyApp");
-```
-
-```tsx
-// app.tsx
-import { ApplicationWindow, Box, Button, Label, quit } from "@gtkx/react";
-import { Orientation } from "@gtkx/ffi/gtk";
-import { useState } from "react";
-
-export const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <ApplicationWindow
-      title="My App"
-      defaultWidth={400}
-      defaultHeight={300}
-      onCloseRequest={quit}
-    >
-      <Box orientation={Orientation.VERTICAL} spacing={12} margin={20}>
-        <Label.Root label={`Count: ${count}`} />
-        <Button
-          label="Increment"
-          onClicked={() => setCount((c) => c + 1)}
-        />
-      </Box>
-    </ApplicationWindow>
-  );
-};
-```
-
-Run with:
-
-```bash
-pnpm tsx index.tsx
-```
-
-## Styling
-
-Use `@gtkx/css` for CSS-in-JS styling:
-
-```tsx
-import { css } from "@gtkx/css";
-import { Button } from "@gtkx/react";
-
-const primaryButton = css`
-  padding: 16px 32px;
-  border-radius: 24px;
-  background: linear-gradient(135deg, #3584e4, #9141ac);
-  color: white;
-  font-weight: bold;
-`;
-
-const MyButton = () => (
-  <Button label="Click me" cssClasses={[primaryButton]} />
-);
-```
-
-GTK also provides built-in CSS classes like `suggested-action`, `destructive-action`, `card`, and `heading`.
-
-## Testing
-
-Use `@gtkx/testing` for Testing Library-style component tests:
-
-```tsx
-import { cleanup, render, screen, userEvent, fireEvent } from "@gtkx/testing";
-import { AccessibleRole } from "@gtkx/ffi/gtk";
-import { afterEach, describe, expect, it } from "vitest";
-import { App } from "./app.js";
-
-describe("Counter", () => {
-  afterEach(() => cleanup());
-
-  it("increments count when clicking button", async () => {
-    render(<App />);
-
-    const button = await screen.findByRole(AccessibleRole.BUTTON, {
-      name: "Increment",
-    });
-    await userEvent.click(button);
-
-    await screen.findByText("Count: 1");
-  });
-
-  it("can also use fireEvent for synchronous events", async () => {
-    render(<App />);
-
-    const button = await screen.findByRole(AccessibleRole.BUTTON, {
-      name: "Increment",
-    });
-    fireEvent.click(button);
-
-    await screen.findByText("Count: 1");
-  });
-});
-```
-
-### Available APIs
-
-**Queries** - Find elements in the rendered tree:
-- `getBy*` / `getAllBy*` - Throws if not found
-- `queryBy*` / `queryAllBy*` - Returns null/empty array if not found
-- `findBy*` / `findAllBy*` - Async, waits for element
-
-Query types: `ByRole`, `ByText`, `ByLabelText`, `ByTestId`
-
-**User Interactions**:
-- `userEvent.click(element)` - Simulate click
-- `userEvent.dblClick(element)` - Simulate double click
-- `userEvent.type(element, text)` - Type text into input
-- `userEvent.clear(element)` - Clear input text
-- `userEvent.setup()` - Create reusable instance
-
-**Low-level Events**:
-- `fireEvent(element, signalName)` - Emit any GTK signal
-- `fireEvent.click(element)` - Emit clicked signal
-- `fireEvent.activate(element)` - Emit activate signal
-
-**Utilities**:
-- `waitFor(callback)` - Wait for condition
-- `waitForElementToBeRemoved(element)` - Wait for element removal
-
-## Examples
-
-### Counter
-
-A minimal counter app demonstrating state management:
-
-```bash
-turbo start --filter=counter-example
-```
-
-### GTK4 Demo
-
-A comprehensive showcase of GTK4 widgets and features:
-
-```bash
-turbo start --filter=gtk4-demo
-```
-
-## Packages
-
-| Package | Description |
-|---------|-------------|
-| [@gtkx/react](packages/react) | React reconciler and JSX components |
-| [@gtkx/ffi](packages/ffi) | TypeScript FFI bindings for GTK4 |
-| [@gtkx/native](packages/native) | Rust native module for FFI bridge |
-| [@gtkx/css](packages/css) | CSS-in-JS styling for GTK widgets |
-| [@gtkx/testing](packages/testing) | Testing utilities for GTKX components |
-| [@gtkx/gir](packages/gir) | GObject Introspection parser for codegen |
-
-## Requirements
-
-- Node.js 20+
-- GTK4 development libraries
-- Linux (GTK4 is Linux-native)
-
-## License
-
-[MPL-2.0](LICENSE)