feat: improve react plugin handling to support contexts

Author: AlemTuzlak

examples/react/basic/package.json

@@ -35,4 +35,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

examples/react/basic/src/setup.tsx

@@ -43,6 +43,7 @@ const indexRoute = createRoute({
 function About() {
   return <div className="p-2">Hello from About!</div>
 }
+
 const aboutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/about',
@@ -58,22 +59,20 @@ const queryClient = new QueryClient()
 export default function DevtoolsExample() {
   return (
     <>
-      <Devtools
-        plugins={[
-          {
-            name: 'Tanstack Query',
-            render: (
-              <QueryClientProvider client={queryClient}>
-                <ReactQueryDevtoolsPanel />
-              </QueryClientProvider>
-            ),
-          },
-          {
-            name: 'Tanstack Router',
-            render: <TanStackRouterDevtoolsPanel router={router} />,
-          },
-        ]}
-      />
+      <QueryClientProvider client={queryClient}>
+        <Devtools
+          plugins={[
+            {
+              name: 'Tanstack Query',
+              render: <ReactQueryDevtoolsPanel />,
+            },
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel router={router} />,
+            },
+          ]}
+        />
+      </QueryClientProvider>
     </>
   )
 }

examples/solid/basic/package.json

@@ -32,4 +32,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

packages/devtools/src/constants.ts

@@ -0,0 +1,2 @@
+export const PLUGIN_CONTAINER_ID = 'plugin-container'
+export const PLUGIN_TITLE_CONTAINER_ID = 'plugin-title-container'

packages/devtools/src/index.ts

@@ -1,3 +1,4 @@
 export { TanStackRouterDevtoolsCore } from './core'
 export type { DevtoolsOptions } from './core'
 export type { DevtoolsPlugin } from './context/devtools-context'
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './constants'

packages/devtools/src/tabs/plugins-tab.tsx

@@ -2,6 +2,7 @@ import { For, createEffect } from 'solid-js'
 import clsx from 'clsx'
 import { usePlugins } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
+import { PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID } from '../constants'
 
 export const PluginsTab = () => {
   const { plugins, activePlugin, setActivePlugin } = usePlugins()
@@ -36,13 +37,17 @@ export const PluginsTab = () => {
                   active: activePlugin() === plugin.id,
                 })}
               >
-                <h3 ref={pluginHeading} />
+                <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
               </div>
             )
           }}
         </For>
       </div>
-      <div ref={activePluginRef} class={styles().pluginsTabContent}></div>
+      <div
+        id={PLUGIN_CONTAINER_ID}
+        ref={activePluginRef}
+        class={styles().pluginsTabContent}
+      ></div>
     </div>
   )
 }

packages/react-devtools/src/devtools.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { TanStackRouterDevtoolsCore } from '@tanstack/devtools'
-import { createRoot } from 'react-dom/client'
+import {
+  TanStackRouterDevtoolsCore,
+  PLUGIN_CONTAINER_ID,
+  PLUGIN_TITLE_CONTAINER_ID,
+} from '@tanstack/devtools'
 import type { JSX } from 'react'
 import type { DevtoolsOptions, DevtoolsPlugin } from '@tanstack/devtools'
+import { createPortal } from 'react-dom'
 
 type Render = JSX.Element | (() => JSX.Element)
 type ReactPlugin = Omit<DevtoolsPlugin, 'render' | 'name'> & {
@@ -15,17 +19,18 @@ interface DevtoolsProps {
 }
 
 const convertRender = (
-  el: HTMLDivElement | HTMLHeadingElement,
   Component: Render,
+  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,
 ) => {
-  const domNode = document.createElement('div')
-  const root = createRoot(domNode)
-  root.render(typeof Component === 'function' ? <Component /> : Component)
-  el.appendChild(domNode)
+  setComponent(typeof Component === 'function' ? Component() : Component)
 }
 
 export const Devtools = ({ plugins, options }: DevtoolsProps) => {
   const devToolRef = useRef<HTMLDivElement>(null)
+  const [PluginComponent, setPluginComponent] = useState<JSX.Element | null>(
+    null,
+  )
+  const [TitleComponent, setTitleComponent] = useState<JSX.Element | null>(null)
   const [devtools] = useState(
     () =>
       new TanStackRouterDevtoolsCore({
@@ -37,8 +42,8 @@ export const Devtools = ({ plugins, options }: DevtoolsProps) => {
               typeof plugin.name === 'string'
                 ? plugin.name
                 : // The check above confirms that `plugin.name` is of Render type
-                  (el) => convertRender(el, plugin.name as Render),
-            render: (el: HTMLDivElement) => convertRender(el, plugin.render),
+                  () => convertRender(plugin.name as Render, setTitleComponent),
+            render: () => convertRender(plugin.render, setPluginComponent),
           }
         }),
       }),
@@ -52,6 +57,17 @@ export const Devtools = ({ plugins, options }: DevtoolsProps) => {
       devtools.unmount()
     }
   }, [devtools])
-
-  return <div ref={devToolRef} />
+  const pluginContainer = document.getElementById(PLUGIN_CONTAINER_ID)
+  const titleContainer = document.getElementById(PLUGIN_TITLE_CONTAINER_ID)
+  return (
+    <>
+      <div ref={devToolRef} />
+      {pluginContainer && PluginComponent
+        ? createPortal(<>{PluginComponent}</>, pluginContainer)
+        : null}
+      {titleContainer && TitleComponent
+        ? createPortal(<>{TitleComponent}</>, titleContainer)
+        : null}
+    </>
+  )
 }