@gtkx/react 0.15.0 → 0.16.0

package/dist/nodes/internal/tree-list-item-renderer.js

@@ -1,122 +1,109 @@
-import { getNativeId } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { createFiberRoot } from "../../fiber-root.js";
 import { reconciler } from "../../reconciler.js";
-import { signalStore } from "./signal-store.js";
-export class TreeListItemRenderer {
-    factory;
-    store;
-    fiberRoots = new Map();
+import { BaseItemRenderer } from "./base-item-renderer.js";
+export class TreeListItemRenderer extends BaseItemRenderer {
     expanders = new Map();
     setupComplete = new Set();
     pendingBinds = new Map();
-    tornDown = new Set();
     renderFn = () => null;
-    estimatedItemHeight;
-    constructor() {
-        this.factory = new Gtk.SignalListItemFactory();
-        this.initialize();
-    }
-    getFactory() {
-        return this.factory;
-    }
+    boundItems = new Map();
     setRenderFn(renderFn) {
         this.renderFn = renderFn;
     }
-    setStore(store) {
-        this.store = store;
-    }
-    setEstimatedItemHeight(height) {
-        this.estimatedItemHeight = height;
+    rebindItem(id) {
+        const binding = this.boundItems.get(id);
+        if (!binding)
+            return;
+        const fiberRoot = this.fiberRoots.get(binding.ptr);
+        if (!fiberRoot)
+            return;
+        const expander = this.expanders.get(binding.ptr);
+        if (!expander)
+            return;
+        this.renderBind(binding.ptr, expander, binding.treeListRow, id, fiberRoot);
     }
-    getStore() {
-        if (!this.store) {
-            throw new Error("Expected tree store to be set on TreeListItemRenderer");
-        }
-        return this.store;
+    getStoreTypeName() {
+        return "tree store";
     }
     dispose() {
-        signalStore.clear(this);
-        this.fiberRoots.clear();
+        super.dispose();
         this.expanders.clear();
         this.setupComplete.clear();
         this.pendingBinds.clear();
-        this.tornDown.clear();
+        this.boundItems.clear();
     }
-    initialize() {
-        signalStore.set(this, this.factory, "setup", (_self, listItem) => {
-            const ptr = getNativeId(listItem.handle);
-            const expander = new Gtk.TreeExpander();
-            const box = new Gtk.Box(Gtk.Orientation.VERTICAL);
-            if (this.estimatedItemHeight !== undefined) {
-                box.setSizeRequest(-1, this.estimatedItemHeight);
-            }
-            expander.setChild(box);
-            listItem.setChild(expander);
-            const fiberRoot = createFiberRoot(box);
-            this.fiberRoots.set(ptr, fiberRoot);
-            this.expanders.set(ptr, expander);
-            const element = this.renderFn?.(null, null);
-            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {
-                if (this.tornDown.has(ptr))
-                    return;
-                this.setupComplete.add(ptr);
-                this.processPendingBind(ptr);
-            });
-        });
-        signalStore.set(this, this.factory, "bind", (_self, listItem) => {
-            const ptr = getNativeId(listItem.handle);
-            const fiberRoot = this.fiberRoots.get(ptr);
-            const expander = this.expanders.get(ptr);
-            if (!fiberRoot || !expander)
-                return;
+    renderItem(_ptr) {
+        return this.renderFn?.(null, null);
+    }
+    getItemFromListItem(listItem) {
+        const treeListRow = listItem.getItem();
+        if (!(treeListRow instanceof Gtk.TreeListRow))
+            return null;
+        const stringObject = treeListRow.getItem();
+        if (!(stringObject instanceof Gtk.StringObject))
+            return null;
+        return this.getStore().getItem(stringObject.getString());
+    }
+    onSetup(listItem, ptr) {
+        const expander = new Gtk.TreeExpander();
+        const box = this.createBox();
+        expander.setChild(box);
+        listItem.setChild(expander);
+        this.expanders.set(ptr, expander);
+        return box;
+    }
+    onSetupComplete(ptr) {
+        this.setupComplete.add(ptr);
+        this.processPendingBind(ptr);
+    }
+    onBind(listItem, ptr, fiberRoot) {
+        const expander = this.expanders.get(ptr);
+        if (!expander)
+            return;
+        const treeListRow = listItem.getItem();
+        if (!(treeListRow instanceof Gtk.TreeListRow))
+            return;
+        expander.setListRow(treeListRow);
+        const stringObject = treeListRow.getItem();
+        if (!(stringObject instanceof Gtk.StringObject))
+            return;
+        const id = stringObject.getString();
+        this.boundItems.set(id, { ptr, treeListRow });
+        if (!this.setupComplete.has(ptr)) {
+            this.pendingBinds.set(ptr, { treeListRow, expander, id });
+            return;
+        }
+        this.renderBind(ptr, expander, treeListRow, id, fiberRoot);
+    }
+    onUnbind(listItem) {
+        const expander = listItem.getChild();
+        if (expander instanceof Gtk.TreeExpander) {
+            expander.setListRow(null);
             const treeListRow = listItem.getItem();
-            if (!(treeListRow instanceof Gtk.TreeListRow))
-                return;
-            expander.setListRow(treeListRow);
-            const stringObject = treeListRow.getItem();
-            if (!(stringObject instanceof Gtk.StringObject))
-                return;
-            const id = stringObject.getString();
-            if (!this.setupComplete.has(ptr)) {
-                this.pendingBinds.set(ptr, { treeListRow, expander, id });
-                return;
+            if (treeListRow instanceof Gtk.TreeListRow) {
+                const stringObject = treeListRow.getItem();
+                if (stringObject instanceof Gtk.StringObject) {
+                    this.boundItems.delete(stringObject.getString());
+                }
             }
-            this.renderBind(ptr, expander, treeListRow, id);
-        });
-        signalStore.set(this, this.factory, "unbind", (_self, listItem) => {
-            const expander = listItem.getChild();
-            if (expander instanceof Gtk.TreeExpander) {
-                expander.setListRow(null);
-            }
-        });
-        signalStore.set(this, this.factory, "teardown", (_self, listItem) => {
-            const ptr = getNativeId(listItem.handle);
-            const fiberRoot = this.fiberRoots.get(ptr);
-            if (fiberRoot) {
-                this.tornDown.add(ptr);
-                reconciler.getInstance().updateContainer(null, fiberRoot, null, () => { });
-                queueMicrotask(() => {
-                    this.fiberRoots.delete(ptr);
-                    this.expanders.delete(ptr);
-                    this.setupComplete.delete(ptr);
-                    this.pendingBinds.delete(ptr);
-                    this.tornDown.delete(ptr);
-                });
-            }
-        });
+        }
+    }
+    onTeardown(_listItem, ptr) {
+        this.expanders.delete(ptr);
+        this.setupComplete.delete(ptr);
+        this.pendingBinds.delete(ptr);
     }
     processPendingBind(ptr) {
         const pending = this.pendingBinds.get(ptr);
         if (!pending)
             return;
         this.pendingBinds.delete(ptr);
-        this.renderBind(ptr, pending.expander, pending.treeListRow, pending.id);
-    }
-    renderBind(ptr, expander, treeListRow, id) {
         const fiberRoot = this.fiberRoots.get(ptr);
-        if (!fiberRoot)
-            return;
+        if (fiberRoot) {
+            this.renderBind(ptr, pending.expander, pending.treeListRow, pending.id, fiberRoot);
+        }
+    }
+    renderBind(ptr, expander, treeListRow, id, fiberRoot) {
         const itemData = this.getStore().getItem(id);
         if (itemData) {
             if (itemData.indentForDepth !== undefined) {
@@ -133,12 +120,14 @@ export class TreeListItemRenderer {
         reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {
             if (this.tornDown.has(ptr))
                 return;
+            if (this.estimatedItemHeight !== null)
+                return;
             const currentExpander = this.expanders.get(ptr);
             if (!currentExpander)
                 return;
             const box = currentExpander.getChild();
-            if (box instanceof Gtk.Box) {
-                box.setSizeRequest(-1, -1);
+            if (box) {
+                this.clearBoxSizeRequest(box);
             }
         });
     }

package/dist/nodes/internal/tree-store.d.ts

@@ -1,28 +1,29 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-export interface TreeItemData<T = unknown> {
+import { BaseStore } from "./base-store.js";
+export type TreeItemUpdatedCallback = (id: string) => void;
+export type TreeItemData<T = unknown> = {
     value: T;
     indentForDepth?: boolean;
     indentForIcon?: boolean;
     hideExpander?: boolean;
-}
-export declare class TreeStore {
-    private items;
+};
+export declare class TreeStore extends BaseStore<TreeItemData> {
     private rootIds;
     private newRootIds;
     private children;
     private newChildren;
     private rootModel;
     private childModels;
-    private shouldSync;
+    private onItemUpdated;
     constructor();
+    setOnItemUpdated(callback: TreeItemUpdatedCallback | null): void;
+    updateItem(id: string, item: TreeItemData): void;
     addItem(id: string, data: TreeItemData, parentId?: string): void;
     removeItem(id: string, parentId?: string): void;
     insertItemBefore(id: string, beforeId: string, data: TreeItemData, parentId?: string): void;
-    updateItem(id: string, data: TreeItemData): void;
-    getItem(id: string): TreeItemData | null;
+    getItem(id: string): TreeItemData | undefined;
     getRootModel(): Gtk.StringList;
     getChildrenModel(parentId: string): Gtk.StringList | null;
     hasChildren(parentId: string): boolean;
-    private scheduleSync;
-    private sync;
+    protected sync(): void;
 }

package/dist/nodes/internal/tree-store.js

@@ -1,18 +1,29 @@
-import { batch } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { CommitPriority, scheduleAfterCommit } from "../../scheduler.js";
-export class TreeStore {
-    items = new Map();
+import { BaseStore } from "./base-store.js";
+export class TreeStore extends BaseStore {
     rootIds = [];
     newRootIds = [];
     children = new Map();
     newChildren = new Map();
     rootModel;
     childModels = new Map();
-    shouldSync = false;
+    onItemUpdated = null;
     constructor() {
+        super();
         this.rootModel = new Gtk.StringList();
     }
+    setOnItemUpdated(callback) {
+        this.onItemUpdated = callback;
+    }
+    updateItem(id, item) {
+        if (this.items.has(id)) {
+            this.items.set(id, item);
+            this.onItemUpdated?.(id);
+        }
+        else {
+            this.addItem(id, item);
+        }
+    }
     addItem(id, data, parentId) {
         this.items.set(id, data);
         if (parentId === undefined) {
@@ -94,13 +105,8 @@ export class TreeStore {
         }
         this.scheduleSync();
     }
-    updateItem(id, data) {
-        if (this.items.has(id)) {
-            this.items.set(id, data);
-        }
-    }
     getItem(id) {
-        return this.items.get(id) ?? null;
+        return this.items.get(id);
     }
     getRootModel() {
         return this.rootModel;
@@ -121,32 +127,22 @@ export class TreeStore {
         const childIds = this.children.get(parentId);
         return childIds !== undefined && childIds.length > 0;
     }
-    scheduleSync() {
-        if (this.shouldSync) {
-            return;
-        }
-        this.shouldSync = true;
-        scheduleAfterCommit(() => this.sync(), CommitPriority.LOW);
-    }
     sync() {
-        this.shouldSync = false;
-        batch(() => {
-            const oldRootLength = this.rootIds.length;
-            this.rootModel.splice(0, oldRootLength, this.newRootIds.length > 0 ? this.newRootIds : undefined);
-            this.rootIds = [...this.newRootIds];
-            for (const [parentId, newChildIds] of this.newChildren) {
-                const model = this.childModels.get(parentId);
-                if (model) {
-                    const oldLength = model.getNItems();
-                    model.splice(0, oldLength, newChildIds.length > 0 ? newChildIds : undefined);
-                }
+        const oldRootLength = this.rootIds.length;
+        this.rootModel.splice(0, oldRootLength, this.newRootIds.length > 0 ? this.newRootIds : undefined);
+        this.rootIds = [...this.newRootIds];
+        for (const [parentId, newChildIds] of this.newChildren) {
+            const model = this.childModels.get(parentId);
+            if (model) {
+                const oldLength = model.getNItems();
+                model.splice(0, oldLength, newChildIds.length > 0 ? newChildIds : undefined);
             }
-            for (const [parentId] of this.children) {
-                if (!this.newChildren.has(parentId)) {
-                    this.childModels.delete(parentId);
-                }
+        }
+        for (const [parentId] of this.children) {
+            if (!this.newChildren.has(parentId)) {
+                this.childModels.delete(parentId);
             }
-            this.children = new Map(this.newChildren);
-        });
+        }
+        this.children = new Map(this.newChildren);
     }
 }

package/dist/nodes/internal/utils.d.ts

@@ -1,9 +1,12 @@
 import type { Container, ContainerClass, Props } from "../../types.js";
 type AnyClass = new (...args: any[]) => any;
 export declare const matchesAnyClass: (classes: readonly AnyClass[], containerOrClass?: Container | ContainerClass | null) => boolean;
-export declare const isContainerType: (cls: AnyClass, containerOrClass?: Container | ContainerClass | null) => boolean;
 export declare const matchesInterface: (methods: readonly string[], containerOrClass?: Container | ContainerClass | null) => boolean;
-export declare const filterProps: (props: Props, excludeKeys: string[]) => Props;
-export declare const resolvePropMeta: (container: Container, key: string) => [string | null, string] | null;
-export declare const resolveSignal: (container: Container, signalName: string) => boolean;
+export declare const filterProps: (props: Props, excludeKeys: readonly string[]) => Props;
+export declare const resolvePropMeta: (instance: Container, key: string) => [string | null, string] | null;
+export declare const resolveSignal: (instance: Container, signalName: string) => boolean;
+export declare const propNameToSignalName: (propName: string) => string;
+export declare const hasChanged: <T>(oldProps: T | null, newProps: T, key: keyof T) => boolean;
+export declare const shallowArrayEqual: <T extends Record<string, unknown>>(a: T[], b: T[]) => boolean;
+export declare const primitiveArrayEqual: <T extends string | number | boolean>(a: T[] | null | undefined, b: T[] | null | undefined) => boolean;
 export {};

package/dist/nodes/internal/utils.js

@@ -7,7 +7,6 @@ export const matchesAnyClass = (classes, containerOrClass) => {
         containerOrClass === cls ||
         Object.prototype.isPrototypeOf.call(cls, containerOrClass));
 };
-export const isContainerType = (cls, containerOrClass) => matchesAnyClass([cls], containerOrClass);
 export const matchesInterface = (methods, containerOrClass) => {
     if (!containerOrClass) {
         return false;
@@ -24,9 +23,9 @@ export const filterProps = (props, excludeKeys) => {
     }
     return result;
 };
-const walkPrototypeChain = (container, lookup) => {
+const walkPrototypeChain = (instance, lookup) => {
     // biome-ignore lint/complexity/noBannedTypes: Walking prototype chain requires Function type
-    let current = container.constructor;
+    let current = instance.constructor;
     while (current) {
         const typeName = current.glibTypeName;
         if (typeName) {
@@ -43,5 +42,51 @@ const walkPrototypeChain = (container, lookup) => {
     }
     return null;
 };
-export const resolvePropMeta = (container, key) => walkPrototypeChain(container, (typeName) => PROPS[typeName]?.[key] ?? null);
-export const resolveSignal = (container, signalName) => walkPrototypeChain(container, (typeName) => (SIGNALS[typeName]?.has(signalName) ? true : null)) ?? false;
+export const resolvePropMeta = (instance, key) => walkPrototypeChain(instance, (typeName) => PROPS[typeName]?.[key] ?? null);
+export const resolveSignal = (instance, signalName) => {
+    if (signalName === "notify")
+        return true;
+    return walkPrototypeChain(instance, (typeName) => (SIGNALS[typeName]?.has(signalName) ? true : null)) ?? false;
+};
+export const propNameToSignalName = (propName) => {
+    if (!propName.startsWith("on"))
+        return propName;
+    return propName
+        .slice(2)
+        .replace(/([A-Z])/g, "-$1")
+        .toLowerCase()
+        .replace(/^-/, "");
+};
+export const hasChanged = (oldProps, newProps, key) => !oldProps || oldProps[key] !== newProps[key];
+export const shallowArrayEqual = (a, b) => {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        const itemA = a[i];
+        const itemB = b[i];
+        if (!itemA || !itemB)
+            return false;
+        const keysA = Object.keys(itemA);
+        const keysB = Object.keys(itemB);
+        if (keysA.length !== keysB.length)
+            return false;
+        for (const key of keysA) {
+            if (itemA[key] !== itemB[key])
+                return false;
+        }
+    }
+    return true;
+};
+export const primitiveArrayEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+};

package/dist/nodes/level-bar.js

@@ -1,69 +1,34 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import { registerNodeClass } from "../registry.js";
-import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
-import { isContainerType } from "./internal/utils.js";
-import { LevelBarOffsetNode } from "./level-bar-offset.js";
+import { filterProps, matchesAnyClass, shallowArrayEqual } from "./internal/utils.js";
 import { WidgetNode } from "./widget.js";
+const OWN_PROPS = ["offsets"];
 class LevelBarNode extends WidgetNode {
     static priority = 1;
-    offsetChildren = [];
     appliedOffsetIds = new Set();
     static matches(_type, containerOrClass) {
-        return isContainerType(Gtk.LevelBar, containerOrClass);
+        return matchesAnyClass([Gtk.LevelBar], containerOrClass);
     }
-    appendChild(child) {
-        if (child instanceof LevelBarOffsetNode) {
-            child.setLevelBar(this.container, () => this.scheduleRebuildAllOffsets());
-            this.offsetChildren.push(child);
-            scheduleAfterCommit(() => {
-                const id = child.addOffset();
-                if (id) {
-                    this.appliedOffsetIds.add(id);
-                }
-            });
-            return;
-        }
-        super.appendChild(child);
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
     }
-    insertBefore(child, before) {
-        if (child instanceof LevelBarOffsetNode) {
-            child.setLevelBar(this.container, () => this.scheduleRebuildAllOffsets());
-            const beforeIndex = this.offsetChildren.indexOf(before);
-            if (beforeIndex >= 0) {
-                this.offsetChildren.splice(beforeIndex, 0, child);
-            }
-            else {
-                this.offsetChildren.push(child);
-            }
-            this.scheduleRebuildAllOffsets();
-            return;
-        }
-        super.insertBefore(child, before);
+    applyOwnProps(oldProps, newProps) {
+        this.applyOffsets(oldProps, newProps);
     }
-    removeChild(child) {
-        if (child instanceof LevelBarOffsetNode) {
-            const index = this.offsetChildren.indexOf(child);
-            if (index >= 0) {
-                this.offsetChildren.splice(index, 1);
-            }
-            this.scheduleRebuildAllOffsets(CommitPriority.HIGH);
+    applyOffsets(oldProps, newProps) {
+        const newOffsets = newProps.offsets ?? [];
+        if (shallowArrayEqual(oldProps?.offsets ?? [], newOffsets)) {
             return;
         }
-        super.removeChild(child);
-    }
-    scheduleRebuildAllOffsets(priority = CommitPriority.NORMAL) {
-        scheduleAfterCommit(() => {
-            for (const id of this.appliedOffsetIds) {
-                this.container.removeOffsetValue(id);
-            }
-            this.appliedOffsetIds.clear();
-            for (const offset of this.offsetChildren) {
-                const id = offset.addOffset();
-                if (id) {
-                    this.appliedOffsetIds.add(id);
-                }
-            }
-        }, priority);
+        for (const id of this.appliedOffsetIds) {
+            this.container.removeOffsetValue(id);
+        }
+        this.appliedOffsetIds.clear();
+        for (const offset of newOffsets) {
+            this.container.addOffsetValue(offset.id, offset.value);
+            this.appliedOffsetIds.add(offset.id);
+        }
     }
 }
 registerNodeClass(LevelBarNode);

package/dist/nodes/list-item.d.ts

@@ -2,11 +2,14 @@ import type { ListItemProps } from "../jsx.js";
 import type { ListStore } from "./internal/list-store.js";
 import { VirtualNode } from "./virtual.js";
 type Props = Partial<ListItemProps>;
-export declare class ListItemNode<T extends Omit<ListStore, "items" | "model"> = ListStore, P extends Props = Props> extends VirtualNode<P> {
+export declare class ListItemNode<T extends {
+    updateItem(id: string, value: unknown): void;
+} = ListStore, P extends Props = Props> extends VirtualNode<P> {
     static priority: number;
-    private store?;
+    private store;
     static matches(type: string): boolean;
-    setStore(store?: T | null): void;
+    setStore(store: T | null): void;
     updateProps(oldProps: P | null, newProps: P): void;
+    protected applyOwnProps(oldProps: P | null, newProps: P): void;
 }
 export {};

package/dist/nodes/list-item.js

@@ -1,8 +1,9 @@
 import { registerNodeClass } from "../registry.js";
+import { hasChanged } from "./internal/utils.js";
 import { VirtualNode } from "./virtual.js";
 export class ListItemNode extends VirtualNode {
     static priority = 1;
-    store;
+    store = null;
     static matches(type) {
         return type === "ListItem";
     }
@@ -11,10 +12,12 @@ export class ListItemNode extends VirtualNode {
     }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
-        if (!this.store) {
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        if (!this.store)
             return;
-        }
-        if (!oldProps || oldProps.id !== newProps.id || oldProps.value !== newProps.value) {
+        if (hasChanged(oldProps, newProps, "id") || hasChanged(oldProps, newProps, "value")) {
             if (newProps.id !== undefined) {
                 this.store.updateItem(newProps.id, newProps.value);
             }

package/dist/nodes/list-view.js

@@ -1,11 +1,11 @@
 import { LIST_WIDGET_CLASSES } from "../generated/internal.js";
 import { registerNodeClass } from "../registry.js";
 import { ListItemRenderer } from "./internal/list-item-renderer.js";
-import { filterProps, matchesAnyClass } from "./internal/utils.js";
+import { filterProps, hasChanged, matchesAnyClass } from "./internal/utils.js";
 import { ListItemNode } from "./list-item.js";
-import { List } from "./models/list.js";
+import { ListModel } from "./models/list.js";
 import { WidgetNode } from "./widget.js";
-const PROP_NAMES = ["renderItem", "estimatedItemHeight"];
+const OWN_PROPS = ["renderItem", "estimatedItemHeight"];
 class ListViewNode extends WidgetNode {
     static priority = 1;
     itemRenderer;
@@ -15,13 +15,14 @@ class ListViewNode extends WidgetNode {
     }
     constructor(typeName, props, container, rootContainer) {
         super(typeName, props, container, rootContainer);
-        this.list = new List({
+        this.list = new ListModel({ owner: this, signalStore: this.signalStore }, {
             selectionMode: props.selectionMode,
             selected: props.selected,
             onSelectionChanged: props.onSelectionChanged,
         });
-        this.itemRenderer = new ListItemRenderer();
+        this.itemRenderer = new ListItemRenderer(this.signalStore);
         this.itemRenderer.setStore(this.list.getStore());
+        this.list.getStore().setOnItemUpdated((id) => this.itemRenderer.rebindItem(id));
         this.container.setFactory(this.itemRenderer.getFactory());
     }
     mount() {
@@ -51,19 +52,22 @@ class ListViewNode extends WidgetNode {
         this.list.removeChild(child);
     }
     updateProps(oldProps, newProps) {
-        if (!oldProps || oldProps.renderItem !== newProps.renderItem) {
-            this.itemRenderer.setRenderFn(newProps.renderItem);
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        if (hasChanged(oldProps, newProps, "renderItem")) {
+            this.itemRenderer.setRenderFn(newProps.renderItem ?? null);
         }
-        if (!oldProps || oldProps.estimatedItemHeight !== newProps.estimatedItemHeight) {
-            this.itemRenderer.setEstimatedItemHeight(newProps.estimatedItemHeight);
+        if (hasChanged(oldProps, newProps, "estimatedItemHeight")) {
+            this.itemRenderer.setEstimatedItemHeight(newProps.estimatedItemHeight ?? null);
         }
         const previousModel = this.list.getSelectionModel();
-        this.list.updateProps(filterProps(oldProps ?? {}, PROP_NAMES), filterProps(newProps, PROP_NAMES));
+        this.list.updateProps(oldProps, newProps);
         const currentModel = this.list.getSelectionModel();
         if (previousModel !== currentModel) {
             this.container.setModel(currentModel);
         }
-        super.updateProps(filterProps(oldProps ?? {}, PROP_NAMES), filterProps(newProps, PROP_NAMES));
     }
 }
 registerNodeClass(ListViewNode);

package/dist/nodes/menu.d.ts

@@ -1,8 +1,8 @@
 import type { Container } from "../types.js";
-import { Menu, type MenuProps } from "./models/menu.js";
-export declare class MenuNode extends Menu {
+import { MenuModel, type MenuProps } from "./models/menu.js";
+export declare class MenuNode extends MenuModel {
     static priority: number;
     static matches(type: string): boolean;
     private static getType;
-    constructor(typeName: string, props: MenuProps, _container: undefined, rootContainer?: Container);
+    constructor(typeName: string, props: MenuProps, _container: undefined, rootContainer: Container);
 }