7 files changed, 72 insertions, 68 deletions

diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx
index 5bd46c09..17d4f339 100644
--- a/language-web/src/main/js/App.tsx
+++ b/language-web/src/main/js/App.tsx
@@ -9,10 +9,10 @@ import MenuIcon from '@material-ui/icons/Menu';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 
 import { makeStyles } from './makeStyles';
-import Editor from './editor/Editor';
-import EditorButtons from './editor/EditorButtons';
+import { Editor } from './editor/Editor';
+import { EditorButtons } from './editor/EditorButtons';
 
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()((theme) => ({
   container: {
     maxHeight: '100vh',
   },
@@ -27,31 +27,31 @@ const useStyles = makeStyles()(theme => ({
   },
 }));
 
-export default () => {
+export const App = (): JSX.Element => {
   const { classes, cx } = useStyles();
 
   return (
     <Box
-      display='flex'
-      flexDirection='column'
+      display="flex"
+      flexDirection="column"
       className={cx(classes.container)}
     >
       <AppBar
-        position='static'
-        color='inherit'
+        position="static"
+        color="inherit"
       >
         <Toolbar>
           <IconButton
-            edge='start'
+            edge="start"
             className={cx(classes.menuButton)}
-            color='inherit'
-            aria-label='menu'
+            color="inherit"
+            aria-label="menu"
           >
             <MenuIcon />
           </IconButton>
           <Typography
-            variant='h6'
-            component='h1'
+            variant="h6"
+            component="h1"
             className={cx(classes.title)}
           >
             GraphSolver
@@ -59,22 +59,22 @@ export default () => {
         </Toolbar>
       </AppBar>
       <Box
-        display='flex'
-        justifyContent='space-between'
-        alignItems='center'
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
         p={1}
       >
         <Box
-          display='flex'
-          alignItems='center'
+          display="flex"
+          alignItems="center"
         >
-          <EditorButtons/>
+          <EditorButtons />
         </Box>
         <Box>
           <Button
-            variant='outlined'
-            color='primary'
-            startIcon={<PlayArrowIcon/>}
+            variant="outlined"
+            color="primary"
+            startIcon={<PlayArrowIcon />}
           >
             Generate
           </Button>
@@ -85,7 +85,7 @@ export default () => {
         flexShrink={1}
         className={cx(classes.editorBox)}
       >
-        <Editor/>
+        <Editor />
       </Box>
     </Box>
   );
diff --git a/language-web/src/main/js/RootStore.tsx b/language-web/src/main/js/RootStore.tsx
index 2159f440..1c3aab2b 100644
--- a/language-web/src/main/js/RootStore.tsx
+++ b/language-web/src/main/js/RootStore.tsx
@@ -1,9 +1,8 @@
-
 import React, { createContext, useContext } from 'react';
 
-import EditorStore from './editor/EditorStore';
+import { EditorStore } from './editor/EditorStore';
 
-export default class RootStore {
+export class RootStore {
   editorStore;
 
   constructor() {
@@ -19,7 +18,7 @@ export const RootStoreProvider: React.FC<{ rootStore: RootStore }> = ({ children
   </StoreContext.Provider>
 );
 
-export const useRootStore = () => {
+export const useRootStore = (): RootStore => {
   const rootStore = useContext(StoreContext);
   if (!rootStore) {
     throw new Error('useRootStore must be used within RootStoreProvider');
diff --git a/language-web/src/main/js/editor/Editor.tsx b/language-web/src/main/js/editor/Editor.tsx
index f81c5c37..9badb6a3 100644
--- a/language-web/src/main/js/editor/Editor.tsx
+++ b/language-web/src/main/js/editor/Editor.tsx
@@ -4,7 +4,7 @@ import { Controlled as CodeMirror } from 'react-codemirror2';
 
 import { useRootStore } from '../RootStore';
 
-export default observer(() => {
+export const Editor = observer(() => {
   const { editorStore } = useRootStore();
 
   return (
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx
index 1a187635..d3825c07 100644
--- a/language-web/src/main/js/editor/EditorButtons.tsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -11,7 +11,7 @@ import UndoIcon from '@material-ui/icons/Undo';
 import { makeStyles } from '../makeStyles';
 import { useRootStore } from '../RootStore';
 
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()((theme) => ({
   iconButton: {
     padding: 7,
     border: 0,
@@ -28,47 +28,48 @@ const useStyles = makeStyles()(theme => ({
   },
 }));
 
-export default observer(() => {
+export const EditorButtons = observer(() => {
   const { editorStore } = useRootStore();
   const { classes, cx } = useStyles();
+
   return (
     <>
       <ButtonGroup
-        variant='text'
+        variant="text"
       >
         <Button
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
           className={cx(classes.iconButton)}
-          color='inherit'
-          aria-label='Undo'
+          color="inherit"
+          aria-label="Undo"
         >
-          <UndoIcon fontSize='small'/>
+          <UndoIcon fontSize="small" />
         </Button>
         <Button
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
           className={cx(classes.iconButton)}
-          color='inherit'
-          aria-label='Redo'
+          color="inherit"
+          aria-label="Redo"
         >
-          <RedoIcon fontSize='small'/>
+          <RedoIcon fontSize="small" />
         </Button>
       </ButtonGroup>
       <Divider
         flexItem
-        orientation='vertical'
+        orientation="vertical"
         className={classes.divider}
       />
       <ToggleButton
         selected={editorStore.showLineNumbers}
         onChange={() => editorStore.toggleLineNumbers()}
-        size='small'
+        size="small"
         className={cx(classes.iconButton)}
-        aria-label='Show line numbers'
-        value='show-line-numbers'
+        aria-label="Show line numbers"
+        value="show-line-numbers"
       >
-        <FormatListNumberedIcon fontSize='small'/>
+        <FormatListNumberedIcon fontSize="small" />
       </ToggleButton>
     </>
   );
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
index 167e1ade..3a0c6f87 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -25,17 +25,21 @@ const codeMirrorGlobalOptions: EditorConfiguration = {
   theme: 'material-darker',
 };
 
-export default class EditorStore {
-  _atom;
+export class EditorStore {
+  atom;
+
   editor?: Editor;
+
   xtextServices?: IXtextServices;
+
   value = '';
+
   showLineNumbers = false;
 
   constructor() {
-    this._atom = createAtom('EditorStore');
+    this.atom = createAtom('EditorStore');
     makeAutoObservable(this, {
-      _atom: false,
+      atom: false,
       editor: observable.ref,
       xtextServices: observable.ref,
     });
@@ -49,7 +53,7 @@ export default class EditorStore {
    *
    * @param newEditor The new CodeMirror instance
    */
-  editorDidMount(newEditor: Editor) {
+  editorDidMount(newEditor: Editor): void {
     if (this.editor) {
       throw new Error('CoreMirror editor mounted before unmounting');
     }
@@ -57,7 +61,7 @@ export default class EditorStore {
     this.xtextServices = createServices(newEditor, xtextOptions);
   }
 
-  editorWillUnmount() {
+  editorWillUnmount(): void {
     if (this.editor) {
       removeServices(this.editor);
     }
@@ -70,16 +74,16 @@ export default class EditorStore {
    *
    * @param newValue The new contents of the editor
    */
-  updateValue(newValue: string) {
+  updateValue(newValue: string): void {
     this.value = newValue;
   }
 
-  reportChanged() {
-    this._atom.reportChanged();
+  reportChanged(): void {
+    this.atom.reportChanged();
   }
 
-  _observeEditorChanges() {
-    this._atom.reportObserved();
+  protected observeEditorChanges(): void {
+    this.atom.reportObserved();
   }
 
   get codeMirrorOptions(): EditorConfiguration {
@@ -92,8 +96,8 @@ export default class EditorStore {
   /**
    * @returns `true` if there is history to undo
    */
-  get canUndo() {
-    this._observeEditorChanges();
+  get canUndo(): boolean {
+    this.observeEditorChanges();
     if (!this.editor) {
       return false;
     }
@@ -101,15 +105,15 @@ export default class EditorStore {
     return undoSize > 0;
   }
 
-  undo() {
+  undo(): void {
     this.editor?.undo();
   }
 
   /**
    * @returns `true` if there is history to redo
    */
-  get canRedo() {
-    this._observeEditorChanges();
+  get canRedo(): boolean {
+    this.observeEditorChanges();
     if (!this.editor) {
       return false;
     }
@@ -117,11 +121,11 @@ export default class EditorStore {
     return redoSize > 0;
   }
 
-  redo() {
+  redo(): void {
     this.editor?.redo();
   }
 
-  toggleLineNumbers() {
+  toggleLineNumbers(): void {
     this.showLineNumbers = !this.showLineNumbers;
   }
 }
diff --git a/language-web/src/main/js/index.tsx b/language-web/src/main/js/index.tsx
index f59b40a9..24f0b69d 100644
--- a/language-web/src/main/js/index.tsx
+++ b/language-web/src/main/js/index.tsx
@@ -1,12 +1,12 @@
-import { CacheProvider } from "@emotion/react";
+import { CacheProvider } from '@emotion/react';
 import React from 'react';
 import { render } from 'react-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider, createTheme } from '@material-ui/core/styles';
-import { getCache } from "tss-react/cache";
+import { getCache } from 'tss-react/cache';
 
-import App from './App';
-import RootStore, { RootStoreProvider } from './RootStore';
+import { App } from './App';
+import { RootStore, RootStoreProvider } from './RootStore';
 
 import '../css/index.scss';
 
@@ -68,9 +68,9 @@ const theme = createTheme({
 const app = (
   <CacheProvider value={getCache()}>
     <ThemeProvider theme={theme}>
-      <CssBaseline/>
+      <CssBaseline />
       <RootStoreProvider rootStore={rootStore}>
-        <App/>
+        <App />
       </RootStoreProvider>
     </ThemeProvider>
   </CacheProvider>
diff --git a/language-web/src/main/js/makeStyles.ts b/language-web/src/main/js/makeStyles.ts
index 1dee6c1f..a80e8858 100644
--- a/language-web/src/main/js/makeStyles.ts
+++ b/language-web/src/main/js/makeStyles.ts
@@ -1,4 +1,4 @@
-import { createMakeStyles } from "tss-react";
-import { useTheme } from "@material-ui/core/styles";
+import { createMakeStyles } from 'tss-react';
+import { useTheme } from '@material-ui/core/styles';
 
 export const { makeStyles } = createMakeStyles({ useTheme });