Merge pull request #344 from flatironinstitute/update-eslint

WardBrian · web-flow · commit 5e744a033757 · 2026-02-13T13:54:37.000-05:00
Update eslint config, check in CI
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -29,6 +29,8 @@ jobs:
           cache-dependency-path: gui/yarn.lock
       - name: Install dependencies
         run: cd gui; yarn
+      - name: Lint
+        run: cd gui; yarn format --check && yarn lint
       - name: Test
         run: cd gui; yarn test
       - name: Upload coverage reports to Codecov
diff --git a/gui/.eslintrc.cjs b/gui/.eslintrc.cjs
diff --git a/gui/eslint.config.js b/gui/eslint.config.js
@@ -0,0 +1,46 @@
+import js from "@eslint/js";
+import globals from "globals";
+
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: { js },
+    extends: ["js/recommended"],
+    languageOptions: { globals: globals.browser },
+  },
+  tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  pluginReact.configs.flat["jsx-runtime"],
+  reactHooks.configs.flat.recommended,
+  {
+    settings: {
+      react: {
+        version: "19",
+      },
+    },
+  },
+  {
+    rules: {
+      "react-hooks/set-state-in-effect": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+]);
diff --git a/gui/package.json b/gui/package.json
@@ -14,7 +14,7 @@
     "dev": "vite --port 3000",
     "build": "tsc && vite build",
     "format": "prettier --write .",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint src/",
     "preview": "vite preview",
     "test": "vitest run",
     "test-watch": "vitest"
@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@codecov/vite-plugin": "^1.9.0",
+    "@eslint/js": "^10.0.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^20.12.11",
@@ -56,14 +57,15 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.0.7",
     "@vitest/web-worker": "^3.0.7",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint": "^10.0.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^17.3.0",
     "jsdom": "^26.1.0",
     "monaco-editor": "^0.52.2",
     "prettier": "^3.3.2",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.55.0",
     "vite": "^6.4.1",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.7"
diff --git a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/AnalysisArea/useAnalysisState.ts b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/AnalysisArea/useAnalysisState.ts
@@ -41,32 +41,17 @@ const useAnalysisState = (samplerState: SamplerState) => {
   }, [samplerStatus, draws, numChains, paramNames]);
 
   const [status, setStatus] = useState<InterpreterStatus>("idle");
-
-  const [runnable, setRunnable] = useState<boolean>(true);
-  const [notRunnableReason, setNotRunnableReason] = useState<string>("");
-
   const isDataDefined = useMemo(() => spData !== undefined, [spData]);
+  const runnable = isDataDefined && !isInterpreterBusy(status);
+  const notRunnableReason = !isDataDefined ? "Run sampler first." : "";
 
   const files = useMemo(() => {
     if (samplingOpts?.data === undefined) {
       return undefined;
     } else {
       return [encodeTextFile(FileNames.DATAFILE, samplingOpts.data)];
     }
-  }, [samplingOpts?.data]);
-
-  useEffect(() => {
-    if (!isDataDefined) {
-      setRunnable(false);
-      setNotRunnableReason("Run sampler first.");
-    } else if (isInterpreterBusy(status)) {
-      setRunnable(false);
-      setNotRunnableReason("");
-    } else {
-      setRunnable(true);
-      setNotRunnableReason("");
-    }
-  }, [isDataDefined, status]);
+  }, [samplingOpts]);
 
   return {
     consoleRef,
diff --git a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/ScatterPlotsPanel.tsx b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/ScatterPlotsPanel.tsx
@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type FunctionComponent,
-} from "react";
+import { useCallback, useMemo, useState, type FunctionComponent } from "react";
 
 import type { StanDraw } from "../SamplerOutputArea";
 
