@headless-tree/react 0.0.0-20250514161759 → 0.0.0-20250611124731

package/CHANGELOG.md

@@ -1,17 +1,23 @@
 # @headless-tree/react
 
-## 0.0.0-20250514161759
+## 0.0.0-20250611124731
+
+### Minor Changes
+
+- e2faf37: Fixed an issue async data loaders that resolve data before the tree is mounted can cause the tree to not render at all
+
+  Note: When using the `createTree()` API directly instead of going through the React `useTree` API, an additional call
+  to `tree.rebuildItems()` afterwards will be necessary. This change is marked as minor release regardless, since `createTree` is
+  currently not a publically documented feature.
 
 ### Patch Changes
 
-- Updated dependencies [64d8e2a]
-- Updated dependencies [35260e3]
-- Updated dependencies [29b2c64]
-- Updated dependencies [da1e757]
-- Updated dependencies [c283f52]
-- Updated dependencies [29b2c64]
-- Updated dependencies [cd5b27c]
-  - @headless-tree/core@0.0.0-20250514161759
+- Updated dependencies [727c982]
+- Updated dependencies [2887b0c]
+- Updated dependencies [e2faf37]
+  - @headless-tree/core@0.0.0-20250611124731
+
+## 1.1.0
 
 ## 1.0.1
 

package/lib/cjs/use-tree.js

@@ -6,11 +6,16 @@ const core_1 = require("@headless-tree/core");
 const useTree = (config) => {
     const [tree] = (0, react_1.useState)(() => ({ current: (0, core_1.createTree)(config) }));
     const [state, setState] = (0, react_1.useState)(() => tree.current.getState());
-    tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
-            var _a;
-            setState(state);
-            (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-        } })));
+    (0, react_1.useEffect)(() => {
+        tree.current.rebuildTree();
+    }, [tree]); // runs only once after mount
+    (0, react_1.useInsertionEffect)(() => {
+        tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
+                var _a;
+                setState(state);
+                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
+            } })));
+    });
     return tree.current;
 };
 exports.useTree = useTree;

package/lib/esm/use-tree.js

@@ -1,12 +1,17 @@
-import { useState } from "react";
+import { useEffect, useInsertionEffect, useState } from "react";
 import { createTree } from "@headless-tree/core";
 export const useTree = (config) => {
     const [tree] = useState(() => ({ current: createTree(config) }));
     const [state, setState] = useState(() => tree.current.getState());
-    tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
-            var _a;
-            setState(state);
-            (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-        } })));
+    useEffect(() => {
+        tree.current.rebuildTree();
+    }, [tree]); // runs only once after mount
+    useInsertionEffect(() => {
+        tree.current.setConfig((prev) => (Object.assign(Object.assign(Object.assign({}, prev), config), { state: Object.assign(Object.assign({}, state), config.state), setState: (state) => {
+                var _a;
+                setState(state);
+                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
+            } })));
+    });
     return tree.current;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/react",
-  "version": "0.0.0-20250514161759",
+  "version": "0.0.0-20250611124731",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",
@@ -28,7 +28,7 @@
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
-    "@headless-tree/core": "0.0.0-20250514161759",
+    "@headless-tree/core": "0.0.0-20250611124731",
     "react": "*",
     "react-dom": "*"
   }

package/src/use-tree.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useInsertionEffect, useState } from "react";
 import { TreeConfig, TreeState, createTree } from "@headless-tree/core";
 
 export const useTree = <T,>(config: TreeConfig<T>) => {
@@ -7,19 +7,25 @@ export const useTree = <T,>(config: TreeConfig<T>) => {
     tree.current.getState(),
   );
 
-  tree.current.setConfig((prev) => ({
-    ...prev,
-    ...config,
-    state: {
-      // ...prev.state,
-      ...state,
-      ...config.state,
-    },
-    setState: (state) => {
-      setState(state);
-      config.setState?.(state);
-    },
-  }));
+  useEffect(() => {
+    tree.current.rebuildTree();
+  }, [tree]); // runs only once after mount
+
+  useInsertionEffect(() => {
+    tree.current.setConfig((prev) => ({
+      ...prev,
+      ...config,
+      state: {
+        // ...prev.state,
+        ...state,
+        ...config.state,
+      },
+      setState: (state) => {
+        setState(state);
+        config.setState?.(state);
+      },
+    }));
+  });
 
   return tree.current;
 };