@tanstack/devtools 0.4.4 → 0.5.0

package/dist/cjs/context/devtools-context.cjs

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const store = require("solid-js/store");
-const sanitize = require("../utils/sanitize.cjs");
-const storage = require("../utils/storage.cjs");
-const devtoolsStore = require("./devtools-store.cjs");
-const DevtoolsContext = solidJs.createContext();
-const getSettings = () => {
-  const settingsString = storage.getStorageItem(storage.TANSTACK_DEVTOOLS_SETTINGS);
-  const settings = sanitize.tryParseJson(settingsString);
-  return {
-    ...settings
-  };
-};
-const generatePluginId = (plugin, index) => {
-  if (plugin.id) {
-    return plugin.id;
-  }
-  if (typeof plugin.name === "string") {
-    return `${plugin.name.toLowerCase().replace(" ", "-")}-${index}`;
-  }
-  return index.toString();
-};
-const getExistingStateFromStorage = (config, plugins) => {
-  const existingState = storage.getStorageItem(storage.TANSTACK_DEVTOOLS_STATE);
-  const settings = getSettings();
-  const state = {
-    ...devtoolsStore.initialState,
-    plugins: plugins?.map((plugin, i) => {
-      const id = generatePluginId(plugin, i);
-      return {
-        ...plugin,
-        id
-      };
-    }) || [],
-    state: {
-      ...devtoolsStore.initialState.state,
-      ...existingState ? JSON.parse(existingState) : {}
-    },
-    settings: {
-      ...devtoolsStore.initialState.settings,
-      ...config,
-      ...settings
-    }
-  };
-  return state;
-};
-const DevtoolsProvider = (props) => {
-  const [store$1, setStore] = store.createStore(getExistingStateFromStorage(props.config, props.plugins));
-  const value = {
-    store: store$1,
-    setStore: (updater) => {
-      const newState = updater(store$1);
-      const {
-        settings,
-        state: internalState
-      } = newState;
-      storage.setStorageItem(storage.TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings));
-      storage.setStorageItem(storage.TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState));
-      setStore((prev) => ({
-        ...prev,
-        ...newState
-      }));
-    }
-  };
-  return web.createComponent(DevtoolsContext.Provider, {
-    value,
-    get children() {
-      return props.children;
-    }
-  });
-};
-exports.DevtoolsContext = DevtoolsContext;
-exports.DevtoolsProvider = DevtoolsProvider;
-//# sourceMappingURL=devtools-context.cjs.map

