Merge pull request 'Add tanstack devtools to UI' (#4446) from feat/tanstack-devstools into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4446

pkgs/clan-app/ui/package-lock.json

@@ -17,6 +17,7 @@
         "@solidjs/router": "^0.15.3",
         "@tanstack/eslint-plugin-query": "^5.51.12",
         "@tanstack/solid-query": "^5.76.0",
+        "@tanstack/solid-query-devtools": "^5.83.0",
         "solid-js": "^1.9.7",
         "solid-toast": "^0.5.0",
         "three": "^0.176.0",
@@ -53,7 +54,6 @@
         "postcss": "^8.4.38",
         "postcss-url": "^10.1.3",
         "prettier": "^3.2.5",
-        "solid-devtools": "^0.34.0",
         "storybook": "^9.0.8",
         "swagger-ui-dist": "^5.26.2",
         "tailwindcss": "^3.4.3",
@@ -360,22 +360,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
-      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.27.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
@@ -1552,13 +1536,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@nothing-but/utils": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@nothing-but/utils/-/utils-0.17.0.tgz",
-      "integrity": "sha512-TuCHcHLOqDL0SnaAxACfuRHBNRgNJcNn9X0GiH5H3YSDBVquCr3qEIG3FOQAuMyZCbu9w8nk2CHhOsn7IvhIwQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@oxc-resolver/binding-darwin-arm64": {
       "version": "11.5.0",
       "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-darwin-arm64/-/binding-darwin-arm64-11.5.0.tgz",
@@ -1813,64 +1790,6 @@
         "@sinonjs/commons": "^3.0.1"
       }
     },
-    "node_modules/@solid-devtools/debugger": {
-      "version": "0.28.1",
-      "resolved": "https://registry.npmjs.org/@solid-devtools/debugger/-/debugger-0.28.1.tgz",
-      "integrity": "sha512-6qIUI6VYkXoRnL8oF5bvh2KgH71qlJ18hNw/mwSyY6v48eb80ZR48/5PDXufUa3q+MBSuYa1uqTMwLewpay9eg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nothing-but/utils": "~0.17.0",
-        "@solid-devtools/shared": "^0.20.0",
-        "@solid-primitives/bounds": "^0.1.1",
-        "@solid-primitives/event-listener": "^2.4.1",
-        "@solid-primitives/keyboard": "^1.3.1",
-        "@solid-primitives/rootless": "^1.5.1",
-        "@solid-primitives/scheduled": "^1.5.1",
-        "@solid-primitives/static-store": "^0.1.1",
-        "@solid-primitives/utils": "^6.3.1"
-      },
-      "peerDependencies": {
-        "solid-js": "^1.9.0"
-      }
-    },
-    "node_modules/@solid-devtools/shared": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@solid-devtools/shared/-/shared-0.20.0.tgz",
-      "integrity": "sha512-o5TACmUOQsxpzpOKCjbQqGk8wL8PMi+frXG9WNu4Lh3PQVUB6hs95Kl/S8xc++zwcMguUKZJn8h5URUiMOca6Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nothing-but/utils": "~0.17.0",
-        "@solid-primitives/event-listener": "^2.4.1",
-        "@solid-primitives/media": "^2.3.1",
-        "@solid-primitives/refs": "^1.1.1",
-        "@solid-primitives/rootless": "^1.5.1",
-        "@solid-primitives/scheduled": "^1.5.1",
-        "@solid-primitives/static-store": "^0.1.1",
-        "@solid-primitives/styles": "^0.1.1",
-        "@solid-primitives/utils": "^6.3.1"
-      },
-      "peerDependencies": {
-        "solid-js": "^1.9.0"
-      }
-    },
-    "node_modules/@solid-primitives/bounds": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@solid-primitives/bounds/-/bounds-0.1.3.tgz",
-      "integrity": "sha512-UbiyKMdSPmtijcEDnYLQL3zzaejpwWDAJJ4Gt5P0hgVs6A72piov0GyNw7V2SroH7NZFwxlYS22YmOr8A5xc1Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@solid-primitives/event-listener": "^2.4.3",
-        "@solid-primitives/resize-observer": "^2.1.3",
-        "@solid-primitives/static-store": "^0.1.2",
-        "@solid-primitives/utils": "^6.3.2"
-      },
-      "peerDependencies": {
-        "solid-js": "^1.6.12"
-      }
-    },
     "node_modules/@solid-primitives/event-listener": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/@solid-primitives/event-listener/-/event-listener-2.4.3.tgz",
