@gtkx/react 1.5.0 → 1.6.0

package/src/adw/element-behaviors.ts

@@ -1,5 +1,5 @@
-import type * as Gtk from "@gtkx/gi/gtk";
 import * as Adw from "@gtkx/gi/adw";
+import * as Gtk from "@gtkx/gi/gtk";
 import type { AlertDialogResponse } from "./prop-types.js";
 import {
     applicationCreator,
@@ -35,22 +35,27 @@ type PrefixSuffixRow = Adw.ActionRow | Adw.EntryRow | Adw.ExpanderRow;
 
 const SLOT_SUFFIX = "Slot";
 const childSetter = childSetterSlot<AdwChildSetter>();
-const contentSetter = contentSetterSlot<AdwContentSetter>();
-const breakpoints = methodSlot<BreakpointHost, Adw.Breakpoint>("breakpoints", "AdwBreakpoint", "addBreakpoint");
+const contentSetter = contentSetterSlot<AdwContentSetter>(Gtk.Widget);
+const breakpoints = methodSlot<BreakpointHost, Adw.Breakpoint>("breakpoints", Adw.Breakpoint, "addBreakpoint");
 
 const prefixSuffix = [
-    methodSlot<PrefixSuffixRow, Gtk.Widget>("prefix", "GtkWidget", "addPrefix", "remove"),
-    methodSlot<PrefixSuffixRow, Gtk.Widget>("suffix", "GtkWidget", "addSuffix", "remove"),
+    methodSlot<PrefixSuffixRow, Gtk.Widget>("prefix", Gtk.Widget, "addPrefix", "remove"),
+    methodSlot<PrefixSuffixRow, Gtk.Widget>("suffix", Gtk.Widget, "addSuffix", "remove"),
 ];
 
 const preferencesDialogChildren = methodSlot<Adw.PreferencesDialog, Adw.PreferencesPage>(
-    "children", "AdwPreferencesPage", "add", "remove",
+    "children", Adw.PreferencesPage, "add", "remove",
 );
 
-const alertDialogExtraChild = setterSlot<Adw.AlertDialog, Gtk.Widget>("children", "GtkWidget", "setExtraChild");
-const sidebarSections = indexedSlot<Adw.Sidebar, Adw.SidebarSection>("children", "AdwSidebarSection");
-const sidebarItems = indexedSlot<Adw.SidebarSection, Adw.SidebarItem>("children", "AdwSidebarItem");
-const isWidget = childMatcher("GtkWidget");
+const alertDialogExtraChild = setterSlot<Adw.AlertDialog, Gtk.Widget>("children", Gtk.Widget, "setExtraChild");
+const sidebarSections = indexedSlot<Adw.Sidebar, Adw.SidebarSection>("children", Adw.SidebarSection);
+const sidebarItems = indexedSlot<Adw.SidebarSection, Adw.SidebarItem>("children", Adw.SidebarItem);
+const isWidget = childMatcher(Gtk.Widget);
+
+const scrollableWidget = {
+    [Symbol.hasInstance]: (value: unknown): value is Gtk.Scrollable & Gtk.Widget =>
+        value instanceof Gtk.Scrollable && value instanceof Gtk.Widget,
+};
 
 const multiLayoutSlots: ElementBehavior<Adw.MultiLayoutView> = {
     attach: (view, child, info) => {
@@ -60,7 +65,7 @@ const multiLayoutSlots: ElementBehavior<Adw.MultiLayoutView> = {
             return;
         }
 
-        view.setChild(id, child as Gtk.Widget);
+        view.setChild(id, child);
 
         return true;
     },
@@ -71,15 +76,13 @@ const multiLayoutSlots: ElementBehavior<Adw.MultiLayoutView> = {
             return;
         }
 
-        const widget = child as Gtk.Widget;
-
-        if (view.getChild(id) === widget) {
-            widget.unparent();
+        if (view.getChild(id) === child) {
+            child.unparent();
         }
     },
 };
 
-const multiLayoutLayouts = slot<Adw.MultiLayoutView, Gtk.Widget>("layouts", "GtkWidget", {
+const multiLayoutLayouts = slot<Adw.MultiLayoutView, Gtk.Widget>("layouts", Gtk.Widget, {
     attach: (view, content) => {
         const layout = new Adw.Layout({ content });
         view.addLayout(layout);
@@ -113,7 +116,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     AdwClampScrollable: {
         behaviors: [
-            setterSlot<Adw.ClampScrollable, Gtk.Scrollable & Gtk.Widget>("children", "GtkScrollable", "setChild"),
+            setterSlot<Adw.ClampScrollable, Gtk.Scrollable & Gtk.Widget>("children", scrollableWidget, "setChild"),
         ],
     },
     ...forTypes(CHILD_SETTER_TYPES, {
@@ -135,7 +138,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
         behaviors: [
             childSetter,
             methodSlot<Adw.BreakpointBin, Adw.Breakpoint>(
-                "breakpoints", "AdwBreakpoint", "addBreakpoint", "removeBreakpoint",
+                "breakpoints", Adw.Breakpoint, "addBreakpoint", "removeBreakpoint",
             ),
         ],
     },
@@ -148,18 +151,18 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     AdwExpanderRow: {
         behaviors: [
             ...prefixSuffix,
-            methodSlot<Adw.ExpanderRow, Gtk.Widget>("rows", "GtkWidget", "addRow", "remove"),
+            methodSlot<Adw.ExpanderRow, Gtk.Widget>("rows", Gtk.Widget, "addRow", "remove"),
         ],
     },
     AdwNavigationSplitView: {
-        behaviors: [contentSetterSlot<Adw.NavigationSplitView, Adw.NavigationPage>("AdwNavigationPage")],
+        behaviors: [contentSetterSlot<Adw.NavigationSplitView, Adw.NavigationPage>(Adw.NavigationPage)],
     },
     AdwWrapBox: {
         behaviors: [boxSlot<Adw.WrapBox>()],
     },
     AdwCarousel: {
         behaviors: [
-            slot<Adw.Carousel, Gtk.Widget>("children", "GtkWidget", {
+            slot<Adw.Carousel, Gtk.Widget>("children", Gtk.Widget, {
                 attach: (carousel, child, info) => {
                     carousel.insert(child, info.index);
                 },
@@ -174,7 +177,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     AdwPreferencesPage: {
         behaviors: [
-            slot<Adw.PreferencesPage, Adw.PreferencesGroup>("children", "AdwPreferencesGroup", {
+            slot<Adw.PreferencesPage, Adw.PreferencesGroup>("children", Adw.PreferencesGroup, {
                 attach: (page, group, info) => {
                     page.insert(group, info.index);
                 },
@@ -188,11 +191,11 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
         behaviors: [preferencesDialogChildren],
     },
     AdwPreferencesGroup: {
-        behaviors: [methodSlot<Adw.PreferencesGroup, Gtk.Widget>("children", "GtkWidget", "add", "remove")],
+        behaviors: [methodSlot<Adw.PreferencesGroup, Gtk.Widget>("children", Gtk.Widget, "add", "remove")],
     },
     AdwTabView: {
         behaviors: [
-            slot<Adw.TabView, Gtk.Widget>("children", "GtkWidget", {
+            slot<Adw.TabView, Gtk.Widget>("children", Gtk.Widget, {
                 attach: (view, child, info) => view.insert(child, info.index),
                 reorder: (view, _child, info) => {
                     if (info.adopted instanceof Adw.TabPage) {
@@ -210,37 +213,37 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     AdwNavigationView: {
         behaviors: [
-            methodSlot<Adw.NavigationView, Adw.NavigationPage>("children", "AdwNavigationPage", "add", "remove"),
+            methodSlot<Adw.NavigationView, Adw.NavigationPage>("children", Adw.NavigationPage, "add", "remove"),
         ],
     },
     AdwViewStack: {
         behaviors: [
-            methodSlot<Adw.ViewStack, Gtk.Widget>("children", "GtkWidget", "add", "remove"),
+            methodSlot<Adw.ViewStack, Gtk.Widget>("children", Gtk.Widget, "add", "remove"),
             deferred<Adw.ViewStack, string>("visibleChildName", (stack, name) => stack.getChildByName(name) !== null),
         ],
     },
     AdwToolbarView: {
         behaviors: [
-            contentSetterSlot<Adw.ToolbarView>(),
-            methodSlot<Adw.ToolbarView, Gtk.Widget>("topBar", "GtkWidget", "addTopBar", "remove"),
-            methodSlot<Adw.ToolbarView, Gtk.Widget>("bottomBar", "GtkWidget", "addBottomBar", "remove"),
+            contentSetterSlot<Adw.ToolbarView>(Gtk.Widget),
+            methodSlot<Adw.ToolbarView, Gtk.Widget>("topBar", Gtk.Widget, "addTopBar", "remove"),
+            methodSlot<Adw.ToolbarView, Gtk.Widget>("bottomBar", Gtk.Widget, "addBottomBar", "remove"),
         ],
     },
     AdwHeaderBar: {
         behaviors: [
-            methodSlot<Adw.HeaderBar, Gtk.Widget>("start", "GtkWidget", "packStart", "remove"),
-            methodSlot<Adw.HeaderBar, Gtk.Widget>("end", "GtkWidget", "packEnd", "remove"),
+            methodSlot<Adw.HeaderBar, Gtk.Widget>("start", Gtk.Widget, "packStart", "remove"),
+            methodSlot<Adw.HeaderBar, Gtk.Widget>("end", Gtk.Widget, "packEnd", "remove"),
         ],
     },
     AdwShortcutsDialog: {
-        behaviors: [methodSlot<Adw.ShortcutsDialog, Adw.ShortcutsSection>("children", "AdwShortcutsSection", "add")],
+        behaviors: [methodSlot<Adw.ShortcutsDialog, Adw.ShortcutsSection>("children", Adw.ShortcutsSection, "add")],
     },
     AdwShortcutsSection: {
-        behaviors: [methodSlot<Adw.ShortcutsSection, Adw.ShortcutsItem>("children", "AdwShortcutsItem", "add")],
+        behaviors: [methodSlot<Adw.ShortcutsSection, Adw.ShortcutsItem>("children", Adw.ShortcutsItem, "add")],
     },
     AdwToggleGroup: {
         behaviors: [
-            methodSlot<Adw.ToggleGroup, Adw.Toggle>("children", "AdwToggle", "add", "remove"),
+            methodSlot<Adw.ToggleGroup, Adw.Toggle>("children", Adw.Toggle, "add", "remove"),
             deferred<Adw.ToggleGroup, string>("activeName", (group, name) => group.getToggleByName(name) !== null),
             deferred("active"),
         ],

package/src/components/element.tsx

@@ -72,11 +72,19 @@ const buildElement = (typeName: string, record: Props): ReactElement => {
  * Left out, the component takes `unknown`, which accepts no attributes at all.
  *
  * @param typeName GType name to render, such as `GtkButton` or the `typeName` given to `registerClass`.
+ * @param cls Wrapper class the name resolves to. Referencing it keeps the class, and with it the
+ * registration the reconciler's name lookup depends on, in a tree-shaken bundle; the component
+ * itself renders through the name.
+ * @param metadata Registered metadata entry for the type. Referencing it keeps the type's property
+ * and signal tables, which register themselves when evaluated, in a tree-shaken bundle.
  * @returns A component taking that type's props.
  */
 /* eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters -- callers name the props */
-function createElementComponent<P = unknown>(typeName: string): (props: P) => ReactNode {
-    return (props: P): ReactNode => buildElement(typeName, isRecord(props) ? props : {});
-}
+const createElementComponent: <P = unknown>(
+    typeName: string,
+    cls?: unknown,
+    metadata?: unknown,
+) => (props: P) => ReactNode =
+    (typeName) => (props): ReactNode => buildElement(typeName, isRecord(props) ? props : {});
 
 export { Prop, createElementComponent };

package/src/element-behaviors.ts

@@ -47,8 +47,8 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     }),
     ...forTypes(["GtkHeaderBar", "GtkActionBar"], {
         behaviors: [
-            methodSlot<Gtk.HeaderBar | Gtk.ActionBar, Gtk.Widget>("start", "GtkWidget", "packStart", "remove"),
-            methodSlot<Gtk.HeaderBar | Gtk.ActionBar, Gtk.Widget>("end", "GtkWidget", "packEnd", "remove"),
+            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: {
@@ -56,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);
                 },
@@ -65,10 +65,10 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
                 },
             }),
             methodSlot<Gtk.Widget, Gtk.EventController>(
-                "controllers", "GtkEventController", "addController", "removeController",
+                "controllers", Gtk.EventController, "addController", "removeController",
             ),
-            setterSlot<Gtk.Widget, Gtk.LayoutManager>("layoutManager", "GtkLayoutManager", "setLayoutManager"),
-            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);
                 },
@@ -100,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);
                 },
@@ -114,7 +114,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     GtkShortcutController: {
         behaviors: [
             methodSlot<Gtk.ShortcutController, Gtk.Shortcut>(
-                "shortcuts", "GtkShortcut", "addShortcut", "removeShortcut",
+                "shortcuts", Gtk.Shortcut, "addShortcut", "removeShortcut",
             ),
         ],
     },
@@ -122,11 +122,11 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
         behaviors: [{ create: () => Gtk.TextChildAnchor.new() }],
     },
     GtkTextView: {
-        behaviors: [setterSlot<Gtk.TextView, Gtk.TextBuffer>("children", "GtkTextBuffer", "setBuffer")],
+        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);
                 },
@@ -150,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);
                 },
@@ -162,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);
                 },
@@ -175,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);
                 },
@@ -201,10 +201,10 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     GtkConstraintLayout: {
         behaviors: [
             methodSlot<Gtk.ConstraintLayout, Gtk.Constraint>(
-                "constraints", "GtkConstraint", "addConstraint", "removeConstraint",
+                "constraints", Gtk.Constraint, "addConstraint", "removeConstraint",
             ),
             methodSlot<Gtk.ConstraintLayout, Gtk.ConstraintGuide>(
-                "guides", "GtkConstraintGuide", "addGuide", "removeGuide",
+                "guides", Gtk.ConstraintGuide, "addGuide", "removeGuide",
             ),
             list<Gtk.ConstraintLayout, VflConstraints, Gtk.Constraint[]>("vfl", {
                 add: (layout, item) => [
@@ -225,13 +225,13 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkStack: {
         behaviors: [
-            methodSlot<Gtk.Stack, Gtk.Widget>("children", "GtkWidget", "addChild", "remove"),
+            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);
@@ -246,7 +246,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     GtkApplication: {
         behaviors: [
             applicationCreator(Gtk.Application),
-            methodSlot<Gtk.Application, Gtk.Window>("children", "GtkWindow", "addWindow", "removeWindow"),
+            methodSlot<Gtk.Application, Gtk.Window>("children", Gtk.Window, "addWindow", "removeWindow"),
             list<Gtk.Application, ActionAccel>("actionAccels", {
                 add: (application, item) => {
                     application.setAccelsForAction(item.detailedActionName, item.accels);

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";
@@ -67,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) => {
@@ -90,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) };
 
@@ -296,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);
         },
@@ -306,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);
         },
@@ -318,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);
@@ -333,7 +342,7 @@ const callMethod = <P extends GObject.Object, A>(parent: P, method: MethodKey<P,
 
 const methodSlot = <P extends GObject.Object, C extends GObject.Object>(
     slotName: string,
-    childType: string,
+    childClass: ChildClass<C> | undefined,
     add: MethodKey<P, C>,
     remove?: MethodKey<P, C>,
 ): ElementBehavior => {
@@ -345,15 +354,15 @@ const methodSlot = <P extends GObject.Object, C extends GObject.Object>(
         };
     }
 
-    return slot<P, C>(slotName, childType, hooks);
+    return slot<P, C>(slotName, childClass, hooks);
 };
 
 const setterSlot = <P extends GObject.Object, C extends GObject.Object>(
     slotName: string,
-    childType: string,
+    childClass: ChildClass<C> | undefined,
     setter: MethodKey<P, C | null>,
 ): ElementBehavior =>
-    slot<P, C>(slotName, childType, {
+    slot<P, C>(slotName, childClass, {
         attach: (parent, child) => {
             callMethod<P, C | null>(parent, setter, child);
         },
@@ -364,9 +373,9 @@ const setterSlot = <P extends GObject.Object, C extends GObject.Object>(
 
 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);
         },
@@ -419,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) => {

package/src/reconciler/instance.ts

@@ -1,5 +1,6 @@
 import type * as GObject from "@gtkx/gi/gobject";
-import { getWrapperClass, TYPE_INVALID, typeFromName, typeIsA } from "@gtkx/runtime";
+import { TYPE_INVALID, typeFromName, typeIsA } from "@gtkx/runtime";
+import { getExactWrapperClass } from "@gtkx/runtime/internal";
 import { getOrInsert, pickBy } from "@gtkx/utils";
 import type { Props } from "./registry.js";
 import { type TypeInfo, typeInfoFor } from "./metadata.js";
@@ -57,8 +58,8 @@ const constructInput = (info: TypeInfo, props: Props): Props =>
             (info.constructOnly.has(name) || info.construct.has(name)),
     );
 
-const instantiate = (type: bigint, input: Props): GObject.Object => {
-    const cls = getWrapperClass(type) as WidgetConstructor;
+const instantiate = (typeName: string, type: bigint, input: Props): GObject.Object => {
+    const cls = getExactWrapperClass(type, typeName) as WidgetConstructor;
 
     return new cls(input);
 };
@@ -66,7 +67,7 @@ const instantiate = (type: bigint, input: Props): GObject.Object => {
 const createObject = (typeName: string, type: bigint, input: Props): GObject.Object => {
     const create = ELEMENTS[typeName]?.behaviors?.find((behavior) => behavior.create !== undefined)?.create;
 
-    return create === undefined ? instantiate(type, input) : create(input);
+    return create === undefined ? instantiate(typeName, type, input) : create(input);
 };
 
 const resolveElementNode = (typeName: string, props: Props, dispatch: Dispatch): ElementNode | LazyNode => {

package/src/reconciler/metadata.ts

@@ -9,6 +9,11 @@ import {
     typeName,
     typeParent,
 } from "@gtkx/runtime";
+import {
+    elementMetadataVersion,
+    registeredElementProperties,
+    registeredElementSignals,
+} from "@gtkx/runtime/internal";
 import { getOrInsert } from "@gtkx/utils";
 import { properties, type PropertyEntry, signals, userEventSignals } from "virtual:gtkx-config";
 import { deferredProps, type ElementBehavior, ELEMENTS } from "./registry.js";
@@ -36,6 +41,19 @@ const FLAGS = 1;
 const DEFAULT_VALUE = 2;
 const ancestryCache: Map<string, string[]> = new Map();
 const typeInfoCache: Map<string, TypeInfo> = new Map();
+const metadataCacheState = { seenVersion: elementMetadataVersion() };
+
+const dropStaleCaches = (): void => {
+    const current = elementMetadataVersion();
+
+    if (metadataCacheState.seenVersion === current) {
+        return;
+    }
+
+    metadataCacheState.seenVersion = current;
+    ancestryCache.clear();
+    typeInfoCache.clear();
+};
 
 const addAncestor = (names: string[], seen: Set<string>, name: string | null): void => {
     if (name === null || seen.has(name)) {
@@ -75,7 +93,7 @@ const addAll = <T>(target: Set<T>, source: Iterable<T> | undefined): void => {
 };
 
 const accumulateAncestor = (info: TypeInfo, ancestor: string): void => {
-    Object.assign(info.signals, signals[ancestor] ?? {});
+    Object.assign(info.signals, registeredElementSignals[ancestor] ?? signals[ancestor] ?? {});
     addAll(info.userEventSignals, userEventSignals[ancestor]);
     info.behaviors.push(...(ELEMENTS[ancestor]?.behaviors ?? []));
 };
@@ -141,7 +159,7 @@ const buildTypeInfo = (name: string): TypeInfo => {
     info.isLazy = chain.some((ancestor) => ELEMENTS[ancestor]?.isLazy === true);
 
     for (const ancestor of chain.toReversed()) {
-        Object.assign(info.properties, properties[ancestor] ?? {});
+        Object.assign(info.properties, registeredElementProperties[ancestor] ?? properties[ancestor] ?? {});
     }
 
     resolveProperties(info);
@@ -149,7 +167,11 @@ const buildTypeInfo = (name: string): TypeInfo => {
     return info;
 };
 
-const typeInfoFor = (name: string): TypeInfo => getOrInsert(typeInfoCache, name, buildTypeInfo);
+const typeInfoFor = (name: string): TypeInfo => {
+    dropStaleCaches();
+
+    return getOrInsert(typeInfoCache, name, buildTypeInfo);
+};
 
 const getTypeInfo = (object: GObject.Object): TypeInfo | undefined => {
     const name = typeName(getClassType(object.constructor as AnyClass));