fix(frontend): mobx 6.7.0 typing

Also bumps some dependencies and updates tsconfig.json

The added workarounds should be remove once
https://github.com/mobxjs/mobx/issues/3582 is resolved.

27 files changed, 24 insertions, 26 deletions

diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx
index a471690b..b162e551 100644
--- a/subprojects/frontend/src/App.tsx
+++ b/subprojects/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
-import React, { StrictMode, Suspense, lazy } from 'react';
+import { StrictMode, Suspense, lazy } from 'react';
 
 import Loading from './Loading';
 import type RootStore from './RootStore';
diff --git a/subprojects/frontend/src/Loading.tsx b/subprojects/frontend/src/Loading.tsx
index 8c293239..489563e0 100644
--- a/subprojects/frontend/src/Loading.tsx
+++ b/subprojects/frontend/src/Loading.tsx
@@ -1,6 +1,5 @@
 import CircularProgress from '@mui/material/CircularProgress';
 import { styled } from '@mui/material/styles';
-import React from 'react';
 
 const LoadingRoot = styled('div')(({ theme }) => ({
   width: '100%',
diff --git a/subprojects/frontend/src/Refinery.tsx b/subprojects/frontend/src/Refinery.tsx
index 41f835b3..d6bd6159 100644
--- a/subprojects/frontend/src/Refinery.tsx
+++ b/subprojects/frontend/src/Refinery.tsx
@@ -1,7 +1,6 @@
 import Grow from '@mui/material/Grow';
 import Stack from '@mui/material/Stack';
 import { SnackbarProvider } from 'notistack';
-import React from 'react';
 
 import TopBar from './TopBar';
 import UpdateNotification from './UpdateNotification';
diff --git a/subprojects/frontend/src/RootStoreProvider.tsx b/subprojects/frontend/src/RootStoreProvider.tsx
index 70ac7776..2c11a0f9 100644
--- a/subprojects/frontend/src/RootStoreProvider.tsx
+++ b/subprojects/frontend/src/RootStoreProvider.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactNode, createContext, useContext } from 'react';
+import { type ReactNode, createContext, useContext } from 'react';
 
 import type RootStore from './RootStore';
 
diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx
index 52606242..59714f20 100644
--- a/subprojects/frontend/src/ToggleDarkModeButton.tsx
+++ b/subprojects/frontend/src/ToggleDarkModeButton.tsx
@@ -2,7 +2,6 @@ import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
 
 import { useRootStore } from './RootStoreProvider';
 
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index 79ea0b65..c943f7c4 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { throttle } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useRootStore } from './RootStoreProvider';
 import ToggleDarkModeButton from './ToggleDarkModeButton';
diff --git a/subprojects/frontend/src/UpdateNotification.tsx b/subprojects/frontend/src/UpdateNotification.tsx
index 8c46186a..07f7f5f7 100644
--- a/subprojects/frontend/src/UpdateNotification.tsx
+++ b/subprojects/frontend/src/UpdateNotification.tsx
@@ -1,6 +1,6 @@
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { useRootStore } from './RootStoreProvider';
 import { ContrastThemeProvider } from './theme/ThemeProvider';
diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx
index d08decbc..7f6c61f0 100644
--- a/subprojects/frontend/src/editor/AnimatedButton.tsx
+++ b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -1,7 +1,7 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
-import React, { type ReactNode, useLayoutEffect, useState } from 'react';
+import { type ReactNode, useLayoutEffect, useState } from 'react';
 
 const AnimatedButtonBase = styled(Button, {
   shouldForwardProp: (prop) => prop !== 'width',
diff --git a/subprojects/frontend/src/editor/ConnectButton.tsx b/subprojects/frontend/src/editor/ConnectButton.tsx
index 52e7b854..e2d251f3 100644
--- a/subprojects/frontend/src/editor/ConnectButton.tsx
+++ b/subprojects/frontend/src/editor/ConnectButton.tsx
@@ -5,7 +5,6 @@ import SyncProblemIcon from '@mui/icons-material/SyncProblem';
 import IconButton from '@mui/material/IconButton';
 import { keyframes, styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
 
 import type EditorStore from './EditorStore';
 
diff --git a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
index f7f089f0..9b27f45c 100644
--- a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
+++ b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
@@ -1,6 +1,6 @@
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { ContrastThemeProvider } from '../theme/ThemeProvider';
 import useDelayedSnackbar from '../utils/useDelayedSnackbar';
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index 95f0f92e..cfb988b2 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -1,7 +1,7 @@
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import type EditorStore from './EditorStore';
 import EditorTheme from './EditorTheme';
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index fd046d46..53b06e23 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -13,7 +13,6 @@ import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
 
 import ConnectButton from './ConnectButton';
 import type EditorStore from './EditorStore';
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index 0db4b892..1d51b3f5 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -5,7 +5,7 @@ import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { observer } from 'mobx-react-lite';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { useRootStore } from '../RootStoreProvider';
 
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index acad3d09..d966690c 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -1,4 +1,7 @@
-import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import type {
+  CompletionContext,
+  CompletionResult,
+} from '@codemirror/autocomplete';
 import { redo, redoDepth, undo, undoDepth } from '@codemirror/commands';
 import {
   type Diagnostic,
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index 8b6ae660..1a32f5ce 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -2,7 +2,6 @@ import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
 
 import AnimatedButton from './AnimatedButton';
 import type EditorStore from './EditorStore';
diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
index b6b375e3..5cf1c90e 100644
--- a/subprojects/frontend/src/editor/SearchPanelPortal.tsx
+++ b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
@@ -1,6 +1,5 @@
 import Portal from '@mui/material/Portal';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
 
 import type EditorStore from './EditorStore';
 import SearchToolbar from './SearchToolbar';
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
index a9b9811d..54f3dba7 100644
--- a/subprojects/frontend/src/editor/SearchToolbar.tsx
+++ b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -14,7 +14,7 @@ import Toolbar from '@mui/material/Toolbar';
 import { styled } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import type SearchPanelStore from './SearchPanelStore';
 
diff --git a/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts b/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts
index 96be0eea..d5ad536b 100644
--- a/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts
+++ b/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts
@@ -91,7 +91,7 @@ function getNumIndentMarkersForNonEmptyLine(
 ) {
   let numIndents = 0;
   let numConsecutiveSpaces = 0;
-  let prevChar: string | null = null;
+  let prevChar: string | undefined;
 
   for (let char = 0; char < text.length; char += 1) {
     // Bail if we encounter a non-whitespace character
diff --git a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts b/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
index c95e581d..0edaeb70 100644
--- a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
+++ b/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
@@ -128,10 +128,11 @@ export default function scrollbarViewPlugin(
           Math.max(1, endLine - startLine) * lineHeight,
         );
 
-        let annotation: HTMLDivElement;
+        let annotation: HTMLDivElement | undefined;
         if (i < annotations.length) {
           annotation = annotations[i];
-        } else {
+        }
+        if (annotation === undefined) {
           annotation = ownerDocument.createElement('div');
           annotations.push(annotation);
           holder.appendChild(annotation);
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index a40f1762..3e56d941 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,5 +1,4 @@
 import { configure } from 'mobx';
-import React from 'react';
 import { type Root, createRoot } from 'react-dom/client';
 
 import App from './App';
diff --git a/subprojects/frontend/src/language/problem.grammar b/subprojects/frontend/src/language/problem.grammar
index c2410913..f4cf1712 100644
--- a/subprojects/frontend/src/language/problem.grammar
+++ b/subprojects/frontend/src/language/problem.grammar
@@ -37,7 +37,7 @@ statement {
     PredicateBody { ("<->" sep<OrOp, Conjunction>)? "." }
   } |
   FunctionDefinition {
-    PrimitiveType RelationName ParameterList<Parameter>?
+    kw<"fn"> PrimitiveType RelationName ParameterList<Parameter>?
     FunctionBody { ("=" sep<OrOp, Case>)? "." }
   } |
   //RuleDefinition {
diff --git a/subprojects/frontend/src/language/problemLanguageSupport.ts b/subprojects/frontend/src/language/problemLanguageSupport.ts
index 497030e2..c3ae7ed9 100644
--- a/subprojects/frontend/src/language/problemLanguageSupport.ts
+++ b/subprojects/frontend/src/language/problemLanguageSupport.ts
@@ -21,7 +21,7 @@ const parserWithMetadata = parser.configure({
     styleTags({
       LineComment: t.lineComment,
       BlockComment: t.blockComment,
-      'problem class enum pred indiv scope': t.definitionKeyword,
+      'problem class enum pred fn indiv scope': t.definitionKeyword,
       'abstract extends refers contains container opposite': t.modifier,
       'default error contained containment': t.modifier,
       'true false unknown error': t.keyword,
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index a00d70fe..9cf870d5 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -12,7 +12,7 @@ import {
   useTheme,
 } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { type ReactNode, createContext, useContext } from 'react';
+import { type ReactNode, createContext, useContext } from 'react';
 
 import { useRootStore } from '../RootStoreProvider';
 
diff --git a/subprojects/frontend/src/utils/PendingTask.ts b/subprojects/frontend/src/utils/PendingTask.ts
index d0b24c1f..fd52cef1 100644
--- a/subprojects/frontend/src/utils/PendingTask.ts
+++ b/subprojects/frontend/src/utils/PendingTask.ts
@@ -20,6 +20,7 @@ export default class PendingTask<T> {
   ) {
     this.resolveCallback = resolveCallback;
     this.rejectCallback = rejectCallback;
+    // @ts-expect-error See https://github.com/mobxjs/mobx/issues/3582 on `@types/node` pollution
     this.timeout = setTimeout(() => {
       if (!this.resolved) {
         this.reject(new TimeoutError());
diff --git a/subprojects/frontend/src/utils/useDelayedSnackbar.ts b/subprojects/frontend/src/utils/useDelayedSnackbar.ts
index 03ad6caa..54716c0c 100644
--- a/subprojects/frontend/src/utils/useDelayedSnackbar.ts
+++ b/subprojects/frontend/src/utils/useDelayedSnackbar.ts
@@ -21,6 +21,7 @@ export default function useDelayedSnackbar(
       delay = defaultDelay,
     ) => {
       let key: SnackbarKey | undefined;
+      // @ts-expect-error See https://github.com/mobxjs/mobx/issues/3582 on `@types/node` pollution
       let timeout: number | undefined = setTimeout(() => {
         timeout = undefined;
         key = enqueueSnackbar(message, options);
diff --git a/subprojects/frontend/src/xtext/OccurrencesService.ts b/subprojects/frontend/src/xtext/OccurrencesService.ts
index 248a9a87..fc72ead2 100644
--- a/subprojects/frontend/src/xtext/OccurrencesService.ts
+++ b/subprojects/frontend/src/xtext/OccurrencesService.ts
@@ -1,4 +1,4 @@
-import { Transaction } from '@codemirror/state';
+import type { Transaction } from '@codemirror/state';
 import { debounce } from 'lodash-es';
 import ms from 'ms';
 
diff --git a/subprojects/frontend/src/xtext/webSocketMachine.ts b/subprojects/frontend/src/xtext/webSocketMachine.ts
index 5f6bc604..216ed86a 100644
--- a/subprojects/frontend/src/xtext/webSocketMachine.ts
+++ b/subprojects/frontend/src/xtext/webSocketMachine.ts
@@ -205,7 +205,7 @@ export default createMachine(
       ERROR_WAIT_TIME: ({ errors: { length: retryCount } }) => {
         const { length } = ERROR_WAIT_TIMES;
         const index = retryCount < length ? retryCount : length - 1;
-        return ERROR_WAIT_TIMES[index];
+        return ERROR_WAIT_TIMES[index] ?? 0;
       },
     },
     actions: {