@headless-tree/core 0.0.11 → 0.0.13

package/src/core/core.spec.ts

@@ -0,0 +1,210 @@
+import { describe, expect, it, vi } from "vitest";
+import { TestTree } from "../test-utils/test-tree";
+
+declare module "../types/core" {
+  export interface TreeInstance<T> {
+    customHandler: (param1: number, param2: number) => void;
+  }
+  export interface ItemInstance<T> {
+    customHandler: (param1: number, param2: number) => void;
+  }
+}
+
+const handler1 = vi.fn(({ prev }, ...params) => prev?.(...params));
+const handler2 = vi.fn(({ prev }, ...params) => prev?.(...params));
+
+const factory = TestTree.default({});
+
+describe("core-feature/prop-memoization", () => {
+  factory.forSuits((tree) => {
+    describe("calls prev in correct order", () => {
+      it("tree instance with overwrite marks, order 1", async () => {
+        const testTree = await tree
+          .withFeatures(
+            {
+              key: "feature2",
+              overwrites: ["feature1"],
+              treeInstance: {
+                customHandler: handler1,
+              },
+            },
+            {
+              key: "feature1",
+              treeInstance: {
+                customHandler: () => 123,
+              },
+            },
+            {
+              key: "feature3",
+              overwrites: ["feature2"],
+              treeInstance: {
+                customHandler: handler2,
+              },
+            },
+          )
+          .createTestCaseTree();
+
+        expect(testTree.instance.customHandler(1, 2)).toBe(123);
+        expect(handler2).toHaveBeenCalledBefore(handler1);
+        expect(handler1).toBeCalledWith(expect.anything(), 1, 2);
+        expect(handler2).toBeCalledWith(expect.anything(), 1, 2);
+      });
+
+      it("tree instance with overwrite marks, order 2", async () => {
+        const testTree = await tree
+          .withFeatures(
+            {
+              key: "feature3",
+              overwrites: ["feature2"],
+              treeInstance: {
+                customHandler: handler2,
+              },
+            },
+            {
+              key: "feature2",
+              overwrites: ["feature1"],
+              treeInstance: {
+                customHandler: handler1,
+              },
+            },
+            {
+              key: "feature1",
+              treeInstance: {
+                customHandler: () => 123,
+              },
+            },
+          )
+          .createTestCaseTree();
+
+        expect(testTree.instance.customHandler(1, 2)).toBe(123);
+        expect(handler2).toHaveBeenCalledBefore(handler1);
+        expect(handler1).toBeCalledWith(expect.anything(), 1, 2);
+        expect(handler2).toBeCalledWith(expect.anything(), 1, 2);
+      });
+
+      it("tree instance with implicit order", async () => {
+        const testTree = await tree
+          .withFeatures(
+            {
+              key: "feature1",
+              treeInstance: {
+                customHandler: () => 123,
+              },
+            },
+            {
+              key: "feature2",
+              treeInstance: {
+                customHandler: handler1,
+              },
+            },
+            {
+              key: "feature3",
+              treeInstance: {
+                customHandler: handler2,
+              },
+            },
+          )
+          .createTestCaseTree();
+
+        expect(testTree.instance.customHandler(1, 2)).toBe(123);
+        expect(handler2).toHaveBeenCalledBefore(handler1);
+        expect(handler1).toBeCalledWith(expect.anything(), 1, 2);
+        expect(handler2).toBeCalledWith(expect.anything(), 1, 2);
+      });
+
+      it("item instance with overwrite marks, order 1", async () => {
+        const testTree = await tree
+          .withFeatures(
+            {
+              key: "feature2",
+              overwrites: ["feature1"],
+              itemInstance: {
+                customHandler: handler1,
+              },
+            },
+            {
+              key: "feature1",
+              itemInstance: {
+                customHandler: () => 123,
+              },
+            },
+            {
+              key: "feature3",
+              overwrites: ["feature2"],
+              itemInstance: {
+                customHandler: handler2,
+              },
+            },
+          )
+          .createTestCaseTree();
+
+        expect(testTree.item("x111").customHandler(1, 2)).toBe(123);
+        expect(handler2).toHaveBeenCalledBefore(handler1);
+        expect(handler1).toBeCalledWith(expect.anything(), 1, 2);
+        expect(handler2).toBeCalledWith(expect.anything(), 1, 2);
+      });
+
+      it("item instance with overwrite marks, order 2", async () => {
+        const testTree = await tree
+          .withFeatures(
+            {
+              key: "feature3",
+              overwrites: ["feature2"],
+              itemInstance: {
+                customHandler: handler2,
+              },
+            },
+            {
+              key: "feature2",
+              overwrites: ["feature1"],
+              itemInstance: {
+                customHandler: handler1,
+              },
+            },
+            {
+              key: "feature1",
+              itemInstance: {
+                customHandler: () => 123,
+              },
+            },
+          )
+          .createTestCaseTree();
+
+        expect(testTree.item("x111").customHandler(1, 2)).toBe(123);
+        expect(handler2).toHaveBeenCalledBefore(handler1);
+        expect(handler1).toBeCalledWith(expect.anything(), 1, 2);
+        expect(handler2).toBeCalledWith(expect.anything(), 1, 2);
+      });
+
+      it("item instance with implicit order", async () => {
+        const testTree = await tree
+          .withFeatures(
+            {
+              key: "feature1",
+              itemInstance: {
+                customHandler: () => 123,
+              },
+            },
+            {
+              key: "feature2",
+              itemInstance: {
+                customHandler: handler1,
+              },
+            },
+            {
+              key: "feature3",
+              itemInstance: {
+                customHandler: handler2,
+              },
+            },
+          )
+          .createTestCaseTree();
+
+        expect(testTree.item("x111").customHandler(1, 2)).toBe(123);
+        expect(handler2).toHaveBeenCalledBefore(handler1);
+        expect(handler1).toBeCalledWith(expect.anything(), 1, 2);
+        expect(handler2).toBeCalledWith(expect.anything(), 1, 2);
+      });
+    });
+  });
+});

