diff options
Diffstat (limited to 'subprojects')
-rw-r--r-- | subprojects/frontend/.eslintrc.cjs | 5 | ||||
-rw-r--r-- | subprojects/frontend/package.json | 5 | ||||
-rw-r--r-- | subprojects/frontend/src/RootStore.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/ToggleDarkModeButton.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorArea.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorButtons.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorPane.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorStore.ts | 42 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/GenerateButton.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/PanelStore.ts | 18 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/SearchPanelPortal.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/SearchPanelStore.ts | 3 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/SearchToolbar.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/index.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/theme/ThemeProvider.tsx | 10 | ||||
-rw-r--r-- | subprojects/frontend/src/theme/ThemeStore.ts | 9 |
16 files changed, 71 insertions, 75 deletions
diff --git a/subprojects/frontend/.eslintrc.cjs b/subprojects/frontend/.eslintrc.cjs index 442ed4cd..1db67c11 100644 --- a/subprojects/frontend/.eslintrc.cjs +++ b/subprojects/frontend/.eslintrc.cjs | |||
@@ -8,13 +8,14 @@ const project = [ | |||
8 | 8 | ||
9 | /** @type {import('eslint').Linter.Config} */ | 9 | /** @type {import('eslint').Linter.Config} */ |
10 | module.exports = { | 10 | module.exports = { |
11 | plugins: ['@typescript-eslint'], | 11 | plugins: ['@typescript-eslint', 'mobx'], |
12 | extends: [ | 12 | extends: [ |
13 | 'airbnb', | 13 | 'airbnb', |
14 | 'airbnb-typescript', | 14 | 'airbnb-typescript', |
15 | 'airbnb/hooks', | 15 | 'airbnb/hooks', |
16 | 'plugin:@typescript-eslint/recommended', | 16 | 'plugin:@typescript-eslint/recommended', |
17 | 'plugin:@typescript-eslint/recommended-requiring-type-checking', | 17 | 'plugin:@typescript-eslint/recommended-requiring-type-checking', |
18 | 'plugin:mobx/recommended', | ||
18 | 'plugin:prettier/recommended', | 19 | 'plugin:prettier/recommended', |
19 | ], | 20 | ], |
20 | parserOptions: { | 21 | parserOptions: { |
@@ -53,6 +54,8 @@ module.exports = { | |||
53 | 'newlines-between': 'always', | 54 | 'newlines-between': 'always', |
54 | }, | 55 | }, |
55 | ], | 56 | ], |
57 | // Not all components depend on observable state. | ||
58 | 'mobx/missing-observer': 'off', | ||
56 | // A dangling underscore, while not neccessary for all private fields, | 59 | // A dangling underscore, while not neccessary for all private fields, |
57 | // is useful for backing fields of properties that should be read-only from outside the class. | 60 | // is useful for backing fields of properties that should be read-only from outside the class. |
58 | 'no-underscore-dangle': [ | 61 | 'no-underscore-dangle': [ |
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json index f47ced13..b80e0561 100644 --- a/subprojects/frontend/package.json +++ b/subprojects/frontend/package.json | |||
@@ -65,15 +65,16 @@ | |||
65 | "@typescript-eslint/parser": "^5.35.1", | 65 | "@typescript-eslint/parser": "^5.35.1", |
66 | "@vitejs/plugin-react": "^2.0.1", | 66 | "@vitejs/plugin-react": "^2.0.1", |
67 | "cross-env": "^7.0.3", | 67 | "cross-env": "^7.0.3", |
68 | "eslint": "^8.22.0", | 68 | "eslint": "^8.23.0", |
69 | "eslint-config-airbnb": "^19.0.4", | 69 | "eslint-config-airbnb": "^19.0.4", |
70 | "eslint-config-airbnb-typescript": "^17.0.0", | 70 | "eslint-config-airbnb-typescript": "^17.0.0", |
71 | "eslint-config-prettier": "^8.5.0", | 71 | "eslint-config-prettier": "^8.5.0", |
72 | "eslint-import-resolver-typescript": "^3.5.0", | 72 | "eslint-import-resolver-typescript": "^3.5.0", |
73 | "eslint-plugin-import": "^2.26.0", | 73 | "eslint-plugin-import": "^2.26.0", |
74 | "eslint-plugin-jsx-a11y": "^6.6.1", | 74 | "eslint-plugin-jsx-a11y": "^6.6.1", |
75 | "eslint-plugin-mobx": "^0.0.9", | ||
75 | "eslint-plugin-prettier": "^4.2.1", | 76 | "eslint-plugin-prettier": "^4.2.1", |
76 | "eslint-plugin-react": "^7.31.0", | 77 | "eslint-plugin-react": "^7.31.1", |
77 | "eslint-plugin-react-hooks": "^4.6.0", | 78 | "eslint-plugin-react-hooks": "^4.6.0", |
78 | "html-minifier-terser": "^7.0.0", | 79 | "html-minifier-terser": "^7.0.0", |
79 | "prettier": "^2.7.1", | 80 | "prettier": "^2.7.1", |
diff --git a/subprojects/frontend/src/RootStore.tsx b/subprojects/frontend/src/RootStore.tsx index e08dd750..5aa580d1 100644 --- a/subprojects/frontend/src/RootStore.tsx +++ b/subprojects/frontend/src/RootStore.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import { getLogger } from 'loglevel'; | 1 | import { getLogger } from 'loglevel'; |
2 | import { makeObservable, observable, runInAction } from 'mobx'; | 2 | import { makeAutoObservable, runInAction } from 'mobx'; |
3 | import React, { createContext, useContext } from 'react'; | 3 | import React, { createContext, useContext } from 'react'; |
4 | 4 | ||
5 | import type EditorStore from './editor/EditorStore'; | 5 | import type EditorStore from './editor/EditorStore'; |
@@ -14,8 +14,8 @@ export default class RootStore { | |||
14 | 14 | ||
15 | constructor(initialValue: string) { | 15 | constructor(initialValue: string) { |
16 | this.themeStore = new ThemeStore(); | 16 | this.themeStore = new ThemeStore(); |
17 | makeObservable(this, { | 17 | makeAutoObservable(this, { |
18 | editorStore: observable, | 18 | themeStore: false, |
19 | }); | 19 | }); |
20 | import('./editor/EditorStore') | 20 | import('./editor/EditorStore') |
21 | .then(({ default: EditorStore }) => { | 21 | .then(({ default: EditorStore }) => { |
diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx index 1685ec80..5602f3bc 100644 --- a/subprojects/frontend/src/ToggleDarkModeButton.tsx +++ b/subprojects/frontend/src/ToggleDarkModeButton.tsx | |||
@@ -6,7 +6,7 @@ import React from 'react'; | |||
6 | 6 | ||
7 | import { useRootStore } from './RootStore'; | 7 | import { useRootStore } from './RootStore'; |
8 | 8 | ||
9 | function ToggleDarkModeButton(): JSX.Element { | 9 | export default observer(function ToggleDarkModeButton(): JSX.Element { |
10 | const { themeStore } = useRootStore(); | 10 | const { themeStore } = useRootStore(); |
11 | const { darkMode } = themeStore; | 11 | const { darkMode } = themeStore; |
12 | 12 | ||
@@ -19,6 +19,4 @@ function ToggleDarkModeButton(): JSX.Element { | |||
19 | {darkMode ? <LightModeIcon /> : <DarkModeIcon />} | 19 | {darkMode ? <LightModeIcon /> : <DarkModeIcon />} |
20 | </IconButton> | 20 | </IconButton> |
21 | ); | 21 | ); |
22 | } | 22 | }); |
23 | |||
24 | export default observer(ToggleDarkModeButton); | ||
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx index 1c9b031b..7c5ac5fb 100644 --- a/subprojects/frontend/src/editor/EditorArea.tsx +++ b/subprojects/frontend/src/editor/EditorArea.tsx | |||
@@ -5,7 +5,7 @@ import React, { useCallback, useEffect } from 'react'; | |||
5 | import type EditorStore from './EditorStore'; | 5 | import type EditorStore from './EditorStore'; |
6 | import EditorTheme from './EditorTheme'; | 6 | import EditorTheme from './EditorTheme'; |
7 | 7 | ||
8 | function EditorArea({ | 8 | export default observer(function EditorArea({ |
9 | editorStore, | 9 | editorStore, |
10 | }: { | 10 | }: { |
11 | editorStore: EditorStore; | 11 | editorStore: EditorStore; |
@@ -32,6 +32,4 @@ function EditorArea({ | |||
32 | ref={editorParentRef} | 32 | ref={editorParentRef} |
33 | /> | 33 | /> |
34 | ); | 34 | ); |
35 | } | 35 | }); |
36 | |||
37 | export default observer(EditorArea); | ||
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx index cbe7c424..d2273c6c 100644 --- a/subprojects/frontend/src/editor/EditorButtons.tsx +++ b/subprojects/frontend/src/editor/EditorButtons.tsx | |||
@@ -32,7 +32,7 @@ function getLintIcon(severity: Diagnostic['severity'] | undefined) { | |||
32 | } | 32 | } |
33 | } | 33 | } |
34 | 34 | ||
35 | function EditorButtons({ | 35 | export default observer(function EditorButtons({ |
36 | editorStore, | 36 | editorStore, |
37 | }: { | 37 | }: { |
38 | editorStore: EditorStore | undefined; | 38 | editorStore: EditorStore | undefined; |
@@ -102,6 +102,4 @@ function EditorButtons({ | |||
102 | </IconButton> | 102 | </IconButton> |
103 | </Stack> | 103 | </Stack> |
104 | ); | 104 | ); |
105 | } | 105 | }); |
106 | |||
107 | export default observer(EditorButtons); | ||
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx index df43d2c9..2651726c 100644 --- a/subprojects/frontend/src/editor/EditorPane.tsx +++ b/subprojects/frontend/src/editor/EditorPane.tsx | |||
@@ -29,7 +29,7 @@ function EditorLoading(): JSX.Element { | |||
29 | ); | 29 | ); |
30 | } | 30 | } |
31 | 31 | ||
32 | function EditorPane(): JSX.Element { | 32 | export default observer(function EditorPane(): JSX.Element { |
33 | const { editorStore } = useRootStore(); | 33 | const { editorStore } = useRootStore(); |
34 | 34 | ||
35 | return ( | 35 | return ( |
@@ -50,6 +50,4 @@ function EditorPane(): JSX.Element { | |||
50 | </Box> | 50 | </Box> |
51 | </Stack> | 51 | </Stack> |
52 | ); | 52 | ); |
53 | } | 53 | }); |
54 | |||
55 | export default observer(EditorPane); | ||
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index b634a427..4407376b 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts | |||
@@ -13,7 +13,7 @@ import { | |||
13 | type EditorState, | 13 | type EditorState, |
14 | } from '@codemirror/state'; | 14 | } from '@codemirror/state'; |
15 | import { type Command, EditorView } from '@codemirror/view'; | 15 | import { type Command, EditorView } from '@codemirror/view'; |
16 | import { action, computed, makeObservable, observable } from 'mobx'; | 16 | import { makeAutoObservable, observable } from 'mobx'; |
17 | import { nanoid } from 'nanoid'; | 17 | import { nanoid } from 'nanoid'; |
18 | 18 | ||
19 | import getLogger from '../utils/getLogger'; | 19 | import getLogger from '../utils/getLogger'; |
@@ -57,29 +57,15 @@ export default class EditorStore { | |||
57 | this.client = new XtextClient(this); | 57 | this.client = new XtextClient(this); |
58 | this.searchPanel = new SearchPanelStore(this); | 58 | this.searchPanel = new SearchPanelStore(this); |
59 | this.lintPanel = new LintPanelStore(this); | 59 | this.lintPanel = new LintPanelStore(this); |
60 | makeObservable(this, { | 60 | makeAutoObservable<EditorStore, 'client'>(this, { |
61 | id: false, | ||
61 | state: observable.ref, | 62 | state: observable.ref, |
63 | client: false, | ||
62 | view: observable.ref, | 64 | view: observable.ref, |
63 | showLineNumbers: observable, | 65 | searchPanel: false, |
64 | errorCount: observable, | 66 | lintPanel: false, |
65 | warningCount: observable, | 67 | contentAssist: false, |
66 | infoCount: observable, | 68 | formatText: false, |
67 | highestDiagnosticLevel: computed, | ||
68 | canUndo: computed, | ||
69 | canRedo: computed, | ||
70 | setDarkMode: action, | ||
71 | setEditorParent: action, | ||
72 | dispatch: action, | ||
73 | dispatchTransaction: action, | ||
74 | doCommand: action, | ||
75 | doStateCommand: action, | ||
76 | updateDiagnostics: action, | ||
77 | nextDiagnostic: action, | ||
78 | updateOccurrences: action, | ||
79 | updateSemanticHighlighting: action, | ||
80 | undo: action, | ||
81 | redo: action, | ||
82 | toggleLineNumbers: action, | ||
83 | }); | 69 | }); |
84 | } | 70 | } |
85 | 71 | ||
@@ -141,13 +127,11 @@ export default class EditorStore { | |||
141 | } | 127 | } |
142 | } | 128 | } |
143 | 129 | ||
144 | private readonly dispatchTransactionWithoutView = action( | 130 | private dispatchTransactionWithoutView(tr: Transaction): void { |
145 | (tr: Transaction) => { | 131 | log.trace('Editor transaction', tr); |
146 | log.trace('Editor transaction', tr); | 132 | this.state = tr.state; |
147 | this.state = tr.state; | 133 | this.client.onTransaction(tr); |
148 | this.client.onTransaction(tr); | 134 | } |
149 | }, | ||
150 | ); | ||
151 | 135 | ||
152 | doCommand(command: Command): boolean { | 136 | doCommand(command: Command): boolean { |
153 | if (this.view === undefined) { | 137 | if (this.view === undefined) { |
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx index a28f6b4b..5254f6cb 100644 --- a/subprojects/frontend/src/editor/GenerateButton.tsx +++ b/subprojects/frontend/src/editor/GenerateButton.tsx | |||
@@ -7,7 +7,7 @@ import type EditorStore from './EditorStore'; | |||
7 | 7 | ||
8 | const GENERATE_LABEL = 'Generate'; | 8 | const GENERATE_LABEL = 'Generate'; |
9 | 9 | ||
10 | function GenerateButton({ | 10 | export default observer(function GenerateButton({ |
11 | editorStore, | 11 | editorStore, |
12 | }: { | 12 | }: { |
13 | editorStore: EditorStore | undefined; | 13 | editorStore: EditorStore | undefined; |
@@ -53,6 +53,4 @@ function GenerateButton({ | |||
53 | {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`} | 53 | {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`} |
54 | </Button> | 54 | </Button> |
55 | ); | 55 | ); |
56 | } | 56 | }); |
57 | |||
58 | export default observer(GenerateButton); | ||
diff --git a/subprojects/frontend/src/editor/PanelStore.ts b/subprojects/frontend/src/editor/PanelStore.ts index e0e2b2f4..4f827280 100644 --- a/subprojects/frontend/src/editor/PanelStore.ts +++ b/subprojects/frontend/src/editor/PanelStore.ts | |||
@@ -18,13 +18,29 @@ export default class PanelStore { | |||
18 | private readonly closeCommand: Command, | 18 | private readonly closeCommand: Command, |
19 | protected readonly store: EditorStore, | 19 | protected readonly store: EditorStore, |
20 | ) { | 20 | ) { |
21 | makeObservable(this, { | 21 | makeObservable< |
22 | PanelStore, | ||
23 | | 'openCommand' | ||
24 | | 'closeCommand' | ||
25 | | 'store' | ||
26 | | 'setState' | ||
27 | | 'doOpen' | ||
28 | | 'doClose' | ||
29 | >(this, { | ||
30 | panelClass: false, | ||
31 | openCommand: false, | ||
32 | closeCommand: false, | ||
33 | store: false, | ||
22 | state: observable, | 34 | state: observable, |
23 | element: observable, | 35 | element: observable, |
36 | id: false, | ||
24 | open: action, | 37 | open: action, |
25 | close: action, | 38 | close: action, |
26 | toggle: action, | 39 | toggle: action, |
40 | setState: false, | ||
27 | synchronizeStateToView: action, | 41 | synchronizeStateToView: action, |
42 | doOpen: false, | ||
43 | doClose: false, | ||
28 | }); | 44 | }); |
29 | } | 45 | } |
30 | 46 | ||
diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx index e8301489..b6b375e3 100644 --- a/subprojects/frontend/src/editor/SearchPanelPortal.tsx +++ b/subprojects/frontend/src/editor/SearchPanelPortal.tsx | |||
@@ -5,7 +5,7 @@ import React from 'react'; | |||
5 | import type EditorStore from './EditorStore'; | 5 | import type EditorStore from './EditorStore'; |
6 | import SearchToolbar from './SearchToolbar'; | 6 | import SearchToolbar from './SearchToolbar'; |
7 | 7 | ||
8 | function SearchPanelPortal({ | 8 | export default observer(function SearchPanelPortal({ |
9 | editorStore: { searchPanel: searchPanelStore }, | 9 | editorStore: { searchPanel: searchPanelStore }, |
10 | }: { | 10 | }: { |
11 | editorStore: EditorStore; | 11 | editorStore: EditorStore; |
@@ -20,6 +20,4 @@ function SearchPanelPortal({ | |||
20 | <SearchToolbar searchPanelStore={searchPanelStore} /> | 20 | <SearchToolbar searchPanelStore={searchPanelStore} /> |
21 | </Portal> | 21 | </Portal> |
22 | ); | 22 | ); |
23 | } | 23 | }); |
24 | |||
25 | export default observer(SearchPanelPortal); | ||
diff --git a/subprojects/frontend/src/editor/SearchPanelStore.ts b/subprojects/frontend/src/editor/SearchPanelStore.ts index 8dd02ae6..65d595a8 100644 --- a/subprojects/frontend/src/editor/SearchPanelStore.ts +++ b/subprojects/frontend/src/editor/SearchPanelStore.ts | |||
@@ -21,7 +21,7 @@ export default class SearchPanelStore extends PanelStore { | |||
21 | // Use a custom class name to avoid specificity issues with | 21 | // Use a custom class name to avoid specificity issues with |
22 | // CodeMirror `.cm-search.cm-panel` CSS styles. | 22 | // CodeMirror `.cm-search.cm-panel` CSS styles. |
23 | super('refinery-cm-search', openSearchPanel, closeSearchPanel, store); | 23 | super('refinery-cm-search', openSearchPanel, closeSearchPanel, store); |
24 | makeObservable(this, { | 24 | makeObservable<SearchPanelStore, 'selectSearchField'>(this, { |
25 | searchField: observable.ref, | 25 | searchField: observable.ref, |
26 | query: computed, | 26 | query: computed, |
27 | invalidRegexp: computed, | 27 | invalidRegexp: computed, |
@@ -32,6 +32,7 @@ export default class SearchPanelStore extends PanelStore { | |||
32 | findPrevious: action, | 32 | findPrevious: action, |
33 | replaceNext: action, | 33 | replaceNext: action, |
34 | replaceAll: action, | 34 | replaceAll: action, |
35 | selectSearchField: false, | ||
35 | }); | 36 | }); |
36 | } | 37 | } |
37 | 38 | ||
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx index 895f1ca1..a9b9811d 100644 --- a/subprojects/frontend/src/editor/SearchToolbar.tsx +++ b/subprojects/frontend/src/editor/SearchToolbar.tsx | |||
@@ -27,7 +27,7 @@ const DimLabel = styled(FormControlLabel)(({ theme }) => ({ | |||
27 | }, | 27 | }, |
28 | })); | 28 | })); |
29 | 29 | ||
30 | function SearchToolbar({ | 30 | export default observer(function SearchToolbar({ |
31 | searchPanelStore, | 31 | searchPanelStore, |
32 | }: { | 32 | }: { |
33 | searchPanelStore: SearchPanelStore; | 33 | searchPanelStore: SearchPanelStore; |
@@ -271,6 +271,4 @@ function SearchToolbar({ | |||
271 | </Stack> | 271 | </Stack> |
272 | </Toolbar> | 272 | </Toolbar> |
273 | ); | 273 | ); |
274 | } | 274 | }); |
275 | |||
276 | export default observer(SearchToolbar); | ||
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx index 3f06b332..8436c7ae 100644 --- a/subprojects/frontend/src/index.tsx +++ b/subprojects/frontend/src/index.tsx | |||
@@ -1,5 +1,6 @@ | |||
1 | import Box from '@mui/material/Box'; | 1 | import Box from '@mui/material/Box'; |
2 | import CssBaseline from '@mui/material/CssBaseline'; | 2 | import CssBaseline from '@mui/material/CssBaseline'; |
3 | import { configure } from 'mobx'; | ||
3 | import { SnackbarProvider } from 'notistack'; | 4 | import { SnackbarProvider } from 'notistack'; |
4 | import React, { Suspense, lazy } from 'react'; | 5 | import React, { Suspense, lazy } from 'react'; |
5 | import { createRoot } from 'react-dom/client'; | 6 | import { createRoot } from 'react-dom/client'; |
@@ -60,6 +61,11 @@ age(bob, bobAge). | |||
60 | scope Family = 1, Person += 5..10. | 61 | scope Family = 1, Person += 5..10. |
61 | `; | 62 | `; |
62 | 63 | ||
64 | configure({ | ||
65 | enforceActions: 'always', | ||
66 | reactionRequiresObservable: true, | ||
67 | }); | ||
68 | |||
63 | const rootStore = new RootStore(initialValue); | 69 | const rootStore = new RootStore(initialValue); |
64 | 70 | ||
65 | const App = lazy(() => import('./App.js')); | 71 | const App = lazy(() => import('./App.js')); |
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index 5aaf3ad1..6f9a712e 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx | |||
@@ -313,7 +313,11 @@ ContrastThemeProvider.defaultProps = { | |||
313 | children: undefined, | 313 | children: undefined, |
314 | }; | 314 | }; |
315 | 315 | ||
316 | function ThemeProvider({ children }: { children?: ReactNode }): JSX.Element { | 316 | const ThemeProvider = observer(function ThemeProvider({ |
317 | children, | ||
318 | }: { | ||
319 | children?: ReactNode; | ||
320 | }): JSX.Element { | ||
317 | const { | 321 | const { |
318 | themeStore: { darkMode }, | 322 | themeStore: { darkMode }, |
319 | } = useRootStore(); | 323 | } = useRootStore(); |
@@ -326,10 +330,10 @@ function ThemeProvider({ children }: { children?: ReactNode }): JSX.Element { | |||
326 | {children} | 330 | {children} |
327 | </ThemeAndContrastThemeProvider> | 331 | </ThemeAndContrastThemeProvider> |
328 | ); | 332 | ); |
329 | } | 333 | }); |
330 | 334 | ||
331 | ThemeProvider.defaultProps = { | 335 | ThemeProvider.defaultProps = { |
332 | children: undefined, | 336 | children: undefined, |
333 | }; | 337 | }; |
334 | 338 | ||
335 | export default observer(ThemeProvider); | 339 | export default ThemeProvider; |
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts index 6fbd9f90..e09d8d99 100644 --- a/subprojects/frontend/src/theme/ThemeStore.ts +++ b/subprojects/frontend/src/theme/ThemeStore.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { action, computed, makeObservable, observable } from 'mobx'; | 1 | import { makeAutoObservable } from 'mobx'; |
2 | 2 | ||
3 | export enum ThemePreference { | 3 | export enum ThemePreference { |
4 | System, | 4 | System, |
@@ -17,12 +17,7 @@ export default class ThemeStore { | |||
17 | mediaQuery.addEventListener('change', (event) => { | 17 | mediaQuery.addEventListener('change', (event) => { |
18 | this.systemDarkMode = event.matches; | 18 | this.systemDarkMode = event.matches; |
19 | }); | 19 | }); |
20 | makeObservable(this, { | 20 | makeAutoObservable(this); |
21 | preference: observable, | ||
22 | systemDarkMode: observable, | ||
23 | darkMode: computed, | ||
24 | toggleDarkMode: action, | ||
25 | }); | ||
26 | } | 21 | } |
27 | 22 | ||
28 | get darkMode(): boolean { | 23 | get darkMode(): boolean { |