14 files changed, 177 insertions, 124 deletions

diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 015dd764..10de68ee 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -2,7 +2,7 @@
   "name": "@refinery/frontend",
   "version": "0.0.0",
   "description": "Web frontend for Refinery",
-  "prive": true,
+  "private": true,
   "scripts": {
     "build": "cross-env MODE=production vite build",
     "serve": "cross-env MODE=development vite serve",
@@ -24,23 +24,23 @@
   "homepage": "https://refinery.tools",
   "dependencies": {
     "@codemirror/autocomplete": "^6.3.0",
-    "@codemirror/commands": "^6.1.1",
-    "@codemirror/language": "^6.2.1",
+    "@codemirror/commands": "^6.1.2",
+    "@codemirror/language": "^6.3.0",
     "@codemirror/lint": "^6.0.0",
-    "@codemirror/search": "^6.2.1",
+    "@codemirror/search": "^6.2.2",
     "@codemirror/state": "^6.1.2",
-    "@codemirror/view": "^6.3.0",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@fontsource/inter": "^4.5.13",
+    "@codemirror/view": "^6.4.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@fontsource/inter": "^4.5.14",
     "@fontsource/jetbrains-mono": "^4.5.11",
     "@lezer/common": "^1.0.1",
-    "@lezer/highlight": "^1.1.1",
+    "@lezer/highlight": "^1.1.2",
     "@lezer/lr": "^1.2.3",
     "@material-icons/svg": "^1.0.33",
-    "@mui/icons-material": "5.10.6",
-    "@mui/material": "5.10.8",
-    "ansi-styles": "^6.1.1",
+    "@mui/icons-material": "5.10.9",
+    "@mui/material": "5.10.12",
+    "ansi-styles": "^6.2.1",
     "escape-string-regexp": "^5.0.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.8.0",
@@ -49,44 +49,44 @@
     "mobx-react-lite": "^3.4.0",
     "ms": "^2.1.3",
     "nanoid": "^4.0.0",
-    "notistack": "^2.0.5",
+    "notistack": "^2.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "xstate": "^4.33.6",
+    "xstate": "^4.34.0",
     "zod": "^3.19.1"
   },
   "devDependencies": {
     "@lezer/generator": "^1.1.1",
-    "@types/eslint": "^8.4.6",
+    "@types/eslint": "^8.4.10",
     "@types/html-minifier-terser": "^7.0.0",
     "@types/lodash-es": "^4.17.6",
     "@types/ms": "^0.7.31",
-    "@types/node": "^18.8.0",
+    "@types/node": "^18.11.9",
     "@types/prettier": "^2.7.1",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.39.0",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "@vitejs/plugin-react": "^2.2.0",
     "@xstate/cli": "^0.3.3",
     "cross-env": "^7.0.3",
-    "eslint": "^8.24.0",
+    "eslint": "^8.26.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-mobx": "^0.0.9",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-minifier-terser": "^7.0.0",
     "prettier": "^2.7.1",
-    "typescript": "4.8.2",
-    "vite": "^3.1.4",
+    "typescript": "4.8.4",
+    "vite": "^3.2.2",
     "vite-plugin-inject-preload": "^1.1.0",
-    "vite-plugin-pwa": "^0.13.1",
+    "vite-plugin-pwa": "^0.13.2",
     "workbox-window": "^6.5.4"
   }
 }
diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx
index 90514044..a471690b 100644
--- a/subprojects/frontend/src/App.tsx
+++ b/subprojects/frontend/src/App.tsx
@@ -1,21 +1,33 @@
-import Grow from '@mui/material/Grow';
-import Stack from '@mui/material/Stack';
-import { SnackbarProvider } from 'notistack';
-import React from 'react';
+import Box from '@mui/material/Box';
+import CssBaseline from '@mui/material/CssBaseline';
+import React, { StrictMode, Suspense, lazy } from 'react';
 
-import TopBar from './TopBar';
-import UpdateNotification from './UpdateNotification';
-import EditorPane from './editor/EditorPane';
+import Loading from './Loading';
+import type RootStore from './RootStore';
+import RootStoreProvider from './RootStoreProvider';
+import WindowControlsOverlayColor from './WindowControlsOverlayColor';
+import ThemeProvider from './theme/ThemeProvider';
 
