feat(devtools): clean up imports and enhance component structure in setup

Author: abedshaaban

examples/react/basic/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@tanstack/devtools-client": "0.0.6",
     "@tanstack/devtools-event-client": "0.4.3",
-    "@tanstack/devtools-seo": "workspace:*",
     "@tanstack/react-devtools": "^0.10.1",
     "@tanstack/react-form": "^1.23.7",
     "@tanstack/react-query": "^5.90.1",
@@ -23,7 +22,6 @@
     "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@tanstack/devtools-a11y": "workspace:^",
     "@tanstack/devtools-ui": "0.5.1",
     "@tanstack/devtools-vite": "0.6.0",
     "@tanstack/react-form-devtools": "^0.1.7",

examples/react/basic/src/setup.tsx

@@ -1,11 +1,19 @@
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
-import { Link, Outlet, RouterProvider, createRootRoute, createRoute, createRouter } from '@tanstack/react-router';
-import { TanStackDevtools } from '@tanstack/react-devtools';
-import { PackageJsonPanel } from './package-json-panel';
-import { createA11yPlugin } from "@tanstack/devtools-a11y";
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { PackageJsonPanel } from './package-json-panel'
+
 const rootRoute = createRootRoute({
-  component: () => <>
+  component: () => (
+    <>
       <div className="p-2 flex gap-2">
         <Link to="/" className="[&.active]:font-bold">
           Home
@@ -17,52 +25,67 @@ const rootRoute = createRootRoute({
       <hr />
       <Outlet />
     </>
-});
+  ),
+})
+
 const indexRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/',
   component: function Index() {
-    return <div className="p-2">
+    return (
+      <div className="p-2">
         <h3>Welcome Home!</h3>
-      </div>;
-  }
-});
+      </div>
+    )
+  },
+})
+
 function About() {
-  return <div className="p-2">
+  return (
+    <div className="p-2">
       <h3>Hello from About!</h3>
-    </div>;
+    </div>
+  )
 }
+
 const aboutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/about',
-  component: About
-});
-const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
+  component: About,
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
 const router = createRouter({
-  routeTree
-});
-export default function DevtoolsExample() {
-  return <>
-      <TanStackDevtools eventBusConfig={{
-      connectToServerBus: true
-    }} plugins={[{
-      name: 'TanStack Query',
-      render: <ReactQueryDevtoolsPanel />
-    }, {
-      name: 'TanStack Router',
-      render: <TanStackRouterDevtoolsPanel router={router} />
-    }, {
-      name: 'TanStack Router',
-      render: <TanStackRouterDevtoolsPanel router={router} />
-    }, {
-      name: 'Package.json',
-      render: () => <PackageJsonPanel />
-    }
+  routeTree,
+})
 
-    /* {
-    name: "The actual app",
-    render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
-    } */, createA11yPlugin()]} />
+export default function DevtoolsExample() {
+  return (
+    <>
+      <TanStackDevtools
+        eventBusConfig={{
+          connectToServerBus: true,
+        }}
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+          {
+            name: 'Package.json',
+            render: () => <PackageJsonPanel />,
+          },
+        ]}
+      />
       <RouterProvider router={router} />
-    </>;
-}
+    </>
+  )
+}