From 2117752e171cdb9d662f693205dee95b27bcd818 Mon Sep 17 00:00:00 2001 From: Jacob Kelley Date: Thu, 25 Sep 2025 21:18:24 +0000 Subject: [PATCH 1/3] feat: render devtools in a shadow node --- examples/react/basic/index.html | 12 ++++++++++++ packages/devtools/src/devtools.tsx | 23 ++++++++++++++++++++++- packages/react-devtools/src/devtools.tsx | 13 ++++--------- 3 files changed, 38 insertions(+), 10 deletions(-) diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html index 1c96ec87..e705bcea 100644 --- a/examples/react/basic/index.html +++ b/examples/react/basic/index.html @@ -31,6 +31,18 @@ A basic example of using TanStack Devtools with React. + + + diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx index 2ec3ee5d..30585941 100644 --- a/packages/devtools/src/devtools.tsx +++ b/packages/devtools/src/devtools.tsx @@ -188,9 +188,30 @@ export default function DevTools() { }) const { theme } = useTheme() + const [gooberCss, setGooberCss] = createSignal(""); + createEffect(() => { + // Setup mutation observer for goober styles with id `_goober + const gooberStyles = document.querySelector('#_goober') + if (gooberStyles) { + setGooberCss(gooberStyles.textContent) + const observer = new MutationObserver(() => { + setGooberCss(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() + }) + } + }) + return ( - + +
{ const id = e.getAttribute('id')! - const target = e.ownerDocument.getElementById(id) - - if (target) { - setPluginContainers((prev) => ({ - ...prev, - [id]: e, - })) - } - + setPluginContainers((prev) => ({ + ...prev, + [id]: e, + })) convertRender(plugin.render, setPluginComponents, e, theme) }, } From b0e037a0fd94078878a1ffbfd44ccc9b918115cf Mon Sep 17 00:00:00 2001 From: Jacob Kelley Date: Fri, 26 Sep 2025 16:06:32 +0000 Subject: [PATCH 2/3] fix: add changeset --- .changeset/chubby-towns-eat.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/chubby-towns-eat.md diff --git a/.changeset/chubby-towns-eat.md b/.changeset/chubby-towns-eat.md new file mode 100644 index 00000000..7de02839 --- /dev/null +++ b/.changeset/chubby-towns-eat.md @@ -0,0 +1,6 @@ +--- +'@tanstack/react-devtools': minor +'@tanstack/devtools': minor +--- + +Renders the devtools in a shadow DOM node From 4b3b4560369588b79db519932ad75af9c6502b1e Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 26 Sep 2025 16:08:12 +0000 Subject: [PATCH 3/3] ci: apply automated fixes --- examples/react/basic/index.html | 2 +- packages/devtools/src/devtools.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html index e705bcea..c9e7b118 100644 --- a/examples/react/basic/index.html +++ b/examples/react/basic/index.html @@ -39,7 +39,7 @@ no visible effect. --> diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx index 30585941..36652105 100644 --- a/packages/devtools/src/devtools.tsx +++ b/packages/devtools/src/devtools.tsx @@ -188,7 +188,7 @@ export default function DevTools() { }) const { theme } = useTheme() - const [gooberCss, setGooberCss] = createSignal(""); + const [gooberCss, setGooberCss] = createSignal('') createEffect(() => { // Setup mutation observer for goober styles with id `_goober const gooberStyles = document.querySelector('#_goober') @@ -196,7 +196,7 @@ export default function DevTools() { setGooberCss(gooberStyles.textContent) const observer = new MutationObserver(() => { setGooberCss(gooberStyles.textContent) - }) + }) observer.observe(gooberStyles, { childList: true, // observe direct children subtree: true, // and lower descendants too