@gtkx/react 1.4.0 → 1.6.0

package/src/adw/element-behaviors.ts

@@ -1,9 +1,7 @@
-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 {
-    addRemoveSlot,
-    adoptedChildrenSlot,
     applicationCreator,
     boxSlot,
     childMatcher,
@@ -12,6 +10,8 @@ import {
     deferred,
     indexedSlot,
     list,
+    methodSlot,
+    setterSlot,
     slot,
 } from "../reconciler/behaviors.js";
 import { type ElementBehavior, type ElementConfig, forTypes, registerElements } from "../reconciler/registry.js";
@@ -35,60 +35,27 @@ type PrefixSuffixRow = Adw.ActionRow | Adw.EntryRow | Adw.ExpanderRow;
 
 const SLOT_SUFFIX = "Slot";
 const childSetter = childSetterSlot<AdwChildSetter>();
-const contentSetter = contentSetterSlot<AdwContentSetter>();
-
-const breakpoints = slot<BreakpointHost, Adw.Breakpoint>("breakpoints", "AdwBreakpoint", {
-    attach: (host, breakpoint) => {
-        host.addBreakpoint(breakpoint);
-    },
-});
+const contentSetter = contentSetterSlot<AdwContentSetter>(Gtk.Widget);
+const breakpoints = methodSlot<BreakpointHost, Adw.Breakpoint>("breakpoints", Adw.Breakpoint, "addBreakpoint");
 
 const prefixSuffix = [
-    addRemoveSlot<Gtk.Widget, PrefixSuffixRow>(
-        "prefix",
-        "GtkWidget",
-        (row, child) => {
-            row.addPrefix(child);
-        },
-        (row, child) => {
-            row.remove(child);
-        },
-    ),
-    addRemoveSlot<Gtk.Widget, PrefixSuffixRow>(
-        "suffix",
-        "GtkWidget",
-        (row, child) => {
-            row.addSuffix(child);
-        },
-        (row, child) => {
-            row.remove(child);
-        },
-    ),
+    methodSlot<PrefixSuffixRow, Gtk.Widget>("prefix", Gtk.Widget, "addPrefix", "remove"),
+    methodSlot<PrefixSuffixRow, Gtk.Widget>("suffix", Gtk.Widget, "addSuffix", "remove"),
 ];
 
-const preferencesDialogChildren = addRemoveSlot<Adw.PreferencesPage, Adw.PreferencesDialog>(
-    "children",
-    "AdwPreferencesPage",
-    (dialog, page) => {
-        dialog.add(page);
-    },
-    (dialog, page) => {
-        dialog.remove(page);
-    },
+const preferencesDialogChildren = methodSlot<Adw.PreferencesDialog, Adw.PreferencesPage>(
+    "children", Adw.PreferencesPage, "add", "remove",
 );
 
-const alertDialogExtraChild = slot<Adw.AlertDialog, Gtk.Widget>("children", "GtkWidget", {
-    attach: (dialog, child) => {
-        dialog.setExtraChild(child);
-    },
-    detach: (dialog) => {
-        dialog.setExtraChild(null);
-    },
-});
+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 sidebarSections = indexedSlot<Adw.Sidebar, Adw.SidebarSection>("children", "AdwSidebarSection");
-const sidebarItems = indexedSlot<Adw.SidebarSection, Adw.SidebarItem>("children", "AdwSidebarItem");
-const isWidget = childMatcher("GtkWidget");
+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) => {
@@ -98,7 +65,7 @@ const multiLayoutSlots: ElementBehavior<Adw.MultiLayoutView> = {
             return;
         }
 
-        view.setChild(id, child as Gtk.Widget);
+        view.setChild(id, child);
 
         return true;
     },
@@ -109,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);
@@ -151,14 +116,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     AdwClampScrollable: {
         behaviors: [
-            slot<Adw.ClampScrollable, Gtk.Scrollable & Gtk.Widget>("children", "GtkScrollable", {
-                attach: (clamp, child) => {
-                    clamp.setChild(child);
-                },
-                detach: (clamp) => {
-                    clamp.setChild(null);
-                },
-            }),
+            setterSlot<Adw.ClampScrollable, Gtk.Scrollable & Gtk.Widget>("children", scrollableWidget, "setChild"),
         ],
     },
     ...forTypes(CHILD_SETTER_TYPES, {
@@ -179,15 +137,8 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     AdwBreakpointBin: {
         behaviors: [
             childSetter,
-            addRemoveSlot<Adw.Breakpoint, Adw.BreakpointBin>(
-                "breakpoints",
-                "AdwBreakpoint",
-                (bin, breakpoint) => {
-                    bin.addBreakpoint(breakpoint);
-                },
-                (bin, breakpoint) => {
-                    bin.removeBreakpoint(breakpoint);
-                },
+            methodSlot<Adw.BreakpointBin, Adw.Breakpoint>(
+                "breakpoints", Adw.Breakpoint, "addBreakpoint", "removeBreakpoint",
             ),
         ],
     },
@@ -200,27 +151,18 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     AdwExpanderRow: {
         behaviors: [
             ...prefixSuffix,
-            addRemoveSlot<Gtk.Widget, Adw.ExpanderRow>(
-                "rows",
-                "GtkWidget",
-                (row, child) => {
-                    row.addRow(child);
-                },
-                (row, child) => {
-                    row.remove(child);
-                },
-            ),
+            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);
                 },
@@ -235,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);
                 },
@@ -249,22 +191,11 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
         behaviors: [preferencesDialogChildren],
     },
     AdwPreferencesGroup: {
-        behaviors: [
-            addRemoveSlot<Gtk.Widget, Adw.PreferencesGroup>(
-                "children",
-                "GtkWidget",
-                (group, child) => {
-                    group.add(child);
-                },
-                (group, child) => {
-                    group.remove(child);
-                },
-            ),
-        ],
+        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) {
@@ -282,105 +213,37 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     AdwNavigationView: {
         behaviors: [
-            addRemoveSlot<Adw.NavigationPage, Adw.NavigationView>(
-                "children",
-                "AdwNavigationPage",
-                (view, page) => {
-                    view.add(page);
-                },
-                (view, page) => {
-                    view.remove(page);
-                },
-            ),
+            methodSlot<Adw.NavigationView, Adw.NavigationPage>("children", Adw.NavigationPage, "add", "remove"),
         ],
     },
     AdwViewStack: {
         behaviors: [
-            adoptedChildrenSlot<Adw.ViewStack, Gtk.Widget>(
-                "GtkWidget",
-                (stack, child) => stack.add(child),
-                (stack, child) => {
-                    stack.remove(child);
-                },
-            ),
+            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>(),
-            addRemoveSlot<Gtk.Widget, Adw.ToolbarView>(
-                "topBar",
-                "GtkWidget",
-                (view, child) => {
-                    view.addTopBar(child);
-                },
-                (view, child) => {
-                    view.remove(child);
-                },
-            ),
-            addRemoveSlot<Gtk.Widget, Adw.ToolbarView>(
-                "bottomBar",
-                "GtkWidget",
-                (view, child) => {
-                    view.addBottomBar(child);
-                },
-                (view, child) => {
-                    view.remove(child);
-                },
-            ),
+            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: [
-            slot<Adw.HeaderBar, Gtk.Widget>("start", "GtkWidget", {
-                attach: (bar, child) => {
-                    bar.packStart(child);
-                },
-                detach: (bar, child) => {
-                    bar.remove(child);
-                },
-            }),
-            slot<Adw.HeaderBar, Gtk.Widget>("end", "GtkWidget", {
-                attach: (bar, child) => {
-                    bar.packEnd(child);
-                },
-                detach: (bar, child) => {
-                    bar.remove(child);
-                },
-            }),
+            methodSlot<Adw.HeaderBar, Gtk.Widget>("start", Gtk.Widget, "packStart", "remove"),
+            methodSlot<Adw.HeaderBar, Gtk.Widget>("end", Gtk.Widget, "packEnd", "remove"),
         ],
     },
     AdwShortcutsDialog: {
-        behaviors: [
-            slot<Adw.ShortcutsDialog, Adw.ShortcutsSection>("children", "AdwShortcutsSection", {
-                attach: (dialog, section) => {
-                    dialog.add(section);
-                },
-            }),
-        ],
+        behaviors: [methodSlot<Adw.ShortcutsDialog, Adw.ShortcutsSection>("children", Adw.ShortcutsSection, "add")],
     },
     AdwShortcutsSection: {
-        behaviors: [
-            slot<Adw.ShortcutsSection, Adw.ShortcutsItem>("children", "AdwShortcutsItem", {
-                attach: (section, item) => {
-                    section.add(item);
-                },
-            }),
-        ],
+        behaviors: [methodSlot<Adw.ShortcutsSection, Adw.ShortcutsItem>("children", Adw.ShortcutsItem, "add")],
     },
     AdwToggleGroup: {
         behaviors: [
-            addRemoveSlot<Adw.Toggle, Adw.ToggleGroup>(
-                "children",
-                "AdwToggle",
-                (group, toggle) => {
-                    group.add(toggle);
-                },
-                (group, toggle) => {
-                    group.remove(toggle);
-                },
-            ),
+            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 };