@gtkx/react 0.20.0 → 0.21.0

package/src/metadata.ts

@@ -27,7 +27,7 @@ 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 =>

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/column-view-column.ts

@@ -145,7 +145,7 @@ export class ColumnViewColumnNode extends VirtualNode<ColumnViewColumnProps, Wid
         if (props.resizable !== undefined) this.column.setResizable(props.resizable);
         if (props.fixedWidth !== undefined) this.column.setFixedWidth(props.fixedWidth);
         if (props.visible !== undefined) this.column.setVisible(props.visible);
-        if (props.sortable) this.column.setSorter(new Gtk.Sorter());
+        if (props.sortable) this.column.setSorter(new Gtk.CustomSorter());
     }
 
     private applyColumnProps(oldProps: ColumnViewColumnProps, newProps: ColumnViewColumnProps): void {
@@ -157,7 +157,7 @@ export class ColumnViewColumnNode extends VirtualNode<ColumnViewColumnProps, Wid
         if (hasChanged(oldProps, newProps, "fixedWidth")) this.column.setFixedWidth(newProps.fixedWidth ?? -1);
         if (hasChanged(oldProps, newProps, "visible")) this.column.setVisible(newProps.visible ?? true);
         if (hasChanged(oldProps, newProps, "sortable")) {
-            this.column.setSorter(newProps.sortable ? new Gtk.Sorter() : null);
+            this.column.setSorter(newProps.sortable ? new Gtk.CustomSorter() : null);
         }
         if (hasChanged(oldProps, newProps, "renderCell")) this.scheduleParentUpdate();
     }

package/src/nodes/container-slot.ts

@@ -16,7 +16,7 @@ export class ContainerSlotNode extends VirtualNode<ContainerSlotProps, WidgetNod
 
     public override setParent(parent: WidgetNode | null): void {
         if (!parent && this.parent) {
-            this.detachAllChildren(this.parent.container);
+            this.detachAllFromGtkParent();
         }
 
         super.setParent(parent);
@@ -32,6 +32,7 @@ export class ContainerSlotNode extends VirtualNode<ContainerSlotProps, WidgetNod
         super.appendChild(child);
 
         if (this.parent) {
+            this.detachFromGtkParent(child);
             this.attachToParent(this.parent.container, child.container);
         }
     }
@@ -40,25 +41,18 @@ export class ContainerSlotNode extends VirtualNode<ContainerSlotProps, WidgetNod
         super.insertBefore(child, before);
 
         if (this.parent) {
-            this.attachToParent(this.parent.container, child.container);
+            this.reinsertAllChildren();
         }
     }
 
     public override removeChild(child: WidgetNode): void {
-        if (this.parent && isRemovable(this.parent.container)) {
-            const widget = child.container;
-            const currentParent = widget.getParent();
-            if (currentParent && currentParent === this.parent.container) {
-                this.parent.container.remove(widget);
-            }
-        }
-
+        this.detachFromGtkParent(child);
         super.removeChild(child);
     }
 
     public override detachDeletedInstance(): void {
         if (this.parent) {
-            this.detachAllChildren(this.parent.container);
+            this.detachAllFromGtkParent();
         }
         super.detachDeletedInstance();
     }
@@ -74,14 +68,33 @@ export class ContainerSlotNode extends VirtualNode<ContainerSlotProps, WidgetNod
         (method as (child: Gtk.Widget) => void).call(parent, child);
     }
 
-    private detachAllChildren(parent: Gtk.Widget): void {
-        if (!isRemovable(parent)) return;
+    private detachFromGtkParent(child: WidgetNode): void {
+        const currentParent = child.container.getParent();
+        if (currentParent !== null) {
+            if (isRemovable(currentParent)) {
+                currentParent.remove(child.container);
+            } else {
+                child.container.unparent();
+            }
+        }
+    }
+
+    private reinsertAllChildren(): void {
+        if (!this.parent) return;
+        const parent = this.parent.container;
 
         for (const child of this.children) {
-            const currentParent = child.container.getParent();
-            if (currentParent && currentParent === parent) {
-                parent.remove(child.container);
-            }
+            this.detachFromGtkParent(child);
+        }
+
+        for (const child of this.children) {
+            this.attachToParent(parent, child.container);
+        }
+    }
+
+    private detachAllFromGtkParent(): void {
+        for (const child of this.children) {
+            this.detachFromGtkParent(child);
         }
     }
 }

package/src/nodes/drawing-area.ts

@@ -7,40 +7,16 @@ import { filterProps, hasChanged } from "./internal/props.js";
 import { SlotNode } from "./slot.js";
 import { WidgetNode } from "./widget.js";
 
-const OWN_PROPS = ["onDraw"] as const;
+const OWN_PROPS = ["render"] as const;
 
 type DrawFunc = (cr: import("@gtkx/ffi/cairo").Context, width: number, height: number, self: Gtk.DrawingArea) => void;
 type DrawingAreaProps = Pick<GtkDrawingAreaProps, (typeof OWN_PROPS)[number]>;
 