package/dist/cjs/context/devtools-context.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtools-context.cjs","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 { JSX, Setter } from 'solid-js'\n\nexport interface TanStackDevtoolsPlugin {\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     // If a string, it will be used as the plugin name\n   *     name: \"Your Plugin\",\n   *     render: () => {}\n   *   }\n   * ```\n   * or\n   *\n   * ```ts\n   *   {\n   *     // If a function, it will be called with the mount element\n   *     name: (el) => {\n   *       el.innerText = \"Your Plugin Name\"\n   *       // Your name logic here\n   *     },\n   *     render: () => {}\n   *   }\n   * ```\n   */\n  name: string | ((el: HTMLHeadingElement) => void)\n  /**\n   * Unique identifier for the plugin.\n   * If not provided, it will be generated based on the name.\n   */\n  id?: string\n  /**\n   * Render the plugin UI by using the provided element. This function will be called\n   * when the plugin tab is clicked and expected to be mounted.\n   * @param el The mount element for the plugin.\n   * @returns void\n   *\n   * Example:\n   * ```ts\n   *   render: (el) => {\n   *     el.innerHTML = \"<h1>Your Plugin</h1>\"\n   *   }\n   * ```\n   */\n  render: (el: HTMLDivElement) => void\n}\nexport const DevtoolsContext = createContext<{\n  store: DevtoolsStore\n  setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n  children: JSX.Element\n  plugins?: Array<TanStackDevtoolsPlugin>\n  config?: TanStackDevtoolsConfig\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 generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {\n  // if set by user, return the plugin id\n  if (plugin.id) {\n    return plugin.id\n  }\n  if (typeof plugin.name === 'string') {\n    // if name is a string, use it to generate an id\n    return `${plugin.name.toLowerCase().replace(' ', '-')}-${index}`\n  }\n  // Name is JSX? return the index as a string\n  return index.toString()\n}\n\nconst getExistingStateFromStorage = (\n  config?: TanStackDevtoolsConfig,\n  plugins?: Array<TanStackDevtoolsPlugin>,\n) => {\n  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n  const settings = getSettings()\n\n  const state: DevtoolsStore = {\n    ...initialState,\n    plugins:\n      plugins?.map((plugin, i) => {\n        const id = generatePluginId(plugin, i)\n        return {\n          ...plugin,\n          id,\n        }\n      }) || [],\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 TanStackDevtoolsConfig = 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","generatePluginId","plugin","index","id","name","toLowerCase","replace","toString","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","map","i","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;;;AA6DO,MAAMA,kBAAkBC,QAAAA,cAAAA;AAW/B,MAAMC,cAAcA,MAAM;AACxB,QAAMC,iBAAiBC,QAAAA,eAAeC,kCAA0B;AAChE,QAAMC,WAAWC,SAAAA,aAAwCJ,cAAc;AACvE,SAAO;AAAA,IACL,GAAGG;AAAAA,EAAAA;AAEP;AAEA,MAAME,mBAAmBA,CAACC,QAAgCC,UAAkB;AAE1E,MAAID,OAAOE,IAAI;AACb,WAAOF,OAAOE;AAAAA,EAChB;AACA,MAAI,OAAOF,OAAOG,SAAS,UAAU;AAEnC,WAAO,GAAGH,OAAOG,KAAKC,YAAAA,EAAcC,QAAQ,KAAK,GAAG,CAAC,IAAIJ,KAAK;AAAA,EAChE;AAEA,SAAOA,MAAMK,SAAAA;AACf;AAEA,MAAMC,8BAA8BA,CAClCC,QACAC,YACG;AACH,QAAMC,gBAAgBf,QAAAA,eAAegB,+BAAuB;AAC5D,QAAMd,WAAWJ,YAAAA;AAEjB,QAAMmB,QAAuB;AAAA,IAC3B,GAAGC,cAAAA;AAAAA,IACHJ,SACEA,SAASK,IAAI,CAACd,QAAQe,MAAM;AAC1B,YAAMb,KAAKH,iBAAiBC,QAAQe,CAAC;AACrC,aAAO;AAAA,QACL,GAAGf;AAAAA,QACHE;AAAAA,MAAAA;AAAAA,IAEJ,CAAC,KAAK,CAAA;AAAA,IACRU,OAAO;AAAA,MACL,GAAGC,cAAAA,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBM,KAAKC,MAAMP,aAAa,IAAI,CAAA;AAAA,IAAC;AAAA,IAEnDb,UAAU;AAAA,MACR,GAAGgB,cAAAA,aAAahB;AAAAA,MAChB,GAAGW;AAAAA,MACH,GAAGX;AAAAA,IAAAA;AAAAA,EACL;AAEF,SAAOe;AACT;AAIO,MAAMM,mBAAmBA,CAACC,UAAwB;AACvD,QAAM,CAACC,SAAOC,QAAQ,IAAIC,MAAAA,YACxBf,4BAA4BY,MAAMX,QAAQW,MAAMV,OAAO,CACzD;AAEA,QAAMc,QAAQ;AAAA,IAAA,OACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACH,YAAMC,WAAWD,QAAQJ,OAAK;AAC9B,YAAM;AAAA,QAAEvB;AAAAA,QAAUe,OAAOc;AAAAA,MAAAA,IAAkBD;AAE3CE,cAAAA,eAAe/B,QAAAA,4BAA4BoB,KAAKY,UAAU/B,QAAQ,CAAC;AAEnE8B,cAAAA,eAAehB,QAAAA,yBAAyBK,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAAA,UAAU;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAK,IAAAA,gBACGvC,gBAAgBwC,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;;;"}

package/dist/cjs/context/devtools-context.d.cts

@@ -1,62 +0,0 @@
-import { DevtoolsStore } from './devtools-store.cjs';
-import { JSX, Setter } from 'solid-js';
-export interface TanStackDevtoolsPlugin {
-    /**
-     * Name to be displayed in the devtools UI.
-     * If a string, it will be used as the plugin name.
-     * If a function, it will be called with the mount element.
-     *
-     * Example:
-     * ```ts
-     *   {
-     *     // If a string, it will be used as the plugin name
-     *     name: "Your Plugin",
-     *     render: () => {}
-     *   }
-     * ```
-     * or
-     *
-     * ```ts
-     *   {
-     *     // If a function, it will be called with the mount element
-     *     name: (el) => {
-     *       el.innerText = "Your Plugin Name"
-     *       // Your name logic here
-     *     },
-     *     render: () => {}
-     *   }
-     * ```
-     */
-    name: string | ((el: HTMLHeadingElement) => void);
-    /**
-     * Unique identifier for the plugin.
-     * If not provided, it will be generated based on the name.
-     */
-    id?: string;
-    /**
-     * Render the plugin UI by using the provided element. This function will be called
-     * when the plugin tab is clicked and expected to be mounted.
-     * @param el The mount element for the plugin.
-     * @returns void
-     *
-     * Example:
-     * ```ts
-     *   render: (el) => {
-     *     el.innerHTML = "<h1>Your Plugin</h1>"
-     *   }
-     * ```
-     */
-    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<TanStackDevtoolsPlugin>;
-    config?: TanStackDevtoolsConfig;
-}
-export type TanStackDevtoolsConfig = DevtoolsStore['settings'];
-export declare const DevtoolsProvider: (props: ContextProps) => JSX.Element;
-export {};

package/dist/cjs/context/devtools-store.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const keyboardModifiers = [
-  "Alt",
-  "Control",
-  "Meta",
-  "Shift"
-];
-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
-  }
-};
-exports.initialState = initialState;
-exports.keyboardModifiers = keyboardModifiers;
-//# sourceMappingURL=devtools-store.cjs.map

