electron initialization without remote

app/src/electron.js

@@ -159,8 +159,8 @@ function createWindow() {
     ...bounds,
     icon: os.platform() == 'win32' ? 'icon.ico' : path.resolve(__dirname, '../icon.png'),
     webPreferences: {
-      // nodeIntegration: true,
-      // contextIsolation: false,
+      nodeIntegration: true,
+      contextIsolation: false,
       // enableRemoteModule: true,
     },
   });
@@ -172,7 +172,7 @@ function createWindow() {
   mainMenu = buildMenu();
   mainWindow.setMenu(mainMenu);
 
-  function loadMainWindow() {
+  function loadMainWindow(initArgs) {
     const startUrl =
       process.env.ELECTRON_START_URL ||
       url.format({
@@ -181,7 +181,16 @@ function createWindow() {
         slashes: true,
       });
     mainWindow.webContents.on('did-finish-load', function () {
-      // hideSplash();
+      mainWindow.webContents.executeJavaScript(
+        `runInit=()=>{
+          try{
+            dbgate_initializeElectron(${JSON.stringify(initArgs)});
+          }catch(e){
+            setTimeout(runInit,100)
+          }
+        };
+        runInit()`
+      );
     });
     mainWindow.on('close', () => {
       store.set('winBounds', mainWindow.getBounds());
@@ -194,7 +203,7 @@ function createWindow() {
   }
 
   if (process.env.ELECTRON_START_URL) {
-    loadMainWindow();
+    loadMainWindow({});
   } else {
     const apiProcess = fork(path.join(__dirname, '../packages/api/dist/bundle.js'), [
       '--dynport',
@@ -206,9 +215,11 @@ function createWindow() {
     apiProcess.on('message', msg => {
       if (msg.msgtype == 'listening') {
         const { port, authorization } = msg;
-        global['port'] = port;
-        global['authorization'] = authorization;
-        loadMainWindow();
+
+        loadMainWindow({
+          port,
+          authorization,
+        });
       }
     });
   }

packages/web/src/App.svelte

@@ -12,10 +12,16 @@
   import axiosInstance from './utility/axiosInstance';
   import ErrorHandler from './utility/ErrorHandler.svelte';
   import OpenTabsOnStartup from './utility/OpenTabsOnStartup.svelte';
+  import { shouldWaitForElectronInitialize } from './utility/getElectron';
 
   let loadedApi = false;
 
   async function loadApi() {
+    if (shouldWaitForElectronInitialize()) {
+      setTimeout(loadApi, 100);
+      return;
+    }
+
     try {
       const settings = await axiosInstance.get('config/get-settings');
       const connections = await axiosInstance.get('connections/list');
@@ -43,7 +49,6 @@
       setAppLoaded();
     }
   }
-
 </script>
 
 <DataGridRowHeightMeter />

packages/web/src/stores.ts

@@ -74,8 +74,6 @@ export const currentThemeDefinition = derived([currentTheme, extensions], ([$cur
   $extensions.themes.find(x => x.className == $currentTheme)
 );
 
-const electron = getElectron();
-
 subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
 subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar');
 subscribeCssVariable(leftPanelWidth, x => `${x}px`, '--dim-left-panel-width');
@@ -119,9 +117,9 @@ let commandsValue = null;
 commands.subscribe(value => {
   commandsValue = value;
 
+  const electron = getElectron();
   if (electron) {
-    const { ipcRenderer } = electron;
-    ipcRenderer.send('update-commands', JSON.stringify(value));
+    electron.send('update-commands', JSON.stringify(value));
   }
 });
 export const getCommands = () => commandsValue;

packages/web/src/utility/axiosInstance.js

@@ -1,15 +1,23 @@
 import axios from 'axios';
 import resolveApi, { resolveApiHeaders } from './resolveApi';
 
-const axiosInstance = axios.create({
-  baseURL: resolveApi(),
-});
+let axiosInstance;
 
-axiosInstance.defaults.headers = {
-  'Cache-Control': 'no-cache',
-  Pragma: 'no-cache',
-  Expires: '0',
-  ...resolveApiHeaders(),
-};
+function recreateAxiosInstance() {
+  axiosInstance = axios.create({
+    baseURL: resolveApi(),
+  });
+
+  axiosInstance.defaults.headers = {
+    'Cache-Control': 'no-cache',
+    Pragma: 'no-cache',
+    Expires: '0',
+    ...resolveApiHeaders(),
+  };
+}
+
+window['dbgate_recreateAxiosInstance'] = recreateAxiosInstance;
+
+recreateAxiosInstance();
 
 export default axiosInstance;

packages/web/src/utility/getElectron.ts

@@ -1,7 +1,57 @@
-export default function getElectron() {
+class ElectronApi {
+  public port?: number;
+  public authorization?: string;
+  private ipcRenderer = getIpcRenderer();
+
+  constructor(args) {
+    this.port = args.port;
+    this.authorization = args.authorization;
+  }
+
+  send(msg, args) {
+    this.ipcRenderer.send(msg, args);
+  }
+}
+
+let apiInstance = null;
+
+function initializeElectron(args) {
+  // console.log('Initialize electron with args:', args);
+
+  apiInstance = new ElectronApi(args);
+  if (window['dbgate_recreateAxiosInstance']) {
+    // console.log('Recreating axios instance');
+
+    window['dbgate_recreateAxiosInstance']();
+  }
+}
+
+window['dbgate_initializeElectron'] = initializeElectron;
+
+function getIpcRenderer() {
   if (window['require']) {
     const electron = window['require']('electron');
-    return electron;
+    return electron?.ipcRenderer;
   }
   return null;
 }
+
+export function shouldWaitForElectronInitialize() {
+  return !!getIpcRenderer() && !apiInstance;
+}
+
+export default function getElectron(): ElectronApi {
+  return apiInstance;
+  // try {
+  //   // @ts-ignore
+  //   return ipcRenderer;
+  // } catch (e) {
+  //   return null;
+  // }
+  // if (window['require']) {
+  //   const electron = window['require']('electron');
+  //   console.log('electron?.ipcRenderer', electron?.ipcRenderer);
+  //   return electron?.ipcRenderer;
+  // }
+  // return null;
+}

packages/web/src/utility/resolveApi.ts

@@ -1,18 +1,14 @@
+import getElectron from './getElectron';
+
 let apiUrl = null;
 try {
   apiUrl = process.env.API_URL;
 } catch {}
 
 export default function resolveApi() {
-  if (window['require']) {
-    const electron = window['require']('electron');
-
-    if (electron) {
-      const port = electron.remote.getGlobal('port');
-      if (port) {
-        return `http://localhost:${port}`;
-      }
-    }
+  const electron = getElectron();
+  if (electron?.port) {
+    return `http://localhost:${electron.port}`;
   }
 
   if (apiUrl) {
@@ -22,14 +18,13 @@ export default function resolveApi() {
 }
 
 export function resolveApiHeaders() {
-  if (window['require']) {
-    const electron = window['require']('electron');
+  const electron = getElectron();
 
-    if (electron) {
-      return {
-        Authorization: electron.remote.getGlobal('authorization'),
-      };
-    }
+  if (electron?.authorization) {
+    return {
+      Authorization: electron.authorization,
+    };
   }
+
   return {};
 }