package/src/core/create-tree.ts

@@ -7,7 +7,6 @@ import {
   TreeState,
   Updater,
 } from "../types/core";
-import { MainFeatureDef } from "../features/main/types";
 import { treeFeature } from "../features/tree/feature";
 import { ItemMeta } from "../features/tree/types";
 import { buildStaticInstance } from "./build-static-instance";
@@ -25,18 +24,20 @@ const verifyFeatures = (features: FeatureImplementation[] | undefined) => {
   }
 };
 
-const compareFeatures = (
-  feature1: FeatureImplementation,
-  feature2: FeatureImplementation,
-) => {
-  if (feature2.key && feature1.overwrites?.includes(feature2.key)) {
-    return 1;
-  }
-  return -1;
-};
+const compareFeatures =
+  (originalOrder: FeatureImplementation[]) =>
+  (feature1: FeatureImplementation, feature2: FeatureImplementation) => {
+    if (feature2.key && feature1.overwrites?.includes(feature2.key)) {
+      return 1;
+    }
+    if (feature1.key && feature2.overwrites?.includes(feature1.key)) {
+      return -1;
+    }
+    return originalOrder.indexOf(feature1) - originalOrder.indexOf(feature2);
+  };
 
 const sortFeatures = (features: FeatureImplementation[] = []) =>
-  features.sort(compareFeatures);
+  features.sort(compareFeatures(features));
 
 export const createTree = <T>(
   initialConfig: TreeConfig<T>,
@@ -128,11 +129,7 @@ export const createTree = <T>(
     }
   };
 
