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 diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html index 1c96ec87..c9e7b118 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..36652105 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) }, }