-type PendingDrawFuncEntry = { container: Gtk.DrawingArea; fn: DrawFunc };
-
-const pendingDrawFuncs: PendingDrawFuncEntry[] = [];
-
-function wrapDrawFunc(
-    fn: DrawFunc,
-): (self: Gtk.DrawingArea, cr: import("@gtkx/ffi/cairo").Context, width: number, height: number) => void {
-    return (self, cr, width, height) => fn(cr, width, height, self);
-}
-
-function ensurePendingBatch(): PendingDrawFuncEntry[] {
-    if (pendingDrawFuncs.length === 0) {
-        queueMicrotask(flushPendingDrawFuncs);
-    }
-
-    return pendingDrawFuncs;
-}
-
-function flushPendingDrawFuncs(): void {
-    const batch = pendingDrawFuncs.splice(0);
-
-    for (const { container, fn } of batch) {
-        container.setDrawFunc(wrapDrawFunc(fn));
-    }
-}
-
 type DrawingAreaChild = EventControllerNode | SlotNode | ContainerSlotNode;
 
 export class DrawingAreaNode extends WidgetNode<Gtk.DrawingArea, DrawingAreaProps, DrawingAreaChild> {
+    private currentDrawFunc: DrawFunc | null = null;
+
     public override isValidChild(child: Node): boolean {
         return child instanceof EventControllerNode || child instanceof SlotNode || child instanceof ContainerSlotNode;
     }
@@ -50,12 +26,27 @@ export class DrawingAreaNode extends WidgetNode<Gtk.DrawingArea, DrawingAreaProp
         this.applyOwnProps(oldProps, newProps);
     }
 
+    public override detachDeletedInstance(): void {
+        this.currentDrawFunc = null;
+        this.container.setDrawFunc(undefined);
+        super.detachDeletedInstance();
+    }
+
     private applyOwnProps(oldProps: DrawingAreaProps | null, newProps: DrawingAreaProps): void {
-        if (hasChanged(oldProps, newProps, "onDraw")) {
-            if (this.container.getAllocatedWidth() > 0) {
-                this.container.setDrawFunc(newProps.onDraw ? wrapDrawFunc(newProps.onDraw) : null);
-            } else if (newProps.onDraw) {
-                ensurePendingBatch().push({ container: this.container, fn: newProps.onDraw });
+        if (hasChanged(oldProps, newProps, "render")) {
+            const hadDraw = !!oldProps?.render;
+            const hasDraw = !!newProps.render;
+
+            this.currentDrawFunc = newProps.render ?? null;
+
+            if (hasDraw && !hadDraw) {
+                this.container.setDrawFunc((self, cr, width, height) => {
+                    this.currentDrawFunc?.(cr, width, height, self);
+                });
+            } else if (!hasDraw && hadDraw) {
+                this.container.setDrawFunc(undefined);
+            } else if (hasDraw) {
+                this.container.queueDraw();
             }
         }
     }

package/src/nodes/event-controller.ts

@@ -87,14 +87,10 @@ export class EventControllerNode<
             return;
         }
 
-        const propMeta = resolvePropMeta(this.container, name);
+        const propName = resolvePropMeta(this.container, name);
 
-        if (propMeta) {
-            const [, setterName] = propMeta;
-            const setterFn = (this.container as unknown as Record<string, (v: unknown) => void>)[setterName];
-            if (typeof setterFn === "function") {
-                setterFn.call(this.container, value);
-            }
+        if (propName) {
+            (this.container as unknown as Record<string, unknown>)[propName] = value;
         }
     }
 }

package/src/nodes/fixed-child.ts

@@ -3,6 +3,7 @@ import * as Gsk from "@gtkx/ffi/gsk";
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { FixedChildProps } from "../jsx.js";
 import type { Node } from "../node.js";
+import { isRemovable } from "./internal/predicates.js";
 import { hasChanged } from "./internal/props.js";
 import { VirtualNode } from "./virtual.js";
 import { WidgetNode } from "./widget.js";
@@ -33,6 +34,7 @@ export class FixedChildNode extends VirtualNode<FixedChildProps, WidgetNode<Gtk.
         super.appendChild(child);
 
         if (this.parent) {
+            this.detachFromGtkParent(child.container);
             this.attachToParent(this.parent.container, child.container);
             this.applyLayoutTransform();
         }
@@ -82,6 +84,17 @@ export class FixedChildNode extends VirtualNode<FixedChildProps, WidgetNode<Gtk.
         }
     }
 
+    private detachFromGtkParent(child: Gtk.Widget): void {
+        const currentParent = child.getParent();
+        if (currentParent !== null) {
+            if (isRemovable(currentParent)) {
+                currentParent.remove(child);
+            } else {
+                child.unparent();
+            }
+        }
+    }
+
     private applyLayoutTransform(): void {
         if (!this.parent || !this.children[0]) return;
 

package/src/nodes/grid-child.ts

@@ -1,6 +1,7 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { GridChildProps } from "../jsx.js";
 import type { Node } from "../node.js";
+import { isRemovable } from "./internal/predicates.js";
 import { hasChanged } from "./internal/props.js";
 import { VirtualNode } from "./virtual.js";
 import { WidgetNode } from "./widget.js";
@@ -30,6 +31,7 @@ export class GridChildNode extends VirtualNode<GridChildProps, WidgetNode<Gtk.Gr
         super.appendChild(child);
 
         if (this.parent) {
+            this.detachFromGtkParent(child.container);
             this.attachToParent(this.parent.container, child.container);
         }
     }
