@headless-tree/core 0.0.10 → 0.0.12

package/src/features/expand-all/expand-all.spec.ts

@@ -0,0 +1,56 @@
+import { describe, it } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { expandAllFeature } from "./feature";
+import { propMemoizationFeature } from "../prop-memoization/feature";
+
+const factory = TestTree.default({}).withFeatures(
+  expandAllFeature,
+  propMemoizationFeature,
+);
+
+describe("core-feature/expand-all", () => {
+  factory.forSuits((tree) => {
+    describe("tree instance calls", () => {
+      it("expands all", async () => {
+        const expandPromise = tree.instance.expandAll();
+        await tree.resolveAsyncVisibleItems();
+        await expandPromise;
+        tree.expect.foldersExpanded("x12", "x13", "x14", "x4", "x41", "x44");
+      });
+
+      it("collapses all", () => {
+        tree.instance.collapseAll();
+        tree.expect.foldersCollapsed("x1", "x2", "x3", "x4");
+      });
+
+      it("cancels expanding all", async () => {
+        const token = { current: true };
+        const expandPromise = tree.instance.expandAll(token);
+        token.current = false;
+        await tree.resolveAsyncVisibleItems();
+        await expandPromise;
+        tree.expect.foldersCollapsed("x2", "x3", "x4");
+      });
+    });
+
+    describe("item instance calls", () => {
+      it("expands all", async () => {
+        const expandPromise = Promise.all([
+          // not sure why all are needed...
+          tree.instance.getItemInstance("x1").expandAll(),
+          tree.instance.getItemInstance("x2").expandAll(),
+          tree.instance.getItemInstance("x3").expandAll(),
+          tree.instance.getItemInstance("x4").expandAll(),
+        ]);
+        await tree.resolveAsyncVisibleItems();
+        await expandPromise;
+        tree.expect.foldersExpanded("x2", "x21", "x24");
+      });
+
+      it("collapses all", () => {
+        tree.instance.collapseAll();
+        tree.expect.foldersCollapsed("x1", "x2", "x3", "x4");
+      });
+    });
+  });
+});

package/src/features/expand-all/feature.ts

@@ -1,39 +1,24 @@
 import { FeatureImplementation } from "../../types/core";