@@ -83,10 +77,7 @@ const VariableSelection: FunctionComponent<SelectionProps> = ({
     [hitLimit, value],
   );
 
-  const [showCheckbox, setShowCheckbox] = useState(false);
-  useEffect(() => {
-    setShowCheckbox(value.length === 3);
-  }, [value.length]);
+  const showCheckbox = value.length === 3;
 
   return (
     <Stack
diff --git a/gui/src/app/areas/ControlArea/SamplingArea/RunArea/CompileButton.tsx b/gui/src/app/areas/ControlArea/SamplingArea/RunArea/CompileButton.tsx
@@ -7,11 +7,7 @@ import Tooltip from "@mui/material/Tooltip";
 import { CompileContext } from "@SpCore/Compilation/CompileContextProvider";
 import { ProjectContext } from "@SpCore/Project/ProjectContextProvider";
 
-type CompileButtonProps = {
-  // No props
-};
-
-const CompileButton: FunctionComponent<CompileButtonProps> = () => {
+const CompileButton: FunctionComponent = () => {
   const { data: projectData } = use(ProjectContext);
 
   const { compile, compileStatus, validSyntax, isConnected } =
diff --git a/gui/src/app/areas/ControlArea/SamplingArea/RunArea/SamplingOptsPanel.tsx b/gui/src/app/areas/ControlArea/SamplingArea/RunArea/SamplingOptsPanel.tsx
@@ -36,9 +36,10 @@ const SamplingOptsPanel: FunctionComponent<SamplingOptsPanelProps> = ({
 }) => {
   const readOnly = !setSamplingOpts;
 
-  const handleReset = useCallback(() => {
-    setSamplingOpts && setSamplingOpts(defaultSamplingOpts);
-  }, [setSamplingOpts]);
+  const handleReset = useCallback(
+    () => setSamplingOpts && setSamplingOpts(defaultSamplingOpts),
+    [setSamplingOpts],
+  );
 
   return (
     <Stack direction={direction} spacing={1}>
diff --git a/gui/src/app/components/TabWidget.tsx b/gui/src/app/components/TabWidget.tsx
@@ -19,6 +19,9 @@ const TabWidget: FunctionComponent<TabWidgetProps> = ({
   }
 
   const [index, setIndex] = useState(forcedSelection ?? 0);
+  const [tabsThatHaveBeenViewed, setTabsThatHaveBeenViewed] = useState<
+    number[]
+  >([index]);
 
   useEffect(() => {
     if (forcedSelection !== undefined) {
@@ -32,10 +35,6 @@ const TabWidget: FunctionComponent<TabWidgetProps> = ({
     }
   }, [forcedSelection]);
 
-  const [tabsThatHaveBeenViewed, setTabsThatHaveBeenViewed] = useState<
-    number[]
-  >([index]);
-
   const handleChange = (_: React.SyntheticEvent, newValue: number) => {
     setTabsThatHaveBeenViewed((prev) => {
       if (!prev.includes(newValue)) {
diff --git a/gui/src/app/core/Compilation/CompileContextProvider.tsx b/gui/src/app/core/Compilation/CompileContextProvider.tsx
@@ -43,10 +43,6 @@ export const CompileContext = createContext<CompileContextType>({
   retryConnection: () => {},
 });
 
-type CompileContextProviderProps = {
-  // none
-};
-
 const useIsConnected = (stanWasmServerUrl: string) => {
   const probeUrl = `${stanWasmServerUrl}/probe`;
   const [isConnected, setIsConnected] = useState<boolean>(false);
@@ -67,7 +63,7 @@ const useIsConnected = (stanWasmServerUrl: string) => {
         if (response.status === 200) {
           setIsConnected(true);
         }
-      } catch (err) {
+      } catch {
         setIsConnected(false);
       }
     })();
@@ -98,9 +94,9 @@ const showOneTimeMessage = (url: string) => {
   return false;
 };
 
-const CompileContextProvider: FunctionComponent<
-  PropsWithChildren<CompileContextProviderProps>
-> = ({ children }) => {
+const CompileContextProvider: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
   const { data } = use(ProjectContext);
   const [compileStatus, setCompileStatus] = useState<CompileStatus>("");
   const [
diff --git a/gui/src/app/core/StanSampler/StanSampler.ts b/gui/src/app/core/StanSampler/StanSampler.ts
@@ -33,7 +33,7 @@ class StanSampler {
     const sampler = new StanSampler(compiledUrl, update);
     const cleanup = () => {
       console.log("terminating model worker");
-      sampler.#stanWorker && sampler.#stanWorker.terminate();
+      if (sampler.#stanWorker) sampler.#stanWorker.terminate();
       sampler.#stanWorker = undefined;
     };
     return { sampler, cleanup };
diff --git a/gui/src/app/core/Stanc/useStanc.ts b/gui/src/app/core/Stanc/useStanc.ts
@@ -32,38 +32,36 @@ const useStanc = (
     [stancWorker],
   );
 
-  // worker creation
-  useEffect(() => {
-    const worker = new Worker(stancWorkerURL, {
-      name: "stancWorker",
-      type: "module",
-    });
-    setStancWorker(worker);
-    return () => {
-      console.log("terminating stanc worker");
-      worker.terminate();
-    };
-  }, []);
-
-  // message handling
-  useEffect(() => {
-    if (!stancWorker) return;
-
-    stancWorker.onmessage = (e: MessageEvent<StancReplyMessage>) => {
+  const onMessage = useCallback(
+    (e: MessageEvent<StancReplyMessage>) => {
       if ("fatal" in e.data) {
         // only returned if stanc.js failed to load
         console.error(e.data.fatal);
         return;
       }
-
       const { result, warnings, errors } = e.data;
       setStancErrors({ warnings, errors });
       if (result) {
         // only format requests return a result
         onFormat(result);
       }
+    },
+    [onFormat],
+  );
+
+  // worker creation
+  useEffect(() => {
+    const worker = new Worker(stancWorkerURL, {
+      name: "stancWorker",
+      type: "module",
+    });
+    worker.onmessage = onMessage;
+    setStancWorker(worker);
+    return () => {
+      console.log("terminating stanc worker");
+      worker.terminate();
     };
-  }, [stancWorker, onFormat]);
+  }, [onMessage]);
 
   // automatic syntax checking
   useEffect(() => {
diff --git a/gui/src/app/pages/EmbeddedBottomBar.tsx b/gui/src/app/pages/EmbeddedBottomBar.tsx
@@ -137,11 +137,7 @@ const RunCompact: FunctionComponent<EmbeddedBottomBarProps> = ({
   );
 };
 
-type SiteButtonsProps = {
-  // empty
-};
-
-const SiteButtons: FunctionComponent<SiteButtonsProps> = () => {
+const SiteButtons: FunctionComponent = () => {
   const { data } = use(ProjectContext);
 
   const modelIsSaved = useMemo(() => {
diff --git a/gui/src/app/pages/HomeEmbedded.tsx b/gui/src/app/pages/HomeEmbedded.tsx
@@ -6,23 +6,16 @@ import { CompileContext } from "@SpCore/Compilation/CompileContextProvider";
 import useStanSampler from "@SpCore/StanSampler/useStanSampler";
 import EmbeddedBottomBar from "@SpPages/EmbeddedBottomBar";
 import SettingsWindow from "@SpWindows/SettingsWindow";
-import { FunctionComponent, use, useEffect, useState } from "react";
+import { FunctionComponent, use, useEffect } from "react";
 
 const HomeEmbedded: FunctionComponent = () => {
   const { compiledMainJsUrl } = use(CompileContext);
   const { sampler, samplerState } = useStanSampler(compiledMainJsUrl);
-  const [currentTab, setCurrentTab] = useState<number | undefined>(undefined);
 
-  useEffect(() => {
-    if (
-      samplerState.status === "completed" ||
-      samplerState.status === "failed"
-    ) {
-      setCurrentTab(2); // Switch to output tab (third tab)
-    } else {
-      setCurrentTab(undefined);
-    }
-  }, [samplerState.status]);
+  const forcedTab =
+    samplerState.status === "completed" || samplerState.status === "failed"
+      ? 2 // Switch to output tab (third tab)
+      : undefined;
 
   useEffect(() => {
     document.title = "Stan Playground Embedded";
@@ -33,7 +26,7 @@ const HomeEmbedded: FunctionComponent = () => {
       <div style={{ flex: 1, minHeight: 0 }}>
         <TabWidget
           labels={["Stan", "Data", "Output"]}
-          forcedSelection={currentTab}
+          forcedSelection={forcedTab}
         >
           <ModelEditorPanel />
           <DataEditorPanel />
diff --git a/gui/src/app/util/gists/doesGistExist.ts b/gui/src/app/util/gists/doesGistExist.ts
@@ -15,7 +15,7 @@ const doesGistExist = async (gistUri: string): Promise<boolean> => {
     }
     const result = await r.json();
     return result.exists === true;
-  } catch (e) {
+  } catch {
     return false;
   }
 };
diff --git a/gui/src/app/windows/ExportProjectWindow/ExportProjectPanel.tsx b/gui/src/app/windows/ExportProjectWindow/ExportProjectPanel.tsx
diff --git a/gui/yarn.lock b/gui/yarn.lock
