@gtkx/react 0.2.6 → 0.3.0

package/README.md

@@ -64,20 +64,12 @@ npm install -D @types/react typescript
 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";
+// src/app.tsx
 import { useState } from "react";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { ApplicationWindow, Box, Button, Label, quit } from "@gtkx/react";
 
-export const App = () => {
+export default function App() {
   const [count, setCount] = useState(0);
 
   return (
@@ -88,7 +80,7 @@ export const App = () => {
       onCloseRequest={quit}
     >
       <Box
-        orientation={Orientation.VERTICAL}
+        orientation={Gtk.Orientation.VERTICAL}
         spacing={12}
         marginStart={20}
         marginEnd={20}
@@ -100,7 +92,17 @@ export const App = () => {
       </Box>
     </ApplicationWindow>
   );
-};
+}
+
+export const appId = "org.example.MyApp";
+```
+
+```tsx
+// src/index.tsx
+import { render } from "@gtkx/react";
+import App, { appId } from "./app.js";
+
+render(<App />, appId);
 ```
 
 Run with HMR:
@@ -109,10 +111,10 @@ Run with HMR:
 npx gtkx dev src/app.tsx
 ```
 
-Or without HMR:
+Or without HMR (production):
 
 ```bash
-npx tsx index.tsx
+npx tsc -b && node dist/index.js
 ```
 
 ## Styling

package/dist/nodes/column-view.js

@@ -1,4 +1,4 @@
-import { getObject, getObjectId } from "@gtkx/ffi";
+import { getObject, getObjectAddr } from "@gtkx/ffi";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { scheduleFlush } from "../batch.js";
@@ -71,7 +71,7 @@ export class ColumnViewNode extends Node {
         const baseSorter = this.widget.getSorter();
         if (!baseSorter)
             return;
-        const sorter = getObject(baseSorter.ptr, Gtk.ColumnViewSorter);
+        const sorter = getObject(baseSorter.id);
         const column = sorter.getPrimarySortColumn();
         const order = sorter.getPrimarySortOrder();
         const columnId = column?.getId() ?? null;
@@ -244,8 +244,8 @@ export class ColumnViewColumnNode extends Node {
             column.setFixedWidth(props.fixedWidth);
         }
         factory.connect("setup", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
-            const id = getObjectId(listItemObj.ptr);
+            const listItem = getObject(listItemObj.id);
+            const id = getObjectAddr(listItemObj.id);
             const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
             listItem.setChild(box);
             const fiberRoot = createFiberRoot(box);
@@ -254,8 +254,8 @@ export class ColumnViewColumnNode extends Node {
             reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
         });
         factory.connect("bind", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
-            const id = getObjectId(listItemObj.ptr);
+            const listItem = getObject(listItemObj.id);
+            const id = getObjectAddr(listItemObj.id);
             const info = this.state.listItemCache.get(id);
             if (!info)
                 return;
@@ -268,14 +268,14 @@ export class ColumnViewColumnNode extends Node {
             }
         });
         factory.connect("unbind", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj.ptr);
+            const id = getObjectAddr(listItemObj.id);
             const info = this.state.listItemCache.get(id);
             if (!info)
                 return;
             reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
         });
         factory.connect("teardown", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj.ptr);
+            const id = getObjectAddr(listItemObj.id);
             const info = this.state.listItemCache.get(id);
             if (info) {
                 reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
@@ -309,8 +309,8 @@ export class ColumnViewColumnNode extends Node {
         const columnView = this.columnView;
         const wrappedSortFn = (stringObjPtrA, stringObjPtrB) => {
             const items = columnView.getItems();
-            const stringObjA = getObject(stringObjPtrA, Gtk.StringObject);
-            const stringObjB = getObject(stringObjPtrB, Gtk.StringObject);
+            const stringObjA = getObject(stringObjPtrA);
+            const stringObjB = getObject(stringObjPtrB);
             const indexA = Number.parseInt(stringObjA.getString(), 10);
             const indexB = Number.parseInt(stringObjB.getString(), 10);
             if (Number.isNaN(indexA) || Number.isNaN(indexB))

package/dist/nodes/list.js

@@ -1,4 +1,4 @@
-import { getObject, getObjectId } from "@gtkx/ffi";
+import { getObject, getObjectAddr } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { scheduleFlush } from "../batch.js";
 import { isItemContainer } from "../container-interfaces.js";
@@ -28,8 +28,8 @@ export class ListViewNode extends Node {
         this.state.selectionModel = selectionModel;
         this.state.factory = factory;
         factory.connect("setup", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
-            const id = getObjectId(listItemObj.ptr);
+            const listItem = getObject(listItemObj.id);
+            const id = getObjectAddr(listItemObj.id);
             const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
             listItem.setChild(box);
             const fiberRoot = createFiberRoot(box);
@@ -38,8 +38,8 @@ export class ListViewNode extends Node {
             reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
         });
         factory.connect("bind", (_self, listItemObj) => {
-            const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
-            const id = getObjectId(listItemObj.ptr);
+            const listItem = getObject(listItemObj.id);
+            const id = getObjectAddr(listItemObj.id);
             const info = this.state.listItemCache.get(id);
             if (!info)
                 return;
@@ -49,14 +49,14 @@ export class ListViewNode extends Node {
             reconciler.getInstance().updateContainer(element, info.fiberRoot, null, () => { });
         });
         factory.connect("unbind", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj.ptr);
+            const id = getObjectAddr(listItemObj.id);
             const info = this.state.listItemCache.get(id);
             if (!info)
                 return;
             reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });
         });
         factory.connect("teardown", (_self, listItemObj) => {
-            const id = getObjectId(listItemObj.ptr);
+            const id = getObjectAddr(listItemObj.id);
             const info = this.state.listItemCache.get(id);
             if (info) {
                 reconciler.getInstance().updateContainer(null, info.fiberRoot, null, () => { });

package/dist/nodes/slot.js

@@ -33,7 +33,7 @@ export class SlotNode extends Node {
         const setterName = `set${this.slotName}`;
         const setter = parentWidget[setterName];
         if (typeof setter === "function") {
-            setter.call(parentWidget, childWidget?.ptr ?? null);
+            setter.call(parentWidget, childWidget?.id ?? null);
         }
     }
     appendChild(child) {

package/package.json

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