@headless-tree/core 0.0.10 → 0.0.11

package/src/core/build-proxified-instance.ts

@@ -0,0 +1,115 @@
+import { FeatureImplementation } from "../types/core";
+import { InstanceBuilder, InstanceTypeMap } from "../features/main/types";
+import { throwError } from "../utilities/errors";
+
+const noop = () => {};
+
+const findPrevInstanceMethod = (
+  features: FeatureImplementation[],
+  instanceType: keyof InstanceTypeMap,
+  methodKey: string,
+  featureSearchIndex: number,
+) => {
+  for (let i = featureSearchIndex; i >= 0; i--) {
+    const feature = features[i];
+    const itemInstanceMethod = feature[instanceType]?.[methodKey];
+    if (itemInstanceMethod) {
+      return i;
+    }
+  }
+  return null;
+};
+
+const invokeInstanceMethod = (
+  features: FeatureImplementation[],
+  instanceType: keyof InstanceTypeMap,
+  opts: any,
+  methodKey: string,
+  featureIndex: number,
+  args: any[],
+) => {
+  const prevIndex = findPrevInstanceMethod(
+    features,
+    instanceType,
+    methodKey,
+    featureIndex - 1,
+  );
+  const itemInstanceMethod = features[featureIndex][instanceType]?.[methodKey]!;
+  return itemInstanceMethod(
+    {
+      ...opts,
+      prev:
+        prevIndex !== null
+          ? (...newArgs) =>
+              invokeInstanceMethod(
+                features,
+                instanceType,
+                opts,
+                methodKey,
+                prevIndex,
+                newArgs,
+              )
+          : null,
+    },
+    ...args,
+  );
+};
+
+export const buildProxiedInstance: InstanceBuilder = (
+  features,
+  instanceType,
+  buildOpts,
+) => {
+  // demo with prototypes: https://jsfiddle.net/bgenc58r/
+  const opts = {};
+  const item = new Proxy(
+    {},
+    {
+      has(target, key: string | symbol) {
+        if (typeof key === "symbol") {
+          return false;
+        }
+        if (key === "toJSON") {
+          return false;
+        }
+        const hasInstanceMethod = findPrevInstanceMethod(
+          features,
+          instanceType,
+          key,
+          features.length - 1,
+        );
+        return Boolean(hasInstanceMethod);
+      },
+      get(target, key: string | symbol) {
+        if (typeof key === "symbol") {
+          return undefined;
+        }
+        if (key === "toJSON") {
+          return {};
+        }
+        return (...args: any[]) => {
+          const featureIndex = findPrevInstanceMethod(
+            features,
+            instanceType,
+            key,
+            features.length - 1,
+          );
+
+          if (featureIndex === null) {
+            throw throwError(`feature missing for method ${key}`);
+          }
+          return invokeInstanceMethod(
+            features,
+            instanceType,
+            opts,
+            key,
+            featureIndex,
+            args,
+          );
+        };
+      },
+    },
+  );
+  Object.assign(opts, buildOpts(item));
+  return [item as any, noop];
+};

package/src/core/build-static-instance.ts

@@ -0,0 +1,28 @@
+/* eslint-disable no-continue,no-labels,no-extra-label */
+
+import { InstanceBuilder } from "../features/main/types";
+
+export const buildStaticInstance: InstanceBuilder = (
+  features,
+  instanceType,
+  buildOpts,
+) => {
+  const instance: any = {};
+  const finalize = () => {
+    const opts = buildOpts(instance);
+    featureLoop: for (let i = 0; i < features.length; i++) {
+      // Loop goes in forward order, because later features overwrite previous ones
+      // TODO loop order correct? I think so...
+      const definition = features[i][instanceType];
+      if (!definition) continue featureLoop;
+      methodLoop: for (const [key, method] of Object.entries(definition)) {
+        if (!method) continue methodLoop;
+        const prev = instance[key];
+        instance[key] = (...args: any[]) => {
+          return method({ ...opts, prev }, ...args);
+        };
+      }
+    }
+  };
+  return [instance as any, finalize];
+};

package/src/core/create-tree.ts

@@ -5,32 +5,13 @@ import {
   TreeConfig,
   TreeInstance,
   TreeState,
+  Updater,
 } from "../types/core";
 import { MainFeatureDef } from "../features/main/types";
 import { treeFeature } from "../features/tree/feature";
 import { ItemMeta } from "../features/tree/types";
