@headless-tree/core 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @headless-tree/core
 
+## 0.0.5
+
+### Patch Changes
+
+- 751682a: dev release
+
 ## 0.0.4
 
 ### Patch Changes

package/lib/cjs/core/create-tree.js

@@ -11,10 +11,10 @@ const buildItemInstance = (features, tree, itemId) => {
     return itemInstance;
 };
 const createTree = (initialConfig) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const treeInstance = {};
     const additionalFeatures = [feature_1.treeFeature, ...((_a = initialConfig.features) !== null && _a !== void 0 ? _a : [])];
-    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_b = initialConfig.state) !== null && _b !== void 0 ? _b : {});
+    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_c = (_b = initialConfig.initialState) !== null && _b !== void 0 ? _b : initialConfig.state) !== null && _c !== void 0 ? _c : {});
     let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
     let treeElement;
     const treeDataRef = { current: {} };
@@ -107,8 +107,8 @@ const createTree = (initialConfig) => {
     // todo sort features
     const features = [mainFeature, ...additionalFeatures];
     for (const feature of features) {
-        Object.assign(treeInstance, (_d = (_c = feature.createTreeInstance) === null || _c === void 0 ? void 0 : _c.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _d !== void 0 ? _d : {});
-        Object.assign(hotkeyPresets, (_e = feature.hotkeys) !== null && _e !== void 0 ? _e : {});
+        Object.assign(treeInstance, (_e = (_d = feature.createTreeInstance) === null || _d === void 0 ? void 0 : _d.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _e !== void 0 ? _e : {});
+        Object.assign(hotkeyPresets, (_f = feature.hotkeys) !== null && _f !== void 0 ? _f : {});
     }
     rebuildItemMeta(mainFeature);
     return treeInstance;

package/lib/cjs/features/drag-and-drop/feature.js

@@ -13,7 +13,7 @@ exports.dragAndDropFeature = {
         } })),
     createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { getProps: () => {
             var _a, _b, _c;
-            return (Object.assign(Object.assign({}, prev.getProps()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: (e) => {
+            return (Object.assign(Object.assign({}, prev.getProps()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
                     var _a, _b, _c, _d, _e;
                     const selectedItems = tree.getSelectedItems();
                     const items = selectedItems.includes(item) ? selectedItems : [item];
@@ -33,7 +33,7 @@ exports.dragAndDropFeature = {
                         draggedItems: items,
                         draggingOverItem: tree.getFocusedItem(),
                     });
-                }, onDragOver: (e) => {
+                }), onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
                     var _a, _b, _c, _d, _e;
                     const target = (0, utils_1.getDropTarget)(e, item, tree);
                     const dataRef = tree.getDataRef();
@@ -51,12 +51,12 @@ exports.dragAndDropFeature = {
                     }
                     dataRef.current.lastDragCode = nextDragCode;
                     (_e = (_d = tree.getConfig()).setDndState) === null || _e === void 0 ? void 0 : _e.call(_d, (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
-                }, onDragLeave: () => {
+                }), onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
                     var _a, _b;
                     const dataRef = tree.getDataRef();
                     dataRef.current.lastDragCode = "no-drag";
                     (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
-                }, onDrop: (e) => {
+                }), onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
                     var _a, _b, _c, _d, _e;
                     const dataRef = tree.getDataRef();
                     const target = (0, utils_1.getDropTarget)(e, item, tree);
@@ -75,7 +75,7 @@ exports.dragAndDropFeature = {
                         (_e = config.onDropForeignDragObject) === null || _e === void 0 ? void 0 : _e.call(config, e.dataTransfer, target);
                     }
                     // TODO rebuild tree?
-                } }));
+                }) }));
         }, isDropTarget: () => {
             const target = tree.getDropTarget();
             return target ? target.item.getId() === item.getId() : false;

package/lib/cjs/features/main/types.d.ts

@@ -4,6 +4,7 @@ export type MainFeatureDef<T = any> = {
     state: {};
     config: {
         features?: FeatureImplementation<any>[];
+        initialState?: Partial<TreeState<T>>;
         state?: Partial<TreeState<T>>;
         setState?: SetStateFn<TreeState<T>>;
     };

package/lib/cjs/features/selection/feature.js

@@ -51,7 +51,7 @@ exports.selectionFeature = {
             else {
                 item.select();
             }
-        }, getProps: () => (Object.assign(Object.assign({}, prev.getProps()), { onClick: (e) => {
+        }, getProps: () => (Object.assign(Object.assign({}, prev.getProps()), { onClick: item.getMemoizedProp("selection/onClick", () => (e) => {
                 var _a, _b;
                 if (e.shiftKey) {
                     item.selectUpTo(e.ctrlKey || e.metaKey);
@@ -63,7 +63,7 @@ exports.selectionFeature = {
                     tree.setSelectedItems([item.getItemMeta().itemId]);
                 }
                 (_b = (_a = prev.getProps()).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-            } })) })),
+            }) })) })),
     hotkeys: {
         // setSelectedItem: {
         //   hotkey: "space",

package/lib/cjs/features/tree/feature.js

@@ -108,7 +108,8 @@ exports.treeFeature = {
         }, getId: () => item.getItemMeta().itemId, getProps: () => {
             var _a;
             const itemMeta = item.getItemMeta();
-            return Object.assign(Object.assign({}, (_a = prev.getProps) === null || _a === void 0 ? void 0 : _a.call(prev)), { role: "treeitem", "aria-setsize": itemMeta.setSize, "aria-posinset": itemMeta.posInSet, "aria-selected": false, "aria-label": item.getItemName(), "aria-level": itemMeta.level, tabIndex: item.isFocused() ? 0 : -1, onClick: (e) => {
+            return Object.assign(Object.assign({}, (_a = prev.getProps) === null || _a === void 0 ? void 0 : _a.call(prev)), { role: "treeitem", "aria-setsize": itemMeta.setSize, "aria-posinset": itemMeta.posInSet, "aria-selected": false, "aria-label": item.getItemName(), "aria-level": itemMeta.level, tabIndex: item.isFocused() ? 0 : -1, onClick: item.getMemoizedProp("tree/onClick", () => (e) => {
+                    console.log("onClick", item.getId());
                     item.setFocused();
                     item.primaryAction();
                     if (e.ctrlKey || e.shiftKey || e.metaKey) {
@@ -123,7 +124,7 @@ exports.treeFeature = {
                     else {
                         item.expand();
                     }
-                } });
+                }) });
         }, expand: () => tree.expandItem(item.getItemMeta().itemId), collapse: () => tree.collapseItem(item.getItemMeta().itemId), getItemData: () => tree.retrieveItemData(item.getItemMeta().itemId), isExpanded: () => tree.getState().expandedItems.includes(item.getItemMeta().itemId), isFocused: () => tree.getState().focusedItem === item.getItemMeta().itemId ||
             (tree.getState().focusedItem === null && item.getItemMeta().index === 0), isFolder: () => item.getItemMeta().level === -1 ||
             tree.getConfig().isItemFolder(item), getItemName: () => {
@@ -144,7 +145,23 @@ exports.treeFeature = {
                 1;
         }, getChildren: () => tree
             .retrieveChildrenIds(item.getItemMeta().itemId)
-            .map((id) => tree.getItemInstance(id)), getTree: () => tree, getItemAbove: () => tree.getItems()[item.getItemMeta().index - 1], getItemBelow: () => tree.getItems()[item.getItemMeta().index + 1] })),
+            .map((id) => tree.getItemInstance(id)), getTree: () => tree, getItemAbove: () => tree.getItems()[item.getItemMeta().index - 1], getItemBelow: () => tree.getItems()[item.getItemMeta().index + 1], getMemoizedProp: (name, create, deps) => {
+            var _a, _b, _c, _d, _e;
+            var _f, _g;
+            const data = item.getDataRef();
+            const memoizedValue = (_a = data.current.memoizedValues) === null || _a === void 0 ? void 0 : _a[name];
+            if (memoizedValue &&
+                (!deps ||
+                    ((_c = (_b = data.current.memoizedDeps) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.every((d, i) => d === deps[i])))) {
+                return memoizedValue;
+            }
+            (_d = (_f = data.current).memoizedDeps) !== null && _d !== void 0 ? _d : (_f.memoizedDeps = {});
+            (_e = (_g = data.current).memoizedValues) !== null && _e !== void 0 ? _e : (_g.memoizedValues = {});
+            const value = create();
+            data.current.memoizedDeps[name] = deps;
+            data.current.memoizedValues[name] = value;
+            return value;
+        } })),
     hotkeys: {
         focusNextItem: {
             hotkey: "ArrowDown",

package/lib/cjs/features/tree/types.d.ts

@@ -7,6 +7,10 @@ export type ItemMeta = {
     setSize: number;
     posInSet: number;
 };
+export type TreeItemDataRef = {
+    memoizedValues: Record<string, any>;
+    memoizedDeps: Record<string, any[] | undefined>;
+};
 export type TreeFeatureDef<T> = {
     state: {
         expandedItems: string[];
@@ -52,6 +56,7 @@ export type TreeFeatureDef<T> = {
         getTree: () => TreeInstance<T>;
         getItemAbove: () => ItemInstance<T> | null;
         getItemBelow: () => ItemInstance<T> | null;
+        getMemoizedProp: <X>(name: string, create: () => X, deps?: any[]) => X;
     };
     hotkeys: "focusNextItem" | "focusPreviousItem" | "expandOrDown" | "collapseOrUp" | "focusFirstItem" | "focusLastItem";
 };

package/lib/esm/core/create-tree.js

@@ -8,10 +8,10 @@ const buildItemInstance = (features, tree, itemId) => {
     return itemInstance;
 };
 export const createTree = (initialConfig) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const treeInstance = {};
     const additionalFeatures = [treeFeature, ...((_a = initialConfig.features) !== null && _a !== void 0 ? _a : [])];
-    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_b = initialConfig.state) !== null && _b !== void 0 ? _b : {});
+    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_c = (_b = initialConfig.initialState) !== null && _b !== void 0 ? _b : initialConfig.state) !== null && _c !== void 0 ? _c : {});
     let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
     let treeElement;
     const treeDataRef = { current: {} };
