@headless-tree/react 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @headless-tree/react
 
+## 1.2.0
+
+### Minor Changes
+
+- 647a072: Fixed incorrect package.json exports configurations to proper ESM and CJS exports (#104)
+- 349d36e: change package.json["module"] to commonjs to fix inconsistent package definitiuons (#104)
+- 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.
+
+## 1.1.0
+
 ## 1.0.1
 
 ### Patch Changes

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,9 +1,14 @@
 {
   "name": "@headless-tree/react",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",
+  "exports": {
+    "types": "./lib/esm/index.d.ts",
+    "import": "./lib/esm/index.js",
+    "default": "./lib/cjs/index.js"
+  },
   "sideEffects": false,
   "scripts": {
     "build:cjs": "tsc -m commonjs --outDir lib/cjs",
@@ -16,6 +21,7 @@
     "directory": "packages/react"
   },
   "author": "Lukas Bach <npm@lukasbach.com>",
+  "funding": "https://github.com/sponsors/lukasbach",
   "license": "MIT",
   "devDependencies": {
     "@babel/preset-env": "^7.24.0",

package/readme.md

@@ -1,4 +1,4 @@
-![Headless Tree](./packages/docs/static/img/banner-github.png)
+![Headless Tree](https://github.com/lukasbach/headless-tree/raw/main/packages/docs/static/img/banner-github.png)
 
 [![Documentation](https://img.shields.io/badge/docs-1e1f22?style=flat)](https://headless-tree.lukasbach.com/)
 [![Chat on Discord](https://img.shields.io/badge/discord-4c57d9?style=flat&logo=discord&logoColor=ffffff)](https://discord.gg/KuZ6EezzVw)
@@ -139,7 +139,7 @@ Then, render your tree based on the tree instance returned from the hook:
       style={{ paddingLeft: `${item.getItemMeta().level * 20}px` }}
     >
       <div
-        className={cx("treeitem", {
+        className={cn("treeitem", {
           focused: item.isFocused(),
           expanded: item.isExpanded(),
           selected: item.isSelected(),

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;
 };