-
-const buildItemInstance = (
-  features: FeatureImplementation[],
-  tree: TreeInstance<any>,
-  itemId: string,
-) => {
-  const itemInstance = {} as ItemInstance<any>;
-  for (const feature of features) {
-    Object.assign(
-      // TODO dont run createItemInstance, but assign prototype objects instead?
-      // https://jsfiddle.net/bgenc58r/
-      itemInstance,
-      feature.createItemInstance?.(
-        { ...itemInstance },
-        itemInstance,
-        tree,
-        itemId,
-      ) ?? {},
-    );
-  }
-  return itemInstance;
-};
+import { buildStaticInstance } from "./build-static-instance";
+import { throwError } from "../utilities/errors";
 
 const verifyFeatures = (features: FeatureImplementation[] | undefined) => {
   const loadedFeatures = features?.map((feature) => feature.key);
@@ -39,7 +20,7 @@ const verifyFeatures = (features: FeatureImplementation[] | undefined) => {
       (dep) => !loadedFeatures?.includes(dep),
     );
     if (missingDependency) {
-      throw new Error(`${feature.key} needs ${missingDependency}`);
+      throw throwError(`${feature.key} needs ${missingDependency}`);
     }
   }
 };
@@ -60,25 +41,32 @@ const sortFeatures = (features: FeatureImplementation[] = []) =>
 export const createTree = <T>(
   initialConfig: TreeConfig<T>,
 ): TreeInstance<T> => {
-  const treeInstance: TreeInstance<T> = {} as any;
-
+  const buildInstance = initialConfig.instanceBuilder ?? buildStaticInstance;
   const additionalFeatures = [
     treeFeature,
     ...sortFeatures(initialConfig.features),
   ];
   verifyFeatures(additionalFeatures);
+  const features = [...additionalFeatures];
+
+  const [treeInstance, finalizeTree] = buildInstance(
+    features,
+    "treeInstance",
+    (tree) => ({ tree }),
+  );
 
   let state = additionalFeatures.reduce(
     (acc, feature) => feature.getInitialState?.(acc, treeInstance) ?? acc,
     initialConfig.initialState ?? initialConfig.state ?? {},
   ) as TreeState<T>;
   let config = additionalFeatures.reduce(
-    (acc, feature) => feature.getDefaultConfig?.(acc, treeInstance) ?? acc,
+    (acc, feature) =>
+      (feature.getDefaultConfig?.(acc, treeInstance) as TreeConfig<T>) ?? acc,
     initialConfig,
   ) as TreeConfig<T>;
   const stateHandlerNames = additionalFeatures.reduce(
     (acc, feature) => ({ ...acc, ...feature.stateHandlerNames }),
-    {} as Record<string, string>,
+    {} as Record<string, keyof TreeConfig<T>>,
   );
 
   let treeElement: HTMLElement | undefined | null;
@@ -92,16 +80,17 @@ export const createTree = <T>(
 
   const hotkeyPresets = {} as HotkeysConfig<T>;
 
-  const rebuildItemMeta = (main: FeatureImplementation) => {
+  const rebuildItemMeta = () => {
     // TODO can we find a way to only run this for the changed substructure?
     itemInstances = [];
     itemMetaMap = {};
 
-    const rootInstance = buildItemInstance(
-      [main, ...additionalFeatures],
-      treeInstance,
-      config.rootItemId,
+    const [rootInstance, finalizeRootInstance] = buildInstance(
+      features,
+      "itemInstance",
+      (item) => ({ item, tree: treeInstance, itemId: config.rootItemId }),
     );
+    finalizeRootInstance();
     itemInstancesMap[config.rootItemId] = rootInstance;
     itemMetaMap[config.rootItemId] = {
       itemId: config.rootItemId,
@@ -115,11 +104,16 @@ export const createTree = <T>(
     for (const item of treeInstance.getItemsMeta()) {
       itemMetaMap[item.itemId] = item;
       if (!itemInstancesMap[item.itemId]) {
-        const instance = buildItemInstance(
-          [main, ...additionalFeatures],
-          treeInstance,
-          item.itemId,
+        const [instance, finalizeInstance] = buildInstance(
+          features,
+          "itemInstance",
+          (instance) => ({
+            item: instance,
+            tree: treeInstance,
+            itemId: item.itemId,
+          }),
         );
+        finalizeInstance();
         itemInstancesMap[item.itemId] = instance;
         itemInstances.push(instance);
       } else {
@@ -140,34 +134,41 @@ export const createTree = <T>(
     MainFeatureDef<T>
   > = {
     key: "main",
-    createTreeInstance: (prev) => ({
-      ...prev,
+    treeInstance: {
       getState: () => state,
-      setState: (updater) => {
+      setState: ({}, updater) => {
         // Not necessary, since I think the subupdate below keeps the state fresh anyways?
         // state = typeof updater === "function" ? updater(state) : updater;
-        config.setState?.(state);
+        config.setState?.(state); // TODO this cant be right... This doesnt allow external state updates
       },
-      applySubStateUpdate: (stateName, updater) => {
+      applySubStateUpdate: <K extends keyof TreeState<any>>(
+        {},
+        stateName: K,
+        updater: Updater<TreeState<T>[K]>,
+      ) => {
         state[stateName] =
           typeof updater === "function" ? updater(state[stateName]) : updater;
-        config[stateHandlerNames[stateName]]!(state[stateName]);
+        const externalStateSetter = config[
+          stateHandlerNames[stateName]
+        ] as Function;
+        externalStateSetter?.(state[stateName]);
       },
+      // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
-        rebuildItemMeta(mainFeature);
+        rebuildItemMeta();
         config.setState?.(state);
       },
       getConfig: () => config,
-      setConfig: (updater) => {
+      setConfig: (_, updater) => {
         config = typeof updater === "function" ? updater(config) : updater;
 
         if (config.state) {
           state = { ...state, ...config.state };
         }
       },
-      getItemInstance: (itemId) => itemInstancesMap[itemId],
+      getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
       getItems: () => itemInstances,
-      registerElement: (element) => {
+      registerElement: ({}, element) => {
         if (treeElement === element) {
           return;
         }
@@ -186,10 +187,10 @@ export const createTree = <T>(
       getElement: () => treeElement,
       getDataRef: () => treeDataRef,
       getHotkeyPresets: () => hotkeyPresets,
-    }),
-    createItemInstance: (prev, instance, _, itemId) => ({
-      ...prev,
-      registerElement: (element) => {
+    },
+    itemInstance: {
+      // TODO just change to a getRef method that memoizes, maybe as part of getProps
+      registerElement: ({ itemId, item }, element) => {
         if (itemElementsMap[itemId] === element) {
           return;
         }
@@ -197,33 +198,30 @@ export const createTree = <T>(
         const oldElement = itemElementsMap[itemId];
         if (oldElement && !element) {
           eachFeature((feature) =>
-            feature.onItemUnmount?.(instance, oldElement!, treeInstance),
+            feature.onItemUnmount?.(item, oldElement!, treeInstance),
           );
         } else if (!oldElement && element) {
           eachFeature((feature) =>
-            feature.onItemMount?.(instance, element!, treeInstance),
+            feature.onItemMount?.(item, element!, treeInstance),
           );
         }
         itemElementsMap[itemId] = element;
       },
-      getElement: () => itemElementsMap[itemId],
+      getElement: ({ itemId }) => itemElementsMap[itemId],
       // eslint-disable-next-line no-return-assign
-      getDataRef: () => (itemDataRefs[itemId] ??= { current: {} }),
-      getItemMeta: () => itemMetaMap[itemId],
-    }),
+      getDataRef: ({ itemId }) => (itemDataRefs[itemId] ??= { current: {} }),
+      getItemMeta: ({ itemId }) => itemMetaMap[itemId],
+    },
   };
 
-  const features = [mainFeature, ...additionalFeatures];
+  features.unshift(mainFeature);
 
   for (const feature of features) {
-    Object.assign(
-      treeInstance,
-      feature.createTreeInstance?.({ ...treeInstance }, treeInstance) ?? {},
-    );
     Object.assign(hotkeyPresets, feature.hotkeys ?? {});
   }
 
-  rebuildItemMeta(mainFeature);
+  finalizeTree();
+  rebuildItemMeta();
 
   return treeInstance;
 };

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

@@ -0,0 +1,143 @@
+import { describe, expect, it, vi } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { asyncDataLoaderFeature } from "./feature";
+
+const tree = TestTree.default({}).withFeatures(asyncDataLoaderFeature);
+
+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 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();
+      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"]);
+    });
+
+    it("invalidates children ids on item instance", async () => {
+      getChildren.mockClear();
+      await suiteTree.resolveAsyncVisibleItems();
+      getChildren.mockResolvedValueOnce(["new1", "new2"]);
+      suiteTree.instance.getItemInstance("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.instance.invalidateItemData("x1");
+      await suiteTree.resolveAsyncVisibleItems();
+      expect(suiteTree.instance.getItemInstance("x1").getItemData()).toBe("x1");
+      expect(suiteTree.instance.getItemInstance("x1").getItemData()).toBe("x1");
+      expect(getItem).toHaveBeenCalledTimes(1);
+    });
+
+    it("doesnt call children getter twice", async () => {
+      await suiteTree.resolveAsyncVisibleItems();
+      getChildren.mockClear();
+      suiteTree.instance.invalidateChildrenIds("x1");
+      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

@@ -25,12 +25,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 +36,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 +53,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 +80,49 @@ 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>();
+    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: () =>
+  itemInstance: {
+    isLoading: ({ tree, item }) =>
       tree.getState().loadingItems.includes(item.getItemMeta().itemId),
-    invalidateItemData: () =>
+    invalidateItemData: ({ tree, item }) =>
       tree.invalidateItemData(item.getItemMeta().itemId),
-    invalidateChildrenIds: () =>
+    invalidateChildrenIds: ({ tree, item }) =>
       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

@@ -31,11 +31,13 @@ export type AsyncDataLoaderFeatureDef<T> = {
     /** 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
   };
   itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
     invalidateItemData: () => void;
     invalidateChildrenIds: () => void;
-    isLoading: () => void; // TODO! boolean?
+    updateCachedChildrenIds: (childrenIds: string[]) => void;
+    isLoading: () => boolean;
   };
   hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
 };