@headless-tree/core 0.0.4 → 0.0.6

package/lib/cjs/features/sync-data-loader/feature.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.syncDataLoaderFeature = void 0;
+const utils_1 = require("../../utils");
 exports.syncDataLoaderFeature = {
     key: "sync-data-loader",
     dependingFeatures: ["main"],
+    getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: (0, utils_1.makeStateUpdater)("loadingItems", tree) }, defaultConfig)),
+    stateHandlerNames: {
+        loadingItems: "setLoadingItems",
+    },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: (itemId) => instance.getConfig().dataLoader.getItem(itemId), retrieveChildrenIds: (itemId) => instance.getConfig().dataLoader.getChildren(itemId) })),
     createItemInstance: (prev) => (Object.assign(Object.assign({}, prev), { isLoading: () => false })),
 };

package/lib/cjs/features/sync-data-loader/types.d.ts

@@ -6,7 +6,7 @@ export type SyncDataLoaderFeatureDef<T> = {
     state: {};
     config: {
         rootItemId: string;
-        dataLoader: SyncTreeDataLoader<T>;
+        dataLoader?: SyncTreeDataLoader<T>;
     };
     treeInstance: {
         retrieveItemData: (itemId: string) => T;

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

@@ -16,6 +16,10 @@ exports.treeFeature = {
     dependingFeatures: ["main"],
     getInitialState: (initialState) => (Object.assign({ expandedItems: [], focusedItem: null }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setExpandedItems: (0, utils_1.makeStateUpdater)("expandedItems", tree), setFocusedItem: (0, utils_1.makeStateUpdater)("focusedItem", tree) }, defaultConfig)),
+    stateHandlerNames: {
+        expandedItems: "setExpandedItems",
+        focusedItem: "setFocusedItem",
+    },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: () => {
             throw new Error("No data-loader registered");
         }, retrieveChildrenIds: () => {
@@ -23,7 +27,6 @@ exports.treeFeature = {
         }, isItemExpanded: (itemId) => instance.getState().expandedItems.includes(itemId), getItemsMeta: () => {
             const { rootItemId } = instance.getConfig();
             const { expandedItems } = instance.getState();
-            // console.log("!", instance.getConfig());
             const flatItems = [];
             const recursiveAdd = (itemId, parentId, level, setSize, posInSet) => {
                 var _a;
@@ -50,23 +53,23 @@ exports.treeFeature = {
             }
             return flatItems;
         }, expandItem: (itemId) => {
-            var _a, _b, _c;
+            var _a;
             if (!instance.getItemInstance(itemId).isFolder()) {
                 return;
             }
             if ((_a = instance.getState().loadingItems) === null || _a === void 0 ? void 0 : _a.includes(itemId)) {
                 return;
             }
-            (_c = (_b = instance
-                .getConfig()).setExpandedItems) === null || _c === void 0 ? void 0 : _c.call(_b, (expandedItems) => [...expandedItems, itemId]);
+            instance.applySubStateUpdate("expandedItems", (expandedItems) => [
+                ...expandedItems,
+                itemId,
+            ]);
             instance.rebuildTree();
         }, collapseItem: (itemId) => {
-            var _a, _b;
             if (!instance.getItemInstance(itemId).isFolder()) {
                 return;
             }
-            (_b = (_a = instance
-                .getConfig()).setExpandedItems) === null || _b === void 0 ? void 0 : _b.call(_a, (expandedItems) => expandedItems.filter((id) => id !== itemId));
+            instance.applySubStateUpdate("expandedItems", (expandedItems) => expandedItems.filter((id) => id !== itemId));
             instance.rebuildTree();
         }, 
         // TODO memo
@@ -74,8 +77,7 @@ exports.treeFeature = {
             var _a, _b;
             return ((_b = instance.getItemInstance((_a = instance.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : instance.getItems()[0]);
         }, focusItem: (itemId) => {
-            var _a, _b;
-            (_b = (_a = instance.getConfig()).setFocusedItem) === null || _b === void 0 ? void 0 : _b.call(_a, itemId);
+            instance.applySubStateUpdate("focusedItem", itemId);
         }, focusNextItem: () => {
             const { index } = instance.getFocusedItem().getItemMeta();
             const nextIndex = Math.min(index + 1, instance.getItems().length - 1);
@@ -84,7 +86,7 @@ exports.treeFeature = {
             const { index } = instance.getFocusedItem().getItemMeta();
             const nextIndex = Math.max(index - 1, 0);
             instance.focusItem(instance.getItems()[nextIndex].getId());
-        }, updateDomFocus: (scrollIntoView) => {
+        }, updateDomFocus: () => {
             // Required because if the state is managed outside in react, the state only updated during next render
             setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {
                 var _a, _b;
@@ -95,9 +97,6 @@ exports.treeFeature = {
                 if (!focusedElement)
                     return;
                 focusedElement.focus();
-                // if (scrollIntoView) {
-                //   focusedElement.scrollIntoView();
-                // }
             }));
         }, getContainerProps: () => {
             var _a;
@@ -105,10 +104,15 @@ exports.treeFeature = {
         } })),
     createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { isLoading: () => {
             throw new Error("No data-loader registered");
-        }, getId: () => item.getItemMeta().itemId, getProps: () => {
+        }, scrollTo: (scrollIntoViewArg) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            (_b = (_a = tree.getConfig()).scrollToItem) === null || _b === void 0 ? void 0 : _b.call(_a, item);
+            yield (0, utils_1.poll)(() => item.getElement() !== null, 20);
+            item.getElement().scrollIntoView(scrollIntoViewArg);
+        }), 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) => {
                     item.setFocused();
                     item.primaryAction();
                     if (e.ctrlKey || e.shiftKey || e.metaKey) {
@@ -123,7 +127,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: () => {
@@ -137,14 +141,27 @@ exports.treeFeature = {
                 }
             }
             return tree.getItemInstance(tree.getConfig().rootItemId);
-        }, () => [item.getItemMeta()]), getIndexInParent: () => {
-            var _a, _b;
-            return item.getItemMeta().index -
-                ((_b = (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.getItemMeta().index) !== null && _b !== void 0 ? _b : 0) -
-                1;
-        }, getChildren: () => tree
+        }, () => [item.getItemMeta()]), 
+        // TODO remove
+        getIndexInParent: () => item.getItemMeta().posInSet, 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",
@@ -189,7 +206,7 @@ exports.treeFeature = {
                 if ((!item.isExpanded() || !item.isFolder()) &&
                     item.getItemMeta().level !== 0) {
                     (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.setFocused();
-                    tree.updateDomFocus(true);
+                    tree.updateDomFocus();
                 }
                 else {
                     item.collapse();

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[];
@@ -30,8 +34,7 @@ export type TreeFeatureDef<T> = {
         getFocusedItem: () => ItemInstance<any>;
         focusNextItem: () => void;
         focusPreviousItem: () => void;
-        scrollToItem: (item: ItemInstance<any>) => void;
-        updateDomFocus: (scrollIntoView?: boolean) => void;
+        updateDomFocus: () => void;
         getContainerProps: () => Record<string, any>;
     };
     itemInstance: {
@@ -52,6 +55,8 @@ export type TreeFeatureDef<T> = {
         getTree: () => TreeInstance<T>;
         getItemAbove: () => ItemInstance<T> | null;
         getItemBelow: () => ItemInstance<T> | null;
+        getMemoizedProp: <X>(name: string, create: () => X, deps?: any[]) => X;
+        scrollTo: (scrollIntoViewArg?: boolean | ScrollIntoViewOptions) => Promise<void>;
     };
     hotkeys: "focusNextItem" | "focusPreviousItem" | "expandOrDown" | "collapseOrUp" | "focusFirstItem" | "focusLastItem";
 };

package/lib/cjs/index.d.ts

@@ -18,4 +18,6 @@ export * from "./features/drag-and-drop/feature";
 export * from "./features/search/feature";
 export * from "./features/renaming/feature";
 export * from "./features/expand-all/feature";
-export * from "./data-adapters/nested-data-adapter";
+export * from "./utilities/create-on-drop-handler";
+export * from "./utilities/insert-items-at-target";
+export * from "./utilities/remove-items-from-parents";

package/lib/cjs/index.js

@@ -34,4 +34,6 @@ __exportStar(require("./features/drag-and-drop/feature"), exports);
 __exportStar(require("./features/search/feature"), exports);
 __exportStar(require("./features/renaming/feature"), exports);
 __exportStar(require("./features/expand-all/feature"), exports);
-__exportStar(require("./data-adapters/nested-data-adapter"), exports);
+__exportStar(require("./utilities/create-on-drop-handler"), exports);
+__exportStar(require("./utilities/insert-items-at-target"), exports);
+__exportStar(require("./utilities/remove-items-from-parents"), exports);

package/lib/cjs/types/core.d.ts

@@ -52,6 +52,7 @@ export type CustomHotkeysConfig<T, F extends FeatureDef = FeatureDefs<T>> = Part
 export type FeatureImplementation<T = any, D extends FeatureDef = any, F extends FeatureDef = EmptyFeatureDef> = {
     key?: string;
     dependingFeatures?: string[];
+    stateHandlerNames?: Partial<Record<keyof MergedFeatures<F>["state"], keyof MergedFeatures<F>["config"]>>;
     getInitialState?: (initialState: Partial<MergedFeatures<F>["state"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["state"] & MergedFeatures<F>["state"]>;
     getDefaultConfig?: (defaultConfig: Partial<MergedFeatures<F>["config"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["config"] & MergedFeatures<F>["config"]>;
     createTreeInstance?: (prev: MergedFeatures<F>["treeInstance"], instance: MergedFeatures<F>["treeInstance"]) => D["treeInstance"] & MergedFeatures<F>["treeInstance"];
@@ -60,9 +61,6 @@ export type FeatureImplementation<T = any, D extends FeatureDef = any, F extends
     onTreeUnmount?: (instance: MergedFeatures<F>["treeInstance"], treeElement: HTMLElement) => void;
     onItemMount?: (instance: MergedFeatures<F>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<F>["treeInstance"]) => void;
     onItemUnmount?: (instance: MergedFeatures<F>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<F>["treeInstance"]) => void;
-    setState?: (instance: MergedFeatures<F>["treeInstance"]) => void;
-    onConfigChange?: (instance: MergedFeatures<F>["treeInstance"]) => void;
-    onStateOrConfigChange?: (instance: MergedFeatures<F>["treeInstance"]) => void;
     hotkeys?: HotkeysConfig<T, D>;
 };
 export {};

package/lib/cjs/utilities/create-on-drop-handler.d.ts

@@ -0,0 +1,3 @@
+import { ItemInstance } from "../types/core";
+import { DropTarget } from "../features/drag-and-drop/types";
+export declare const createOnDropHandler: <T>(onChangeChildren: (item: ItemInstance<T>, newChildren: string[]) => void) => (items: ItemInstance<T>[], target: DropTarget<T>) => void;

package/lib/cjs/utilities/create-on-drop-handler.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createOnDropHandler = void 0;
+const remove_items_from_parents_1 = require("./remove-items-from-parents");
+const insert_items_at_target_1 = require("./insert-items-at-target");
+const createOnDropHandler = (onChangeChildren) => (items, target) => {
+    const itemIds = items.map((item) => item.getId());
+    (0, remove_items_from_parents_1.removeItemsFromParents)(items, onChangeChildren);
+    (0, insert_items_at_target_1.insertItemsAtTarget)(itemIds, target, onChangeChildren);
+};
+exports.createOnDropHandler = createOnDropHandler;

package/lib/cjs/utilities/insert-items-at-target.d.ts

@@ -0,0 +1,3 @@
+import { ItemInstance } from "../types/core";
+import { DropTarget } from "../features/drag-and-drop/types";
+export declare const insertItemsAtTarget: <T>(itemIds: string[], target: DropTarget<T>, onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void) => void;

package/lib/cjs/utilities/insert-items-at-target.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertItemsAtTarget = void 0;
+const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
+    // add moved items to new common parent, if dropped onto parent
+    if (target.childIndex === null) {
+        onChangeChildren(target.item, [
+            ...target.item.getChildren().map((item) => item.getId()),
+            ...itemIds,
+        ]);
+        // TODO items[0].getTree().rebuildTree();
+        return;
+    }
+    // add moved items to new common parent, if dropped between siblings
+    const oldChildren = target.item.getChildren();
+    const newChildren = [
+        ...oldChildren.slice(0, target.insertionIndex).map((item) => item.getId()),
+        ...itemIds,
+        ...oldChildren.slice(target.insertionIndex).map((item) => item.getId()),
+    ];
+    onChangeChildren(target.item, newChildren);
+    target.item.getTree().rebuildTree();
+};
+exports.insertItemsAtTarget = insertItemsAtTarget;

package/lib/cjs/utilities/remove-items-from-parents.d.ts

@@ -0,0 +1,2 @@
+import { ItemInstance } from "../types/core";
+export declare const removeItemsFromParents: <T>(movedItems: ItemInstance<T>[], onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void) => void;

package/lib/cjs/utilities/remove-items-from-parents.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeItemsFromParents = void 0;
+const removeItemsFromParents = (movedItems, onChangeChildren) => {
+    var _a;
+    // TODO bulk sibling changes together
+    for (const item of movedItems) {
+        const siblings = (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.getChildren();
+        if (siblings) {
+            onChangeChildren(item.getParent(), siblings
+                .filter((sibling) => sibling.getId() !== item.getId())
+                .map((i) => i.getId()));
+        }
+    }
+    movedItems[0].getTree().rebuildTree();
+};
+exports.removeItemsFromParents = removeItemsFromParents;

package/lib/cjs/utils.d.ts

@@ -1,9 +1,6 @@
-import { ItemInstance, TreeState, Updater } from "./types/core";
-import { DropTarget } from "./features/drag-and-drop/types";
+import { TreeState, Updater } from "./types/core";
 export type NoInfer<T> = [T][T extends any ? 0 : never];
 export declare const memo: <D extends readonly any[], R>(fn: (...args_0: D) => R, deps: () => [...D]) => () => R;
 export declare function functionalUpdate<T>(updater: Updater<T>, input: T): T;
 export declare function makeStateUpdater<K extends keyof TreeState<any>>(key: K, instance: unknown): (updater: Updater<TreeState<any>[K]>) => void;
-export declare const scrollIntoView: (element: Element | undefined | null) => void;
-export declare const performItemsMove: <T>(items: ItemInstance<T>[], target: DropTarget<T>, onChangeChildren: (item: ItemInstance<T>, newChildren: ItemInstance<T>[]) => void) => void;
 export declare const poll: (fn: () => boolean, interval?: number, timeout?: number) => Promise<void>;

package/lib/cjs/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.poll = exports.performItemsMove = exports.scrollIntoView = exports.makeStateUpdater = exports.functionalUpdate = exports.memo = void 0;
+exports.poll = exports.makeStateUpdater = exports.functionalUpdate = exports.memo = void 0;
 const memo = (fn, deps) => {
     let value;
     let oldDeps = null;
@@ -37,58 +37,6 @@ function makeStateUpdater(key, instance) {
     };
 }
 exports.makeStateUpdater = makeStateUpdater;
-const scrollIntoView = (element) => {
-    if (!element) {
-        return;
-    }
-    if (element.scrollIntoViewIfNeeded) {
-        element.scrollIntoViewIfNeeded();
-    }
-    else {
-        const boundingBox = element.getBoundingClientRect();
-        const isElementInViewport = boundingBox.top >= 0 &&
-            boundingBox.left >= 0 &&
-            boundingBox.bottom <=
-                (window.innerHeight || document.documentElement.clientHeight) &&
-            boundingBox.right <=
-                (window.innerWidth || document.documentElement.clientWidth);
-        if (!isElementInViewport) {
-            element.scrollIntoView();
-        }
-    }
-};
-exports.scrollIntoView = scrollIntoView;
-const performItemsMove = (items, target, onChangeChildren) => {
-    var _a;
-    const numberOfDragItemsBeforeTarget = !target.childIndex
-        ? 0
-        : target.item
-            .getChildren()
-            .slice(0, target.childIndex)
-            .filter((child) => items.some((item) => item.getId() === child.getId()))
-            .length;
-    // TODO bulk sibling changes together
-    for (const item of items) {
-        const siblings = (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.getChildren();
-        if (siblings) {
-            onChangeChildren(item.getParent(), siblings.filter((sibling) => sibling.getId() !== item.getId()));
-        }
-    }
-    if (target.childIndex === null) {
-        onChangeChildren(target.item, [...target.item.getChildren(), ...items]);
-        items[0].getTree().rebuildTree();
-        return;
-    }
-    const oldChildren = target.item.getChildren();
-    const newChildren = [
-        ...oldChildren.slice(0, target.childIndex - numberOfDragItemsBeforeTarget),
-        ...items,
-        ...oldChildren.slice(target.childIndex - numberOfDragItemsBeforeTarget),
-    ];
-    onChangeChildren(target.item, newChildren);
-    items[0].getTree().rebuildTree();
-};
-exports.performItemsMove = performItemsMove;
 const poll = (fn, interval = 100, timeout = 1000) => new Promise((resolve) => {
     let clear;
     const i = setInterval(() => {

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

@@ -8,11 +8,12 @@ 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);
+    const stateHandlerNames = additionalFeatures.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature.stateHandlerNames)), {});
     let treeElement;
     const treeDataRef = { current: {} };
     const itemInstancesMap = {};
@@ -57,10 +58,13 @@ export const createTree = (initialConfig) => {
         key: "main",
         createTreeInstance: (prev) => (Object.assign(Object.assign({}, prev), { getState: () => state, setState: (updater) => {
                 var _a;
-                state = typeof updater === "function" ? updater(state) : updater;
+                // Not necessary, since I think the subupdate below keeps the state fresh anyways?
+                // state = typeof updater === "function" ? updater(state) : updater;
                 (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-                eachFeature((feature) => { var _a; return (_a = feature.setState) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
-                eachFeature((feature) => { var _a; return (_a = feature.onStateOrConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+            }, applySubStateUpdate: (stateName, updater) => {
+                state[stateName] =
+                    typeof updater === "function" ? updater(state[stateName]) : updater;
+                config[stateHandlerNames[stateName]](state[stateName]);
             }, rebuildTree: () => {
                 var _a;
                 rebuildItemMeta(mainFeature);
@@ -69,10 +73,7 @@ export const createTree = (initialConfig) => {
                 config = typeof updater === "function" ? updater(config) : updater;
                 if (config.state) {
                     state = Object.assign(Object.assign({}, state), config.state);
-                    eachFeature((feature) => { var _a; return (_a = feature.setState) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
                 }
-                eachFeature((feature) => { var _a; return (_a = feature.onConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
-                eachFeature((feature) => { var _a; return (_a = feature.onStateOrConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
             }, getItemInstance: (itemId) => itemInstancesMap[itemId], getItems: () => itemInstances, registerElement: (element) => {
                 if (treeElement === element) {
                     return;
@@ -104,8 +105,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/async-data-loader/feature.js

@@ -4,43 +4,52 @@ export const asyncDataLoaderFeature = {
     dependingFeatures: ["main"],
     getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: makeStateUpdater("loadingItems", tree) }, defaultConfig)),
+    stateHandlerNames: {
+        loadingItems: "setLoadingItems",
+    },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: (itemId) => {
-            var _a, _b, _c, _d, _e, _f;
-            var _g, _h;
+            var _a, _b, _c, _d, _e;
+            var _f, _g;
             const config = instance.getConfig();
             const dataRef = instance.getDataRef();
-            (_a = (_g = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_g.itemData = {});
-            (_b = (_h = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_h.childrenIds = {});
+            (_a = (_f = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_f.itemData = {});
+            (_b = (_g = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_g.childrenIds = {});
             if (dataRef.current.itemData[itemId]) {
                 return dataRef.current.itemData[itemId];
             }
             if (!instance.getState().loadingItems.includes(itemId)) {
-                (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => [...loadingItems, itemId]);
-                (_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getItem(itemId).then((item) => {
-                    var _a, _b;
+                instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+                    ...loadingItems,
+                    itemId,
+                ]);
+                (_c = config.asyncDataLoader) === null || _c === void 0 ? void 0 : _c.getItem(itemId).then((item) => {
+                    var _a;
                     dataRef.current.itemData[itemId] = item;
                     (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId, item);
-                    (_b = config.setLoadingItems) === null || _b === void 0 ? void 0 : _b.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
                 });
             }
-            return (_f = (_e = config.createLoadingItemData) === null || _e === void 0 ? void 0 : _e.call(config)) !== null && _f !== void 0 ? _f : null;
+            return (_e = (_d = config.createLoadingItemData) === null || _d === void 0 ? void 0 : _d.call(config)) !== null && _e !== void 0 ? _e : null;
         }, retrieveChildrenIds: (itemId) => {
-            var _a, _b, _c, _d, _e, _f;
-            var _g, _h;
+            var _a, _b, _c, _d, _e;
+            var _f, _g;
             const config = instance.getConfig();
             const dataRef = instance.getDataRef();
-            (_a = (_g = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_g.itemData = {});
-            (_b = (_h = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_h.childrenIds = {});
+            (_a = (_f = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_f.itemData = {});
+            (_b = (_g = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_g.childrenIds = {});
             if (dataRef.current.childrenIds[itemId]) {
                 return dataRef.current.childrenIds[itemId];
             }
             if (instance.getState().loadingItems.includes(itemId)) {
                 return [];
             }
-            (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => [...loadingItems, itemId]);
-            if ((_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getChildrenWithData) {
-                (_e = config.asyncDataLoader) === null || _e === void 0 ? void 0 : _e.getChildrenWithData(itemId).then((children) => {
-                    var _a, _b, _c;
+            instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+                ...loadingItems,
+                itemId,
+            ]);
+            if ((_c = config.asyncDataLoader) === null || _c === void 0 ? void 0 : _c.getChildrenWithData) {
+                (_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getChildrenWithData(itemId).then((children) => {
+                    var _a, _b;
                     for (const { id, data } of children) {
                         dataRef.current.itemData[id] = data;
                         (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, id, data);
@@ -48,16 +57,16 @@ export const asyncDataLoaderFeature = {
                     const childrenIds = children.map(({ id }) => id);
                     dataRef.current.childrenIds[itemId] = childrenIds;
                     (_b = config.onLoadedChildren) === null || _b === void 0 ? void 0 : _b.call(config, itemId, childrenIds);
-                    (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
                     instance.rebuildTree();
                 });
             }
             else {
-                (_f = config.asyncDataLoader) === null || _f === void 0 ? void 0 : _f.getChildren(itemId).then((childrenIds) => {
-                    var _a, _b;
+                (_e = config.asyncDataLoader) === null || _e === void 0 ? void 0 : _e.getChildren(itemId).then((childrenIds) => {
+                    var _a;
                     dataRef.current.childrenIds[itemId] = childrenIds;
                     (_a = config.onLoadedChildren) === null || _a === void 0 ? void 0 : _a.call(config, itemId, childrenIds);
-                    (_b = config.setLoadingItems) === null || _b === void 0 ? void 0 : _b.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
                     instance.rebuildTree();
                 });
             }