@tanstack/devtools 0.6.18 → 0.6.19

package/dist/chunk/{SFOE7G6Y.js → XFQ6P775.js}

@@ -63,7 +63,8 @@ var initialState = {
     requireUrlFlag: false,
     urlFlag: "tanstack-devtools",
     theme: typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
-    triggerImage: ""
+    triggerImage: "",
+    triggerHidden: false
   },
   state: {
     activeTab: "plugins",
@@ -201,7 +202,7 @@ var generatePluginId = (plugin, index) => {
 function getStateFromLocalStorage(plugins) {
   const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE);
   const existingState = tryParseJson(existingStateString);
-  const pluginIds = [];
+  const pluginIds = plugins?.map((plugin, i) => generatePluginId(plugin, i)) || [];
   if (existingState?.activePlugins) {
     const originalLength = existingState.activePlugins.length;
     existingState.activePlugins = existingState.activePlugins.filter((id) => pluginIds.includes(id));
@@ -212,7 +213,7 @@ function getStateFromLocalStorage(plugins) {
   return existingState;
 }
 var getExistingStateFromStorage = (config, plugins) => {
-  const existingState = getStateFromLocalStorage();
+  const existingState = getStateFromLocalStorage(plugins);
   const settings = getSettings();
   const state = {
     ...initialState,

package/dist/dev.js

@@ -1,5 +1,5 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/SFOE7G6Y.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/SFOE7G6Y.js';
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/XFQ6P775.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XFQ6P775.js';
 import { render, createComponent, Portal } from 'solid-js/web';
 import { lazy } from 'solid-js';
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/LMV5GWDT.js'));
+      this.#Component = lazy(() => import('./devtools/3YT62TLF.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/devtools/{LMV5GWDT.js → 3YT62TLF.js}

@@ -1,4 +1,4 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/SFOE7G6Y.js';
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/XFQ6P775.js';
 import { delegateEvents, createComponent, Portal, template, use, setAttribute, insert, memo, effect, className, addEventListener } from 'solid-js/web';
 import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut } from '@solid-primitives/keyboard';
@@ -904,13 +904,18 @@ var Trigger = ({
   const buttonStyle = createMemo(() => {
     return clsx3(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover));
   });
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-    _el$.$$click = () => setIsOpen(!isOpen());
-    setAttribute(_el$2, "src", image || tanstack_logo_default);
-    effect(() => className(_el$, buttonStyle()));
-    return _el$;
-  })();
+  return createComponent(Show, {
+    get when() {
+      return !settings().triggerHidden;
+    },
+    get children() {
+      var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+      _el$.$$click = () => setIsOpen(!isOpen());
+      setAttribute(_el$2, "src", image || tanstack_logo_default);
+      effect(() => className(_el$, buttonStyle()));
+      return _el$;
+    }
+  });
 };
 delegateEvents(["click"]);
 var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
@@ -1029,6 +1034,16 @@ var SettingsTab = () => {
                 return settings().hideUntilHover;
               }
             }), null);