package/dist/cjs/context/devtools-store.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtools-store.cjs","sources":["../../../src/context/devtools-store.ts"],"sourcesContent":["import type { TabName } from '../tabs'\nimport type { TanStackDevtoolsPlugin } from './devtools-context'\n\ntype ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'\ntype KeyboardKey = ModifierKey | (string & {})\nexport const keyboardModifiers: Array<ModifierKey> = [\n  'Alt',\n  'Control',\n  'Meta',\n  'Shift',\n]\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?: string | undefined\n    persistOpen: boolean\n  }\n  plugins?: Array<TanStackDevtoolsPlugin>\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":";;AAKO,MAAM,oBAAwC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA0DO,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,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAEjB;;;"}

package/dist/cjs/context/devtools-store.d.cts

@@ -1,54 +0,0 @@
-import { TabName } from '../tabs.cjs';
-import { TanStackDevtoolsPlugin } from './devtools-context.cjs';
-type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
-type KeyboardKey = ModifierKey | (string & {});
-export declare const keyboardModifiers: Array<ModifierKey>;
-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?: string | undefined;
-        persistOpen: boolean;
-    };
-    plugins?: Array<TanStackDevtoolsPlugin>;
-};
-export declare const initialState: DevtoolsStore;
-export {};

package/dist/cjs/context/use-devtools-context.cjs

