@tanstack/devtools 0.0.0

package/dist/esm/components/trigger.js

@@ -0,0 +1,31 @@
+import { template, insert, createComponent, effect, className, delegateEvents } from "solid-js/web";
+import { createMemo } from "solid-js";
+import clsx from "clsx";
+import { useDevtoolsSettings } from "../context/use-devtools-context.js";
+import { useStyles } from "../styles/use-styles.js";
+import { TanStackLogo } from "./logo.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button aria-label="Open TanStack Devtools">`);
+const Trigger = ({
+  isOpen,
+  setIsOpen
+}) => {
+  const {
+    settings
+  } = useDevtoolsSettings();
+  const styles = useStyles();
+  const buttonStyle = createMemo(() => {
+    return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen()));
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    _el$.$$click = () => setIsOpen(!isOpen());
+    insert(_el$, createComponent(TanStackLogo, {}));
+    effect(() => className(_el$, buttonStyle()));
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+export {
+  Trigger
+};
+//# sourceMappingURL=trigger.js.map

package/dist/esm/components/trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","sources":["../../../src/components/trigger.tsx"],"sourcesContent":["import { createMemo } from 'solid-js'\nimport clsx from 'clsx'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TanStackLogo } from './logo'\nimport type { Accessor } from 'solid-js'\n\nexport const Trigger = ({\n  isOpen,\n  setIsOpen,\n}: {\n  isOpen: Accessor<boolean>\n  setIsOpen: (isOpen: boolean) => void\n}) => {\n  const { settings } = useDevtoolsSettings()\n  const styles = useStyles()\n  const buttonStyle = createMemo(() => {\n    return clsx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(settings().position),\n      styles().mainCloseBtnAnimation(isOpen()),\n    )\n  })\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Open TanStack Devtools\"\n      class={buttonStyle()}\n      onClick={() => setIsOpen(!isOpen())}\n    >\n      <TanStackLogo />\n    </button>\n  )\n}\n"],"names":["Trigger","isOpen","setIsOpen","settings","useDevtoolsSettings","styles","useStyles","buttonStyle","createMemo","clsx","mainCloseBtn","mainCloseBtnPosition","position","mainCloseBtnAnimation","_el$","_tmpl$","$$click","_$insert","_$createComponent","TanStackLogo","_$effect","_$className","_$delegateEvents"],"mappings":";;;;;;;AAOO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAIF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAaC,oBAAoB;AACzC,QAAMC,SAASC,UAAU;AACnBC,QAAAA,cAAcC,WAAW,MAAM;AACnC,WAAOC,KACLJ,OAAO,EAAEK,cACTL,SAASM,qBAAqBR,SAAAA,EAAWS,QAAQ,GACjDP,OAAO,EAAEQ,sBAAsBZ,OAAQ,CAAA,CACzC;AAAA,EAAA,CACD;AACD,UAAA,MAAA;AAAA,QAAAa,OAAAC,OAAA;AAAAD,SAAAE,UAKa,MAAMd,UAAU,CAACD,QAAQ;AAACgB,WAAAH,MAAAI,gBAElCC,cAAY,CAAA,CAAA,CAAA;AAAAC,iBAAAC,UAAAP,MAHNP,YAAa,CAAA,CAAA;AAAAO,WAAAA;AAAAA,EAAAA,GAAA;AAM1B;AAACQ,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/context/devtools-context.d.ts

@@ -0,0 +1,20 @@
+import { DevtoolsStore } from './devtools-store.js';
+import { Setter } from 'solid-js';
+import { JSX } from 'solid-js/jsx-runtime';
+export interface DevtoolsPlugin {
+    name: string | ((el: HTMLHeadingElement) => void);
+    id: string;
+    render: (el: HTMLDivElement) => void;
+}
+export declare const DevtoolsContext: import('solid-js').Context<{
+    store: DevtoolsStore;
+    setStore: Setter<DevtoolsStore>;
+} | undefined>;
+interface ContextProps {
+    children: JSX.Element;
+    plugins?: Array<DevtoolsPlugin>;
+    config?: DevtoolsSettings;
+}
+export type DevtoolsSettings = DevtoolsStore['settings'];
+export declare const DevtoolsProvider: (props: ContextProps) => JSX.Element;
+export {};

package/dist/esm/context/devtools-context.js

