10 files changed, 106 insertions, 113 deletions
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: [
+      files: ['.eslintrc.cjs', 'vite.config.js'],
-        '.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 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' blob:">
+    <meta
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      http-equiv="Content-Security-Policy"
+      content="script-src 'self' blob:"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sophie</title>
  </head>
  <body>
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[]) => {
+  const onResize = useCallback(
-    if (entry) {
+    throttle(([entry]: ResizeObserverEntry[]) => {
-      const {
+      if (entry) {
-        x,
+        const { x, y, width, height } = entry.target.getBoundingClientRect();
-        y,
+        store.setBrowserViewBounds({
-        width,
+          x,
-        height,
+          y,
-      } = entry.target.getBoundingClientRect();
+          width,
-      store.setBrowserViewBounds({
+          height,
-        x,
+        });
-        y,
+      }
-        width,
+    }, 100),
-        height,
+    [store],
-      });
+  );
-    }
-  }, 100), [store]);
  const resizeObserverRef = useRef<ResizeObserver | null>(null);
-  const ref = useCallback((element: HTMLElement | null) => {
+  const ref = useCallback(
-    if (resizeObserverRef.current !== null) {
+    (element: HTMLElement | null) => {
-      resizeObserverRef.current.disconnect();
+      if (resizeObserverRef.current !== null) {
-    }
+        resizeObserverRef.current.disconnect();
-    if (element === null) {
+      }
-      resizeObserverRef.current = null;
+      if (element === null) {
-      return;
+        resizeObserverRef.current = null;
-    }
+        return;
-    resizeObserverRef.current = new ResizeObserver(onResize);
+      }
-    resizeObserverRef.current.observe(element);
+      resizeObserverRef.current = new ResizeObserver(onResize);
-  }, [onResize, resizeObserverRef]);
+      resizeObserverRef.current.observe(element);
+    },
+    [onResize, resizeObserverRef],
+  );
  return (
    <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 {
  return store;
 }
-export default function StoreProvider({ children, store }: {
+export default function StoreProvider({
-  children: JSX.Element | JSX.Element[],
+  children,
-  store: RendererStore,
+  store,
+}: {
+  children: JSX.Element | JSX.Element[];
+  store: RendererStore;
 }): JSX.Element {
  return (
-    <StoreContext.Provider value={store}>
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
-      {children}
-    </StoreContext.Provider>
  );
 }
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 }: {
+export default observer(
-  children: JSX.Element | JSX.Element[];
+  ({ children }: { children: JSX.Element | JSX.Element[] }) => {
-}) => {
+    const {
-  const { shared: { shouldUseDarkColors } } = useStore();
+      shared: { shouldUseDarkColors },
+    } = useStore();
-  const theme = createTheme({
+    const theme = createTheme({
-    palette: {
+      palette: {
-      mode: shouldUseDarkColors ? 'dark' : 'light',
+        mode: shouldUseDarkColors ? 'dark' : 'light',
-    },
+      },
-  });
+    });
-  return (
+    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
-    <MuiThemeProvider theme={theme}>
+  },
-      {children}
+);
-    </MuiThemeProvider>
-  );
-});
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 (
    <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';
 * @return A promise that resolves when the store was exposed to the devtools.
 * @see https://github.com/SocketCluster/socketcluster-client/issues/118#issuecomment-469064682
 */
-export async function exposeToReduxDevtools(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.
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 {
+import { applySnapshot, applyPatch, Instance, types } from 'mobx-state-tree';
-  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', {
+export const rendererStore = types
-  shared: types.optional(sharedStore, {}),
+  .model('RendererStore', {
-}).actions((self) => ({
+    shared: types.optional(sharedStore, {}),
-  setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void {
+  })
-    getEnv(self).dispatchMainAction({
+  .actions((self) => ({
-      action: 'set-browser-view-bounds',
+    setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void {
-      browserViewBounds,
+      getEnv(self).dispatchMainAction({
-    });
+        action: 'set-browser-view-bounds',
-  },
+        browserViewBounds,
-  setThemeSource(themeSource: ThemeSource): void {
+      });
-    getEnv(self).dispatchMainAction({
+    },
-      action: 'set-theme-source',
+    setThemeSource(themeSource: ThemeSource): void {
-      themeSource,
+      getEnv(self).dispatchMainAction({
-    });
+        action: 'set-theme-source',
-  },
+        themeSource,
-  toggleDarkMode(): void {
+      });
-    if (self.shared.shouldUseDarkColors) {
+    },
-      this.setThemeSource('light');
+    toggleDarkMode(): void {
-    } else {
+      if (self.shared.shouldUseDarkColors) {
-      this.setThemeSource('dark');
+        this.setThemeSource('light');
-    }
+      } else {
-  },
+        this.setThemeSource('dark');
-}));
+      }
+    },
+  }));
 export interface RendererStore extends Instance<typeof rendererStore> {}
@@ -72,22 +69,26 @@ export interface RendererStore extends Instance<typeof rendererStore> {}
 *
 * @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({
+  ipc
-    onSnapshot(snapshot) {
+    .onSharedStoreChange({
-      applySnapshot(store.shared, snapshot);
+      onSnapshot(snapshot) {
-    },
+        applySnapshot(store.shared, snapshot);
-    onPatch(patch) {
+      },
-      applyPatch(store.shared, patch);
+      onPatch(patch) {
-    },
+        applyPatch(store.shared, patch);
-  }).catch((err) => {
+      },
-    log.error('Failed to connect to shared store', err);
+    })
-  });
+    .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": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
+    "types": ["vite/client"]
-      "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: [
+    exclude: ['@sophie/shared'],
-      '@sophie/shared',
-    ],
  },
  build: {
    target: chrome,
@@ -59,11 +57,7 @@ export default {
    minify: !isDevelopment,
    brotliSize: false,
    rollupOptions: {
-      external: [
+      external: ['mst-middlewares', 'remotedev', ...builtinModules],
-        'mst-middlewares',
-        'remotedev',
-        ...builtinModules,
-      ],
      output: {
        banner,
      },

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 = {
5	},	5	},
6	overrides: [	6	overrides: [
7	{	7	{
8	files: [	8	files: ['.eslintrc.cjs', 'vite.config.js'],
9	'.eslintrc.cjs',
10	'vite.config.js',
11	],
12	env: {	9	env: {
13	browser: false,	10	browser: false,
14	node: true,	11	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 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<html lang="en">	2	<html lang="en">
3	<head>	3	<head>
4	<meta charset="UTF-8">	4	<meta charset="UTF-8" />
5	<meta http-equiv="Content-Security-Policy" content="script-src 'self' blob:">	5	<meta
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">	6	http-equiv="Content-Security-Policy"
		7	content="script-src 'self' blob:"
		8	/>
		9	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7	<title>Sophie</title>	10	<title>Sophie</title>
8	</head>	11	</head>
9	<body>	12	<body>


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	}


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 @@
3	"compilerOptions": {	3	"compilerOptions": {
4	"noEmit": true,	4	"noEmit": true,
5	"jsx": "react",	5	"jsx": "react",
6	"lib": [	6	"lib": ["dom", "dom.iterable", "esnext"],
7	"dom",	7	"types": ["vite/client"]
8	"dom.iterable",
9	"esnext"
10	],
11	"types": [
12	"vite/client"
13	]
14	},	8	},
15	"references": [	9	"references": [
16	{	10	{


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 {
46	preserveSymlinks: true,	46	preserveSymlinks: true,
47	},	47	},
48	optimizeDeps: {	48	optimizeDeps: {
49	exclude: [	49	exclude: ['@sophie/shared'],
50	'@sophie/shared',
51	],
52	},	50	},
53	build: {	51	build: {
54	target: chrome,	52	target: chrome,
@@ -59,11 +57,7 @@ export default {
59	minify: !isDevelopment,	57	minify: !isDevelopment,
60	brotliSize: false,	58	brotliSize: false,
61	rollupOptions: {	59	rollupOptions: {
62	external: [	60	external: ['mst-middlewares', 'remotedev', ...builtinModules],
63	'mst-middlewares',
64	'remotedev',
65	...builtinModules,
66	],
67	output: {	61	output: {
68	banner,	62	banner,
69	},	63	},