@@ -1,78 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const solidJs = require("solid-js");
-const devtoolsContext = require("./devtools-context.cjs");
-const useDevtoolsContext = () => {
-  const context = solidJs.useContext(devtoolsContext.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 = solidJs.createMemo(() => store.plugins);
-  const activePlugin = solidJs.createMemo(() => store.state.activePlugin);
-  const setActivePlugin = (pluginId) => {
-    setStore((prev) => ({
-      ...prev,
-      state: {
-        ...prev.state,
-        activePlugin: pluginId
-      }
-    }));
-  };
-  return { plugins, setActivePlugin, activePlugin };
-};
-const useDevtoolsState = () => {
-  const { store, setStore } = useDevtoolsContext();
-  const state = solidJs.createMemo(() => store.state);
-  const setState = (newState) => {
-    setStore((prev) => ({
-      ...prev,
-      state: {
-        ...prev.state,
-        ...newState
-      }
-    }));
-  };
-  return { state, setState };
-};
-const useDevtoolsSettings = () => {
-  const { store, setStore } = useDevtoolsContext();
-  const settings = solidJs.createMemo(() => store.settings);
-  const setSettings = (newSettings) => {
-    setStore((prev) => ({
-      ...prev,
-      settings: {
-        ...prev.settings,
-        ...newSettings
-      }
-    }));
-  };
-  return { setSettings, settings };
-};
-const usePersistOpen = () => {
-  const { state, setState } = useDevtoolsState();
-  const persistOpen = solidJs.createMemo(() => state().persistOpen);
-  const setPersistOpen = (value) => {
-    setState({ persistOpen: value });
-  };
-  return { persistOpen, setPersistOpen };
-};
-const useHeight = () => {
-  const { state, setState } = useDevtoolsState();
-  const height = solidJs.createMemo(() => state().height);
-  const setHeight = (newHeight) => {
-    setState({ height: newHeight });
-  };
-  return { height, setHeight };
-};
-exports.useDevtoolsSettings = useDevtoolsSettings;
-exports.useDevtoolsState = useDevtoolsState;
-exports.useHeight = useHeight;
-exports.usePersistOpen = usePersistOpen;
-exports.usePlugins = usePlugins;
-//# sourceMappingURL=use-devtools-context.cjs.map

package/dist/cjs/context/use-devtools-context.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-devtools-context.cjs","sources":["../../../src/context/use-devtools-context.ts"],"sourcesContent":["import { createMemo, useContext } from 'solid-js'\nimport { DevtoolsContext } 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 = (pluginId: string) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        activePlugin: pluginId,\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":["useContext","DevtoolsContext","createMemo"],"mappings":";;;;AASA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,UAAUA,QAAAA,WAAWC,+BAAe;AAC1C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAE5B,QAAM,UAAUC,QAAAA,WAAW,MAAM,MAAM,OAAO;AAC9C,QAAM,eAAeA,QAAAA,WAAW,MAAM,MAAM,MAAM,YAAY;AAE9D,QAAM,kBAAkB,CAAC,aAAqB;AAC5C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,IAChB,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,SAAS,iBAAiB,aAAA;AACrC;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAC5B,QAAM,QAAQA,QAAAA,WAAW,MAAM,MAAM,KAAK;AAC1C,QAAM,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;AACA,SAAO,EAAE,OAAO,SAAA;AAClB;AAEO,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAE5B,QAAM,WAAWA,QAAAA,WAAW,MAAM,MAAM,QAAQ;AAEhD,QAAM,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;AAEA,SAAO,EAAE,aAAa,SAAA;AACxB;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,cAAcA,QAAAA,WAAW,MAAM,MAAA,EAAQ,WAAW;AAExD,QAAM,iBAAiB,CAAC,UAAmB;AACzC,aAAS,EAAE,aAAa,OAAO;AAAA,EACjC;AAEA,SAAO,EAAE,aAAa,eAAA;AACxB;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,SAASA,QAAAA,WAAW,MAAM,MAAA,EAAQ,MAAM;AAE9C,QAAM,YAAY,CAAC,cAAsB;AACvC,aAAS,EAAE,QAAQ,WAAW;AAAA,EAChC;AAEA,SAAO,EAAE,QAAQ,UAAA;AACnB;;;;;;"}

package/dist/cjs/context/use-devtools-context.d.cts

@@ -1,35 +0,0 @@
-import { DevtoolsStore } from './devtools-store.js';
-export declare const usePlugins: () => {
-    plugins: import('solid-js').Accessor<import('./devtools-context.jsx').TanStackDevtoolsPlugin[] | undefined>;
-    setActivePlugin: (pluginId: string) => void;
-    activePlugin: import('solid-js').Accessor<string | undefined>;
-};
-export declare const useDevtoolsState: () => {
-    state: import('solid-js').Accessor<{
-        activeTab: import('../tabs/index.jsx').TabName;
-        height: number;
-        activePlugin?: string | 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/cjs/core.cjs

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const client = require("@tanstack/devtools-event-bus/client");
-const devtoolsContext = require("./context/devtools-context.cjs");
-const devtoolsStore = require("./context/devtools-store.cjs");
-const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
-class TanStackDevtoolsCore {
-  #config = {
-    ...devtoolsStore.initialState.settings
-  };
-  #plugins = [];
-  #isMounted = false;
-  #dispose;
-  #Component;
-  #eventBus;
-  #eventBusConfig;
-  constructor(init) {
-    this.#plugins = init.plugins || [];
-    this.#eventBusConfig = init.eventBusConfig;
-    this.#config = {
-      ...this.#config,
-      ...init.config
-    };
-  }
-  mount(el) {
-    if (this.#isMounted) {
-      throw new Error("Devtools is already mounted");
-    }
-    const mountTo = el;
-    const dispose = web.render(() => {
-      const _self$ = this;
-      this.#Component = solidJs.lazy(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./devtools.cjs"))));
-      const Devtools = this.#Component;
-      this.#eventBus = new client.ClientEventBus(this.#eventBusConfig);
-      this.#eventBus.start();
-      return web.createComponent(devtoolsContext.DevtoolsProvider, {
-        get plugins() {
-          return _self$.#plugins;
-        },
-        get config() {
-          return _self$.#config;
-        },
-        get children() {
-          return web.createComponent(web.Portal, {
-            mount: mountTo,
-            get children() {
-              return web.createComponent(Devtools, {});
-            }
-          });
-        }
-      });
-    }, mountTo);
-    this.#isMounted = true;
-    this.#dispose = dispose;
-  }
-  unmount() {
-    if (!this.#isMounted) {
-      throw new Error("Devtools is not mounted");
-    }
-    this.#eventBus?.stop();
-    this.#dispose?.();
-    this.#isMounted = false;
-  }
-  setConfig(config) {
-    this.#config = {
-      ...this.#config,
-      ...config
-    };
-  }
-}
-exports.TanStackDevtoolsCore = TanStackDevtoolsCore;
-//# sourceMappingURL=core.cjs.map

