fix: Window state loading (#1758)

* Remove unused typings

* Fix app state hydratation

* Use auxiliar function to export localStorage to main process

* Apply initial window state earlier

* Trick server-url handler to ignore unregistered webviews

Author: tassoevan

src/app/main/data.ts

@@ -4,18 +4,10 @@ import path from 'path';
 import { app } from 'electron';
 
 import { select, dispatch, watch } from '../../store';
-import { getRootWindow } from '../../ui/main/rootWindow';
 import { APP_SETTINGS_LOADED } from '../actions';
 import { selectPersistableValues } from '../selectors';
 import { getPersistedValues, persistValues } from './persistence';
 
-export const getLocalStorage = (): Promise<Record<string, string>> =>
-  getRootWindow().webContents.executeJavaScript('({...localStorage})');
-
-export const purgeLocalStorage = async (): Promise<void> => {
-  await getRootWindow().webContents.executeJavaScript('localStorage.clear()');
-};
-
 export const mergePersistableValues = async (localStorage: Record<string, string>): Promise<void> => {
   const initialValues = select(selectPersistableValues);
 

src/app/main/persistence.ts

@@ -21,13 +21,7 @@ const getElectronStore = (): ElectronStore<PersistableValues> => {
 };
 
 export const getPersistedValues = (): PersistableValues =>
-  selectPersistableValues(
-    Object.fromEntries(
-      Array.from(
-        getElectronStore(),
-      ),
-    ),
-  );
+  getElectronStore().store;
 
 export const persistValues = (values: PersistableValues): void => {
   getElectronStore().set(values);

src/main.ts

@@ -2,9 +2,7 @@ import { app } from 'electron';
 
 import { performElectronStartup, setupApp } from './app/main/app';
 import {
-  getLocalStorage,
   mergePersistableValues,
-  purgeLocalStorage,
   watchAndPersistChanges,
 } from './app/main/data';
 import { setUserDataDirectory } from './app/main/dev';
@@ -21,8 +19,8 @@ import dock from './ui/main/dock';
 import menuBar from './ui/main/menuBar';
 import {
   createRootWindow,
-  applyRootWindowState,
   showRootWindow,
+  exportLocalStorage,
 } from './ui/main/rootWindow';
 import touchBar from './ui/main/touchBar';
 import trayIcon from './ui/main/trayIcon';
@@ -39,8 +37,11 @@ const start = async (): Promise<void> => {
 
   await app.whenReady();
 
-  i18n.setUp();
+  const localStorage = await exportLocalStorage();
+  await mergePersistableValues(localStorage);
+  await setupServers(localStorage);
 
+  i18n.setUp();
   await i18n.wait();
 
   const rootWindow = createRootWindow();
@@ -58,10 +59,6 @@ const start = async (): Promise<void> => {
   setupNotifications();
   setupScreenSharing();
 
-  const localStorage = await getLocalStorage();
-
-  await mergePersistableValues(localStorage);
-  await setupServers(localStorage);
   await setupSpellChecking();
 
   setupDeepLinks();
@@ -81,9 +78,6 @@ const start = async (): Promise<void> => {
     trayIcon.tearDown();
   });
 
-  applyRootWindowState();
-
-  await purgeLocalStorage();
   watchAndPersistChanges();
 
   await processDeepLinksInArgs();

src/types/electron-reloader.d.ts

@@ -15,8 +15,8 @@ export type WindowState = {
   fullscreen: boolean;
   normal: boolean;
   bounds: {
-    x: number | undefined,
-    y: number | undefined,
+    x?: number,
+    y?: number,
     width: number,
     height: number,
   }

src/ui/common.ts

@@ -7,6 +7,7 @@ import {
   screen,
   Rectangle,
   NativeImage,
+  WebPreferences,
 } from 'electron';
 import i18next from 'i18next';
 import { createStructuredSelector } from 'reselect';
@@ -25,6 +26,14 @@ import {
 } from '../selectors';
 import { getTrayIconPath } from './icons';
 
+
+const webPreferences: WebPreferences = {
+  nodeIntegration: true,
+  nodeIntegrationInSubFrames: true,
+  webviewTag: true,
+  worldSafeExecuteJavaScript: true,
+};
+
 const selectRootWindowState = ({ rootWindowState }: RootState): WindowState => rootWindowState ?? {
   bounds: {
     x: 0,
@@ -54,12 +63,7 @@ export const createRootWindow = (): BrowserWindow => {
     titleBarStyle: 'hidden',
     backgroundColor: '#2f343d',
     show: false,
-    webPreferences: {
-      nodeIntegration: true,
-      nodeIntegrationInSubFrames: true,
-      webviewTag: true,
-      worldSafeExecuteJavaScript: true,
-    },
+    webPreferences,
   });
 
   rootWindow.addListener('close', (event) => {
@@ -298,8 +302,35 @@ export const showRootWindow = async (rootWindow: BrowserWindow): Promise<void> =
 
   return new Promise((resolve) => {
     rootWindow.addListener('ready-to-show', () => {
+      applyRootWindowState();
       setupRootWindow();
       resolve();
     });
   });
 };
+
+export const exportLocalStorage = async (): Promise<Record<string, string>> => {
+  try {
+    const tempWindow = new BrowserWindow({
+      show: false,
+      webPreferences,
+    });
+
+    tempWindow.loadFile(path.join(app.getAppPath(), 'app/index.html'));
+
+    await new Promise((resolve) => {
+      tempWindow.addListener('ready-to-show', () => {
+        resolve();
+      });
+    });
+
+    return tempWindow.webContents.executeJavaScript(`(() => {
+      const data = ({...localStorage})
+      localStorage.clear();
+      return data;
+    })()`);
+  } catch (error) {
+    console.error(error);
+    return {};
+  }
+};

src/ui/main/rootWindow.ts

@@ -468,6 +468,8 @@ export const attachGuestWebContentsEvents = (rootWindow: BrowserWindow): void =>
   ipcMain.handle(
     'server-url',
     (event) =>
-      Array.from(webContentsByServerUrl.entries()).find(([, v]) => v === event.sender)[0],
+      Array.from(webContentsByServerUrl.entries())
+        .filter(([, v]) => v === event.sender)
+        .map(([k]) => k)[0],
   );
 };

src/ui/main/webviews.ts

@@ -29,10 +29,11 @@ export const rootWindowState: Reducer<WindowState, RootWindowStateAction> = (sta
       return action.payload;
 
     case APP_SETTINGS_LOADED: {
-      const { rootWindowState: mainWindowState = state } = action.payload;
-      return mainWindowState;
+      const { rootWindowState = state } = action.payload;
+      return rootWindowState;
     }
-  }
 
-  return state;
+    default:
+      return state;
+  }
 };