@@ -84,6 +86,17 @@ export class GridChildNode extends VirtualNode<GridChildProps, WidgetNode<Gtk.Gr
         }
     }
 
+    private detachFromGtkParent(child: Gtk.Widget): void {
+        const currentParent = child.getParent();
+        if (currentParent !== null) {
+            if (isRemovable(currentParent)) {
+                currentParent.remove(child);
+            } else {
+                child.unparent();
+            }
+        }
+    }
+
     private reattachChild(): void {
         if (!this.parent || !this.children[0]) return;
 

package/src/nodes/internal/construct.ts

@@ -1,5 +1,5 @@
 import type { NativeClass, Type } from "@gtkx/ffi";
-import { Object as GObject, toValue, type Value } from "@gtkx/ffi/gobject";
+import { Object as GObject, Value } from "@gtkx/ffi/gobject";
 import { CONSTRUCTION_META } from "../../generated/internal.js";
 import type { Container, ContainerClass, Props } from "../../types.js";
 
@@ -53,7 +53,7 @@ export function createContainerWithProperties(containerClass: ContainerClass, pr
 
     for (const { girName, ffiType, value } of constructionProps) {
         names.push(girName);
-        values.push(toValue(ffiType, value));
+        values.push(Value.newFrom(ffiType, value));
     }
 
     return GObject.newWithProperties(gtype, names, values) as unknown as Container;

package/src/nodes/internal/widget.ts

@@ -1,6 +1,6 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
 import { resolvePropMeta } from "../../metadata.js";
-import type { ContainerClass } from "../../types.js";
+
 import { isAddable, isAppendable, isContentWidget, isRemovable, isSingleChild } from "./predicates.js";
 
 export function detachChild(child: Gtk.Widget, container: Gtk.Widget): void {
@@ -62,19 +62,13 @@ export function resolvePropertySetter(
     parentWidget: Gtk.Widget,
     propId: string,
 ): ((child: Gtk.Widget | null) => void) | null {
-    const propMeta = resolvePropMeta(parentWidget, propId);
+    const propName = resolvePropMeta(parentWidget, propId);
 
-    if (!propMeta) {
+    if (!propName) {
         return null;
     }
 
-    const [, setterName] = propMeta;
-    const setter = parentWidget[setterName as keyof Gtk.Widget];
-
-    if (typeof setter !== "function") {
-        const parentType = (parentWidget.constructor as ContainerClass).glibTypeName;
-        throw new Error(`Expected setter function for property '${propId}' on type '${parentType}'`);
-    }
-
-    return setter.bind(parentWidget) as (child: Gtk.Widget | null) => void;
+    return (child: Gtk.Widget | null) => {
+        (parentWidget as unknown as Record<string, unknown>)[propName] = child;
+    };
 }

package/src/nodes/list-item-node.ts

@@ -1,26 +1,50 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
 import type { Container, Props } from "../types.js";
+import { isRemovable } from "./internal/predicates.js";
 import { WidgetNode } from "./widget.js";
 
-export class ListItemNode extends Node<Gtk.ListItem | Gtk.ListHeader, Props, Node, WidgetNode> {
-    public override isValidChild(child: Node): boolean {
-        return child instanceof WidgetNode;
+export class ListItemNode extends Node<Gtk.ListItem | Gtk.ListHeader, Props, Node, Node> {
+    public override isValidChild(_child: Node): boolean {
+        return true;
     }
 
-    public override appendChild(child: WidgetNode): void {
+    public override appendChild(child: Node): void {
         super.appendChild(child);
-        this.container.setChild(child.container);
+
+        if (child instanceof WidgetNode) {
+            this.detachFromGtkParent(child);
+            this.container.setChild(child.container);
+        }
     }
 
-    public override removeChild(child: WidgetNode): void {
-        this.container.setChild(null);
+    public override removeChild(child: Node): void {
+        if (child instanceof WidgetNode) {
+            this.container.setChild(null);
+        }
+
         super.removeChild(child);
     }
 
-    public override insertBefore(child: WidgetNode, before: WidgetNode): void {
+    public override insertBefore(child: Node, before: Node): void {
         super.insertBefore(child, before);
-        this.container.setChild(child.container);
+
+        if (child instanceof WidgetNode) {
+            this.detachFromGtkParent(child);
+            this.container.setChild(child.container);
+        }
+    }
+
+    private detachFromGtkParent(child: Node): void {
+        if (!(child instanceof WidgetNode)) return;
+        const currentParent = child.container.getParent();
+        if (currentParent !== null) {
+            if (isRemovable(currentParent)) {
+                currentParent.remove(child.container);
+            } else {
+                child.container.unparent();
+            }
+        }
     }
 
     public static override createContainer(): Container {