@@ -104,8 +104,8 @@ export const createTree = (initialConfig) => {
     // todo sort features
     const features = [mainFeature, ...additionalFeatures];
     for (const feature of features) {
-        Object.assign(treeInstance, (_d = (_c = feature.createTreeInstance) === null || _c === void 0 ? void 0 : _c.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _d !== void 0 ? _d : {});
-        Object.assign(hotkeyPresets, (_e = feature.hotkeys) !== null && _e !== void 0 ? _e : {});
+        Object.assign(treeInstance, (_e = (_d = feature.createTreeInstance) === null || _d === void 0 ? void 0 : _d.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _e !== void 0 ? _e : {});
+        Object.assign(hotkeyPresets, (_f = feature.hotkeys) !== null && _f !== void 0 ? _f : {});
     }
     rebuildItemMeta(mainFeature);
     return treeInstance;

package/lib/esm/features/drag-and-drop/feature.js

@@ -10,7 +10,7 @@ export const dragAndDropFeature = {
         } })),
     createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { getProps: () => {
             var _a, _b, _c;
-            return (Object.assign(Object.assign({}, prev.getProps()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: (e) => {
+            return (Object.assign(Object.assign({}, prev.getProps()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
                     var _a, _b, _c, _d, _e;
                     const selectedItems = tree.getSelectedItems();
                     const items = selectedItems.includes(item) ? selectedItems : [item];
@@ -30,7 +30,7 @@ export const dragAndDropFeature = {
                         draggedItems: items,
                         draggingOverItem: tree.getFocusedItem(),
                     });
-                }, onDragOver: (e) => {
+                }), onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
                     var _a, _b, _c, _d, _e;
                     const target = getDropTarget(e, item, tree);
                     const dataRef = tree.getDataRef();
@@ -48,12 +48,12 @@ export const dragAndDropFeature = {
                     }
                     dataRef.current.lastDragCode = nextDragCode;
                     (_e = (_d = tree.getConfig()).setDndState) === null || _e === void 0 ? void 0 : _e.call(_d, (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
-                }, onDragLeave: () => {
+                }), onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
                     var _a, _b;
                     const dataRef = tree.getDataRef();
                     dataRef.current.lastDragCode = "no-drag";
                     (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
-                }, onDrop: (e) => {
+                }), onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
                     var _a, _b, _c, _d, _e;
                     const dataRef = tree.getDataRef();
                     const target = getDropTarget(e, item, tree);
@@ -72,7 +72,7 @@ export const dragAndDropFeature = {
                         (_e = config.onDropForeignDragObject) === null || _e === void 0 ? void 0 : _e.call(config, e.dataTransfer, target);
                     }
                     // TODO rebuild tree?
-                } }));
+                }) }));
         }, isDropTarget: () => {
             const target = tree.getDropTarget();
             return target ? target.item.getId() === item.getId() : false;

package/lib/esm/features/main/types.d.ts

@@ -4,6 +4,7 @@ export type MainFeatureDef<T = any> = {
     state: {};
     config: {
         features?: FeatureImplementation<any>[];
+        initialState?: Partial<TreeState<T>>;
         state?: Partial<TreeState<T>>;
         setState?: SetStateFn<TreeState<T>>;
     };

package/lib/esm/features/selection/feature.js

@@ -48,7 +48,7 @@ export const selectionFeature = {
             else {
                 item.select();
             }
-        }, getProps: () => (Object.assign(Object.assign({}, prev.getProps()), { onClick: (e) => {
+        }, getProps: () => (Object.assign(Object.assign({}, prev.getProps()), { onClick: item.getMemoizedProp("selection/onClick", () => (e) => {
                 var _a, _b;
                 if (e.shiftKey) {
                     item.selectUpTo(e.ctrlKey || e.metaKey);
@@ -60,7 +60,7 @@ export const selectionFeature = {
                     tree.setSelectedItems([item.getItemMeta().itemId]);
                 }
                 (_b = (_a = prev.getProps()).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-            } })) })),
+            }) })) })),
     hotkeys: {
         // setSelectedItem: {
         //   hotkey: "space",

package/lib/esm/features/tree/feature.js

@@ -105,7 +105,8 @@ export const treeFeature = {
         }, getId: () => item.getItemMeta().itemId, getProps: () => {
             var _a;
             const itemMeta = item.getItemMeta();
-            return Object.assign(Object.assign({}, (_a = prev.getProps) === null || _a === void 0 ? void 0 : _a.call(prev)), { role: "treeitem", "aria-setsize": itemMeta.setSize, "aria-posinset": itemMeta.posInSet, "aria-selected": false, "aria-label": item.getItemName(), "aria-level": itemMeta.level, tabIndex: item.isFocused() ? 0 : -1, onClick: (e) => {
+            return Object.assign(Object.assign({}, (_a = prev.getProps) === null || _a === void 0 ? void 0 : _a.call(prev)), { role: "treeitem", "aria-setsize": itemMeta.setSize, "aria-posinset": itemMeta.posInSet, "aria-selected": false, "aria-label": item.getItemName(), "aria-level": itemMeta.level, tabIndex: item.isFocused() ? 0 : -1, onClick: item.getMemoizedProp("tree/onClick", () => (e) => {
+                    console.log("onClick", item.getId());
                     item.setFocused();
                     item.primaryAction();
                     if (e.ctrlKey || e.shiftKey || e.metaKey) {
@@ -120,7 +121,7 @@ export const treeFeature = {
                     else {
                         item.expand();
                     }
-                } });
+                }) });
         }, expand: () => tree.expandItem(item.getItemMeta().itemId), collapse: () => tree.collapseItem(item.getItemMeta().itemId), getItemData: () => tree.retrieveItemData(item.getItemMeta().itemId), isExpanded: () => tree.getState().expandedItems.includes(item.getItemMeta().itemId), isFocused: () => tree.getState().focusedItem === item.getItemMeta().itemId ||
             (tree.getState().focusedItem === null && item.getItemMeta().index === 0), isFolder: () => item.getItemMeta().level === -1 ||
             tree.getConfig().isItemFolder(item), getItemName: () => {
@@ -141,7 +142,23 @@ export const treeFeature = {
                 1;
         }, getChildren: () => tree
             .retrieveChildrenIds(item.getItemMeta().itemId)
-            .map((id) => tree.getItemInstance(id)), getTree: () => tree, getItemAbove: () => tree.getItems()[item.getItemMeta().index - 1], getItemBelow: () => tree.getItems()[item.getItemMeta().index + 1] })),
+            .map((id) => tree.getItemInstance(id)), getTree: () => tree, getItemAbove: () => tree.getItems()[item.getItemMeta().index - 1], getItemBelow: () => tree.getItems()[item.getItemMeta().index + 1], getMemoizedProp: (name, create, deps) => {
+            var _a, _b, _c, _d, _e;
+            var _f, _g;
+            const data = item.getDataRef();
+            const memoizedValue = (_a = data.current.memoizedValues) === null || _a === void 0 ? void 0 : _a[name];
+            if (memoizedValue &&
+                (!deps ||
+                    ((_c = (_b = data.current.memoizedDeps) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.every((d, i) => d === deps[i])))) {
+                return memoizedValue;
+            }
+            (_d = (_f = data.current).memoizedDeps) !== null && _d !== void 0 ? _d : (_f.memoizedDeps = {});
+            (_e = (_g = data.current).memoizedValues) !== null && _e !== void 0 ? _e : (_g.memoizedValues = {});
+            const value = create();
+            data.current.memoizedDeps[name] = deps;
+            data.current.memoizedValues[name] = value;
+            return value;
+        } })),
     hotkeys: {
         focusNextItem: {
             hotkey: "ArrowDown",

package/lib/esm/features/tree/types.d.ts

@@ -7,6 +7,10 @@ export type ItemMeta = {
     setSize: number;
     posInSet: number;
 };
+export type TreeItemDataRef = {
+    memoizedValues: Record<string, any>;
+    memoizedDeps: Record<string, any[] | undefined>;
+};
 export type TreeFeatureDef<T> = {
     state: {
         expandedItems: string[];
@@ -52,6 +56,7 @@ export type TreeFeatureDef<T> = {
         getTree: () => TreeInstance<T>;
         getItemAbove: () => ItemInstance<T> | null;
         getItemBelow: () => ItemInstance<T> | null;
+        getMemoizedProp: <X>(name: string, create: () => X, deps?: any[]) => X;
     };
     hotkeys: "focusNextItem" | "focusPreviousItem" | "expandOrDown" | "collapseOrUp" | "focusFirstItem" | "focusLastItem";
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build:cjs": "tsc",
-    "build:esm": "tsc -m es2015 --outDir lib/esm",
+    "build:cjs": "tsc -m commonjs --outDir lib/cjs",
+    "build:esm": "tsc",
     "start": "tsc -w"
   },
   "repository": {

package/src/core/create-tree.ts

@@ -38,7 +38,7 @@ export const createTree = <T>(
   const additionalFeatures = [treeFeature, ...(initialConfig.features ?? [])];
   let state = additionalFeatures.reduce(
     (acc, feature) => feature.getInitialState?.(acc, treeInstance) ?? acc,
-    initialConfig.state ?? {}
+    initialConfig.initialState ?? initialConfig.state ?? {}
   ) as TreeState<T>;
   let config = additionalFeatures.reduce(
     (acc, feature) => feature.getDefaultConfig?.(acc, treeInstance) ?? acc,

package/src/features/drag-and-drop/feature.ts

@@ -33,7 +33,7 @@ export const dragAndDropFeature: FeatureImplementation<
 
       draggable: tree.getConfig().isItemDraggable?.(item) ?? true,
 
-      onDragStart: (e) => {
+      onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
         const selectedItems = tree.getSelectedItems();
         const items = selectedItems.includes(item) ? selectedItems : [item];
         const config = tree.getConfig();
@@ -56,9 +56,9 @@ export const dragAndDropFeature: FeatureImplementation<
           draggedItems: items,
           draggingOverItem: tree.getFocusedItem(),
         });
-      },
+      }),
 
-      onDragOver: (e) => {
+      onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
         const target = getDropTarget(e, item, tree);
         const dataRef = tree.getDataRef<DndDataRef>();
 
@@ -87,9 +87,9 @@ export const dragAndDropFeature: FeatureImplementation<
           dragTarget: target,
           draggingOverItem: item,
         }));
