chore: bump dependencies

14 files changed, 140 insertions, 127 deletions

diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 1edd7f34..455b8b67 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -24,79 +24,71 @@
   },
   "homepage": "https://refinery.tools",
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-transform-runtime": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@babel/preset-react": "^7.16.5",
-    "@babel/preset-typescript": "^7.16.5",
-    "@lezer/generator": "^0.15.2",
+    "@babel/core": "^7.18.9",
+    "@babel/plugin-transform-runtime": "^7.18.9",
+    "@babel/preset-env": "^7.18.9",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@lezer/generator": "^1.1.0",
     "@principalstudio/html-webpack-inject-preload": "^1.2.7",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
-    "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.1",
-    "eslint": "^8.4.1",
-    "eslint-config-airbnb": "^19.0.2",
-    "eslint-config-airbnb-typescript": "^16.1.0",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.20.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-import-resolver-node": "^0.3.6",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.0",
-    "image-webpack-loader": "^8.0.1",
-    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.5",
-    "postcss-scss": "^4.0.2",
-    "sass": "^1.45.0",
-    "sass-loader": "^12.4.0",
+    "image-webpack-loader": "^8.1.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "postcss": "^8.4.14",
+    "postcss-scss": "^4.0.4",
+    "sass": "^1.54.0",
+    "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.1.0",
-    "stylelint-config-recommended-scss": "^5.0.2",
-    "stylelint-scss": "^4.0.1",
-    "typescript": "~4.5.4",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-subresource-integrity": "^5.0.0"
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended-scss": "^7.0.0",
+    "stylelint-scss": "^4.3.0",
+    "typescript": "~4.7.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3",
+    "webpack-subresource-integrity": "^5.1.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.5",
-    "@codemirror/autocomplete": "^0.19.9",
-    "@codemirror/closebrackets": "^0.19.0",
-    "@codemirror/commands": "^0.19.6",
-    "@codemirror/comment": "^0.19.0",
-    "@codemirror/fold": "^0.19.2",
-    "@codemirror/gutter": "^0.19.9",
-    "@codemirror/highlight": "^0.19.6",
-    "@codemirror/history": "^0.19.0",
-    "@codemirror/language": "^0.19.7",
-    "@codemirror/lint": "^0.19.3",
-    "@codemirror/matchbrackets": "^0.19.3",
-    "@codemirror/rangeset": "^0.19.2",
-    "@codemirror/rectangular-selection": "^0.19.1",
-    "@codemirror/search": "^0.19.4",
-    "@codemirror/state": "^0.19.6",
-    "@codemirror/view": "^0.19.31",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@fontsource/jetbrains-mono": "^4.5.0",
-    "@fontsource/roboto": "^4.5.1",
-    "@lezer/common": "^0.15.10",
-    "@lezer/lr": "^0.15.5",
-    "@mui/icons-material": "5.2.1",
-    "@mui/material": "5.2.3",
+    "@babel/runtime": "^7.18.9",
+    "@codemirror/autocomplete": "^6.1.0",
+    "@codemirror/commands": "^6.0.1",
+    "@codemirror/language": "^6.2.1",
+    "@codemirror/lint": "^6.0.0",
+    "@codemirror/search": "^6.0.1",
+    "@codemirror/state": "^6.1.0",
+    "@codemirror/view": "^6.1.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@fontsource/jetbrains-mono": "^4.5.9",
+    "@fontsource/roboto": "^4.5.7",
+    "@lezer/common": "^1.0.0",
+    "@lezer/highlight": "^1.0.0",
+    "@lezer/lr": "^1.2.0",
+    "@mui/icons-material": "5.8.4",
+    "@mui/material": "5.9.2",
     "ansi-styles": "^6.1.0",
     "escape-string-regexp": "^5.0.0",
     "loglevel": "^1.8.0",
     "loglevel-plugin-prefix": "^0.8.4",
