From d07e7b834831230b53860d0919a68edc2d36193d Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Sat, 8 Jan 2022 21:36:43 +0100 Subject: build: Eslint fixes for multi-module project MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Kristóf Marussy --- packages/renderer/src/components/App.tsx | 6 +-- .../src/components/BrowserViewPlaceholder.tsx | 14 +++--- packages/renderer/src/components/Sidebar.tsx | 4 +- packages/renderer/src/components/StoreProvider.tsx | 2 +- packages/renderer/src/components/ThemeProvider.tsx | 8 ++-- .../src/components/ToggleDarkModeButton.tsx | 9 ++-- packages/renderer/src/devTools.ts | 21 +++------ packages/renderer/src/index.tsx | 13 ++++-- packages/renderer/src/stores/RendererEnv.ts | 4 +- packages/renderer/src/stores/RendererStore.ts | 21 +++++---- packages/renderer/src/utils/log.ts | 50 ++++++++++++++++++++++ 11 files changed, 102 insertions(+), 50 deletions(-) create mode 100644 packages/renderer/src/utils/log.ts (limited to 'packages/renderer/src') 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 ( { + 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(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 ( ({ 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 ( toggleDarkMode()} + onClick={() => store.toggleDarkMode()} > {shouldUseDarkColors ? : } 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,30 +32,23 @@ 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 { +export async function exposeToReduxDevtools(model: IAnyStateTreeNode): Promise { (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 @@ -18,20 +18,25 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -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 + * + * 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 . + * + * 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(); + }); +} -- cgit v1.2.3-54-g00ecf