@gtkx/components 2.0.0-beta.10 → 2.0.0-beta.12

package/src/internal/cells.tsx

@@ -1,10 +1,10 @@
 import type * as GObject from "@gtkx/gi/gobject";
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement, ReactNode, RefObject } from "react";
 import * as Gtk from "@gtkx/gi/gtk";
-import { GtkSignalListItemFactory, GtkTreeExpander } from "@gtkx/jsx/gtk";
+import { GtkBox, GtkSignalListItemFactory, GtkTreeExpander } from "@gtkx/jsx/gtk";
 import { createPortal, useProperty } from "@gtkx/react";
-import { setProperty, t } from "@gtkx/runtime";
-import { memo, useInsertionEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useLatestRef } from "@gtkx/react/internal";
+import { createRef, Fragment, memo, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import type {
     ExpanderDescriptions,
     ListItem,
@@ -15,7 +15,8 @@ import type {
     ListSectionRenderer,
 } from "../types.js";
 import type { Collection } from "./collection.js";
-import { slotRefFor } from "./collection-model.js";
+import { slotPathAt, type SlotRef, slotRefFor } from "./collection-model.js";
+import { joinParts } from "./keys.js";
 
 type CellSize = {
     width: number;
@@ -34,7 +35,7 @@ type CellHost = FactoryHost & {
 type CellEntry<H extends FactoryHost> = {
     key: string;
     host: H;
-    identity: ItemIdentityStore;
+    identity: RefObject<ItemIdentity | null>;
 };
 
 type FactoryHandlers = {
@@ -84,6 +85,7 @@ type ItemSlotOptions = {
 type PositionedHost = Gtk.ListItem | Gtk.ColumnViewRow;
 
 type ItemSlot = {
+    itemKey: string;
     item: ListItem;
     row: Gtk.TreeListRow | null;
     args: ListItemRenderArgs<unknown>;
@@ -94,26 +96,17 @@ type CollectionState = {
     expandedIds: string[] | null | undefined;
 };
 
-type CollectionStateStore = {
-    read: () => CollectionState;
-    write: (state: CollectionState) => void;
-};
-
 type ItemIdentity = {
+    itemKey: string;
     item: ListItem | undefined;
     position: number;
     isExpanded: boolean;
 };
 
-type ItemIdentityStore = {
-    read: () => ItemIdentity | null;
-    write: (identity: ItemIdentity) => void;
-};
-
 type ItemCellProps = {
     entry: CellEntry<Gtk.ListItem>;
     render: ListItemRenderer<never>;
-    state: CollectionStateStore;
+    state: RefObject<CollectionState>;
     hasExpander: boolean;
     expanderDescriptions: ExpanderDescriptions | null | undefined;
 } & ItemIdentity;
@@ -130,7 +123,7 @@ type ItemPortalsProps = {
 type ItemRowProps = {
     entry: CellEntry<Gtk.ColumnViewRow>;
     rowProps: ListRowPropsResolver<never>;
-    state: CollectionStateStore;
+    state: RefObject<CollectionState>;
 } & ItemIdentity;
 
 type RowPortalsProps = {
@@ -152,6 +145,23 @@ type HeaderPortalsProps = {
     collection: Collection;
 };
 
+type NativeItemKeyStore = {
+    keyFor: (item: GObject.Object) => string;
+};
+
+type NativeItemCellProps<T extends GObject.Object> = {
+    entry: CellEntry<Gtk.ListItem>;
+    render: ListItemRenderer<T>;
+    keys: NativeItemKeyStore;
+    size: CellSize;
+};
+
+type NativeItemPortalsProps<T extends GObject.Object> = {
+    registry: CellRegistry<Gtk.ListItem>;
+    render: ListItemRenderer<T>;
+    size: CellSize;
+};
+
 type SectionHeaderSlot = {
     factoryProps: { headerFactory?: ReactElement };
     portals: ReactNode;
@@ -170,10 +180,14 @@ const HEADER_OPTIONS: CellRegistryOptions<Gtk.ListHeader> = { isHost: isListHead
 const ROW_OPTIONS: CellRegistryOptions<Gtk.ColumnViewRow> = { isHost: isColumnViewRow };
 const NO_SIZE: CellSize = { width: -1, height: -1 };
 const NO_ROW_PROPS: ListRowProps = {};
-const ROW_TEXT_DESCRIPTOR = t.string("borrowed");
+const placeholders: WeakSet<Gtk.Widget> = new WeakSet();
+
+const placeholder = (size: CellSize): Gtk.Widget => {
+    const widget = new Gtk.Box({ widthRequest: size.width, heightRequest: size.height });
+    placeholders.add(widget);
 
-const placeholder = (size: CellSize): Gtk.Widget =>
-    new Gtk.Box({ widthRequest: size.width, heightRequest: size.height });
+    return widget;
+};
 
 function isListItem(value: GObject.Object): value is Gtk.ListItem {
     return value instanceof Gtk.ListItem;
@@ -188,8 +202,12 @@ function isColumnViewRow(value: GObject.Object): value is Gtk.ColumnViewRow {
 }
 
 function prepareCell(host: CellHost, size: CellSize): void {
-    if (host.getChild() === null) {
+    const child = host.getChild();
+
+    if (child === null) {
         host.setChild(placeholder(size));
+    } else if (placeholders.has(child)) {
+        child.setSizeRequest(size.width, size.height);
     }
 }
 
@@ -204,7 +222,7 @@ function notifyRegistry<H extends FactoryHost>(state: CellRegistryState<H>): voi
 function createEntry<H extends FactoryHost>(state: CellRegistryState<H>, host: H): CellEntry<H> {
     state.serial += 1;
 
-    return { key: `gtkx-cell-${String(state.serial)}`, host, identity: createItemIdentityStore() };
+    return { key: `gtkx-cell-${String(state.serial)}`, host, identity: createRef<ItemIdentity>() };
 }
 
 function setupHost<H extends FactoryHost>(state: CellRegistryState<H>, host: H): void {
@@ -274,7 +292,15 @@ function createCellRegistry<H extends FactoryHost>(options: CellRegistryOptions<
     return {
         handlers: createHandlers(state),
         setSize: (next) => {
+            if (state.size.width === next.width && state.size.height === next.height) {
+                return;
+            }
+
             state.size = next;
+
+            for (const host of state.entries.keys()) {
+                state.prepare?.(host, next);
+            }
         },
         subscribe: (onChange) => subscribeRegistry(state, onChange),
         getEntries: () => getRegistryEntries(state),
@@ -324,15 +350,25 @@ function itemArgs(
     return args;
 }
 
+function keyForItem(ref: SlotRef, item: ListItem): string {
+    return joinParts([slotPathAt(ref.store, ref.slot), item.id]);
+}
+
 function slotFor(options: ItemSlotOptions): ItemSlot | null {
     const ref = slotRefFor(options.item);
-    const item = ref === null ? undefined : options.collection.itemAt(ref);
+
+    if (ref === null) {
+        return null;
+    }
+
+    const item = options.collection.itemAt(ref);
 
     if (item === undefined) {
         return null;
     }
 
     return {
+        itemKey: keyForItem(ref, item),
         item,
         row: options.row,
         args: itemArgs(item, options.position, options.row, isRowWanted(options, item)),
@@ -341,7 +377,7 @@ function slotFor(options: ItemSlotOptions): ItemSlot | null {
 
 function useItemSlot(
     entry: CellEntry<PositionedHost>,
-    state: CollectionStateStore,
+    state: RefObject<CollectionState>,
     identity: ItemIdentity,
 ): ItemSlot | null {
     const position = useProperty(entry.host, "position");
@@ -352,13 +388,14 @@ function useItemSlot(
         return identity.item === undefined
             ? null
             : {
-                    item: identity.item,
-                    row,
-                    args: itemArgs(identity.item, position, row, identity.isExpanded),
-                };
+                  itemKey: identity.itemKey,
+                  item: identity.item,
+                  row,
+                  args: itemArgs(identity.item, position, row, identity.isExpanded),
+              };
     }
 
-    const { collection, expandedIds } = state.read();
+    const { collection, expandedIds } = state.current;
 
     return slotFor({ item, position, row, collection, expandedIds });
 }
@@ -372,22 +409,24 @@ function itemIdentity(
     const item = ref === null ? undefined : collection.itemAt(ref);
 
     return {
+        itemKey: ref === null || item === undefined ? "" : keyForItem(ref, item),
         item,
         position: entry.host.getPosition(),
-        isExpanded: item === undefined ? false : (expandedIds?.includes(item.id) ?? false),
+        isExpanded: item !== undefined && (expandedIds?.includes(item.id) ?? false),
     };
 }
 
 function isSameItemIdentity(previous: ItemIdentity, next: ItemIdentity): boolean {
     return (
         previous.item === next.item &&
+        previous.itemKey === next.itemKey &&
         previous.position === next.position &&
         previous.isExpanded === next.isExpanded
     );
 }
 
 function isSameItemCell(previous: ItemCellProps, next: ItemCellProps): boolean {
-    const identity = previous.entry.identity.read() ?? previous;
+    const identity = previous.entry.identity.current ?? previous;
 
     return (
         previous.entry === next.entry &&
@@ -399,24 +438,35 @@ function isSameItemCell(previous: ItemCellProps, next: ItemCellProps): boolean {
 }
 
 function isSameItemRow(previous: ItemRowProps, next: ItemRowProps): boolean {
-    const identity = previous.entry.identity.read() ?? previous;
+    const identity = previous.entry.identity.current ?? previous;
 
     return previous.entry === next.entry && previous.rowProps === next.rowProps && isSameItemIdentity(identity, next);
 }
 
-function createItemIdentityStore(): ItemIdentityStore {
-    let current: ItemIdentity | null = null;
+function createNativeItemKeyStore(): NativeItemKeyStore {
+    const keys: WeakMap<GObject.Object, string> = new WeakMap();
+    let serial = 0;
 
     return {
-        read: () => current,
-        write: (identity) => {
-            current = identity;
+        keyFor: (item) => {
+            const current = keys.get(item);
+
+            if (current !== undefined) {
+                return current;
+            }
+
+            serial += 1;
+            const key = `gtkx-native-item-${String(serial)}`;
+            keys.set(item, key);
+
+            return key;
         },
     };
 }
 
 function renderedIdentity(entry: CellEntry<PositionedHost>, slot: ItemSlot | null): ItemIdentity {
     return {
+        itemKey: slot?.itemKey ?? "",
         item: slot?.item,
         position: slot?.args.index ?? entry.host.getPosition(),
         isExpanded: slot?.args.isExpanded ?? false,
@@ -424,35 +474,12 @@ function renderedIdentity(entry: CellEntry<PositionedHost>, slot: ItemSlot | nul
 }
 
 function useRememberIdentity(entry: CellEntry<PositionedHost>, slot: ItemSlot | null): void {
+    const identityRef = entry.identity;
     useLayoutEffect(() => {
-        entry.identity.write(renderedIdentity(entry, slot));
+        identityRef.current = renderedIdentity(entry, slot);
     });
 }
 
-function createCollectionStateStore(initial: CollectionState): CollectionStateStore {
-    let current = initial;
-
-    return {
-        read: () => current,
-        write: (state) => {
-            current = state;
-        },
-    };
-}
-
-function useCollectionState(
-    collection: Collection,
-    expandedIds: string[] | null | undefined,
-): CollectionStateStore {
-    const [state] = useState(() => createCollectionStateStore({ collection, expandedIds }));
-
-    useInsertionEffect(() => {
-        state.write({ collection, expandedIds });
-    }, [state, collection, expandedIds]);
-
-    return state;
-}
-
 function expanderDescriptionFor(
     slot: ItemSlot,
     descriptions: ExpanderDescriptions | null | undefined,
@@ -474,21 +501,19 @@ function wrapExpander(
     const { item, row } = slot;
 
     const expander: ReactNode =
-        row === null
-            ? (
-                    content
-                )
-            : (
-                    <GtkTreeExpander
-                        listRow={row}
-                        hideExpander={item.shouldHideExpander ?? false}
-                        indentForDepth={item.shouldIndentForDepth ?? true}
-                        indentForIcon={item.shouldIndentForIcon ?? true}
-                        accessibleDescription={expanderDescriptionFor(slot, descriptions)}
-                    >
-                        {content}
-                    </GtkTreeExpander>
-                );
+        row === null ? (
+            content
+        ) : (
+            <GtkTreeExpander
+                listRow={row}
+                hideExpander={item.shouldHideExpander ?? false}
+                indentForDepth={item.shouldIndentForDepth ?? true}
+                indentForIcon={item.shouldIndentForIcon ?? true}
+                accessibleDescription={expanderDescriptionFor(slot, descriptions)}
+            >
+                {content}
+            </GtkTreeExpander>
+        );
 
     return expander;
 }
@@ -506,14 +531,13 @@ function itemBody(
     const renderItem = render as ListItemRenderer<unknown>;
     const content = renderItem(slot.args);
 
-    return hasExpander ? wrapExpander(slot, content, descriptions) : content;
+    return <Fragment key={slot.itemKey}>{hasExpander ? wrapExpander(slot, content, descriptions) : content}</Fragment>;
 }
 
 function rowText(value: string | undefined): string | null {
     return value ?? null;
 }
 
-/* eslint-disable-next-line unicorn/consistent-boolean-name -- reads the flag off a row, paired with rowText */
 function rowFlag(value: boolean | undefined): boolean {
     return value ?? true;
 }
@@ -531,21 +555,13 @@ function rowPropsFor(slot: ItemSlot | null, rowProps: ListRowPropsResolver<never
     };
 }
 
-function setRowText(host: Gtk.ColumnViewRow, name: string, value: string | null): void {
-    setProperty(host, name, ROW_TEXT_DESCRIPTOR, value);
-}
-
-function applyRowProps(
-    host: Gtk.ColumnViewRow,
-    props: ResolvedRowProps,
-    previous: ResolvedRowProps | null,
-): void {
+function applyRowProps(host: Gtk.ColumnViewRow, props: ResolvedRowProps, previous: ResolvedRowProps | null): void {
     if (previous?.accessibleLabel !== props.accessibleLabel) {
-        setRowText(host, "accessible-label", props.accessibleLabel);
+        host.accessibleLabel = props.accessibleLabel;
     }
 
     if (previous?.accessibleDescription !== props.accessibleDescription) {
-        setRowText(host, "accessible-description", props.accessibleDescription);
+        host.accessibleDescription = props.accessibleDescription;
     }
 
     if (previous?.isActivatable !== props.isActivatable) {
@@ -592,13 +608,46 @@ function ItemRowImpl({ entry, rowProps, state, ...identity }: ItemRowProps): Rea
 
 function HeaderCellImpl({ entry, render, collection }: HeaderCellProps): ReactNode {
     const item = useProperty(entry.host, "item") ?? null;
-    const ref = slotRefFor(item);
-    const renderHeader = render as ListSectionRenderer<unknown>;
-    const body = ref === null ? null : renderHeader({ section: collection.sectionFor(ref.store.level.path) });
+
+    return createPortal(headerBody(slotRefFor(item), render, collection), entry.host, entry.key);
+}
+
+function NativeItemCell<T extends GObject.Object>({ entry, render, keys, size }: NativeItemCellProps<T>): ReactNode {
+    const position = useProperty(entry.host, "position");
+    const item = useProperty(entry.host, "item") ?? null;
+    let body: ReactNode = null;
+
+    if (item !== null && position !== undefined) {
+        const content = render({ item: item as T, index: position });
+        const child =
+            content == null || typeof content === "boolean" ? (
+                <GtkBox widthRequest={size.width} heightRequest={size.height} />
+            ) : (
+                content
+            );
+        body = <Fragment key={keys.keyFor(item)}>{child}</Fragment>;
+    }
 
     return createPortal(body, entry.host, entry.key);
 }
 
+function headerBody(ref: SlotRef | null, render: ListSectionRenderer<never>, collection: Collection): ReactNode {
+    if (ref === null) {
+        return null;
+    }
+
+    const section = collection.sectionFor(ref.store.level.path);
+
+    if (section === undefined) {
+        return null;
+    }
+
+    const renderHeader = render as ListSectionRenderer<unknown>;
+    const key = joinParts([ref.store.level.path, section.id]);
+
+    return <Fragment key={key}>{renderHeader({ section: section.value })}</Fragment>;
+}
+
 function usePortalEntries<H extends FactoryHost>(registry: CellRegistry<H>): CellEntry<H>[] {
     return useSyncExternalStore(registry.subscribe, registry.getEntries);
 }
@@ -612,7 +661,7 @@ const ItemPortals = ({
     expanderDescriptions,
 }: ItemPortalsProps): ReactNode => {
     const entries = usePortalEntries(registry);
-    const state = useCollectionState(collection, expandedIds);
+    const state = useLatestRef({ collection, expandedIds });
 
     return entries.map((entry) => (
         <ItemCell
@@ -629,7 +678,7 @@ const ItemPortals = ({
 
 const RowPortals = ({ registry, rowProps, collection, expandedIds }: RowPortalsProps): ReactNode => {
     const entries = usePortalEntries(registry);
-    const state = useCollectionState(collection, expandedIds);
+    const state = useLatestRef({ collection, expandedIds });
 
     return entries.map((entry) => (
         <ItemRow
@@ -647,6 +696,15 @@ const HeaderPortals = ({ registry, render, collection }: HeaderPortalsProps): Re
         <HeaderCell key={entry.key} entry={entry} render={render} collection={collection} />
     ));
 
+function NativeItemPortals<T extends GObject.Object>({ registry, render, size }: NativeItemPortalsProps<T>): ReactNode {
+    const entries = usePortalEntries(registry);
+    const [keys] = useState(createNativeItemKeyStore);
+
+    return entries.map((entry) => (
+        <NativeItemCell key={entry.key} entry={entry} render={render} keys={keys} size={size} />
+    ));
+}
+
 const useSectionHeader = (
     render: ListSectionRenderer<never> | null | undefined,
     collection: Collection,
@@ -683,10 +741,4 @@ const useRowProps = (
     };
 };
 
-export {
-    useItemCells,
-    useRowProps,
-    useSectionHeader,
-    ItemPortals,
-    type CellSize,
-};
+export { useItemCells, useRowProps, useSectionHeader, ItemPortals, NativeItemPortals, type CellSize };

package/src/internal/collection-index.ts

@@ -7,20 +7,22 @@ type Level = {
     expandableFlags: boolean[];
 };
 
+type SectionIdentity = Pick<ListSection, "id" | "value">;
+
 type CollectionIndex = {
     isTree: boolean;
     groups: Level[];
     childLevel: (level: Level, slot: number) => Level | undefined;
     levelFor: (levelPath: string) => Level | undefined;
     itemAt: (levelPath: string, slot: number) => ListItem | undefined;
-    sectionFor: (levelPath: string) => unknown;
+    sectionFor: (levelPath: string) => SectionIdentity | undefined;
 };
 
 type IndexState = {
     isTree: boolean;
     groups: Level[];
     levels: Map<string, Level>;
-    sectionValues: Map<string, unknown>;
+    sections: Map<string, SectionIdentity>;
 };
 
 type ParentItem = ListItem & { children: ListItem[] };
@@ -96,7 +98,7 @@ function buildGroups(state: IndexState, source: ListItem[], sections: ListSectio
 
     return sections.map((section, group) => {
         const path = encodePart(String(group));
-        state.sectionValues.set(path, section.value);
+        state.sections.set(path, { id: section.id, value: section.value });
 
         return newLevel(state, path, section.data);
     });
@@ -125,7 +127,7 @@ function createCollectionIndex(
         isTree: isTreeSource(source, sections, isFlat),
         groups: [],
         levels: new Map(),
-        sectionValues: new Map(),
+        sections: new Map(),
     };
 
     state.groups = buildGroups(state, source, sections);
@@ -136,8 +138,8 @@ function createCollectionIndex(
         childLevel: (level, slot) => childLevel(state, level, slot),
         levelFor: (levelPath) => levelFor(state, levelPath),
         itemAt: (levelPath, slot) => levelFor(state, levelPath)?.items[slot],
-        sectionFor: (levelPath) => state.sectionValues.get(levelPath),
+        sectionFor: (levelPath) => state.sections.get(levelPath),
     };
 }
 
-export { createCollectionIndex, type CollectionIndex, type Level };
+export { createCollectionIndex, type CollectionIndex, type Level, type SectionIdentity };