@headless-tree/react 0.0.1

package/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import { TreeConfig } from "@headless-tree/core";
+export declare const useTree: <T>(config: TreeConfig<T>) => import("@headless-tree/core").TreeInstance<T>;

package/lib/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTree = void 0;
+const react_1 = require("react");
+const core_1 = require("@headless-tree/core");
+const useTree = (config) => {
+    const [tree] = (0, react_1.useState)(() => ({ current: (0, core_1.createTree)(config) }));
+    // TODO initial state
+    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);
+        } })));
+    return tree.current;
+};
+exports.useTree = useTree;

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@headless-tree/react",
+  "version": "0.0.1",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "start": "tsc -w"
+  },
+  "author": "Lukas Bach <npm@lukasbach.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
+    "@headless-tree/core": "workspace:*",
+    "prop-types": "15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.0.4"
+  },
+  "peerDependencies": {
+    "@headless-tree/core": "*",
+    "react": "*",
+    "react-dom": "*"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { createTree, TreeConfig } from "@headless-tree/core";
+
+export const useTree = <T,>(config: TreeConfig<T>) => {
+  const [tree] = useState(() => ({ current: createTree(config) }));
+  // TODO initial state
+  const [state, setState] = useState(() => tree.current.getState());
+
+  tree.current.setConfig((prev) => ({
+    ...prev,
+    ...config,
+    state: {
+      // ...prev.state,
+      ...state,
+      ...config.state,
+    },
+    setState: (state) => {
+      setState(state);
+      config.setState?.(state);
+    },
+  }));
+
+  return tree.current;
+};

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "outDir": "lib"
+  }
+}

package/typedoc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../typedoc.base.json"],
+  "entryPoints": ["src/index.tsx"]
+}