Merge pull request #56 from Fabio286/dependabot/npm_and_yarn/electron-12.0.5

build(deps-dev): bump electron from 11.4.3 to 12.0.5

package.json

@@ -67,10 +67,11 @@
     }
   },
   "dependencies": {
+    "@electron/remote": "^1.1.0",
     "@mdi/font": "^5.9.55",
     "ace-builds": "^1.4.12",
     "electron-log": "^4.3.0",
-    "electron-store": "^7.0.0",
+    "electron-store": "^8.0.0",
     "electron-updater": "^4.3.5",
     "faker": "^5.3.1",
     "marked": "^2.0.2",
@@ -91,9 +92,9 @@
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.2",
-    "electron": "^11.4.3",
+    "electron": "^12.0.5",
     "electron-builder": "^22.9.1",
-    "electron-devtools-installer": "^3.1.1",
+    "electron-devtools-installer": "^3.2.0",
     "electron-webpack": "^2.8.2",
     "electron-webpack-vue": "^2.4.0",
     "eslint": "^7.24.0",

src/main/index.js

@@ -29,6 +29,7 @@ async function createMainWindow () {
       icon: nativeImage.createFromDataURL(icon.default),
       webPreferences: {
          nodeIntegration: true,
+         contextIsolation: false,
          'web-security': false,
          enableRemoteModule: true,
          spellcheck: false
@@ -37,26 +38,25 @@ async function createMainWindow () {
       backgroundColor: '#1d1d1d'
    });
 
-   if (isDevelopment) {
+   try {
-      await window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
+      if (isDevelopment) {
+         await window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
 
-      const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer');
+         const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer');
-      window.webContents.openDevTools();
 
-      installExtension(VUEJS_DEVTOOLS)
+         const toolName = await installExtension(VUEJS_DEVTOOLS);
-         .then(name => {
+         console.log(toolName, 'installed');
-            console.log(name, 'installed');
+      }
-         })
+      else {
-         .catch(err => {
+         await window.loadURL(formatUrl({
-            console.log(err);
+            pathname: path.join(__dirname, 'index.html'),
-         });
+            protocol: 'file',
+            slashes: true
+         }));
+      }
    }
-   else {
+   catch (err) {
-      await window.loadURL(formatUrl({
+      console.log(err);
-         pathname: path.join(__dirname, 'index.html'),
-         protocol: 'file',
-         slashes: true
-      }));
    }
 
    window.on('closed', () => {
@@ -76,6 +76,8 @@ async function createMainWindow () {
 if (!gotTheLock)
    app.quit();
 else {
+   require('@electron/remote/main').initialize();
+
    // Initialize ipcHandlers
    ipcHandlers();
 
@@ -86,14 +88,17 @@ else {
          app.quit();
    });
 
-   app.on('activate', () => {
+   app.on('activate', async () => {
       // on macOS it is common to re-create a window even after all windows have been closed
-      if (mainWindow === null)
+      if (mainWindow === null) {
-         mainWindow = createMainWindow();
+         mainWindow = await createMainWindow();
+         mainWindow.webContents.openDevTools();
+      }
    });
 
    // create main BrowserWindow when electron is ready
    app.on('ready', async () => {
-      mainWindow = createMainWindow();
+      mainWindow = await createMainWindow();
+      mainWindow.webContents.openDevTools();
    });
 }

src/renderer/App.vue

@@ -25,7 +25,8 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { ipcRenderer, remote } from 'electron';
+import { ipcRenderer } from 'electron';
+import { Menu, getCurrentWindow } from '@electron/remote';
 
 export default {
    name: 'App',
@@ -60,8 +61,6 @@ export default {
       ipcRenderer.send('check-for-updates');
       this.checkVersionUpdate();
 
-      const Menu = remote.Menu;
-
       const InputMenu = Menu.buildFromTemplate([
          {
             label: this.$t('word.cut'),
@@ -92,7 +91,7 @@ export default {
 
          while (node) {
             if (node.nodeName.match(/^(input|textarea)$/i) || node.isContentEditable) {
-               InputMenu.popup(remote.getCurrentWindow());
+               InputMenu.popup(getCurrentWindow());
                break;
             }
             node = node.parentNode;

src/renderer/components/TheTitleBar.vue

@@ -37,15 +37,16 @@
 </template>
 
 <script>
-import { remote, ipcRenderer } from 'electron';
+import { ipcRenderer } from 'electron';
+import { getCurrentWindow } from '@electron/remote';
 import { mapGetters } from 'vuex';
 
 export default {
    name: 'TheTitleBar',
    data () {
       return {
-         w: remote.getCurrentWindow(),
+         w: getCurrentWindow(),
-         isMaximized: remote.getCurrentWindow().isMaximized(),
+         isMaximized: getCurrentWindow().isMaximized(),
          isDevelopment: process.env.NODE_ENV === 'development'
       };
    },