11 files changed, 102 insertions, 50 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 8bd3dd8..1174bbb 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -21,10 +21,10 @@
 import Box from '@mui/material/Box';
 import React from 'react';
 
-import { BrowserViewPlaceholder } from './BrowserViewPlaceholder';
-import { Sidebar } from './Sidebar';
+import BrowserViewPlaceholder from './BrowserViewPlaceholder';
+import Sidebar from './Sidebar';
 
-export function App(): JSX.Element {
+export default function App(): JSX.Element {
   return (
     <Box
       sx={{
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 6aa6b7b..c671983 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -18,17 +18,15 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { throttle } from 'lodash';
-import { observer } from 'mobx-react-lite';
 import Box from '@mui/material/Box';
+import throttle from 'lodash-es/throttle';
+import { observer } from 'mobx-react-lite';
 import React, { useCallback, useRef } from 'react';
 
 import { useStore } from './StoreProvider';
 
-export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder() {
-  const {
-    setBrowserViewBounds,
-  } = useStore();
+export default observer(() => {
+  const store = useStore();
 
   const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => {
     if (entry) {
@@ -38,14 +36,14 @@ export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder()
         width,
         height,
       } = entry.target.getBoundingClientRect();
-      setBrowserViewBounds({
+      store.setBrowserViewBounds({
         x,
         y,
         width,
         height,
       });
     }
-  }, 100), [setBrowserViewBounds]);
+  }, 100), [store]);
 
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/Sidebar.tsx
index 6c79932..44a47b0 100644
--- a/packages/renderer/src/components/Sidebar.tsx
+++ b/packages/renderer/src/components/Sidebar.tsx
@@ -21,9 +21,9 @@
 import Box from '@mui/material/Box';
 import React from 'react';
 
-import { ToggleDarkModeButton } from './ToggleDarkModeButton';
+import ToggleDarkModeButton from './ToggleDarkModeButton';
 
-export function Sidebar(): JSX.Element {
+export default function Sidebar(): JSX.Element {
   return (
     <Box
       sx={(theme) => ({
diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx
index da1e699..cde6a31 100644
--- a/packages/renderer/src/components/StoreProvider.tsx
+++ b/packages/renderer/src/components/StoreProvider.tsx
@@ -32,7 +32,7 @@ export function useStore(): RendererStore {
   return store;
 }
 
-export function StoreProvider({ children, store }: {
+export default function StoreProvider({ children, store }: {
   children: JSX.Element | JSX.Element[],
   store: RendererStore,
 }): JSX.Element {
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 9215f5c..eacaa52 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -18,18 +18,18 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { observer } from 'mobx-react-lite';
 import {
   unstable_createMuiStrictModeTheme as createTheme,
   ThemeProvider as MuiThemeProvider,
 } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from './StoreProvider';
 
-export const ThemeProvider = observer(function ThemeProvider({ children }: {
-  children: JSX.Element | JSX.Element[],
-}) {
+export default observer(({ children }: {
+  children: JSX.Element | JSX.Element[];
+}) => {
   const { shared: { shouldUseDarkColors } } = useStore();
 
   const theme = createTheme({
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx
index 1b6757e..c8ffdf0 100644
--- a/packages/renderer/src/components/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/ToggleDarkModeButton.tsx
@@ -18,21 +18,22 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { observer } from 'mobx-react-lite';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from './StoreProvider';
 
-export const ToggleDarkModeButton = observer(function ToggleDarkModeButton() {
-  const { shared: { shouldUseDarkColors }, toggleDarkMode } = useStore();
+export default observer(() => {
+  const store = useStore();
+  const { shared: { shouldUseDarkColors } } = store;
 
   return (
     <IconButton
       aria-label="Toggle dark mode"
-      onClick={() => toggleDarkMode()}
+      onClick={() => store.toggleDarkMode()}
     >
       {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
     </IconButton>
diff --git a/packages/renderer/src/devTools.ts b/packages/renderer/src/devTools.ts
index 3ec66aa..3d3ba99 100644
--- a/packages/renderer/src/devTools.ts
+++ b/packages/renderer/src/devTools.ts
@@ -32,31 +32,24 @@ import type { IAnyStateTreeNode } from 'mobx-state-tree';
  * However, we don't bundle `remotedev` in production, so the call would fail anyways.
  *
  * @param model The store to connect to the redux devtools.
+ * @return A promise that resolves when the store was exposed to the devtools.
  * @see https://github.com/SocketCluster/socketcluster-client/issues/118#issuecomment-469064682
  */
-async function exposeToReduxDevtoolsAsync(model: IAnyStateTreeNode): Promise<void> {
+export async function exposeToReduxDevtools(model: IAnyStateTreeNode): Promise<void> {
   (window as { global?: unknown }).global = window;
 
+  // Hack to load dev dependencies on demand.
   const [remotedev, { connectReduxDevtools }] = await Promise.all([
-    // @ts-ignore
-    import('remotedev'),
+    // @ts-expect-error `remotedev` has no typings.
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    import('remotedev') as unknown,
+    // eslint-disable-next-line import/no-extraneous-dependencies
     import('mst-middlewares'),
   ]);
   connectReduxDevtools(remotedev, model);
 }
 
 /**
- * Connects the `model` to the redux devtools extension.
- *
- * @param model The store to connect to the redux devtools.
- */
-export function exposeToReduxDevtools(model: IAnyStateTreeNode): void {
-  exposeToReduxDevtoolsAsync(model).catch((err) => {
-    console.error('Could not connect to Redux devtools', err);
-  });
-}
-
-/**
  * Sends a message to the main process to reload all services when
  * `build/watch.js` sends a reload event on bundle write.
  */
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 1626bef..d900e50 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -26,14 +26,17 @@ import CssBaseline from '@mui/material/CssBaseline';
 import React from 'react';
 import { render } from 'react-dom';
 
-import { App } from './components/App';
-import { StoreProvider } from './components/StoreProvider';
-import { ThemeProvider } from './components/ThemeProvider';
+import App from './components/App';
+import StoreProvider from './components/StoreProvider';
+import ThemeProvider from './components/ThemeProvider';
 import { exposeToReduxDevtools, hotReloadServices } from './devTools';
 import { createAndConnectRendererStore } from './stores/RendererStore';
+import { getLogger } from './utils/log';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
+const log = getLogger('index');
+
 if (isDevelopment) {
   hotReloadServices();
   document.title = `[dev] ${document.title}`;
@@ -42,7 +45,9 @@ if (isDevelopment) {
 const store = createAndConnectRendererStore(window.sophieRenderer);
 
 if (isDevelopment) {
-  exposeToReduxDevtools(store);
+  exposeToReduxDevtools(store).catch((err) => {
+    log.error('Cannot initialize redux devtools', err);
+  });
 }
 
 function Root(): JSX.Element {
diff --git a/packages/renderer/src/stores/RendererEnv.ts b/packages/renderer/src/stores/RendererEnv.ts
index d687738..f0a5a51 100644
--- a/packages/renderer/src/stores/RendererEnv.ts
+++ b/packages/renderer/src/stores/RendererEnv.ts
@@ -18,10 +18,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { getEnv as getAnyEnv, IAnyStateTreeNode } from 'mobx-state-tree';
 import type { Action } from '@sophie/shared';
+import { getEnv as getAnyEnv, IAnyStateTreeNode } from 'mobx-state-tree';
 
-export interface RendererEnv {
+export default interface RendererEnv {
   dispatchMainAction(action: Action): void;
 }
 
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts
index 037b212..e684759 100644
--- a/packages/renderer/src/stores/RendererStore.ts
+++ b/packages/renderer/src/stores/RendererStore.ts
@@ -19,19 +19,24 @@
  */
 
 import {
-  applySnapshot,
-  applyPatch,
-  Instance,
-  types,
-} from 'mobx-state-tree';
-import {
   BrowserViewBounds,
   sharedStore,
   SophieRenderer,
   ThemeSource,
 } from '@sophie/shared';
+import {
+  applySnapshot,
+  applyPatch,
+  Instance,
+  types,
+} from 'mobx-state-tree';
+
+import { getLogger } from '../utils/log';
+
+import type RendererEnv from './RendererEnv';
+import { getEnv } from './RendererEnv';
 
-import { getEnv, RendererEnv } from './RendererEnv';
+const log = getLogger('RendererStore');
 
 export const rendererStore = types.model('RendererStore', {
   shared: types.optional(sharedStore, {}),
@@ -81,7 +86,7 @@ export function createAndConnectRendererStore(ipc: SophieRenderer): RendererStor
       applyPatch(store.shared, patch);
     },
   }).catch((err) => {
-    console.error('Failed to connect to shared store', err);
+    log.error('Failed to connect to shared store', err);
   });
 
   return store;
diff --git a/packages/renderer/src/utils/log.ts b/packages/renderer/src/utils/log.ts
new file mode 100644
index 0000000..c17fc2a
--- /dev/null
+++ b/packages/renderer/src/utils/log.ts
@@ -0,0 +1,50 @@
+/*
+ * 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 loglevel, { Logger } from 'loglevel';
+import prefix from 'loglevel-plugin-prefix';
+
+if (import.meta.env?.DEV) {
+  loglevel.setLevel('debug');
+} else {
+  // No devtools in production, so there's not point to log anything.
+  loglevel.disableAll();
+}
+
+prefix.reg(loglevel);
+prefix.apply(loglevel, {
+  format(level, name, timestamp) {
+    const timeStr = timestamp.toString();
+    const nameStr = typeof name === 'undefined' ? '' : ` ${name}`;
+    return `[${timeStr}] ${level}${nameStr}:`;
+  },
+});
+
+export function getLogger(loggerName: string): Logger {
+  return loglevel.getLogger(loggerName);
+}
+
+export function silenceLogger(): void {
+  loglevel.disableAll();
+  const loggers = loglevel.getLoggers();
+  Object.keys(loggers).forEach((loggerName) => {
+    loggers[loggerName].disableAll();
+  });
+}