@tanstack/devtools 0.10.10 → 0.10.13

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/LF5QLUHI.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/Z6LKUI5N.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/{V5A7RKHW.js → 7Z2ESJHO.js}

@@ -1,4 +1,6 @@
-import { usePiPWindow, TANSTACK_DEVTOOLS, keyboardModifiers, getAllPermutations, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, MAX_ACTIVE_PLUGINS, uppercaseFirstLetter } from '../chunk/ULTYUGME.js';
+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';
@@ -3551,7 +3553,7 @@ var SourceInspector = () => {
     window.getSelection()?.removeAllRanges();
     e.preventDefault();
     e.stopPropagation();
-    const baseUrl = new URL(import.meta?.env?.BASE_URL ?? "/", location.origin);
+    const baseUrl = new URL(import.meta.env?.BASE_URL ?? "/", location.origin);
     const url = new URL(`__tsd/open-source?source=${encodeURIComponent(highlightState.dataSource)}`, baseUrl);
     fetch(url).catch(() => {
     });

package/dist/devtools/{LF5QLUHI.js → W6LG6674.js}

@@ -1,4 +1,6 @@
-import { usePiPWindow, TANSTACK_DEVTOOLS, keyboardModifiers, getAllPermutations, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, MAX_ACTIVE_PLUGINS, uppercaseFirstLetter } from '../chunk/ULTYUGME.js';
+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';
@@ -4089,7 +4091,7 @@ var SourceInspector = () => {
     window.getSelection()?.removeAllRanges();
     e.preventDefault();
     e.stopPropagation();
-    const baseUrl = new URL(import.meta?.env?.BASE_URL ?? "/", location.origin);
+    const baseUrl = new URL(import.meta.env?.BASE_URL ?? "/", location.origin);
     const url = new URL(`__tsd/open-source?source=${encodeURIComponent(highlightState.dataSource)}`, baseUrl);
     fetch(url).catch(() => {
     });

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/LF5QLUHI.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/Z6LKUI5N.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/EMNOPRXX.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/7Z2ESJHO.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/Z6LKUI5N.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/W6LG6674.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/EMNOPRXX.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.10",
+  "version": "0.10.13",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/components/source-inspector.tsx

@@ -80,7 +80,7 @@ export const SourceInspector = () => {
     e.stopPropagation()
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    const baseUrl = new URL(import.meta?.env?.BASE_URL ?? '/', location.origin)
+    const baseUrl = new URL(import.meta.env?.BASE_URL ?? '/', location.origin)
     const url = new URL(
       `__tsd/open-source?source=${encodeURIComponent(
         highlightState.dataSource,

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 }
+}