diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-04-19 02:40:25 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-05-16 00:55:01 +0200 |
commit | e95c17947ab36d82e7c401577912e9ddffadd0c6 (patch) | |
tree | 9ef5b18def985656388ee91a8afdce1153e6d1eb /packages/renderer | |
parent | chore(deps): Bump yarn version (diff) | |
download | sophie-e95c17947ab36d82e7c401577912e9ddffadd0c6.tar.gz sophie-e95c17947ab36d82e7c401577912e9ddffadd0c6.tar.zst sophie-e95c17947ab36d82e7c401577912e9ddffadd0c6.zip |
fix(renderer): Make RTL flipping more resilient to hot reloading
It seems moving the emotion cache into a separate file makes vite less
likely to try to hot-reload @emotion/cache (which would fail due to
creating the default cache twice).
We still have some vite hot reload problems, possibly connecte to
loading versions of react components with a different number of hook
calls.
Signed-off-by: Kristóf Marussy <kristof@marussy.com>
Diffstat (limited to 'packages/renderer')
-rw-r--r-- | packages/renderer/src/i18n/RtlCacheProvider.tsx | 17 | ||||
-rw-r--r-- | packages/renderer/src/i18n/createRtlCache.ts | 30 | ||||
-rw-r--r-- | packages/renderer/src/index.tsx | 5 |
3 files changed, 42 insertions, 10 deletions
diff --git a/packages/renderer/src/i18n/RtlCacheProvider.tsx b/packages/renderer/src/i18n/RtlCacheProvider.tsx index d54308b..be770b8 100644 --- a/packages/renderer/src/i18n/RtlCacheProvider.tsx +++ b/packages/renderer/src/i18n/RtlCacheProvider.tsx | |||
@@ -18,21 +18,20 @@ | |||
18 | * SPDX-License-Identifier: AGPL-3.0-only | 18 | * SPDX-License-Identifier: AGPL-3.0-only |
19 | */ | 19 | */ |
20 | 20 | ||
21 | import createCache from '@emotion/cache'; | 21 | import type { EmotionCache } from '@emotion/cache'; |
22 | import { CacheProvider } from '@emotion/react'; | 22 | import { CacheProvider } from '@emotion/react'; |
23 | import { observer } from 'mobx-react-lite'; | 23 | import { observer } from 'mobx-react-lite'; |
24 | import React, { ReactNode } from 'react'; | 24 | import React, { ReactNode } from 'react'; |
25 | import { prefixer } from 'stylis'; | ||
26 | import rtlPlugin from 'stylis-plugin-rtl'; | ||
27 | 25 | ||
28 | import { useStore } from '../components/StoreProvider'; | 26 | import { useStore } from '../components/StoreProvider'; |
29 | 27 | ||
30 | const rtlCache = createCache({ | 28 | function RtlCacheProvider({ |
31 | key: 'muirtl', | 29 | children, |
32 | stylisPlugins: [prefixer, rtlPlugin], | 30 | rtlCache, |
33 | }); | 31 | }: { |
34 | 32 | children?: ReactNode; | |
35 | function RtlCacheProvider({ children }: { children?: ReactNode }): JSX.Element { | 33 | rtlCache: EmotionCache; |
34 | }): JSX.Element { | ||
36 | const { | 35 | const { |
37 | shared: { writingDirection }, | 36 | shared: { writingDirection }, |
38 | } = useStore(); | 37 | } = useStore(); |
diff --git a/packages/renderer/src/i18n/createRtlCache.ts b/packages/renderer/src/i18n/createRtlCache.ts new file mode 100644 index 0000000..3c0f923 --- /dev/null +++ b/packages/renderer/src/i18n/createRtlCache.ts | |||
@@ -0,0 +1,30 @@ | |||
1 | /* | ||
2 | * Copyright (C) 2022 Kristóf Marussy <kristof@marussy.com> | ||
3 | * | ||
4 | * This file is part of Sophie. | ||
5 | * | ||
6 | * Sophie is free software: you can redistribute it and/or modify | ||
7 | * it under the terms of the GNU Affero General Public License as | ||
8 | * published by the Free Software Foundation, version 3. | ||
9 | * | ||
10 | * This program is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
17 | * | ||
18 | * SPDX-License-Identifier: AGPL-3.0-only | ||
19 | */ | ||
20 | |||
21 | import createCache, { type EmotionCache } from '@emotion/cache'; | ||
22 | import { prefixer } from 'stylis'; | ||
23 | import rtlPlugin from 'stylis-plugin-rtl'; | ||
24 | |||
25 | export default function createRtlCache(): EmotionCache { | ||
26 | return createCache({ | ||
27 | key: 'muirtl', | ||
28 | stylisPlugins: [prefixer, rtlPlugin], | ||
29 | }); | ||
30 | } | ||
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx index 2722d3b..72a9ffd 100644 --- a/packages/renderer/src/index.tsx +++ b/packages/renderer/src/index.tsx | |||
@@ -33,6 +33,7 @@ import StoreProvider from './components/StoreProvider'; | |||
33 | import ThemeProvider from './components/ThemeProvider'; | 33 | import ThemeProvider from './components/ThemeProvider'; |
34 | import { exposeToReduxDevtools, hotReload } from './devTools'; | 34 | import { exposeToReduxDevtools, hotReload } from './devTools'; |
35 | import RtlCacheProvider from './i18n/RtlCacheProvider'; | 35 | import RtlCacheProvider from './i18n/RtlCacheProvider'; |
36 | import createRtlCache from './i18n/createRtlCache'; | ||
36 | import loadRendererLocalization from './i18n/loadRendererLoalization'; | 37 | import loadRendererLocalization from './i18n/loadRendererLoalization'; |
37 | import { createAndConnectRendererStore } from './stores/RendererStore'; | 38 | import { createAndConnectRendererStore } from './stores/RendererStore'; |
38 | import { getLogger } from './utils/log'; | 39 | import { getLogger } from './utils/log'; |
@@ -66,13 +67,15 @@ const disposeSetHtmlLang = autorun(() => { | |||
66 | }); | 67 | }); |
67 | addDisposer(store, disposeSetHtmlLang); | 68 | addDisposer(store, disposeSetHtmlLang); |
68 | 69 | ||
70 | const rtlCache = createRtlCache(); | ||
71 | |||
69 | const App = lazy(() => import('./components/App')); | 72 | const App = lazy(() => import('./components/App')); |
70 | 73 | ||
71 | function Root(): JSX.Element { | 74 | function Root(): JSX.Element { |
72 | return ( | 75 | return ( |
73 | <React.StrictMode> | 76 | <React.StrictMode> |
74 | <StoreProvider store={store}> | 77 | <StoreProvider store={store}> |
75 | <RtlCacheProvider> | 78 | <RtlCacheProvider rtlCache={rtlCache}> |
76 | <ThemeProvider> | 79 | <ThemeProvider> |
77 | <CssBaseline enableColorScheme /> | 80 | <CssBaseline enableColorScheme /> |
78 | <Suspense fallback={<Loading />}> | 81 | <Suspense fallback={<Loading />}> |