@tanstack/react-devtools 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TanStack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/devtools.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const devtools = require("@tanstack/devtools");
+const Devtools = (opts) => {
+  const devToolRef = react.useRef(null);
+  const [devtools$1] = react.useState(() => new devtools.TanStackRouterDevtoolsCore(opts));
+  react.useEffect(() => {
+    if (devToolRef.current) {
+      devtools$1.mount(devToolRef.current);
+    }
+    return () => {
+      devtools$1.unmount();
+    };
+  }, [devtools$1]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: devToolRef });
+};
+exports.Devtools = Devtools;
+//# sourceMappingURL=devtools.cjs.map

package/dist/cjs/devtools.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/devtools'\nimport type { DevtoolsOptions } from '@tanstack/devtools'\n\nexport const Devtools = (opts: DevtoolsOptions) => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n  const [devtools] = useState(() => new TanStackRouterDevtoolsCore(opts))\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div ref={devToolRef} />\n}\n"],"names":["useRef","devtools","useState","TanStackRouterDevtoolsCore","useEffect","jsx"],"mappings":";;;;;AAIa,MAAA,WAAW,CAAC,SAA0B;AAC3C,QAAA,aAAaA,aAAuB,IAAI;AACxC,QAAA,CAACC,UAAQ,IAAIC,MAAAA,SAAS,MAAM,IAAIC,SAAAA,2BAA2B,IAAI,CAAC;AACtEC,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACbH,iBAAA,MAAM,WAAW,OAAO;AAAA,IAAA;AAGnC,WAAO,MAAM;AACXA,iBAAS,QAAQ;AAAA,IACnB;AAAA,EAAA,GACC,CAACA,UAAQ,CAAC;AAEN,SAAAI,2BAAA,IAAC,OAAI,EAAA,KAAK,WAAY,CAAA;AAC/B;;"}

package/dist/cjs/devtools.d.cts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DevtoolsOptions } from '@tanstack/devtools';
+export declare const Devtools: (opts: DevtoolsOptions) => React.JSX.Element;

package/dist/cjs/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const devtools$1 = require("@tanstack/devtools");
+const devtools = require("./devtools.cjs");
+exports.Devtools = devtools.Devtools;
+Object.keys(devtools$1).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => devtools$1[k]
+  });
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/cjs/index.d.cts

@@ -0,0 +1,5 @@
+export * from '@tanstack/devtools';
+/**
+ * Export every hook individually - DON'T export from barrel files
+ */
+export { Devtools } from './devtools.cjs';

package/dist/esm/devtools.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DevtoolsOptions } from '@tanstack/devtools';
+export declare const Devtools: (opts: DevtoolsOptions) => React.JSX.Element;

package/dist/esm/devtools.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { TanStackRouterDevtoolsCore } from "@tanstack/devtools";
+const Devtools = (opts) => {
+  const devToolRef = useRef(null);
+  const [devtools] = useState(() => new TanStackRouterDevtoolsCore(opts));
+  useEffect(() => {
+    if (devToolRef.current) {
+      devtools.mount(devToolRef.current);
+    }
+    return () => {
+      devtools.unmount();
+    };
+  }, [devtools]);
+  return /* @__PURE__ */ jsx("div", { ref: devToolRef });
+};
+export {
+  Devtools
+};
+//# sourceMappingURL=devtools.js.map

package/dist/esm/devtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/devtools'\nimport type { DevtoolsOptions } from '@tanstack/devtools'\n\nexport const Devtools = (opts: DevtoolsOptions) => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n  const [devtools] = useState(() => new TanStackRouterDevtoolsCore(opts))\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div ref={devToolRef} />\n}\n"],"names":[],"mappings":";;;AAIa,MAAA,WAAW,CAAC,SAA0B;AAC3C,QAAA,aAAa,OAAuB,IAAI;AACxC,QAAA,CAAC,QAAQ,IAAI,SAAS,MAAM,IAAI,2BAA2B,IAAI,CAAC;AACtE,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACb,eAAA,MAAM,WAAW,OAAO;AAAA,IAAA;AAGnC,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEN,SAAA,oBAAC,OAAI,EAAA,KAAK,WAAY,CAAA;AAC/B;"}

package/dist/esm/index.d.ts

@@ -0,0 +1,5 @@
+export * from '@tanstack/devtools';
+/**
+ * Export every hook individually - DON'T export from barrel files
+ */
+export { Devtools } from './devtools.js';

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+export * from "@tanstack/devtools";
+import { Devtools } from "./devtools.js";
+export {
+  Devtools
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@tanstack/react-devtools",
+  "version": "0.0.0",
+  "description": "Headless UI for creating advanced custom devtools, autocomplete, and dropdown components in React.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/devtools.git",
+    "directory": "packages/react-devtools"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "react",
+    "devtools",
+    "autocomplete",
+    "dropdown",
+    "menu",
+    "headless-ui",
+    "nested"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/devtools": "0.0.0"
+  },
+  "devDependencies": {
+    "@eslint-react/eslint-plugin": "^1.48.5",
+    "@types/react": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint-plugin-react-compiler": "19.1.0-rc.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "react": "^19.1.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8",
+    "@types/react-dom": ">=16.8",
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  }
+}

package/src/devtools.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { TanStackRouterDevtoolsCore } from '@tanstack/devtools'
+import type { DevtoolsOptions } from '@tanstack/devtools'
+
+export const Devtools = (opts: DevtoolsOptions) => {
+  const devToolRef = useRef<HTMLDivElement>(null)
+  const [devtools] = useState(() => new TanStackRouterDevtoolsCore(opts))
+  useEffect(() => {
+    if (devToolRef.current) {
+      devtools.mount(devToolRef.current)
+    }
+
+    return () => {
+      devtools.unmount()
+    }
+  }, [devtools])
+
+  return <div ref={devToolRef} />
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+// re-export everything from the core devtools package
+export * from '@tanstack/devtools'
+/**
+ * Export every hook individually - DON'T export from barrel files
+ */
+
+export { Devtools } from './devtools'