Update to Electron 16.

Application needed to be re-worked to not rely on nodeIntegration/contextIsolation for the upgrade to be possible.

app/controllers/about-controller.js

@@ -1,4 +1,4 @@
-let angApp = require(__dirname+'/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.controller('AboutController', function($scope, AppStateService, AppInfo) {
 

app/controllers/default-controller.js

@@ -1,4 +1,4 @@
-let angApp = require(__dirname+'/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.controller('DefaultController', function($scope, $timeout, $http, AppInfo) {
 

app/controllers/footer-controller.js

@@ -1,4 +1,4 @@
-let angApp = require(__dirname+'/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.controller('FooterController', function($scope, AppInfo) {
 

app/controllers/login-controller.js

@@ -1,4 +1,4 @@
-let angApp = require(__dirname+'/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.controller('LoginController', function($scope, DesktopService, CredentialsService) {
 

app/controllers/settings-controller.js

@@ -1,4 +1,4 @@
-let angApp = require(__dirname+'/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.controller('SettingsController', function ($scope, $rootScope, AppStateService, SettingsService) {
 

app/init.js

@@ -1,6 +1,4 @@
-const angular = require('angular')
-let angApp = angular.module('app', [])
-
+const angApp = angular.module('app', [])
 angApp.constant('AppInfo', {
     APP_NAME: 'Converse Desktop',
     APP_VERSION: 'v0.1.0',
@@ -11,4 +9,4 @@ angApp.constant('AppInfo', {
     ELECTRON_VERSION: '13.6.6'
 });
 
-module.exports = angApp
+export default angApp;

app/services/app-state-service.js

@@ -1,4 +1,4 @@
-let angApp = require(__dirname + '/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.factory('AppStateService', [ '$rootScope', ($rootScope) => {
 

app/services/credentials-service.js

@@ -1,26 +1,20 @@
-let angApp = require(__dirname+'/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.factory('CredentialsService', () => {
-
-    const keytar = require('keytar')
-    const settings = require('electron-settings')
-
     let credentialsService = {}
-
     credentialsService.getCredentials = () => {
         let credentials = {}
-        credentials.login = settings.getSync('login')
+        credentials.login = api.electronSettings.getSync('login')
         let promise = new Promise((resolve, reject) => {
             if (credentials.login) {
-                credentials.connectionManager = settings.getSync('connectionManager')
+                credentials.connectionManager = api.electronSettings.getSync('connectionManager')
                 credentials.xmppService = credentials.login.split('@').pop()
                 let password = keytar.getPassword(credentials.xmppService, credentials.login)
                 password.then((result) => {
                     credentials.password = result
                     resolve(credentials)
                 })
-            }
-            else {
+            } else {
                 reject(Error('No login stored'))
             }
         })
@@ -29,18 +23,18 @@ angApp.factory('CredentialsService', () => {
 
     credentialsService.addCredentials = (connectionManager, login, password) => {
         let xmppService = login.split('@').pop()
-        settings.setSync('connectionManager', connectionManager)
-        settings.setSync('login', login)
+        api.electronSettings.setSync('connectionManager', connectionManager)
+        api.electronSettings.setSync('login', login)
         keytar.setPassword(xmppService, login, password)
     }
 
     credentialsService.removeCredentials = (login) => {
         let xmppService = login.split('@').pop()
-        passwordDelete = keytar.deletePassword(xmppService, login)
+        keytar.deletePassword(xmppService, login)
         let promise = new Promise((resolve, reject) => {
             passwordDelete.then((result) => {
-                settings.unsetSync('login')
-                settings.unsetSync('connectionManager')
+                api.electronSettings.unsetSync('login')
+                api.electronSettings.unsetSync('connectionManager')
                 resolve()
             }, (error) => {
                 reject(error)
@@ -51,4 +45,3 @@ angApp.factory('CredentialsService', () => {
 
     return credentialsService
 })
-

app/services/desktop-service.js

@@ -1,6 +1,5 @@
-let angApp = require(__dirname + '/../init')
-
-const desktopPlugin = require(__dirname +'/../../libs/converse.js/converse-desktop/desktop-plugin')
+const angApp = (await import('../init.js')).default;
+const desktopPlugin = (await import('../../libs/converse.js/converse-desktop/desktop-plugin.js')).desktopPlugin;
 
 angApp.factory('DesktopService', (
         $window, $timeout, CredentialsService, SystemService, AppStateService,

app/services/settings-service.js

@@ -1,11 +1,8 @@
-let angApp = require(__dirname+'/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.factory('SettingsService', () => {
 
     let settingsService = {}
-
-    const electronSettings = require('electron-settings')
-
     const settings = {
         converseDesktop: {
             runMinimized: {
@@ -44,7 +41,7 @@ angApp.factory('SettingsService', () => {
     }
 
     const iterateSettings = (callback, settingsObj) => {
-        if(typeof settingsObj === "undefined") {
+        if (typeof settingsObj === "undefined") {
             settingsObj = settings
         }
         angular.forEach(settingsObj, (value, key) => {
@@ -59,23 +56,23 @@ angApp.factory('SettingsService', () => {
     // Callback
     // TODO: replace with promise?
     const saveDefault = (key, value) => {
-        if (!electronSettings.hasSync(key)) {
-            electronSettings.setSync(key, value)
+        if (!api.electronSettings.hasSync(key)) {
+            api.electronSettings.setSync(key, value)
         }
     }
 
     // Callback
     const save = (key, defaultValue, settingsList) => {
         let value = settingsList[key]['value']
-        electronSettings.setSync(key, value)
+        api.electronSettings.setSync(key, value)
     }
 
     // Callback
     const loadAll = (key, defaultValue, settingsList) => {
-        if (!electronSettings.hasSync(key)) {
+        if (!api.electronSettings.hasSync(key)) {
             settingsList[key]['value'] = defaultValue
         }
-        settingsList[key]['value'] = electronSettings.getSync(key)
+        settingsList[key]['value'] = api.electronSettings.getSync(key)
     }
 
     /**
@@ -84,14 +81,14 @@ angApp.factory('SettingsService', () => {
     settingsService.initDefaults = () => {
         iterateSettings(saveDefault)
         // Logout for versions with BOSH only
-        if (electronSettings.hasSync('bosh')) {
-            electronSettings.unsetSync('bosh')
-            electronSettings.unsetSync('login')
+        if (api.electronSettings.hasSync('bosh')) {
+            api.electronSettings.unsetSync('bosh')
+            api.electronSettings.unsetSync('login')
         }
     }
 
     settingsService.get = (key) => {
-        return electronSettings.getSync(key)
+        return api.electronSettings.getSync(key)
     }
 
     settingsService.loadAll = () => {

app/services/system-service.js

@@ -1,9 +1,6 @@
-let angApp = require(__dirname + '/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.factory('SystemService', () => {
-
-    const remote = require('electron').remote
-
     let systemService = {}
 
     systemService.playAudio = () => {
@@ -12,15 +9,15 @@ angApp.factory('SystemService', () => {
     }
 
     systemService.showEnvelope = () => {
-        remote.require('./main').trayService.showEnvelope()
+        api.trayService.showEnvelope()
     }
 
     systemService.hideEnvelope = () => {
-        remote.require('./main').trayService.hideEnvelope()
+        api.trayService.hideEnvelope()
     }
 
     systemService.reloadWindow = () => {
-        remote.getCurrentWindow().reload()
+        api.reload()
     }
 
     return systemService

app/services/xmpp-helper-service.js

@@ -1,4 +1,4 @@
-let angApp = require(__dirname + '/../init')
+const angApp = (await import('../init.js')).default;
 
 angApp.factory('XmppHelperService', [() => {
 

index.html

@@ -11,9 +11,15 @@
     <link rel="stylesheet" type="text/css" href="resources/css/page-default.css">
     <link rel="stylesheet" type="text/css" href="resources/css/page-login.css">
     <link rel="stylesheet" type="text/css" href="resources/css/page-settings.css">
+    <script src="libs/converse.js/3rdparty/libsignal-protocol.js"></script>
+    <script src="./node_modules/angular/angular.min.js"></script>
+    <script src="./node_modules/converse.js/dist/emojis.js"></script>
+    <script src="./node_modules/converse.js/dist/converse.js"></script>
+    <script src="./node_modules/github-buttons/dist/buttons.min.js"></script>
+    <script type="module" src="./renderer.js"></script>
 </head>
 <base href="./">
-<body ng-app="app">
+<body>
     <div class="main-window" ng-controller="AppController" ng-cloak>
         <div ng-show="state == 'default'">
             <ng-include src="'./app/views/default/page.html'"></ng-include>
@@ -28,35 +34,5 @@
             <ng-include src="'./app/views/settings/page.html'"></ng-include>
         </div>
     </div>
-    <!--
-      @see comment https://github.com/signalapp/libsignal-protocol-javascript/issues/6#issuecomment-247208665
-    -->
-    <script>
-        window.nodeRequire = require
-        delete window.require
-    </script>
-    <!-- Place libsignal at libs dir as it's no more distributed with converse.js -->
-    <script src="libs/converse.js/3rdparty/libsignal-protocol.js"></script>
-    <script>
-        window.require = window.nodeRequire
-        delete window.nodeRequire
-    </script>
-    <script>
-        // You can also require other files to run in this process
-        require('./node_modules/converse.js/dist/emojis.js')
-        require('./node_modules/converse.js/dist/converse.js')
-        require('./renderer.js')
-    </script>
-    <script>
-        function loadJs(url) {
-            var script = document.createElement('script')
-            script.src = url
-            script.setAttribute('async', 'true')
-            document.documentElement.firstChild.appendChild(script)
-        }
-        setTimeout(function () {
-            loadJs("./node_modules/github-buttons/dist/buttons.min.js")
-        }, 500)
-    </script>
 </body>
 </html>

libs/converse.js/converse-desktop/desktop-plugin.js

@@ -1,4 +1,4 @@
-let desktopPlugin = {}
+const desktopPlugin = {}
 
 desktopPlugin.register = (login) => {
     converse.plugins.add('converseDesktop', {
@@ -64,4 +64,4 @@ desktopPlugin.register = (login) => {
     })
 }
 
-module.exports = desktopPlugin
+export default desktopPlugin;

main.js

@@ -1,14 +1,16 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const {app, BrowserWindow, ipcMain, shell} = require('electron')
+const path = require('path');
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow
 
 // Require other app modules
-const trayService     = require(__dirname+'/modules/tray-service')
-const menuService     = require(__dirname+'/modules/menu-service')
-const settingsService = require(__dirname+'/modules/settings-service')
+const trayService = require(__dirname + '/modules/tray-service')
+const menuService = require(__dirname + '/modules/menu-service')
+const settingsService = require(__dirname + '/modules/settings-service')
+const electronSettings = require("electron-settings");
 
 const isMac = process.platform === 'darwin'
 const isWin = process.platform === 'win32'
@@ -21,7 +23,7 @@ function initApp() {
     }
 }
 
-function createWindow () {
+function createWindow() {
     // Main window options
     let mainWindowOptions = {
         width: 800,
@@ -29,9 +31,7 @@ function createWindow () {
         minWidth: 780,
         minHeight: 560,
         webPreferences: {
-            nodeIntegration: true,
-            contextIsolation: false,
-            enableRemoteModule: true
+            preload: path.join(__dirname, 'preload.js')
         }
     }
 
@@ -107,7 +107,7 @@ function createWindow () {
     // Handle shutdown event on Mac with minimizeOnClose
     // to prevent shutdown interrupt
     if (isMac && minimizeOnClose) {
-        const { powerMonitor } = require('electron')
+        const {powerMonitor} = require('electron')
         powerMonitor.on('shutdown', () => {
             app.isQuitting = true
             app.quit()
@@ -121,6 +121,32 @@ function createWindow () {
         app.exit()
     })
 
+    ipcMain.on('electron-settings', (event, method, ...args) => {
+        switch (method) {
+            case 'hasSync':
+                event.returnValue = electronSettings.hasSync(...args);
+                break;
+            case 'getSync':
+                event.returnValue = electronSettings.getSync(...args);
+                break;
+            case 'setSync':
+                electronSettings.setSync(...args);
+                break;
+            case 'unsetSync':
+                electronSettings.unsetSync(...args);
+        }
+
+        return event.returnValue;
+    })
+
+    ipcMain.on('tray-service', (event, method) => {
+        return trayService[method].call();
+    })
+
+    ipcMain.on('reload', () => {
+        return mainWindow.reload();
+    })
+
     // Emitted when the window is closed.
     mainWindow.on('closed', function () {
         // Dereference the window object, usually you would store windows
@@ -130,7 +156,7 @@ function createWindow () {
     })
 
     // Open links on system default browser
-    mainWindow.webContents.on('new-window', function(e, url) {
+    mainWindow.webContents.on('new-window', function (e, url) {
         e.preventDefault()
         shell.openExternal(url)
     })
@@ -152,7 +178,7 @@ app.on('window-all-closed', function () {
 })
 
 app.on('activate', function () {
-    if (mainWindow === null){
+    if (mainWindow === null) {
         createWindow()
     } else {
         mainWindow.show();

modules/settings-service.js

@@ -1,5 +1,5 @@
 /**
- * Module for getting settigns in Main process.
+ * Module for getting settings in Main process.
  */
 
 const electronSettings = require('electron-settings')
@@ -7,7 +7,7 @@ const electronSettings = require('electron-settings')
 let settingsService = {}
 
 settingsService.get = (itemKey) => {
-    settingValue = electronSettings.getSync(itemKey)
+    let settingValue = electronSettings.getSync(itemKey)
     if (typeof settingValue === 'undefined' || settingValue === null) {
         return false
     }

package.json

@@ -23,7 +23,7 @@
   "author": "Nick Denry <nick@denry.ru>",
   "license": "MPL-2.0",
   "devDependencies": {
-    "electron": "^13.0.0",
+    "electron": "^16.0.0",
     "electron-builder": "^22.9.1",
     "electron-packager": "^15.2.0"
   },

preload.js

@@ -0,0 +1,37 @@
+const {ipcRenderer, contextBridge} = require('electron');
+contextBridge.exposeInMainWorld('api', {
+    send(channel, ...data) {
+        return ipcRenderer.send(channel, ...data);
+    },
+
+    receive(channel, cb) {
+        ipcRenderer.on(channel, (event, ...args) => cb(...args));
+    },
+
+    reload() {
+        ipcRenderer.send('reload')
+    },
+
+    electronSettings: {
+        hasSync(setting) {
+            return ipcRenderer.sendSync('electron-settings', 'hasSync', setting)
+        },
+        setSync(setting, value) {
+            ipcRenderer.send('electron-settings', 'setSync', setting, value)
+        },
+        unsetSync(setting) {
+            ipcRenderer.send('electron-settings', 'unsetSync', setting)
+        },
+        getSync(setting) {
+            return ipcRenderer.sendSync('electron-settings', 'getSync', setting);
+        }
+    },
+    trayService: {
+        showEnvelope() {
+            ipcRenderer.send('tray-service', 'showEnvelope')
+        },
+        hideEnvelope() {
+            ipcRenderer.send('tray-service', 'hideEnvelope')
+        }
+    }
+});

renderer.js

@@ -1,44 +1,42 @@
 // This file is required by the index.html file and will
 // be executed in the renderer process for that window.
-// All of the Node.js APIs are available in this process.
 
-var angApp = require('./app/init')
+const angApp = (await import('./app/init.js')).default;
+
+await import('./app/services/credentials-service.js')
+await import('./app/services/settings-service.js')
+await import('./app/services/system-service.js')
+await import('./app/services/app-state-service.js')
+await import('./app/services/xmpp-helper-service.js')
+await import('./app/services/desktop-service.js')
+await import('./app/controllers/settings-controller.js')
+await import('./app/controllers/login-controller.js')
+await import('./app/controllers/default-controller.js')
+await import('./app/controllers/about-controller.js')
+await import('./app/controllers/footer-controller.js')
 
-require('./app/services/credentials-service')
-require('./app/services/settings-service')
-require('./app/services/system-service')
-require('./app/services/app-state-service')
-require('./app/services/xmpp-helper-service')
-require('./app/services/desktop-service')
-require('./app/controllers/settings-controller')
-require('./app/controllers/login-controller')
-require('./app/controllers/default-controller')
-require('./app/controllers/about-controller')
-require('./app/controllers/footer-controller')
 
 angApp.controller('AppController', function ($scope, $timeout, DesktopService, SettingsService, AppStateService) {
 
-    const { ipcRenderer } = require('electron')
-
     // Menu force logout event
-    ipcRenderer.on('force-logout-event', () => {
+    api.receive('force-logout-event', () => {
         DesktopService.logout()
         let event = new CustomEvent("converse-force-logout") // Dispatch to the plugin
         document.dispatchEvent(event)
     })
 
     // Menu settings event
-    ipcRenderer.on('preferences-event', () => {
+    api.receive('preferences-event', () => {
         AppStateService.set(AppStateService.APP_STATE_SETTINGS)
     })
 
     // Menu about event
-    ipcRenderer.on('about-page-event', () => {
+    api.receive('about-page-event', () => {
         AppStateService.set(AppStateService.APP_STATE_ABOUT)
     })
 
     // Menu about event
-    ipcRenderer.on('open-unread-chat', () => {
+    api.receive('open-unread-chat', () => {
         let event = new CustomEvent('conversejs-open-chat', {detail: DesktopService.chatToOpen})
         document.dispatchEvent(event)
     })
@@ -54,11 +52,13 @@ angApp.controller('AppController', function ($scope, $timeout, DesktopService, S
     })
 
     $scope.$on('app:restart', (event, data) => {
-        ipcRenderer.send('app-restart')
+        api.send('app-restart')
     })
 
     SettingsService.initDefaults()
 
     DesktopService.getCredentialsAndLogin()
 
-})
+});
+
+angular.bootstrap(document.body, ['app']);