-  const mainFeature: FeatureImplementation<
-    T,
-    MainFeatureDef<T>,
-    MainFeatureDef<T>
-  > = {
+  const mainFeature: FeatureImplementation<T> = {
     key: "main",
     treeInstance: {
       getState: () => state,

package/src/features/async-data-loader/async-data-loader.spec.ts

@@ -1,8 +1,12 @@
 import { describe, expect, it, vi } from "vitest";
 import { TestTree } from "../../test-utils/test-tree";
 import { asyncDataLoaderFeature } from "./feature";
+import { propMemoizationFeature } from "../prop-memoization/feature";
 
-const tree = TestTree.default({}).withFeatures(asyncDataLoaderFeature);
+const tree = TestTree.default({}).withFeatures(
+  asyncDataLoaderFeature,
+  propMemoizationFeature,
+);
 
 describe("core-feature/selections", () => {
   tree.resetBeforeEach();
@@ -75,44 +79,21 @@ describe("core-feature/selections", () => {
     const suiteTree = tree.with({ asyncDataLoader: { getItem, getChildren } });
     suiteTree.resetBeforeEach();
 
-    it("invalidates item data on tree instance", async () => {
-      getItem.mockClear();
-      getItem.mockResolvedValueOnce("new");
-      suiteTree.instance.invalidateItemData("x1");
-      await suiteTree.resolveAsyncVisibleItems();
-      expect(getItem).toHaveBeenCalledWith("x1");
-      expect(suiteTree.instance.getItemInstance("x1").getItemData()).toBe(
-        "new",
-      );
-    });
-
     it("invalidates item data on item instance", async () => {
       getItem.mockClear();
       await suiteTree.resolveAsyncVisibleItems();
       getItem.mockResolvedValueOnce("new");
-      suiteTree.instance.getItemInstance("x1").invalidateItemData();
+      suiteTree.item("x1").invalidateItemData();
       await suiteTree.resolveAsyncVisibleItems();
       expect(getItem).toHaveBeenCalledWith("x1");
-      expect(suiteTree.instance.getItemInstance("x1").getItemData()).toBe(
-        "new",
-      );
-    });
-
-    it("invalidates children ids on tree instance", async () => {
-      getChildren.mockClear();
-      await suiteTree.resolveAsyncVisibleItems();
-      getChildren.mockResolvedValueOnce(["new1", "new2"]);
-      suiteTree.instance.invalidateChildrenIds("x1");
-      await suiteTree.resolveAsyncVisibleItems();
-      expect(getChildren).toHaveBeenCalledWith("x1");
-      suiteTree.expect.hasChildren("x1", ["new1", "new2"]);
+      expect(suiteTree.item("x1").getItemData()).toBe("new");
     });
 
     it("invalidates children ids on item instance", async () => {
       getChildren.mockClear();
       await suiteTree.resolveAsyncVisibleItems();
       getChildren.mockResolvedValueOnce(["new1", "new2"]);
-      suiteTree.instance.getItemInstance("x1").invalidateChildrenIds();
+      suiteTree.item("x1").invalidateChildrenIds();
       await suiteTree.resolveAsyncVisibleItems();
       expect(getChildren).toHaveBeenCalledWith("x1");
       suiteTree.expect.hasChildren("x1", ["new1", "new2"]);
@@ -121,17 +102,17 @@ describe("core-feature/selections", () => {
     it("doesnt call item data getter twice", async () => {
       await suiteTree.resolveAsyncVisibleItems();
       getItem.mockClear();
-      suiteTree.instance.invalidateItemData("x1");
+      suiteTree.item("x1").invalidateItemData();
       await suiteTree.resolveAsyncVisibleItems();
-      expect(suiteTree.instance.getItemInstance("x1").getItemData()).toBe("x1");
-      expect(suiteTree.instance.getItemInstance("x1").getItemData()).toBe("x1");
+      expect(suiteTree.item("x1").getItemData()).toBe("x1");
+      expect(suiteTree.item("x1").getItemData()).toBe("x1");
       expect(getItem).toHaveBeenCalledTimes(1);
     });
 
     it("doesnt call children getter twice", async () => {
       await suiteTree.resolveAsyncVisibleItems();
       getChildren.mockClear();
-      suiteTree.instance.invalidateChildrenIds("x1");
+      suiteTree.item("x1").invalidateChildrenIds();
       await suiteTree.resolveAsyncVisibleItems();
       suiteTree.expect.hasChildren("x1", ["x11", "x12", "x13", "x14"]);
       suiteTree.expect.hasChildren("x1", ["x11", "x12", "x13", "x14"]);

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

@@ -1,14 +1,8 @@
 import { FeatureImplementation } from "../../types/core";
-import { AsyncDataLoaderFeatureDef, AsyncDataLoaderRef } from "./types";
-import { MainFeatureDef } from "../main/types";
+import { AsyncDataLoaderRef } from "./types";
 import { makeStateUpdater } from "../../utils";
-import { TreeFeatureDef } from "../tree/types";
 
-export const asyncDataLoaderFeature: FeatureImplementation<
-  any,
-  AsyncDataLoaderFeatureDef<any>,
-  MainFeatureDef | TreeFeatureDef<any> | AsyncDataLoaderFeatureDef<any>
-> = {
+export const asyncDataLoaderFeature: FeatureImplementation = {
   key: "async-data-loader",
 
   getInitialState: (initialState) => ({
@@ -98,27 +92,21 @@ export const asyncDataLoaderFeature: FeatureImplementation<
 
       return [];
     },
+  },
 
-    invalidateItemData: ({ tree }, itemId) => {
+  itemInstance: {
+    isLoading: ({ tree, item }) =>
+      tree.getState().loadingItems.includes(item.getItemMeta().itemId),
+    invalidateItemData: ({ tree, itemId }) => {
       const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
       delete dataRef.current.itemData?.[itemId];
       tree.retrieveItemData(itemId);
     },
-
-    invalidateChildrenIds: ({ tree }, itemId) => {
+    invalidateChildrenIds: ({ tree, itemId }) => {
       const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
       delete dataRef.current.childrenIds?.[itemId];
       tree.retrieveChildrenIds(itemId);
     },
-  },
-
-  itemInstance: {
-    isLoading: ({ tree, item }) =>
-      tree.getState().loadingItems.includes(item.getItemMeta().itemId),
-    invalidateItemData: ({ tree, item }) =>
-      tree.invalidateItemData(item.getItemMeta().itemId),
-    invalidateChildrenIds: ({ tree, item }) =>
-      tree.invalidateChildrenIds(item.getItemMeta().itemId),
     updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
       const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
       dataRef.current.childrenIds[itemId] = childrenIds;

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

@@ -27,13 +27,9 @@ export type AsyncDataLoaderFeatureDef<T> = {
     onLoadedChildren?: (itemId: string, childrenIds: string[]) => void;
     asyncDataLoader?: AsyncTreeDataLoader<T>;
   };
-  treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"] & {
-    /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
-    invalidateItemData: (itemId: string) => void;
-    invalidateChildrenIds: (itemId: string) => void;
-    // TODO deprecate tree instance methods, move to item instance
-  };
+  treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"];
   itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
+    /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
     invalidateItemData: () => void;
     invalidateChildrenIds: () => void;
     updateCachedChildrenIds: (childrenIds: string[]) => void;

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

@@ -4,6 +4,7 @@ import { dragAndDropFeature } from "./feature";
 import { selectionFeature } from "../selection/feature";
 import { ItemInstance } from "../../types/core";
 import { createOnDropHandler } from "../../utilities/create-on-drop-handler";
+import { propMemoizationFeature } from "../prop-memoization/feature";
 
 const isItem = (item: unknown): item is ItemInstance<any> =>
   !!item && typeof item === "object" && "getId" in item;
@@ -20,7 +21,7 @@ const factory = TestTree.default({
     expandedItems: ["x1", "x11", "x2", "x21"],
   },
   onDrop: vi.fn(),
-}).withFeatures(selectionFeature, dragAndDropFeature);
+}).withFeatures(selectionFeature, dragAndDropFeature, propMemoizationFeature);
 
 describe("core-feature/drag-and-drop", () => {
   factory.forSuits((tree) => {
@@ -534,7 +535,7 @@ describe("core-feature/drag-and-drop", () => {
     describe("drop redirection", () => {
       it("redirects to parent folder without inbetween dropping", async () => {
         const testTree = await tree
-          .with({ canDropInbetween: false })
+          .with({ canReorder: false })
           .createTestCaseTree();
         testTree.do.startDrag("x111");
         testTree.do.dragOverAndDrop("x212", testTree.createBottomDragEvent(2));
@@ -549,7 +550,7 @@ describe("core-feature/drag-and-drop", () => {
 
       it("doesnt redirect to parent folder with inbetween dropping", async () => {
         const testTree = await tree
-          .with({ canDropInbetween: true })
+          .with({ canReorder: true })
           .createTestCaseTree();
         testTree.do.startDrag("x111");
         testTree.do.dragOverAndDrop("x212", testTree.createBottomDragEvent(2));