@@ -1883,21 +1802,6 @@
         "solid-js": "^1.6.12"
       }
     },
-    "node_modules/@solid-primitives/keyboard": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@solid-primitives/keyboard/-/keyboard-1.3.3.tgz",
-      "integrity": "sha512-9dQHTTgLBqyAI7aavtO+HnpTVJgWQA1ghBSrmLtMu1SMxLPDuLfuNr+Tk5udb4AL4Ojg7h9JrKOGEEDqsJXWJA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@solid-primitives/event-listener": "^2.4.3",
-        "@solid-primitives/rootless": "^1.5.2",
-        "@solid-primitives/utils": "^6.3.2"
-      },
-      "peerDependencies": {
-        "solid-js": "^1.6.12"
-      }
-    },
     "node_modules/@solid-primitives/keyed": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@solid-primitives/keyed/-/keyed-1.5.2.tgz",
@@ -1985,16 +1889,6 @@
         "solid-js": "^1.6.12"
       }
     },
-    "node_modules/@solid-primitives/scheduled": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@solid-primitives/scheduled/-/scheduled-1.5.2.tgz",
-      "integrity": "sha512-/j2igE0xyNaHhj6kMfcUQn5rAVSTLbAX+CDEBm25hSNBmNiHLu2lM7Usj2kJJ5j36D67bE8wR1hBNA8hjtvsQA==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "solid-js": "^1.6.12"
-      }
-    },
     "node_modules/@solid-primitives/static-store": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@solid-primitives/static-store/-/static-store-0.1.2.tgz",
@@ -2028,20 +1922,6 @@
         }
       }
     },
-    "node_modules/@solid-primitives/styles": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@solid-primitives/styles/-/styles-0.1.2.tgz",
-      "integrity": "sha512-7iX5K+J5b1PRrbgw3Ki92uvU2LgQ0Kd/QMsrAZxDg5dpUBwMyTijZkA3bbs1ikZsT1oQhS41bTyKbjrXeU0Awg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@solid-primitives/rootless": "^1.5.2",
-        "@solid-primitives/utils": "^6.3.2"
-      },
-      "peerDependencies": {
-        "solid-js": "^1.6.12"
-      }
-    },
     "node_modules/@solid-primitives/trigger": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@solid-primitives/trigger/-/trigger-1.2.2.tgz",
@@ -2281,9 +2161,19 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.81.5",
+      "version": "5.83.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.5.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.83.0.tgz",
-      "integrity": "sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q==",
+      "integrity": "sha512-0M8dA+amXUkyz5cVUm/B+zSk3xkQAcuXuz5/Q/LveT4ots2rBpPTZOzd7yJa2Utsf8D2Upl5KyjhHRY+9lB/XA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.81.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.81.2.tgz",
+      "integrity": "sha512-jCeJcDCwKfoyyBXjXe9+Lo8aTkavygHHsUHAlxQKKaDeyT0qyQNLKl7+UyqYH2dDF6UN/14873IPBHchcsU+Zg==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -2291,12 +2181,12 @@
       }
     },
     "node_modules/@tanstack/solid-query": {
-      "version": "5.81.5",
+      "version": "5.83.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/solid-query/-/solid-query-5.81.5.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/solid-query/-/solid-query-5.83.0.tgz",
-      "integrity": "sha512-VqVXaxiJIsKA6B45uApF+RUD3g8Roj/vdAuGpHMjR+RyHqlyQ+hOwgmALkzlbkbIaWCQi8CJOvrbU6WOBuMOxA==",
+      "integrity": "sha512-RF8Tv9+6+Kmzj+EafbTzvzzPq+J5SzHtc1Tz3D2MZ/EvlZTH+GL5q4HNnWK3emg7CB6WzyGnTuERmmWJaZs8/w==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.81.5"
+        "@tanstack/query-core": "5.83.0"
       },
       "funding": {
         "type": "github",
@@ -2306,6 +2196,23 @@
         "solid-js": "^1.6.0"
       }
     },
