@headless-tree/core 0.0.0-20250915162508 → 0.0.0-20250918201417

package/CHANGELOG.md

@@ -1,10 +1,15 @@
 # @headless-tree/core
 
-## 0.0.0-20250915162508
+## 0.0.0-20250918201417
+
+### Minor Changes
+
+- cbeaba6: all state updates (like setSelectedItems) will not propagate while the component is unmounted. This happened before for `tree.setState()` calls directly, but not individual state atoms like `setSelectedItems`. When calling `createTree()` directly (instead of `useTree()`), `tree.setMounted(true)` needs to be called once after mount. No changes are necessary when using the React-based `useTree()` integration. (#158)
 
 ### Patch Changes
 
 - 72e714b: all NPM deployments will now publish with provenance
+- 6693986: fixed an issue where async data loaders cause calling `item.getItemData()` outside of the component calling `useTree()` to cause a React warning log (#158)
 - 7a7424f: fixed incorrect exports definition in package.json for require/cjs imports (#161)
 - 215ab4b: add a new symbol that can be used in hotkey configurations "metaorcontrol" that will trigger if either any windows control key or mac meta key is pressed (#141)
 - 51b0dea: Added `isUnorderedDragTarget` as alternative to `isDragTarget` for easier detection of drag type

package/dist/index.d.mts

@@ -184,6 +184,8 @@ type MainFeatureDef<T = any> = {
         rebuildTree: () => void;
         /** @deprecated Experimental feature, might get removed or changed in the future. */
         scheduleRebuildTree: () => void;
+        /** @internal */
+        setMounted: (isMounted: boolean) => void;
     };
     itemInstance: {
         registerElement: (element: HTMLElement | null) => void;

package/dist/index.d.ts

@@ -184,6 +184,8 @@ type MainFeatureDef<T = any> = {
         rebuildTree: () => void;
         /** @deprecated Experimental feature, might get removed or changed in the future. */
         scheduleRebuildTree: () => void;
+        /** @internal */
+        setMounted: (isMounted: boolean) => void;
     };
     itemInstance: {
         registerElement: (element: HTMLElement | null) => void;

package/dist/index.js

@@ -544,10 +544,29 @@ var createTree = (initialConfig) => {
         var _a2;
         (_a2 = config.setState) == null ? void 0 : _a2.call(config, state);
       },
+      setMounted: ({}, isMounted) => {
+        var _a2;
+        const ref = treeDataRef;
+        treeDataRef.current.isMounted = isMounted;
+        if (isMounted) {
+          (_a2 = ref.waitingForMount) == null ? void 0 : _a2.forEach((cb) => cb());
+          ref.waitingForMount = [];
+        }
+      },
       applySubStateUpdate: ({}, stateName, updater) => {
-        state[stateName] = typeof updater === "function" ? updater(state[stateName]) : updater;
-        const externalStateSetter = config[stateHandlerNames[stateName]];
-        externalStateSetter == null ? void 0 : externalStateSetter(state[stateName]);
+        var _a2;
+        const apply = () => {
+          state[stateName] = typeof updater === "function" ? updater(state[stateName]) : updater;
+          const externalStateSetter = config[stateHandlerNames[stateName]];
+          externalStateSetter == null ? void 0 : externalStateSetter(state[stateName]);
+        };
+        const ref = treeDataRef.current;
+        if (ref.isMounted) {
+          apply();
+        } else {
+          (_a2 = ref.waitingForMount) != null ? _a2 : ref.waitingForMount = [];
+          ref.waitingForMount.push(apply);
+        }
       },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
@@ -1169,7 +1188,7 @@ var asyncDataLoaderFeature = {
         return dataRef.current.itemData[itemId];
       }
       if (!tree.getState().loadingItemData.includes(itemId) && !skipFetch) {
-        loadItemData(tree, itemId);
+        setTimeout(() => loadItemData(tree, itemId));
       }
       return (_b = (_a = config.createLoadingItemData) == null ? void 0 : _a.call(config)) != null ? _b : null;
     },
@@ -1181,7 +1200,7 @@ var asyncDataLoaderFeature = {
       if (tree.getState().loadingItemChildrens.includes(itemId) || skipFetch) {
         return [];
       }
-      loadChildrenIds(tree, itemId);
+      setTimeout(() => loadChildrenIds(tree, itemId));
       return [];
     }
   },

package/dist/index.mjs

@@ -500,10 +500,29 @@ var createTree = (initialConfig) => {
         var _a2;
         (_a2 = config.setState) == null ? void 0 : _a2.call(config, state);
       },
+      setMounted: ({}, isMounted) => {
+        var _a2;
+        const ref = treeDataRef;
+        treeDataRef.current.isMounted = isMounted;
+        if (isMounted) {
+          (_a2 = ref.waitingForMount) == null ? void 0 : _a2.forEach((cb) => cb());
+          ref.waitingForMount = [];
+        }
+      },
       applySubStateUpdate: ({}, stateName, updater) => {
-        state[stateName] = typeof updater === "function" ? updater(state[stateName]) : updater;
-        const externalStateSetter = config[stateHandlerNames[stateName]];
-        externalStateSetter == null ? void 0 : externalStateSetter(state[stateName]);
+        var _a2;
+        const apply = () => {
+          state[stateName] = typeof updater === "function" ? updater(state[stateName]) : updater;
+          const externalStateSetter = config[stateHandlerNames[stateName]];
+          externalStateSetter == null ? void 0 : externalStateSetter(state[stateName]);
+        };
+        const ref = treeDataRef.current;
+        if (ref.isMounted) {
+          apply();
+        } else {
+          (_a2 = ref.waitingForMount) != null ? _a2 : ref.waitingForMount = [];
+          ref.waitingForMount.push(apply);
+        }
       },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
@@ -1125,7 +1144,7 @@ var asyncDataLoaderFeature = {
         return dataRef.current.itemData[itemId];
       }
       if (!tree.getState().loadingItemData.includes(itemId) && !skipFetch) {
-        loadItemData(tree, itemId);
+        setTimeout(() => loadItemData(tree, itemId));
       }
       return (_b = (_a = config.createLoadingItemData) == null ? void 0 : _a.call(config)) != null ? _b : null;
     },
@@ -1137,7 +1156,7 @@ var asyncDataLoaderFeature = {
       if (tree.getState().loadingItemChildrens.includes(itemId) || skipFetch) {
         return [];
       }
-      loadChildrenIds(tree, itemId);
+      setTimeout(() => loadChildrenIds(tree, itemId));
       return [];
     }
   },

package/package.json

@@ -13,7 +13,7 @@
     "checkbox",
     "hook"
   ],
-  "version": "0.0.0-20250915162508",
+  "version": "0.0.0-20250918201417",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",

package/src/core/create-tree.ts

@@ -11,6 +11,7 @@ import { treeFeature } from "../features/tree/feature";
 import { ItemMeta } from "../features/tree/types";
 import { buildStaticInstance } from "./build-static-instance";
 import { throwError } from "../utilities/errors";
+import type { TreeDataRef } from "../features/main/types";
 
 const verifyFeatures = (features: FeatureImplementation[] | undefined) => {
   const loadedFeatures = features?.map((feature) => feature.key);
@@ -161,17 +162,34 @@ export const createTree = <T>(
         config.setState?.(state); // TODO this cant be right... This doesnt allow external state updates
         // TODO this is never used, remove
       },
+      setMounted: ({}, isMounted) => {
+        const ref = treeDataRef as TreeDataRef;
+        treeDataRef.current.isMounted = isMounted;
+        if (isMounted) {
+          ref.waitingForMount?.forEach((cb) => cb());
+          ref.waitingForMount = [];
+        }
+      },
       applySubStateUpdate: <K extends keyof TreeState<any>>(
         {},
         stateName: K,
         updater: Updater<TreeState<T>[K]>,
       ) => {
-        state[stateName] =
-          typeof updater === "function" ? updater(state[stateName]) : updater;
-        const externalStateSetter = config[
-          stateHandlerNames[stateName]
-        ] as Function;
-        externalStateSetter?.(state[stateName]);
+        const apply = () => {
+          state[stateName] =
+            typeof updater === "function" ? updater(state[stateName]) : updater;
+          const externalStateSetter = config[
+            stateHandlerNames[stateName]
+          ] as Function;
+          externalStateSetter?.(state[stateName]);
+        };
+        const ref = treeDataRef.current as TreeDataRef;
+        if (ref.isMounted) {
+          apply();
+        } else {
+          ref.waitingForMount ??= [];
+          ref.waitingForMount.push(apply);
+        }
       },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {

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

@@ -46,6 +46,7 @@ describe("core-feature/selections", () => {
       );
       const setLoadingItemData = tree.mockedHandler("setLoadingItemData");
       tree.do.selectItem("x12");
+      await tree.do.awaitNextTick();
       expect(setLoadingItemChildrens).toHaveBeenCalledWith(["x12"]);
       expect(setLoadingItemData).not.toHaveBeenCalled();
       await tree.resolveAsyncVisibleItems();

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

@@ -118,7 +118,7 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
       }
 
       if (!tree.getState().loadingItemData.includes(itemId) && !skipFetch) {
-        loadItemData(tree, itemId);
+        setTimeout(() => loadItemData(tree, itemId));
       }
 
       return config.createLoadingItemData?.() ?? null;
@@ -134,7 +134,7 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
         return [];
       }
 
-      loadChildrenIds(tree, itemId);
+      setTimeout(() => loadChildrenIds(tree, itemId));
 
       return [];
     },

package/src/features/main/types.ts

@@ -10,6 +10,11 @@ import {
 } from "../../types/core";
 import { ItemMeta } from "../tree/types";
 
+export interface TreeDataRef {
+  isMounted?: boolean;
+  waitingForMount?: (() => void)[];
+}
+
 export type InstanceTypeMap = {
   itemInstance: ItemInstance<any>;
   treeInstance: TreeInstance<any>;
@@ -51,6 +56,8 @@ export type MainFeatureDef<T = any> = {
     rebuildTree: () => void;
     /** @deprecated Experimental feature, might get removed or changed in the future. */
     scheduleRebuildTree: () => void;
+    /** @internal */
+    setMounted: (isMounted: boolean) => void;
   };
   itemInstance: {
     registerElement: (element: HTMLElement | null) => void;

package/src/test-utils/test-tree-do.ts

@@ -135,4 +135,10 @@ export class TestTreeDo<T> {
       "function called with inconsistent parameters",
     ).toBeOneOf([0, 1]);
   }
+
+  async awaitNextTick() {
+    await new Promise((r) => {
+      setTimeout(r);
+    });
+  }
 }

package/src/test-utils/test-tree.ts

@@ -78,6 +78,7 @@ export class TestTree<T = string> {
   get instance() {
     if (!this.treeInstance) {
       this.treeInstance = createTree(this.config);
+      this.treeInstance.setMounted(true);
       this.treeInstance.rebuildTree();
     }
     return this.treeInstance;
@@ -87,10 +88,9 @@ export class TestTree<T = string> {
 
   static async resolveAsyncLoaders() {
     do {
+      await vi.advanceTimersToNextTimerAsync();
       TestTree.asyncLoaderResolvers.shift()?.();
-      await new Promise<void>((r) => {
-        setTimeout(r);
-      });
+      await vi.advanceTimersToNextTimerAsync();
     } while (TestTree.asyncLoaderResolvers.length);
   }