chore: add solid dev tools (@fehmer) (monkeytypegame#7660)

Author: fehmer

frontend/package.json

@@ -32,6 +32,7 @@
     "@monkeytype/util": "workspace:*",
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
+    "@solid-devtools/overlay": "0.33.5",
     "@solid-primitives/refs": "1.1.2",
     "@solid-primitives/transition-group": "1.1.2",
     "@solidjs/meta": "0.29.4",
@@ -106,6 +107,7 @@
     "oxlint-tsgolint": "0.14.2",
     "postcss": "8.5.8",
     "sass": "1.70.0",
+    "solid-devtools": "0.34.5",
     "solid-js": "1.9.10",
     "subset-font": "2.3.0",
     "tailwindcss": "4.1.18",

frontend/src/ts/components/core/DevTools.tsx

@@ -1,4 +1,4 @@
-import { type JSXElement, lazy, Suspense } from "solid-js";
+import { JSXElement, lazy, onMount, Suspense } from "solid-js";
 
 let DevComponents: (() => JSXElement) | undefined;
 
@@ -13,10 +13,27 @@ if (import.meta.env.DEV) {
       default: m.DevOptionsModal,
     })),
   );
+
+  const LazySolidDevtoolsOverlay = lazy(async () =>
+    import("@solid-devtools/overlay").then((m) => ({
+      default: () => {
+        onMount(() => {
+          m.attachDevtoolsOverlay({
+            defaultOpen: true,
+            noPadding: true,
+          });
+        });
+
+        return null;
+      },
+    })),
+  );
+
   DevComponents = () => (
     <Suspense>
       <LazyQueryDevtools />
       <LazyDevOptionsModal />
+      <LazySolidDevtoolsOverlay />
     </Suspense>
   );
 }

frontend/src/ts/index.ts

@@ -1,3 +1,6 @@
+//enable solidjs-devtools
+import "solid-devtools";
+
 import "./event-handlers/global";
 import "./event-handlers/keymap";
 import "./event-handlers/test";

frontend/src/ts/pages/account.ts

@@ -544,7 +544,7 @@ async function fillContent(): Promise<void> {
         histogramChartData.push(0);
       }
     }
-    (histogramChartData[bucket] as number)++;
+    (histogramChartData[bucket] as number) += 1;
 
     let tt = 0;
     if (

frontend/src/ts/test/funbox/funbox-functions.ts

@@ -83,7 +83,7 @@ class CharDistribution {
   public addChar(char: string): void {
     this.count++;
     if (char in this.chars) {
-      (this.chars[char] as number)++;
+      (this.chars[char] as number) += 1;
     } else {
       this.chars[char] = 1;
     }

frontend/src/ts/test/test-input.ts

@@ -511,7 +511,7 @@ export function pushMissedWord(word: string): void {
   if (!Object.keys(missedWords).includes(word)) {
     missedWords[word] = 1;
   } else {
-    (missedWords[word] as number)++;
+    (missedWords[word] as number) += 1;
   }
 }
 

frontend/src/ts/utils/search-service.ts

@@ -98,7 +98,7 @@ export const buildSearchService = <T>(
         internalDocument.termFrequencies[stemmedToken] = 0;
       }
 
-      (internalDocument.termFrequencies[stemmedToken] as number)++;
+      (internalDocument.termFrequencies[stemmedToken] as number) += 1;
       maxTermFrequency = Math.max(
         maxTermFrequency,
         internalDocument.termFrequencies[stemmedToken] as number,

frontend/vite.config.ts

@@ -26,6 +26,7 @@ import { VitePWA } from "vite-plugin-pwa";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { KnownFontName } from "@monkeytype/schemas/fonts";
 import solidPlugin from "vite-plugin-solid";
+import devtools from "solid-devtools/vite";
 import tailwindcss from "@tailwindcss/vite";
 
 function getFontsConfig(): string {
@@ -105,7 +106,11 @@ function getPlugins({
     languageHashes({ skip: isDevelopment }),
     injectHTML() as PluginOption,
     tailwindcss(),
+
     solidPlugin(),
+    devtools({
+      autoname: true,
+    }),
   ];
 
   const devPlugins: PluginOption[] = [