@headless-tree/core 0.0.10 → 0.0.12

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

@@ -0,0 +1,124 @@
+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,
+  propMemoizationFeature,
+);
+
+describe("core-feature/selections", () => {
+  tree.resetBeforeEach();
+
+  describe("loading of items", () => {
+    it("has initial items", () => {
+      tree.expect.hasChildren("x", ["x1", "x2", "x3", "x4"]);
+      tree.expect.hasChildren("x1", ["x11", "x12", "x13", "x14"]);
+      tree.expect.hasChildren("x11", ["x111", "x112", "x113", "x114"]);
+      tree.expect.hasChildren("x12", []);
+    });
+
+    it.skip("has loading items after expanding", async () => {
+      tree.do.selectItem("x12");
+      await TestTree.resolveAsyncLoaders();
+      // tree.debug();
+      tree.expect.hasChildren("x12", [
+        "loading",
+        "loading",
+        "loading",
+        "loading",
+      ]);
+    });
+
+    it("has loaded items after expanding and loading", async () => {
+      tree.do.selectItem("x12");
+      await tree.resolveAsyncVisibleItems();
+      tree.expect.hasChildren("x12", ["x121", "x122", "x123", "x124"]);
+      tree.expect.hasChildren("x12", ["x121", "x122", "x123", "x124"]);
+    });
+  });
+
+  describe("calls handlers", () => {
+    it("updates setLoadingItems", async () => {
+      const setLoadingItems = tree.mockedHandler("setLoadingItems");
+      tree.do.selectItem("x12");
+      expect(setLoadingItems).toHaveBeenCalledWith(["x12"]);
+      await tree.resolveAsyncVisibleItems();
+      expect(setLoadingItems).toHaveBeenCalledWith([]);
+    });
+
+    it("calls onLoadedItem", async () => {
+      const onLoadedItem = tree.mockedHandler("onLoadedItem");
+      tree.do.selectItem("x12");
+      await tree.resolveAsyncVisibleItems();
+      expect(onLoadedItem).toHaveBeenCalledWith("x121", "x121");
+    });
+
+    it("calls onLoadedChildren", async () => {
+      const onLoadedChildren = tree.mockedHandler("onLoadedChildren");
+      tree.do.selectItem("x12");
+      await tree.resolveAsyncVisibleItems();
+      expect(onLoadedChildren).toHaveBeenCalledWith("x12", [
+        "x121",
+        "x122",
+        "x123",
+        "x124",
+      ]);
+    });
+  });
+
+  describe("data invalidation", () => {
+    const getItem = vi.fn(async (id) => id);
+    const getChildren = vi.fn(async (id) => [
+      `${id}1`,
+      `${id}2`,
+      `${id}3`,
+      `${id}4`,
+    ]);
+    const suiteTree = tree.with({ asyncDataLoader: { getItem, getChildren } });
+    suiteTree.resetBeforeEach();
+
+    it("invalidates item data on item instance", async () => {
+      getItem.mockClear();
+      await suiteTree.resolveAsyncVisibleItems();
+      getItem.mockResolvedValueOnce("new");
+      suiteTree.item("x1").invalidateItemData();
+      await suiteTree.resolveAsyncVisibleItems();
+      expect(getItem).toHaveBeenCalledWith("x1");
+      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.item("x1").invalidateChildrenIds();
+      await suiteTree.resolveAsyncVisibleItems();
+      expect(getChildren).toHaveBeenCalledWith("x1");
+      suiteTree.expect.hasChildren("x1", ["new1", "new2"]);
+    });
+
+    it("doesnt call item data getter twice", async () => {
+      await suiteTree.resolveAsyncVisibleItems();
+      getItem.mockClear();
+      suiteTree.item("x1").invalidateItemData();
+      await suiteTree.resolveAsyncVisibleItems();
+      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.item("x1").invalidateChildrenIds();
+      await suiteTree.resolveAsyncVisibleItems();
+      suiteTree.expect.hasChildren("x1", ["x11", "x12", "x13", "x14"]);
+      suiteTree.expect.hasChildren("x1", ["x11", "x12", "x13", "x14"]);
+      expect(getChildren).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe.todo("getChildrenWithData");
+});

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) => ({
@@ -25,12 +19,10 @@ export const asyncDataLoaderFeature: FeatureImplementation<
     loadingItems: "setLoadingItems",
   },
 
-  createTreeInstance: (prev, instance) => ({
-    ...prev,
-
-    retrieveItemData: (itemId) => {
-      const config = instance.getConfig();
-      const dataRef = instance.getDataRef<AsyncDataLoaderRef>();
+  treeInstance: {
+    retrieveItemData: ({ tree }, itemId) => {
+      const config = tree.getConfig();
+      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
       dataRef.current.itemData ??= {};
       dataRef.current.childrenIds ??= {};
 
@@ -38,15 +30,15 @@ export const asyncDataLoaderFeature: FeatureImplementation<
         return dataRef.current.itemData[itemId];
       }
 
-      if (!instance.getState().loadingItems.includes(itemId)) {
-        instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+      if (!tree.getState().loadingItems.includes(itemId)) {
+        tree.applySubStateUpdate("loadingItems", (loadingItems) => [
           ...loadingItems,
           itemId,
         ]);
         config.asyncDataLoader?.getItem(itemId).then((item) => {
           dataRef.current.itemData[itemId] = item;
           config.onLoadedItem?.(itemId, item);
-          instance.applySubStateUpdate("loadingItems", (loadingItems) =>
+          tree.applySubStateUpdate("loadingItems", (loadingItems) =>
             loadingItems.filter((id) => id !== itemId),
           );
         });
@@ -55,20 +47,20 @@ export const asyncDataLoaderFeature: FeatureImplementation<
       return config.createLoadingItemData?.() ?? null;
     },
 
-    retrieveChildrenIds: (itemId) => {
-      const config = instance.getConfig();
-      const dataRef = instance.getDataRef<AsyncDataLoaderRef>();
+    retrieveChildrenIds: ({ tree }, itemId) => {
+      const config = tree.getConfig();
+      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
       dataRef.current.itemData ??= {};
       dataRef.current.childrenIds ??= {};
       if (dataRef.current.childrenIds[itemId]) {
         return dataRef.current.childrenIds[itemId];
       }
 
-      if (instance.getState().loadingItems.includes(itemId)) {
+      if (tree.getState().loadingItems.includes(itemId)) {
         return [];
       }
 
-      instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+      tree.applySubStateUpdate("loadingItems", (loadingItems) => [
         ...loadingItems,
         itemId,
       ]);
@@ -82,45 +74,43 @@ export const asyncDataLoaderFeature: FeatureImplementation<
           const childrenIds = children.map(({ id }) => id);
           dataRef.current.childrenIds[itemId] = childrenIds;
           config.onLoadedChildren?.(itemId, childrenIds);
-          instance.applySubStateUpdate("loadingItems", (loadingItems) =>
+          tree.applySubStateUpdate("loadingItems", (loadingItems) =>
             loadingItems.filter((id) => id !== itemId),
           );
-          instance.rebuildTree();
+          tree.rebuildTree();
         });
       } else {
         config.asyncDataLoader?.getChildren(itemId).then((childrenIds) => {
           dataRef.current.childrenIds[itemId] = childrenIds;
           config.onLoadedChildren?.(itemId, childrenIds);
-          instance.applySubStateUpdate("loadingItems", (loadingItems) =>
+          tree.applySubStateUpdate("loadingItems", (loadingItems) =>
             loadingItems.filter((id) => id !== itemId),
           );
-          instance.rebuildTree();
+          tree.rebuildTree();
         });
       }
 
       return [];
     },
+  },
 
-    invalidateItemData: (itemId) => {
-      const dataRef = instance.getDataRef<AsyncDataLoaderRef>();
+  itemInstance: {
+    isLoading: ({ tree, item }) =>
+      tree.getState().loadingItems.includes(item.getItemMeta().itemId),
+    invalidateItemData: ({ tree, itemId }) => {
+      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
       delete dataRef.current.itemData?.[itemId];
-      instance.retrieveItemData(itemId);
+      tree.retrieveItemData(itemId);
     },
-
-    invalidateChildrenIds: (itemId) => {
-      const dataRef = instance.getDataRef<AsyncDataLoaderRef>();
+    invalidateChildrenIds: ({ tree, itemId }) => {
+      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
       delete dataRef.current.childrenIds?.[itemId];
-      instance.retrieveChildrenIds(itemId);
+      tree.retrieveChildrenIds(itemId);
     },
-  }),
-
-  createItemInstance: (prev, item, tree) => ({
-    ...prev,
-    isLoading: () =>
-      tree.getState().loadingItems.includes(item.getItemMeta().itemId),
-    invalidateItemData: () =>
-      tree.invalidateItemData(item.getItemMeta().itemId),
-    invalidateChildrenIds: () =>
-      tree.invalidateChildrenIds(item.getItemMeta().itemId),
-  }),
+    updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
+      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
+      dataRef.current.childrenIds[itemId] = childrenIds;
+      tree.rebuildTree();
+    },
+  },
 };

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

@@ -27,15 +27,13 @@ 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;
-  };
+  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;
-    isLoading: () => void; // TODO! boolean?
+    updateCachedChildrenIds: (childrenIds: string[]) => void;
+    isLoading: () => boolean;
   };
   hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
 };