chore: add devtools to with-tanstack-router example (#1848)

solidjs · Mar 8, 2025 · 28e3fc5 · 28e3fc5
1 parent a696b99
commit 28e3fc5
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 8 deletions.
diff --git a/examples/pnpm-lock.yaml b/examples/pnpm-lock.yaml
diff --git a/examples/with-tanstack-router/package.json b/examples/with-tanstack-router/package.json
@@ -8,7 +8,8 @@
     "version": "vinxi version"
   },
   "dependencies": {
-    "@tanstack/solid-router": "^1.112.2",
+    "@tanstack/solid-router": "^1.114.1",
+    "@tanstack/solid-router-devtools": "^1.114.1",
     "@tanstack/router-plugin": "^1.112.0",
     "@solidjs/start": "^1.1.2",
     "solid-js": "^1.9.5",

diff --git a/examples/with-tanstack-router/src/components/Devtools.tsx b/examples/with-tanstack-router/src/components/Devtools.tsx
@@ -0,0 +1,4 @@
+
+import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
+export default TanStackRouterDevtools;
+
diff --git a/examples/with-tanstack-router/src/routes/__root.tsx b/examples/with-tanstack-router/src/routes/__root.tsx
@@ -1,6 +1,11 @@
 import { Link, Outlet, createRootRoute } from "@tanstack/solid-router";
+
+import { clientOnly } from "@solidjs/start";
 import { Suspense } from "solid-js";
 
+
+const Devtools = clientOnly(() => import("../components/Devtools"));
+
 export const Route = createRootRoute({
   component: RootComponent
 });
@@ -12,6 +17,7 @@ function RootComponent() {
       <Link to="/about">About</Link>
       <Suspense>
         <Outlet />
+        <Devtools />
       </Suspense>
     </>
   );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@

		import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
		export default TanStackRouterDevtools;