@headless-tree/core 0.0.14 → 1.0.0

package/src/features/keyboard-drag-and-drop/keyboard-drag-and-drop.spec.ts

@@ -0,0 +1,402 @@
+import { describe, expect, it, vi } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { selectionFeature } from "../selection/feature";
+import { ItemInstance } from "../../types/core";
+import { propMemoizationFeature } from "../prop-memoization/feature";
+import { keyboardDragAndDropFeature } from "./feature";
+import { dragAndDropFeature } from "../drag-and-drop/feature";
+import { AssistiveDndState } from "./types";
+import { isOrderedDragTarget } from "../drag-and-drop/utils";
+
+const isItem = (item: unknown): item is ItemInstance<any> =>
+  !!item && typeof item === "object" && "getId" in item;
+const areItemsEqual = (a: ItemInstance<any>, b: ItemInstance<any>) => {
+  if (!isItem(a) || !isItem(b)) return undefined;
+  if (a.getId() === b.getId()) return true;
+  console.warn("Items are not equal:", a.getId(), b.getId());
+  return false;
+};
+expect.addEqualityTesters([areItemsEqual]);
+
+const factory = TestTree.default({
+  initialState: {
+    expandedItems: ["x1", "x11", "x2", "x21"],
+  },
+  onDrop: vi.fn(),
+}).withFeatures(
+  selectionFeature,
+  dragAndDropFeature,
+  keyboardDragAndDropFeature,
+  propMemoizationFeature,
+);
+
+describe("core-feature/keyboard-drag-and-drop", () => {
+  factory.forSuits((tree) => {
+    describe("happy paths", () => {
+      it("correct initial state", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 2,
+            dragLineIndex: 4,
+            dragLineLevel: 2,
+            insertionIndex: 0,
+            item: tree.item("x11"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Started);
+      });
+
+      it("moves down 1", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 5,
+            dragLineLevel: 2,
+            insertionIndex: 1,
+            item: tree.item("x11"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Dragging);
+      });
+
+      it("moves down 2", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 4,
+            dragLineIndex: 6,
+            dragLineLevel: 2,
+            insertionIndex: 2,
+            item: tree.item("x11"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Dragging);
+      });
+
+      it("reparent down", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 1,
+            dragLineIndex: 6,
+            dragLineLevel: 1,
+            insertionIndex: 1,
+            item: tree.item("x1"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+      });
+
+      it("doesn't reparent further", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", {
+          dragTarget: { item: tree.item("x12") },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+      });
+
+      it("reparent back up", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragUp");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 4,
+            dragLineIndex: 6,
+            dragLineLevel: 2,
+            insertionIndex: 2,
+            item: tree.item("x11"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+      });
+    });
+
+    describe("dropping", () => {
+      it("drops below starting items", async () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("completeDrag");
+        tree.expect.dropped(["x111", "x112"], {
+          childIndex: 4,
+          insertionIndex: 2,
+          dragLineIndex: 6,
+          dragLineLevel: 2,
+          item: tree.item("x11"),
+        });
+        await vi.waitFor(() =>
+          tree.expect.substate(
+            "assistiveDndState",
+            AssistiveDndState.Completed,
+          ),
+        );
+      });
+
+      it("drops above starting items", async () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragUp");
+        tree.do.hotkey("dragUp");
+        tree.do.hotkey("completeDrag");
+        tree.expect.dropped(["x111", "x112"], {
+          childIndex: 0,
+          insertionIndex: 0,
+          dragLineIndex: 2,
+          dragLineLevel: 2,
+          item: tree.item("x11"),
+        });
+        await vi.waitFor(() =>
+          tree.expect.substate(
+            "assistiveDndState",
+            AssistiveDndState.Completed,
+          ),
+        );
+      });
+
+      it("drops inside folder", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("completeDrag");
+        tree.expect.dropped(["x111", "x112"], {
+          item: tree.item("x12"),
+        });
+      });
+
+      it("cancels drag", async () => {
+        const onDrop = tree.mockedHandler("onDrop");
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("cancelDrag");
+        expect(onDrop).not.toBeCalled();
+        tree.expect.substate("dnd", null);
+        tree.expect.substate("assistiveDndState", AssistiveDndState.None);
+      });
+    });
+
+    describe("foreign drag", () => {
+      it("drags items out of tree", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        expect(tree.instance.getState().dnd?.draggedItems).toStrictEqual([
+          tree.item("x111"),
+          tree.item("x112"),
+        ]);
+        tree.instance.stopKeyboardDrag();
+        expect(tree.instance.getState().dnd).toBe(null);
+      });
+
+      it("drags items inside of tree", async () => {
+        tree.mockedHandler("canDropForeignDragObject").mockReturnValue(true);
+        tree.item("x111").setFocused();
+        const dataTransfer = {
+          getData: vi.fn().mockReturnValue("hello world"),
+        };
+        tree.instance.startKeyboardDragOnForeignObject(
+          dataTransfer as unknown as DataTransfer,
+        );
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Started);
+        tree.expect.substate("dnd", {
+          draggedItems: undefined,
+          dragTarget: {
+            childIndex: 1,
+            dragLineIndex: 3,
+            dragLineLevel: 2,
+            insertionIndex: 1,
+            item: tree.item("x11"),
+          },
+        });
+      });
+
+      it("starts at first valid location when dragging foreign object", async () => {
+        const canDropForeignDragObject = tree
+          .mockedHandler("canDropForeignDragObject")
+          .mockReturnValue(true);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        tree.item("x111").setFocused();
+        const dataTransfer = {
+          getData: vi.fn().mockReturnValue("hello world"),
+        };
+        tree.instance.startKeyboardDragOnForeignObject(
+          dataTransfer as unknown as DataTransfer,
+        );
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Started);
+        tree.expect.substate("dnd", {
+          draggedItems: undefined,
+          dragTarget: {
+            childIndex: 2,
+            dragLineIndex: 4,
+            dragLineLevel: 2,
+            insertionIndex: 2,
+            item: tree.item("x11"),
+          },
+        });
+      });
+
+      it("skips invalid positions to inbetween when dragging foreign object", async () => {
+        const canDropForeignDragObject = tree
+          .mockedHandler("canDropForeignDragObject")
+          .mockReturnValue(true);
+        tree.item("x111").setFocused();
+        const dataTransfer = {
+          getData: vi.fn().mockReturnValue("hello world"),
+        };
+        tree.instance.startKeyboardDragOnForeignObject(
+          dataTransfer as unknown as DataTransfer,
+        );
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Dragging);
+        tree.expect.substate("dnd", {
+          draggedItems: undefined,
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 5,
+            dragLineLevel: 2,
+            insertionIndex: 3,
+            item: tree.item("x11"),
+          },
+        });
+      });
+
+      it("skips invalid positions to folder when dragging foreign object", async () => {
+        const canDropForeignDragObject = tree
+          .mockedHandler("canDropForeignDragObject")
+          .mockReturnValue(true);
+        tree.item("x111").setFocused();
+        const dataTransfer = {
+          getData: vi.fn().mockReturnValue("hello world"),
+        };
+        tree.instance.startKeyboardDragOnForeignObject(
+          dataTransfer as unknown as DataTransfer,
+        );
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Dragging);
+        tree.expect.substate("dnd", {
+          draggedItems: undefined,
+          dragTarget: {
+            item: tree.item("x114"),
+          },
+        });
+      });
+    });
+
+    describe("drag restrictions", () => {
+      const expectChildIndex = (index: number) => {
+        const state = tree.instance.getState().dnd?.dragTarget;
+        if (!state || !isOrderedDragTarget(state))
+          throw new Error("No childIndex");
+        expect(state.childIndex).toEqual(index);
+      };
+
+      it("doesnt drag when canDrag=false", () => {
+        const canDrag = tree.mockedHandler("canDrag").mockReturnValue(false);
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        expect(canDrag).toHaveBeenCalledWith([
+          tree.item("x111"),
+          tree.item("x112"),
+        ]);
+        tree.expect.substate("dnd", undefined);
+        tree.expect.substate("assistiveDndState", undefined);
+      });
+
+      it("skips positions during arrowing that have canDrop=false", () => {
+        // note that, with mocked canDrop, non-folders are viable targets
+        const canDrop = tree.mockedHandler("canDrop").mockReturnValue(true);
+        tree.do.selectMultiple("x111");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        expect(canDrop).toBeCalled();
+        expectChildIndex(2);
+
+        canDrop.mockReturnValueOnce(false);
+        canDrop.mockReturnValueOnce(false);
+        canDrop.mockReturnValueOnce(false);
+        tree.do.hotkey("dragDown");
+        expectChildIndex(4);
+      });
+
+      it("doesnt go below end of tree", () => {
+        const lastState = {
+          draggedItems: [tree.item("x111")],
+          dragTarget: {
+            item: tree.item("x"),
+            childIndex: 4,
+            dragLineIndex: 20,
+            dragLineLevel: 0,
+            insertionIndex: 4,
+          },
+        };
+
+        tree.do.selectMultiple("x111");
+        tree.item("x3").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", lastState);
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", lastState);
+      });
+
+      it("doesnt go above top of tree", () => {
+        const firstState = {
+          draggedItems: [tree.item("x111")],
+          dragTarget: {
+            item: tree.item("x"),
+            childIndex: 0,
+            dragLineIndex: 0,
+            dragLineLevel: 0,
+            insertionIndex: 0,
+          },
+        };
+
+        tree.do.selectMultiple("x111");
+        tree.item("x1").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragUp");
+        tree.do.hotkey("dragUp");
+        tree.expect.substate("dnd", firstState);
+        tree.do.hotkey("dragUp");
+        tree.expect.substate("dnd", firstState);
+      });
+    });
+  });
+});

