@gtkx/react 1.4.0 → 1.6.0

package/src/element-behaviors.ts

@@ -14,14 +14,15 @@ import type {
 } from "./prop-types.js";
 import { BUILTIN_ELEMENTS, SINGLE_CHILD_TYPES } from "./element-config.js";
 import {
-    addRemoveSlot,
-    adoptedChildrenSlot,
     applicationCreator,
     boxSlot,
     childSetterSlot,
     controlledText,
     deferred,
+    deferredWith,
     list,
+    methodSlot,
+    setterSlot,
     slot,
     value,
     wrappingIndexedSlot,
@@ -36,8 +37,6 @@ import {
 import { applyWrite } from "./reconciler/signals.js";
 import { applyStyle, CSS_CLASSES_PROP, styleClass } from "./reconciler/style.js";
 
-type SelectedIndexState = { desired: number | undefined; isScheduled: boolean; disconnect: (() => void) | null };
-
 const SELECTED_INDEX_PROP = "selectedIndex";
 const SELECTION_SIGNAL = "selected-rows-changed";
 const NO_SELECTION = -1;
@@ -48,26 +47,8 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     }),
     ...forTypes(["GtkHeaderBar", "GtkActionBar"], {
         behaviors: [
-            addRemoveSlot<Gtk.Widget, Gtk.HeaderBar | Gtk.ActionBar>(
-                "start",
-                "GtkWidget",
-                (bar, child) => {
-                    bar.packStart(child);
-                },
-                (bar, child) => {
-                    bar.remove(child);
-                },
-            ),
-            addRemoveSlot<Gtk.Widget, Gtk.HeaderBar | Gtk.ActionBar>(
-                "end",
-                "GtkWidget",
-                (bar, child) => {
-                    bar.packEnd(child);
-                },
-                (bar, child) => {
-                    bar.remove(child);
-                },
-            ),
+            methodSlot<Gtk.HeaderBar | Gtk.ActionBar, Gtk.Widget>("start", Gtk.Widget, "packStart", "remove"),
+            methodSlot<Gtk.HeaderBar | Gtk.ActionBar, Gtk.Widget>("end", Gtk.Widget, "packEnd", "remove"),
         ],
     }),
     GtkWindow: {
@@ -75,7 +56,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkWidget: {
         behaviors: [
-            slot<Gtk.Widget, Gtk.Popover>("children", "GtkPopover", {
+            slot<Gtk.Widget, Gtk.Popover>("children", Gtk.Popover, {
                 attach: (parent, popover) => {
                     popover.setParent(parent);
                 },
@@ -83,25 +64,11 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
                     popover.unparent();
                 },
             }),
-            addRemoveSlot<Gtk.EventController, Gtk.Widget>(
-                "controllers",
-                "GtkEventController",
-                (widget, controller) => {
-                    widget.addController(controller);
-                },
-                (widget, controller) => {
-                    widget.removeController(controller);
-                },
+            methodSlot<Gtk.Widget, Gtk.EventController>(
+                "controllers", Gtk.EventController, "addController", "removeController",
             ),
-            slot<Gtk.Widget, Gtk.LayoutManager>("layoutManager", "GtkLayoutManager", {
-                attach: (widget, manager) => {
-                    widget.setLayoutManager(manager);
-                },
-                detach: (widget) => {
-                    widget.setLayoutManager(null);
-                },
-            }),
-            slot<Gtk.Widget, Gio.ActionGroup>("actionGroups", "GActionGroup", {
+            setterSlot<Gtk.Widget, Gtk.LayoutManager>("layoutManager", Gtk.LayoutManager, "setLayoutManager"),
+            slot<Gtk.Widget, Gio.ActionGroup>("actionGroups", Gio.ActionGroup, {
                 attach: (widget, group, info) => {
                     widget.insertActionGroup((info.props.prefix as string | null) ?? "", group);
                 },
@@ -133,7 +100,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     GtkOverlay: {
         behaviors: [
             childSetterSlot<Gtk.Overlay>(),
-            slot<Gtk.Overlay, Gtk.Widget>("overlays", "GtkWidget", {
+            slot<Gtk.Overlay, Gtk.Widget>("overlays", Gtk.Widget, {
                 attach: (overlay, child) => {
                     overlay.addOverlay(child);
                 },
@@ -146,15 +113,8 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkShortcutController: {
         behaviors: [
-            addRemoveSlot<Gtk.Shortcut, Gtk.ShortcutController>(
-                "shortcuts",
-                "GtkShortcut",
-                (controller, shortcut) => {
-                    controller.addShortcut(shortcut);
-                },
-                (controller, shortcut) => {
-                    controller.removeShortcut(shortcut);
-                },
+            methodSlot<Gtk.ShortcutController, Gtk.Shortcut>(
+                "shortcuts", Gtk.Shortcut, "addShortcut", "removeShortcut",
             ),
         ],
     },
@@ -162,20 +122,11 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
         behaviors: [{ create: () => Gtk.TextChildAnchor.new() }],
     },
     GtkTextView: {
-        behaviors: [
-            slot<Gtk.TextView, Gtk.TextBuffer>("children", "GtkTextBuffer", {
-                attach: (view, buffer) => {
-                    view.setBuffer(buffer);
-                },
-                detach: (view) => {
-                    view.setBuffer(null);
-                },
-            }),
-        ],
+        behaviors: [setterSlot<Gtk.TextView, Gtk.TextBuffer>("children", Gtk.TextBuffer, "setBuffer")],
     },
     GActionMap: {
         behaviors: [
-            slot<Gio.ActionMap, Gio.Action>("actions", "GAction", {
+            slot<Gio.ActionMap, Gio.Action>("actions", Gio.Action, {
                 attach: (map, action) => {
                     map.addAction(action);
                 },
@@ -199,7 +150,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkColumnView: {
         behaviors: [
-            slot<Gtk.ColumnView, Gtk.ColumnViewColumn>("children", "GtkColumnViewColumn", {
+            slot<Gtk.ColumnView, Gtk.ColumnViewColumn>("children", Gtk.ColumnViewColumn, {
                 attach: (view, column, info) => {
                     view.insertColumn(info.index, column);
                 },
@@ -211,7 +162,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkGrid: {
         behaviors: [
-            slot<Gtk.Grid, Gtk.Widget>("children", "GtkWidget", {
+            slot<Gtk.Grid, Gtk.Widget>("children", Gtk.Widget, {
                 attach: (grid, child) => {
                     grid.attach(child, 0, 0, 1, 1);
                 },
@@ -224,7 +175,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkFixed: {
         behaviors: [
-            slot<Gtk.Fixed, Gtk.Widget>("children", "GtkWidget", {
+            slot<Gtk.Fixed, Gtk.Widget>("children", Gtk.Widget, {
                 attach: (fixed, child) => {
                     fixed.put(child, 0, 0);
                 },
@@ -249,25 +200,11 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkConstraintLayout: {
         behaviors: [
-            addRemoveSlot<Gtk.Constraint, Gtk.ConstraintLayout>(
-                "constraints",
-                "GtkConstraint",
-                (layout, constraint) => {
-                    layout.addConstraint(constraint);
-                },
-                (layout, constraint) => {
-                    layout.removeConstraint(constraint);
-                },
+            methodSlot<Gtk.ConstraintLayout, Gtk.Constraint>(
+                "constraints", Gtk.Constraint, "addConstraint", "removeConstraint",
             ),
-            addRemoveSlot<Gtk.ConstraintGuide, Gtk.ConstraintLayout>(
-                "guides",
-                "GtkConstraintGuide",
-                (layout, guide) => {
-                    layout.addGuide(guide);
-                },
-                (layout, guide) => {
-                    layout.removeGuide(guide);
-                },
+            methodSlot<Gtk.ConstraintLayout, Gtk.ConstraintGuide>(
+                "guides", Gtk.ConstraintGuide, "addGuide", "removeGuide",
             ),
             list<Gtk.ConstraintLayout, VflConstraints, Gtk.Constraint[]>("vfl", {
                 add: (layout, item) => [
@@ -288,19 +225,13 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkStack: {
         behaviors: [
-            adoptedChildrenSlot<Gtk.Stack, Gtk.Widget>(
-                "GtkWidget",
-                (stack, child) => stack.addChild(child),
-                (stack, child) => {
-                    stack.remove(child);
-                },
-            ),
+            methodSlot<Gtk.Stack, Gtk.Widget>("children", Gtk.Widget, "addChild", "remove"),
             deferred<Gtk.Stack, string>("visibleChildName", (stack, name) => stack.getChildByName(name) !== null),
         ],
     },
     GtkNotebook: {
         behaviors: [
-            slot<Gtk.Notebook, Gtk.Widget>("children", "GtkWidget", {
+            slot<Gtk.Notebook, Gtk.Widget>("children", Gtk.Widget, {
                 attach: (notebook, child, info) => notebook.insertPage(child, null, info.index),
                 reorder: (notebook, child, info) => {
                     notebook.reorderChild(child, info.index);
@@ -315,16 +246,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     GtkApplication: {
         behaviors: [
             applicationCreator(Gtk.Application),
-            addRemoveSlot<Gtk.Window, Gtk.Application>(
-                "children",
-                "GtkWindow",
-                (application, window) => {
-                    application.addWindow(window);
-                },
-                (application, window) => {
-                    application.removeWindow(window);
-                },
-            ),
+            methodSlot<Gtk.Application, Gtk.Window>("children", Gtk.Window, "addWindow", "removeWindow"),
             list<Gtk.Application, ActionAccel>("actionAccels", {
                 add: (application, item) => {
                     application.setAccelsForAction(item.detailedActionName, item.accels);
@@ -494,89 +416,27 @@ function desiredIndex(value: unknown): number | undefined {
     return value;
 }
 
-function selectRowAt(box: Gtk.ListBox, row: Gtk.ListBoxRow): void {
-    applyWrite(SELECTED_INDEX_PROP, () => {
-        box.selectRow(row);
-    });
-}
-
-function clearSelection(box: Gtk.ListBox): void {
-    applyWrite(SELECTED_INDEX_PROP, () => {
+function applySelectedIndex(box: Gtk.ListBox, index: number): void {
+    if (index < 0) {
         box.unselectAll();
-    });
-}
-
-function applySelectedIndex(box: Gtk.ListBox, state: SelectedIndexState): void {
-    const { desired } = state;
 
-    if (desired === undefined || selectedRowIndex(box) === desired) {
         return;
     }
 
-    if (desired < 0) {
-        clearSelection(box);
-
-        return;
-    }
-
-    const row = box.getRowAtIndex(desired);
+    const row = box.getRowAtIndex(index);
 
     if (row !== null) {
-        selectRowAt(box, row);
-    }
-}
-
-function scheduleSelectedIndex(box: Gtk.ListBox, state: SelectedIndexState): void {
-    if (state.isScheduled) {
-        return;
-    }
-
-    state.isScheduled = true;
-
-    queueMicrotask(() => {
-        state.isScheduled = false;
-
-        if (state.disconnect !== null) {
-            applySelectedIndex(box, state);
-        }
-    });
-}
-
-function watchSelectionDrift(box: Gtk.ListBox, state: SelectedIndexState): void {
-    if (state.disconnect !== null) {
-        return;
+        box.selectRow(row);
     }
-
-    const handler = (): undefined => {
-        scheduleSelectedIndex(box, state);
-    };
-
-    box.on(SELECTION_SIGNAL, handler);
-
-    state.disconnect = (): void => {
-        box.off(SELECTION_SIGNAL, handler);
-    };
 }
 
 function selectedIndexBehavior(): ElementBehavior<Gtk.ListBox> {
-    return {
-        deferred: [SELECTED_INDEX_PROP],
-        initialize: (): SelectedIndexState => ({ desired: undefined, isScheduled: false, disconnect: null }),
-        update: (_box, _prev, next, context) => {
-            (context as SelectedIndexState).desired = desiredIndex(next[SELECTED_INDEX_PROP]);
-
-            return [SELECTED_INDEX_PROP];
-        },
-        flush: (box, context) => {
-            applySelectedIndex(box, context as SelectedIndexState);
-            watchSelectionDrift(box, context as SelectedIndexState);
-        },
-        teardown: (_box, context) => {
-            const state = context as SelectedIndexState;
-            state.disconnect?.();
-            state.disconnect = null;
-        },
-    };
+    return deferredWith<Gtk.ListBox, number>(SELECTED_INDEX_PROP, {
+        parse: desiredIndex,
+        read: selectedRowIndex,
+        write: applySelectedIndex,
+        signal: SELECTION_SIGNAL,
+    });
 }
 
 const addMainOption = (application: Gtk.Application, option: MainOption): void => {

package/src/reconciler/behaviors.ts

@@ -1,16 +1,15 @@
 import type * as GObject from "@gtkx/gi/gobject";
-import type * as Gtk from "@gtkx/gi/gtk";
+import * as Gtk from "@gtkx/gi/gtk";
 import {
-    type AnyClass,
     type ApplicationClass,
     type CommandLineApplication,
     createApplication,
     getClassType,
+    getInstanceType,
     TYPE_INVALID,
-    typeFromName,
     typeIsA,
 } from "@gtkx/runtime";
-import { getOrInsert, isDeepEqual, kebabCase, structuredClone, unsanitizeIdentifier } from "@gtkx/utils";
+import { isDeepEqual, kebabCase, structuredClone, unsanitizeIdentifier } from "@gtkx/utils";
 import type { DetachInfo, ElementBehavior, PlaceInfo, Props } from "./registry.js";
 import { getPropertyName } from "./metadata.js";
 import { applyWrite } from "./signals.js";
@@ -35,8 +34,24 @@ type ListEntry = { item: unknown; handle: unknown };
 type ListState = { snapshot: unknown[]; entries: ListEntry[] };
 type DeferredState = { desired: unknown; isPresent: boolean; isScheduled: boolean; disconnect: (() => void) | null };
 type CanApply<P extends GObject.Object, V> = (object: P, value: V) => boolean;
+
+type DeferredOps<P extends GObject.Object, V> = {
+    canApply?: CanApply<P, V> | undefined;
+    parse?: ((value: unknown) => V | undefined) | undefined;
+    read: (object: P) => unknown;
+    write: (object: P, value: V) => void;
+    signal?: string | undefined;
+};
+
+type DeferredHooks<P extends GObject.Object, V> = Omit<DeferredOps<P, V>, "read" | "write"> & {
+    read?: ((object: P) => unknown) | undefined;
+    write?: ((object: P, value: V) => void) | undefined;
+};
+
 type ChildSetter = GObject.Object & { setChild: (child: Gtk.Widget | null) => void };
 type ContentSetter<C extends Gtk.Widget> = GObject.Object & { setContent: (content: C | null) => void };
+type MatchingKey<P, F> = keyof P & string & { [K in keyof P]: P[K] extends F ? K : never }[keyof P];
+type MethodKey<P, A> = MatchingKey<P, (argument: A) => unknown>;
 
 type BoxLike = GObject.Object & {
     remove: (child: Gtk.Widget) => void;
@@ -51,22 +66,32 @@ type IndexedChildHost<C extends GObject.Object> = GObject.Object & {
     insert: (child: C, position: number) => unknown;
 };
 
-const childTypeCache: Map<string, bigint> = new Map();
+type ChildClass<C extends GObject.Object> =
+    (abstract new (...args: never[]) => C) |
+    { [Symbol.hasInstance]: (value: unknown) => value is C };
 
-const childTypeFor = (name: string): bigint => getOrInsert(childTypeCache, name, typeFromName);
+const childClassType = (cls: ChildClass<GObject.Object>): bigint =>
+    typeof cls === "function" ? getClassType(cls) : TYPE_INVALID;
 
-const childMatcher =
-    (name: string): ((child: GObject.Object) => boolean) =>
-        (child) => {
-            const type = childTypeFor(name);
+const isChildInstance = <C extends GObject.Object>(child: GObject.Object, cls: ChildClass<C>): child is C => {
+    if (child instanceof cls) {
+        return true;
+    }
 
-            return type === TYPE_INVALID || typeIsA(getClassType(child.constructor as AnyClass), type);
-        };
+    const type = childClassType(cls);
+
+    return type !== TYPE_INVALID && typeIsA(getInstanceType(child), type);
+};
+
+const childMatcher =
+    <C extends GObject.Object>(cls: ChildClass<C> | undefined): ((child: GObject.Object) => child is C) =>
+        (child): child is C =>
+            cls !== undefined && isChildInstance(child, cls);
 
 const slotAttach =
     <P extends GObject.Object, C extends GObject.Object>(
         slotName: string,
-        isMatch: (child: GObject.Object) => boolean,
+        isMatch: (child: GObject.Object) => child is C,
         attach: SlotHooks<P, C>["attach"],
     ): NonNullable<ElementBehavior["attach"]> =>
         (object, child, info) => {
@@ -74,15 +99,15 @@ const slotAttach =
                 return;
             }
 
-            return attach(object as P, child as C, info) ?? true;
+            return attach(object as P, child, info) ?? true;
         };
 
 const slot = <P extends GObject.Object, C extends GObject.Object>(
     slotName: string,
-    childType: string,
+    childClass: ChildClass<C> | undefined,
     hooks: SlotHooks<P, C>,
 ): ElementBehavior => {
-    const matches = childMatcher(childType);
+    const matches = childMatcher(childClass);
     const { attach, detach, reorder, resolve } = hooks;
     const behavior: ElementBehavior = { attach: slotAttach(slotName, matches, attach) };
 
@@ -172,29 +197,31 @@ const list = <P extends GObject.Object, I, H = void>(
 };
 
 const settleDeferred = <P extends GObject.Object, V>(
-    object: GObject.Object,
+    object: P,
     state: DeferredState,
     prop: string,
-    canApply: CanApply<P, V> | undefined,
+    ops: DeferredOps<P, V>,
 ): void => {
-    if (!state.isPresent || Object.is(Reflect.get(object, prop), state.desired)) {
+    if (!state.isPresent || Object.is(ops.read(object), state.desired)) {
         return;
     }
 
-    if (canApply !== undefined && !canApply(object as P, state.desired as V)) {
+    const desired = state.desired as V;
+
+    if (ops.canApply !== undefined && !ops.canApply(object, desired)) {
         return;
     }
 
     applyWrite(prop, () => {
-        Reflect.set(object, prop, state.desired);
+        ops.write(object, desired);
     });
 };
 
 const scheduleSettle = <P extends GObject.Object, V>(
-    object: GObject.Object,
+    object: P,
     state: DeferredState,
     prop: string,
-    canApply: CanApply<P, V> | undefined,
+    ops: DeferredOps<P, V>,
 ): void => {
     if (state.isScheduled) {
         return;
@@ -206,25 +233,25 @@ const scheduleSettle = <P extends GObject.Object, V>(
         state.isScheduled = false;
 
         if (state.disconnect !== null) {
-            settleDeferred(object, state, prop, canApply);
+            settleDeferred(object, state, prop, ops);
         }
     });
 };
 
 const watchDrift = <P extends GObject.Object, V>(
-    object: GObject.Object,
+    object: P,
     state: DeferredState,
     prop: string,
-    canApply: CanApply<P, V> | undefined,
+    ops: DeferredOps<P, V>,
 ): void => {
     if (state.disconnect !== null) {
         return;
     }
 
-    const signal = `notify::${getPropertyName(object, prop) ?? unsanitizeIdentifier(kebabCase(prop))}`;
+    const signal = ops.signal ?? `notify::${getPropertyName(object, prop) ?? unsanitizeIdentifier(kebabCase(prop))}`;
 
     const handler = (): undefined => {
-        scheduleSettle(object, state, prop, canApply);
+        scheduleSettle(object, state, prop, ops);
     };
 
     object.on(signal, handler);
@@ -234,23 +261,20 @@ const watchDrift = <P extends GObject.Object, V>(
     };
 };
 
-const deferred = <P extends GObject.Object, V>(
-    prop: string,
-    canApply?: CanApply<P, V>,
-): ElementBehavior<P> => ({
+const deferredBehavior = <P extends GObject.Object, V>(prop: string, ops: DeferredOps<P, V>): ElementBehavior<P> => ({
     deferred: [prop],
     initialize: (): DeferredState => ({ desired: undefined, isPresent: false, isScheduled: false, disconnect: null }),
     update: (_object, _prev, next, context) => {
         const state = context as DeferredState;
-        state.desired = next[prop];
-        state.isPresent = next[prop] !== undefined;
+        state.desired = ops.parse === undefined ? next[prop] : ops.parse(next[prop]);
+        state.isPresent = state.desired !== undefined;
 
         return [prop];
     },
     flush: (object, context) => {
         const state = context as DeferredState;
-        settleDeferred(object, state, prop, canApply);
-        watchDrift(object, state, prop, canApply);
+        settleDeferred(object, state, prop, ops);
+        watchDrift(object, state, prop, ops);
     },
     teardown: (_object, context) => {
         const state = context as DeferredState;
@@ -259,6 +283,18 @@ const deferred = <P extends GObject.Object, V>(
     },
 });
 
+const deferredWith = <P extends GObject.Object, V>(prop: string, hooks: DeferredHooks<P, V>): ElementBehavior<P> =>
+    deferredBehavior<P, V>(prop, {
+        ...hooks,
+        read: hooks.read ?? ((object) => Reflect.get(object, prop)),
+        write: hooks.write ?? ((object, value) => {
+            Reflect.set(object, prop, value);
+        }),
+    });
+
+const deferred = <P extends GObject.Object, V>(prop: string, canApply?: CanApply<P, V>): ElementBehavior<P> =>
+    deferredWith<P, V>(prop, { canApply });
+
 const controlledText = (prop: string): ElementBehavior =>
     value(prop, (object, next) => {
         if (!hasSameText(object, prop, next)) {
@@ -269,7 +305,7 @@ const controlledText = (prop: string): ElementBehavior =>
     });
 
 const childSetterSlot = <P extends ChildSetter>(): ElementBehavior<P> =>
-    slot<P, Gtk.Widget>("children", "GtkWidget", {
+    slot<P, Gtk.Widget>("children", Gtk.Widget, {
         attach: (parent, child) => {
             parent.setChild(child);
         },
@@ -279,9 +315,9 @@ const childSetterSlot = <P extends ChildSetter>(): ElementBehavior<P> =>
     });
 
 const contentSetterSlot = <P extends ContentSetter<C>, C extends Gtk.Widget = Gtk.Widget>(
-    childType = "GtkWidget",
+    childClass: ChildClass<C>,
 ): ElementBehavior<P> =>
-    slot<P, C>("children", childType, {
+    slot<P, C>("children", childClass, {
         attach: (parent, child) => {
             parent.setContent(child);
         },
@@ -291,7 +327,7 @@ const contentSetterSlot = <P extends ContentSetter<C>, C extends Gtk.Widget = Gt
     });
 
 const boxSlot = <P extends BoxLike>(): ElementBehavior<P> =>
-    slot<P, Gtk.Widget>("children", "GtkWidget", {
+    slot<P, Gtk.Widget>("children", Gtk.Widget, {
         attach: (box, child, info) => box.insertChildAfter(child, info.sibling as Gtk.Widget | null),
         detach: (box, child) => {
             box.remove(child);
@@ -301,18 +337,45 @@ const boxSlot = <P extends BoxLike>(): ElementBehavior<P> =>
         },
     });
 
-const addRemoveSlot = <C extends GObject.Object, P extends GObject.Object>(
+const callMethod = <P extends GObject.Object, A>(parent: P, method: MethodKey<P, A>, argument: A): unknown =>
+    (parent[method] as (argument: A) => unknown)(argument);
+
+const methodSlot = <P extends GObject.Object, C extends GObject.Object>(
+    slotName: string,
+    childClass: ChildClass<C> | undefined,
+    add: MethodKey<P, C>,
+    remove?: MethodKey<P, C>,
+): ElementBehavior => {
+    const hooks: SlotHooks<P, C> = { attach: (parent, child) => callMethod(parent, add, child) };
+
+    if (remove !== undefined) {
+        hooks.detach = (parent, child) => {
+            callMethod(parent, remove, child);
+        };
+    }
+
+    return slot<P, C>(slotName, childClass, hooks);
+};
+
+const setterSlot = <P extends GObject.Object, C extends GObject.Object>(
     slotName: string,
-    childType: string,
-    add: (parent: P, child: C) => unknown,
-    remove: (parent: P, child: C) => void,
-): ElementBehavior => slot<P, C>(slotName, childType, { attach: add, detach: remove });
+    childClass: ChildClass<C> | undefined,
+    setter: MethodKey<P, C | null>,
+): ElementBehavior =>
+    slot<P, C>(slotName, childClass, {
+        attach: (parent, child) => {
+            callMethod<P, C | null>(parent, setter, child);
+        },
+        detach: (parent) => {
+            callMethod<P, C | null>(parent, setter, null);
+        },
+    });
 
 const indexedSlot = <P extends IndexedChildHost<C>, C extends GObject.Object>(
     slotName: string,
-    childType: string,
+    childClass: ChildClass<C> | undefined,
 ): ElementBehavior<P> =>
-    slot<P, C>(slotName, childType, {
+    slot<P, C>(slotName, childClass, {
         attach: (parent, child, info) => {
             parent.insert(child, info.index);
         },
@@ -325,12 +388,6 @@ const indexedSlot = <P extends IndexedChildHost<C>, C extends GObject.Object>(
         },
     });
 
-const adoptedChildrenSlot = <P extends GObject.Object, C extends GObject.Object>(
-    childType: string,
-    add: (parent: P, item: C) => unknown,
-    remove: (parent: P, item: C) => void,
-): ElementBehavior => addRemoveSlot<C, P>("children", childType, add, remove);
-
 const wrappedRow = <W extends Gtk.Widget>(
     Wrapper: new (props: Props) => W,
     setChild: (wrapper: W, inner: Gtk.Widget) => void,
@@ -371,7 +428,7 @@ const wrappingIndexedSlot = <W extends Gtk.Widget, P extends IndexedChildHost<Gt
     Wrapper: new (props: Props) => W,
     setChild: (wrapper: W, inner: Gtk.Widget) => void,
 ): ElementBehavior<P> => ({
-    ...slot<P, Gtk.Widget>("children", "GtkWidget", {
+    ...slot<P, Gtk.Widget>("children", Gtk.Widget, {
         attach: (parent, child, info) =>
             parent.insert(wrappedRow(Wrapper, setChild, info.context as RowCache, child), info.index),
         detach: (parent, child, info) => {
@@ -394,12 +451,13 @@ export {
     value,
     list,
     deferred,
+    deferredWith,
     controlledText,
     childSetterSlot,
     contentSetterSlot,
     boxSlot,
-    addRemoveSlot,
-    adoptedChildrenSlot,
+    methodSlot,
+    setterSlot,
     indexedSlot,
     wrappingIndexedSlot,
 };