@gtkx/react 0.17.2 → 0.18.0

package/dist/nodes/models/menu.js

@@ -1,16 +1,12 @@
-import { isObjectEqual } from "@gtkx/ffi";
 import * as Gio from "@gtkx/ffi/gio";
-import { CommitPriority, scheduleAfterCommit } from "../../scheduler.js";
 import { VirtualNode } from "../virtual.js";
 export class MenuModel extends VirtualNode {
     actionMap = null;
     actionPrefix;
-    parent = null;
     menu;
     type;
     application = null;
     action = null;
-    children = [];
     constructor(type, props, rootContainer, actionMap, application) {
         super("", props, undefined, rootContainer);
         this.type = type;
@@ -19,6 +15,12 @@ export class MenuModel extends VirtualNode {
         this.application = application ?? null;
         this.menu = new Gio.Menu();
     }
+    isValidChild(child) {
+        return child instanceof MenuModel;
+    }
+    isValidParent(parent) {
+        return parent instanceof MenuModel;
+    }
     setActionMap(actionMap, prefix) {
         this.actionMap = actionMap;
         this.actionPrefix = prefix;
@@ -51,11 +53,11 @@ export class MenuModel extends VirtualNode {
         }
         return this.props.id;
     }
-    getParent() {
+    getParentMenu() {
         if (!this.parent) {
             throw new Error("Expected parent menu to be set on MenuNode");
         }
-        return this.parent;
+        return this.parent.getMenu();
     }
     getActionMap() {
         if (!this.actionMap) {
@@ -85,28 +87,25 @@ export class MenuModel extends VirtualNode {
         }
     }
     getPosition() {
-        return this.findPositionIn(this.getParent());
+        return this.findPositionIn(this.getParentMenu());
     }
-    findPositionIn(parent) {
-        for (let i = 0; i < parent.getNItems(); i++) {
+    findPositionIn(parentMenu) {
+        for (let i = 0; i < parentMenu.getNItems(); i++) {
             if (this.type === "item") {
-                const actionName = parent.getItemAttributeValue(i, "action")?.getString();
+                const actionName = parentMenu.getItemAttributeValue(i, "action")?.getString();
                 if (actionName === this.getActionName()) {
                     return i;
                 }
             }
             else {
-                const link = parent.getItemLink(i, this.type);
-                if (link && isObjectEqual(link, this.menu)) {
+                const link = parentMenu.getItemLink(i, this.type);
+                if (link && link === this.menu) {
                     return i;
                 }
             }
         }
         return -1;
     }
-    setParent(parent) {
-        this.parent = parent;
-    }
     getMenu() {
         return this.menu;
     }
@@ -116,98 +115,71 @@ export class MenuModel extends VirtualNode {
         }
         return this.action;
     }
-    removeFromParent() {
+    removeFromParentMenu() {
         if (!this.parent)
             return;
-        const parent = this.parent;
-        this.parent = null;
-        scheduleAfterCommit(() => {
-            const position = this.findPositionIn(parent);
-            if (position >= 0) {
-                parent.remove(position);
-            }
-        }, CommitPriority.HIGH);
+        const parentMenu = this.parent.getMenu();
+        const position = this.findPositionIn(parentMenu);
+        if (position >= 0) {
+            parentMenu.remove(position);
+        }
     }
     insertInParentBefore(before) {
         if (this.type === "item" && this.actionMap) {
             this.createAction();
         }
-        scheduleAfterCommit(() => {
-            const parent = this.getParent();
-            const beforePosition = before.getPosition();
-            switch (this.type) {
-                case "item": {
-                    parent.insert(beforePosition, this.props.label, this.getActionName());
-                    break;
-                }
-                case "section":
-                    parent.insertSection(beforePosition, this.menu, this.props.label);
-                    break;
-                case "submenu":
-                    parent.insertSubmenu(beforePosition, this.menu, this.props.label);
-                    break;
+        const parentMenu = this.getParentMenu();
+        const beforePosition = before.getPosition();
+        switch (this.type) {
+            case "item": {
+                parentMenu.insert(beforePosition, this.props.label, this.getActionName());
+                break;
             }
-        }, CommitPriority.NORMAL);
+            case "section":
+                parentMenu.insertSection(beforePosition, this.menu, this.props.label);
+                break;
+            case "submenu":
+                parentMenu.insertSubmenu(beforePosition, this.menu, this.props.label);
+                break;
+        }
     }
-    appendToParent() {
+    appendToParentMenu() {
         if (this.type === "item" && this.actionMap) {
             this.createAction();
         }
-        scheduleAfterCommit(() => {
-            const parent = this.getParent();
-            switch (this.type) {
-                case "item":
-                    parent.append(this.props.label, this.getActionName());
-                    break;
-                case "section":
-                    parent.appendSection(this.menu, this.props.label);
-                    break;
-                case "submenu":
-                    parent.appendSubmenu(this.menu, this.props.label);
-                    break;
-            }
-        }, CommitPriority.NORMAL);
+        const parentMenu = this.getParentMenu();
+        switch (this.type) {
+            case "item":
+                parentMenu.append(this.props.label, this.getActionName());
+                break;
+            case "section":
+                parentMenu.appendSection(this.menu, this.props.label);
+                break;
+            case "submenu":
+                parentMenu.appendSubmenu(this.menu, this.props.label);
+                break;
+        }
     }
     appendChild(child) {
-        if (!(child instanceof MenuModel)) {
-            return;
-        }
-        this.children.push(child);
+        super.appendChild(child);
         if (this.actionMap) {
             child.setActionMap(this.actionMap, this.actionPrefix);
         }
-        child.setParent(this.menu);
-        child.appendToParent();
+        child.appendToParentMenu();
     }
     insertBefore(child, before) {
-        if (!(child instanceof MenuModel) || !(before instanceof MenuModel)) {
-            return;
-        }
-        const beforeIndex = this.children.indexOf(before);
-        if (beforeIndex >= 0) {
-            this.children.splice(beforeIndex, 0, child);
-        }
-        else {
-            this.children.push(child);
-        }
+        super.insertBefore(child, before);
         if (this.actionMap) {
             child.setActionMap(this.actionMap, this.actionPrefix);
         }
-        child.setParent(this.menu);
         child.insertInParentBefore(before);
     }
     removeChild(child) {
-        if (!(child instanceof MenuModel)) {
-            return;
-        }
-        const index = this.children.indexOf(child);
-        if (index >= 0) {
-            this.children.splice(index, 1);
-        }
-        child.removeFromParent();
+        child.removeFromParentMenu();
+        super.removeChild(child);
     }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps, newProps);
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps, newProps);
         if (this.type === "item") {
             this.updateItemProps(oldProps, newProps);
         }
@@ -223,12 +195,10 @@ export class MenuModel extends VirtualNode {
             return;
         }
         if (oldProps.id !== newProps.id || oldProps.label !== newProps.label) {
-            const parent = this.parent;
             this.removeAction();
-            this.removeFromParent();
-            this.parent = parent;
+            this.removeFromParentMenu();
             this.createAction();
-            this.appendToParent();
+            this.appendToParentMenu();
             return;
         }
         if (oldProps.onActivate !== newProps.onActivate) {
@@ -245,22 +215,22 @@ export class MenuModel extends VirtualNode {
             return;
         }
         if (!oldProps || oldProps.label !== newProps.label) {
-            const parent = this.parent;
-            const position = this.findPositionIn(parent);
+            const parentMenu = this.parent.getMenu();
+            const position = this.findPositionIn(parentMenu);
             if (position >= 0) {
-                parent.remove(position);
+                parentMenu.remove(position);
                 if (this.type === "section") {
-                    parent.insertSection(position, this.menu, this.props.label);
+                    parentMenu.insertSection(position, this.menu, this.props.label);
                 }
                 else if (this.type === "submenu") {
-                    parent.insertSubmenu(position, this.menu, this.props.label);
+                    parentMenu.insertSubmenu(position, this.menu, this.props.label);
                 }
             }
         }
     }
-    unmount() {
+    detachDeletedInstance() {
         this.removeAction();
-        this.removeFromParent();
-        super.unmount();
+        this.removeFromParentMenu();
+        super.detachDeletedInstance();
     }
 }

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

@@ -1,12 +1,18 @@
-import * as Adw from "@gtkx/ffi/adw";
 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;
-    static matches(type: string): boolean;
-    updateProps(oldProps: Props | null, newProps: Props): void;
-    protected applyOwnProps(oldProps: Props | null, newProps: Props): void;
-    protected onChildChange(oldChild: Adw.NavigationPage | null): void;
+import type { Node } from "../node.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+export declare class NavigationPageNode extends VirtualNode<NavigationPageProps, WidgetNode, WidgetNode> {
+    private wrappedPage;
+    isValidChild(child: Node): boolean;
+    isValidParent(parent: Node): boolean;
+    setParent(parent: WidgetNode | null): void;
+    appendChild(child: WidgetNode): void;
+    removeChild(child: WidgetNode): void;
+    commitUpdate(oldProps: NavigationPageProps | null, newProps: NavigationPageProps): void;
+    detachDeletedInstance(): void;
+    private applyOwnProps;
+    private onChildChange;
+    private applySlotChild;
+    private getParentWidget;
 }
-export {};

package/dist/nodes/navigation-page.js

@@ -1,51 +1,128 @@
 import * as Adw from "@gtkx/ffi/adw";
-import { registerNodeClass } from "../registry.js";
-import { hasChanged } from "./internal/utils.js";
-import { SlotNode } from "./slot.js";
-export class NavigationPageNode extends SlotNode {
-    static priority = 1;
-    static matches(type) {
-        return type === "NavigationPage";
-    }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps, newProps);
+import { toCamelCase } from "@gtkx/gir";
+import { hasChanged } from "./internal/props.js";
+import { getFocusWidget, isDescendantOf, resolvePropertySetter } from "./internal/widget.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+export class NavigationPageNode extends VirtualNode {
+    wrappedPage = null;
+    isValidChild(child) {
+        return child instanceof WidgetNode;
+    }
+    isValidParent(parent) {
+        return parent instanceof WidgetNode;
+    }
+    setParent(parent) {
+        if (!parent && this.parent && this.wrappedPage) {
+            const parentWidget = this.getParentWidget();
+            if (parentWidget instanceof Adw.NavigationView) {
+                parentWidget.remove(this.wrappedPage);
+            }
+            else {
+                this.applySlotChild(parentWidget, this.wrappedPage);
+            }
+            this.wrappedPage = null;
+        }
+        super.setParent(parent);
+        if (parent && this.children[0]) {
+            this.onChildChange(null);
+        }
+    }
+    appendChild(child) {
+        const oldChildWidget = this.children[0]?.container ?? null;
+        super.appendChild(child);
+        if (this.parent) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+    removeChild(child) {
+        const oldChildWidget = child.container;
+        super.removeChild(child);
+        if (this.parent && oldChildWidget) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps, newProps);
         this.applyOwnProps(oldProps, newProps);
     }
+    detachDeletedInstance() {
+        if (this.parent && this.wrappedPage) {
+            const parentWidget = this.getParentWidget();
+            if (parentWidget instanceof Adw.NavigationView) {
+                parentWidget.remove(this.wrappedPage);
+            }
+            else {
+                this.applySlotChild(parentWidget, this.wrappedPage);
+            }
+        }
+        this.wrappedPage = null;
+        super.detachDeletedInstance();
+    }
     applyOwnProps(oldProps, newProps) {
-        const child = this.child;
-        if (!(child instanceof Adw.NavigationPage)) {
+        if (!this.wrappedPage) {
             return;
         }
-        if (hasChanged(oldProps, newProps, "id") && newProps.id !== undefined) {
-            child.setTag(newProps.id);
+        if (hasChanged(oldProps, newProps, "id")) {
+            this.wrappedPage.setTag(newProps.id);
         }
-        if (hasChanged(oldProps, newProps, "title") && newProps.title !== undefined) {
-            child.setTitle(newProps.title);
+        if (hasChanged(oldProps, newProps, "title")) {
+            this.wrappedPage.setTitle(newProps.title ?? "");
         }
-        if (hasChanged(oldProps, newProps, "canPop") && newProps.canPop !== undefined) {
-            child.setCanPop(newProps.canPop);
+        if (hasChanged(oldProps, newProps, "canPop")) {
+            this.wrappedPage.setCanPop(newProps.canPop ?? true);
         }
     }
     onChildChange(oldChild) {
-        const navigationView = this.getParent();
+        const parentWidget = this.getParentWidget();
         const title = this.props.title ?? "";
-        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 childWidget = this.children[0]?.container ?? null;
+        if (childWidget) {
+            const wrappedChild = this.props.id
+                ? Adw.NavigationPage.newWithTag(childWidget, title, this.props.id)
+                : new Adw.NavigationPage(childWidget, title);
+            this.wrappedPage = wrappedChild;
+            this.applyOwnProps(null, this.props);
+            if (parentWidget instanceof Adw.NavigationView) {
+                if (oldChild instanceof Adw.NavigationPage) {
+                    parentWidget.remove(oldChild);
+                }
+                parentWidget.add(wrappedChild);
+            }
+            else {
+                this.applySlotChild(parentWidget, oldChild);
+            }
         }
-        if (navigationView instanceof Adw.NavigationView) {
+        else if (parentWidget instanceof Adw.NavigationView) {
             if (oldChild instanceof Adw.NavigationPage) {
-                navigationView.remove(oldChild);
-            }
-            if (this.child) {
-                navigationView.add(this.child);
+                parentWidget.remove(oldChild);
             }
+            this.wrappedPage = null;
         }
         else {
-            super.onChildChange(oldChild);
+            this.wrappedPage = null;
+            this.applySlotChild(parentWidget, oldChild);
+        }
+    }
+    applySlotChild(parentWidget, oldChild) {
+        const propId = toCamelCase(this.props.id ?? "");
+        const setter = resolvePropertySetter(parentWidget, propId);
+        if (!setter) {
+            const parentType = parentWidget.constructor.glibTypeName;
+            throw new Error(`Unable to find property for slot '${propId}' on type '${parentType}'`);
+        }
+        if (oldChild && !this.wrappedPage) {
+            const focus = getFocusWidget(oldChild);
+            if (focus && isDescendantOf(focus, oldChild)) {
+                parentWidget.grabFocus();
+            }
+        }
+        setter(this.wrappedPage);
+    }
+    getParentWidget() {
+        if (!this.parent) {
+            throw new Error("Expected parent widget to be set on NavigationPageNode");
         }
+        return this.parent.container;
     }
 }
-registerNodeClass(NavigationPageNode);

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

@@ -1 +1,16 @@
+import * as Adw from "@gtkx/ffi/adw";
+import type { AdwNavigationViewProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { NavigationPageNode } from "./navigation-page.js";
+import { SlotNode } from "./slot.js";
+import { WidgetNode } from "./widget.js";
+declare const OWN_PROPS: readonly ["history", "onHistoryChanged"];
+type NavigationViewProps = Pick<AdwNavigationViewProps, (typeof OWN_PROPS)[number]>;
+type NavigationViewChild = NavigationPageNode | SlotNode | WidgetNode;
+export declare class NavigationViewNode extends WidgetNode<Adw.NavigationView, NavigationViewProps, NavigationViewChild> {
+    isValidChild(child: Node): boolean;
+    commitUpdate(oldProps: NavigationViewProps | null, newProps: NavigationViewProps): void;
+    private applyOwnProps;
+    private getCurrentHistory;
+}
 export {};

package/dist/nodes/navigation-view.js

@@ -1,89 +1,40 @@
 import * as Adw from "@gtkx/ffi/adw";
-import { registerNodeClass } from "../registry.js";
-import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
-import { filterProps, hasChanged, matchesAnyClass, primitiveArrayEqual } from "./internal/utils.js";
+import { filterProps, hasChanged, primitiveArrayEqual } from "./internal/props.js";
 import { NavigationPageNode } from "./navigation-page.js";
 import { SlotNode } from "./slot.js";
 import { WidgetNode } from "./widget.js";
 const OWN_PROPS = ["history", "onHistoryChanged"];
-class NavigationViewNode extends WidgetNode {
-    static priority = 1;
-    static matches(_type, containerOrClass) {
-        return matchesAnyClass([Adw.NavigationView], containerOrClass);
+export class NavigationViewNode extends WidgetNode {
+    isValidChild(child) {
+        return child instanceof NavigationPageNode || child instanceof SlotNode || child instanceof WidgetNode;
     }
-    appendChild(child) {
-        if (child instanceof NavigationPageNode) {
-            child.setParent(this.container);
-            return;
-        }
-        if (child instanceof SlotNode || child instanceof WidgetNode) {
-            super.appendChild(child);
-            return;
-        }
-        throw new Error(`Cannot append '${child.typeName}' to 'NavigationView': expected x.NavigationPage or Widget`);
-    }
-    insertBefore(child, before) {
-        if (child instanceof NavigationPageNode) {
-            child.setParent(this.container);
-            return;
-        }
-        if (child instanceof SlotNode || child instanceof WidgetNode) {
-            super.insertBefore(child, before);
-            return;
-        }
-        throw new Error(`Cannot insert '${child.typeName}' into 'NavigationView': expected x.NavigationPage or Widget`);
-    }
-    removeChild(child) {
-        if (child instanceof NavigationPageNode) {
-            return;
-        }
-        if (child instanceof SlotNode || child instanceof WidgetNode) {
-            super.removeChild(child);
-            return;
-        }
-        throw new Error(`Cannot remove '${child.typeName}' from 'NavigationView': expected x.NavigationPage or Widget`);
-    }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
         this.applyOwnProps(oldProps, newProps);
     }
     applyOwnProps(oldProps, newProps) {
         const oldHistory = oldProps?.history;
         const newHistory = newProps.history;
         if (newHistory && !primitiveArrayEqual(oldHistory, newHistory)) {
-            this.syncHistory(newHistory);
+            this.container.replaceWithTags(newHistory, newHistory.length);
         }
         if (hasChanged(oldProps, newProps, "onHistoryChanged")) {
-            const onHistoryChanged = newProps.onHistoryChanged;
-            if (onHistoryChanged) {
-                const handleHistoryChanged = () => {
-                    const history = this.getCurrentHistory();
-                    onHistoryChanged(history);
-                };
-                this.signalStore.set(this, this.container, "popped", handleHistoryChanged);
-                this.signalStore.set(this, this.container, "pushed", handleHistoryChanged);
-                this.signalStore.set(this, this.container, "replaced", handleHistoryChanged);
-            }
-            else {
-                this.signalStore.set(this, this.container, "popped", null);
-                this.signalStore.set(this, this.container, "pushed", null);
-                this.signalStore.set(this, this.container, "replaced", null);
-            }
+            const { onHistoryChanged } = newProps;
+            const handler = onHistoryChanged ? () => onHistoryChanged(this.getCurrentHistory()) : undefined;
+            this.signalStore.set(this, this.container, "popped", handler);
+            this.signalStore.set(this, this.container, "pushed", handler);
+            this.signalStore.set(this, this.container, "replaced", handler);
         }
     }
-    syncHistory(history) {
-        const container = this.container;
-        scheduleAfterCommit(() => {
-            container.replaceWithTags(history, history.length);
-        }, CommitPriority.NORMAL);
-    }
     getCurrentHistory() {
         const stack = this.container.getNavigationStack();
         const history = [];
         const nItems = stack.getNItems();
         for (let i = 0; i < nItems; i++) {
             const page = stack.getObject(i);
-            const tag = page?.getTag();
+            if (!(page instanceof Adw.NavigationPage))
+                continue;
+            const tag = page.getTag();
             if (tag) {
                 history.push(tag);
             }
@@ -91,4 +42,3 @@ class NavigationViewNode extends WidgetNode {
         return history;
     }
 }
-registerNodeClass(NavigationViewNode);

package/dist/nodes/notebook-page-tab.d.ts

@@ -1,16 +1,14 @@
-import type * as Gtk from "@gtkx/ffi/gtk";
 import type { SlotProps } from "../jsx.js";
-import { SlotNode } from "./slot.js";
-type Props = Partial<SlotProps>;
-export declare class NotebookPageTabNode extends SlotNode<Props> {
-    static priority: number;
-    private notebook;
-    private page;
-    static matches(type: string): boolean;
-    setPage(notebook: Gtk.Notebook | null, page: Gtk.Widget | null): void;
-    updateProps(oldProps: Props | null, newProps: Props): void;
+import type { Node } from "../node.js";
+import type { NotebookPageNode } from "./notebook-page.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+export declare class NotebookPageTabNode extends VirtualNode<SlotProps, NotebookPageNode, WidgetNode> {
+    isValidChild(child: Node): boolean;
+    isValidParent(parent: Node): boolean;
     private getNotebook;
     private getPage;
-    protected onChildChange(_oldChild: Gtk.Widget | null): void;
+    appendChild(child: WidgetNode): void;
+    removeChild(child: WidgetNode): void;
+    private onChildChange;
 }
-export {};