feat: add workaround for react 17

Author: lukasbach

.changeset/rich-bees-tie.md

@@ -0,0 +1,5 @@
+---
+"@headless-tree/react": patch
+---
+
+Added optional @headless-tree/react/react17 import for useTree for compatibility

packages/docs/docs/0-root/getstarted.mdx

@@ -58,6 +58,15 @@ When rendering your tree, don't forget to
 - Spread the return value of `item.getProps()` as props into your tree item elements.
 - You probably want to indent your items based on their depth, which you can get via `item.getItemMeta().level`.
 
+:::info[React 17]
+
+Headless Tree uses `useInsertionEffect` in a way that triggers error logs on React 17. The
+best solution is to upgrade to React 18 if possible, otherwise you can also import `useTree`
+from `@headless-tree/react/react17` instead as a workaround. This workaround might be removed
+in the future.
+
+:::
+
 ## Importing Features
 
 The architecture of Headless Tree separates individual features into distinct objects, that need to be manually

packages/react/package.json

@@ -15,11 +15,21 @@
         "default": "./dist/index.d.ts"
       }
     },
+    "./react17": {
+      "import": {
+        "types": "./dist/react17/index.d.mts",
+        "default": "./dist/react17/index.mjs"
+      },
+      "require": {
+        "types": "./dist/react17/index.js",
+        "default": "./dist/react17/index.d.ts"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup ./src/index.ts --format esm,cjs --dts",
+    "build": "tsup ./src/index.ts ./src/react17/index.tsx --format esm,cjs --dts",
     "start": "tsup ./src/index.ts --format esm,cjs --dts --watch"
   },
   "repository": {

packages/react/src/react17/index.tsx

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