+    "node_modules/@tanstack/solid-query-devtools": {
+      "version": "5.83.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/solid-query-devtools/-/solid-query-devtools-5.83.0.tgz",
+      "integrity": "sha512-Z0wQlAWXz/U2bJ/paMRBTDhMoPnB9Te6GmA21sXnI+nDnAAPZRcPxFBiCgYJS3eFsvbkdRGJwoUSQrdIgy0shg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.81.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/solid-query": "^5.83.0",
+        "solid-js": "^1.6.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -6996,29 +6903,6 @@
         "url": "https://github.com/sponsors/cyyynthia"
       }
     },
-    "node_modules/solid-devtools": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/solid-devtools/-/solid-devtools-0.34.3.tgz",
-      "integrity": "sha512-ZQua959n+Zu3sLbm9g0IRjYUb1YYlYbu83PWLRoKbSsq0a3ItQNhnS2OBU7rQNmOKZiMexNo9Z3izas9BcOKDg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.27.4",
-        "@babel/plugin-syntax-typescript": "^7.27.1",
-        "@babel/types": "^7.27.6",
-        "@solid-devtools/debugger": "^0.28.1",
-        "@solid-devtools/shared": "^0.20.0"
-      },
-      "peerDependencies": {
-        "solid-js": "^1.9.0",
-        "vite": "^2.2.3 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
-      },
-      "peerDependenciesMeta": {
-        "vite": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/solid-js": {
       "version": "1.9.7",
       "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.7.tgz",

pkgs/clan-app/ui/package.json

@@ -52,7 +52,6 @@
     "postcss": "^8.4.38",
     "postcss-url": "^10.1.3",
     "prettier": "^3.2.5",
-    "solid-devtools": "^0.34.0",
     "storybook": "^9.0.8",
     "swagger-ui-dist": "^5.26.2",
     "tailwindcss": "^3.4.3",
@@ -73,6 +72,7 @@
     "@solidjs/router": "^0.15.3",
     "@tanstack/eslint-plugin-query": "^5.51.12",
     "@tanstack/solid-query": "^5.76.0",
+    "@tanstack/solid-query-devtools": "^5.83.0",
     "solid-js": "^1.9.7",
     "solid-toast": "^0.5.0",
     "three": "^0.176.0",

pkgs/clan-app/ui/src/index.tsx

@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
 import { Routes } from "@/src/routes";
 import { Router } from "@solidjs/router";
 import { Layout } from "@/src/routes/Layout";
+import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
 
 export const client = new QueryClient();
 
@@ -16,15 +17,11 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
     "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
   );
 }
-if (import.meta.env.DEV) {
-  console.log("Development mode");
-  // Load the debugger in development mode
-  await import("solid-devtools");
-}
 
 render(
   () => (
     <QueryClientProvider client={client}>
+      {import.meta.env.DEV && <SolidQueryDevtools />}
       <Router root={Layout}>{Routes}</Router>
     </QueryClientProvider>
   ),

pkgs/clan-app/ui/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from "vite";
 import solidPlugin from "vite-plugin-solid";
 import solidSvg from "vite-plugin-solid-svg";
-import devtools from "solid-devtools/vite";
 import path from "node:path";
 import { exec } from "child_process";
 
@@ -38,7 +37,6 @@ export default defineConfig({
     Uncomment the following line to enable solid-devtools.
     For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
     */
-    devtools(),
     solidPlugin(),
     solidSvg(),
     regenPythonApiOnFileChange(),