package/dist/cjs/core.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"core.cjs","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { ClientEventBus } from '@tanstack/devtools-event-bus/client'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'\nimport type {\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from './context/devtools-context'\n\nexport interface TanStackDevtoolsInit {\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin has a `render` function that gives you the dom node to mount into\n   *\n   * Example:\n   * ```ts\n   *  const devtools = new TanStackDevtoolsCore({\n   *    plugins: [\n   *      {\n   *        id: \"your-plugin-id\",\n   *        name: \"Your Plugin\",\n   *        render: (el) => {\n   *          // Your render logic here\n   *        },\n   *      },\n   *    ],\n   *  })\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsPlugin>\n  eventBusConfig?: ClientEventBusConfig\n}\n\nexport class TanStackDevtoolsCore {\n  #config: TanStackDevtoolsConfig = {\n    ...initialState.settings,\n  }\n  #plugins: Array<TanStackDevtoolsPlugin> = []\n  #isMounted = false\n  #dispose?: () => void\n  #Component: any\n  #eventBus: ClientEventBus | undefined\n  #eventBusConfig: ClientEventBusConfig | undefined\n\n  constructor(init: TanStackDevtoolsInit) {\n    this.#plugins = init.plugins || []\n    this.#eventBusConfig = init.eventBusConfig\n    this.#config = {\n      ...this.#config,\n      ...init.config,\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      const Devtools = this.#Component\n      this.#eventBus = new ClientEventBus(this.#eventBusConfig)\n      this.#eventBus.start()\n      return (\n        <DevtoolsProvider plugins={this.#plugins} config={this.#config}>\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.#eventBus?.stop()\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setConfig(config: Partial<TanStackDevtoolsInit>) {\n    this.#config = {\n      ...this.#config,\n      ...config,\n    }\n  }\n}\n\nexport type { ClientEventBusConfig }\n"],"names":["TanStackDevtoolsCore","initialState","settings","constructor","init","plugins","eventBusConfig","config","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","ClientEventBus","start","_$createComponent","DevtoolsProvider","children","Portal","unmount","stop","setConfig"],"mappings":";;;;;;;;AAyCO,MAAMA,qBAAqB;AAAA,EAChC,UAAkC;AAAA,IAChC,GAAGC,2BAAaC;AAAAA,EAAAA;AAAAA,EAElB,WAA0C,CAAA;AAAA,EAC1C,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEAC,YAAYC,MAA4B;AACtC,SAAK,WAAWA,KAAKC,WAAW,CAAA;AAChC,SAAK,kBAAkBD,KAAKE;AAC5B,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGF,KAAKG;AAAAA,IAAAA;AAAAA,EAEZ;AAAA,EAEAC,MAA6BC,IAAO;AAClC,QAAI,KAAK,YAAY;AACnB,YAAM,IAAIC,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAMC,UAAUF;AAChB,UAAMG,UAAUC,IAAAA,OAAO,MAAM;AAAA,YAAAC,SAAA;AAC3B,WAAK,aAAaC,QAAAA,KAAK,MAAM,QAAA,QAAA,EAAA,KAAA,MAAA,6CAAA,QAAO,gBAAY,CAAA,CAAA,CAAC;AACjD,YAAMC,WAAW,KAAK;AACtB,WAAK,YAAY,IAAIC,sBAAe,KAAK,eAAe;AACxD,WAAK,UAAUC,MAAAA;AACf,aAAAC,IAAAA,gBACGC,gBAAAA,kBAAgB;AAAA,QAAA,IAACf,UAAO;AAAA,iBAAES,OAAK;AAAA,QAAQ;AAAA,QAAA,IAAEP,SAAM;AAAA,iBAAEO,OAAK;AAAA,QAAO;AAAA,QAAA,IAAAO,WAAA;AAAA,iBAAAF,IAAAA,gBAC3DG,IAAAA,QAAM;AAAA,YAACd,OAAOG;AAAAA,YAAO,IAAAU,WAAA;AAAA,qBAAAF,IAAAA,gBACnBH,UAAQ,EAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAIjB,GAAGL,OAAO;AAEV,SAAK,aAAa;AAClB,SAAK,WAAWC;AAAAA,EAClB;AAAA,EAEAW,UAAU;AACR,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,IAAIb,MAAM,yBAAyB;AAAA,IAC3C;AACA,SAAK,WAAWc,KAAAA;AAChB,SAAK,WAAA;AACL,SAAK,aAAa;AAAA,EACpB;AAAA,EAEAC,UAAUlB,QAAuC;AAC/C,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGA;AAAAA,IAAAA;AAAAA,EAEP;AACF;;"}

