diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-01-09 20:33:53 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-01-09 20:33:53 +0100 |
commit | d85f09cbed5f3d2501f791e689011ae127df1cbb (patch) | |
tree | 0ed5be55dd5d3dec1d51eb60e7ff229274030a57 /packages/renderer/src | |
parent | build: Disable single-run eslint-typescript (diff) | |
download | sophie-d85f09cbed5f3d2501f791e689011ae127df1cbb.tar.gz sophie-d85f09cbed5f3d2501f791e689011ae127df1cbb.tar.zst sophie-d85f09cbed5f3d2501f791e689011ae127df1cbb.zip |
build: Add prettier
eslint will also enforce prettier rules, so there is no need to call
prettier separately in CI.
Signed-off-by: Kristóf Marussy <kristof@marussy.com>
Diffstat (limited to 'packages/renderer/src')
-rw-r--r-- | packages/renderer/src/components/BrowserViewPlaceholder.tsx | 55 | ||||
-rw-r--r-- | packages/renderer/src/components/StoreProvider.tsx | 13 | ||||
-rw-r--r-- | packages/renderer/src/components/ThemeProvider.tsx | 28 | ||||
-rw-r--r-- | packages/renderer/src/components/ToggleDarkModeButton.tsx | 4 | ||||
-rw-r--r-- | packages/renderer/src/devTools.ts | 4 | ||||
-rw-r--r-- | packages/renderer/src/stores/RendererStore.ts | 81 |
6 files changed, 95 insertions, 90 deletions
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(() => { | |||
29 | const store = useStore(); | 29 | const store = useStore(); |
30 | 30 | ||
31 | // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`. | 31 | // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`. |
32 | const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => { | 32 | const onResize = useCallback( |
33 | if (entry) { | 33 | throttle(([entry]: ResizeObserverEntry[]) => { |
34 | const { | 34 | if (entry) { |
35 | x, | 35 | const { x, y, width, height } = entry.target.getBoundingClientRect(); |
36 | y, | 36 | store.setBrowserViewBounds({ |
37 | width, | 37 | x, |
38 | height, | 38 | y, |
39 | } = entry.target.getBoundingClientRect(); | 39 | width, |
40 | store.setBrowserViewBounds({ | 40 | height, |
41 | x, | 41 | }); |
42 | y, | 42 | } |
43 | width, | 43 | }, 100), |
44 | height, | 44 | [store], |
45 | }); | 45 | ); |
46 | } | ||
47 | }, 100), [store]); | ||
48 | 46 | ||
49 | const resizeObserverRef = useRef<ResizeObserver | null>(null); | 47 | const resizeObserverRef = useRef<ResizeObserver | null>(null); |
50 | 48 | ||
51 | const ref = useCallback((element: HTMLElement | null) => { | 49 | const ref = useCallback( |
52 | if (resizeObserverRef.current !== null) { | 50 | (element: HTMLElement | null) => { |
53 | resizeObserverRef.current.disconnect(); | 51 | if (resizeObserverRef.current !== null) { |
54 | } | 52 | resizeObserverRef.current.disconnect(); |
55 | if (element === null) { | 53 | } |
56 | resizeObserverRef.current = null; | 54 | if (element === null) { |
57 | return; | 55 | resizeObserverRef.current = null; |
58 | } | 56 | return; |
59 | resizeObserverRef.current = new ResizeObserver(onResize); | 57 | } |
60 | resizeObserverRef.current.observe(element); | 58 | resizeObserverRef.current = new ResizeObserver(onResize); |
61 | }, [onResize, resizeObserverRef]); | 59 | resizeObserverRef.current.observe(element); |
60 | }, | ||
61 | [onResize, resizeObserverRef], | ||
62 | ); | ||
62 | 63 | ||
63 | return ( | 64 | return ( |
64 | <Box | 65 | <Box |
diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx index cde6a31..bb8495c 100644 --- a/packages/renderer/src/components/StoreProvider.tsx +++ b/packages/renderer/src/components/StoreProvider.tsx | |||
@@ -32,13 +32,14 @@ export function useStore(): RendererStore { | |||
32 | return store; | 32 | return store; |
33 | } | 33 | } |
34 | 34 | ||
35 | export default function StoreProvider({ children, store }: { | 35 | export default function StoreProvider({ |
36 | children: JSX.Element | JSX.Element[], | 36 | children, |
37 | store: RendererStore, | 37 | store, |
38 | }: { | ||
39 | children: JSX.Element | JSX.Element[]; | ||
40 | store: RendererStore; | ||
38 | }): JSX.Element { | 41 | }): JSX.Element { |
39 | return ( | 42 | return ( |
40 | <StoreContext.Provider value={store}> | 43 | <StoreContext.Provider value={store}>{children}</StoreContext.Provider> |
41 | {children} | ||
42 | </StoreContext.Provider> | ||
43 | ); | 44 | ); |
44 | } | 45 | } |
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'; | |||
27 | 27 | ||
28 | import { useStore } from './StoreProvider'; | 28 | import { useStore } from './StoreProvider'; |
29 | 29 | ||
30 | export default observer(({ children }: { | 30 | export default observer( |
31 | children: JSX.Element | JSX.Element[]; | 31 | ({ children }: { children: JSX.Element | JSX.Element[] }) => { |
32 | }) => { | 32 | const { |
33 | const { shared: { shouldUseDarkColors } } = useStore(); | 33 | shared: { shouldUseDarkColors }, |
34 | } = useStore(); | ||
34 | 35 | ||
35 | const theme = createTheme({ | 36 | const theme = createTheme({ |
36 | palette: { | 37 | palette: { |
37 | mode: shouldUseDarkColors ? 'dark' : 'light', | 38 | mode: shouldUseDarkColors ? 'dark' : 'light', |
38 | }, | 39 | }, |
39 | }); | 40 | }); |
40 | 41 | ||
41 | return ( | 42 | return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>; |
42 | <MuiThemeProvider theme={theme}> | 43 | }, |
43 | {children} | 44 | ); |
44 | </MuiThemeProvider> | ||
45 | ); | ||
46 | }); | ||
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'; | |||
28 | 28 | ||
29 | export default observer(() => { | 29 | export default observer(() => { |
30 | const store = useStore(); | 30 | const store = useStore(); |
31 | const { shared: { shouldUseDarkColors } } = store; | 31 | const { |
32 | shared: { shouldUseDarkColors }, | ||
33 | } = store; | ||
32 | 34 | ||
33 | return ( | 35 | return ( |
34 | <IconButton | 36 | <IconButton |
diff --git a/packages/renderer/src/devTools.ts b/packages/renderer/src/devTools.ts index 3d3ba99..cb695c3 100644 --- a/packages/renderer/src/devTools.ts +++ b/packages/renderer/src/devTools.ts | |||
@@ -35,7 +35,9 @@ import type { IAnyStateTreeNode } from 'mobx-state-tree'; | |||
35 | * @return A promise that resolves when the store was exposed to the devtools. | 35 | * @return A promise that resolves when the store was exposed to the devtools. |
36 | * @see https://github.com/SocketCluster/socketcluster-client/issues/118#issuecomment-469064682 | 36 | * @see https://github.com/SocketCluster/socketcluster-client/issues/118#issuecomment-469064682 |
37 | */ | 37 | */ |
38 | export async function exposeToReduxDevtools(model: IAnyStateTreeNode): Promise<void> { | 38 | export async function exposeToReduxDevtools( |
39 | model: IAnyStateTreeNode, | ||
40 | ): Promise<void> { | ||
39 | (window as { global?: unknown }).global = window; | 41 | (window as { global?: unknown }).global = window; |
40 | 42 | ||
41 | // Hack to load dev dependencies on demand. | 43 | // 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 { | |||
24 | SophieRenderer, | 24 | SophieRenderer, |
25 | ThemeSource, | 25 | ThemeSource, |
26 | } from '@sophie/shared'; | 26 | } from '@sophie/shared'; |
27 | import { | 27 | import { applySnapshot, applyPatch, Instance, types } from 'mobx-state-tree'; |
28 | applySnapshot, | ||
29 | applyPatch, | ||
30 | Instance, | ||
31 | types, | ||
32 | } from 'mobx-state-tree'; | ||
33 | 28 | ||
34 | import { getLogger } from '../utils/log'; | 29 | import { getLogger } from '../utils/log'; |
35 | 30 | ||
@@ -38,29 +33,31 @@ import { getEnv } from './RendererEnv'; | |||
38 | 33 | ||
39 | const log = getLogger('RendererStore'); | 34 | const log = getLogger('RendererStore'); |
40 | 35 | ||
41 | export const rendererStore = types.model('RendererStore', { | 36 | export const rendererStore = types |
42 | shared: types.optional(sharedStore, {}), | 37 | .model('RendererStore', { |
43 | }).actions((self) => ({ | 38 | shared: types.optional(sharedStore, {}), |
44 | setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void { | 39 | }) |
45 | getEnv(self).dispatchMainAction({ | 40 | .actions((self) => ({ |
46 | action: 'set-browser-view-bounds', | 41 | setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void { |
47 | browserViewBounds, | 42 | getEnv(self).dispatchMainAction({ |
48 | }); | 43 | action: 'set-browser-view-bounds', |
49 | }, | 44 | browserViewBounds, |
50 | setThemeSource(themeSource: ThemeSource): void { | 45 | }); |
51 | getEnv(self).dispatchMainAction({ | 46 | }, |
52 | action: 'set-theme-source', | 47 | setThemeSource(themeSource: ThemeSource): void { |
53 | themeSource, | 48 | getEnv(self).dispatchMainAction({ |
54 | }); | 49 | action: 'set-theme-source', |
55 | }, | 50 | themeSource, |
56 | toggleDarkMode(): void { | 51 | }); |
57 | if (self.shared.shouldUseDarkColors) { | 52 | }, |
58 | this.setThemeSource('light'); | 53 | toggleDarkMode(): void { |
59 | } else { | 54 | if (self.shared.shouldUseDarkColors) { |
60 | this.setThemeSource('dark'); | 55 | this.setThemeSource('light'); |
61 | } | 56 | } else { |
62 | }, | 57 | this.setThemeSource('dark'); |
63 | })); | 58 | } |
59 | }, | ||
60 | })); | ||
64 | 61 | ||
65 | export interface RendererStore extends Instance<typeof rendererStore> {} | 62 | export interface RendererStore extends Instance<typeof rendererStore> {} |
66 | 63 | ||
@@ -72,22 +69,26 @@ export interface RendererStore extends Instance<typeof rendererStore> {} | |||
72 | * | 69 | * |
73 | * @param ipc The `sophieRenderer` context bridge. | 70 | * @param ipc The `sophieRenderer` context bridge. |
74 | */ | 71 | */ |
75 | export function createAndConnectRendererStore(ipc: SophieRenderer): RendererStore { | 72 | export function createAndConnectRendererStore( |
73 | ipc: SophieRenderer, | ||
74 | ): RendererStore { | ||
76 | const env: RendererEnv = { | 75 | const env: RendererEnv = { |
77 | dispatchMainAction: ipc.dispatchAction, | 76 | dispatchMainAction: ipc.dispatchAction, |
78 | }; | 77 | }; |
79 | const store = rendererStore.create({}, env); | 78 | const store = rendererStore.create({}, env); |
80 | 79 | ||
81 | ipc.onSharedStoreChange({ | 80 | ipc |
82 | onSnapshot(snapshot) { | 81 | .onSharedStoreChange({ |
83 | applySnapshot(store.shared, snapshot); | 82 | onSnapshot(snapshot) { |
84 | }, | 83 | applySnapshot(store.shared, snapshot); |
85 | onPatch(patch) { | 84 | }, |
86 | applyPatch(store.shared, patch); | 85 | onPatch(patch) { |
87 | }, | 86 | applyPatch(store.shared, patch); |
88 | }).catch((err) => { | 87 | }, |
89 | log.error('Failed to connect to shared store', err); | 88 | }) |
90 | }); | 89 | .catch((err) => { |
90 | log.error('Failed to connect to shared store', err); | ||
91 | }); | ||
91 | 92 | ||
92 | return store; | 93 | return store; |
93 | } | 94 | } |