package/src/features/keyboard-drag-and-drop/types.ts

@@ -0,0 +1,30 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+
+export interface KDndDataRef {
+  kDndDataTransfer: DataTransfer | undefined;
+}
+
+export enum AssistiveDndState {
+  None,
+  Started,
+  Dragging,
+  Completed,
+  Aborted,
+}
+
+export type KeyboardDragAndDropFeatureDef<T> = {
+  state: {
+    assistiveDndState?: AssistiveDndState | null;
+  };
+  config: {
+    setAssistiveDndState?: SetStateFn<AssistiveDndState | undefined | null>;
+    onStartKeyboardDrag?: (items: ItemInstance<T>[]) => void;
+  };
+  treeInstance: {
+    startKeyboardDrag: (items: ItemInstance<T>[]) => void;
+    startKeyboardDragOnForeignObject: (dataTransfer: DataTransfer) => void;
+    stopKeyboardDrag: () => void;
+  };
+  itemInstance: {};
+  hotkeys: "startDrag" | "cancelDrag" | "completeDrag" | "dragUp" | "dragDown";
+};

package/src/features/prop-memoization/feature.ts

@@ -3,15 +3,14 @@ import { PropMemoizationDataRef } from "./types";
 
 const memoize = (
   props: Record<string, any>,
-  dataRef: PropMemoizationDataRef,
+  memoizedProps: Record<string, any>,
 ) => {
-  dataRef.memoizedProps ??= {};
   for (const key in props) {
     if (typeof props[key] === "function") {
-      if (key in dataRef.memoizedProps) {
-        props[key] = dataRef.memoizedProps[key];
+      if (memoizedProps && key in memoizedProps) {
+        props[key] = memoizedProps[key];
       } else {
-        dataRef.memoizedProps[key] = props[key];
+        memoizedProps[key] = props[key];
       }
     }
   }
@@ -34,10 +33,20 @@ export const propMemoizationFeature: FeatureImplementation = {
   ],
 
   treeInstance: {
-    getContainerProps: ({ tree, prev }) => {
+    getContainerProps: ({ tree, prev }, treeLabel) => {
+      const dataRef = tree.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.(treeLabel) ?? {};
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.tree ??= {};
+      return memoize(props, dataRef.current.memo.tree);
+    },
+
+    getSearchInputElementProps: ({ tree, prev }) => {
       const dataRef = tree.getDataRef<PropMemoizationDataRef>();
       const props = prev?.() ?? {};
-      return memoize(props, dataRef.current);
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.search ??= {};
+      return memoize(props, dataRef.current.memo.search);
     },
   },
 
@@ -45,7 +54,17 @@ export const propMemoizationFeature: FeatureImplementation = {
     getProps: ({ item, prev }) => {
       const dataRef = item.getDataRef<PropMemoizationDataRef>();
       const props = prev?.() ?? {};
-      return memoize(props, dataRef.current);
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.item ??= {};
+      return memoize(props, dataRef.current.memo.item);
+    },
+
+    getRenameInputProps: ({ item, prev }) => {
+      const dataRef = item.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.rename ??= {};
+      return memoize(props, dataRef.current.memo.rename);
     },
   },
 };

package/src/features/prop-memoization/prop-memoization.spec.ts

@@ -17,8 +17,8 @@ const customFeature: FeatureImplementation = {
     }),
   },
   treeInstance: {
-    getContainerProps: ({ prev }) => ({
-      ...prev?.(),
+    getContainerProps: ({ prev }, treeLabel) => ({
+      ...prev?.(treeLabel),
       customValue: createTreeValue(),
       onCustomEvent: () => treeHandler(),
     }),

package/src/features/prop-memoization/types.ts

@@ -1,6 +1,11 @@
-export type PropMemoizationDataRef = {
-  memoizedProps?: Record<string, any>;
-};
+export interface PropMemoizationDataRef {
+  memo?: {
+    tree?: Record<string, any>;
+    item?: Record<string, any>;
+    search?: Record<string, any>;
+    rename?: Record<string, any>;
+  };
+}
 
 export type PropMemoizationFeatureDef = {
   state: {};

package/src/features/renaming/feature.ts

@@ -1,6 +1,12 @@
 import { FeatureImplementation, ItemInstance } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
 
+type InputEvent = {
+  target?: {
+    value: string;
+  };
+};
+
 export const renamingFeature: FeatureImplementation = {
   key: "renaming",
 
@@ -53,10 +59,10 @@ export const renamingFeature: FeatureImplementation = {
     },
 
     getRenameInputProps: ({ tree }) => ({
+      ref: (r: HTMLInputElement) => r?.focus(),
       onBlur: () => tree.abortRenaming(),
       value: tree.getRenamingValue(),
-      onChange: (e: any) => {
-        // TODO custom type with e.target.value
+      onChange: (e: InputEvent) => {
         tree.applySubStateUpdate("renamingValue", e.target?.value);
       },
     }),

package/src/features/search/feature.ts

@@ -56,10 +56,12 @@ export const searchFeature: FeatureImplementation = {
     getSearchInputElement: ({ tree }) =>
       tree.getDataRef<SearchFeatureDataRef>().current.searchInput ?? null,
 
+    // TODO memoize with propMemoizationFeature
     getSearchInputElementProps: ({ tree }) => ({
       value: tree.getSearchValue(),
       onChange: (e: any) => tree.setSearch(e.target.value),
       onBlur: () => tree.closeSearch(),
+      ref: tree.registerSearchInputElement,
     }),
 
     getSearchMatchingItems: memo(

package/src/features/search/types.ts

@@ -1,10 +1,10 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
 import { HotkeysCoreDataRef } from "../hotkeys-core/types";
 
-export type SearchFeatureDataRef<T = any> = HotkeysCoreDataRef & {
+export interface SearchFeatureDataRef<T = any> extends HotkeysCoreDataRef {
   matchingItems: ItemInstance<T>[];
   searchInput: HTMLInputElement | null;
-};
+}
 
 export type SearchFeatureDef<T> = {
   state: {

package/src/features/selection/feature.ts

@@ -23,7 +23,6 @@ export const selectionFeature: FeatureImplementation = {
       tree.applySubStateUpdate("selectedItems", selectedItems);
     },
 
-    // TODO memo
     getSelectedItems: ({ tree }) => {
       return tree.getState().selectedItems.map(tree.getItemInstance);
     },
@@ -103,9 +102,10 @@ export const selectionFeature: FeatureImplementation = {
     //     tree.setSelectedItems([tree.getFocusedItem().getId()]);
     //   },
     // },
-    toggleSelectItem: {
-      hotkey: "ctrl+space",
-      handler: (e, tree) => {
+    toggleSelectedItem: {
+      hotkey: "Control+Space",
+      preventDefault: true,
+      handler: (_, tree) => {
         tree.getFocusedItem().toggleSelect();
       },
     },

package/src/features/selection/types.ts

@@ -19,7 +19,7 @@ export type SelectionFeatureDef<T> = {
     selectUpTo: (ctrl: boolean) => void;
   };
   hotkeys:
-    | "toggleSelectItem"
+    | "toggleSelectedItem"
     | "selectUpwards"
     | "selectDownwards"
     | "selectAll";

package/src/features/sync-data-loader/feature.ts

@@ -1,29 +1,48 @@
 import { FeatureImplementation } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
+import { throwError } from "../../utilities/errors";
+
+const promiseErrorMessage = "sync dataLoader returned promise";
 
 export const syncDataLoaderFeature: FeatureImplementation = {
   key: "sync-data-loader",
 
   getInitialState: (initialState) => ({
-    loadingItems: [],
+    loadingItemData: [],
+    loadingItemChildrens: [],
     ...initialState,
   }),
 
   getDefaultConfig: (defaultConfig, tree) => ({
-    setLoadingItems: makeStateUpdater("loadingItems", tree),
+    setLoadingItemData: makeStateUpdater("loadingItemData", tree),
+    setLoadingItemChildrens: makeStateUpdater("loadingItemChildrens", tree),
     ...defaultConfig,
   }),
 
   stateHandlerNames: {
-    loadingItems: "setLoadingItems",
+    loadingItemData: "setLoadingItemData",
+    loadingItemChildrens: "setLoadingItemChildrens",
   },
 
   treeInstance: {
-    retrieveItemData: ({ tree }, itemId) =>
-      tree.getConfig().dataLoader!.getItem(itemId),
+    waitForItemDataLoaded: async () => {},
+    waitForItemChildrenLoaded: async () => {},
+
+    retrieveItemData: ({ tree }, itemId) => {
+      const data = tree.getConfig().dataLoader.getItem(itemId);
+      if (typeof data === "object" && "then" in data) {
+        throw throwError(promiseErrorMessage);
+      }
+      return data;
+    },
 
-    retrieveChildrenIds: ({ tree }, itemId) =>
-      tree.getConfig().dataLoader!.getChildren(itemId),
+    retrieveChildrenIds: ({ tree }, itemId) => {
+      const data = tree.getConfig().dataLoader.getChildren(itemId);
+      if (typeof data === "object" && "then" in data) {
+        throw throwError(promiseErrorMessage);
+      }
+      return data;
+    },
   },
 
   itemInstance: {

package/src/features/sync-data-loader/types.ts

@@ -1,13 +1,13 @@
-export type SyncTreeDataLoader<T> = {
-  getItem: (itemId: string) => T;
-  getChildren: (itemId: string) => string[];
-};
+export interface TreeDataLoader<T> {
+  getItem: (itemId: string) => T | Promise<T>;
+  getChildren: (itemId: string) => string[] | Promise<string[]>;
+}
 
 export type SyncDataLoaderFeatureDef<T> = {
   state: {};
   config: {
     rootItemId: string;
-    dataLoader?: SyncTreeDataLoader<T>;
+    dataLoader: TreeDataLoader<T>;
   };
   treeInstance: {
     retrieveItemData: (itemId: string) => T;