diff options
Diffstat (limited to 'subprojects/frontend/src/index.tsx')
-rw-r--r-- | subprojects/frontend/src/index.tsx | 76 |
1 files changed, 42 insertions, 34 deletions
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 @@ | |||
1 | import Box from '@mui/material/Box'; | ||
2 | import CssBaseline from '@mui/material/CssBaseline'; | ||
3 | import { configure } from 'mobx'; | 1 | import { configure } from 'mobx'; |
4 | import React, { Suspense, lazy } from 'react'; | 2 | import React from 'react'; |
5 | import { createRoot } from 'react-dom/client'; | 3 | import { type Root, createRoot } from 'react-dom/client'; |
6 | 4 | ||
7 | import Loading from './Loading'; | 5 | import App from './App'; |
8 | import RootStore, { RootStoreProvider } from './RootStore'; | 6 | import RootStore from './RootStore'; |
9 | import WindowControlsOverlayColor from './WindowControlsOverlayColor'; | ||
10 | import ThemeProvider from './theme/ThemeProvider'; | ||
11 | import getLogger from './utils/getLogger'; | ||
12 | |||
13 | const log = getLogger('index'); | ||
14 | 7 | ||
15 | const initialValue = `class Family { | 8 | const initialValue = `class Family { |
16 | contains Person[] members | 9 | contains Person[] members |
@@ -57,30 +50,45 @@ configure({ | |||
57 | enforceActions: 'always', | 50 | enforceActions: 'always', |
58 | }); | 51 | }); |
59 | 52 | ||
60 | const rootStore = new RootStore(initialValue); | 53 | let HotRootStore = RootStore; |
54 | let HotApp = App; | ||
55 | |||
56 | function createStore(): RootStore { | ||
57 | return new HotRootStore(initialValue); | ||
58 | } | ||
61 | 59 | ||
62 | const App = lazy(() => import('./App.js')); | 60 | let rootStore = createStore(); |
63 | 61 | ||
64 | const app = ( | 62 | let root: Root | undefined; |
65 | <React.StrictMode> | ||
66 | <RootStoreProvider rootStore={rootStore}> | ||
67 | <ThemeProvider> | ||
68 | <CssBaseline enableColorScheme /> | ||
69 | <WindowControlsOverlayColor /> | ||
70 | <Box height="100vh" overflow="auto"> | ||
71 | <Suspense fallback={<Loading />}> | ||
72 | <App /> | ||
73 | </Suspense> | ||
74 | </Box> | ||
75 | </ThemeProvider> | ||
76 | </RootStoreProvider> | ||
77 | </React.StrictMode> | ||
78 | ); | ||
79 | 63 | ||
80 | const rootElement = document.getElementById('app'); | 64 | function render(): void { |
81 | if (rootElement === null) { | 65 | root?.render(<HotApp rootStore={rootStore} />); |
82 | log.error('Root element not found'); | ||
83 | } else { | ||
84 | const root = createRoot(rootElement); | ||
85 | root.render(app); | ||
86 | } | 66 | } |
67 | |||
68 | if (import.meta.hot) { | ||
69 | import.meta.hot.accept('./App', (module) => { | ||
70 | if (module === undefined) { | ||
71 | return; | ||
72 | } | ||
73 | ({ default: HotApp } = module as unknown as typeof import('./App')); | ||
74 | render(); | ||
75 | }); | ||
76 | import.meta.hot.accept('./RootStore', (module) => { | ||
77 | if (module === undefined) { | ||
78 | return; | ||
79 | } | ||
80 | ({ default: HotRootStore } = | ||
81 | module as unknown as typeof import('./RootStore')); | ||
82 | rootStore.dispose(); | ||
83 | rootStore = createStore(); | ||
84 | render(); | ||
85 | }); | ||
86 | } | ||
87 | |||
88 | document.addEventListener('DOMContentLoaded', () => { | ||
89 | const rootElement = document.getElementById('app'); | ||
90 | if (rootElement !== null) { | ||
91 | root = createRoot(rootElement); | ||
92 | render(); | ||
93 | } | ||
94 | }); | ||