feat: moving to the new TanStack devtools

Author: jherr

frameworks/react-cra/add-ons/store/assets/src/lib/demo-store-devtools.tsx

@@ -0,0 +1,64 @@
+import { EventClient } from '@tanstack/devtools-event-client'
+import { useState, useEffect } from 'react'
+
+import { store, fullName } from './demo-store'
+
+type EventMap = {
+  'store-devtools:state': {
+    firstName: string
+    lastName: string
+    fullName: string
+  }
+}
+
+class StoreDevtoolsEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'store-devtools',
+    })
+  }
+}
+
+const sdec = new StoreDevtoolsEventClient()
+
+store.subscribe(() => {
+  sdec.emit('state', {
+    firstName: store.state.firstName,
+    lastName: store.state.lastName,
+    fullName: fullName.state,
+  })
+})
+
+function DevtoolPanel() {
+  const [state, setState] = useState<EventMap['store-devtools:state']>(() => ({
+    firstName: store.state.firstName,
+    lastName: store.state.lastName,
+    fullName: fullName.state,
+  }))
+
+  useEffect(() => {
+    return sdec.on('state', (e) => setState(e.payload))
+  }, [])
+
+  return (
+    <div className="p-4 grid gap-4 grid-cols-[1fr_10fr]">
+      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+        First Name
+      </div>
+      <div className="text-sm">{state?.firstName}</div>
+      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+        Last Name
+      </div>
+      <div className="text-sm">{state?.lastName}</div>
+      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+        Full Name
+      </div>
+      <div className="text-sm">{state?.fullName}</div>
+    </div>
+  )
+}
+
+export default {
+  name: 'TanStack Store',
+  render: <DevtoolPanel />,
+}

frameworks/react-cra/add-ons/store/info.json

@@ -12,5 +12,12 @@
       "path": "src/routes/demo.store.tsx",
       "jsName": "StoreDemo"
     }
+  ],
+  "integrations": [
+    {
+      "type": "devtools",
+      "path": "src/lib/demo-store-devtools.tsx",
+      "jsName": "StoreDevtools"
+    }
   ]
 }

frameworks/react-cra/add-ons/store/package.json

@@ -2,5 +2,8 @@
   "dependencies": {
     "@tanstack/store": "^0.7.0",
     "@tanstack/react-store": "^0.7.0"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-event-client": "^0.2.1"
   }
 }

frameworks/react-cra/add-ons/tanstack-query/assets/src/integrations/tanstack-query/devtools.tsx

@@ -0,0 +1,6 @@
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+
+export default {
+  name: 'Tanstack Query',
+  render: <ReactQueryDevtoolsPanel />,
+}

frameworks/react-cra/add-ons/tanstack-query/assets/src/integrations/tanstack-query/layout.tsx

@@ -20,9 +20,9 @@
       "jsName": "TanStackQueryProvider"
     },
     {
-      "type": "layout",
-      "path": "src/integrations/tanstack-query/layout.tsx",
-      "jsName": "TanStackQueryLayout"
+      "type": "devtools",
+      "path": "src/integrations/tanstack-query/devtools.tsx",
+      "jsName": "TanStackQueryDevtools"
     }
   ]
 }

frameworks/react-cra/add-ons/tanstack-query/info.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "@tanstack/react-query": "^5.66.5",
-    "@tanstack/react-query-devtools": "^5.66.5"
+    "@tanstack/react-query-devtools": "^5.84.2"
   }
 }

frameworks/react-cra/add-ons/tanstack-query/package.json

@@ -10,8 +10,9 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@tanstack/react-devtools": "^0.2.2",
     "@tanstack/react-router": "^1.130.2",
-    "@tanstack/react-router-devtools": "^1.130.2",
+    "@tanstack/react-router-devtools": "^1.131.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

frameworks/react-cra/project/base/package.json

@@ -1,10 +1,11 @@
 <% if (!fileRouter) { ignoreFile() } %>import { <% if (addOnEnabled.start) { %>
   HeadContent<% } else { %>Outlet<% } %><% if (addOnEnabled.start) { %>, Scripts<% } %>, <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+import { TanstackDevtools } from '@tanstack/react-devtools'
 <% if (addOns.length) { %>
 import Header from '../components/Header'
-<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
-import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
+<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
+import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
 <% } %>
 <% if (addOnEnabled.start) { %>
 import appCss from '../styles.css?url'
@@ -53,7 +54,18 @@ export const Route = <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteW
   <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
   <% } %><% if (addOns.length) { %><Header />  
   <% } %><Outlet />
-      <TanStackRouterDevtools />
+        <TanstackDevtools
+        config={{
+          position: 'bottom-left',
+        }}
+        plugins={[
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel />,
+          },
+          <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
+        ]}
+      />
       <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
       <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
     <% } %>
@@ -72,7 +84,18 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
         <% } %><% if (addOns.length) { %><Header />  
         <% } %>{children}
-          <TanStackRouterDevtools />
+          <TanstackDevtools
+            config={{
+              position: 'bottom-left',
+            }}
+            plugins={[
+              {
+                name: 'Tanstack Router',
+                render: <TanStackRouterDevtoolsPanel />,
+              },
+              <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
+            ]}
+          />
           <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
           <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
         <% } %><Scripts />