Merge pull request #3 from TanStack/feat/make-react-api-better

AlemTuzlak · web-flow · commit b156e6e6b2b0 · 2025-07-30T21:08:39.000+02:00
feat: make the plugin API better for react/solid
diff --git a/examples/react/basic/src/setup.tsx b/examples/react/basic/src/setup.tsx
@@ -10,7 +10,6 @@ import {
 } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Devtools } from '@tanstack/react-devtools'
-import { createRoot } from 'react-dom/client'
 
 const rootRoute = createRootRoute({
   component: () => (
@@ -41,13 +40,13 @@ const indexRoute = createRoute({
     )
   },
 })
-
+function About() {
+  return <div className="p-2">Hello from About!</div>
+}
 const aboutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/about',
-  component: function About() {
-    return <div className="p-2">Hello from About!</div>
-  },
+  component: About,
 })
 
 const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
@@ -62,22 +61,16 @@ export default function DevtoolsExample() {
       <Devtools
         plugins={[
           {
-            id: 'query',
             name: 'Tanstack Query',
-            render: (el) =>
-              createRoot(el).render(
-                <QueryClientProvider client={queryClient}>
-                  <ReactQueryDevtoolsPanel />
-                </QueryClientProvider>,
-              ),
+            render: (
+              <QueryClientProvider client={queryClient}>
+                <ReactQueryDevtoolsPanel />
+              </QueryClientProvider>
+            ),
           },
           {
-            id: 'router',
             name: 'Tanstack Router',
-            render: (el) =>
-              createRoot(el).render(
-                <TanStackRouterDevtoolsPanel router={router} />,
-              ),
+            render: <TanStackRouterDevtoolsPanel router={router} />,
           },
         ]}
       />
diff --git a/examples/solid/basic/src/setup.tsx b/examples/solid/basic/src/setup.tsx
@@ -9,8 +9,6 @@ import {
 } from '@tanstack/solid-router'
 import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
 import { Devtools } from '@tanstack/solid-devtools'
-import { Portal } from 'solid-js/web'
-
 const rootRoute = createRootRoute({
   component: () => (
     <>
@@ -33,13 +31,13 @@ const indexRoute = createRoute({
     )
   },
 })
-
+function About() {
+  return <div class="p-2">Hello from About!</div>
+}
 const aboutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/about',
-  component: function About() {
-    return <div class="p-2">Hello from About!</div>
-  },
+  component: About,
 })
 
 const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
