33 files changed, 43 insertions, 52 deletions

diff --git a/subprojects/frontend/.eslintrc.cjs b/subprojects/frontend/.eslintrc.cjs
index 0bf65c4f..eadd3fb4 100644
--- a/subprojects/frontend/.eslintrc.cjs
+++ b/subprojects/frontend/.eslintrc.cjs
@@ -67,6 +67,8 @@ module.exports = {
     ],
     // Use prop spreading to conditionally add props with `exactOptionalPropertyTypes`.
     'react/jsx-props-no-spreading': 'off',
+    // We use the `react-jsx` runtime, so there is no need to import `React`.
+    'react/react-in-jsx-scope': 'off',
   },
   overrides: [
     {
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 4a890ee5..3bc84d6e 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -38,8 +38,8 @@
     "@lezer/highlight": "^1.1.2",
     "@lezer/lr": "^1.2.5",
     "@material-icons/svg": "^1.0.33",
-    "@mui/icons-material": "5.10.14",
-    "@mui/material": "5.10.14",
+    "@mui/icons-material": "5.10.15",
+    "@mui/material": "5.10.15",
     "ansi-styles": "^6.2.1",
     "escape-string-regexp": "^5.0.0",
     "lodash-es": "^4.17.21",
@@ -57,6 +57,7 @@
   },
   "devDependencies": {
     "@lezer/generator": "^1.1.3",
+    "@tsconfig/node18-strictest-esm": "^1.0.1",
     "@types/eslint": "^8.4.10",
     "@types/html-minifier-terser": "^7.0.0",
     "@types/lodash-es": "^4.17.6",
@@ -65,8 +66,8 @@
     "@types/prettier": "^2.7.1",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "@vitejs/plugin-react": "^2.2.0",
     "@xstate/cli": "^0.3.3",
     "cross-env": "^7.0.3",
@@ -81,7 +82,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "html-minifier-terser": "^7.0.0",
+    "html-minifier-terser": "^7.1.0",
     "prettier": "^2.7.1",
     "typescript": "4.9.3",
     "vite": "^3.2.4",
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: {
diff --git a/subprojects/frontend/tsconfig.base.json b/subprojects/frontend/tsconfig.base.json
index 9cc8ace4..585866f1 100644
--- a/subprojects/frontend/tsconfig.base.json
+++ b/subprojects/frontend/tsconfig.base.json
@@ -1,16 +1,7 @@
 {
+  "extends": "@tsconfig/node18-strictest-esm/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "useDefineForClassFields": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noImplicitReturns": true,
-    "exactOptionalPropertyTypes": true,
     "isolatedModules": true,
-    "skipLibCheck": true
   }
 }
diff --git a/subprojects/frontend/tsconfig.json b/subprojects/frontend/tsconfig.json
index e8053768..0dccec40 100644
--- a/subprojects/frontend/tsconfig.json
+++ b/subprojects/frontend/tsconfig.json
@@ -1,9 +1,9 @@
 {
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "noEmit": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "types": ["vite/client", "vite-plugin-pwa/client"]
   },
   "include": [
diff --git a/subprojects/frontend/tsconfig.node.json b/subprojects/frontend/tsconfig.node.json
index f5d6e6ec..c4539dbc 100644
--- a/subprojects/frontend/tsconfig.node.json
+++ b/subprojects/frontend/tsconfig.node.json
@@ -2,8 +2,7 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "composite": true,
-    "checkJs": true,
-    "lib": ["ESNext"],
+    "lib": ["ES2022"],
     "types": ["node"],
     "emitDeclarationOnly": true,
     "outDir": "build/typescript"
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index 526ea541..2c810912 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -14,29 +14,29 @@ setDefaultResultOrder('verbatim');
 
 const thisDir = path.dirname(fileURLToPath(import.meta.url));
 
-const mode = process.env.MODE || 'development';
+const mode = process.env['MODE'] || 'development';
 const isDevelopment = mode === 'development';
-process.env.NODE_ENV ??= mode;
+process.env['NODE_ENV'] ??= mode;
 
 function portNumberOrElse(envName: string, fallback: number): number {
   const value = process.env[envName];
   return value ? parseInt(value, 10) : fallback;
 }
 
-const listenHost = process.env.LISTEN_HOST || 'localhost';
+const listenHost = process.env['LISTEN_HOST'] || 'localhost';
 const listenPort = portNumberOrElse('LISTEN_PORT', 1313);
-const apiHost = process.env.API_HOST || '127.0.0.1';
+const apiHost = process.env['API_HOST'] || '127.0.0.1';
 const apiPort = portNumberOrElse('API_PORT', 1312);
 const apiSecure = apiPort === 443;
-const publicHost = process.env.PUBLIC_HOST || listenHost;
+const publicHost = process.env['PUBLIC_HOST'] || listenHost;
 const publicPort = portNumberOrElse('PUBLIC_PORT', listenPort);
 const publicSecure = publicPort === 443;
 
 const { name: packageName, version: packageVersion } = JSON.parse(
   readFileSync(path.join(thisDir, 'package.json'), 'utf8'),
 ) as { name: string; version: string };
-process.env.VITE_PACKAGE_NAME ??= packageName;
-process.env.VITE_PACKAGE_VERSION ??= packageVersion;
+process.env['VITE_PACKAGE_NAME'] ??= packageName;
+process.env['VITE_PACKAGE_VERSION'] ??= packageVersion;
 
 const minifyPlugin: PluginOption = {
   name: 'minify-html',