refactor(frontend): add eslint-plugin-mobx

14 files changed, 64 insertions, 72 deletions

diff --git a/subprojects/frontend/src/RootStore.tsx b/subprojects/frontend/src/RootStore.tsx
index e08dd750..5aa580d1 100644
--- a/subprojects/frontend/src/RootStore.tsx
+++ b/subprojects/frontend/src/RootStore.tsx
@@ -1,5 +1,5 @@
 import { getLogger } from 'loglevel';
-import { makeObservable, observable, runInAction } from 'mobx';
+import { makeAutoObservable, runInAction } from 'mobx';
 import React, { createContext, useContext } from 'react';
 
 import type EditorStore from './editor/EditorStore';
@@ -14,8 +14,8 @@ export default class RootStore {
 
   constructor(initialValue: string) {
     this.themeStore = new ThemeStore();
-    makeObservable(this, {
-      editorStore: observable,
+    makeAutoObservable(this, {
+      themeStore: false,
     });
     import('./editor/EditorStore')
       .then(({ default: EditorStore }) => {
diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx
index 1685ec80..5602f3bc 100644
--- a/subprojects/frontend/src/ToggleDarkModeButton.tsx
+++ b/subprojects/frontend/src/ToggleDarkModeButton.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 
 import { useRootStore } from './RootStore';
 
-function ToggleDarkModeButton(): JSX.Element {
+export default observer(function ToggleDarkModeButton(): JSX.Element {
   const { themeStore } = useRootStore();
   const { darkMode } = themeStore;
 
@@ -19,6 +19,4 @@ function ToggleDarkModeButton(): JSX.Element {
       {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
     </IconButton>
   );
-}
-
-export default observer(ToggleDarkModeButton);
+});
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index 1c9b031b..7c5ac5fb 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -5,7 +5,7 @@ import React, { useCallback, useEffect } from 'react';
 import type EditorStore from './EditorStore';
 import EditorTheme from './EditorTheme';
 
-function EditorArea({
+export default observer(function EditorArea({
   editorStore,
 }: {
   editorStore: EditorStore;
@@ -32,6 +32,4 @@ function EditorArea({
       ref={editorParentRef}
     />
   );
-}
-
-export default observer(EditorArea);
+});
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index cbe7c424..d2273c6c 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -32,7 +32,7 @@ function getLintIcon(severity: Diagnostic['severity'] | undefined) {
   }
 }
 
-function EditorButtons({
+export default observer(function EditorButtons({
   editorStore,
 }: {
   editorStore: EditorStore | undefined;
@@ -102,6 +102,4 @@ function EditorButtons({
       </IconButton>
     </Stack>
   );
-}
-
-export default observer(EditorButtons);
+});
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index df43d2c9..2651726c 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -29,7 +29,7 @@ function EditorLoading(): JSX.Element {
   );
 }
 
-function EditorPane(): JSX.Element {
+export default observer(function EditorPane(): JSX.Element {
   const { editorStore } = useRootStore();
 
   return (
@@ -50,6 +50,4 @@ function EditorPane(): JSX.Element {
       </Box>
     </Stack>
   );
-}
-
-export default observer(EditorPane);
+});
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index b634a427..4407376b 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -13,7 +13,7 @@ import {
   type EditorState,
 } from '@codemirror/state';
 import { type Command, EditorView } from '@codemirror/view';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { makeAutoObservable, observable } from 'mobx';
 import { nanoid } from 'nanoid';
 
 import getLogger from '../utils/getLogger';
@@ -57,29 +57,15 @@ export default class EditorStore {
     this.client = new XtextClient(this);
     this.searchPanel = new SearchPanelStore(this);
     this.lintPanel = new LintPanelStore(this);
-    makeObservable(this, {
+    makeAutoObservable<EditorStore, 'client'>(this, {
+      id: false,
       state: observable.ref,
+      client: false,
       view: observable.ref,
-      showLineNumbers: observable,
-      errorCount: observable,
-      warningCount: observable,
-      infoCount: observable,
-      highestDiagnosticLevel: computed,
-      canUndo: computed,
-      canRedo: computed,
-      setDarkMode: action,
-      setEditorParent: action,
-      dispatch: action,
-      dispatchTransaction: action,
-      doCommand: action,
-      doStateCommand: action,
-      updateDiagnostics: action,
-      nextDiagnostic: action,
-      updateOccurrences: action,
-      updateSemanticHighlighting: action,
-      undo: action,
-      redo: action,
-      toggleLineNumbers: action,
+      searchPanel: false,
+      lintPanel: false,
+      contentAssist: false,
+      formatText: false,
     });
   }
 
@@ -141,13 +127,11 @@ export default class EditorStore {
     }
   }
 
-  private readonly dispatchTransactionWithoutView = action(
-    (tr: Transaction) => {
-      log.trace('Editor transaction', tr);
-      this.state = tr.state;
-      this.client.onTransaction(tr);
-    },
-  );
+  private dispatchTransactionWithoutView(tr: Transaction): void {
+    log.trace('Editor transaction', tr);
+    this.state = tr.state;
+    this.client.onTransaction(tr);
+  }
 
   doCommand(command: Command): boolean {
     if (this.view === undefined) {
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index a28f6b4b..5254f6cb 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -7,7 +7,7 @@ import type EditorStore from './EditorStore';
 
 const GENERATE_LABEL = 'Generate';
 
-function GenerateButton({
+export default observer(function GenerateButton({
   editorStore,
 }: {
   editorStore: EditorStore | undefined;
@@ -53,6 +53,4 @@ function GenerateButton({
       {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
     </Button>
   );
-}
-
-export default observer(GenerateButton);
+});
diff --git a/subprojects/frontend/src/editor/PanelStore.ts b/subprojects/frontend/src/editor/PanelStore.ts
index e0e2b2f4..4f827280 100644
--- a/subprojects/frontend/src/editor/PanelStore.ts
+++ b/subprojects/frontend/src/editor/PanelStore.ts
@@ -18,13 +18,29 @@ export default class PanelStore {
     private readonly closeCommand: Command,
     protected readonly store: EditorStore,
   ) {
-    makeObservable(this, {
+    makeObservable<
+      PanelStore,
+      | 'openCommand'
+      | 'closeCommand'
+      | 'store'
+      | 'setState'
+      | 'doOpen'
+      | 'doClose'
+    >(this, {
+      panelClass: false,
+      openCommand: false,
+      closeCommand: false,
+      store: false,
       state: observable,
       element: observable,
+      id: false,
       open: action,
       close: action,
       toggle: action,
+      setState: false,
       synchronizeStateToView: action,
+      doOpen: false,
+      doClose: false,
     });
   }
 
diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
index e8301489..b6b375e3 100644
--- a/subprojects/frontend/src/editor/SearchPanelPortal.tsx
+++ b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import type EditorStore from './EditorStore';
 import SearchToolbar from './SearchToolbar';
 
-function SearchPanelPortal({
+export default observer(function SearchPanelPortal({
   editorStore: { searchPanel: searchPanelStore },
 }: {
   editorStore: EditorStore;
@@ -20,6 +20,4 @@ function SearchPanelPortal({
       <SearchToolbar searchPanelStore={searchPanelStore} />
     </Portal>
   );
-}
-
-export default observer(SearchPanelPortal);
+});
diff --git a/subprojects/frontend/src/editor/SearchPanelStore.ts b/subprojects/frontend/src/editor/SearchPanelStore.ts
index 8dd02ae6..65d595a8 100644
--- a/subprojects/frontend/src/editor/SearchPanelStore.ts
+++ b/subprojects/frontend/src/editor/SearchPanelStore.ts
@@ -21,7 +21,7 @@ export default class SearchPanelStore extends PanelStore {
     // Use a custom class name to avoid specificity issues with
     // CodeMirror `.cm-search.cm-panel` CSS styles.
     super('refinery-cm-search', openSearchPanel, closeSearchPanel, store);
-    makeObservable(this, {
+    makeObservable<SearchPanelStore, 'selectSearchField'>(this, {
       searchField: observable.ref,
       query: computed,
       invalidRegexp: computed,
@@ -32,6 +32,7 @@ export default class SearchPanelStore extends PanelStore {
       findPrevious: action,
       replaceNext: action,
       replaceAll: action,
+      selectSearchField: false,
     });
   }
 
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
index 895f1ca1..a9b9811d 100644
--- a/subprojects/frontend/src/editor/SearchToolbar.tsx
+++ b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -27,7 +27,7 @@ const DimLabel = styled(FormControlLabel)(({ theme }) => ({
   },
 }));
 
-function SearchToolbar({
+export default observer(function SearchToolbar({
   searchPanelStore,
 }: {
   searchPanelStore: SearchPanelStore;
@@ -271,6 +271,4 @@ function SearchToolbar({
       </Stack>
     </Toolbar>
   );
-}
-
-export default observer(SearchToolbar);
+});
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index 3f06b332..8436c7ae 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
+import { configure } from 'mobx';
 import { SnackbarProvider } from 'notistack';
 import React, { Suspense, lazy } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -60,6 +61,11 @@ age(bob, bobAge).
 scope Family = 1, Person += 5..10.
 `;
 
+configure({
+  enforceActions: 'always',
+  reactionRequiresObservable: true,
+});
+
 const rootStore = new RootStore(initialValue);
 
 const App = lazy(() => import('./App.js'));
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 5aaf3ad1..6f9a712e 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -313,7 +313,11 @@ ContrastThemeProvider.defaultProps = {
   children: undefined,
 };
 
-function ThemeProvider({ children }: { children?: ReactNode }): JSX.Element {
+const ThemeProvider = observer(function ThemeProvider({
+  children,
+}: {
+  children?: ReactNode;
+}): JSX.Element {
   const {
     themeStore: { darkMode },
   } = useRootStore();
@@ -326,10 +330,10 @@ function ThemeProvider({ children }: { children?: ReactNode }): JSX.Element {
       {children}
     </ThemeAndContrastThemeProvider>
   );
-}
+});
 
 ThemeProvider.defaultProps = {
   children: undefined,
 };
 
-export default observer(ThemeProvider);
+export default ThemeProvider;
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
index 6fbd9f90..e09d8d99 100644
--- a/subprojects/frontend/src/theme/ThemeStore.ts
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -1,4 +1,4 @@
-import { action, computed, makeObservable, observable } from 'mobx';
+import { makeAutoObservable } from 'mobx';
 
 export enum ThemePreference {
   System,
@@ -17,12 +17,7 @@ export default class ThemeStore {
     mediaQuery.addEventListener('change', (event) => {
       this.systemDarkMode = event.matches;
     });
-    makeObservable(this, {
-      preference: observable,
-      systemDarkMode: observable,
-      darkMode: computed,
-      toggleDarkMode: action,
-    });
+    makeAutoObservable(this);
   }
 
   get darkMode(): boolean {