feat(renderer): Renderer translations

Add react-i18n to make us able to use i18next translations in the
renderer process just like we do in the main process.

Translations are hot-reloaded automatically.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

1 files changed, 12 insertions, 76 deletions

diff --git a/packages/preload/src/contextBridge/createSophieRenderer.ts b/packages/preload/src/contextBridge/createSophieRenderer.ts
index 8bdf07e..3de9d9e 100644
--- a/packages/preload/src/contextBridge/createSophieRenderer.ts
+++ b/packages/preload/src/contextBridge/createSophieRenderer.ts
@@ -18,85 +18,21 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import {
-  Action,
-  MainToRendererIpcMessage,
-  RendererToMainIpcMessage,
-  SharedStoreListener,
-  SharedStoreSnapshotIn,
-  SophieRenderer,
-} from '@sophie/shared';
-import { ipcRenderer } from 'electron';
-import log from 'loglevel';
-import type { IJsonPatch } from 'mobx-state-tree';
+import { SophieRenderer } from '@sophie/shared';
 
-class SharedStoreConnector {
-  readonly #allowReplaceListener: boolean;
+import SharedStoreConnector, { dispatchAction } from './SharedStoreConnector';
+import TranslationsConnector, { getTranslation } from './TranslationsConnector';
 
-  #onSharedStoreChangeCalled = false;
-
-  #listener: SharedStoreListener | undefined;
-
-  constructor(allowReplaceListener: boolean) {
-    this.#allowReplaceListener = allowReplaceListener;
-    ipcRenderer.on(
-      MainToRendererIpcMessage.SharedStorePatch,
-      (_event, patch) => {
-        try {
-          // `mobx-state-tree` will validate the patch, so we can safely cast here.
-          this.#listener?.onPatch(patch as IJsonPatch[]);
-        } catch (error) {
-          log.error('Shared store listener onPatch failed', error);
-          this.#listener = undefined;
-        }
-      },
-    );
-  }
-
-  async onSharedStoreChange(listener: SharedStoreListener): Promise<void> {
-    if (this.#onSharedStoreChangeCalled && !this.#allowReplaceListener) {
-      throw new Error('Shared store change listener was already set');
-    }
-    this.#onSharedStoreChangeCalled = true;
-    let success = false;
-    let snapshot: unknown;
-    try {
-      snapshot = await ipcRenderer.invoke(
-        RendererToMainIpcMessage.GetSharedStoreSnapshot,
-      );
-      success = true;
-    } catch (error) {
-      log.error('Failed to get initial shared store snapshot', error);
-    }
-    if (!success) {
-      throw new Error('Failed to connect to shared store');
-    }
-    // `mobx-state-tree` will validate the snapshot, so we can safely cast here.
-    listener.onSnapshot(snapshot as SharedStoreSnapshotIn);
-    this.#listener = listener;
-  }
-}
-
-function dispatchAction(actionToDispatch: Action): void {
-  // Let the full zod parse error bubble up to the main world,
-  // since all data it may contain was provided from the main world.
-  const parsedAction = Action.parse(actionToDispatch);
-  try {
-    ipcRenderer.send(RendererToMainIpcMessage.DispatchAction, parsedAction);
-  } catch (error) {
-    // Do not leak IPC failure details into the main world.
-    const message = 'Failed to dispatch action';
-    log.error(message, actionToDispatch, error);
-    throw new Error(message);
-  }
-}
-
-export default function createSophieRenderer(
-  allowReplaceListener: boolean,
-): SophieRenderer {
-  const connector = new SharedStoreConnector(allowReplaceListener);
+export default function createSophieRenderer(devMode: boolean): SophieRenderer {
+  const sharedStoreConnector = new SharedStoreConnector(devMode);
+  const translationsConnector = new TranslationsConnector(devMode);
   return {
-    onSharedStoreChange: connector.onSharedStoreChange.bind(connector),
+    onSharedStoreChange:
+      sharedStoreConnector.onSharedStoreChange.bind(sharedStoreConnector),
     dispatchAction,
+    getTranslation,
+    onReloadTranslations: translationsConnector.onReloadTranslations.bind(
+      translationsConnector,
+    ),
   };
 }