+            insert(_el$, createComponent(Checkbox, {
+              label: "Completely hide trigger",
+              description: "Completely removes the trigger from the DOM (you can still open it with the hotkey)",
+              onChange: () => setSettings({
+                triggerHidden: !settings().triggerHidden
+              }),
+              get checked() {
+                return settings().triggerHidden;
+              }
+            }), null);
             insert(_el$, createComponent(Input, {
               label: "Trigger Image",
               description: "Specify the URL of the image to use for the trigger",

package/dist/devtools/{QEKPWHXZ.js → MV3V7CMW.js}

@@ -1,4 +1,4 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/SFOE7G6Y.js';
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/XFQ6P775.js';
 import { createComponent, Portal, ssr, ssrAttribute, escape } from 'solid-js/web';
 import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut } from '@solid-primitives/keyboard';
@@ -904,7 +904,14 @@ var Trigger = ({
   const buttonStyle = createMemo(() => {
     return clsx3(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover));
   });
-  return ssr(_tmpl$, ssrAttribute("class", escape(buttonStyle(), true), false), ssrAttribute("src", escape(image, true) || escape(tanstack_logo_default, true), false));
+  return createComponent(Show, {
+    get when() {
+      return !settings().triggerHidden;
+    },
+    get children() {
+      return ssr(_tmpl$, ssrAttribute("class", escape(buttonStyle(), true), false), ssrAttribute("src", escape(image, true) || escape(tanstack_logo_default, true), false));
+    }
+  });
 };
 var _tmpl$2 = ["<div", ' style="', '"', ">", "</div>"];
 var MainPanel = (props) => {
@@ -932,7 +939,7 @@ var ContentPanel = (props) => {
   } = useDevtoolsSettings();
   return ssr(_tmpl$3, ssrAttribute("class", escape(styles().devtoolsPanel, true), false), props.handleDragStart ? ssr(_tmpl$22, ssrAttribute("class", escape(styles().dragHandle(settings().panelLocation), true), false)) : escape(null), escape(props.children));
 };
-var _tmpl$4 = ["<div", ">", "", "", "", "</div>"];
+var _tmpl$4 = ["<div", ">", "", "", "", "", "</div>"];
 var _tmpl$23 = ["<div", ">", "</div>"];
 var _tmpl$32 = ["<div", ">", "", "</div>"];
 var _tmpl$42 = ["<div", "><div", ">", "</div>", "Final shortcut is: ", "</div>"];
@@ -990,6 +997,15 @@ var SettingsTab = () => {
             get checked() {
               return settings().hideUntilHover;
             }
+          })), escape(createComponent(Checkbox, {
+            label: "Completely hide trigger",
+            description: "Completely removes the trigger from the DOM (you can still open it with the hotkey)",
+            onChange: () => setSettings({
+              triggerHidden: !settings().triggerHidden
+            }),
+            get checked() {
+              return settings().triggerHidden;
+            }
           })), escape(createComponent(Input, {
             label: "Trigger Image",
             description: "Specify the URL of the image to use for the trigger",

package/dist/index.d.ts

@@ -73,6 +73,10 @@ type DevtoolsStore = {
          * @default TanStackLogo
          */
         triggerImage: string;
+        /**
+         * Whether the trigger should be completely hidden or not (you can still open with the hotkey)
+         */
+        triggerHidden?: boolean;
     };
     state: {
         activeTab: TabName;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/SFOE7G6Y.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/SFOE7G6Y.js';
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/XFQ6P775.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XFQ6P775.js';
 import { render, createComponent, Portal } from 'solid-js/web';
 import { lazy } from 'solid-js';
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/LMV5GWDT.js'));
+      this.#Component = lazy(() => import('./devtools/3YT62TLF.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/server.js

@@ -1,5 +1,5 @@
-import { initialState } from './chunk/SFOE7G6Y.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/SFOE7G6Y.js';
+import { initialState } from './chunk/XFQ6P775.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XFQ6P775.js';
 import 'solid-js/web';
 import 'solid-js';
 import '@tanstack/devtools-event-bus/client';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.6.18",
+  "version": "0.6.19",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/components/trigger.tsx

@@ -1,4 +1,4 @@
-import { createMemo } from 'solid-js'
+import { Show, createMemo } from 'solid-js'
 import clsx from 'clsx'
 import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
@@ -24,13 +24,15 @@ export const Trigger = ({
     )
   })
   return (
-    <button
-      type="button"
-      aria-label="Open TanStack Devtools"
-      class={buttonStyle()}
-      onClick={() => setIsOpen(!isOpen())}
-    >
-      <img src={image || TanStackLogo} alt="TanStack Devtools" />
-    </button>
+    <Show when={!settings().triggerHidden}>
+      <button
+        type="button"
+        aria-label="Open TanStack Devtools"
+        class={buttonStyle()}
+        onClick={() => setIsOpen(!isOpen())}
+      >
+        <img src={image || TanStackLogo} alt="TanStack Devtools" />
+      </button>
+    </Show>
   )
 }

package/src/context/devtools-context.test.ts

@@ -7,7 +7,7 @@ describe('getStateFromLocalStorage', () => {
     localStorage.clear()
   })
   it('should return undefined when no data in localStorage', () => {
-    const state = getStateFromLocalStorage()
+    const state = getStateFromLocalStorage(undefined)
     expect(state).toEqual(undefined)
   })
   it('should return parsed state from localStorage and not remove valid plugins', () => {
@@ -53,7 +53,7 @@ describe('getStateFromLocalStorage', () => {
   })
   it('should handle invalid JSON in localStorage gracefully', () => {
     localStorage.setItem(TANSTACK_DEVTOOLS_STATE, 'invalid json')
-    const state = getStateFromLocalStorage()
+    const state = getStateFromLocalStorage(undefined)
     expect(state).toEqual(undefined)
   })
 })

package/src/context/devtools-context.tsx

@@ -100,13 +100,14 @@ const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
 }
 
 export function getStateFromLocalStorage(
-  plugins?: Array<TanStackDevtoolsPlugin>,
+  plugins: Array<TanStackDevtoolsPlugin> | undefined,
 ) {
   const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE)
   const existingState =
     tryParseJson<DevtoolsStore['state']>(existingStateString)
   const pluginIds =
     plugins?.map((plugin, i) => generatePluginId(plugin, i)) || []
+
   if (existingState?.activePlugins) {
     const originalLength = existingState.activePlugins.length
     // Filter out any active plugins that are no longer available
@@ -127,7 +128,7 @@ const getExistingStateFromStorage = (
   config?: TanStackDevtoolsConfig,
   plugins?: Array<TanStackDevtoolsPlugin>,
 ) => {
-  const existingState = getStateFromLocalStorage()
+  const existingState = getStateFromLocalStorage(plugins)
   const settings = getSettings()
 
   const state: DevtoolsStore = {

package/src/context/devtools-store.ts

@@ -66,6 +66,10 @@ export type DevtoolsStore = {
      * @default TanStackLogo
      */
     triggerImage: string
+    /**
+     * Whether the trigger should be completely hidden or not (you can still open with the hotkey)
+     */
+    triggerHidden?: boolean
   }
   state: {
     activeTab: TabName
@@ -92,6 +96,7 @@ export const initialState: DevtoolsStore = {
         ? 'dark'
         : 'light',
     triggerImage: '',
+    triggerHidden: false,
   },
   state: {
     activeTab: 'plugins',

package/src/tabs/settings-tab.tsx

@@ -71,6 +71,14 @@ export const SettingsTab = () => {
             }
             checked={settings().hideUntilHover}
           />
+          <Checkbox
+            label="Completely hide trigger"
+            description="Completely removes the trigger from the DOM (you can still open it with the hotkey)"
+            onChange={() =>
+              setSettings({ triggerHidden: !settings().triggerHidden })
+            }
+            checked={settings().triggerHidden}
+          />
           <Input
             label="Trigger Image"
             description="Specify the URL of the image to use for the trigger"