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, 29 insertions, 0 deletions

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,
+};