@tanstack/devtools 0.0.0

package/dist/esm/tabs/index.d.ts

@@ -0,0 +1,12 @@
+export declare const tabs: readonly [{
+    readonly name: "Plugins";
+    readonly id: "plugins";
+    readonly component: () => import("solid-js").JSX.Element;
+    readonly icon: import("solid-js").JSX.Element;
+}, {
+    readonly name: "Settings";
+    readonly id: "settings";
+    readonly component: () => import("solid-js").JSX.Element;
+    readonly icon: import("solid-js").JSX.Element;
+}];
+export type TabName = (typeof tabs)[number]['id'];

package/dist/esm/tabs/index.js

@@ -0,0 +1,19 @@
+import { template, createComponent } from "solid-js/web";
+import { SettingsTab } from "./settings-tab.js";
+import { PluginsTab } from "./plugins-tab.js";
+var _tmpl$ = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M8 6h10"></path><path d="M6 12h9"></path><path d="M11 18h7">`), _tmpl$2 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path><path d="M12 2v2"></path><path d="M12 22v-2"></path><path d="m17 20.66-1-1.73"></path><path d="M11 10.27 7 3.34"></path><path d="m20.66 17-1.73-1"></path><path d="m3.34 7 1.73 1"></path><path d="M14 12h8"></path><path d="M2 12h2"></path><path d="m20.66 7-1.73 1"></path><path d="m3.34 17 1.73-1"></path><path d="m17 3.34-1 1.73"></path><path d="m11 13.73-4 6.93">`);
+const tabs = [{
+  name: "Plugins",
+  id: "plugins",
+  component: () => createComponent(PluginsTab, {}),
+  icon: _tmpl$()
+}, {
+  name: "Settings",
+  id: "settings",
+  component: () => createComponent(SettingsTab, {}),
+  icon: _tmpl$2()
+}];
+export {
+  tabs
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/tabs/index.tsx"],"sourcesContent":["import { SettingsTab } from './settings-tab'\nimport { PluginsTab } from './plugins-tab'\n\nexport const tabs = [\n  {\n    name: 'Plugins',\n    id: 'plugins',\n    component: () => <PluginsTab />,\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M8 6h10\" />\n        <path d=\"M6 12h9\" />\n        <path d=\"M11 18h7\" />\n      </svg>\n    ),\n  },\n  {\n    name: 'Settings',\n    id: 'settings',\n    component: () => <SettingsTab />,\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n        <path d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\" />\n        <path d=\"M12 2v2\" />\n        <path d=\"M12 22v-2\" />\n        <path d=\"m17 20.66-1-1.73\" />\n        <path d=\"M11 10.27 7 3.34\" />\n        <path d=\"m20.66 17-1.73-1\" />\n        <path d=\"m3.34 7 1.73 1\" />\n        <path d=\"M14 12h8\" />\n        <path d=\"M2 12h2\" />\n        <path d=\"m20.66 7-1.73 1\" />\n        <path d=\"m3.34 17 1.73-1\" />\n        <path d=\"m17 3.34-1 1.73\" />\n        <path d=\"m11 13.73-4 6.93\" />\n      </svg>\n    ),\n  },\n] as const\n\nexport type TabName = (typeof tabs)[number]['id']\n"],"names":["tabs","name","id","component","_$createComponent","PluginsTab","icon","_tmpl$","SettingsTab","_tmpl$2"],"mappings":";;;;AAGO,MAAMA,OAAO,CAClB;AAAA,EACEC,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOC,YAAa,EAAA;AAAA,EAC/BC,MAAIC,OAAA;AAiBN,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOI,aAAc,EAAA;AAAA,EAChCF,MAAIG,QAAA;AA4BN,CAAC;"}

package/dist/esm/tabs/plugins-tab.d.ts

@@ -0,0 +1 @@
+export declare const PluginsTab: () => import("solid-js").JSX.Element;

package/dist/esm/tabs/plugins-tab.js

@@ -0,0 +1,73 @@
+import { template, insert, createComponent, effect, className, use, delegateEvents } from "solid-js/web";
+import { createEffect, For } from "solid-js";
+import clsx from "clsx";
+import { usePlugins } from "../context/use-devtools-context.js";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><h3>`);
+const PluginsTab = () => {
+  const {
+    plugins,
+    activePlugin,
+    setActivePlugin
+  } = usePlugins();
+  let activePluginRef;
+  createEffect(() => {
+    var _a;
+    const currentActivePlugin = (_a = plugins()) == null ? void 0 : _a.find((plugin) => {
+      var _a2;
+      return plugin.id === ((_a2 = activePlugin()) == null ? void 0 : _a2.id);
+    });
+    if (activePluginRef && currentActivePlugin) {
+      currentActivePlugin.render(activePluginRef);
+    }
+  });
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return plugins();
+      },
+      children: (plugin) => {
+        let pluginHeading;
+        createEffect(() => {
+          if (pluginHeading) {
+            typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading);
+          }
+        });
+        return (() => {
+          var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
+          _el$4.$$click = () => setActivePlugin(plugin);
+          var _ref$2 = pluginHeading;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$5) : pluginHeading = _el$5;
+          effect(() => {
+            var _a;
+            return className(_el$4, clsx(styles().pluginName, {
+              active: ((_a = activePlugin()) == null ? void 0 : _a.id) === plugin.id
+            }));
+          });
+          return _el$4;
+        })();
+      }
+    }));
+    var _ref$ = activePluginRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$3) : activePluginRef = _el$3;
+    effect((_p$) => {
+      var _v$ = styles().pluginsTabPanel, _v$2 = styles().pluginsTabSidebar, _v$3 = styles().pluginsTabContent;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+export {
+  PluginsTab
+};
+//# sourceMappingURL=plugins-tab.js.map

package/dist/esm/tabs/plugins-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins-tab.js","sources":["../../../src/tabs/plugins-tab.tsx"],"sourcesContent":["import { For, createEffect } from 'solid-js'\nimport clsx from 'clsx'\nimport { usePlugins } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\n\nexport const PluginsTab = () => {\n  const { plugins, activePlugin, setActivePlugin } = usePlugins()\n  let activePluginRef: HTMLDivElement | undefined\n  createEffect(() => {\n    const currentActivePlugin = plugins()?.find(\n      (plugin) => plugin.id === activePlugin()?.id,\n    )\n    if (activePluginRef && currentActivePlugin) {\n      currentActivePlugin.render(activePluginRef)\n    }\n  })\n  const styles = useStyles()\n  return (\n    <div class={styles().pluginsTabPanel}>\n      <div class={styles().pluginsTabSidebar}>\n        <For each={plugins()}>\n          {(plugin) => {\n            let pluginHeading: HTMLHeadingElement | undefined\n            createEffect(() => {\n              if (pluginHeading) {\n                typeof plugin.name === 'string'\n                  ? (pluginHeading.textContent = plugin.name)\n                  : plugin.name(pluginHeading)\n              }\n            })\n            return (\n              <div\n                onClick={() => setActivePlugin(plugin)}\n                class={clsx(styles().pluginName, {\n                  active: activePlugin()?.id === plugin.id,\n                })}\n              >\n                <h3 ref={pluginHeading} />\n              </div>\n            )\n          }}\n        </For>\n      </div>\n      <div ref={activePluginRef} class={styles().pluginsTabContent}></div>\n    </div>\n  )\n}\n"],"names":["PluginsTab","plugins","activePlugin","setActivePlugin","usePlugins","activePluginRef","createEffect","currentActivePlugin","find","plugin","id","render","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$createComponent","For","each","children","pluginHeading","name","textContent","_el$4","_tmpl$2","_el$5","$$click","_ref$2","_$use","_$effect","_$className","clsx","pluginName","active","_ref$","_p$","_v$","pluginsTabPanel","_v$2","pluginsTabSidebar","_v$3","pluginsTabContent","e","t","a","undefined","_$delegateEvents"],"mappings":";;;;;;AAKO,MAAMA,aAAaA,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAcC;AAAAA,MAAoBC,WAAW;AAC1DC,MAAAA;AACJC,eAAa,MAAM;;AACXC,UAAAA,uBAAsBN,aAAWO,MAAXP,mBAAWO,KACpCC,YAAWA;;AAAAA,oBAAOC,SAAOR,MAAAA,aAAa,MAAbA,gBAAAA,IAAgBQ;AAAAA;AAE5C,QAAIL,mBAAmBE,qBAAqB;AAC1CA,0BAAoBI,OAAON,eAAe;AAAA,IAAA;AAAA,EAC5C,CACD;AACD,QAAMO,SAASC,UAAU;AACzB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAH,WAAAA,OAAAI,gBAGOC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,QAAQ;AAAA,MAAC;AAAA,MAAAsB,UAChBd,CAAW,WAAA;AACPe,YAAAA;AACJlB,qBAAa,MAAM;AACjB,cAAIkB,eAAe;AACVf,mBAAAA,OAAOgB,SAAS,WAClBD,cAAcE,cAAcjB,OAAOgB,OACpChB,OAAOgB,KAAKD,aAAa;AAAA,UAAA;AAAA,QAC/B,CACD;AACD,gBAAA,MAAA;AAAA,cAAAG,QAAAC,QAAAA,GAAAC,QAAAF,MAAAV;AAAAa,gBAAAA,UAEa,MAAM3B,gBAAgBM,MAAM;AAAC,cAAAsB,SAK7BP;AAAa,iBAAAO,WAAAC,aAAAA,IAAAD,QAAAF,KAAA,IAAbL,gBAAaK;AAAAI,iBAAAC,MAAAA;;AAAAA,6BAAAP,OAJfQ,KAAKvB,SAASwB,YAAY;AAAA,cAC/BC,UAAQnC,kBAAAA,MAAAA,mBAAgBQ,QAAOD,OAAOC;AAAAA,YACvC,CAAA,CAAC;AAAA,WAAA;AAAAiB,iBAAAA;AAAAA,QAAAA,GAAA;AAAA,MAAA;AAAA,IAKR,CAAC,CAAA;AAAA,QAAAW,QAGKjC;AAAe,WAAAiC,UAAAN,aAAAA,IAAAM,OAAApB,KAAA,IAAfb,kBAAea;AAAAe,WAAAM,CAAA,QAAA;AAAAC,UAAAA,MAzBf5B,SAAS6B,iBAAeC,OACtB9B,OAAS+B,EAAAA,mBAAiBC,OAwBJhC,OAAAA,EAASiC;AAAiBL,cAAAD,IAAAO,KAAAZ,UAAApB,MAAAyB,IAAAO,IAAAN,GAAA;AAAAE,eAAAH,IAAAQ,KAAAb,UAAAlB,OAAAuB,IAAAQ,IAAAL,IAAA;AAAAE,eAAAL,IAAAS,KAAAd,UAAAhB,OAAAqB,IAAAS,IAAAJ,IAAA;AAAAL,aAAAA;AAAAA,IAAAA,GAAA;AAAA,MAAAO,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAnC,WAAAA;AAAAA,EAAAA,GAAA;AAGlE;AAACoC,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/tabs/settings-tab.d.ts

@@ -0,0 +1 @@
+export declare const SettingsTab: () => import("solid-js").JSX.Element;

package/dist/esm/tabs/settings-tab.js

@@ -0,0 +1,9 @@
+import { template } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ template(`<div>Settings`);
+const SettingsTab = () => {
+  return _tmpl$();
+};
+export {
+  SettingsTab
+};
+//# sourceMappingURL=settings-tab.js.map

package/dist/esm/tabs/settings-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["export const SettingsTab = () => {\n  return <div>Settings</div>\n}\n"],"names":["SettingsTab","_tmpl$"],"mappings":";;AAAO,MAAMA,cAAcA,MAAM;AAC/B,SAAAC,OAAA;AACF;"}

package/dist/esm/utils/sanitize.d.ts

@@ -0,0 +1 @@
+export declare const tryParseJson: <T>(json: string | null) => T | undefined;

package/dist/esm/utils/sanitize.js

@@ -0,0 +1,12 @@
+const tryParseJson = (json) => {
+  if (!json) return void 0;
+  try {
+    return JSON.parse(json);
+  } catch (_e) {
+    return void 0;
+  }
+};
+export {
+  tryParseJson
+};
+//# sourceMappingURL=sanitize.js.map

package/dist/esm/utils/sanitize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.js","sources":["../../../src/utils/sanitize.ts"],"sourcesContent":["export const tryParseJson = <T>(json: string | null): T | undefined => {\n  if (!json) return undefined\n  try {\n    return JSON.parse(json)\n  } catch (_e) {\n    return undefined\n  }\n}\n"],"names":[],"mappings":"AAAa,MAAA,eAAe,CAAI,SAAuC;AACjE,MAAA,CAAC,KAAa,QAAA;AACd,MAAA;AACK,WAAA,KAAK,MAAM,IAAI;AAAA,WACf,IAAI;AACJ,WAAA;AAAA,EAAA;AAEX;"}

package/dist/esm/utils/storage.d.ts

@@ -0,0 +1,5 @@
+export declare const getStorageItem: (key: string) => string | null;
+export declare const setStorageItem: (key: string, value: string) => void;
+export declare const TANSTACK_DEVTOOLS = "tanstack_devtools";
+export declare const TANSTACK_DEVTOOLS_STATE = "tanstack_devtools_state";
+export declare const TANSTACK_DEVTOOLS_SETTINGS = "tanstack_devtools_settings";

package/dist/esm/utils/storage.js

@@ -0,0 +1,19 @@
+const getStorageItem = (key) => localStorage.getItem(key);
+const setStorageItem = (key, value) => {
+  try {
+    localStorage.setItem(key, value);
+  } catch (_e) {
+    return;
+  }
+};
+const TANSTACK_DEVTOOLS = "tanstack_devtools";
+const TANSTACK_DEVTOOLS_STATE = "tanstack_devtools_state";
+const TANSTACK_DEVTOOLS_SETTINGS = "tanstack_devtools_settings";
+export {
+  TANSTACK_DEVTOOLS,
+  TANSTACK_DEVTOOLS_SETTINGS,
+  TANSTACK_DEVTOOLS_STATE,
+  getStorageItem,
+  setStorageItem
+};
+//# sourceMappingURL=storage.js.map

package/dist/esm/utils/storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.js","sources":["../../../src/utils/storage.ts"],"sourcesContent":["export const getStorageItem = (key: string) => localStorage.getItem(key)\nexport const setStorageItem = (key: string, value: string) => {\n  try {\n    localStorage.setItem(key, value)\n  } catch (_e) {\n    return\n  }\n}\n\nexport const TANSTACK_DEVTOOLS = 'tanstack_devtools'\nexport const TANSTACK_DEVTOOLS_STATE = 'tanstack_devtools_state'\nexport const TANSTACK_DEVTOOLS_SETTINGS = 'tanstack_devtools_settings'\n"],"names":[],"mappings":"AAAO,MAAM,iBAAiB,CAAC,QAAgB,aAAa,QAAQ,GAAG;AAC1D,MAAA,iBAAiB,CAAC,KAAa,UAAkB;AACxD,MAAA;AACW,iBAAA,QAAQ,KAAK,KAAK;AAAA,WACxB,IAAI;AACX;AAAA,EAAA;AAEJ;AAEO,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAChC,MAAM,6BAA6B;"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@tanstack/devtools",
+  "version": "0.0.0",
+  "description": "Headless UI for creating advanced custom devtools, autocomplete, and dropdown components.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "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": {
+    "@solid-primitives/keyboard": "^1.2.8",
+    "clsx": "^2.1.1",
+    "goober": "^2.1.16",
+    "solid-js": "^1.9.5"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.11.6"
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  }
+}

package/src/components/content-panel.tsx

@@ -0,0 +1,21 @@
+import { useStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+export const ContentPanel = (props: {
+  ref: (el: HTMLDivElement | undefined) => void
+  children: JSX.Element
+  handleDragStart?: (e: any) => void
+}) => {
+  const styles = useStyles()
+  return (
+    <div ref={props.ref} class={styles().devtoolsPanel}>
+      {props.handleDragStart ? (
+        <div
+          class={styles().dragHandle}
+          onMouseDown={props.handleDragStart}
+        ></div>
+      ) : null}
+      {props.children}
+    </div>
+  )
+}