-      },
+      }),
 
-      onDragLeave: () => {
+      onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
         const dataRef = tree.getDataRef<DndDataRef>();
         dataRef.current.lastDragCode = "no-drag";
         tree.getConfig().setDndState?.((state) => ({
@@ -97,9 +97,9 @@ export const dragAndDropFeature: FeatureImplementation<
           draggingOverItem: undefined,
           dragTarget: undefined,
         }));
-      },
+      }),
 
-      onDrop: (e) => {
+      onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDropTarget(e, item, tree);
 
@@ -120,7 +120,7 @@ export const dragAndDropFeature: FeatureImplementation<
           config.onDropForeignDragObject?.(e.dataTransfer, target);
         }
         // TODO rebuild tree?
-      },
+      }),
     }),
 
     isDropTarget: () => {

package/src/features/main/types.ts

@@ -12,6 +12,7 @@ export type MainFeatureDef<T = any> = {
   state: {};
   config: {
     features?: FeatureImplementation<any>[];
+    initialState?: Partial<TreeState<T>>;
     state?: Partial<TreeState<T>>;
     setState?: SetStateFn<TreeState<T>>;
   };

package/src/features/selection/feature.ts

@@ -91,7 +91,7 @@ export const selectionFeature: FeatureImplementation<
 
     getProps: () => ({
       ...prev.getProps(),
-      onClick: (e) => {
+      onClick: item.getMemoizedProp("selection/onClick", () => (e) => {
         if (e.shiftKey) {
           item.selectUpTo(e.ctrlKey || e.metaKey);
         } else if (e.ctrlKey || e.metaKey) {
@@ -101,7 +101,7 @@ export const selectionFeature: FeatureImplementation<
         }
 
         prev.getProps().onClick?.(e);
-      },
+      }),
     }),
   }),
 

