@tanstack/devtools 0.10.9 → 0.10.11

package/dist/chunk/A767CXXU.js

@@ -0,0 +1,5 @@
+// src/constants.ts
+var PLUGIN_CONTAINER_ID = "plugin-container";
+var PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
+
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID };

package/dist/chunk/{ULTYUGME.js → AP5L3KAF.js}

@@ -1,11 +1,8 @@
+import { initialState } from './BNGI36V3.js';
 import { createComponent, delegateEvents } from 'solid-js/web';
-import { createContext, createSignal, createEffect, onCleanup, createMemo, useContext } from 'solid-js';
+import { createContext, createEffect, createSignal, onCleanup, createMemo, useContext } from 'solid-js';
 import { createStore } from 'solid-js/store';
 
-// src/constants.ts
-var PLUGIN_CONTAINER_ID = "plugin-container";
-var PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
-
 // src/utils/storage.ts
 var getStorageItem = (key) => localStorage.getItem(key);
 var setStorageItem = (key, value) => {
@@ -18,121 +15,21 @@ var setStorageItem = (key, value) => {
 var TANSTACK_DEVTOOLS = "tanstack_devtools";
 var TANSTACK_DEVTOOLS_STATE = "tanstack_devtools_state";
 var TANSTACK_DEVTOOLS_SETTINGS = "tanstack_devtools_settings";
-var PiPContext = createContext(void 0);
-var PiPProvider = (props) => {
-  const [pipWindow, setPipWindow] = createSignal(null);
-  const closePipWindow = () => {
-    const w = pipWindow();
-    if (w != null) {
-      w.close();
-      setPipWindow(null);
-    }
-  };
-  const requestPipWindow = (settings) => {
-    if (pipWindow() != null) {
-      return;
-    }
-    const pip = window.open("", "TSDT-Devtools-Panel", `${settings},popup`);
-    if (!pip) {
-      throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
-    }
-    if (import.meta.hot && typeof import.meta.hot.on === "function") {
-      import.meta.hot.on("vite:beforeUpdate", () => {
-        localStorage.setItem("pip_open", "false");
-        closePipWindow();
-      });
-    }
-    window.addEventListener("beforeunload", () => {
-      localStorage.setItem("pip_open", "false");
-      closePipWindow();
-    });
-    pip.document.head.innerHTML = "";
-    pip.document.body.innerHTML = "";
-    pip.document.title = "TanStack Devtools";
-    pip.document.body.style.margin = "0";
-    pip.addEventListener("pagehide", () => {
-      localStorage.setItem("pip_open", "false");
-      closePipWindow();
-    });
-    [...document.styleSheets].forEach((styleSheet) => {
-      try {
-        const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
-        const style = document.createElement("style");
-        const style_node = styleSheet.ownerNode;
-        let style_id = "";
-        if (style_node && "id" in style_node) {
-          style_id = style_node.id;
-        }
-        if (style_id) {
-          style.setAttribute("id", style_id);
-        }
-        style.textContent = cssRules;
-        pip.document.head.appendChild(style);
-      } catch (e) {
-        const link = document.createElement("link");
-        if (styleSheet.href == null) {
-          return;
-        }
-        link.rel = "stylesheet";
-        link.type = styleSheet.type;
-        link.media = styleSheet.media.toString();
-        link.href = styleSheet.href;
-        pip.document.head.appendChild(link);
-      }
-    });
-    delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document);
-    setPipWindow(pip);
-  };
-  createEffect(() => {
-    const gooberStyles = document.querySelector("#_goober");
-    const w = pipWindow();
-    if (gooberStyles && w) {
-      const observer = new MutationObserver(() => {
-        const pip_style = w.document.querySelector("#_goober");
-        if (pip_style) {
-          pip_style.textContent = gooberStyles.textContent;
-        }
-      });
-      observer.observe(gooberStyles, {
-        childList: true,
-        // observe direct children
-        subtree: true,
-        // and lower descendants too
-        characterDataOldValue: true
-        // pass old data to callback
-      });
-      onCleanup(() => {
-        observer.disconnect();
-      });
-    }
-  });
-  const value = createMemo(() => ({
-    pipWindow: pipWindow(),
-    requestPipWindow,
-    closePipWindow,
-    disabled: props.disabled ?? false
-  }));
-  return createComponent(PiPContext.Provider, {
-    value,
-    get children() {
-      return props.children;
-    }
-  });
-};
-var usePiPWindow = () => {
-  const context = createMemo(() => {
-    const ctx = useContext(PiPContext);
-    if (!ctx) {
-      throw new Error("usePiPWindow must be used within a PiPProvider");
-    }
-    return ctx();
-  });
-  return context;
-};
 
 // src/utils/constants.ts
 var MAX_ACTIVE_PLUGINS = 3;
 
+// src/utils/get-default-active-plugins.ts
+function getDefaultActivePlugins(plugins) {
+  if (plugins.length === 0) {
+    return [];
+  }
+  if (plugins.length === 1) {
+    return [plugins[0].id];
+  }
+  return plugins.filter((plugin) => plugin.defaultOpen === true).slice(0, MAX_ACTIVE_PLUGINS).map((plugin) => plugin.id);
+}
+
 // src/utils/sanitize.ts
 var tryParseJson = (json) => {
   if (!json) return void 0;
@@ -160,47 +57,6 @@ var getAllPermutations = (arr) => {
   return res;
 };
 
-// src/context/devtools-store.ts
-var keyboardModifiers = [
-  "Alt",
-  "Control",
-  "Meta",
-  "Shift",
-  "CtrlOrMeta"
-];
-var initialState = {
-  settings: {
-    defaultOpen: false,
-    hideUntilHover: false,
-    position: "bottom-right",
-    panelLocation: "bottom",
-    openHotkey: ["Control", "~"],
-    inspectHotkey: ["Shift", "Alt", "CtrlOrMeta"],
-    requireUrlFlag: false,
-    urlFlag: "tanstack-devtools",
-    theme: typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
-    triggerHidden: false,
-    customTrigger: void 0
-  },
-  state: {
-    activeTab: "plugins",
-    height: 400,
-    activePlugins: [],
-    persistOpen: false
-  }
-};
-
-// src/utils/get-default-active-plugins.ts
-function getDefaultActivePlugins(plugins) {
-  if (plugins.length === 0) {
-    return [];
-  }
-  if (plugins.length === 1) {
-    return [plugins[0].id];
-  }
-  return plugins.filter((plugin) => plugin.defaultOpen === true).slice(0, MAX_ACTIVE_PLUGINS).map((plugin) => plugin.id);
-}
-
 // src/context/devtools-context.tsx
 var DevtoolsContext = createContext();
 var getSettings = () => {
@@ -303,5 +159,116 @@ var DevtoolsProvider = (props) => {
     }
   });
 };