@@ -54,25 +52,16 @@ export default function DevtoolsExample() {
       <Devtools
         plugins={[
           {
-            id: 'query',
             name: 'Tanstack Query',
-            render: (el) => (
-              <Portal mount={el}>
-                {' '}
-                <QueryClientProvider client={queryClient}>
-                  <SolidQueryDevtools />
-                </QueryClientProvider>{' '}
-              </Portal>
+            render: (
+              <QueryClientProvider client={queryClient}>
+                <SolidQueryDevtools />
+              </QueryClientProvider>
             ),
           },
           {
-            id: 'router',
             name: 'Tanstack Router',
-            render: (el) => (
-              <Portal mount={el}>
-                <TanStackRouterDevtoolsPanel router={router} />
-              </Portal>
-            ),
+            render: <TanStackRouterDevtoolsPanel router={router} />,
           },
         ]}
       />
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
@@ -14,10 +14,9 @@ import type { JSX } from 'solid-js/jsx-runtime'
 
 export interface DevtoolsPlugin {
   name: string | ((el: HTMLHeadingElement) => void)
-  id: string
+  id?: string
   render: (el: HTMLDivElement) => void
 }
-
 export const DevtoolsContext = createContext<{
   store: DevtoolsStore
   setStore: Setter<DevtoolsStore>
@@ -37,6 +36,19 @@ const getSettings = () => {
   }
 }
 
+const generatePluginId = (plugin: DevtoolsPlugin, index: number) => {
+  // if set by user, return the plugin id
+  if (plugin.id) {
+    return plugin.id
+  }
+  if (typeof plugin.name === 'string') {
+    // if name is a string, use it to generate an id
+    return plugin.name.toLowerCase().replace(' ', '-')
+  }
+  // Name is JSX? return the index as a string
+  return index.toString()
+}
+
 const getExistingStateFromStorage = (
   config?: DevtoolsSettings,
   plugins?: Array<DevtoolsPlugin>,
@@ -46,7 +58,14 @@ const getExistingStateFromStorage = (
 
   const state: DevtoolsStore = {
     ...initialState,
-    plugins: plugins || [],
+    plugins:
+      plugins?.map((plugin, i) => {
+        const id = generatePluginId(plugin, i)
+        return {
+          ...plugin,
+          id,
+        }
+      }) || [],
     state: {
       ...initialState.state,
       ...(existingState ? JSON.parse(existingState) : {}),
diff --git a/packages/devtools/src/context/devtools-store.ts b/packages/devtools/src/context/devtools-store.ts
@@ -54,7 +54,7 @@ export type DevtoolsStore = {
   state: {
     activeTab: TabName
     height: number
-    activePlugin?: DevtoolsPlugin | undefined
+    activePlugin?: string | undefined
     persistOpen: boolean
   }
   plugins?: Array<DevtoolsPlugin>
diff --git a/packages/devtools/src/context/use-devtools-context.ts b/packages/devtools/src/context/use-devtools-context.ts
@@ -1,6 +1,5 @@
 import { createMemo, useContext } from 'solid-js'
 import { DevtoolsContext } from './devtools-context.jsx'
-import type { DevtoolsPlugin } from './devtools-context.jsx'
 /* import type { DevtoolsPlugin } from './devtools-context' */
 import type { DevtoolsStore } from './devtools-store.js'
 
@@ -24,12 +23,12 @@ export const usePlugins = () => {
   const plugins = createMemo(() => store.plugins)
   const activePlugin = createMemo(() => store.state.activePlugin)
 
-  const setActivePlugin = (plugin: DevtoolsPlugin) => {
+  const setActivePlugin = (pluginId: string) => {
     setStore((prev) => ({
       ...prev,
       state: {
         ...prev.state,
-        activePlugin: plugin,
+        activePlugin: pluginId,
       },
     }))
   }
diff --git a/packages/devtools/src/tabs/plugins-tab.tsx b/packages/devtools/src/tabs/plugins-tab.tsx
@@ -6,9 +6,10 @@ import { useStyles } from '../styles/use-styles'
 export const PluginsTab = () => {
   const { plugins, activePlugin, setActivePlugin } = usePlugins()
   let activePluginRef: HTMLDivElement | undefined
+
   createEffect(() => {
     const currentActivePlugin = plugins()?.find(
-      (plugin) => plugin.id === activePlugin()?.id,
+      (plugin) => plugin.id === activePlugin(),
     )
     if (activePluginRef && currentActivePlugin) {
       currentActivePlugin.render(activePluginRef)
@@ -30,9 +31,9 @@ export const PluginsTab = () => {
             })
             return (
               <div
-                onClick={() => setActivePlugin(plugin)}
+                onClick={() => setActivePlugin(plugin.id!)}
                 class={clsx(styles().pluginName, {
-                  active: activePlugin()?.id === plugin.id,
+                  active: activePlugin() === plugin.id,
                 })}
               >
                 <h3 ref={pluginHeading} />
diff --git a/packages/react-devtools/src/devtools.tsx b/packages/react-devtools/src/devtools.tsx
@@ -1,10 +1,48 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { TanStackRouterDevtoolsCore } from '@tanstack/devtools'
-import type { DevtoolsOptions } from '@tanstack/devtools'
+import { createRoot } from 'react-dom/client'
+import type { JSX } from 'react'
+import type { DevtoolsOptions, DevtoolsPlugin } from '@tanstack/devtools'
 
-export const Devtools = (opts: DevtoolsOptions) => {
+type Render = JSX.Element | (() => JSX.Element)
+type ReactPlugin = Omit<DevtoolsPlugin, 'render' | 'name'> & {
+  render: Render
+  name: string | Render
+}
+interface DevtoolsProps {
+  plugins?: Array<ReactPlugin>
+  options?: DevtoolsOptions['options']
+}
+
+const convertRender = (
+  el: HTMLDivElement | HTMLHeadingElement,
+  Component: Render,
+) => {
+  const domNode = document.createElement('div')
+  const root = createRoot(domNode)
+  root.render(typeof Component === 'function' ? <Component /> : Component)
+  el.appendChild(domNode)
+}
+
+export const Devtools = ({ plugins, options }: DevtoolsProps) => {
   const devToolRef = useRef<HTMLDivElement>(null)
-  const [devtools] = useState(() => new TanStackRouterDevtoolsCore(opts))
+  const [devtools] = useState(
+    () =>
+      new TanStackRouterDevtoolsCore({
+        options,
+        plugins: plugins?.map((plugin) => {
+          return {
+            ...plugin,
+            name:
+              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),
+          }
+        }),
+      }),
+  )
   useEffect(() => {
     if (devToolRef.current) {
       devtools.mount(devToolRef.current)
diff --git a/packages/solid-devtools/src/devtools.tsx b/packages/solid-devtools/src/devtools.tsx
@@ -1,12 +1,46 @@
 import { TanStackRouterDevtoolsCore } from '@tanstack/devtools'
 import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
-import type { DevtoolsOptions } from '@tanstack/devtools'
+import { Portal } from 'solid-js/web'
+import type { JSX } from 'solid-js'
+import type { DevtoolsOptions, DevtoolsPlugin } from '@tanstack/devtools'
 
-export const Devtools = (opts: DevtoolsOptions) => {
-  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(opts))
+type Render = JSX.Element | (() => JSX.Element)
+const convertRender = (
+  el: HTMLDivElement | HTMLHeadingElement,
+  Component: Render,
+) => (
+  <Portal mount={el}>
+    {typeof Component === 'function' ? <Component /> : Component}
+  </Portal>
+)
+
+type SolidPlugin = Omit<DevtoolsPlugin, 'render' | 'name'> & {
+  render: Render
+  name: string | Render
+}
+interface DevtoolsProps {
+  plugins?: Array<SolidPlugin>
+  options?: DevtoolsOptions['options']
+}
+
+export const Devtools = ({ options, plugins }: DevtoolsProps) => {
+  const [devtools] = createSignal(
+    new TanStackRouterDevtoolsCore({
+      options,
+      plugins: plugins?.map((plugin) => ({
+        ...plugin,
+        name:
+          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),
+      })),
+    }),
+  )
   let devToolRef: HTMLDivElement | undefined
   createEffect(() => {
-    devtools().setOptions(opts)
+    devtools().setOptions({ options })
   })
   onMount(() => {
     if (devToolRef) {

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ export type DevtoolsStore = {`
`54`	`54`	`state: {`
`55`	`55`	`activeTab: TabName`
`56`	`56`	`height: number`
`57`		`- activePlugin?: DevtoolsPlugin \| undefined`
	`57`	`+ activePlugin?: string \| undefined`
`58`	`58`	`persistOpen: boolean`
`59`	`59`	`}`
`60`	`60`	`plugins?: Array<DevtoolsPlugin>`