@gtkx/components 2.0.0-beta.1 → 2.0.0-beta.11

package/src/internal/cells.tsx

@@ -1,10 +1,9 @@
 import type * as GObject from "@gtkx/gi/gobject";
 import type { ReactElement, ReactNode } 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 { setObjectProperty, t } from "@gtkx/runtime";
-import { memo, useLayoutEffect, useState, useSyncExternalStore } from "react";
+import { Fragment, memo, useInsertionEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import type {
     ExpanderDescriptions,
     ListItem,
@@ -15,7 +14,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,6 +34,7 @@ type CellHost = FactoryHost & {
 type CellEntry<H extends FactoryHost> = {
     key: string;
     host: H;
+    identity: ItemIdentityStore;
 };
 
 type FactoryHandlers = {
@@ -83,19 +84,41 @@ type ItemSlotOptions = {
 type PositionedHost = Gtk.ListItem | Gtk.ColumnViewRow;
 
 type ItemSlot = {
+    itemKey: string;
     item: ListItem;
     row: Gtk.TreeListRow | null;
     args: ListItemRenderArgs<unknown>;
 };
 
+type CollectionState = {
+    collection: Collection;
+    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>;
-    collection: Collection;
+    state: CollectionStateStore;
     hasExpander: boolean;
-    expandedIds: string[] | null | undefined;
     expanderDescriptions: ExpanderDescriptions | null | undefined;
-};
+} & ItemIdentity;
 
 type ItemPortalsProps = {
     registry: CellRegistry<Gtk.ListItem>;
@@ -109,9 +132,8 @@ type ItemPortalsProps = {
 type ItemRowProps = {
     entry: CellEntry<Gtk.ColumnViewRow>;
     rowProps: ListRowPropsResolver<never>;
-    collection: Collection;
-    expandedIds: string[] | null | undefined;
-};
+    state: CollectionStateStore;
+} & ItemIdentity;
 
 type RowPortalsProps = {
     registry: CellRegistry<Gtk.ColumnViewRow>;
@@ -132,6 +154,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;
@@ -142,18 +181,22 @@ type RowSlot = {
     portals: ReactNode;
 };
 
-const ItemCell = memo(ItemCellImpl);
-const ItemRow = memo(ItemRowImpl);
+const ItemCell = memo(ItemCellImpl, isSameItemCell);
+const ItemRow = memo(ItemRowImpl, isSameItemRow);
 const HeaderCell = memo(HeaderCellImpl);
 const CELL_OPTIONS: CellRegistryOptions<Gtk.ListItem> = { isHost: isListItem, prepare: prepareCell };
 const HEADER_OPTIONS: CellRegistryOptions<Gtk.ListHeader> = { isHost: isListHeader, prepare: prepareCell };
 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 =>
-    new Gtk.Box({ widthRequest: size.width, heightRequest: size.height });
+const placeholder = (size: CellSize): Gtk.Widget => {
+    const widget = new Gtk.Box({ widthRequest: size.width, heightRequest: size.height });
+    placeholders.add(widget);
+
+    return widget;
+};
 
 function isListItem(value: GObject.Object): value is Gtk.ListItem {
     return value instanceof Gtk.ListItem;
@@ -168,8 +211,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);
     }
 }
 
@@ -184,7 +231,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 };
+    return { key: `gtkx-cell-${String(state.serial)}`, host, identity: createItemIdentityStore() };
 }
 
 function setupHost<H extends FactoryHost>(state: CellRegistryState<H>, host: H): void {
@@ -254,7 +301,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),
@@ -283,9 +338,13 @@ function isRowWanted(options: ItemSlotOptions, item: ListItem): boolean {
     return options.expandedIds?.includes(item.id) ?? false;
 }
 
-function itemArgs(item: ListItem, options: ItemSlotOptions): ListItemRenderArgs<unknown> {
-    const args: ListItemRenderArgs<unknown> = { item: item.value, index: options.position ?? 0 };
-    const row = options.row;
+function itemArgs(
+    item: ListItem,
+    position: number | undefined,
+    row: Gtk.TreeListRow | null,
+    isExpanded: boolean,
+): ListItemRenderArgs<unknown> {
+    const args: ListItemRenderArgs<unknown> = { item: item.value, index: position ?? 0 };
 
     if (row === null) {
         return args;
@@ -294,35 +353,176 @@ function itemArgs(item: ListItem, options: ItemSlotOptions): ListItemRenderArgs<
     args.depth = row.getDepth();
 
     if (row.isExpandable()) {
-        args.isExpanded = isRowWanted(options, item);
+        args.isExpanded = isExpanded;
     }
 
     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 { item, row: options.row, args: itemArgs(item, options) };
+    return {
+        itemKey: keyForItem(ref, item),
+        item,
+        row: options.row,
+        args: itemArgs(item, options.position, options.row, isRowWanted(options, item)),
+    };
 }
 
 function useItemSlot(
     entry: CellEntry<PositionedHost>,
-    collection: Collection,
-    expandedIds: string[] | null | undefined,
+    state: CollectionStateStore,
+    identity: ItemIdentity,
 ): ItemSlot | null {
     const position = useProperty(entry.host, "position");
     const item = useProperty(entry.host, "item") ?? null;
     const row = item instanceof Gtk.TreeListRow ? item : null;
 
+    if (position === identity.position) {
+        return identity.item === undefined
+            ? null
+            : {
+                    itemKey: identity.itemKey,
+                    item: identity.item,
+                    row,
+                    args: itemArgs(identity.item, position, row, identity.isExpanded),
+                };
+    }
+
+    const { collection, expandedIds } = state.read();
+
     return slotFor({ item, position, row, collection, expandedIds });
 }
 
+function itemIdentity(
+    entry: CellEntry<PositionedHost>,
+    collection: Collection,
+    expandedIds: string[] | null | undefined,
+): ItemIdentity {
+    const ref = slotRefFor(entry.host.getItem());
+    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 && (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;
+
+    return (
+        previous.entry === next.entry &&
+        previous.render === next.render &&
+        previous.hasExpander === next.hasExpander &&
+        previous.expanderDescriptions === next.expanderDescriptions &&
+        isSameItemIdentity(identity, next)
+    );
+}
+
+function isSameItemRow(previous: ItemRowProps, next: ItemRowProps): boolean {
+    const identity = previous.entry.identity.read() ?? previous;
+
+    return previous.entry === next.entry && previous.rowProps === next.rowProps && isSameItemIdentity(identity, next);
+}
+
+function createItemIdentityStore(): ItemIdentityStore {
+    let current: ItemIdentity | null = null;
+
+    return {
+        read: () => current,
+        write: (identity) => {
+            current = identity;
+        },
+    };
+}
+
+function createNativeItemKeyStore(): NativeItemKeyStore {
+    const keys: WeakMap<GObject.Object, string> = new WeakMap();
+    let serial = 0;
+
+    return {
+        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,
+    };
+}
+
+function useRememberIdentity(entry: CellEntry<PositionedHost>, slot: ItemSlot | null): void {
+    useLayoutEffect(() => {
+        entry.identity.write(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,
@@ -376,7 +576,9 @@ 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 {
@@ -401,52 +603,109 @@ function rowPropsFor(slot: ItemSlot | null, rowProps: ListRowPropsResolver<never
     };
 }
 
-function setRowText(host: Gtk.ColumnViewRow, name: string, value: string | null): void {
-    setObjectProperty(host, name, ROW_TEXT_DESCRIPTOR, value);
-}
+function applyRowProps(
+    host: Gtk.ColumnViewRow,
+    props: ResolvedRowProps,
+    previous: ResolvedRowProps | null,
+): void {
+    if (previous?.accessibleLabel !== props.accessibleLabel) {
+        host.accessibleLabel = props.accessibleLabel;
+    }
 
-function applyRowProps(host: Gtk.ColumnViewRow, props: ResolvedRowProps): void {
-    setRowText(host, "accessible-label", props.accessibleLabel);
-    setRowText(host, "accessible-description", props.accessibleDescription);
-    host.setActivatable(props.isActivatable);
-    host.setFocusable(props.isFocusable);
-    host.setSelectable(props.isSelectable);
+    if (previous?.accessibleDescription !== props.accessibleDescription) {
+        host.accessibleDescription = props.accessibleDescription;
+    }
+
+    if (previous?.isActivatable !== props.isActivatable) {
+        host.setActivatable(props.isActivatable);
+    }
+
+    if (previous?.isFocusable !== props.isFocusable) {
+        host.setFocusable(props.isFocusable);
+    }
+
+    if (previous?.isSelectable !== props.isSelectable) {
+        host.setSelectable(props.isSelectable);
+    }
 }
 
 function ItemCellImpl({
     entry,
     render,
-    collection,
+    state,
     hasExpander,
-    expandedIds,
     expanderDescriptions,
+    ...identity
 }: ItemCellProps): ReactNode {
-    const slot = useItemSlot(entry, collection, expandedIds);
+    const slot = useItemSlot(entry, state, identity);
+    useRememberIdentity(entry, slot);
     const body = itemBody(slot, render, hasExpander, expanderDescriptions);
 
     return createPortal(body, entry.host, entry.key);
 }
 
-function ItemRowImpl({ entry, rowProps, collection, expandedIds }: ItemRowProps): ReactNode {
-    const slot = useItemSlot(entry, collection, expandedIds);
+function ItemRowImpl({ entry, rowProps, state, ...identity }: ItemRowProps): ReactNode {
+    const slot = useItemSlot(entry, state, identity);
+    useRememberIdentity(entry, slot);
     const props = rowPropsFor(slot, rowProps);
+    const previous = useRef<ResolvedRowProps | null>(null);
 
     useLayoutEffect(() => {
-        applyRowProps(entry.host, props);
-    });
+        applyRowProps(entry.host, props, previous.current);
+        previous.current = props;
+    }, [entry.host, props]);
 
     return null;
 }
 
 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);
 }
@@ -458,35 +717,52 @@ const ItemPortals = ({
     hasExpander,
     expandedIds,
     expanderDescriptions,
-}: ItemPortalsProps): ReactNode =>
-    usePortalEntries(registry).map((entry) => (
+}: ItemPortalsProps): ReactNode => {
+    const entries = usePortalEntries(registry);
+    const state = useCollectionState(collection, expandedIds);
+
+    return entries.map((entry) => (
         <ItemCell
             key={entry.key}
             entry={entry}
             render={render}
-            collection={collection}
+            state={state}
             hasExpander={hasExpander ?? true}
-            expandedIds={expandedIds}
             expanderDescriptions={expanderDescriptions}
+            {...itemIdentity(entry, collection, expandedIds)}
         />
     ));
+};
 
-const RowPortals = ({ registry, rowProps, collection, expandedIds }: RowPortalsProps): ReactNode =>
-    usePortalEntries(registry).map((entry) => (
+const RowPortals = ({ registry, rowProps, collection, expandedIds }: RowPortalsProps): ReactNode => {
+    const entries = usePortalEntries(registry);
+    const state = useCollectionState(collection, expandedIds);
+
+    return entries.map((entry) => (
         <ItemRow
             key={entry.key}
             entry={entry}
             rowProps={rowProps}
-            collection={collection}
-            expandedIds={expandedIds}
+            state={state}
+            {...itemIdentity(entry, collection, expandedIds)}
         />
     ));
+};
 
 const HeaderPortals = ({ registry, render, collection }: HeaderPortalsProps): ReactNode =>
     usePortalEntries(registry).map((entry) => (
         <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,
@@ -528,5 +804,6 @@ export {
     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 };