@headless-tree/core 0.0.0-20250726131941 → 0.0.0-20250730213235

package/CHANGELOG.md

@@ -1,9 +1,10 @@
 # @headless-tree/core
 
-## 0.0.0-20250726131941
+## 0.0.0-20250730213235
 
 ### Patch Changes
 
+- e8ddbb0: Added `item.updateCachedData(data)` in async tree feature, that works similar to the existing `item.updateCachedChildrenIds(childrenIds)` feature
 - 662e2a8: Added stories and documentation on how to use nested DOM rendering for tree structures instead of flat lists,
   which can be used for animating expand/collapse behavior
 - b41e1d2: fixed a bug where ending drag without successful drop doesn't properly reset drag line (#132)

package/dist/index.d.mts

@@ -150,8 +150,6 @@ type MainFeatureDef<T = any> = {
     treeInstance: {
         /** @internal */
         applySubStateUpdate: <K extends keyof TreeState<any>>(stateName: K, updater: Updater<TreeState<T>[K]>) => void;
-        /** @internal */
-        buildItemInstance: (itemId: string) => ItemInstance<T>;
         setState: SetStateFn<TreeState<T>>;
         getState: () => TreeState<T>;
         setConfig: SetStateFn<TreeConfig<T>>;
@@ -296,6 +294,7 @@ type AsyncDataLoaderFeatureDef<T> = {
          * @param optimistic If true, the item will not trigger a state update on `loadingItemChildrens`, and
          * the tree will continue to display the old data until the new data has loaded. */
         invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
+        updateCachedData: (data: T) => void;
         updateCachedChildrenIds: (childrenIds: string[]) => void;
         isLoading: () => boolean;
     };

package/dist/index.d.ts

@@ -150,8 +150,6 @@ type MainFeatureDef<T = any> = {
     treeInstance: {
         /** @internal */
         applySubStateUpdate: <K extends keyof TreeState<any>>(stateName: K, updater: Updater<TreeState<T>[K]>) => void;
-        /** @internal */
-        buildItemInstance: (itemId: string) => ItemInstance<T>;
         setState: SetStateFn<TreeState<T>>;
         getState: () => TreeState<T>;
         setConfig: SetStateFn<TreeConfig<T>>;
@@ -296,6 +294,7 @@ type AsyncDataLoaderFeatureDef<T> = {
          * @param optimistic If true, the item will not trigger a state update on `loadingItemChildrens`, and
          * the tree will continue to display the old data until the new data has loaded. */
         invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
+        updateCachedData: (data: T) => void;
         updateCachedChildrenIds: (childrenIds: string[]) => void;
         isLoading: () => boolean;
     };

package/dist/index.js

@@ -547,19 +547,6 @@ var createTree = (initialConfig) => {
         const externalStateSetter = config[stateHandlerNames[stateName]];
         externalStateSetter == null ? void 0 : externalStateSetter(state[stateName]);
       },
-      buildItemInstance: ({}, itemId) => {
-        const [instance, finalizeInstance] = buildInstance(
-          features,
-          "itemInstance",
-          (instance2) => ({
-            item: instance2,
-            tree: treeInstance,
-            itemId
-          })
-        );
-        finalizeInstance();
-        return instance;
-      },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
         var _a2;
@@ -580,7 +567,23 @@ var createTree = (initialConfig) => {
           (_c2 = config.setState) == null ? void 0 : _c2.call(config, state);
         }
       },
-      getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
+      getItemInstance: ({}, itemId) => {
+        const existingInstance = itemInstancesMap[itemId];
+        if (!existingInstance) {
+          const [instance, finalizeInstance] = buildInstance(
+            features,
+            "itemInstance",
+            (instance2) => ({
+              item: instance2,
+              tree: treeInstance,
+              itemId
+            })
+          );
+          finalizeInstance();
+          return instance;
+        }
+        return existingInstance;
+      },
       getItems: () => itemInstances,
       registerElement: ({}, element) => {
         if (treeElement === element) {
@@ -636,7 +639,17 @@ var createTree = (initialConfig) => {
         var _a2;
         return (_a2 = itemDataRefs[itemId]) != null ? _a2 : itemDataRefs[itemId] = { current: {} };
       },
-      getItemMeta: ({ itemId }) => itemMetaMap[itemId]
+      getItemMeta: ({ itemId }) => {
+        var _a2;
+        return (_a2 = itemMetaMap[itemId]) != null ? _a2 : {
+          itemId,
+          parentId: null,
+          level: -1,
+          index: -1,
+          posInSet: 0,
+          setSize: 1
+        };
+      }
     }
   };
   features.unshift(mainFeature);
@@ -801,7 +814,7 @@ var selectionFeature = {
 
 // src/features/checkboxes/feature.ts
 var getAllLoadedDescendants = (tree, itemId, includeFolders = false) => {
-  if (!tree.getConfig().isItemFolder(tree.buildItemInstance(itemId))) {
+  if (!tree.getConfig().isItemFolder(tree.getItemInstance(itemId))) {
     return [itemId];
   }
   const descendants = tree.retrieveChildrenIds(itemId).map((child) => getAllLoadedDescendants(tree, child, includeFolders)).flat();
@@ -1147,6 +1160,11 @@ var asyncDataLoaderFeature = {
       const dataRef = tree.getDataRef();
       dataRef.current.childrenIds[itemId] = childrenIds;
       tree.rebuildTree();
+    },
+    updateCachedData: ({ tree, itemId }, data) => {
+      const dataRef = tree.getDataRef();
+      dataRef.current.itemData[itemId] = data;
+      tree.rebuildTree();
     }
   }
 };

package/dist/index.mjs

@@ -503,19 +503,6 @@ var createTree = (initialConfig) => {
         const externalStateSetter = config[stateHandlerNames[stateName]];
         externalStateSetter == null ? void 0 : externalStateSetter(state[stateName]);
       },
-      buildItemInstance: ({}, itemId) => {
-        const [instance, finalizeInstance] = buildInstance(
-          features,
-          "itemInstance",
-          (instance2) => ({
-            item: instance2,
-            tree: treeInstance,
-            itemId
-          })
-        );
-        finalizeInstance();
-        return instance;
-      },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
         var _a2;
@@ -536,7 +523,23 @@ var createTree = (initialConfig) => {
           (_c2 = config.setState) == null ? void 0 : _c2.call(config, state);
         }
       },
-      getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
+      getItemInstance: ({}, itemId) => {
+        const existingInstance = itemInstancesMap[itemId];
+        if (!existingInstance) {
+          const [instance, finalizeInstance] = buildInstance(
+            features,
+            "itemInstance",
+            (instance2) => ({
+              item: instance2,
+              tree: treeInstance,
+              itemId
+            })
+          );
+          finalizeInstance();
+          return instance;
+        }
+        return existingInstance;
+      },
       getItems: () => itemInstances,
       registerElement: ({}, element) => {
         if (treeElement === element) {
@@ -592,7 +595,17 @@ var createTree = (initialConfig) => {
         var _a2;
         return (_a2 = itemDataRefs[itemId]) != null ? _a2 : itemDataRefs[itemId] = { current: {} };
       },
-      getItemMeta: ({ itemId }) => itemMetaMap[itemId]
+      getItemMeta: ({ itemId }) => {
+        var _a2;
+        return (_a2 = itemMetaMap[itemId]) != null ? _a2 : {
+          itemId,
+          parentId: null,
+          level: -1,
+          index: -1,
+          posInSet: 0,
+          setSize: 1
+        };
+      }
     }
   };
   features.unshift(mainFeature);
@@ -757,7 +770,7 @@ var selectionFeature = {
 
 // src/features/checkboxes/feature.ts
 var getAllLoadedDescendants = (tree, itemId, includeFolders = false) => {
-  if (!tree.getConfig().isItemFolder(tree.buildItemInstance(itemId))) {
+  if (!tree.getConfig().isItemFolder(tree.getItemInstance(itemId))) {
     return [itemId];
   }
   const descendants = tree.retrieveChildrenIds(itemId).map((child) => getAllLoadedDescendants(tree, child, includeFolders)).flat();
@@ -1103,6 +1116,11 @@ var asyncDataLoaderFeature = {
       const dataRef = tree.getDataRef();
       dataRef.current.childrenIds[itemId] = childrenIds;
       tree.rebuildTree();
+    },
+    updateCachedData: ({ tree, itemId }, data) => {
+      const dataRef = tree.getDataRef();
+      dataRef.current.itemData[itemId] = data;
+      tree.rebuildTree();
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.0-20250726131941",
+  "version": "0.0.0-20250730213235",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",

package/src/core/create-tree.ts

@@ -170,19 +170,6 @@ export const createTree = <T>(
         ] as Function;
         externalStateSetter?.(state[stateName]);
       },
-      buildItemInstance: ({}, itemId) => {
-        const [instance, finalizeInstance] = buildInstance(
-          features,
-          "itemInstance",
-          (instance) => ({
-            item: instance,
-            tree: treeInstance,
-            itemId,
-          }),
-        );
-        finalizeInstance();
-        return instance;
-      },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
         rebuildItemMeta();
@@ -206,7 +193,23 @@ export const createTree = <T>(
           config.setState?.(state);
         }
       },
-      getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
+      getItemInstance: ({}, itemId) => {
+        const existingInstance = itemInstancesMap[itemId];
+        if (!existingInstance) {
+          const [instance, finalizeInstance] = buildInstance(
+            features,
+            "itemInstance",
+            (instance) => ({
+              item: instance,
+              tree: treeInstance,
+              itemId,
+            }),
+          );
+          finalizeInstance();
+          return instance;
+        }
+        return existingInstance;
+      },
       getItems: () => itemInstances,
       registerElement: ({}, element) => {
         if (treeElement === element) {
@@ -249,7 +252,15 @@ export const createTree = <T>(
       getElement: ({ itemId }) => itemElementsMap[itemId],
       // eslint-disable-next-line no-return-assign
       getDataRef: ({ itemId }) => (itemDataRefs[itemId] ??= { current: {} }),
-      getItemMeta: ({ itemId }) => itemMetaMap[itemId],
+      getItemMeta: ({ itemId }) =>
+        itemMetaMap[itemId] ?? {
+          itemId,
+          parentId: null,
+          level: -1,
+          index: -1,
+          posInSet: 0,
+          setSize: 1,
+        },
     },
   };
 

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

@@ -165,5 +165,10 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
       dataRef.current.childrenIds[itemId] = childrenIds;
       tree.rebuildTree();
     },
+    updateCachedData: ({ tree, itemId }, data) => {
+      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
+      dataRef.current.itemData[itemId] = data;
+      tree.rebuildTree();
+    },
   },
 };

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

@@ -34,6 +34,7 @@ export type AsyncDataLoaderFeatureDef<T> = {
     waitForItemChildrenLoaded: (itemId: string) => Promise<void>;
     loadItemData: (itemId: string) => Promise<T>;
     loadChildrenIds: (itemId: string) => Promise<string[]>;
+    /* idea: recursiveLoadItems: (itemId: string, cancelToken?: { current: boolean }, onLoad: (itemIds: string[]) => void) => Promise<T[]> */
   };
   itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
     /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible
@@ -46,6 +47,7 @@ export type AsyncDataLoaderFeatureDef<T> = {
      * the tree will continue to display the old data until the new data has loaded. */
     invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
 
+    updateCachedData: (data: T) => void;
     updateCachedChildrenIds: (childrenIds: string[]) => void;
     isLoading: () => boolean;
   };

package/src/features/checkboxes/feature.ts

@@ -8,7 +8,7 @@ const getAllLoadedDescendants = <T>(
   itemId: string,
   includeFolders = false,
 ): string[] => {
-  if (!tree.getConfig().isItemFolder(tree.buildItemInstance(itemId))) {
+  if (!tree.getConfig().isItemFolder(tree.getItemInstance(itemId))) {
     return [itemId];
   }
   const descendants = tree

package/src/features/main/types.ts

@@ -36,8 +36,6 @@ export type MainFeatureDef<T = any> = {
       stateName: K,
       updater: Updater<TreeState<T>[K]>,
     ) => void;
-    /** @internal */
-    buildItemInstance: (itemId: string) => ItemInstance<T>;
     setState: SetStateFn<TreeState<T>>;
     getState: () => TreeState<T>;
     setConfig: SetStateFn<TreeConfig<T>>;