+var PiPContext = createContext(void 0);
+var PiPProvider = (props) => {
+  const [pipWindow, setPipWindow] = createSignal(null);
+  const closePipWindow = () => {
+    const w = pipWindow();
+    if (w != null) {
+      w.close();
+      setPipWindow(null);
+    }
+  };
+  const requestPipWindow = (settings) => {
+    if (pipWindow() != null) {
+      return;
+    }
+    const pip = window.open("", "TSDT-Devtools-Panel", `${settings},popup`);
+    if (!pip) {
+      throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
+    }
+    if (import.meta.hot && typeof import.meta.hot.on === "function") {
+      import.meta.hot.on("vite:beforeUpdate", () => {
+        localStorage.setItem("pip_open", "false");
+        closePipWindow();
+      });
+    }
+    window.addEventListener("beforeunload", () => {
+      localStorage.setItem("pip_open", "false");
+      closePipWindow();
+    });
+    pip.document.head.innerHTML = "";
+    pip.document.body.innerHTML = "";
+    pip.document.title = "TanStack Devtools";
+    pip.document.body.style.margin = "0";
+    pip.addEventListener("pagehide", () => {
+      localStorage.setItem("pip_open", "false");
+      closePipWindow();
+    });
+    [...document.styleSheets].forEach((styleSheet) => {
+      try {
+        const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
+        const style = document.createElement("style");
+        const style_node = styleSheet.ownerNode;
+        let style_id = "";
+        if (style_node && "id" in style_node) {
+          style_id = style_node.id;
+        }
+        if (style_id) {
+          style.setAttribute("id", style_id);
+        }
+        style.textContent = cssRules;
+        pip.document.head.appendChild(style);
+      } catch (e) {
+        const link = document.createElement("link");
+        if (styleSheet.href == null) {
+          return;
+        }
+        link.rel = "stylesheet";
+        link.type = styleSheet.type;
+        link.media = styleSheet.media.toString();
+        link.href = styleSheet.href;
+        pip.document.head.appendChild(link);
+      }
+    });
+    delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document);
+    setPipWindow(pip);
+  };
+  createEffect(() => {
+    const gooberStyles = document.querySelector("#_goober");
+    const w = pipWindow();
+    if (gooberStyles && w) {
+      const observer = new MutationObserver(() => {
+        const pip_style = w.document.querySelector("#_goober");
+        if (pip_style) {
+          pip_style.textContent = gooberStyles.textContent;
+        }
+      });
+      observer.observe(gooberStyles, {
+        childList: true,
+        // observe direct children
+        subtree: true,
+        // and lower descendants too
+        characterDataOldValue: true
+        // pass old data to callback
+      });
+      onCleanup(() => {
+        observer.disconnect();
+      });
+    }
+  });
+  const value = createMemo(() => ({
+    pipWindow: pipWindow(),
+    requestPipWindow,
+    closePipWindow,
+    disabled: props.disabled ?? false
+  }));
+  return createComponent(PiPContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+};
+var usePiPWindow = () => {
+  const context = createMemo(() => {
+    const ctx = useContext(PiPContext);
+    if (!ctx) {
+      throw new Error("usePiPWindow must be used within a PiPProvider");
+    }
+    return ctx();
+  });
+  return context;
+};
 
-export { DevtoolsContext, DevtoolsProvider, MAX_ACTIVE_PLUGINS, PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID, PiPProvider, TANSTACK_DEVTOOLS, getAllPermutations, initialState, keyboardModifiers, uppercaseFirstLetter, usePiPWindow };
+export { DevtoolsContext, DevtoolsProvider, MAX_ACTIVE_PLUGINS, PiPProvider, TANSTACK_DEVTOOLS, getAllPermutations, uppercaseFirstLetter, usePiPWindow };

package/dist/chunk/BNGI36V3.js

@@ -0,0 +1,31 @@
+// src/context/devtools-store.ts
+var keyboardModifiers = [
+  "Alt",
+  "Control",
+  "Meta",
+  "Shift",
+  "CtrlOrMeta"
+];
+var initialState = {
+  settings: {
+    defaultOpen: false,
+    hideUntilHover: false,
+    position: "bottom-right",
+    panelLocation: "bottom",
+    openHotkey: ["Control", "~"],
+    inspectHotkey: ["Shift", "Alt", "CtrlOrMeta"],
+    requireUrlFlag: false,
+    urlFlag: "tanstack-devtools",
+    theme: typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+    triggerHidden: false,
+    customTrigger: void 0
+  },
+  state: {
+    activeTab: "plugins",
+    height: 400,
+    activePlugins: [],
+    persistOpen: false
+  }
+};
+
+export { initialState, keyboardModifiers };

package/dist/dev.js

@@ -1,17 +1,16 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/ULTYUGME.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/ULTYUGME.js';
-import { render, createComponent, Portal } from 'solid-js/web';
-import { lazy } from 'solid-js';
-import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/A767CXXU.js';
+import { initialState } from './chunk/BNGI36V3.js';
 