-export default function App(): JSX.Element {
+const Refinery = lazy(() => import('./Refinery.js'));
+
+export default function App({
+  rootStore,
+}: {
+  rootStore: RootStore;
+}): JSX.Element {
   return (
-    // @ts-expect-error -- notistack has problems with `exactOptionalPropertyTypes
-    <SnackbarProvider TransitionComponent={Grow}>
-      <UpdateNotification />
-      <Stack direction="column" height="100vh" overflow="auto">
-        <TopBar />
-        <EditorPane />
-      </Stack>
-    </SnackbarProvider>
+    <StrictMode>
+      <RootStoreProvider rootStore={rootStore}>
+        <ThemeProvider>
+          <CssBaseline enableColorScheme />
+          <WindowControlsOverlayColor />
+          <Box height="100vh" overflow="auto">
+            <Suspense fallback={<Loading />}>
+              <Refinery />
+            </Suspense>
+          </Box>
+        </ThemeProvider>
+      </RootStoreProvider>
+    </StrictMode>
   );
 }
diff --git a/subprojects/frontend/src/Refinery.tsx b/subprojects/frontend/src/Refinery.tsx
new file mode 100644
index 00000000..41f835b3
--- /dev/null
+++ b/subprojects/frontend/src/Refinery.tsx
@@ -0,0 +1,21 @@
+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';
+import EditorPane from './editor/EditorPane';
+
+export default function Refinery(): JSX.Element {
+  return (
+    // @ts-expect-error -- notistack has problems with `exactOptionalPropertyTypes
+    <SnackbarProvider TransitionComponent={Grow}>
+      <UpdateNotification />
+      <Stack direction="column" height="100vh" overflow="auto">
+        <TopBar />
+        <EditorPane />
+      </Stack>
+    </SnackbarProvider>
+  );
+}
diff --git a/subprojects/frontend/src/RootStore.tsx b/subprojects/frontend/src/RootStore.ts
index c1674a3c..54a80501 100644
--- a/subprojects/frontend/src/RootStore.tsx
+++ b/subprojects/frontend/src/RootStore.ts
@@ -1,6 +1,5 @@
 import { getLogger } from 'loglevel';
 import { makeAutoObservable, runInAction } from 'mobx';
-import React, { createContext, useContext } from 'react';
 
 import PWAStore from './PWAStore';
 import type EditorStore from './editor/EditorStore';
@@ -15,6 +14,8 @@ export default class RootStore {
 
   readonly themeStore: ThemeStore;
 
+  disposed = false;
+
   constructor(initialValue: string) {
     this.pwaStore = new PWAStore();
     this.themeStore = new ThemeStore();
@@ -25,6 +26,9 @@ export default class RootStore {
     import('./editor/EditorStore')
       .then(({ default: EditorStore }) => {
         runInAction(() => {
+          if (this.disposed) {
+            return;
+          }
           this.editorStore = new EditorStore(initialValue, this.pwaStore);
         });
       })
@@ -32,29 +36,12 @@ export default class RootStore {
         log.error('Failed to load EditorStore', error);
       });
   }
-}
-
-const StoreContext = createContext<RootStore | undefined>(undefined);
 
-export interface RootStoreProviderProps {
-  children: JSX.Element;
-
-  rootStore: RootStore;
-}
-
-export function RootStoreProvider({
-  children,
-  rootStore,
-}: RootStoreProviderProps): JSX.Element {
-  return (
-    <StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>
-  );
-}
-
-export const useRootStore = (): RootStore => {
-  const rootStore = useContext(StoreContext);
-  if (!rootStore) {
-    throw new Error('useRootStore must be used within RootStoreProvider');
+  dispose(): void {
+    if (this.disposed) {
+      return;
+    }
+    this.editorStore?.dispose();
+    this.disposed = true;
   }
-  return rootStore;
-};
+}
diff --git a/subprojects/frontend/src/RootStoreProvider.tsx b/subprojects/frontend/src/RootStoreProvider.tsx
new file mode 100644
index 00000000..70ac7776
--- /dev/null
+++ b/subprojects/frontend/src/RootStoreProvider.tsx
@@ -0,0 +1,29 @@
+import React, { type ReactNode, createContext, useContext } from 'react';
+
+import type RootStore from './RootStore';
+
+const StoreContext = createContext<RootStore | undefined>(undefined);
+
+export function useRootStore(): RootStore {
+  const rootStore = useContext(StoreContext);
+  if (!rootStore) {
+    throw new Error('useRootStore must be used within RootStoreProvider');
+  }
+  return rootStore;
+}
+
+export default function RootStoreProvider({
+  children,
+  rootStore,
+}: {
+  children?: ReactNode;
+  rootStore: RootStore;
+}): JSX.Element {
+  return (
+    <StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>
+  );
+}
+
+RootStoreProvider.defaultProps = {
+  children: undefined,
+};
diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx
index 5602f3bc..52606242 100644
--- a/subprojects/frontend/src/ToggleDarkModeButton.tsx
+++ b/subprojects/frontend/src/ToggleDarkModeButton.tsx
@@ -4,7 +4,7 @@ import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import { useRootStore } from './RootStore';
+import { useRootStore } from './RootStoreProvider';
 
 export default observer(function ToggleDarkModeButton(): JSX.Element {
   const { themeStore } = useRootStore();
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index a060ff9e..79ea0b65 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -7,7 +7,7 @@ import { throttle } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { useRootStore } from './RootStore';
+import { useRootStore } from './RootStoreProvider';
 import ToggleDarkModeButton from './ToggleDarkModeButton';
 import GenerateButton from './editor/GenerateButton';
 
diff --git a/subprojects/frontend/src/UpdateNotification.tsx b/subprojects/frontend/src/UpdateNotification.tsx
index d260e3b7..8c46186a 100644
--- a/subprojects/frontend/src/UpdateNotification.tsx
+++ b/subprojects/frontend/src/UpdateNotification.tsx
@@ -2,7 +2,7 @@ import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 
-import { useRootStore } from './RootStore';
+import { useRootStore } from './RootStoreProvider';
 import { ContrastThemeProvider } from './theme/ThemeProvider';
 import useDelayedSnackbar from './utils/useDelayedSnackbar';
 
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index 199a8e1d..0db4b892 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -7,7 +7,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
 
-import { useRootStore } from '../RootStore';
+import { useRootStore } from '../RootStoreProvider';
 
 import ConnectionStatusNotification from './ConnectionStatusNotification';
 import EditorArea from './EditorArea';
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index d13f644c..4ee24779 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -263,4 +263,8 @@ export default class EditorStore {
     this.client.formatText();
     return true;
   }
+
+  dispose(): void {
+    this.client.dispose();
+  }
 }
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index f7fe61b9..2c0259bf 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,16 +1,9 @@
-import Box from '@mui/material/Box';
-import CssBaseline from '@mui/material/CssBaseline';
 import { configure } from 'mobx';
-import React, { Suspense, lazy } from 'react';
-import { createRoot } from 'react-dom/client';
+import React from 'react';
+import { type Root, createRoot } from 'react-dom/client';
 
-import Loading from './Loading';
-import RootStore, { RootStoreProvider } from './RootStore';
-import WindowControlsOverlayColor from './WindowControlsOverlayColor';
-import ThemeProvider from './theme/ThemeProvider';
-import getLogger from './utils/getLogger';
-
-const log = getLogger('index');
+import App from './App';
+import RootStore from './RootStore';
 
 const initialValue = `class Family {
     contains Person[] members
@@ -57,30 +50,45 @@ configure({
   enforceActions: 'always',
 });
 
-const rootStore = new RootStore(initialValue);
+let HotRootStore = RootStore;
+let HotApp = App;
+
+function createStore(): RootStore {
+  return new HotRootStore(initialValue);
+}
 
-const App = lazy(() => import('./App.js'));
+let rootStore = createStore();
 
-const app = (
-  <React.StrictMode>
-    <RootStoreProvider rootStore={rootStore}>
-      <ThemeProvider>
-        <CssBaseline enableColorScheme />
-        <WindowControlsOverlayColor />
-        <Box height="100vh" overflow="auto">
-          <Suspense fallback={<Loading />}>
-            <App />
-          </Suspense>
-        </Box>
-      </ThemeProvider>
-    </RootStoreProvider>
-  </React.StrictMode>
-);
+let root: Root | undefined;
 
-const rootElement = document.getElementById('app');
-if (rootElement === null) {
-  log.error('Root element not found');
-} else {
-  const root = createRoot(rootElement);
-  root.render(app);
+function render(): void {
+  root?.render(<HotApp rootStore={rootStore} />);
 }
+
+if (import.meta.hot) {
+  import.meta.hot.accept('./App', (module) => {
+    if (module === undefined) {
+      return;
+    }
+    ({ default: HotApp } = module as unknown as typeof import('./App'));
+    render();
+  });
+  import.meta.hot.accept('./RootStore', (module) => {
+    if (module === undefined) {
+      return;
+    }
+    ({ default: HotRootStore } =
+      module as unknown as typeof import('./RootStore'));
+    rootStore.dispose();
+    rootStore = createStore();
+    render();
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('app');
+  if (rootElement !== null) {
+    root = createRoot(rootElement);
+    render();
+  }
+});
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index d990fd5d..060a5e9a 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -14,7 +14,7 @@ import {
 import { observer } from 'mobx-react-lite';
 import React, { type ReactNode, createContext, useContext } from 'react';
 
-import { useRootStore } from '../RootStore';
+import { useRootStore } from '../RootStoreProvider';
 
 interface OuterPalette {
   background: string;
diff --git a/subprojects/frontend/src/xtext/XtextClient.ts b/subprojects/frontend/src/xtext/XtextClient.ts
index cd5d280d..e7d26ae6 100644
--- a/subprojects/frontend/src/xtext/XtextClient.ts
+++ b/subprojects/frontend/src/xtext/XtextClient.ts
@@ -120,4 +120,8 @@ export default class XtextClient {
       log.error('Error while formatting text', e);
     });
   }
+
+  dispose(): void {
+    this.webSocketClient.disconnect();
+  }
 }
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index 1059ed2f..e690d005 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -1,3 +1,4 @@
+import { setDefaultResultOrder } from 'node:dns';
 import { readFileSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -9,6 +10,8 @@ import { defineConfig, PluginOption } from 'vite';
 import injectPreload from 'vite-plugin-inject-preload';
 import { VitePWA } from 'vite-plugin-pwa';
 
+setDefaultResultOrder('verbatim');
+
 const thisDir = path.dirname(fileURLToPath(import.meta.url));
 
 const mode = process.env.MODE || 'development';
@@ -22,7 +25,7 @@ function portNumberOrElse(envName: string, fallback: number): number {
 
 const listenHost = process.env.LISTEN_HOST || 'localhost';
 const listenPort = portNumberOrElse('LISTEN_PORT', 1313);
-const apiHost = process.env.API_HOST || listenHost;
+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;
@@ -60,15 +63,7 @@ export default defineConfig({
   cacheDir: path.join(thisDir, 'build/vite/cache'),
   plugins: [
     minifyPlugin,
-    react({
-      babel: {
-        // Gets rid of deoptimization warnings for large chunks.
-        // We don't need to minify here, because the output of Babel
-        // will get passed to esbuild anyways.
-        compact: false,
-        minified: false,
-      },
-    }),
+    react(),
     injectPreload({
       files: [
         {
@@ -87,12 +82,6 @@ export default defineConfig({
       strategies: 'generateSW',
       registerType: 'prompt',
       injectRegister: null,
-      devOptions: {
-        enabled: true,
-      },
-      // Unregister service worker installed in production mode
-      // if Vite is started in development mode on the same domain.
-      selfDestroying: isDevelopment,
       workbox: {
         globPatterns: [
           '**/*.{css,html,js}',
@@ -101,7 +90,6 @@ export default defineConfig({
         ],
         dontCacheBustURLsMatching: /\.(?:css|js|woff2?)$/,
         navigateFallbackDenylist: [/^\/xtext-service/],
-        sourcemap: isDevelopment,
       },
       includeAssets: ['apple-touch-icon.png', 'favicon.svg', 'mask-icon.svg'],
       manifest: {