package/src/features/tree/feature.ts

@@ -1,5 +1,5 @@
 import { FeatureImplementation, ItemInstance } from "../../types/core";
-import { ItemMeta, TreeFeatureDef } from "./types";
+import { ItemMeta, TreeFeatureDef, TreeItemDataRef } from "./types";
 import { makeStateUpdater, memo, poll } from "../../utils";
 import { MainFeatureDef } from "../main/types";
 import { HotkeysCoreFeatureDef } from "../hotkeys-core/types";
@@ -174,7 +174,8 @@ export const treeFeature: FeatureImplementation<
         "aria-label": item.getItemName(),
         "aria-level": itemMeta.level,
         tabIndex: item.isFocused() ? 0 : -1,
-        onClick: (e) => {
+        onClick: item.getMemoizedProp("tree/onClick", () => (e) => {
+          console.log("onClick", item.getId());
           item.setFocused();
           item.primaryAction();
 
@@ -191,7 +192,7 @@ export const treeFeature: FeatureImplementation<
           } else {
             item.expand();
           }
-        },
+        }),
       };
     },
     expand: () => tree.expandItem(item.getItemMeta().itemId),
@@ -235,6 +236,23 @@ export const treeFeature: FeatureImplementation<
     getTree: () => tree as any,
     getItemAbove: () => tree.getItems()[item.getItemMeta().index - 1],
     getItemBelow: () => tree.getItems()[item.getItemMeta().index + 1],
