diff --git a/.changeset/fine-pugs-press.md b/.changeset/fine-pugs-press.md new file mode 100644 index 00000000..03a75bbc --- /dev/null +++ b/.changeset/fine-pugs-press.md @@ -0,0 +1,5 @@ +--- +'@tanstack/devtools-utils': patch +--- + +fix issue with unmounting of devtools diff --git a/.changeset/gold-beers-shine.md b/.changeset/gold-beers-shine.md new file mode 100644 index 00000000..9b31699d --- /dev/null +++ b/.changeset/gold-beers-shine.md @@ -0,0 +1,5 @@ +--- +'@tanstack/devtools': patch +--- + +fix issue with popup window diff --git a/packages/devtools-utils/src/react/panel.tsx b/packages/devtools-utils/src/react/panel.tsx index 274ff8b3..cfc82f79 100644 --- a/packages/devtools-utils/src/react/panel.tsx +++ b/packages/devtools-utils/src/react/panel.tsx @@ -32,18 +32,16 @@ export function createReactPanel< const devToolRef = useRef(null) const devtools = useRef(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]) diff --git a/packages/devtools-utils/src/solid/class.tsx b/packages/devtools-utils/src/solid/class.tsx index c48961c0..7cbb94ae 100644 --- a/packages/devtools-utils/src/solid/class.tsx +++ b/packages/devtools-utils/src/solid/class.tsx @@ -14,6 +14,8 @@ 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 @@ -21,6 +23,7 @@ export function constructCoreClass(Component: () => JSX.Element) { constructor() {} async mount(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 } diff --git a/packages/devtools/src/components/source-inspector.tsx b/packages/devtools/src/components/source-inspector.tsx index 519bcb51..6ae5401e 100644 --- a/packages/devtools/src/components/source-inspector.tsx +++ b/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, diff --git a/packages/devtools/src/context/pip-context.tsx b/packages/devtools/src/context/pip-context.tsx index 3166b59d..cbaf3a0e 100644 --- a/packages/devtools/src/context/pip-context.tsx +++ b/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() }) diff --git a/packages/devtools/src/core.tsx b/packages/devtools/src/core.tsx index 63ca8307..ec338dcc 100644 --- a/packages/devtools/src/core.tsx +++ b/packages/devtools/src/core.tsx @@ -63,7 +63,9 @@ export class TanStackDevtoolsCore { mount(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')