@@ -0,0 +1,62 @@
+import { createComponent } from "solid-js/web";
+import { createContext } from "solid-js";
+import { createStore } from "solid-js/store";
+import { tryParseJson } from "../utils/sanitize.js";
+import { getStorageItem, setStorageItem, TANSTACK_DEVTOOLS_SETTINGS, TANSTACK_DEVTOOLS_STATE } from "../utils/storage.js";
+import { initialState } from "./devtools-store.js";
+const DevtoolsContext = createContext();
+const getSettings = () => {
+  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS);
+  const settings = tryParseJson(settingsString);
+  return {
+    ...settings
+  };
+};
+const getExistingStateFromStorage = (config, plugins) => {
+  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE);
+  const settings = getSettings();
+  const state = {
+    ...initialState,
+    plugins: plugins || [],
+    state: {
+      ...initialState.state,
+      ...existingState ? JSON.parse(existingState) : {}
+    },
+    settings: {
+      ...initialState.settings,
+      ...config,
+      ...settings
+    }
+  };
+  return state;
+};
+const DevtoolsProvider = (props) => {
+  const [store, setStore] = createStore(getExistingStateFromStorage(props.config, props.plugins));
+  const value = {
+    store,
+    setStore: (updater) => {
+      const newState = updater(store);
+      const {
+        settings,
+        state: internalState
+      } = newState;
+      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings));
+      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState));
+      setStore((prev) => ({
+        ...prev,
+        ...newState
+      }));
+    }
+  };
+  return createComponent(DevtoolsContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+};
+export {
+  DevtoolsContext,
+  DevtoolsProvider
+};
+//# sourceMappingURL=devtools-context.js.map