-import { ExpandAllFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
 import { poll } from "../../utils";
 
-export const expandAllFeature: FeatureImplementation<
-  any,
-  ExpandAllFeatureDef,
-  | MainFeatureDef
-  | TreeFeatureDef<any>
-  | SyncDataLoaderFeatureDef<any>
-  | ExpandAllFeatureDef
-> = {
+export const expandAllFeature: FeatureImplementation = {
   key: "expand-all",
 
-  createTreeInstance: (prev, tree) => ({
-    ...prev,
-
-    expandAll: async (cancelToken) => {
+  treeInstance: {
+    expandAll: async ({ tree }, cancelToken) => {
       await Promise.all(
         tree.getItems().map((item) => item.expandAll(cancelToken)),
       );
     },
 
-    collapseAll: () => {
+    collapseAll: ({ tree }) => {
       tree.applySubStateUpdate("expandedItems", []);
       tree.rebuildTree();
     },
-  }),
-
-  createItemInstance: (prev, item, tree) => ({
-    ...prev,
+  },
 
-    expandAll: async (cancelToken) => {
+  itemInstance: {
+    expandAll: async ({ tree, item }, cancelToken) => {
       if (cancelToken?.current) {
         return;
       }
@@ -53,11 +38,11 @@ export const expandAllFeature: FeatureImplementation<
       );
     },
 
-    collapseAll: () => {
+    collapseAll: ({ item }) => {
       for (const child of item.getChildren()) {
         child?.collapseAll();
       }
       item.collapse();
     },
-  }),
+  },
 };

package/src/features/hotkeys-core/feature.ts

@@ -3,12 +3,7 @@ import {
   HotkeysConfig,
   TreeInstance,
 } from "../../types/core";
-import {
-  HotkeyConfig,
-  HotkeysCoreDataRef,
-  HotkeysCoreFeatureDef,
-} from "./types";
-import { MainFeatureDef } from "../main/types";
+import { HotkeyConfig, HotkeysCoreDataRef } from "./types";
 
 const specialKeys: Record<string, RegExp> = {
   Letter: /^[a-z]$/,
@@ -34,19 +29,15 @@ const testHotkeyMatch = (
 const findHotkeyMatch = (
   pressedKeys: Set<string>,
   tree: TreeInstance<any>,
-  config1: HotkeysConfig<any, any>,
-  config2: HotkeysConfig<any, any>,
+  config1: HotkeysConfig<any>,
+  config2: HotkeysConfig<any>,
 ) => {
   return Object.entries({ ...config1, ...config2 }).find(([, hotkey]) =>
     testHotkeyMatch(pressedKeys, tree, hotkey),
-  )?.[0];
+  )?.[0] as keyof HotkeysConfig<any> | undefined;
 };
 
-export const hotkeysCoreFeature: FeatureImplementation<
-  any,
-  HotkeysCoreFeatureDef<any>,
-  MainFeatureDef | HotkeysCoreFeatureDef<any>
-> = {
+export const hotkeysCoreFeature: FeatureImplementation = {
   key: "hotkeys-core",
 
   onTreeMount: (tree, element) => {

package/src/features/main/types.ts

@@ -4,18 +4,31 @@ import {
   ItemInstance,
   SetStateFn,
   TreeConfig,
+  TreeInstance,
   TreeState,
   Updater,
 } from "../../types/core";
 import { ItemMeta } from "../tree/types";
 
+export type InstanceTypeMap = {
+  itemInstance: ItemInstance<any>;
+  treeInstance: TreeInstance<any>;
+};
+
+export type InstanceBuilder = <T extends keyof InstanceTypeMap>(
+  features: FeatureImplementation[],
+  instanceType: T,
+  buildOpts: (self: any) => any,
+) => [instance: InstanceTypeMap[T], finalize: () => void];
+
 export type MainFeatureDef<T = any> = {
   state: {};
   config: {
     features?: FeatureImplementation<any>[];
     initialState?: Partial<TreeState<T>>;
     state?: Partial<TreeState<T>>;
-    setState?: SetStateFn<TreeState<T>>;
+    setState?: SetStateFn<Partial<TreeState<T>>>;
+    instanceBuilder?: InstanceBuilder;
   };
   treeInstance: {
     /** @internal */

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

@@ -0,0 +1,51 @@
+import { FeatureImplementation } from "../../types/core";
+import { PropMemoizationDataRef } from "./types";
+
+const memoize = (
+  props: Record<string, any>,
+  dataRef: PropMemoizationDataRef,
+) => {
+  dataRef.memoizedProps ??= {};
+  for (const key in props) {
+    if (typeof props[key] === "function") {
+      if (key in dataRef.memoizedProps) {
+        props[key] = dataRef.memoizedProps[key];
+      } else {
+        dataRef.memoizedProps[key] = props[key];
+      }
+    }
+  }
+  return props;
+};
+
+export const propMemoizationFeature: FeatureImplementation = {
+  key: "prop-memoization",
+
+  overwrites: [
+    "main",
+    "async-data-loader",
+    "sync-data-loader",
+    "drag-and-drop",
+    "expand-all",
+    "hotkeys-core",
+    "renaming",
+    "search",
+    "selection",
+  ],
+
+  treeInstance: {
+    getContainerProps: ({ tree, prev }) => {
+      const dataRef = tree.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      return memoize(props, dataRef.current);
+    },
+  },
+
+  itemInstance: {
+    getProps: ({ item, prev }) => {
+      const dataRef = item.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      return memoize(props, dataRef.current);
+    },
+  },
+};

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

@@ -0,0 +1,68 @@
+import { describe, expect, it, vi } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { propMemoizationFeature } from "./feature";
+import { FeatureImplementation } from "../../types/core";
+
+const itemHandler = vi.fn();
+const treeHandler = vi.fn();
+const createItemValue = vi.fn();
+const createTreeValue = vi.fn();
+
+const customFeature: FeatureImplementation = {
+  itemInstance: {
+    getProps: ({ prev }) => ({
+      ...prev?.(),
+      customValue: createItemValue(),
+      onCustomEvent: () => itemHandler(),
+    }),
+  },
+  treeInstance: {
+    getContainerProps: ({ prev }) => ({
+      ...prev?.(),
+      customValue: createTreeValue(),
+      onCustomEvent: () => treeHandler(),
+    }),
+  },
+};
+
+const factory = TestTree.default({}).withFeatures(
+  customFeature,
+  propMemoizationFeature,
+);
+
+describe("core-feature/prop-memoization", () => {
+  it("memoizes props", async () => {
+    const tree = await factory.suits.sync().tree.createTestCaseTree();
+    createTreeValue.mockReturnValue(123);
+    expect(tree.instance.getContainerProps().onCustomEvent).toBe(
+      tree.instance.getContainerProps().onCustomEvent,
+    );
+    expect(tree.instance.getContainerProps().customValue).toBe(123);
+    expect(tree.instance.getContainerProps().customValue).toBe(123);
+  });
+  factory.forSuits((tree) => {
+    describe("tree props", () => {
+      it("memoizes props", async () => {
+        createTreeValue.mockReturnValue(123);
+        expect(tree.instance.getContainerProps().onCustomEvent).toBe(
+          tree.instance.getContainerProps().onCustomEvent,
+        );
+        expect(tree.instance.getContainerProps().customValue).toBe(123);
+        expect(tree.instance.getContainerProps().customValue).toBe(123);
+      });
+
+      it("doesnt return stale values", async () => {
+        createTreeValue.mockReturnValueOnce(123);
+        createTreeValue.mockReturnValueOnce(456);
+        expect(tree.instance.getContainerProps().customValue).toBe(123);
+        expect(tree.instance.getContainerProps().customValue).toBe(456);
+      });
+
+      it("propagates calls properly", async () => {
+        tree.instance.getContainerProps().onCustomEvent();
+        tree.instance.getContainerProps().onCustomEvent();
+        expect(treeHandler).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,11 @@
+export type PropMemoizationDataRef = {
+  memoizedProps?: Record<string, any>;
+};
+
+export type PropMemoizationFeatureDef = {
+  state: {};
+  config: {};
+  treeInstance: {};
+  itemInstance: {};
+  hotkeys: never;
+};

package/src/features/renaming/feature.ts

@@ -1,14 +1,7 @@
 import { FeatureImplementation, ItemInstance } from "../../types/core";
-import { RenamingFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
 import { makeStateUpdater } from "../../utils";
 
-export const renamingFeature: FeatureImplementation<
-  any,
-  RenamingFeatureDef<any>,
-  MainFeatureDef | TreeFeatureDef<any> | RenamingFeatureDef<any>
-> = {
+export const renamingFeature: FeatureImplementation = {
   key: "renaming",
 
   getDefaultConfig: (defaultConfig, tree) => ({
@@ -23,64 +16,63 @@ export const renamingFeature: FeatureImplementation<
     renamingValue: "setRenamingValue",
   },
 
-  createTreeInstance: (prev, instance) => ({
-    ...prev,
-
-    startRenamingItem: (itemId) => {
-      const item = instance.getItemInstance(itemId);
-
-      if (!item.canRename()) {
-        return;
-      }
-
-      instance.applySubStateUpdate("renamingItem", itemId);
-      instance.applySubStateUpdate("renamingValue", item.getItemName());
-    },
-
-    getRenamingItem: () => {
-      const itemId = instance.getState().renamingItem;
-      return itemId ? instance.getItemInstance(itemId) : null;
+  treeInstance: {
+    getRenamingItem: ({ tree }) => {
+      const itemId = tree.getState().renamingItem;
+      return itemId ? tree.getItemInstance(itemId) : null;
     },
 
-    getRenamingValue: () => instance.getState().renamingValue || "",
+    getRenamingValue: ({ tree }) => tree.getState().renamingValue || "",
 
-    abortRenaming: () => {
-      instance.applySubStateUpdate("renamingItem", null);
+    abortRenaming: ({ tree }) => {
+      tree.applySubStateUpdate("renamingItem", null);
+      tree.updateDomFocus();
     },
 
-    completeRenaming: () => {
-      const config = instance.getConfig();
-      const item = instance.getRenamingItem();
+    completeRenaming: ({ tree }) => {
+      const config = tree.getConfig();
+      const item = tree.getRenamingItem();
       if (item) {
-        config.onRename?.(item, instance.getState().renamingValue || "");
+        config.onRename?.(item, tree.getState().renamingValue || "");
       }
-      instance.applySubStateUpdate("renamingItem", null);
+      tree.applySubStateUpdate("renamingItem", null);
+      tree.updateDomFocus();
     },
 
-    isRenamingItem: () => !!instance.getState().renamingItem,
-  }),
+    isRenamingItem: ({ tree }) => !!tree.getState().renamingItem,
+  },
+
+  itemInstance: {
+    startRenaming: ({ tree, item, itemId }) => {
+      if (!item.canRename()) {
+        return;
+      }
 
-  createItemInstance: (prev, instance, tree) => ({
-    ...prev,
-    getRenameInputProps: () => ({
+      tree.applySubStateUpdate("renamingItem", itemId);
+      tree.applySubStateUpdate("renamingValue", item.getItemName());
+    },
+
+    getRenameInputProps: ({ tree }) => ({
       onBlur: () => tree.abortRenaming(),
       value: tree.getRenamingValue(),
-      onChange: (e) => {
-        tree.applySubStateUpdate("renamingValue", e.target.value);
+      onChange: (e: any) => {
+        // TODO custom type with e.target.value
+        tree.applySubStateUpdate("renamingValue", e.target?.value);
       },
     }),
 
-    canRename: () =>
-      tree.getConfig().canRename?.(instance as ItemInstance<any>) ?? true,
+    canRename: ({ tree, item }) =>
+      tree.getConfig().canRename?.(item as ItemInstance<any>) ?? true,
 
-    isRenaming: () => instance.getId() === tree.getState().renamingItem,
-  }),
+    isRenaming: ({ tree, item }) =>
+      item.getId() === tree.getState().renamingItem,
+  },
 
   hotkeys: {
     renameItem: {
       hotkey: "F2",
       handler: (e, tree) => {
-        tree.startRenamingItem(tree.getFocusedItem().getId());
+        tree.getFocusedItem().startRenaming();
       },
     },
 

package/src/features/renaming/renaming.spec.ts

@@ -0,0 +1,127 @@
+import { describe, expect, it } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { renamingFeature } from "./feature";
+import { selectionFeature } from "../selection/feature";
+import { propMemoizationFeature } from "../prop-memoization/feature";
+
+const factory = TestTree.default({}).withFeatures(
+  renamingFeature,
+  selectionFeature,
+  propMemoizationFeature,
+);
+
+describe("core-feature/renaming", () => {
+  factory.forSuits((tree) => {
+    it("starts and aborts renaming", () => {
+      tree.item("x1").startRenaming();
+      expect(tree.instance.isRenamingItem()).toBe(true);
+      expect(tree.instance.getRenamingValue()).toBe("x1");
+      tree.instance.abortRenaming();
+      expect(tree.instance.isRenamingItem()).toBe(false);
+    });
+
+    it("stops renaming by blurring", () => {
+      tree.item("x1").startRenaming();
+      tree.instance.getRenamingItem()!.getRenameInputProps().onBlur();
+      expect(tree.instance.isRenamingItem()).toBe(false);
+    });
+
+    it("completes renaming programmatically", () => {
+      const onRename = tree.mockedHandler("onRename");
+
+      tree.item("x1").startRenaming();
+      expect(tree.instance.getRenamingItem()!.getRenameInputProps().value).toBe(
+        "x1",
+      );
+      tree.instance
+        .getRenamingItem()!
+        .getRenameInputProps()
+        .onChange({
+          target: { value: "renamed" },
+        });
+      expect(tree.instance.getRenamingItem()!.getRenameInputProps().value).toBe(
+        "renamed",
+      );
+      tree.instance.completeRenaming();
+      expect(onRename).toHaveBeenCalledWith(
+        tree.instance.getItemInstance("x1"),
+        "renamed",
+      );
+      expect(tree.instance.isRenamingItem()).toBe(false);
+    });
+
+    it("invokes state setters when aborting", () => {
+      const setRenamingItem = tree.mockedHandler("setRenamingItem");
+      const setRenamingValue = tree.mockedHandler("setRenamingValue");
+      tree.item("x1").startRenaming();
+      expect(setRenamingItem).toHaveBeenCalledWith("x1");
+      expect(setRenamingValue).toHaveBeenCalledWith("x1");
+      tree.instance.abortRenaming();
+      expect(setRenamingItem).toHaveBeenCalledWith(null);
+    });
+
+    it("invokes state setters when completing", () => {
+      const setRenamingItem = tree.mockedHandler("setRenamingItem");
+      const setRenamingValue = tree.mockedHandler("setRenamingValue");
+      tree.item("x1").startRenaming();
+      tree.instance
+        .getRenamingItem()!
+        .getRenameInputProps()
+        .onChange({
+          target: { value: "renamed" },
+        });
+      expect(setRenamingItem).toHaveBeenCalledWith("x1");
+      expect(setRenamingValue).toHaveBeenCalledWith("renamed");
+      tree.instance.completeRenaming();
+      expect(setRenamingItem).toHaveBeenCalledWith(null);
+    });
+
+    it("changes renaming input content with input props", () => {
+      const setRenamingValue = tree.mockedHandler("setRenamingValue");
+      tree.item("x1").startRenaming();
+      tree.instance
+        .getRenamingItem()!
+        .getRenameInputProps()
+        .onChange({ target: { value: "New Name" } });
+      expect(setRenamingValue).toHaveBeenCalledWith("New Name");
+    });
+
+    it("aborts renaming with input props", () => {
+      const setRenamingItem = tree.mockedHandler("setRenamingItem");
+      tree.item("x1").startRenaming();
+      tree.instance.getRenamingItem()!.getRenameInputProps().onBlur();
+      expect(setRenamingItem).toHaveBeenCalledWith(null);
+    });
+
+    describe("hotkeys", () => {
+      it("starts renaming", () => {
+        const setRenamingItem = tree.mockedHandler("setRenamingItem");
+        tree.do.hotkey("renameItem");
+        expect(setRenamingItem).toHaveBeenCalledWith("x1");
+      });
+
+      it("aborts renaming with Escape key", () => {
+        const setRenamingItem = tree.mockedHandler("setRenamingItem");
+        tree.item("x1").startRenaming();
+        tree.do.hotkey("abortRenaming");
+        expect(setRenamingItem).toHaveBeenCalledWith(null);
+      });
+
+      it("completes renaming with Enter key", () => {
+        const onRename = tree.mockedHandler("onRename");
+        tree.item("x1").startRenaming();
+        tree.instance
+          .getRenamingItem()!
+          .getRenameInputProps()
+          .onChange({
+            target: { value: "renamed" },
+          });
+        tree.do.hotkey("completeRenaming");
+        expect(onRename).toHaveBeenCalledWith(
+          tree.instance.getItemInstance("x1"),
+          "renamed",
+        );
+      });
+    });
+  });
+});

package/src/features/renaming/types.ts

@@ -6,13 +6,12 @@ export type RenamingFeatureDef<T> = {
     renamingValue?: string;
   };
   config: {
-    setRenamingItem?: SetStateFn<string | null>;
+    setRenamingItem?: SetStateFn<string | null | undefined>;
     setRenamingValue?: SetStateFn<string | undefined>;
     canRename?: (item: ItemInstance<T>) => boolean;
     onRename?: (item: ItemInstance<T>, value: string) => void;
   };
   treeInstance: {
-    startRenamingItem: (itemId: string) => void;
     getRenamingItem: () => ItemInstance<T> | null;
     getRenamingValue: () => string;
     abortRenaming: () => void;
@@ -23,6 +22,7 @@ export type RenamingFeatureDef<T> = {
     getRenameInputProps: () => any;
     canRename: () => boolean;
     isRenaming: () => boolean;
+    startRenaming: () => void;
   };
   hotkeys: "renameItem" | "abortRenaming" | "completeRenaming";
 };