experimental

Author: fehmer

frontend/package.json

@@ -31,6 +31,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",
@@ -104,6 +105,7 @@
     "oxlint-tsgolint": "0.14.2",
     "postcss": "8.5.6",
     "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,6 +1,19 @@
+import { attachDevtoolsOverlay } from "@solid-devtools/overlay";
 import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
+//enable solidjs-devtools
+import "solid-devtools/setup";
 import { JSXElement } from "solid-js";
 
 export function DevTools(): JSXElement {
-  return <SolidQueryDevtools />;
+  return (
+    <>
+      <h2>Dev tools active</h2>
+      <SolidQueryDevtools />
+    </>
+  );
 }
+
+attachDevtoolsOverlay({
+  defaultOpen: true, // or alwaysOpen
+  noPadding: true,
+});

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

@@ -507,7 +507,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

@@ -27,6 +27,7 @@ import { sentryVitePlugin } from "@sentry/vite-plugin";
 import replace from "vite-plugin-filter-replace";
 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 {
@@ -111,7 +112,11 @@ function getPlugins({
     }),
     injectHTML() as PluginOption,
     tailwindcss(),
+
     solidPlugin(),
+    devtools({
+      autoname: true,
+    }),
   ];
 
   const devPlugins: PluginOption[] = [Inspect()];