+// src/core.ts
 var TanStackDevtoolsCore = class {
   #config = {
     ...initialState.settings
   };
   #plugins = [];
   #isMounted = false;
+  #isMounting = false;
+  #abortMount = false;
   #dispose;
-  #Component;
   #eventBus;
   #eventBusConfig;
   #setPlugins;
@@ -24,47 +23,44 @@ var TanStackDevtoolsCore = class {
     };
   }
   mount(el) {
-    if (this.#isMounted) {
+    if (typeof document === "undefined") return;
+    if (this.#isMounted || this.#isMounting) {
       throw new Error("Devtools is already mounted");
     }
-    const mountTo = el;
-    const dispose = render(() => {
-      const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/BX2FS55Z.js'));
-      const Devtools = this.#Component;
-      this.#eventBus = new ClientEventBus(this.#eventBusConfig);
-      this.#eventBus.start();
-      return createComponent(DevtoolsProvider, {
-        get plugins() {
-          return _self$.#plugins;
-        },
-        get config() {
-          return _self$.#config;
-        },
+    this.#isMounting = true;
+    this.#abortMount = false;
+    import('./mount-impl/E4RX7DUJ.js').then(({ mountDevtools }) => {
+      if (this.#abortMount) {
+        this.#isMounting = false;
+        return;
+      }
+      const result = mountDevtools({
+        el,
+        plugins: this.#plugins,
+        config: this.#config,
+        eventBusConfig: this.#eventBusConfig,
         onSetPlugins: (setPlugins) => {
-          _self$.#setPlugins = setPlugins;
-        },
-        get children() {
-          return createComponent(PiPProvider, {
-            get children() {
-              return createComponent(Portal, {
-                mount: mountTo,
-                get children() {
-                  return createComponent(Devtools, {});
-                }
-              });
-            }
-          });
+          this.#setPlugins = setPlugins;
         }
       });
-    }, mountTo);
-    this.#isMounted = true;
-    this.#dispose = dispose;
+      this.#dispose = result.dispose;
+      this.#eventBus = result.eventBus;
+      this.#isMounted = true;
+      this.#isMounting = false;
+    }).catch((err) => {
+      this.#isMounting = false;
+      console.error("[TanStack Devtools] Failed to load:", err);
+    });
   }
   unmount() {
-    if (!this.#isMounted) {
+    if (!this.#isMounted && !this.#isMounting) {
       throw new Error("Devtools is not mounted");
     }
+    if (this.#isMounting) {
+      this.#abortMount = true;
+      this.#isMounting = false;
+      return;
+    }
     this.#eventBus?.stop();
     this.#dispose?.();
     this.#isMounted = false;

package/dist/devtools/{BX2FS55Z.js → AHAZGWBE.js}

@@ -1,5 +1,7 @@
-import { usePiPWindow, TANSTACK_DEVTOOLS, keyboardModifiers, getAllPermutations, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, MAX_ACTIVE_PLUGINS, uppercaseFirstLetter } from '../chunk/ULTYUGME.js';
-import { delegateEvents, createComponent, Portal, template, use, setAttribute, insert, memo, effect, className, addEventListener, style, classList } from 'solid-js/web';
+import { PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID } from '../chunk/A767CXXU.js';
+import { usePiPWindow, TANSTACK_DEVTOOLS, getAllPermutations, DevtoolsContext, MAX_ACTIVE_PLUGINS, uppercaseFirstLetter } from '../chunk/AP5L3KAF.js';
+import { keyboardModifiers } from '../chunk/BNGI36V3.js';
+import { delegateEvents, createComponent, Portal, use, setAttribute, insert, memo, effect, className, setStyleProperty, addEventListener, style, template, classList } from 'solid-js/web';
 import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut, useKeyDownList } from '@solid-primitives/keyboard';
 import { ThemeContextProvider, MainPanel as MainPanel$1, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Select, Input, Button, ChevronDownIcon, CloseIcon, SearchIcon, SettingsIcon, PackageIcon, ExternalLinkIcon, CheckCircleIcon, XCircleIcon } from '@tanstack/devtools-ui';
@@ -1917,8 +1919,8 @@ var MainPanel = (props) => {
     }));
     effect((_p$) => {
       var _v$ = pip().pipWindow ? "100vh" : height() + "px", _v$2 = pip().pipWindow ? "100vh" : height() + "px", _v$3 = clsx3(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), styles().devtoolsPanelContainerAnimation(props.isOpen(), height(), settings().panelLocation), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing));
-      _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("height", _v$) : _el$.style.removeProperty("height"));
-      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("--tsd-main-panel-height", _v$2) : _el$.style.removeProperty("--tsd-main-panel-height"));
+      _v$ !== _p$.e && setStyleProperty(_el$, "height", _p$.e = _v$);
+      _v$2 !== _p$.t && setStyleProperty(_el$, "--tsd-main-panel-height", _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
       return _p$;
     }, {
@@ -1954,7 +1956,7 @@ var ContentPanel = (props) => {
   })();
 };
 delegateEvents(["mousedown"]);
