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>

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 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import createCache from '@emotion/cache';
+import type { EmotionCache } from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { observer } from 'mobx-react-lite';
 import React, { ReactNode } from 'react';
-import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
 
 import { useStore } from '../components/StoreProvider';
 
-const rtlCache = createCache({
-  key: 'muirtl',
-  stylisPlugins: [prefixer, rtlPlugin],
-});
-
-function RtlCacheProvider({ children }: { children?: ReactNode }): JSX.Element {
+function RtlCacheProvider({
+  children,
+  rtlCache,
+}: {
+  children?: ReactNode;
+  rtlCache: EmotionCache;
+}): JSX.Element {
   const {
     shared: { writingDirection },
   } = 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 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import createCache, { type EmotionCache } from '@emotion/cache';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
+
+export default function createRtlCache(): EmotionCache {
+  return createCache({
+    key: 'muirtl',
+    stylisPlugins: [prefixer, rtlPlugin],
+  });
+}
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';
 import ThemeProvider from './components/ThemeProvider';
 import { exposeToReduxDevtools, hotReload } from './devTools';
 import RtlCacheProvider from './i18n/RtlCacheProvider';
+import createRtlCache from './i18n/createRtlCache';
 import loadRendererLocalization from './i18n/loadRendererLoalization';
 import { createAndConnectRendererStore } from './stores/RendererStore';
 import { getLogger } from './utils/log';
@@ -66,13 +67,15 @@ const disposeSetHtmlLang = autorun(() => {
 });
 addDisposer(store, disposeSetHtmlLang);
 
+const rtlCache = createRtlCache();
+
 const App = lazy(() => import('./components/App'));
 
 function Root(): JSX.Element {
   return (
     <React.StrictMode>
       <StoreProvider store={store}>
-        <RtlCacheProvider>
+        <RtlCacheProvider rtlCache={rtlCache}>
           <ThemeProvider>
             <CssBaseline enableColorScheme />
             <Suspense fallback={<Loading />}>