+    getMemoizedProp: (name, create, deps) => {
+      const data = item.getDataRef<TreeItemDataRef>();
+      const memoizedValue = data.current.memoizedValues?.[name];
+      if (
+        memoizedValue &&
+        (!deps ||
+          data.current.memoizedDeps?.[name]?.every((d, i) => d === deps![i]))
+      ) {
+        return memoizedValue;
+      }
+      data.current.memoizedDeps ??= {};
+      data.current.memoizedValues ??= {};
+      const value = create();
+      data.current.memoizedDeps[name] = deps;
+      data.current.memoizedValues[name] = value;
+      return value;
+    },
   }),
 
   hotkeys: {

package/src/features/tree/types.ts

@@ -9,6 +9,11 @@ export type ItemMeta = {
   posInSet: number;
 };
 
+export type TreeItemDataRef = {
+  memoizedValues: Record<string, any>;
+  memoizedDeps: Record<string, any[] | undefined>;
+};
+
 export type TreeFeatureDef<T> = {
   state: {
     expandedItems: string[];
@@ -59,6 +64,7 @@ export type TreeFeatureDef<T> = {
     getTree: () => TreeInstance<T>;
     getItemAbove: () => ItemInstance<T> | null;
     getItemBelow: () => ItemInstance<T> | null;
+    getMemoizedProp: <X>(name: string, create: () => X, deps?: any[]) => X;
   };
   hotkeys:
     | "focusNextItem"

package/tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "../../tsconfig.json",
   "include": ["./src/**/*"],
   "compilerOptions": {
-    "outDir": "lib/cjs"
+    "outDir": "lib/esm"
   }
 }