refactor(frontend): improve HMR experience

Use a HMR acceptor as in
https://github.com/vitejs/vite/issues/10227#issuecomment-1256969751

Also updates frontend tooling to the latest version
(yarn now support typescript 4.8.4)

1 files changed, 47 insertions, 0 deletions

diff --git a/subprojects/frontend/src/RootStore.ts b/subprojects/frontend/src/RootStore.ts
new file mode 100644
index 00000000..54a80501
--- /dev/null
+++ b/subprojects/frontend/src/RootStore.ts
@@ -0,0 +1,47 @@
+import { getLogger } from 'loglevel';
+import { makeAutoObservable, runInAction } from 'mobx';
+
+import PWAStore from './PWAStore';
+import type EditorStore from './editor/EditorStore';
+import ThemeStore from './theme/ThemeStore';
+
+const log = getLogger('RootStore');
+
+export default class RootStore {
+  editorStore: EditorStore | undefined;
+
+  readonly pwaStore: PWAStore;
+
+  readonly themeStore: ThemeStore;
+
+  disposed = false;
+
+  constructor(initialValue: string) {
+    this.pwaStore = new PWAStore();
+    this.themeStore = new ThemeStore();
+    makeAutoObservable(this, {
+      pwaStore: false,
+      themeStore: false,
+    });
+    import('./editor/EditorStore')
+      .then(({ default: EditorStore }) => {
+        runInAction(() => {
+          if (this.disposed) {
+            return;
+          }
+          this.editorStore = new EditorStore(initialValue, this.pwaStore);
+        });
+      })
+      .catch((error) => {
+        log.error('Failed to load EditorStore', error);
+      });
+  }
+
+  dispose(): void {
+    if (this.disposed) {
+      return;
+    }
+    this.editorStore?.dispose();
+    this.disposed = true;
+  }
+}