Upgraded electron to v11.

Closes #1441

packages/altair-electron/jest.config.e2e.js

@@ -6,7 +6,7 @@ module.exports = {
   // automock: false,
 
   // Stop running tests after `n` failures
-  // bail: 0,
+  bail: 0,
 
   // The directory where Jest should store its cached dependency information
   // cacheDirectory: "/private/var/folders/58/nks21_017dqblqnmvh73mxqr0000gp/T/jest_dy",

packages/altair-electron/package.json

@@ -16,14 +16,13 @@
   },
   "dependencies": {
     "altair-static": "^3.1.0",
-    "electron-chromedriver": "6.0.0",
     "electron-debug": "^3.0.1",
     "electron-is-dev": "^1.2.0",
     "electron-log": "^3.0.6",
     "electron-squirrel-startup": "^1.0.0",
-    "electron-store": "^5.0.0",
+    "electron-store": "^7.0.1",
     "electron-unhandled": "^3.0.2",
-    "electron-updater": "^4.1.2",
+    "electron-updater": "^4.3.5",
     "electron-util": "^0.12.1",
     "electron-window-state": "^5.0.3",
     "mime-types": "^2.1.24"
@@ -33,14 +32,14 @@
     "@types/jest": "^26.0.3",
     "devtron": "^1.4.0",
     "dotenv": "^8.1.0",
-    "electron": "6.1.2",
+    "electron": "^11.2.2",
     "electron-builder": "^21.2.0",
-    "electron-notarize": "^0.1.1",
+    "electron-notarize": "^1.0.0",
     "electron-reloader": "^0.3.0",
     "eslint": "^7.3.1",
     "jest": "^26.1.0",
     "jest-circus": "^26.1.0",
-    "spectron": "8.0.0"
+    "spectron": "^13.0.0"
   },
   "repository": {
     "type": "git",

packages/altair-electron/scripts/notarize.js

@@ -10,7 +10,7 @@ exports.default = async function notarizing(context) {
   const appName = context.packager.appInfo.productFilename;
 
   console.log('Notarizing application');
-  return await notarize({
+  await notarize({
     appBundleId: 'com.xkoji.altair',
     appPath: `${appOutDir}/${appName}.app`,
     appleId: process.env.APPLEID,

packages/altair-electron/src/app/index.js

@@ -82,7 +82,7 @@ class ElectronApp {
         e.preventDefault();
 
         const { shell } = require('electron');
-        shell.openExternalSync(navigationUrl);
+        shell.openExternal(navigationUrl);
       });
     });
   }

packages/altair-electron/src/app/menu.js

@@ -15,7 +15,7 @@ class MenuManager {
     const isMac = process.platform === 'darwin';
 
     const template = [
-      ...( isMac ? [{
+      {
         label: app.getName(),
         submenu: [
           { role: 'about' },
@@ -28,16 +28,18 @@ class MenuManager {
             accelerator: 'Cmd+,',
             click: () => this.actionManager.showSettings(),
           },
-          { type: 'separator' },
-          { role: 'services', submenu: [] },
-          { type: 'separator' },
-          { role: 'hide' },
-          { role: 'hideothers' },
-          { role: 'unhide' },
+          ...(isMac ? [
+            { type: 'separator' },
+            { role: 'services', submenu: [] },
+            { type: 'separator' },
+            { role: 'hide' },
+            { role: 'hideothers' },
+            { role: 'unhide' },
+          ] : []),
           { type: 'separator' },
           { role: 'quit' }
         ]
-      }] : []),
+      },
       {
         label: 'Edit',
         submenu: [

packages/altair-electron/src/app/window.js

@@ -14,6 +14,7 @@ const windowStateKeeper = require('electron-window-state');
 const { getDistDirectory, renderAltair } = require('altair-static');
 
 const { checkMultipleDataVersions } = require('../utils/check-multi-data-versions');
+const { initMainProcessStoreEvents } = require('../electron-store-adapter/main-store-events');
 
 const MenuManager = require('./menu');
 const ActionManager = require('./actions');
@@ -63,6 +64,7 @@ class WindowManager {
         nodeIntegration: false,
         nodeIntegrationInWorker: false,
         contextIsolation: false,
+        enableRemoteModule: process.env.NODE_ENV === 'test', // remote required for spectron tests to work
         preload: path.join(__dirname, '../preload', 'index.js'),
       },
       // titleBarStyle: 'hidden-inset'
@@ -78,6 +80,7 @@ class WindowManager {
     this.menuManager = new MenuManager(this.actionManager);
     // Set the touchbar
     this.touchbarManager = new TouchbarManager(this.actionManager);
+    this.instance.setTouchBar(this.touchbarManager.createTouchBar());
 
     // and load the index.html of the app.
     this.instance.loadURL(url.format({
@@ -92,6 +95,8 @@ class WindowManager {
 
   manageEvents() {
 
+    initMainProcessStoreEvents();
+
     // Prevent the app from navigating away from the app
     this.instance.webContents.on('will-navigate', e => e.preventDefault());
 
@@ -192,36 +197,41 @@ class WindowManager {
       this.instance.webContents.send('file-opened', openedFileContent);
       this.electronApp.store.delete('file-opened');
     });
+
+    ipcMain.handle('reload-window', (e) => {
+      e.sender.reload();
+    });
   }
 
   registerProtocol() {
 
-    /**
-     * Using a custom buffer protocol, instead of a file protocol because of restrictions with the file protocol.
-     */
-    protocol.registerBufferProtocol('altair', (request, callback) => {
+    try {
+      /**
+       * Using a custom buffer protocol, instead of a file protocol because of restrictions with the file protocol.
+       */
+      protocol.registerBufferProtocol('altair', (request, callback) => {
 
-      const requestDirectory = getDistDirectory();
-      const originalFilePath = path.join(requestDirectory, new url.URL(request.url).pathname);
-      const indexPath = path.join(requestDirectory, 'index.html');
+        const requestDirectory = getDistDirectory();
+        const originalFilePath = path.join(requestDirectory, new url.URL(request.url).pathname);
+        const indexPath = path.join(requestDirectory, 'index.html');
 
-      this.getFileContentData(originalFilePath, indexPath).then(({ mimeType, data }) => {
-        callback({ mimeType, data });
-      }).catch(err => {
-        throw err;
+        this.getFileContentData(originalFilePath, indexPath).then(({ mimeType, data }) => {
+          callback({ mimeType, data });
+        }).catch(err => {
+          throw err;
+        });
       });
-    }, (error) => {
-      if (error) {
-        error.message = `Failed to register protocol. ${error.message}`;
-        console.error(error);
-      }
-    });
+    } catch (error) {
+      error.message = `Failed to register protocol. ${error.message}`;
+      console.error(error);
+    }
   }
 
   /**
    * @param {string} filePath path to file
    */
   getFilePath(filePath) {
+    console.log('file..', filePath);
     return new Promise((resolve, reject) => {
       try {
         if (!filePath) {
@@ -232,7 +242,7 @@ class WindowManager {
           return resolve(filePath);
         }
 
-        console.log('checking stat..', filePath);
+        // console.log('checking stat..', filePath);
         fs.stat(filePath, (err, stats) => {
           if (err) {
             console.log('with error', err);

packages/altair-electron/src/electron-store-adapter/constants.js

@@ -0,0 +1,13 @@
+const EVENTS = {
+  LENGTH: 'electron-store:length',
+  CLEAR: 'electron-store:clear',
+  GET_ITEM: 'electron-store:getItem',
+  KEY_BY_INDEX: 'electron-store:keyByIndex',
+  REMOVE_ITEM: 'electron-store:removeItem',
+  SET_ITEM: 'electron-store:setItem',
+  GET_STORE_OBJECT: 'electron-store:getStoreObject',
+};
+
+module.exports = {
+  EVENTS,
+};

packages/altair-electron/src/electron-store-adapter/electron-store-adapter.js

@@ -1,50 +1,55 @@
-const { PersistentStore } = require('../store');
+const { EVENTS } = require('./constants');
 
 // An interface between localStorage and electron-store
+// Used in renderer process
+// Should use ipc to communicate with main process
 class ElectronStoreAdapter {
-  constructor() {
-    this.store = new PersistentStore();
+  constructor(ipc) {
+    this.ipc = ipc;
+  }
+
+  get store() {
+    return this.ipc.sendSync(EVENTS.GET_STORE_OBJECT);
   }
 
   /**
    * Returns the number of key/value pairs currently present in the list associated with the object.
    */
   // readonly length: number;
   get length() {
-    return this.store.size;
+    return this.ipc.sendSync(EVENTS.LENGTH);
   }
 
   /**
    * Empties the list associated with the object of all key/value pairs, if there are any.
    */
   // clear(): void;
   clear() {
-    return this.store.clear();
+    return this.ipc.sendSync(EVENTS.CLEAR);
   }
 
   /**
    * Returns the current value associated with the given key, or null if the given key does not exist in the list associated with the object.
    */
   // getItem(key: string): string | null;
   getItem(key) {
-    return this.store.get(key);
+    return this.ipc.sendSync(EVENTS.GET_ITEM, key);
   }
 
   /**
    * Returns the name of the nth key in the list, or null if n is greater than or equal to the number of key/value pairs in the object.
    */
   // key(index: number): string | null;
   key(index) {
-    const key = Object.keys(this.store.store)[index];
-    return key || null;
+    return this.ipc.sendSync(EVENTS.KEY_BY_INDEX, index);
   }
 
   /**
    * Removes the key/value pair with the given key from the list associated with the object, if a key/value pair with the given key exists.
    */
   // removeItem(key: string): void;
   removeItem(key) {
-    return this.store.delete(key);
+    return this.ipc.sendSync(EVENTS.REMOVE_ITEM, key);
   }
 
   /**
@@ -54,7 +59,7 @@ class ElectronStoreAdapter {
    */
   // setItem(key: string, value: string): void;
   setItem(key, value) {
-    return this.store.set(key, value);
+    return this.ipc.sendSync(EVENTS.SET_ITEM, key, value);
   }
 
   *[Symbol.iterator]() {

packages/altair-electron/src/electron-store-adapter/main-store-events.js

@@ -0,0 +1,40 @@
+const { ipcMain } = require('electron');
+const { PersistentStore } = require('../store');
+const { EVENTS } = require('./constants');
+
+const initMainProcessStoreEvents = () => {
+  const store = new PersistentStore();
+
+  ipcMain.on(EVENTS.LENGTH, (e) => {
+    e.returnValue = store.size;
+  });
+
+  ipcMain.on(EVENTS.CLEAR, (e) => {
+    e.returnValue = store.clear();
+  });
+
+  ipcMain.on(EVENTS.GET_ITEM, (e, key) => {
+    e.returnValue = store.get(key);
+  });
+
+  ipcMain.on(EVENTS.KEY_BY_INDEX, (e, index) => {
+    const key = Object.keys(store.store)[index];
+    e.returnValue = key || null;
+  });
+
+  ipcMain.on(EVENTS.REMOVE_ITEM, (e, key) => {
+    e.returnValue = store.delete(key);
+  });
+
+  ipcMain.on(EVENTS.SET_ITEM, (e, key, value) => {
+    e.returnValue = store.set(key, value);
+  });
+
+  ipcMain.on(EVENTS.GET_STORE_OBJECT, (e) => {
+    e.returnValue = store.store;
+  });
+};
+
+module.exports = {
+  initMainProcessStoreEvents,
+};

packages/altair-electron/src/preload/index.js

@@ -11,28 +11,34 @@
 // The loaded page will not be able to access this, it is only available
 // in this context
 // window.bar = 'bar'
-
-window.ipc = require('electron').ipcRenderer;
-const { getCurrentWindow } = require('electron').remote;
+const ipc = require('electron').ipcRenderer;
+window.ipc = ipc;
 const ElectronStoreAdapter = require('../electron-store-adapter/electron-store-adapter');
 
-const reload = () => {
-  getCurrentWindow().reload();
+const reload = async() => {
+  await ipc.invoke('reload-window');
 };
 
+if (process.env.NODE_ENV === 'development') {
+  console.log('installing devtron', require('devtron'));
+  require('devtron').install();
+  // eslint-disable-next-line no-underscore-dangle
+  window.__devtron = { require, process };
+}
+
 process.once('loaded', () => {
   // Giving access to spectron to run tests successfully
   if (process.env.NODE_ENV === 'test') {
     window.electronRequire = require;
   }
 
   // console.log(allStorage());
-  const store = new ElectronStoreAdapter();
+  const store = new ElectronStoreAdapter(ipc);
   // Check if data is stored in electron store
   if (!store.length) {
     // Else, copy content of localstorage into electron store and reload.
-    Object.keys(localStorage).forEach(key => {
-      store.setItem(key, localStorage.getItem(key));
+    Object.keys(window.localStorage).forEach(key => {
+      store.setItem(key, window.localStorage.getItem(key));
     });
     return reload();
   }