fix: make the import meta conditional to work outside of vite (#305)

* fix: make the import meta conditional to work outside of vite

* ci: apply automated fixes

* changeset

* fix: unmounting of devtools

* fix: unmounting of devtools

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/fine-pugs-press.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-utils': patch
+---
+
+fix issue with unmounting of devtools

.changeset/gold-beers-shine.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+fix issue with popup window

packages/devtools-utils/src/react/panel.tsx

@@ -32,18 +32,16 @@ export function createReactPanel<
     const devToolRef = useRef<HTMLDivElement>(null)
     const devtools = useRef<TCoreDevtoolsClass | null>(null)
     useEffect(() => {
-      if (devtools.current) return
-
-      devtools.current = new CoreClass()
+      const instance = new CoreClass()
+      devtools.current = instance
 
       if (devToolRef.current) {
-        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+        instance.mount(devToolRef.current, props?.theme ?? 'dark')
       }
 
       return () => {
-        if (devToolRef.current) {
-          devtools.current?.unmount()
-        }
+        instance.unmount()
+        devtools.current = null
       }
     }, [props?.theme])
 

packages/devtools-utils/src/solid/class.tsx

@@ -14,13 +14,16 @@ import type { JSX } from 'solid-js'
 export function constructCoreClass(Component: () => JSX.Element) {
   class DevtoolsCore {
     #isMounted = false
+    #isMounting = false
+    #mountCb: (() => void) | null = null
     #dispose?: () => void
     #Component: any
     #ThemeProvider: any
 
     constructor() {}
 
     async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
+      this.#isMounting = true
       const { lazy } = await import('solid-js')
       const { render, Portal } = await import('solid-js/web')
       if (this.#isMounted) {
@@ -49,13 +52,25 @@ export function constructCoreClass(Component: () => JSX.Element) {
         )
       }, mountTo)
       this.#isMounted = true
+      this.#isMounting = false
       this.#dispose = dispose
+      if (this.#mountCb) {
+        this.#mountCb()
+        this.#mountCb = null
+      }
     }
 
     unmount() {
-      if (!this.#isMounted) {
+      if (!this.#isMounted && !this.#isMounting) {
         throw new Error('Devtools is not mounted')
       }
+      if (this.#isMounting) {
+        this.#mountCb = () => {
+          this.#dispose?.()
+          this.#isMounted = false
+        }
+        return
+      }
       this.#dispose?.()
       this.#isMounted = false
     }

packages/devtools/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,

packages/devtools/src/context/pip-context.tsx

@@ -54,8 +54,9 @@ export const PiPProvider = (props: PiPProviderProps) => {
         'Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.',
       )
     }
-
-    import.meta.hot?.on('vite:beforeUpdate', () => {
+    //  can be run outside of vite so we ignore the rule
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    import.meta?.hot?.on('vite:beforeUpdate', () => {
       localStorage.setItem('pip_open', 'false')
       closePipWindow()
     })

packages/devtools/src/core.tsx

@@ -63,7 +63,9 @@ 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
-    if (import.meta.env.SSR) return
+    //  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 (this.#isMounted) {
       throw new Error('Devtools is already mounted')