@gtkx/react 0.13.1 → 0.13.3

package/README.md

@@ -83,6 +83,7 @@ Explore complete applications in the [`examples/`](./examples) directory:
 - **[gtk-demo](./examples/gtk-demo)** — Full replica of the official GTK demo app
 - **[hello-world](./examples/hello-world)** — Minimal application showing a counter
 - **[todo](./examples/todo)** — Full-featured todo application with Adwaita styling and testing
+- **[x-showcase](./examples/x-showcase)** — Showcase of all x.* virtual components
 - **[deploying](./examples/deploying)** — Example of packaging and distributing a GTKX app
 
 ## Documentation

package/dist/nodes/navigation-page.d.ts

@@ -1,16 +1,11 @@
 import * as Adw from "@gtkx/ffi/adw";
-import type * as Gtk from "@gtkx/ffi/gtk";
 import type { NavigationPageProps } from "../jsx.js";
 import { SlotNode } from "./slot.js";
 type Props = Partial<NavigationPageProps>;
 export declare class NavigationPageNode extends SlotNode<Props> {
     static priority: number;
-    private page?;
     static matches(type: string): boolean;
-    getPage(): Adw.NavigationPage | undefined;
     updateProps(oldProps: Props | null, newProps: Props): void;
-    private addPage;
-    private removePage;
-    protected onChildChange(oldChild: Gtk.Widget | null): void;
+    protected onChildChange(oldChild: Adw.NavigationPage | null): void;
 }
 export {};

package/dist/nodes/navigation-page.js

@@ -1,57 +1,46 @@
-import { isObjectEqual } from "@gtkx/ffi";
 import * as Adw from "@gtkx/ffi/adw";
 import { registerNodeClass } from "../registry.js";
 import { SlotNode } from "./slot.js";
 export class NavigationPageNode extends SlotNode {
     static priority = 1;
-    page;
     static matches(type) {
         return type === "NavigationPage";
     }
-    getPage() {
-        return this.page;
-    }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
-        if (!this.page) {
+        const child = this.child;
+        if (!(child instanceof Adw.NavigationPage)) {
             return;
         }
         if (newProps.id !== undefined && (!oldProps || oldProps.id !== newProps.id)) {
-            this.page.setTag(newProps.id);
+            child.setTag(newProps.id);
         }
         if (newProps.title !== undefined && (!oldProps || oldProps.title !== newProps.title)) {
-            this.page.setTitle(newProps.title);
+            child.setTitle(newProps.title);
         }
         if (newProps.canPop !== undefined && (!oldProps || oldProps.canPop !== newProps.canPop)) {
-            this.page.setCanPop(newProps.canPop);
+            child.setCanPop(newProps.canPop);
         }
     }
-    addPage() {
-        const child = this.getChild();
-        const parent = this.getParent();
+    onChildChange(oldChild) {
+        const navigationView = this.getParent();
         const title = this.props.title ?? "";
-        const page = this.props.id
-            ? Adw.NavigationPage.newWithTag(child, title, this.props.id)
-            : new Adw.NavigationPage(child, title);
-        parent.add(page);
-        this.page = page;
-        this.updateProps(null, this.props);
-    }
-    removePage(oldChild) {
-        const parent = this.getParent();
-        if (!oldChild || !this.page) {
-            return;
+        if (this.child) {
+            this.child = this.props.id
+                ? Adw.NavigationPage.newWithTag(this.child, title, this.props.id)
+                : new Adw.NavigationPage(this.child, title);
+            this.updateProps(null, this.props);
         }
-        const pageChild = this.page.getChild();
-        if (pageChild && isObjectEqual(pageChild, oldChild)) {
-            parent.remove(this.page);
-            this.page = undefined;
+        if (navigationView instanceof Adw.NavigationView) {
+            if (oldChild instanceof Adw.NavigationPage) {
+                navigationView.remove(oldChild);
+            }
+            if (this.child) {
+                navigationView.add(this.child);
+            }
         }
-    }
-    onChildChange(oldChild) {
-        this.removePage(oldChild);
-        if (this.child) {
-            this.addPage();
+        else {
+            super.onChildChange(oldChild);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtkx",
@@ -37,8 +37,8 @@
   ],
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@gtkx/gir": "0.13.1",
-    "@gtkx/ffi": "0.13.1"
+    "@gtkx/gir": "0.13.3",
+    "@gtkx/ffi": "0.13.3"
   },
   "devDependencies": {
     "@types/react-reconciler": "^0.32.3"