package/dist/esm/context/devtools-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-context.js","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n  TANSTACK_DEVTOOLS_SETTINGS,\n  TANSTACK_DEVTOOLS_STATE,\n  getStorageItem,\n  setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { Setter } from 'solid-js'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport interface DevtoolsPlugin {\n  name: string | ((el: HTMLHeadingElement) => void)\n  id: string\n  render: (el: HTMLDivElement) => void\n}\n\nexport const DevtoolsContext = createContext<{\n  store: DevtoolsStore\n  setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n  children: JSX.Element\n  plugins?: Array<DevtoolsPlugin>\n  config?: DevtoolsSettings\n}\n\nconst getSettings = () => {\n  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n  return {\n    ...settings,\n  }\n}\n\nconst getExistingStateFromStorage = (\n  config?: DevtoolsSettings,\n  plugins?: Array<DevtoolsPlugin>,\n) => {\n  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n  const settings = getSettings()\n\n  const state: DevtoolsStore = {\n    ...initialState,\n    plugins: plugins || [],\n    state: {\n      ...initialState.state,\n      ...(existingState ? JSON.parse(existingState) : {}),\n    },\n    settings: {\n      ...initialState.settings,\n      ...config,\n      ...settings,\n    },\n  }\n  return state\n}\n\nexport type DevtoolsSettings = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n  const [store, setStore] = createStore(\n    getExistingStateFromStorage(props.config, props.plugins),\n  )\n\n  const value = {\n    store,\n    setStore: (\n      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n    ) => {\n      const newState = updater(store)\n      const { settings, state: internalState } = newState\n      // Store user settings for dev tools into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n      // Store general state into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n      setStore((prev) => ({\n        ...prev,\n        ...newState,\n      }))\n    },\n  }\n\n  return (\n    <DevtoolsContext.Provider value={value}>\n      {props.children}\n    </DevtoolsContext.Provider>\n  )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;AAoBO,MAAMA,kBAAkBC,cAG5B;AAQH,MAAMC,cAAcA,MAAM;AAClBC,QAAAA,iBAAiBC,eAAeC,0BAA0B;AAC1DC,QAAAA,WAAWC,aAAwCJ,cAAc;AAChE,SAAA;AAAA,IACL,GAAGG;AAAAA,EACL;AACF;AAEA,MAAME,8BAA8BA,CAClCC,QACAC,YACG;AACGC,QAAAA,gBAAgBP,eAAeQ,uBAAuB;AAC5D,QAAMN,WAAWJ,YAAY;AAE7B,QAAMW,QAAuB;AAAA,IAC3B,GAAGC;AAAAA,IACHJ,SAASA,WAAW,CAAE;AAAA,IACtBG,OAAO;AAAA,MACL,GAAGC,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBI,KAAKC,MAAML,aAAa,IAAI,CAAA;AAAA,IAClD;AAAA,IACAL,UAAU;AAAA,MACR,GAAGQ,aAAaR;AAAAA,MAChB,GAAGG;AAAAA,MACH,GAAGH;AAAAA,IAAAA;AAAAA,EAEP;AACOO,SAAAA;AACT;AAIaI,MAAAA,mBAAmBA,CAACC,UAAwB;AACjD,QAAA,CAACC,OAAOC,QAAQ,IAAIC,YACxBb,4BAA4BU,MAAMT,QAAQS,MAAMR,OAAO,CACzD;AAEA,QAAMY,QAAQ;AAAA,IACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACGC,YAAAA,WAAWD,QAAQJ,KAAK;AACxB,YAAA;AAAA,QAAEb;AAAAA,QAAUO,OAAOY;AAAAA,MAAAA,IAAkBD;AAE3CE,qBAAerB,4BAA4BU,KAAKY,UAAUrB,QAAQ,CAAC;AAEnEoB,qBAAed,yBAAyBG,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAU,UAAA;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IAAA;AAAA,EAEN;AAEAK,SAAAA,gBACG7B,gBAAgB8B,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAAA;AAAAA,EAAQ,CAAA;AAGrB;"}

package/dist/esm/context/devtools-store.d.ts

@@ -0,0 +1,53 @@
+import { TabName } from '../tabs.js';
+import { DevtoolsPlugin } from './devtools-context.js';
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
+type KeyboardKey = ModifierKey | (string & {});
+type TriggerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right';
+export type DevtoolsStore = {
+    settings: {
+        /**
+         * Whether the dev tools should be open by default
+         * @default false
+         */
+        defaultOpen: boolean;
+        /**
+         * Whether the dev tools trigger should be hidden until the user hovers over it
+         * @default false
+         */
+        hideUntilHover: boolean;
+        /**
+         * The position of the trigger button
+         * @default "bottom-right"
+         */
+        position: TriggerPosition;
+        /**
+         * The location of the panel once it is open
+         * @default "bottom"
+         */
+        panelLocation: 'top' | 'bottom';
+        /**
+         * The hotkey to open the dev tools
+         * @default "shift+a"
+         */
+        openHotkey: Array<KeyboardKey>;
+        /**
+         * Whether to require the URL flag to open the dev tools
+         * @default false
+         */
+        requireUrlFlag: boolean;
+        /**
+         * The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)
+         * @default "tanstack-devtools"
+         */
+        urlFlag: string;
+    };
+    state: {
+        activeTab: TabName;
+        height: number;
+        activePlugin?: DevtoolsPlugin | undefined;
+        persistOpen: boolean;
+    };
+    plugins?: Array<DevtoolsPlugin>;
+};
+export declare const initialState: DevtoolsStore;
+export {};

package/dist/esm/context/devtools-store.js

@@ -0,0 +1,21 @@
+const initialState = {
+  settings: {
+    defaultOpen: false,
+    hideUntilHover: false,
+    position: "bottom-right",
+    panelLocation: "bottom",
+    openHotkey: ["Shift", "A"],
+    requireUrlFlag: false,
+    urlFlag: "tanstack-devtools"
+  },
+  state: {
+    activeTab: "plugins",
+    height: 400,
+    activePlugin: void 0,
+    persistOpen: false
+  }
+};
+export {
+  initialState
+};
+//# sourceMappingURL=devtools-store.js.map

package/dist/esm/context/devtools-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-store.js","sources":["../../../src/context/devtools-store.ts"],"sourcesContent":["import type { TabName } from '../tabs'\nimport type { DevtoolsPlugin } from './devtools-context'\n\ntype ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'\ntype KeyboardKey = ModifierKey | (string & {})\n\ntype TriggerPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'middle-left'\n  | 'middle-right'\n\nexport type DevtoolsStore = {\n  settings: {\n    /**\n     * Whether the dev tools should be open by default\n     * @default false\n     */\n    defaultOpen: boolean\n    /**\n     * Whether the dev tools trigger should be hidden until the user hovers over it\n     * @default false\n     */\n    hideUntilHover: boolean\n    /**\n     * The position of the trigger button\n     * @default \"bottom-right\"\n     */\n    position: TriggerPosition\n\n    /**\n     * The location of the panel once it is open\n     * @default \"bottom\"\n     */\n    panelLocation: 'top' | 'bottom'\n    /**\n     * The hotkey to open the dev tools\n     * @default \"shift+a\"\n     */\n    openHotkey: Array<KeyboardKey>\n    /**\n     * Whether to require the URL flag to open the dev tools\n     * @default false\n     */\n    requireUrlFlag: boolean\n    /**\n     * The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)\n     * @default \"tanstack-devtools\"\n     */\n    urlFlag: string\n  }\n  state: {\n    activeTab: TabName\n    height: number\n    activePlugin?: DevtoolsPlugin | undefined\n    persistOpen: boolean\n  }\n  plugins?: Array<DevtoolsPlugin>\n}\n\nexport const initialState: DevtoolsStore = {\n  settings: {\n    defaultOpen: false,\n    hideUntilHover: false,\n    position: 'bottom-right',\n    panelLocation: 'bottom',\n    openHotkey: ['Shift', 'A'],\n    requireUrlFlag: false,\n    urlFlag: 'tanstack-devtools',\n  },\n  state: {\n    activeTab: 'plugins',\n    height: 400,\n    activePlugin: undefined,\n    persistOpen: false,\n  },\n}\n"],"names":[],"mappings":"AA8DO,MAAM,eAA8B;AAAA,EACzC,UAAU;AAAA,IACR,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA,IACf,YAAY,CAAC,SAAS,GAAG;AAAA,IACzB,gBAAgB;AAAA,IAChB,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAEjB;"}

package/dist/esm/context/use-devtools-context.d.ts

@@ -0,0 +1,36 @@
+import { DevtoolsPlugin } from './devtools-context.jsx';
+import { DevtoolsStore } from './devtools-store.js';
+export declare const usePlugins: () => {
+    plugins: import('solid-js').Accessor<DevtoolsPlugin[] | undefined>;
+    setActivePlugin: (plugin: DevtoolsPlugin) => void;
+    activePlugin: import('solid-js').Accessor<DevtoolsPlugin | undefined>;
+};
+export declare const useDevtoolsState: () => {
+    state: import('solid-js').Accessor<{
+        activeTab: import('../tabs/index.jsx').TabName;
+        height: number;
+        activePlugin?: DevtoolsPlugin | undefined;
+        persistOpen: boolean;
+    }>;
+    setState: (newState: Partial<DevtoolsStore["state"]>) => void;
+};
+export declare const useDevtoolsSettings: () => {
+    setSettings: (newSettings: Partial<DevtoolsStore["settings"]>) => void;
+    settings: import('solid-js').Accessor<{
+        defaultOpen: boolean;
+        hideUntilHover: boolean;
+        position: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle-left" | "middle-right";
+        panelLocation: "top" | "bottom";
+        openHotkey: Array<(string & {}) | ("Alt" | "Control" | "Meta" | "Shift")>;
+        requireUrlFlag: boolean;
+        urlFlag: string;
+    }>;
+};
+export declare const usePersistOpen: () => {
+    persistOpen: import('solid-js').Accessor<boolean>;
+    setPersistOpen: (value: boolean) => void;
+};
+export declare const useHeight: () => {
+    height: import('solid-js').Accessor<number>;
+    setHeight: (newHeight: number) => void;
+};

package/dist/esm/context/use-devtools-context.js

@@ -0,0 +1,78 @@
+import { createMemo, useContext } from "solid-js";
+import { DevtoolsContext } from "./devtools-context.js";
+const useDevtoolsContext = () => {
+  const context = useContext(DevtoolsContext);
+  if (context === void 0) {
+    throw new Error(
+      "useDevtoolsShellContext must be used within a ShellContextProvider"
+    );
+  }
+  return context;
+};
+const usePlugins = () => {
+  const { store, setStore } = useDevtoolsContext();
+  const plugins = createMemo(() => store.plugins);
+  const activePlugin = createMemo(() => store.state.activePlugin);
+  const setActivePlugin = (plugin) => {
+    setStore((prev) => ({
+      ...prev,
+      state: {
+        ...prev.state,
+        activePlugin: plugin
+      }
+    }));
+  };
+  return { plugins, setActivePlugin, activePlugin };
+};
+const useDevtoolsState = () => {
+  const { store, setStore } = useDevtoolsContext();
+  const state = createMemo(() => store.state);
+  const setState = (newState) => {
+    setStore((prev) => ({
+      ...prev,
+      state: {
+        ...prev.state,
+        ...newState
+      }
+    }));
+  };
+  return { state, setState };
+};
+const useDevtoolsSettings = () => {
+  const { store, setStore } = useDevtoolsContext();
+  const settings = createMemo(() => store.settings);
+  const setSettings = (newSettings) => {
+    setStore((prev) => ({
+      ...prev,
+      settings: {
+        ...prev.settings,
+        ...newSettings
+      }
+    }));
+  };
+  return { setSettings, settings };
+};
+const usePersistOpen = () => {
+  const { state, setState } = useDevtoolsState();
+  const persistOpen = createMemo(() => state().persistOpen);
+  const setPersistOpen = (value) => {
+    setState({ persistOpen: value });
+  };
+  return { persistOpen, setPersistOpen };
+};
+const useHeight = () => {
+  const { state, setState } = useDevtoolsState();
+  const height = createMemo(() => state().height);
+  const setHeight = (newHeight) => {
+    setState({ height: newHeight });
+  };
+  return { height, setHeight };
+};
+export {
+  useDevtoolsSettings,
+  useDevtoolsState,
+  useHeight,
+  usePersistOpen,
+  usePlugins
+};
+//# sourceMappingURL=use-devtools-context.js.map

package/dist/esm/context/use-devtools-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-devtools-context.js","sources":["../../../src/context/use-devtools-context.ts"],"sourcesContent":["import { createMemo, useContext } from 'solid-js'\nimport { DevtoolsContext } from './devtools-context.jsx'\nimport type { DevtoolsPlugin } from './devtools-context.jsx'\n/* import type { DevtoolsPlugin } from './devtools-context' */\nimport type { DevtoolsStore } from './devtools-store.js'\n\n/**\n * Returns an object containing the current state and setState function of the ShellContext.\n * Throws an error if used outside of a ShellContextProvider.\n */\nconst useDevtoolsContext = () => {\n  const context = useContext(DevtoolsContext)\n  if (context === undefined) {\n    throw new Error(\n      'useDevtoolsShellContext must be used within a ShellContextProvider',\n    )\n  }\n  return context\n}\n\nexport const usePlugins = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const plugins = createMemo(() => store.plugins)\n  const activePlugin = createMemo(() => store.state.activePlugin)\n\n  const setActivePlugin = (plugin: DevtoolsPlugin) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        activePlugin: plugin,\n      },\n    }))\n  }\n\n  return { plugins, setActivePlugin, activePlugin }\n}\n\nexport const useDevtoolsState = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const state = createMemo(() => store.state)\n  const setState = (newState: Partial<DevtoolsStore['state']>) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        ...newState,\n      },\n    }))\n  }\n  return { state, setState }\n}\n\nexport const useDevtoolsSettings = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const settings = createMemo(() => store.settings)\n\n  const setSettings = (newSettings: Partial<DevtoolsStore['settings']>) => {\n    setStore((prev) => ({\n      ...prev,\n      settings: {\n        ...prev.settings,\n        ...newSettings,\n      },\n    }))\n  }\n\n  return { setSettings, settings }\n}\n\nexport const usePersistOpen = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const persistOpen = createMemo(() => state().persistOpen)\n\n  const setPersistOpen = (value: boolean) => {\n    setState({ persistOpen: value })\n  }\n\n  return { persistOpen, setPersistOpen }\n}\n\nexport const useHeight = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const height = createMemo(() => state().height)\n\n  const setHeight = (newHeight: number) => {\n    setState({ height: newHeight })\n  }\n\n  return { height, setHeight }\n}\n"],"names":[],"mappings":";;AAUA,MAAM,qBAAqB,MAAM;AACzB,QAAA,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EAAA;AAEK,SAAA;AACT;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAE/C,QAAM,UAAU,WAAW,MAAM,MAAM,OAAO;AAC9C,QAAM,eAAe,WAAW,MAAM,MAAM,MAAM,YAAY;AAExD,QAAA,kBAAkB,CAAC,WAA2B;AAClD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,IAChB,EACA;AAAA,EACJ;AAEO,SAAA,EAAE,SAAS,iBAAiB,aAAa;AAClD;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAC/C,QAAM,QAAQ,WAAW,MAAM,MAAM,KAAK;AACpC,QAAA,WAAW,CAAC,aAA8C;AAC9D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AACO,SAAA,EAAE,OAAO,SAAS;AAC3B;AAEO,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAE/C,QAAM,WAAW,WAAW,MAAM,MAAM,QAAQ;AAE1C,QAAA,cAAc,CAAC,gBAAoD;AACvE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AAEO,SAAA,EAAE,aAAa,SAAS;AACjC;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,OAAO,SAAS,IAAI,iBAAiB;AAE7C,QAAM,cAAc,WAAW,MAAM,MAAA,EAAQ,WAAW;AAElD,QAAA,iBAAiB,CAAC,UAAmB;AAChC,aAAA,EAAE,aAAa,OAAO;AAAA,EACjC;AAEO,SAAA,EAAE,aAAa,eAAe;AACvC;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,SAAS,IAAI,iBAAiB;AAE7C,QAAM,SAAS,WAAW,MAAM,MAAA,EAAQ,MAAM;AAExC,QAAA,YAAY,CAAC,cAAsB;AAC9B,aAAA,EAAE,QAAQ,WAAW;AAAA,EAChC;AAEO,SAAA,EAAE,QAAQ,UAAU;AAC7B;"}