package/dist/cjs/core.d.cts

@@ -1,39 +0,0 @@
-import { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client';
-import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from './context/devtools-context.cjs';
-export interface TanStackDevtoolsInit {
-    /**
-     * Configuration for the devtools shell. These configuration options are used to set the
-     * initial state of the devtools when it is started for the first time. Afterwards,
-     * the settings are persisted in local storage and changed through the settings panel.
-     */
-    config?: Partial<TanStackDevtoolsConfig>;
-    /**
-     * Array of plugins to be used in the devtools.
-     * Each plugin has a `render` function that gives you the dom node to mount into
-     *
-     * Example:
-     * ```ts
-     *  const devtools = new TanStackDevtoolsCore({
-     *    plugins: [
-     *      {
-     *        id: "your-plugin-id",
-     *        name: "Your Plugin",
-     *        render: (el) => {
-     *          // Your render logic here
-     *        },
-     *      },
-     *    ],
-     *  })
-     * ```
-     */
-    plugins?: Array<TanStackDevtoolsPlugin>;
-    eventBusConfig?: ClientEventBusConfig;
-}
-export declare class TanStackDevtoolsCore {
-    #private;
-    constructor(init: TanStackDevtoolsInit);
-    mount<T extends HTMLElement>(el: T): void;
-    unmount(): void;
-    setConfig(config: Partial<TanStackDevtoolsInit>): void;
-}
-export type { ClientEventBusConfig };