-var _tmpl$6 = /* @__PURE__ */ template(`<div><h4></h4><div></div>Final shortcut is: `);
+var _tmpl$6 = /* @__PURE__ */ template(`<div><h4 style=margin:0></h4><div></div>Final shortcut is: `);
 var MODIFIER_DISPLAY_NAMES = {
   Shift: "Shift",
   Alt: "Alt",
@@ -1995,7 +1997,6 @@ var HotkeyConfig = (props) => {
   };
   return (() => {
     var _el$ = _tmpl$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
-    _el$2.style.setProperty("margin", "0");
     insert(_el$2, () => props.description);
     insert(_el$3, createComponent(Show, {
       keyed: true,
@@ -2361,7 +2362,7 @@ var _tmpl$32 = /* @__PURE__ */ template(`<span>\u2713 v<!> \u2022 Min v`);
 var _tmpl$42 = /* @__PURE__ */ template(`<p>`);
 var _tmpl$52 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer">Documentation `);
 var _tmpl$62 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$72 = /* @__PURE__ */ template(`<div><span></span><div></div><div><h3></h3><p></p><p>`);
+var _tmpl$72 = /* @__PURE__ */ template(`<div style=position:relative><span></span><div></div><div><h3></h3><p></p><p>`);
 var _tmpl$82 = /* @__PURE__ */ template(`<span>\u26A0\uFE0F v<!> \u2022 Requires v<!>+`);
 var _tmpl$9 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$0 = /* @__PURE__ */ template(`<span>Installing...`);
@@ -2373,7 +2374,6 @@ var PluginCardComponent = (props) => {
   } = props;
   return (() => {
     var _el$ = _tmpl$72(), _el$3 = _el$.firstChild, _el$4 = _el$3.nextSibling, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling;
-    _el$.style.setProperty("position", "relative");
     insert(_el$, createComponent(Show, {
       get when() {
         return card.metadata?.isNew;
@@ -2410,7 +2410,10 @@ var PluginCardComponent = (props) => {
     }));
     insert(_el$7, () => card.metadata?.title || card.devtoolsPackage);
     insert(_el$8, () => card.devtoolsPackage);
-    insert(_el$9, () => card.actionType === "requires-package" ? `Requires ${card.requiredPackageName}` : card.actionType === "wrong-framework" ? `For different framework projects` : card.actionType === "already-installed" ? `Active in your devtools` : card.actionType === "version-mismatch" ? card.versionInfo?.reason || "Version incompatible" : card.metadata?.description || `For ${card.requiredPackageName}`);
+    insert(_el$9, (() => {
+      var _c$ = memo(() => card.actionType === "requires-package");
+      return () => _c$() ? `Requires ${card.requiredPackageName}` : memo(() => card.actionType === "wrong-framework")() ? `For different framework projects` : memo(() => card.actionType === "already-installed")() ? `Active in your devtools` : memo(() => card.actionType === "version-mismatch")() ? card.versionInfo?.reason || "Version incompatible" : card.metadata?.description || `For ${card.requiredPackageName}`;
+    })());
     insert(_el$6, createComponent(Show, {
       get when() {
         return card.versionInfo;
@@ -2463,7 +2466,7 @@ var PluginCardComponent = (props) => {
     }), null);
     insert(_el$6, createComponent(Show, {
       get when() {
-        return card.metadata?.tags && card.metadata.tags.length > 0;
+        return memo(() => !!card.metadata?.tags)() && card.metadata.tags.length > 0;
       },
       get children() {
         var _el$15 = _tmpl$62();
@@ -2752,13 +2755,11 @@ var TagFilters = (props) => {
 delegateEvents(["click"]);
 
 // src/tabs/marketplace/marketplace-header.tsx
-var _tmpl$13 = /* @__PURE__ */ template(`<div><div><h2>Plugin Marketplace</h2><div><div><input type=text placeholder="Search plugins..."></div><button></button></div></div><p>Discover and install devtools for TanStack Query, Router, Form, and Pacer`);
+var _tmpl$13 = /* @__PURE__ */ template(`<div><div><h2>Plugin Marketplace</h2><div style=display:flex;align-items:center><div><input type=text placeholder="Search plugins..."></div><button></button></div></div><p>Discover and install devtools for TanStack Query, Router, Form, and Pacer`);
 var MarketplaceHeader = (props) => {
   const styles = useStyles();
   return (() => {
     var _el$ = _tmpl$13(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$2.nextSibling;
-    _el$4.style.setProperty("display", "flex");
-    _el$4.style.setProperty("align-items", "center");
     insert(_el$5, createComponent(SearchIcon, {}), _el$6);
     _el$6.$$input = (e) => props.onSearchInput(e.currentTarget.value);
     addEventListener(_el$7, "click", props.onSettingsClick, true);
@@ -3642,7 +3643,7 @@ function useHeadChanges(onChange, opts = {}) {
 // src/tabs/seo-tab.tsx
 var _tmpl$16 = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`);
 var _tmpl$28 = /* @__PURE__ */ template(`<img alt=Preview>`);
-var _tmpl$35 = /* @__PURE__ */ template(`<div>No Image`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div style=background:#222;color:#888;display:flex;align-items:center;justify-content:center;min-height:80px;width:100%>No Image`);
 var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$54 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`);
 var _tmpl$63 = /* @__PURE__ */ template(`<li>`);
@@ -3789,13 +3790,6 @@ function SocialPreview(props) {
         return _el$7;
       })() : (() => {
         var _el$8 = _tmpl$35();
-        _el$8.style.setProperty("background", "#222");
-        _el$8.style.setProperty("color", "#888");
-        _el$8.style.setProperty("display", "flex");
-        _el$8.style.setProperty("align-items", "center");
-        _el$8.style.setProperty("justify-content", "center");
-        _el$8.style.setProperty("min-height", "80px");
-        _el$8.style.setProperty("width", "100%");
         effect(() => className(_el$8, styles().seoPreviewImage));
         return _el$8;
       })();
@@ -3806,9 +3800,9 @@ function SocialPreview(props) {
     effect((_p$) => {
       var _v$ = styles().seoPreviewCard, _v$2 = props.color, _v$3 = styles().seoPreviewHeader, _v$4 = props.color, _v$5 = styles().seoPreviewTitle, _v$6 = styles().seoPreviewDesc, _v$7 = styles().seoPreviewUrl;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("border-color", _v$2) : _el$.style.removeProperty("border-color"));
+      _v$2 !== _p$.t && setStyleProperty(_el$, "border-color", _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
-      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("color", _v$4) : _el$2.style.removeProperty("color"));
+      _v$4 !== _p$.o && setStyleProperty(_el$2, "color", _p$.o = _v$4);
       _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
       _v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
       _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
@@ -3951,7 +3945,7 @@ var tabs = [{
 // src/components/tabs.tsx
 var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$29 = /* @__PURE__ */ template(`<button type=button>`);
-var _tmpl$36 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div style=margin-top:auto;width:100%><button type=button></button><button type=button>`);
 var Tabs = (props) => {
   const styles = useStyles();
   const {
@@ -3991,8 +3985,6 @@ var Tabs = (props) => {
       var _c$ = memo(() => pipWindow().pipWindow !== null);
       return () => _c$() ? null : (() => {
         var _el$3 = _tmpl$36(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
-        _el$3.style.setProperty("margin-top", "auto");
-        _el$3.style.setProperty("width", "100%");
         _el$4.$$click = handleDetachment;
         insert(_el$4, createComponent(PiP, {}));
         _el$5.$$click = () => props.toggleOpen();
@@ -4028,7 +4020,7 @@ var TabContent = () => {
     return _el$;
   })();
 };
-var _tmpl$19 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$19 = /* @__PURE__ */ template(`<div style=pointer-events:none>`);
 var SourceInspector = () => {
   const {
     settings
@@ -4161,15 +4153,13 @@ var SourceInspector = () => {
     use(setNameTagRef, _el$);
     insert(_el$, () => highlightState.dataSource);
     effect((_$p) => style(_el$, {
-      ...fileNameStyles(),
-      "pointer-events": "none"
+      ...fileNameStyles()
     }, _$p));
     return _el$;
   })(), (() => {
     var _el$2 = _tmpl$19();
     effect((_$p) => style(_el$2, {
-      ...currentElementBoxStyles(),
-      "pointer-events": "none"
+      ...currentElementBoxStyles()
     }, _$p));
     return _el$2;
   })()];

package/dist/devtools/{Y264CKBD.js → NTZWLI2C.js}

@@ -1,5 +1,7 @@
-import { usePiPWindow, TANSTACK_DEVTOOLS, keyboardModifiers, getAllPermutations, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, MAX_ACTIVE_PLUGINS, uppercaseFirstLetter } from '../chunk/ULTYUGME.js';
-import { createComponent, Portal, ssr, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
+import { PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID } from '../chunk/A767CXXU.js';
+import { usePiPWindow, TANSTACK_DEVTOOLS, getAllPermutations, DevtoolsContext, MAX_ACTIVE_PLUGINS, uppercaseFirstLetter } from '../chunk/AP5L3KAF.js';
+import { keyboardModifiers } from '../chunk/BNGI36V3.js';
+import { createComponent, Portal, ssr, ssrAttribute, escape, ssrStyleProperty, ssrStyle } from 'solid-js/web';
 import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut, useKeyDownList } from '@solid-primitives/keyboard';
 import { ThemeContextProvider, MainPanel as MainPanel$1, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Select, Input, Button, ChevronDownIcon, CloseIcon, SearchIcon, SettingsIcon, PackageIcon, ExternalLinkIcon, CheckCircleIcon, XCircleIcon } from '@tanstack/devtools-ui';
@@ -1895,7 +1897,7 @@ var MainPanel = (props) => {
     settings
   } = useDevtoolsSettings();
   const pip = usePiPWindow();
-  return ssr(_tmpl$4, ssrAttribute("id", escape(TANSTACK_DEVTOOLS, true), false), "height:" + (pip().pipWindow ? "100vh" : escape(height(), true) + "px") + (";--tsd-main-panel-height:" + (pip().pipWindow ? "100vh" : escape(height(), true) + "px")), ssrAttribute("class", escape(clsx3(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), styles().devtoolsPanelContainerAnimation(props.isOpen(), height(), settings().panelLocation), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing)), true), false), escape(createComponent(DrawClientProvider, {
+  return ssr(_tmpl$4, ssrAttribute("id", escape(TANSTACK_DEVTOOLS, true), false), ssrStyleProperty("height:", pip().pipWindow ? "100vh" : escape(height(), true) + "px") + ssrStyleProperty(";--tsd-main-panel-height:", pip().pipWindow ? "100vh" : escape(height(), true) + "px"), ssrAttribute("class", escape(clsx3(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), styles().devtoolsPanelContainerAnimation(props.isOpen(), height(), settings().panelLocation), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing)), true), false), escape(createComponent(DrawClientProvider, {
     animationMs: 400,
     get children() {
       return props.children;
@@ -1950,7 +1952,7 @@ var HotkeyConfig = (props) => {
   const getDisplayHotkey = () => {
     return props.hotkey.join(" + ");
   };
-  return ssr(_tmpl$6, ssrAttribute("class", escape(styles().settingsGroup, true), false), "margin:0", escape(props.description), ssrAttribute("class", escape(styles().settingsModifiers, true), false), escape(createComponent(Show, {
+  return ssr(_tmpl$6, ssrAttribute("class", escape(styles().settingsGroup, true), false), ssrStyleProperty("margin:", 0), escape(props.description), ssrAttribute("class", escape(styles().settingsModifiers, true), false), escape(createComponent(Show, {
     keyed: true,
     get when() {
       return props.hotkey;
@@ -2278,7 +2280,7 @@ var PluginCardComponent = (props) => {
   const {
     card
   } = props;
-  return ssr(_tmpl$72, `${escape(styles().pluginMarketplaceCard, true) || ""} ${!card.isCurrentFramework && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardDisabled, true), true) : ""} ${!!card.metadata?.featured && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardFeatured, true), true) : ""} ${card.actionType === "already-installed" ? escape(escape(styles().pluginMarketplaceCardActive, true), true) : ""}`, "position:relative", escape(createComponent(Show, {
+  return ssr(_tmpl$72, `${escape(styles().pluginMarketplaceCard, true) || ""} ${!card.isCurrentFramework && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardDisabled, true), true) : ""} ${!!card.metadata?.featured && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardFeatured, true), true) : ""} ${card.actionType === "already-installed" ? escape(escape(styles().pluginMarketplaceCardActive, true), true) : ""}`, ssrStyleProperty("position:", "relative"), escape(createComponent(Show, {
     get when() {
       return card.metadata?.isNew;
     },
@@ -2457,7 +2459,7 @@ var TagFilters = (props) => {
 var _tmpl$15 = ["<div", "><div", "><h2", '>Plugin Marketplace</h2><div style="', '"><div', ">", '<input type="text"', ' placeholder="Search plugins..."', "></div><button", ">", "</button></div></div><p", ">Discover and install devtools for TanStack Query, Router, Form, and Pacer</p>", "</div>"];
 var MarketplaceHeader = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$15, ssrAttribute("class", escape(styles().pluginMarketplaceHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitleRow, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitle, true), false), "display:flex;align-items:center", ssrAttribute("class", escape(styles().pluginMarketplaceSearchWrapper, true), false), escape(createComponent(SearchIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSearch, true), false), ssrAttribute("value", escape(props.searchInput(), true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSettingsButton, true), false), escape(createComponent(SettingsIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceDescription, true), false), escape(createComponent(TagFilters, {
+  return ssr(_tmpl$15, ssrAttribute("class", escape(styles().pluginMarketplaceHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitleRow, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitle, true), false), ssrStyleProperty("display:", "flex") + ssrStyleProperty(";align-items:", "center"), ssrAttribute("class", escape(styles().pluginMarketplaceSearchWrapper, true), false), escape(createComponent(SearchIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSearch, true), false), ssrAttribute("value", escape(props.searchInput(), true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSettingsButton, true), false), escape(createComponent(SettingsIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceDescription, true), false), escape(createComponent(TagFilters, {
     get tags() {
       return props.tags;
     },
@@ -3356,7 +3358,7 @@ var SOCIALS = [
 ];
 function SocialPreview(props) {
   const styles = useStyles();
-  return ssr(_tmpl$18, ssrAttribute("class", escape(styles().seoPreviewCard, true), false), "border-color:" + escape(props.color, true), ssrAttribute("class", escape(styles().seoPreviewHeader, true), false), "color:" + escape(props.color, true), escape(props.network), props.meta.image ? ssr(_tmpl$29, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$36, ssrAttribute("class", escape(styles().seoPreviewImage, true), false), "background:#222;color:#888;display:flex;align-items:center;justify-content:center;min-height:80px;width:100%"), ssrAttribute("class", escape(styles().seoPreviewTitle, true), false), escape(props.meta.title) || "No Title", ssrAttribute("class", escape(styles().seoPreviewDesc, true), false), escape(props.meta.description) || "No Description", ssrAttribute("class", escape(styles().seoPreviewUrl, true), false), escape(props.meta.url) || escape(window.location.href));
+  return ssr(_tmpl$18, ssrAttribute("class", escape(styles().seoPreviewCard, true), false), ssrStyleProperty("border-color:", escape(props.color, true)), ssrAttribute("class", escape(styles().seoPreviewHeader, true), false), ssrStyleProperty("color:", escape(props.color, true)), escape(props.network), props.meta.image ? ssr(_tmpl$29, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$36, ssrAttribute("class", escape(styles().seoPreviewImage, true), false), ssrStyleProperty("background:", "#222") + ssrStyleProperty(";color:", "#888") + ssrStyleProperty(";display:", "flex") + ssrStyleProperty(";align-items:", "center") + ssrStyleProperty(";justify-content:", "center") + ssrStyleProperty(";min-height:", "80px") + ssrStyleProperty(";width:", "100%")), ssrAttribute("class", escape(styles().seoPreviewTitle, true), false), escape(props.meta.title) || "No Title", ssrAttribute("class", escape(styles().seoPreviewDesc, true), false), escape(props.meta.description) || "No Description", ssrAttribute("class", escape(styles().seoPreviewUrl, true), false), escape(props.meta.url) || escape(window.location.href));
 }
 var SeoTab = () => {
   const [reports, setReports] = createSignal(analyzeHead());
@@ -3468,7 +3470,7 @@ var Tabs = (props) => {
     children: (tab) => ssr(_tmpl$210, ssrAttribute("class", escape(clsx3(styles().tab, {
       active: state().activeTab === tab.id
     }), true), false), escape(tab.icon()))
-  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$37, "margin-top:auto;width:100%", ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
+  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$37, ssrStyleProperty("margin-top:", "auto") + ssrStyleProperty(";width:", "100%"), ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
 };
 var _tmpl$20 = ["<div", ">", "</div>"];
 var TabContent = () => {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+import * as solid_js from 'solid-js';
 import { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client';
 export { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client';
-import * as solid_js from 'solid-js';
 
 declare const PLUGIN_CONTAINER_ID = "plugin-container";
 declare const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";

package/dist/index.js

@@ -1,17 +1,16 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/ULTYUGME.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/ULTYUGME.js';
-import { render, createComponent, Portal } from 'solid-js/web';
-import { lazy } from 'solid-js';
-import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/A767CXXU.js';
+import { initialState } from './chunk/BNGI36V3.js';
 
+// src/core.ts
 var TanStackDevtoolsCore = class {
   #config = {
     ...initialState.settings
   };
   #plugins = [];
   #isMounted = false;
+  #isMounting = false;
+  #abortMount = false;
   #dispose;
-  #Component;
   #eventBus;
   #eventBusConfig;
   #setPlugins;
@@ -24,47 +23,43 @@ var TanStackDevtoolsCore = class {
     };
   }
   mount(el) {
-    if (this.#isMounted) {
+    if (typeof document === "undefined") return;
+    if (this.#isMounted || this.#isMounting) {
       throw new Error("Devtools is already mounted");
     }
-    const mountTo = el;
-    const dispose = render(() => {
-      const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/BX2FS55Z.js'));
-      const Devtools = this.#Component;
-      this.#eventBus = new ClientEventBus(this.#eventBusConfig);
-      this.#eventBus.start();
-      return createComponent(DevtoolsProvider, {
-        get plugins() {
-          return _self$.#plugins;
-        },
-        get config() {
-          return _self$.#config;
-        },
+    this.#isMounting = true;
+    this.#abortMount = false;
+    import('./mount-impl/E4RX7DUJ.js').then(({ mountDevtools }) => {
+      if (this.#abortMount) {
+        this.#isMounting = false;
+        return;
+      }
+      const result = mountDevtools({
+        el,
+        plugins: this.#plugins,
+        config: this.#config,
+        eventBusConfig: this.#eventBusConfig,
         onSetPlugins: (setPlugins) => {
-          _self$.#setPlugins = setPlugins;
-        },
-        get children() {
-          return createComponent(PiPProvider, {
-            get children() {
-              return createComponent(Portal, {
-                mount: mountTo,
-                get children() {
-                  return createComponent(Devtools, {});
-                }
-              });
-            }
-          });
+          this.#setPlugins = setPlugins;
         }
       });
-    }, mountTo);
-    this.#isMounted = true;
-    this.#dispose = dispose;
+      this.#dispose = result.dispose;
+      this.#eventBus = result.eventBus;
+      this.#isMounted = true;
+      this.#isMounting = false;
+    }).catch((err) => {
+      this.#isMounting = false;
+    });
   }
   unmount() {
-    if (!this.#isMounted) {
+    if (!this.#isMounted && !this.#isMounting) {
       throw new Error("Devtools is not mounted");
     }
+    if (this.#isMounting) {
+      this.#abortMount = true;
+      this.#isMounting = false;
+      return;
+    }
     this.#eventBus?.stop();
     this.#dispose?.();
     this.#isMounted = false;

package/dist/mount-impl/22DJOLY6.js

@@ -0,0 +1,41 @@
+import { DevtoolsProvider, PiPProvider } from '../chunk/AP5L3KAF.js';
+import '../chunk/BNGI36V3.js';
+import { render, createComponent, Portal } from 'solid-js/web';
+import { lazy } from 'solid-js';
+import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
+
+function mountDevtools(options) {
+  const {
+    el,
+    plugins,
+    config,
+    eventBusConfig,
+    onSetPlugins
+  } = options;
+  const eventBus = new ClientEventBus(eventBusConfig);
+  eventBus.start();
+  const Devtools = lazy(() => import('../devtools/NTZWLI2C.js'));
+  const dispose = render(() => createComponent(DevtoolsProvider, {
+    plugins,
+    config,
+    onSetPlugins,
+    get children() {
+      return createComponent(PiPProvider, {
+        get children() {
+          return createComponent(Portal, {
+            mount: el,
+            get children() {
+              return createComponent(Devtools, {});
+            }
+          });
+        }
+      });
+    }
+  }), el);
+  return {
+    dispose,
+    eventBus
+  };
+}
+
+export { mountDevtools };

package/dist/mount-impl/E4RX7DUJ.js

@@ -0,0 +1,41 @@
+import { DevtoolsProvider, PiPProvider } from '../chunk/AP5L3KAF.js';
+import '../chunk/BNGI36V3.js';
+import { render, createComponent, Portal } from 'solid-js/web';
+import { lazy } from 'solid-js';
+import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
+
+function mountDevtools(options) {
+  const {
+    el,
+    plugins,
+    config,
+    eventBusConfig,
+    onSetPlugins
+  } = options;
+  const eventBus = new ClientEventBus(eventBusConfig);
+  eventBus.start();
+  const Devtools = lazy(() => import('../devtools/AHAZGWBE.js'));
+  const dispose = render(() => createComponent(DevtoolsProvider, {
+    plugins,
+    config,
+    onSetPlugins,
+    get children() {
+      return createComponent(PiPProvider, {
+        get children() {
+          return createComponent(Portal, {
+            mount: el,
+            get children() {
+              return createComponent(Devtools, {});
+            }
+          });
+        }
+      });
+    }
+  }), el);
+  return {
+    dispose,
+    eventBus
+  };
+}
+
+export { mountDevtools };

package/dist/server.js

@@ -1,17 +1,16 @@
-import { initialState } from './chunk/ULTYUGME.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/ULTYUGME.js';
-import 'solid-js/web';
-import 'solid-js';
-import '@tanstack/devtools-event-bus/client';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/A767CXXU.js';
+import { initialState } from './chunk/BNGI36V3.js';
 
+// src/core.ts
 var TanStackDevtoolsCore = class {
   #config = {
     ...initialState.settings
   };
   #plugins = [];
   #isMounted = false;
+  #isMounting = false;
+  #abortMount = false;
   #dispose;
-  #Component;
   #eventBus;
   #eventBusConfig;
   #setPlugins;
@@ -24,12 +23,43 @@ var TanStackDevtoolsCore = class {
     };
   }
   mount(el) {
-    return;
+    if (typeof document === "undefined") return;
+    if (this.#isMounted || this.#isMounting) {
+      throw new Error("Devtools is already mounted");
+    }
+    this.#isMounting = true;
+    this.#abortMount = false;
+    import('./mount-impl/22DJOLY6.js').then(({ mountDevtools }) => {
+      if (this.#abortMount) {
+        this.#isMounting = false;
+        return;
+      }
+      const result = mountDevtools({
+        el,
+        plugins: this.#plugins,
+        config: this.#config,
+        eventBusConfig: this.#eventBusConfig,
+        onSetPlugins: (setPlugins) => {
+          this.#setPlugins = setPlugins;
+        }
+      });
+      this.#dispose = result.dispose;
+      this.#eventBus = result.eventBus;
+      this.#isMounted = true;
+      this.#isMounting = false;
+    }).catch((err) => {
+      this.#isMounting = false;
+    });
   }
   unmount() {
-    if (!this.#isMounted) {
+    if (!this.#isMounted && !this.#isMounting) {
       throw new Error("Devtools is not mounted");
     }
+    if (this.#isMounting) {
+      this.#abortMount = true;
+      this.#isMounting = false;
+      return;
+    }
     this.#eventBus?.stop();
     this.#dispose?.();
     this.#isMounted = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.10.9",
+  "version": "0.10.11",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "solid-js": "^1.9.9",
     "@tanstack/devtools-client": "0.0.6",
     "@tanstack/devtools-event-bus": "0.4.1",
-    "@tanstack/devtools-ui": "0.4.4"
+    "@tanstack/devtools-ui": "0.5.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

package/src/{core.tsx → core.ts}

@@ -1,14 +1,9 @@
-import { lazy } from 'solid-js'
-import { Portal, render } from 'solid-js/web'
-import { ClientEventBus } from '@tanstack/devtools-event-bus/client'
-import { DevtoolsProvider } from './context/devtools-context'
 import { initialState } from './context/devtools-store'
-import { PiPProvider } from './context/pip-context'
-import type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'
 import type {
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
 } from './context/devtools-context'
+import type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'
 
 export interface TanStackDevtoolsInit {
   /**
@@ -46,9 +41,10 @@ export class TanStackDevtoolsCore {
   }
   #plugins: Array<TanStackDevtoolsPlugin> = []
   #isMounted = false
+  #isMounting = false
+  #abortMount = false
   #dispose?: () => void
-  #Component: any
-  #eventBus: ClientEventBus | undefined
+  #eventBus?: { stop: () => void }
   #eventBusConfig: ClientEventBusConfig | undefined
   #setPlugins?: (plugins: Array<TanStackDevtoolsPlugin>) => void
 
@@ -62,45 +58,51 @@ export class TanStackDevtoolsCore {
   }
 
   mount<T extends HTMLElement>(el: T) {
-    //  tsup-preset-solid statically replaces this variable during build, which eliminates this code from server bundle
-    //  can be run outside of vite so we ignore the rule
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (import.meta?.env?.SSR) return
+    if (typeof document === 'undefined') return
 
-    if (this.#isMounted) {
+    if (this.#isMounted || this.#isMounting) {
       throw new Error('Devtools is already mounted')
     }
-    const mountTo = el
-    const dispose = render(() => {
-      this.#Component = lazy(() => import('./devtools'))
-      const Devtools = this.#Component
-      this.#eventBus = new ClientEventBus(this.#eventBusConfig)
-      this.#eventBus.start()
-      return (
-        <DevtoolsProvider
-          plugins={this.#plugins}
-          config={this.#config}
-          onSetPlugins={(setPlugins) => {
+    this.#isMounting = true
+    this.#abortMount = false
+
+    import('./mount-impl')
+      .then(({ mountDevtools }) => {
+        if (this.#abortMount) {
+          this.#isMounting = false
+          return
+        }
+
+        const result = mountDevtools({
+          el,
+          plugins: this.#plugins,
+          config: this.#config,
+          eventBusConfig: this.#eventBusConfig,
+          onSetPlugins: (setPlugins) => {
             this.#setPlugins = setPlugins
-          }}
-        >
-          <PiPProvider>
-            <Portal mount={mountTo}>
-              <Devtools />
-            </Portal>
-          </PiPProvider>
-        </DevtoolsProvider>
-      )
-    }, mountTo)
+          },
+        })
 
-    this.#isMounted = true
-    this.#dispose = dispose
+        this.#dispose = result.dispose
+        this.#eventBus = result.eventBus
+        this.#isMounted = true
+        this.#isMounting = false
+      })
+      .catch((err) => {
+        this.#isMounting = false
+        console.error('[TanStack Devtools] Failed to load:', err)
+      })
   }
 
   unmount() {
-    if (!this.#isMounted) {
+    if (!this.#isMounted && !this.#isMounting) {
       throw new Error('Devtools is not mounted')
     }
+    if (this.#isMounting) {
+      this.#abortMount = true
+      this.#isMounting = false
+      return
+    }
     this.#eventBus?.stop()
     this.#dispose?.()
     this.#isMounted = false

package/src/mount-impl.tsx

@@ -0,0 +1,53 @@
+import { lazy } from 'solid-js'
+import { Portal, render } from 'solid-js/web'
+import { ClientEventBus } from '@tanstack/devtools-event-bus/client'
+import { DevtoolsProvider } from './context/devtools-context'
+import { PiPProvider } from './context/pip-context'
+import type {
+  TanStackDevtoolsConfig,
+  TanStackDevtoolsPlugin,
+} from './context/devtools-context'
+import type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'
+
+interface MountOptions {
+  el: HTMLElement
+  plugins: Array<TanStackDevtoolsPlugin>
+  config: TanStackDevtoolsConfig
+  eventBusConfig?: ClientEventBusConfig
+  onSetPlugins: (
+    setPlugins: (plugins: Array<TanStackDevtoolsPlugin>) => void,
+  ) => void
+}
+
+interface MountResult {
+  dispose: () => void
+  eventBus: { stop: () => void }
+}
+
+export function mountDevtools(options: MountOptions): MountResult {
+  const { el, plugins, config, eventBusConfig, onSetPlugins } = options
+
+  const eventBus = new ClientEventBus(eventBusConfig)
+  eventBus.start()
+
+  const Devtools = lazy(() => import('./devtools'))
+
+  const dispose = render(
+    () => (
+      <DevtoolsProvider
+        plugins={plugins}
+        config={config}
+        onSetPlugins={onSetPlugins}
+      >
+        <PiPProvider>
+          <Portal mount={el}>
+            <Devtools />
+          </Portal>
+        </PiPProvider>
+      </DevtoolsProvider>
+    ),
+    el,
+  )
+
+  return { dispose, eventBus }
+}