@gtkx/react 0.17.2 → 0.18.0

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

@@ -1 +1,10 @@
+import type * as WebKit from "@gtkx/ffi/webkit";
+import type { WebKitWebViewProps } from "../jsx.js";
+import { WidgetNode } from "./widget.js";
+declare const OWN_PROPS: readonly ["onLoadChanged"];
+type WebViewProps = Pick<WebKitWebViewProps, (typeof OWN_PROPS)[number]>;
+export declare class WebViewNode extends WidgetNode<WebKit.WebView, WebViewProps> {
+    commitUpdate(oldProps: WebViewProps | null, newProps: WebViewProps): void;
+    private applyOwnProps;
+}
 export {};

package/dist/nodes/web-view.js

@@ -1,29 +1,15 @@
-import * as WebKit from "@gtkx/ffi/webkit";
-import { registerNodeClass } from "../registry.js";
-import { filterProps, hasChanged, matchesAnyClass, propNameToSignalName, resolveSignal } from "./internal/utils.js";
+import { filterProps, hasChanged } from "./internal/props.js";
 import { WidgetNode } from "./widget.js";
-const NON_BLOCKABLE_SIGNALS = ["load-changed"];
-class WebViewNode extends WidgetNode {
-    static priority = 1;
-    static matches(_type, containerOrClass) {
-        return matchesAnyClass([WebKit.WebView], containerOrClass);
+const OWN_PROPS = ["onLoadChanged"];
+export class WebViewNode extends WidgetNode {
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
     }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps ? filterProps(oldProps, NON_BLOCKABLE_SIGNALS) : null, filterProps(newProps, NON_BLOCKABLE_SIGNALS));
-        this.applyNonBlockableSignals(oldProps, newProps);
-    }
-    applyNonBlockableSignals(oldProps, newProps) {
-        for (const propName of NON_BLOCKABLE_SIGNALS) {
-            const camelCaseName = `on${propName.charAt(0).toUpperCase()}${propName.slice(1).replace(/-([a-z])/g, (_, c) => c.toUpperCase())}`;
-            if (hasChanged(oldProps, newProps, camelCaseName)) {
-                const signalName = propNameToSignalName(camelCaseName);
-                if (resolveSignal(this.container, signalName)) {
-                    const newValue = newProps[camelCaseName];
-                    const handler = typeof newValue === "function" ? newValue : undefined;
-                    this.signalStore.set(this, this.container, signalName, handler, { blockable: false });
-                }
-            }
+    applyOwnProps(oldProps, newProps) {
+        if (hasChanged(oldProps, newProps, "onLoadChanged")) {
+            const callback = newProps.onLoadChanged;
+            this.signalStore.set(this, this.container, "load-changed", callback ?? undefined, { blockable: false });
         }
     }
 }
-registerNodeClass(WebViewNode);

package/dist/nodes/widget.d.ts

@@ -1,23 +1,27 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
-import type { Container, ContainerClass, Props } from "../types.js";
-export declare class WidgetNode<T extends Gtk.Widget = Gtk.Widget, P extends Props = Props> extends Node<T, P> {
-    static priority: number;
-    static matches(_type: string, containerOrClass?: Container | ContainerClass | null): boolean;
+import type { Container, Props } from "../types.js";
+export declare class WidgetNode<T extends Gtk.Widget = Gtk.Widget, P extends Props = Props, TChild extends Node = any, TParent extends Node = Node> extends Node<T, P, TParent, TChild> {
     static createContainer(props: Props, containerClass: typeof Gtk.Widget, _rootContainer?: Container): Container | null;
-    appendChild(child: Node): void;
-    removeChild(child: Node): void;
-    insertBefore(child: Node, before: Node): void;
-    private insertBeforeReorderable;
-    private insertBeforeInsertable;
-    updateProps(oldProps: P | null, newProps: P): void;
+    isValidChild(_child: Node): boolean;
+    protected shouldAttachToParent(): boolean;
+    appendChild(child: TChild): void;
+    removeChild(child: TChild): void;
+    insertBefore(child: TChild, before: TChild): void;
+    commitUpdate(oldProps: P | null, newProps: P): void;
+    private appendWidgetChild;
+    private isChildAutowrapped;
+    private detachAutowrappedChild;
+    private insertBeforeAutowrapping;
+    private findAutowrappedPosition;
+    private unwrapGtkChild;
+    private reinsertAllChildren;
     private updateSizeRequest;
     private updateGrabFocus;
     private getPropertyDefaultValue;
     private setProperty;
-    private detachChildFromParent;
-    private attachChild;
-    private detachChild;
+    private insertBeforeReorderable;
+    private insertBeforeInsertable;
     private findPreviousSibling;
     private findInsertPosition;
 }

package/dist/nodes/widget.js

@@ -1,16 +1,14 @@
-import { getNativeObject, isObjectEqual } from "@gtkx/ffi";
+import { getNativeObject } from "@gtkx/ffi";
 import { ObjectClass, ParamSpecString, Type, TypeInstance, typeClassRef, typeFromName, typeFundamental, typeNameFromInstance, } from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { CONSTRUCTOR_PROPS } from "../generated/internal.js";
+import { resolvePropMeta, resolveSignal } from "../metadata.js";
 import { Node } from "../node.js";
-import { registerNodeClass } from "../registry.js";
-import { getAttachmentStrategy, attachChild as performAttachment, detachChild as performDetachment, } from "./internal/child-attachment.js";
-import { isAttachable, isEditable, isInsertable, isRemovable, isReorderable, } from "./internal/predicates.js";
-import { filterProps, matchesAnyClass, propNameToSignalName, resolvePropMeta, resolveSignal, } from "./internal/utils.js";
+import { isAddable, isAppendable, isEditable, isInsertable, isRemovable, isReorderable, isSingleChild, } from "./internal/predicates.js";
+import { filterProps } from "./internal/props.js";
+import { attachChild, detachChild } from "./internal/widget.js";
 const EXCLUDED_PROPS = ["children", "widthRequest", "heightRequest", "grabFocus"];
 function findProperty(obj, key) {
-    if (!obj.handle)
-        return null;
     const propertyName = key.replace(/([A-Z])/g, "-$1").toLowerCase();
     const typeInstance = getNativeObject(obj.handle, TypeInstance);
     const typeName = typeNameFromInstance(typeInstance);
@@ -20,123 +18,199 @@ function findProperty(obj, key) {
     return objectClass.findProperty(propertyName) ?? null;
 }
 export class WidgetNode extends Node {
-    static priority = 3;
-    static matches(_type, containerOrClass) {
-        return matchesAnyClass([Gtk.Widget], containerOrClass);
-    }
     static createContainer(props, containerClass, _rootContainer) {
         const WidgetClass = containerClass;
         const typeName = WidgetClass.glibTypeName;
         const args = (CONSTRUCTOR_PROPS[typeName] ?? []).map((name) => props[name]);
         return new WidgetClass(...args);
     }
+    isValidChild(_child) {
+        return true;
+    }
+    shouldAttachToParent() {
+        return true;
+    }
     appendChild(child) {
-        if (isAttachable(child) && child.canBeChildOf(this)) {
-            child.attachTo(this);
-            return;
+        super.appendChild(child);
+        if (child instanceof WidgetNode && child.shouldAttachToParent()) {
+            this.appendWidgetChild(child);
         }
-        if (!(child instanceof WidgetNode)) {
-            throw new Error(`Cannot append '${child.typeName}' to 'Widget': expected Widget`);
-        }
-        if (child.container instanceof Gtk.Window) {
-            throw new Error(`Cannot append 'Window' to '${this.typeName}': windows must be top-level containers`);
-        }
-        this.attachChild(child);
     }
     removeChild(child) {
-        if (isAttachable(child) && child.canBeChildOf(this)) {
-            child.detachFrom(this);
-            return;
-        }
-        if (!(child instanceof WidgetNode)) {
-            throw new Error(`Cannot remove '${child.typeName}' from 'Widget': expected Widget`);
-        }
-        if (child.container instanceof Gtk.Window) {
-            throw new Error(`Cannot remove 'Window' from '${this.typeName}': windows must be top-level containers`);
+        if (child instanceof WidgetNode && child.shouldAttachToParent()) {
+            if (this.isChildAutowrapped(child)) {
+                const wrapper = child.container.getParent();
+                if (wrapper && isSingleChild(wrapper)) {
+                    wrapper.setChild(null);
+                    if (isRemovable(this.container)) {
+                        this.container.remove(wrapper);
+                    }
+                }
+            }
+            else {
+                detachChild(child.container, this.container);
+            }
         }
-        this.detachChild(child);
+        super.removeChild(child);
     }
     insertBefore(child, before) {
-        if (isAttachable(child) && child.canBeChildOf(this)) {
-            child.attachTo(this);
+        super.insertBefore(child, before);
+        if (!(child instanceof WidgetNode) || !child.shouldAttachToParent())
+            return;
+        if (!(before instanceof WidgetNode)) {
+            this.appendWidgetChild(child);
             return;
         }
-        if (!(child instanceof WidgetNode) || !(before instanceof WidgetNode)) {
-            throw new Error(`Cannot insert '${child.typeName}' into '${this.typeName}': expected Widget`);
-        }
-        if (child.container instanceof Gtk.Window) {
-            throw new Error(`Cannot insert 'Window' into '${this.typeName}': windows must be top-level containers`);
+        if (this.container instanceof Gtk.ListBox || this.container instanceof Gtk.FlowBox) {
+            this.insertBeforeAutowrapping(child, before);
         }
-        if (isReorderable(this.container)) {
+        else if (isReorderable(this.container)) {
             this.insertBeforeReorderable(this.container, child, before);
         }
         else if (isInsertable(this.container)) {
             this.insertBeforeInsertable(this.container, child, before);
         }
         else {
-            this.appendChild(child);
+            this.reinsertAllChildren();
         }
     }
-    insertBeforeReorderable(container, child, before) {
-        const previousSibling = this.findPreviousSibling(before);
-        const currentParent = child.container.getParent();
-        const isChildOfThisContainer = currentParent && isObjectEqual(currentParent, container);
-        if (isChildOfThisContainer) {
-            container.reorderChildAfter(child.container, previousSibling);
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps, newProps);
+        if (!this.container) {
+            throw new Error(`Container is undefined for '${this.typeName}'`);
         }
-        else {
-            this.detachChildFromParent(child);
-            container.insertChildAfter(child.container, previousSibling);
+        this.signalStore.blockAll();
+        try {
+            this.updateSizeRequest(oldProps, newProps);
+            this.updateGrabFocus(oldProps, newProps);
+            const propNames = new Set([
+                ...Object.keys(filterProps(oldProps ?? {}, EXCLUDED_PROPS)),
+                ...Object.keys(filterProps(newProps ?? {}, EXCLUDED_PROPS)),
+            ]);
+            const pendingSignals = [];
+            const pendingProperties = [];
+            for (const name of propNames) {
+                const oldValue = oldProps?.[name];
+                const newValue = newProps[name];
+                if (oldValue === newValue)
+                    continue;
+                const signalName = resolveSignal(this.container, name);
+                if (signalName) {
+                    pendingSignals.push({ name, newValue });
+                }
+                else if (newValue !== undefined) {
+                    pendingProperties.push({ name, oldValue, newValue });
+                }
+                else if (oldValue !== undefined) {
+                    const defaultValue = this.getPropertyDefaultValue(name);
+                    if (defaultValue !== undefined) {
+                        pendingProperties.push({ name, oldValue, newValue: defaultValue });
+                    }
+                }
+            }
+            for (const { name, newValue } of pendingSignals) {
+                const signalName = resolveSignal(this.container, name);
+                if (!signalName)
+                    continue;
+                const handler = typeof newValue === "function" ? newValue : undefined;
+                this.signalStore.set(this, this.container, signalName, handler);
+            }
+            for (const { name, oldValue, newValue } of pendingProperties) {
+                if (name === "text" && oldValue !== undefined && isEditable(this.container)) {
+                    if (oldValue !== this.container.getText()) {
+                        continue;
+                    }
+                }
+                this.setProperty(name, newValue);
+            }
+        }
+        finally {
+            this.signalStore.unblockAll();
         }
     }
-    insertBeforeInsertable(container, child, before) {
-        this.detachChildFromParent(child);
-        const position = this.findInsertPosition(before);
-        container.insert(child.container, position);
+    appendWidgetChild(child) {
+        if (isAppendable(this.container) || isAddable(this.container)) {
+            if (this.isChildAutowrapped(child)) {
+                this.detachAutowrappedChild(child);
+            }
+            else {
+                detachChildFromParent(child);
+            }
+        }
+        attachChild(child.container, this.container);
     }
-    updateProps(oldProps, newProps) {
-        if (!this.container) {
-            throw new Error(`WidgetNode.updateProps: container is undefined for ${this.typeName}`);
+    isChildAutowrapped(child) {
+        return ((this.container instanceof Gtk.ListBox || this.container instanceof Gtk.FlowBox) &&
+            !(child.container instanceof Gtk.ListBoxRow || child.container instanceof Gtk.FlowBoxChild));
+    }
+    detachAutowrappedChild(child) {
+        const wrapper = child.container.getParent();
+        if (wrapper && isSingleChild(wrapper)) {
+            wrapper.setChild(null);
+            const wrapperParent = wrapper.getParent();
+            if (wrapperParent && isRemovable(wrapperParent)) {
+                wrapperParent.remove(wrapper);
+            }
         }
-        this.updateSizeRequest(oldProps, newProps);
-        this.updateGrabFocus(oldProps, newProps);
-        const propNames = new Set([
-            ...Object.keys(filterProps(oldProps ?? {}, EXCLUDED_PROPS)),
-            ...Object.keys(filterProps(newProps ?? {}, EXCLUDED_PROPS)),
-        ]);
-        const pendingSignals = [];
-        const pendingProperties = [];
-        for (const name of propNames) {
-            const oldValue = oldProps?.[name];
-            const newValue = newProps[name];
-            if (oldValue === newValue)
-                continue;
-            const signalName = propNameToSignalName(name);
-            if (resolveSignal(this.container, signalName)) {
-                pendingSignals.push({ name, newValue });
+    }
+    insertBeforeAutowrapping(child, before) {
+        const currentParent = child.container.getParent();
+        if (currentParent !== null) {
+            if (child.container instanceof Gtk.ListBoxRow || child.container instanceof Gtk.FlowBoxChild) {
+                if (isRemovable(currentParent)) {
+                    currentParent.remove(child.container);
+                }
             }
-            else if (newValue !== undefined) {
-                pendingProperties.push({ name, oldValue, newValue });
+            else {
+                this.detachAutowrappedChild(child);
             }
-            else if (oldValue !== undefined) {
-                const defaultValue = this.getPropertyDefaultValue(name);
-                if (defaultValue !== undefined) {
-                    pendingProperties.push({ name, oldValue, newValue: defaultValue });
-                }
+        }
+        else if (!(child.container instanceof Gtk.ListBoxRow || child.container instanceof Gtk.FlowBoxChild)) {
+            this.detachAutowrappedChild(child);
+        }
+        const container = this.container;
+        if (!(container instanceof Gtk.ListBox) && !(container instanceof Gtk.FlowBox))
+            return;
+        const position = this.findAutowrappedPosition(before);
+        if (position !== null) {
+            container.insert(child.container, position);
+        }
+        else {
+            container.append(child.container);
+        }
+    }
+    findAutowrappedPosition(before) {
+        let position = 0;
+        let currentChild = this.container.getFirstChild();
+        const beforeIsRow = before.container instanceof Gtk.ListBoxRow || before.container instanceof Gtk.FlowBoxChild;
+        while (currentChild) {
+            const widgetToCompare = beforeIsRow ? currentChild : this.unwrapGtkChild(currentChild);
+            if (widgetToCompare && widgetToCompare === before.container) {
+                return position;
             }
+            position++;
+            currentChild = currentChild.getNextSibling();
         }
-        for (const { name, newValue } of pendingSignals) {
-            const signalName = propNameToSignalName(name);
-            const handler = typeof newValue === "function" ? newValue : undefined;
-            this.signalStore.set(this, this.container, signalName, handler);
+        return null;
+    }
+    unwrapGtkChild(child) {
+        if ("getChild" in child && typeof child.getChild === "function") {
+            return child.getChild();
         }
-        for (const { name, oldValue, newValue } of pendingProperties) {
-            if (name === "text" && oldValue !== undefined && isEditable(this.container)) {
-                if (oldValue !== this.container.getText()) {
-                    continue;
-                }
+        return child;
+    }
+    reinsertAllChildren() {
+        const widgetChildren = [];
+        for (const child of this.children) {
+            if (child instanceof WidgetNode && child.shouldAttachToParent()) {
+                widgetChildren.push(child);
             }
-            this.setProperty(name, newValue);
+        }
+        for (const child of widgetChildren) {
+            detachChild(child.container, this.container);
+        }
+        for (const child of widgetChildren) {
+            attachChild(child.container, this.container);
         }
     }
     updateSizeRequest(oldProps, newProps) {
@@ -208,50 +282,49 @@ export class WidgetNode extends Node {
         }
         setter.call(this.container, value);
     }
-    detachChildFromParent(child) {
+    insertBeforeReorderable(container, child, before) {
+        const previousSibling = this.findPreviousSibling(before);
         const currentParent = child.container.getParent();
-        if (currentParent !== null && isRemovable(currentParent)) {
-            currentParent.remove(child.container);
-        }
-    }
-    attachChild(child) {
-        const strategy = getAttachmentStrategy(this.container);
-        if (!strategy) {
-            throw new Error(`Cannot append '${child.typeName}' to '${this.container.constructor.name}': container does not support children`);
+        const isChildOfThisContainer = currentParent && currentParent === container;
+        if (isChildOfThisContainer) {
+            container.reorderChildAfter(child.container, previousSibling);
         }
-        if (strategy.type === "appendable" || strategy.type === "addable") {
-            this.detachChildFromParent(child);
+        else {
+            detachChildFromParent(child);
+            container.insertChildAfter(child.container, previousSibling);
         }
-        performAttachment(child.container, strategy);
     }
-    detachChild(child) {
-        const strategy = getAttachmentStrategy(this.container);
-        if (!strategy) {
-            throw new Error(`Cannot remove '${child.typeName}' from '${this.container.constructor.name}': container does not support child removal`);
-        }
-        performDetachment(child.container, strategy);
+    insertBeforeInsertable(container, child, before) {
+        detachChildFromParent(child);
+        const position = this.findInsertPosition(before);
+        container.insert(child.container, position);
     }
     findPreviousSibling(before) {
         let beforeChild = this.container.getFirstChild();
         while (beforeChild) {
-            if (isObjectEqual(beforeChild, before.container)) {
+            if (beforeChild === before.container) {
                 return beforeChild.getPrevSibling() ?? undefined;
             }
             beforeChild = beforeChild.getNextSibling();
         }
-        throw new Error(`Cannot find 'before' child in container`);
+        throw new Error(`Cannot find 'before' sibling in '${this.typeName}'`);
     }
     findInsertPosition(before) {
         let position = 0;
         let currentChild = this.container.getFirstChild();
         while (currentChild) {
-            if (isObjectEqual(currentChild, before.container)) {
+            if (currentChild === before.container) {
                 return position;
             }
             position++;
             currentChild = currentChild.getNextSibling();
         }
-        throw new Error(`Cannot find 'before' child in container`);
+        throw new Error(`Cannot find 'before' child position in '${this.typeName}'`);
+    }
+}
+function detachChildFromParent(child) {
+    const currentParent = child.container.getParent();
+    if (currentParent !== null && isRemovable(currentParent)) {
+        currentParent.remove(child.container);
     }
 }
-registerNodeClass(WidgetNode);

package/dist/nodes/window.d.ts

@@ -1,29 +1,28 @@
 import * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkAboutDialogProps, GtkWindowProps } from "../jsx.js";
 import type { Node } from "../node.js";
-import type { Container, ContainerClass, Props } from "../types.js";
+import type { Container, Props } from "../types.js";
+import { AnimationNode } from "./animation.js";
+import type { DialogNode } from "./dialog.js";
+import { MenuNode } from "./menu.js";
+import { NavigationPageNode } from "./navigation-page.js";
+import { SlotNode } from "./slot.js";
 import { WidgetNode } from "./widget.js";
-type CreditSection = {
-    name: string;
-    people: string[];
-};
-export type WindowProps = Props & {
-    defaultWidth?: number;
-    defaultHeight?: number;
-    onClose?: () => void;
-    creditSections?: CreditSection[];
-};
-export declare class WindowNode extends WidgetNode<Gtk.Window, WindowProps> {
-    static priority: number;
+export type WindowProps = Pick<GtkWindowProps, "onClose"> & Pick<GtkAboutDialogProps, "creditSections">;
+type WindowChild = WindowNode | DialogNode | MenuNode | SlotNode | AnimationNode | NavigationPageNode | WidgetNode;
+export declare class WindowNode extends WidgetNode<Gtk.Window, WindowProps, WindowChild> {
     private menu;
-    static matches(_type: string, containerOrClass?: Container | ContainerClass | null): boolean;
     static createContainer(props: Props, containerClass: typeof Gtk.Window, rootContainer: Container | undefined): Gtk.Window;
     constructor(typeName: string, props: WindowProps, container: Gtk.Window, rootContainer: Container);
-    appendChild(child: Node): void;
-    removeChild(child: Node): void;
-    insertBefore(child: Node, before: Node): void;
-    mount(): void;
-    unmount(): void;
-    updateProps(oldProps: WindowProps | null, newProps: WindowProps): void;
-    protected applyOwnProps(oldProps: WindowProps | null, newProps: WindowProps): void;
+    protected shouldAttachToParent(): boolean;
+    isValidChild(child: Node): boolean;
+    appendChild(child: WindowChild): void;
+    removeChild(child: WindowChild): void;
+    insertBefore(child: WindowChild, before: WindowChild): void;
+    finalizeInitialChildren(props: WindowProps): boolean;
+    commitUpdate(oldProps: WindowProps | null, newProps: WindowProps): void;
+    commitMount(): void;
+    detachDeletedInstance(): void;
+    private applyOwnProps;
 }
 export {};