package/dist/esm/core.d.ts

@@ -0,0 +1,13 @@
+import { DevtoolsPlugin, DevtoolsSettings } from './context/devtools-context.js';
+export interface DevtoolsOptions {
+    options?: Partial<DevtoolsSettings>;
+    plugins?: Array<DevtoolsPlugin>;
+}
+declare class TanStackDevtoolsCore {
+    #private;
+    constructor(config: DevtoolsOptions);
+    mount<T extends HTMLElement>(el: T): void;
+    unmount(): void;
+    setOptions(options: Partial<DevtoolsOptions>): void;
+}
+export { TanStackDevtoolsCore as TanStackRouterDevtoolsCore };

package/dist/esm/core.js

@@ -0,0 +1,80 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _options, _plugins, _isMounted, _dispose, _Component;
+import { render, createComponent, Portal } from "solid-js/web";
+import { lazy } from "solid-js";
+import { DevtoolsProvider } from "./context/devtools-context.js";
+import { initialState } from "./context/devtools-store.js";
+class TanStackDevtoolsCore {
+  constructor(config) {
+    __privateAdd(this, _options, {
+      ...initialState.settings
+    });
+    __privateAdd(this, _plugins, []);
+    __privateAdd(this, _isMounted, false);
+    __privateAdd(this, _dispose);
+    __privateAdd(this, _Component);
+    __privateSet(this, _plugins, config.plugins || []);
+    __privateSet(this, _options, {
+      ...__privateGet(this, _options),
+      ...config.options
+    });
+  }
+  mount(el) {
+    if (__privateGet(this, _isMounted)) {
+      throw new Error("Devtools is already mounted");
+    }
+    const mountTo = el;
+    const dispose = render(() => {
+      const _self$ = this;
+      __privateSet(this, _Component, lazy(() => import("./devtools.js")));
+      const Devtools = __privateGet(this, _Component);
+      return createComponent(DevtoolsProvider, {
+        get plugins() {
+          return __privateGet(_self$, _plugins);
+        },
+        get config() {
+          return __privateGet(_self$, _options);
+        },
+        get children() {
+          return createComponent(Portal, {
+            mount: mountTo,
+            get children() {
+              return createComponent(Devtools, {});
+            }
+          });
+        }
+      });
+    }, mountTo);
+    __privateSet(this, _isMounted, true);
+    __privateSet(this, _dispose, dispose);
+  }
+  unmount() {
+    var _a;
+    if (!__privateGet(this, _isMounted)) {
+      throw new Error("Devtools is not mounted");
+    }
+    (_a = __privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
+    __privateSet(this, _isMounted, false);
+  }
+  setOptions(options) {
+    __privateSet(this, _options, {
+      ...__privateGet(this, _options),
+      ...options
+    });
+  }
+}
+_options = new WeakMap();
+_plugins = new WeakMap();
+_isMounted = new WeakMap();
+_dispose = new WeakMap();
+_Component = new WeakMap();
+export {
+  TanStackDevtoolsCore as TanStackRouterDevtoolsCore
+};
+//# sourceMappingURL=core.js.map

package/dist/esm/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport type {\n  DevtoolsPlugin,\n  DevtoolsSettings,\n} from './context/devtools-context'\n\nexport interface DevtoolsOptions {\n  options?: Partial<DevtoolsSettings>\n  plugins?: Array<DevtoolsPlugin>\n}\n\nclass TanStackDevtoolsCore {\n  #options: DevtoolsSettings = {\n    ...initialState.settings,\n  }\n  #plugins: Array<DevtoolsPlugin> = []\n  #isMounted = false\n  #dispose?: () => void\n  #Component: any\n\n  constructor(config: DevtoolsOptions) {\n    this.#plugins = config.plugins || []\n    this.#options = {\n      ...this.#options,\n      ...config.options,\n    }\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n    const mountTo = el\n    const dispose = render(() => {\n      this.#Component = lazy(() => import('./devtools'))\n\n      const Devtools = this.#Component\n\n      return (\n        <DevtoolsProvider plugins={this.#plugins} config={this.#options}>\n          <Portal mount={mountTo}>\n            <Devtools />\n          </Portal>\n        </DevtoolsProvider>\n      )\n    }, mountTo)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setOptions(options: Partial<DevtoolsOptions>) {\n    this.#options = {\n      ...this.#options,\n      ...options,\n    }\n  }\n}\n\nexport { TanStackDevtoolsCore as TanStackRouterDevtoolsCore }\n"],"names":["TanStackDevtoolsCore","constructor","config","initialState","settings","plugins","options","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","_$createComponent","DevtoolsProvider","children","Portal","unmount","setOptions"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,qBAAqB;AAAA,EASzBC,YAAYC,QAAyB;AARrC,iCAA6B;AAAA,MAC3B,GAAGC,aAAaC;AAAAA,IAClB;AACA,iCAAkC,CAAE;AACpC,mCAAa;AACb;AACA;AAGO,uBAAA,UAAWF,OAAOG,WAAW,CAAE;AACpC,uBAAK,UAAW;AAAA,MACd,GAAG,mBAAK;AAAA,MACR,GAAGH,OAAOI;AAAAA,IACZ;AAAA,EAAA;AAAA,EAGFC,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAE/C,UAAMC,UAAUF;AACVG,UAAAA,UAAUC,OAAO,MAAM;AAAA,YAAAC,SAAA;AAC3B,yBAAK,YAAaC,KAAK,MAAM,OAAO,eAAY,CAAC;AAEjD,YAAMC,WAAW,mBAAK;AAEtB,aAAAC,gBACGC,kBAAgB;AAAA,QAAA,IAACZ,UAAO;AAAA,iBAAEQ,qBAAK;AAAA,QAAQ;AAAA,QAAA,IAAEX,SAAM;AAAA,iBAAEW,qBAAK;AAAA,QAAQ;AAAA,QAAA,IAAAK,WAAA;AAAA,iBAAAF,gBAC5DG,QAAM;AAAA,YAACZ,OAAOG;AAAAA,YAAO,IAAAQ,WAAA;AAAAF,qBAAAA,gBACnBD,UAAQ,EAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,OAIdL,OAAO;AAEV,uBAAK,YAAa;AAClB,uBAAK,UAAWC;AAAAA,EAAAA;AAAAA,EAGlBS,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIX,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBY,WAAWf,SAAmC;AAC5C,uBAAK,UAAW;AAAA,MACd,GAAG,mBAAK;AAAA,MACR,GAAGA;AAAAA,IACL;AAAA,EAAA;AAEJ;AArDE;AAGA;AACA;AACA;AACA;"}

package/dist/esm/devtools.d.ts

@@ -0,0 +1 @@
+export default function DevTools(): import("solid-js").JSX.Element;

package/dist/esm/devtools.js

@@ -0,0 +1,147 @@
+import { template, use, setAttribute, insert, createComponent } from "solid-js/web";
+import { createSignal, createEffect } from "solid-js";
+import { createShortcut } from "@solid-primitives/keyboard";
+import { useDevtoolsSettings, useHeight, usePersistOpen } from "./context/use-devtools-context.js";
+import { useDisableTabbing } from "./hooks/use-disable-tabbing.js";
+import { TANSTACK_DEVTOOLS } from "./utils/storage.js";
+import { Trigger } from "./components/trigger.js";
+import { MainPanel } from "./components/main-panel.js";
+import { ContentPanel } from "./components/content-panel.js";
+import { Tabs } from "./components/tabs.js";
+import { TabContent } from "./components/tab-content.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function DevTools() {
+  const {
+    settings
+  } = useDevtoolsSettings();
+  const {
+    setHeight
+  } = useHeight();
+  const {
+    persistOpen,
+    setPersistOpen
+  } = usePersistOpen();
+  const [rootEl, setRootEl] = createSignal();
+  const [isOpen, setIsOpen] = createSignal(settings().defaultOpen || persistOpen());
+  let panelRef = void 0;
+  const [isResizing, setIsResizing] = createSignal(false);
+  const toggleOpen = () => {
+    const open = isOpen();
+    setIsOpen(!open);
+    setPersistOpen(!open);
+  };
+  const handleDragStart = (panelElement, startEvent) => {
+    if (startEvent.button !== 0) return;
+    setIsResizing(true);
+    const dragInfo = {
+      originalHeight: (panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
+      pageY: startEvent.pageY
+    };
+    const run = (moveEvent) => {
+      const delta = dragInfo.pageY - moveEvent.pageY;
+      const newHeight = dragInfo.originalHeight + delta;
+      setHeight(newHeight);
+      if (newHeight < 70) {
+        setIsOpen(false);
+      } else {
+        setIsOpen(true);
+      }
+    };
+    const unsub = () => {
+      setIsResizing(false);
+      document.removeEventListener("mousemove", run);
+      document.removeEventListener("mouseUp", unsub);
+    };
+    document.addEventListener("mousemove", run);
+    document.addEventListener("mouseup", unsub);
+  };
+  createEffect(() => {
+    var _a, _b, _c;
+    if (isOpen()) {
+      const previousValue = (_b = (_a = rootEl()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.paddingBottom;
+      const run = () => {
+        var _a2;
+        const containerHeight = panelRef.getBoundingClientRect().height;
+        if ((_a2 = rootEl()) == null ? void 0 : _a2.parentElement) {
+          setRootEl((prev) => {
+            if (prev == null ? void 0 : prev.parentElement) {
+              prev.parentElement.style.paddingBottom = `${containerHeight}px`;
+            }
+            return prev;
+          });
+        }
+      };
+      run();
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", run);
+        return () => {
+          var _a2;
+          window.removeEventListener("resize", run);
+          if (((_a2 = rootEl()) == null ? void 0 : _a2.parentElement) && typeof previousValue === "string") {
+            setRootEl((prev) => {
+              prev.parentElement.style.paddingBottom = previousValue;
+              return prev;
+            });
+          }
+        };
+      }
+    } else {
+      if ((_c = rootEl()) == null ? void 0 : _c.parentElement) {
+        setRootEl((prev) => {
+          if (prev == null ? void 0 : prev.parentElement) {
+            prev.parentElement.removeAttribute("style");
+          }
+          return prev;
+        });
+      }
+    }
+    return;
+  });
+  createEffect(() => {
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && isOpen()) {
+        toggleOpen();
+      }
+    });
+  });
+  useDisableTabbing(isOpen);
+  createEffect(() => {
+    if (rootEl()) {
+      const el = rootEl();
+      const fontSize = getComputedStyle(el).fontSize;
+      el == null ? void 0 : el.style.setProperty("--tsrd-font-size", fontSize);
+    }
+  });
+  createShortcut(settings().openHotkey, () => {
+    toggleOpen();
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    use(setRootEl, _el$);
+    setAttribute(_el$, "data-testid", TANSTACK_DEVTOOLS);
+    insert(_el$, createComponent(Trigger, {
+      isOpen,
+      setIsOpen: toggleOpen
+    }), null);
+    insert(_el$, createComponent(MainPanel, {
+      isResizing,
+      isOpen,
+      get children() {
+        return createComponent(ContentPanel, {
+          ref: (ref) => panelRef = ref,
+          handleDragStart: (e) => handleDragStart(panelRef, e),
+          get children() {
+            return [createComponent(Tabs, {
+              toggleOpen
+            }), createComponent(TabContent, {})];
+          }
+        });
+      }
+    }), null);
+    return _el$;
+  })();
+}
+export {
+  DevTools as default
+};
+//# sourceMappingURL=devtools.js.map

