@gtkx/react 0.19.0 → 0.21.0

package/src/metadata.ts

@@ -1,5 +1,5 @@
 import type { NativeClass } from "@gtkx/ffi";
-import { CONSTRUCT_ONLY_PROPS, PROPS, SIGNALS } from "./generated/internal.js";
+import { CONSTRUCTION_META, PROPS, SIGNALS } from "./generated/internal.js";
 import type { Container } from "./types.js";
 
 const walkPrototypeChain = <T>(instance: Container, lookup: (typeName: string) => T | null): T | null => {
@@ -27,12 +27,15 @@ const walkPrototypeChain = <T>(instance: Container, lookup: (typeName: string) =
     return null;
 };
 
-export const resolvePropMeta = (instance: Container, key: string): [string | null, string] | null =>
+export const resolvePropMeta = (instance: Container, key: string): string | null =>
     walkPrototypeChain(instance, (typeName) => PROPS[typeName]?.[key] ?? null);
 
 export const isConstructOnlyProp = (instance: Container, key: string): boolean =>
-    walkPrototypeChain(instance, (typeName) => (CONSTRUCT_ONLY_PROPS[typeName]?.[key] !== undefined ? true : null)) ??
-    false;
+    walkPrototypeChain(instance, (typeName) => {
+        const meta = CONSTRUCTION_META[typeName];
+        if (!meta || !(key in meta)) return null;
+        return meta[key]?.constructOnly === true;
+    }) ?? false;
 
 export const resolveSignal = (instance: Container, propName: string): string | null => {
     if (propName === "onNotify") return "notify";

package/src/node.ts

@@ -14,8 +14,6 @@ export class Node<TContainer = any, TProps = any, TParent extends Node = any, TC
     rootContainer: Container;
     parent: TParent | null = null;
     children: TChild[] = [];
-    private childIndices = new Map<TChild, number>();
-    private childrenDirty = false;
 
     constructor(typeName: string, props: TProps, container: TContainer, rootContainer: Container) {
         this.typeName = typeName;
@@ -37,6 +35,7 @@ export class Node<TContainer = any, TProps = any, TParent extends Node = any, TC
         if (parent !== null && !this.isValidParent(parent)) {
             throw new Error(`Cannot add '${this.typeName}' to '${parent.typeName}'`);
         }
+
         this.parent = parent;
     }
 
@@ -45,64 +44,49 @@ export class Node<TContainer = any, TProps = any, TParent extends Node = any, TC
     }
 
     public appendChild(child: TChild): void {
-        if (this.childrenDirty) this.flushChildRemovals();
         if (!this.isValidChild(child)) {
             throw new Error(`Cannot append '${child.typeName}' to '${this.typeName}'`);
         }
-        this.childIndices.set(child, this.children.length);
+
+        const existingIndex = this.children.indexOf(child);
+        if (existingIndex !== -1) {
+            this.children.splice(existingIndex, 1);
+        }
         this.children.push(child);
-        child.setParent(this);
+
+        if (child.parent !== this) {
+            child.setParent(this);
+        }
     }
 
     public removeChild(child: TChild): void {
-        if (!this.childIndices.has(child)) return;
         child.setParent(null);
-        this.childIndices.delete(child);
-        if (!this.childrenDirty) {
-            this.childrenDirty = true;
-            queueMicrotask(() => this.flushChildRemovals());
+        const index = this.children.indexOf(child);
+
+        if (index !== -1) {
+            this.children.splice(index, 1);
         }
     }
 
     public insertBefore(child: TChild, before: TChild): void {
-        if (this.childrenDirty) this.flushChildRemovals();
-
-        const beforeIndex = this.childIndices.get(before);
-        if (beforeIndex === undefined) {
-            throw new Error(`Cannot find 'before' child '${before.typeName}' in '${this.typeName}'`);
+        if (!this.isValidChild(child)) {
+            throw new Error(`Cannot insert '${child.typeName}' into '${this.typeName}'`);
         }
 
-        const existingIndex = this.childIndices.get(child);
-        if (existingIndex !== undefined) {
+        const existingIndex = this.children.indexOf(child);
+        if (existingIndex !== -1) {
             this.children.splice(existingIndex, 1);
-            const adjustedIndex = existingIndex < beforeIndex ? beforeIndex - 1 : beforeIndex;
-            this.children.splice(adjustedIndex, 0, child);
-            this.rebuildChildIndices(Math.min(existingIndex, adjustedIndex));
-            return;
         }
 
-        if (!this.isValidChild(child)) {
-            throw new Error(`Cannot insert '${child.typeName}' into '${this.typeName}'`);
+        const beforeIndex = this.children.indexOf(before);
+        if (beforeIndex === -1) {
+            throw new Error(`Cannot find 'before' child '${before.typeName}' in '${this.typeName}'`);
         }
 
         this.children.splice(beforeIndex, 0, child);
-        this.rebuildChildIndices(beforeIndex);
-        child.setParent(this);
-    }
-
-    private flushChildRemovals(): void {
-        if (!this.childrenDirty) return;
-        this.childrenDirty = false;
-        this.children = this.children.filter((c) => this.childIndices.has(c));
-        this.childIndices.clear();
-        for (let i = 0; i < this.children.length; i++) {
-            this.childIndices.set(this.children[i] as TChild, i);
-        }
-    }
 
-    private rebuildChildIndices(fromIndex: number): void {
-        for (let i = fromIndex; i < this.children.length; i++) {
-            this.childIndices.set(this.children[i] as TChild, i);
+        if (child.parent !== this) {
+            child.setParent(this);
         }
     }
 

package/src/nodes/alert-dialog.ts

@@ -0,0 +1,55 @@
+import type * as Adw from "@gtkx/ffi/adw";
+import type { AdwAlertDialogProps, AlertDialogResponseProps } from "../jsx.js";
+import { DialogNode } from "./dialog.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+
+const OWN_PROPS = ["responses"] as const;
+
+type Props = Pick<AdwAlertDialogProps, (typeof OWN_PROPS)[number]>;
+
+export class AlertDialogNode extends DialogNode {
+    private managedResponseIds: string[] = [];
+
+    public override commitUpdate(oldProps: Props | null, newProps: Props): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override detachDeletedInstance(): void {
+        this.clearResponses();
+        super.detachDeletedInstance();
+    }
+
+    private applyOwnProps(oldProps: Props | null, newProps: Props): void {
+        if (hasChanged(oldProps, newProps, "responses")) {
+            this.syncResponses(newProps.responses ?? []);
+        }
+    }
+
+    private syncResponses(newResponses: AlertDialogResponseProps[]): void {
+        const dialog = this.container as Adw.AlertDialog;
+        this.clearResponses();
+
+        for (const response of newResponses) {
+            dialog.addResponse(response.id, response.label);
+
+            if (response.appearance !== undefined) {
+                dialog.setResponseAppearance(response.id, response.appearance);
+            }
+
+            if (response.enabled !== undefined) {
+                dialog.setResponseEnabled(response.id, response.enabled);
+            }
+
+            this.managedResponseIds.push(response.id);
+        }
+    }
+
+    private clearResponses(): void {
+        const dialog = this.container as Adw.AlertDialog;
+        for (const id of this.managedResponseIds) {
+            dialog.removeResponse(id);
+        }
+        this.managedResponseIds = [];
+    }
+}

package/src/nodes/animation.ts

@@ -1,13 +1,19 @@
 import * as Adw from "@gtkx/ffi/adw";
 import * as Gdk from "@gtkx/ffi/gdk";
 import * as Gtk from "@gtkx/ffi/gtk";
-import type { AnimatableProperties, AnimationProps, SpringTransition, TimedTransition } from "../jsx.js";
+import type { AdwSpringAnimationProps, AdwTimedAnimationProps, AnimatableProperties, AnimationProps } from "../jsx.js";
 import type { Node } from "../node.js";
 import type { Container } from "../types.js";
 import { attachChild, detachChild, isAttachedTo } from "./internal/widget.js";
 import { VirtualNode } from "./virtual.js";
 import { WidgetNode } from "./widget.js";
 
+type SetChildContainer = { setChild: (child: Gtk.Widget | null) => void };
+
+function hasSetChild(obj: unknown): obj is SetChildContainer {
+    return obj !== null && typeof obj === "object" && "setChild" in obj && typeof obj.setChild === "function";
+}
+
 let animationCounter = 0;
 
 const DEFAULT_TIMED_DURATION = 300;
@@ -15,14 +21,14 @@ const DEFAULT_SPRING_DAMPING = 1;
 const DEFAULT_SPRING_MASS = 1;
 const DEFAULT_SPRING_STIFFNESS = 100;
 
-export class AnimationNode extends VirtualNode<AnimationProps, WidgetNode, WidgetNode> {
+export class AnimationNode extends VirtualNode<AnimationProps, Node, WidgetNode> {
     private className: string;
     private provider: Gtk.CssProvider | null = null;
     private display: Gdk.Display | null = null;
     private currentAnimation: Adw.Animation | null = null;
     private currentValues: AnimatableProperties = {};
     private isExiting = false;
-    private detachedParentWidget: Gtk.Widget | null = null;
+    private detachedParentContainer: unknown = null;
 
     constructor(typeName: string, props: AnimationProps, container: undefined, rootContainer: Container) {
         super(typeName, props, container, rootContainer);
@@ -33,13 +39,13 @@ export class AnimationNode extends VirtualNode<AnimationProps, WidgetNode, Widge
         return child instanceof WidgetNode;
     }
 
-    public override isValidParent(parent: Node): boolean {
-        return parent instanceof WidgetNode;
+    public override isValidParent(_parent: Node): boolean {
+        return true;
     }
 
-    public override setParent(parent: WidgetNode | null): void {
+    public override setParent(parent: Node | null): void {
         if (!parent && this.parent) {
-            this.detachedParentWidget = this.parent.container;
+            this.detachedParentContainer = this.parent.container;
         }
 
         super.setParent(parent);
@@ -118,45 +124,55 @@ export class AnimationNode extends VirtualNode<AnimationProps, WidgetNode, Widge
     }
 
     private onChildChange(oldChild: Gtk.Widget | null): void {
-        const parentWidget = this.parent?.container ?? null;
+        const parentContainer = this.parent?.container ?? null;
         const childWidget = this.children[0]?.container ?? null;
 
         if (oldChild && this.provider) {
             oldChild.removeCssClass(this.className);
         }
 
-        if (oldChild && parentWidget && isAttachedTo(oldChild, parentWidget)) {
-            detachChild(oldChild, parentWidget);
+        if (oldChild && parentContainer instanceof Gtk.Widget && isAttachedTo(oldChild, parentContainer)) {
+            detachChild(oldChild, parentContainer);
+        } else if (oldChild && parentContainer && hasSetChild(parentContainer)) {
+            parentContainer.setChild(null);
         }
 
-        if (childWidget && parentWidget) {
-            attachChild(childWidget, parentWidget);
+        if (childWidget && parentContainer instanceof Gtk.Widget) {
+            attachChild(childWidget, parentContainer);
+            this.setupAnimatedChild(childWidget);
+        } else if (childWidget && parentContainer && hasSetChild(parentContainer)) {
+            parentContainer.setChild(childWidget);
+            this.setupAnimatedChild(childWidget);
+        }
+    }
 
-            this.setupCssProvider();
-            childWidget.addCssClass(this.className);
+    private setupAnimatedChild(childWidget: Gtk.Widget): void {
+        this.setupCssProvider();
+        childWidget.addCssClass(this.className);
 
-            const initial = this.props.initial;
-            const animate = this.props.animate;
+        const initial = this.props.initial;
+        const animate = this.props.animate;
 
-            if (initial === false || !this.props.animateOnMount) {
-                if (animate) {
-                    this.currentValues = { ...animate };
-                    this.applyValues(this.currentValues);
-                }
-            } else {
-                const initialValues = initial ?? animate ?? {};
-                this.currentValues = { ...initialValues };
+        if (initial === false || !this.props.animateOnMount) {
+            if (animate) {
+                this.currentValues = { ...animate };
                 this.applyValues(this.currentValues);
             }
+        } else {
+            const initialValues = initial ?? animate ?? {};
+            this.currentValues = { ...initialValues };
+            this.applyValues(this.currentValues);
         }
     }
 
     private detachChildFromParentWidget(): void {
-        const parentWidget = this.parent?.container ?? this.detachedParentWidget;
+        const parentContainer = this.parent?.container ?? this.detachedParentContainer;
         const childWidget = this.children[0]?.container ?? null;
 
-        if (childWidget && parentWidget && isAttachedTo(childWidget, parentWidget)) {
-            detachChild(childWidget, parentWidget);
+        if (childWidget && parentContainer instanceof Gtk.Widget && isAttachedTo(childWidget, parentContainer)) {
+            detachChild(childWidget, parentContainer);
+        } else if (childWidget && parentContainer && hasSetChild(parentContainer)) {
+            parentContainer.setChild(null);
         }
     }
 
@@ -227,8 +243,7 @@ export class AnimationNode extends VirtualNode<AnimationProps, WidgetNode, Widge
 
         this.currentAnimation = animation;
 
-        const transition = this.props.transition;
-        const delay = transition?.delay ?? 0;
+        const delay = (this.props as AdwTimedAnimationProps | AdwSpringAnimationProps).delay ?? 0;
 
         if (delay > 0) {
             setTimeout(() => {
@@ -242,61 +257,53 @@ export class AnimationNode extends VirtualNode<AnimationProps, WidgetNode, Widge
     }
 
     private createAnimation(widget: Gtk.Widget, target: Adw.CallbackAnimationTarget): Adw.Animation {
-        const transition = this.props.transition;
-
-        if (transition?.mode === "spring") {
-            return this.createSpringAnimation(widget, target, transition);
+        if (this.typeName === "AdwSpringAnimation") {
+            return this.createSpringAnimation(widget, target);
         }
 
-        return this.createTimedAnimation(widget, target, transition);
+        return this.createTimedAnimation(widget, target);
     }
 
-    private createTimedAnimation(
-        widget: Gtk.Widget,
-        target: Adw.CallbackAnimationTarget,
-        transition: TimedTransition | undefined,
-    ): Adw.TimedAnimation {
-        const duration = transition?.duration ?? DEFAULT_TIMED_DURATION;
+    private createTimedAnimation(widget: Gtk.Widget, target: Adw.CallbackAnimationTarget): Adw.TimedAnimation {
+        const props = this.props as AdwTimedAnimationProps;
+        const duration = props.duration ?? DEFAULT_TIMED_DURATION;
 
         const animation = new Adw.TimedAnimation(widget, 0, 1, duration, target);
 
-        if (transition?.easing !== undefined) {
-            animation.setEasing(transition.easing);
+        if (props.easing !== undefined) {
+            animation.setEasing(props.easing);
         }
 
-        if (transition?.repeat !== undefined) {
-            animation.setRepeatCount(transition.repeat);
+        if (props.repeat !== undefined) {
+            animation.setRepeatCount(props.repeat);
         }
 
-        if (transition?.reverse !== undefined) {
-            animation.setReverse(transition.reverse);
+        if (props.reverse !== undefined) {
+            animation.setReverse(props.reverse);
         }
 
-        if (transition?.alternate !== undefined) {
-            animation.setAlternate(transition.alternate);
+        if (props.alternate !== undefined) {
+            animation.setAlternate(props.alternate);
         }
 
         return animation;
     }
 
-    private createSpringAnimation(
-        widget: Gtk.Widget,
-        target: Adw.CallbackAnimationTarget,
-        transition: SpringTransition,
-    ): Adw.SpringAnimation {
-        const damping = transition.damping ?? DEFAULT_SPRING_DAMPING;
-        const mass = transition.mass ?? DEFAULT_SPRING_MASS;
-        const stiffness = transition.stiffness ?? DEFAULT_SPRING_STIFFNESS;
+    private createSpringAnimation(widget: Gtk.Widget, target: Adw.CallbackAnimationTarget): Adw.SpringAnimation {
+        const props = this.props as AdwSpringAnimationProps;
+        const damping = props.damping ?? DEFAULT_SPRING_DAMPING;
+        const mass = props.mass ?? DEFAULT_SPRING_MASS;
+        const stiffness = props.stiffness ?? DEFAULT_SPRING_STIFFNESS;
 
         const springParams = new Adw.SpringParams(damping, mass, stiffness);
         const animation = new Adw.SpringAnimation(widget, 0, 1, springParams, target);
 
-        if (transition.initialVelocity !== undefined) {
-            animation.setInitialVelocity(transition.initialVelocity);
+        if (props.initialVelocity !== undefined) {
+            animation.setInitialVelocity(props.initialVelocity);
         }
 
-        if (transition.clamp !== undefined) {
-            animation.setClamp(transition.clamp);
+        if (props.clamp !== undefined) {
+            animation.setClamp(props.clamp);
         }
 
         return animation;

package/src/nodes/application.ts

@@ -3,6 +3,7 @@ import { Node } from "../node.js";
 import type { Container, Props } from "../types.js";
 import { MenuNode } from "./menu.js";
 import { MenuModel } from "./models/menu.js";
+import { WindowNode } from "./window.js";
 
 export class ApplicationNode extends Node<Gtk.Application, Props, Node, Node> {
     private menu: MenuModel;
@@ -51,6 +52,10 @@ export class ApplicationNode extends Node<Gtk.Application, Props, Node, Node> {
             return;
         }
 
+        if (child instanceof WindowNode) {
+            child.container.setVisible(false);
+        }
+
         super.removeChild(child);
     }
 }