-    "mobx": "^6.3.8",
-    "mobx-react-lite": "^3.2.2",
-    "nanoid": "^3.1.30",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "zod": "^3.11.6"
+    "mobx": "^6.6.1",
+    "mobx-react-lite": "^3.4.0",
+    "nanoid": "^4.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zod": "^3.17.10"
   }
 }
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts
index 94ca24ea..9aaf541a 100644
--- a/subprojects/frontend/src/editor/EditorParent.ts
+++ b/subprojects/frontend/src/editor/EditorParent.ts
@@ -119,48 +119,48 @@ export const EditorParent = styled('div')(({ theme }) => {
       borderColor: theme.palette.text.disabled,
       color: theme.palette.text.secondary,
     },
-    '.cmt-comment': {
+    '.tok-comment': {
       fontStyle: 'italic',
       color: theme.palette.text.disabled,
     },
-    '.cmt-number': {
+    '.tok-number': {
       color: '#6188a6',
     },
-    '.cmt-string': {
+    '.tok-string': {
       color: theme.palette.secondary.dark,
     },
-    '.cmt-keyword': {
+    '.tok-keyword': {
       color: theme.palette.primary.main,
     },
-    '.cmt-typeName, .cmt-macroName, .cmt-atom': {
+    '.tok-typeName, .tok-macroName, .tok-atom': {
       color: theme.palette.text.primary,
     },
-    '.cmt-variableName': {
+    '.tok-variableName': {
       color: '#c8ae9d',
     },
-    '.cmt-problem-node': {
-      '&, & .cmt-variableName': {
+    '.tok-problem-node': {
+      '&, & .tok-variableName': {
         color: theme.palette.text.secondary,
       },
     },
-    '.cmt-problem-individual': {
-      '&, & .cmt-variableName': {
+    '.tok-problem-individual': {
+      '&, & .tok-variableName': {
         color: theme.palette.text.primary,
       },
     },
-    '.cmt-problem-abstract, .cmt-problem-new': {
+    '.tok-problem-abstract, .tok-problem-new': {
       fontStyle: 'italic',
     },
-    '.cmt-problem-containment': {
+    '.tok-problem-containment': {
       fontWeight: 700,
     },
-    '.cmt-problem-error': {
-      '&, & .cmt-typeName': {
+    '.tok-problem-error': {
+      '&, & .tok-typeName': {
         color: theme.palette.error.main,
       },
     },
-    '.cmt-problem-builtin': {
-      '&, & .cmt-typeName, & .cmt-atom, & .cmt-variableName': {
+    '.tok-problem-builtin': {
+      '&, & .tok-typeName, & .tok-atom, & .tok-variableName': {
         color: theme.palette.primary.main,
         fontWeight: 400,
         fontStyle: 'normal',
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 5760de28..0f4d2936 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -1,27 +1,32 @@
-import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
-import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { commentKeymap } from '@codemirror/comment';
-import { foldGutter, foldKeymap } from '@codemirror/fold';
-import { highlightActiveLineGutter, lineNumbers } from '@codemirror/gutter';
-import { classHighlightStyle } from '@codemirror/highlight';
 import {
+  closeBrackets,
+  closeBracketsKeymap,
+  autocompletion,
+  completionKeymap,
+} from '@codemirror/autocomplete';
+import {
+  defaultKeymap,
   history,
   historyKeymap,
+  indentWithTab,
   redo,
   redoDepth,
   undo,
   undoDepth,
-} from '@codemirror/history';
-import { indentOnInput } from '@codemirror/language';
+} from '@codemirror/commands';
+import {
+  bracketMatching,
+  foldGutter,
+  foldKeymap,
+  indentOnInput,
+  syntaxHighlighting,
+} from '@codemirror/language';
 import {
   Diagnostic,
   lintKeymap,
   setDiagnostics,
 } from '@codemirror/lint';
-import { bracketMatching } from '@codemirror/matchbrackets';
-import { rectangularSelection } from '@codemirror/rectangular-selection';
-import { searchConfig, searchKeymap } from '@codemirror/search';
+import { search, searchKeymap } from '@codemirror/search';
 import {
   EditorState,
   StateCommand,
@@ -33,9 +38,13 @@ import {
   drawSelection,
   EditorView,
   highlightActiveLine,
+  highlightActiveLineGutter,
   highlightSpecialChars,
   keymap,
+  lineNumbers,
+  rectangularSelection,
 } from '@codemirror/view';
+import { classHighlighter } from '@lezer/highlight';
 import {
   makeAutoObservable,
   observable,
@@ -91,7 +100,6 @@ export class EditorStore {
             (context) => this.client.contentAssist(context),
           ],
         }),
-        classHighlightStyle.extension,
         closeBrackets(),
         bracketMatching(),
         drawSelection(),
@@ -106,10 +114,11 @@ export class EditorStore {
         history(),
         indentOnInput(),
         rectangularSelection(),
-        searchConfig({
+        search({
           top: true,
-          matchCase: true,
+          caseSensitive: true,
         }),
+        syntaxHighlighting(classHighlighter),
         semanticHighlighting,
         // We add the gutters to `extensions` in the order we want them to appear.
         lineNumbers(),
@@ -117,7 +126,6 @@ export class EditorStore {
         keymap.of([
           { key: 'Mod-Shift-f', run: () => this.formatText() },
           ...closeBracketsKeymap,
-          ...commentKeymap,
           ...completionKeymap,
           ...foldKeymap,
           ...historyKeymap,
diff --git a/subprojects/frontend/src/editor/findOccurrences.ts b/subprojects/frontend/src/editor/findOccurrences.ts
index 92102746..c4a4e8ec 100644
--- a/subprojects/frontend/src/editor/findOccurrences.ts
+++ b/subprojects/frontend/src/editor/findOccurrences.ts
@@ -1,5 +1,4 @@
-import { Range, RangeSet } from '@codemirror/rangeset';
-import type { TransactionSpec } from '@codemirror/state';
+import { Range, RangeSet, type TransactionSpec } from '@codemirror/state';
 import { Decoration } from '@codemirror/view';
 
 import { decorationSetExtension } from './decorationSetExtension';
diff --git a/subprojects/frontend/src/editor/semanticHighlighting.ts b/subprojects/frontend/src/editor/semanticHighlighting.ts
index 2aed421b..a5d0af7a 100644
--- a/subprojects/frontend/src/editor/semanticHighlighting.ts
+++ b/subprojects/frontend/src/editor/semanticHighlighting.ts
@@ -1,5 +1,4 @@
-import { RangeSet } from '@codemirror/rangeset';
-import type { TransactionSpec } from '@codemirror/state';
+import { RangeSet, type TransactionSpec } from '@codemirror/state';
 import { Decoration } from '@codemirror/view';
 
 import { decorationSetExtension } from './decorationSetExtension';
@@ -16,7 +15,7 @@ const [setSemanticHighlightingInternal, semanticHighlighting] = decorationSetExt
 
 export function setSemanticHighlighting(ranges: IHighlightRange[]): TransactionSpec {
   const rangeSet = RangeSet.of(ranges.map(({ from, to, classes }) => Decoration.mark({
-    class: classes.map((c) => `cmt-problem-${c}`).join(' '),
+    class: classes.map((c) => `tok-problem-${c}`).join(' '),
   }).range(from, to)), true);
   return setSemanticHighlightingInternal(rangeSet);
 }
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index 15b26adb..6cdbbd64 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 
 import { App } from './App';
 import { RootStore, RootStoreProvider } from './RootStore';
 import { ThemeProvider } from './theme/ThemeProvider';
+import { getLogger } from './utils/logger';
 
 import './index.scss';
 
+const log = getLogger('index');
+
 const initialValue = `class Family {
     contains Person[] members
 }
@@ -66,4 +69,10 @@ const app = (
   </RootStoreProvider>
 );
 
-render(app, document.getElementById('app'));
+const rootElement = document.getElementById('app');
+if (rootElement === null) {
+  log.error('Root element not found');
+} else {
+  const root = createRoot(rootElement);
+  root.render(app);
+}
diff --git a/subprojects/frontend/src/language/folding.ts b/subprojects/frontend/src/language/folding.ts
index 5d51f796..2560c183 100644
--- a/subprojects/frontend/src/language/folding.ts
+++ b/subprojects/frontend/src/language/folding.ts
@@ -52,7 +52,7 @@ export function foldDeclaration(node: SyntaxNode, state: EditorState): FoldRange
   if (open === null || close === null) {
     return null;
   }
-  const { cursor } = open;
+  const cursor = open.cursor();
   const lineEnd = state.doc.lineAt(open.from).to;
   let foldFrom = open.to;
   while (cursor.next() && cursor.from < lineEnd) {
@@ -84,7 +84,7 @@ function foldWithSibling(node: SyntaxNode): FoldRange | null {
   if (firstChild === null) {
     return null;
   }
-  const { cursor } = firstChild;
+  const cursor = firstChild.cursor();
   let nSiblings = 0;
   while (cursor.nextSibling()) {
     if (cursor.type === node.type) {
diff --git a/subprojects/frontend/src/language/indentation.ts b/subprojects/frontend/src/language/indentation.ts
index 6d36ed3b..55dcd7f1 100644
--- a/subprojects/frontend/src/language/indentation.ts
+++ b/subprojects/frontend/src/language/indentation.ts
@@ -23,7 +23,7 @@ function findAlignmentAfterOpening(context: TreeIndentContext): number | null {
   const lineEnd = simulatedBreak == null || simulatedBreak <= openingLine.from
     ? openingLine.to
     : Math.min(openingLine.to, simulatedBreak);
-  const { cursor } = openingToken;
+  const cursor = openingToken.cursor();
   while (cursor.next() && cursor.from < lineEnd) {
     if (!cursor.type.isSkipped) {
       return cursor.from;
diff --git a/subprojects/frontend/src/language/problemLanguageSupport.ts b/subprojects/frontend/src/language/problemLanguageSupport.ts
index b858ba91..b6e2f14e 100644
--- a/subprojects/frontend/src/language/problemLanguageSupport.ts
+++ b/subprojects/frontend/src/language/problemLanguageSupport.ts
@@ -1,4 +1,3 @@
-import { styleTags, tags as t } from '@codemirror/highlight';
 import {
   foldInside,
   foldNodeProp,
@@ -7,6 +6,7 @@ import {
   LanguageSupport,
   LRLanguage,
 } from '@codemirror/language';
+import { styleTags, tags as t } from '@lezer/highlight';
 import { LRParser } from '@lezer/lr';
 
 import { parser } from '../../build/generated/sources/lezer/problem';
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index f5b50be1..c6194c69 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -1,10 +1,10 @@
 import { observer } from 'mobx-react-lite';
 import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 
 import { useRootStore } from '../RootStore';
 
-export const ThemeProvider: React.FC = observer(({ children }) => {
+export const ThemeProvider: React.FC<{ children: ReactNode }> = observer(({ children }) => {
   const { themeStore } = useRootStore();
 
   return (
diff --git a/subprojects/frontend/src/xtext/ContentAssistService.ts b/subprojects/frontend/src/xtext/ContentAssistService.ts
index 8b872e06..cf0fb49f 100644
--- a/subprojects/frontend/src/xtext/ContentAssistService.ts
+++ b/subprojects/frontend/src/xtext/ContentAssistService.ts
@@ -169,7 +169,7 @@ export class ContentAssistService {
     this.lastCompletion = {
       ...range,
       options,
-      span: computeSpan(prefix, entries.length),
+      validFor: computeSpan(prefix, entries.length),
     };
     return this.lastCompletion;
   }
@@ -181,15 +181,15 @@ export class ContentAssistService {
       return false;
     }
     const { from, to, text } = token;
-    const { from: lastFrom, to: lastTo, span } = this.lastCompletion;
+    const { from: lastFrom, to: lastTo, validFor } = this.lastCompletion;
     if (!lastTo) {
       return true;
     }
     const [transformedFrom, transformedTo] = this.mapRangeInclusive(lastFrom, lastTo);
     return from >= transformedFrom
       && to <= transformedTo
-      && typeof span !== 'undefined'
-      && span.exec(text) !== null;
+      && validFor instanceof RegExp
+      && validFor.exec(text) !== null;
   }
 
   private shouldInvalidateCachedCompletion(transaction: Transaction): boolean {
diff --git a/subprojects/frontend/src/xtext/xtextMessages.ts b/subprojects/frontend/src/xtext/xtextMessages.ts
index c4305fcf..4bf49c17 100644
--- a/subprojects/frontend/src/xtext/xtextMessages.ts
+++ b/subprojects/frontend/src/xtext/xtextMessages.ts
@@ -1,14 +1,14 @@
 import { z } from 'zod';
 
 export const xtextWebRequest = z.object({
-  id: z.string().nonempty(),
+  id: z.string().min(1),
   request: z.unknown(),
 });
 
 export type XtextWebRequest = z.infer<typeof xtextWebRequest>;
 
 export const xtextWebOkResponse = z.object({
-  id: z.string().nonempty(),
+  id: z.string().min(1),
   response: z.unknown(),
 });
 
@@ -19,7 +19,7 @@ export const xtextWebErrorKind = z.enum(['request', 'server']);
 export type XtextWebErrorKind = z.infer<typeof xtextWebErrorKind>;
 
 export const xtextWebErrorResponse = z.object({
-  id: z.string().nonempty(),
+  id: z.string().min(1),
   error: xtextWebErrorKind,
   message: z.string(),
 });
@@ -31,8 +31,8 @@ export const xtextWebPushService = z.enum(['highlight', 'validate']);
 export type XtextWebPushService = z.infer<typeof xtextWebPushService>;
 
 export const xtextWebPushMessage = z.object({
-  resource: z.string().nonempty(),
-  stateId: z.string().nonempty(),
+  resource: z.string().min(1),
+  stateId: z.string().min(1),
   service: xtextWebPushService,
   push: z.unknown(),
 });
diff --git a/subprojects/frontend/src/xtext/xtextServiceResults.ts b/subprojects/frontend/src/xtext/xtextServiceResults.ts
index f79b059c..8b0dbbfb 100644
--- a/subprojects/frontend/src/xtext/xtextServiceResults.ts
+++ b/subprojects/frontend/src/xtext/xtextServiceResults.ts
@@ -1,13 +1,13 @@
 import { z } from 'zod';
 
 export const pongResult = z.object({
-  pong: z.string().nonempty(),
+  pong: z.string().min(1),
 });
 
 export type PongResult = z.infer<typeof pongResult>;
 
 export const documentStateResult = z.object({
-  stateId: z.string().nonempty(),
+  stateId: z.string().min(1),
 });
 
 export type DocumentStateResult = z.infer<typeof documentStateResult>;
@@ -32,7 +32,7 @@ export const severity = z.enum(['error', 'warning', 'info', 'ignore']);
 export type Severity = z.infer<typeof severity>;
 
 export const issue = z.object({
-  description: z.string().nonempty(),
+  description: z.string().min(1),
   severity,
   line: z.number().int(),
   column: z.number().int().nonnegative(),
@@ -65,14 +65,14 @@ export type TextRegion = z.infer<typeof textRegion>;
 
 export const contentAssistEntry = z.object({
   prefix: z.string(),
-  proposal: z.string().nonempty(),
+  proposal: z.string().min(1),
   label: z.string().optional(),
-  description: z.string().nonempty().optional(),
-  documentation: z.string().nonempty().optional(),
+  description: z.string().min(1).optional(),
+  documentation: z.string().min(1).optional(),
   escapePosition: z.number().int().nonnegative().optional(),
   textReplacements: replaceRegion.array(),
   editPositions: textRegion.array(),
-  kind: z.string().nonempty(),
+  kind: z.string().min(1),
 });
 
 export type ContentAssistEntry = z.infer<typeof contentAssistEntry>;
@@ -86,7 +86,7 @@ export type ContentAssistResult = z.infer<typeof contentAssistResult>;
 export const highlightingRegion = z.object({
   offset: z.number().int().nonnegative(),
   length: z.number().int().nonnegative(),
-  styleClasses: z.string().nonempty().array(),
+  styleClasses: z.string().min(1).array(),
 });
 
 export type HighlightingRegion = z.infer<typeof highlightingRegion>;
diff --git a/subprojects/language/build.gradle b/subprojects/language/build.gradle
index f7574ecc..e00e536e 100644
--- a/subprojects/language/build.gradle
+++ b/subprojects/language/build.gradle
@@ -46,7 +46,13 @@ def generateXtextLanguage = tasks.register('generateXtextLanguage', JavaExec) {
         args += "rootPath=/${projectDir}/.."
 }
 
-for (taskName in ['compileJava', 'processResources', 'generateXtext', 'generateEclipseSourceFolders']) {
+for (taskName in [
+                'compileJava',
+                'processResources',
+                'processTestFixturesResources',
+                'generateXtext',
+                'generateEclipseSourceFolders'
+        ]) {
         tasks.named(taskName) {
                 dependsOn generateXtextLanguage
         }