From 9e5190fb4534d4225e8c5e11cf7e11f880bd3d50 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Thu, 8 Jan 2026 15:04:43 +0100 Subject: [PATCH 1/2] fix: improve popup handling for non-vite environments --- .changeset/ready-peas-do.md | 5 ++ packages/devtools/src/context/pip-context.tsx | 77 ++++++++++--------- 2 files changed, 44 insertions(+), 38 deletions(-) create mode 100644 .changeset/ready-peas-do.md diff --git a/.changeset/ready-peas-do.md b/.changeset/ready-peas-do.md new file mode 100644 index 00000000..f3868b02 --- /dev/null +++ b/.changeset/ready-peas-do.md @@ -0,0 +1,5 @@ +--- +'@tanstack/devtools': patch +--- + +fix issue with popups in non-vite environments diff --git a/packages/devtools/src/context/pip-context.tsx b/packages/devtools/src/context/pip-context.tsx index cbaf3a0e..8bdfb810 100644 --- a/packages/devtools/src/context/pip-context.tsx +++ b/packages/devtools/src/context/pip-context.tsx @@ -54,12 +54,13 @@ export const PiPProvider = (props: PiPProviderProps) => { 'Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.', ) } - // 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() - }) + + 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() @@ -78,39 +79,39 @@ export const PiPProvider = (props: PiPProviderProps) => { closePipWindow() }) - // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all - // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window - ;[...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 + // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all + // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window + ;[...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) } - - 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', From 97683657ec6157204a23c934886bcf0fd488169c Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 8 Jan 2026 14:05:17 +0000 Subject: [PATCH 2/2] ci: apply automated fixes --- packages/devtools/src/context/pip-context.tsx | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/packages/devtools/src/context/pip-context.tsx b/packages/devtools/src/context/pip-context.tsx index 8bdfb810..fc605808 100644 --- a/packages/devtools/src/context/pip-context.tsx +++ b/packages/devtools/src/context/pip-context.tsx @@ -79,39 +79,39 @@ export const PiPProvider = (props: PiPProviderProps) => { closePipWindow() }) - // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all - // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window - ;[...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) + // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all + // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window + ;[...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',