package/dist/esm/devtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { createEffect, createSignal } from 'solid-js'\nimport { createShortcut } from '@solid-primitives/keyboard'\nimport {\n  useDevtoolsSettings,\n  useHeight,\n  usePersistOpen,\n} from './context/use-devtools-context'\nimport { useDisableTabbing } from './hooks/use-disable-tabbing'\nimport { TANSTACK_DEVTOOLS } from './utils/storage'\nimport { Trigger } from './components/trigger'\nimport { MainPanel } from './components/main-panel'\nimport { ContentPanel } from './components/content-panel'\nimport { Tabs } from './components/tabs'\nimport { TabContent } from './components/tab-content'\n\nexport default function DevTools() {\n  const { settings } = useDevtoolsSettings()\n  const { setHeight } = useHeight()\n  const { persistOpen, setPersistOpen } = usePersistOpen()\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n  const [isOpen, setIsOpen] = createSignal(\n    settings().defaultOpen || persistOpen(),\n  )\n  let panelRef: HTMLDivElement | undefined = undefined\n  const [isResizing, setIsResizing] = createSignal(false)\n  const toggleOpen = () => {\n    const open = isOpen()\n    setIsOpen(!open)\n    setPersistOpen(!open)\n  }\n\n  // Used to resize the panel\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: MouseEvent,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo.originalHeight + delta\n\n      setHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  // Handle resizing and padding adjustments\n  createEffect(() => {\n    if (isOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef!.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n  createEffect(() => {\n    window.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape' && isOpen()) {\n        toggleOpen()\n      }\n    })\n  })\n  useDisableTabbing(isOpen)\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n  createShortcut(settings().openHotkey, () => {\n    toggleOpen()\n  })\n  return (\n    <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>\n      <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />\n      <MainPanel isResizing={isResizing} isOpen={isOpen}>\n        <ContentPanel\n          ref={(ref) => (panelRef = ref)}\n          handleDragStart={(e) => handleDragStart(panelRef, e)}\n        >\n          <Tabs toggleOpen={toggleOpen} />\n          <TabContent />\n        </ContentPanel>\n      </MainPanel>\n    </div>\n  )\n}\n"],"names":["DevTools","settings","useDevtoolsSettings","setHeight","useHeight","persistOpen","setPersistOpen","usePersistOpen","rootEl","setRootEl","createSignal","isOpen","setIsOpen","defaultOpen","panelRef","undefined","isResizing","setIsResizing","toggleOpen","open","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","unsub","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","e","key","useDisableTabbing","el","fontSize","getComputedStyle","setProperty","openHotkey","_el$","_tmpl$","_$use","TANSTACK_DEVTOOLS","_$createComponent","Trigger","MainPanel","children","ContentPanel","ref","Tabs","TabContent"],"mappings":"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"}

package/dist/esm/hooks/use-disable-tabbing.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @param isOpen A function that returns whether the devtools are open or not.
+ * This is used to disable tabbing over the main devtools container while
+ * the devtools are closed.
+ */
+export declare const useDisableTabbing: (isOpen: () => boolean) => void;

package/dist/esm/hooks/use-disable-tabbing.js

@@ -0,0 +1,23 @@
+import { createEffect } from "solid-js";
+import { TANSTACK_DEVTOOLS } from "../utils/storage.js";
+const recursivelyChangeTabIndex = (node, remove = true) => {
+  if (remove) {
+    node.setAttribute("tabIndex", "-1");
+  } else {
+    node.removeAttribute("tabIndex");
+  }
+  for (const child of node.children) {
+    recursivelyChangeTabIndex(child, remove);
+  }
+};
+const useDisableTabbing = (isOpen) => {
+  createEffect(() => {
+    const el = document.getElementById(TANSTACK_DEVTOOLS);
+    if (!el) return;
+    recursivelyChangeTabIndex(el, !isOpen());
+  });
+};
+export {
+  useDisableTabbing
+};
+//# sourceMappingURL=use-disable-tabbing.js.map

package/dist/esm/hooks/use-disable-tabbing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-disable-tabbing.js","sources":["../../../src/hooks/use-disable-tabbing.ts"],"sourcesContent":["import { createEffect } from 'solid-js'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\n\nconst recursivelyChangeTabIndex = (\n  node: Element | HTMLElement,\n  remove = true,\n) => {\n  if (remove) {\n    node.setAttribute('tabIndex', '-1')\n  } else {\n    node.removeAttribute('tabIndex')\n  }\n  for (const child of node.children) {\n    recursivelyChangeTabIndex(child, remove)\n  }\n}\n/**\n * @param isOpen A function that returns whether the devtools are open or not.\n * This is used to disable tabbing over the main devtools container while\n * the devtools are closed.\n */\nexport const useDisableTabbing = (isOpen: () => boolean) => {\n  createEffect(() => {\n    const el = document.getElementById(TANSTACK_DEVTOOLS)\n    if (!el) return\n    recursivelyChangeTabIndex(el, !isOpen())\n  })\n}\n"],"names":[],"mappings":";;AAGA,MAAM,4BAA4B,CAChC,MACA,SAAS,SACN;AACH,MAAI,QAAQ;AACL,SAAA,aAAa,YAAY,IAAI;AAAA,EAAA,OAC7B;AACL,SAAK,gBAAgB,UAAU;AAAA,EAAA;AAEtB,aAAA,SAAS,KAAK,UAAU;AACjC,8BAA0B,OAAO,MAAM;AAAA,EAAA;AAE3C;AAMa,MAAA,oBAAoB,CAAC,WAA0B;AAC1D,eAAa,MAAM;AACX,UAAA,KAAK,SAAS,eAAe,iBAAiB;AACpD,QAAI,CAAC,GAAI;AACiB,8BAAA,IAAI,CAAC,QAAQ;AAAA,EAAA,CACxC;AACH;"}