Sophie

From d85f09cbed5f3d2501f791e689011ae127df1cbb Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Sun, 9 Jan 2022 20:33:53 +0100 Subject: build: Add prettier MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit eslint will also enforce prettier rules, so there is no need to call prettier separately in CI. Signed-off-by: Kristóf Marussy --- packages/renderer/.eslinrc.cjs | 5 +- packages/renderer/index.html | 9 ++- .../src/components/BrowserViewPlaceholder.tsx | 55 +++++++-------- packages/renderer/src/components/StoreProvider.tsx | 13 ++-- packages/renderer/src/components/ThemeProvider.tsx | 28 ++++---- .../src/components/ToggleDarkModeButton.tsx | 4 +- packages/renderer/src/devTools.ts | 4 +- packages/renderer/src/stores/RendererStore.ts | 81 +++++++++++----------- packages/renderer/tsconfig.json | 10 +-- packages/renderer/vite.config.js | 10 +-- 10 files changed, 106 insertions(+), 113 deletions(-) (limited to 'packages/renderer') diff --git a/packages/renderer/.eslinrc.cjs b/packages/renderer/.eslinrc.cjs index 37d27ad..ee3cca6 100644 --- a/packages/renderer/.eslinrc.cjs +++ b/packages/renderer/.eslinrc.cjs @@ -5,10 +5,7 @@ module.exports = { }, overrides: [ { - files: [ - '.eslintrc.cjs', - 'vite.config.js', - ], + files: ['.eslintrc.cjs', 'vite.config.js'], env: { browser: false, node: true, diff --git a/packages/renderer/index.html b/packages/renderer/index.html index 08469c7..039ce61 100644 --- a/packages/renderer/index.html +++ b/packages/renderer/index.html @@ -1,9 +1,12 @@ - - - + + + Sophie diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx index 11c09d6..8f055e7 100644 --- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx +++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx @@ -29,36 +29,37 @@ export default observer(() => { const store = useStore(); // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`. - const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => { - if (entry) { - const { - x, - y, - width, - height, - } = entry.target.getBoundingClientRect(); - store.setBrowserViewBounds({ - x, - y, - width, - height, - }); - } - }, 100), [store]); + const onResize = useCallback( + throttle(([entry]: ResizeObserverEntry[]) => { + if (entry) { + const { x, y, width, height } = entry.target.getBoundingClientRect(); + store.setBrowserViewBounds({ + x, + y, + width, + height, + }); + } + }, 100), + [store], + ); const resizeObserverRef = useRef(null); - const ref = useCallback((element: HTMLElement | null) => { - if (resizeObserverRef.current !== null) { - resizeObserverRef.current.disconnect(); - } - if (element === null) { - resizeObserverRef.current = null; - return; - } - resizeObserverRef.current = new ResizeObserver(onResize); - resizeObserverRef.current.observe(element); - }, [onResize, resizeObserverRef]); + const ref = useCallback( + (element: HTMLElement | null) => { + if (resizeObserverRef.current !== null) { + resizeObserverRef.current.disconnect(); + } + if (element === null) { + resizeObserverRef.current = null; + return; + } + resizeObserverRef.current = new ResizeObserver(onResize); + resizeObserverRef.current.observe(element); + }, + [onResize, resizeObserverRef], + ); return ( - {children} - + {children} ); } diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx index eacaa52..3943371 100644 --- a/packages/renderer/src/components/ThemeProvider.tsx +++ b/packages/renderer/src/components/ThemeProvider.tsx @@ -27,20 +27,18 @@ import React from 'react'; import { useStore } from './StoreProvider'; -export default observer(({ children }: { - children: JSX.Element | JSX.Element[]; -}) => { - const { shared: { shouldUseDarkColors } } = useStore(); +export default observer( + ({ children }: { children: JSX.Element | JSX.Element[] }) => { + const { + shared: { shouldUseDarkColors }, + } = useStore(); - const theme = createTheme({ - palette: { - mode: shouldUseDarkColors ? 'dark' : 'light', - }, - }); + const theme = createTheme({ + palette: { + mode: shouldUseDarkColors ? 'dark' : 'light', + }, + }); - return ( - - {children} - - ); -}); + return {children}; + }, +); diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx index c8ffdf0..695756a 100644 --- a/packages/renderer/src/components/ToggleDarkModeButton.tsx +++ b/packages/renderer/src/components/ToggleDarkModeButton.tsx @@ -28,7 +28,9 @@ import { useStore } from './StoreProvider'; export default observer(() => { const store = useStore(); - const { shared: { shouldUseDarkColors } } = store; + const { + shared: { shouldUseDarkColors }, + } = store; return ( { +export async function exposeToReduxDevtools( + model: IAnyStateTreeNode, +): Promise { (window as { global?: unknown }).global = window; // Hack to load dev dependencies on demand. diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts index e684759..0b78ce1 100644 --- a/packages/renderer/src/stores/RendererStore.ts +++ b/packages/renderer/src/stores/RendererStore.ts @@ -24,12 +24,7 @@ import { SophieRenderer, ThemeSource, } from '@sophie/shared'; -import { - applySnapshot, - applyPatch, - Instance, - types, -} from 'mobx-state-tree'; +import { applySnapshot, applyPatch, Instance, types } from 'mobx-state-tree'; import { getLogger } from '../utils/log'; @@ -38,29 +33,31 @@ import { getEnv } from './RendererEnv'; const log = getLogger('RendererStore'); -export const rendererStore = types.model('RendererStore', { - shared: types.optional(sharedStore, {}), -}).actions((self) => ({ - setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void { - getEnv(self).dispatchMainAction({ - action: 'set-browser-view-bounds', - browserViewBounds, - }); - }, - setThemeSource(themeSource: ThemeSource): void { - getEnv(self).dispatchMainAction({ - action: 'set-theme-source', - themeSource, - }); - }, - toggleDarkMode(): void { - if (self.shared.shouldUseDarkColors) { - this.setThemeSource('light'); - } else { - this.setThemeSource('dark'); - } - }, -})); +export const rendererStore = types + .model('RendererStore', { + shared: types.optional(sharedStore, {}), + }) + .actions((self) => ({ + setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void { + getEnv(self).dispatchMainAction({ + action: 'set-browser-view-bounds', + browserViewBounds, + }); + }, + setThemeSource(themeSource: ThemeSource): void { + getEnv(self).dispatchMainAction({ + action: 'set-theme-source', + themeSource, + }); + }, + toggleDarkMode(): void { + if (self.shared.shouldUseDarkColors) { + this.setThemeSource('light'); + } else { + this.setThemeSource('dark'); + } + }, + })); export interface RendererStore extends Instance {} @@ -72,22 +69,26 @@ export interface RendererStore extends Instance {} * * @param ipc The `sophieRenderer` context bridge. */ -export function createAndConnectRendererStore(ipc: SophieRenderer): RendererStore { +export function createAndConnectRendererStore( + ipc: SophieRenderer, +): RendererStore { const env: RendererEnv = { dispatchMainAction: ipc.dispatchAction, }; const store = rendererStore.create({}, env); - ipc.onSharedStoreChange({ - onSnapshot(snapshot) { - applySnapshot(store.shared, snapshot); - }, - onPatch(patch) { - applyPatch(store.shared, patch); - }, - }).catch((err) => { - log.error('Failed to connect to shared store', err); - }); + ipc + .onSharedStoreChange({ + onSnapshot(snapshot) { + applySnapshot(store.shared, snapshot); + }, + onPatch(patch) { + applyPatch(store.shared, patch); + }, + }) + .catch((err) => { + log.error('Failed to connect to shared store', err); + }); return store; } diff --git a/packages/renderer/tsconfig.json b/packages/renderer/tsconfig.json index 14c3e0c..5453330 100644 --- a/packages/renderer/tsconfig.json +++ b/packages/renderer/tsconfig.json @@ -3,14 +3,8 @@ "compilerOptions": { "noEmit": true, "jsx": "react", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "types": [ - "vite/client" - ] + "lib": ["dom", "dom.iterable", "esnext"], + "types": ["vite/client"] }, "references": [ { diff --git a/packages/renderer/vite.config.js b/packages/renderer/vite.config.js index 6440ead..e20e0f1 100644 --- a/packages/renderer/vite.config.js +++ b/packages/renderer/vite.config.js @@ -46,9 +46,7 @@ export default { preserveSymlinks: true, }, optimizeDeps: { - exclude: [ - '@sophie/shared', - ], + exclude: ['@sophie/shared'], }, build: { target: chrome, @@ -59,11 +57,7 @@ export default { minify: !isDevelopment, brotliSize: false, rollupOptions: { - external: [ - 'mst-middlewares', - 'remotedev', - ...builtinModules, - ], + external: ['mst-middlewares', 'remotedev', ...builtinModules], output: { banner, }, -- cgit v1.2.3-54-g00ecf