Merge branch 'canary'

.github/workflows/e2e_comment.yml

@@ -1,11 +1,11 @@
-name: Comment spectron screenshots on PR
+name: Comment e2e test screenshots on PR
 on:
   workflow_run:
     workflows: ['Node CI']
     types:
       - completed
 jobs:
-  spectron_comment:
+  e2e_comment:
     runs-on: ubuntu-latest
     if: github.event.workflow_run.event == 'pull_request'
     steps:
@@ -14,14 +14,14 @@ jobs:
           WORKFLOW_RUN_INFO: ${{ toJSON(github.event.workflow_run) }}
         run: echo "$WORKFLOW_RUN_INFO"
       - name: Download Artifacts
-        uses: dawidd6/action-download-artifact@v2.14.1
+        uses: dawidd6/action-download-artifact@v2.16.0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: nodejs.yml
           run_id: ${{ github.event.workflow_run.id }}
-          name: spectron
+          name: e2e
       - name: Get PR number
-        uses: dawidd6/action-download-artifact@v2.14.1
+        uses: dawidd6/action-download-artifact@v2.16.0
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: nodejs.yml
@@ -46,11 +46,18 @@ jobs:
           IMG_MARKDOWN: ${{ join(fromJSON(steps.upload_screenshots.outputs.markdown_urls), '') }}
           MESSAGE: |
             Hi there,
+            Thank you for contributing to Hyper!
+            You can get the build artifacts from [here](https://nightly.link/{1}/actions/runs/{2}).
             Here are screenshots of Hyper built from this pr.
             {0}
-            Thank you for contributing to Hyper!
         with:
           type: create
           issue_number: ${{ steps.pr_num_reader.outputs.content }}
           token: ${{ secrets.GITHUB_TOKEN }}
-          body: ${{ format(env.MESSAGE, env.IMG_MARKDOWN) }}
+          body: ${{ format(env.MESSAGE, env.IMG_MARKDOWN, github.repository, github.event.workflow_run.id) }}
+      - name: Hide older comments
+        uses: kanga333/comment-hider@v0.3.0
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          leave_visible: 1
+          issue_number: ${{ steps.pr_num_reader.outputs.content }}

.github/workflows/nodejs.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2.4.1
+        uses: actions/setup-node@v2.5.1
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -32,7 +32,7 @@ jobs:
             app/yarn.lock
       - name: Install
         run: yarn install
-      - name: Test
+      - name: Lint and Run Unit Tests
         run: yarn run test
       - name: Getting Build Icon
         if: github.ref == 'refs/heads/canary' || github.base_ref == 'canary'
@@ -59,14 +59,14 @@ jobs:
             dist/*.deb
             dist/*.rpm
             dist/*.exe
-      - name: Test Spectron
+      - name: Run E2E Tests
         if: runner.os != 'Linux'
-        run: yarn run test:spectron
+        run: yarn run test:e2e
-      - name: Archive Spectron test screenshot
+      - name: Archive E2E test screenshot
         if: runner.os != 'Linux'
         uses: actions/upload-artifact@v2
         with:
-          name: spectron
+          name: e2e
           path: dist/tmp/*.png
       - name: Save the pr number in an artifact
         if: github.event_name == 'pull_request'

app/config.ts

@@ -57,17 +57,11 @@ const _watch = () => {
     console.error('error watching config', error);
   });
 
-  app.on('before-quit', (e) => {
+  app.on('before-quit', () => {
     if (Object.keys(_watcher.getWatched()).length > 0) {
-      e.preventDefault();
+      _watcher.close().catch((err) => {
-      _watcher
+        console.warn(err);
-        .close()
+      });
-        .catch((err) => {
-          console.warn(err);
-        })
-        .finally(() => {
-          app.quit();
-        });
     }
   });
 };

app/config/config-default.js

@@ -148,7 +148,7 @@ module.exports = {
 
     // Whether to use the WebGL renderer. Set it to false to use canvas-based
     // rendering (slower, but supports transparent backgrounds)
-    webGLRenderer: false,
+    webGLRenderer: true,
 
     // keypress required for weblink activation: [ctrl|alt|meta|shift]
     // todo: does not pick up config changes automatically, need to restart terminal :/
@@ -160,6 +160,9 @@ module.exports = {
     // set to true to disable auto updates
     disableAutoUpdates: false,
 
+    // set to true to enable screen reading apps (like NVDA) to read the contents of the terminal
+    screenReaderMode: false,
+
     // for advanced config flags please refer to https://hyper.is/#cfg
   },
 

app/index.ts

@@ -9,6 +9,10 @@ if (['--help', '-v', '--version'].includes(process.argv[1])) {
   process.exit();
 }
 
+// Enable remote module
+import {initialize as remoteInitialize} from '@electron/remote/main';
+remoteInitialize();
+
 // Native
 import {resolve} from 'path';
 

app/menus/menu.ts

@@ -54,7 +54,7 @@ export const createMenu = (
     void dialog.showMessageBox({
       title: `About ${appName}`,
       message: `${appName} ${appVersion} (${updateChannel})`,
-      detail: `Renderers: ${renderers}\nPlugins: ${pluginList}\n\nCreated by Guillermo Rauch\nCopyright © 2020 Vercel, Inc.`,
+      detail: `Renderers: ${renderers}\nPlugins: ${pluginList}\n\nCreated by Guillermo Rauch\nCopyright © 2021 Vercel, Inc.`,
       buttons: [],
       icon: icon as any
     });

app/menus/menus/help.ts

@@ -22,7 +22,7 @@ export default (commands: Record<string, string>, showAbout: () => void): MenuIt
   If not, please try and fulfil these first.
 -->
 <!-- 👉 Checked checkbox should look like this: [x] -->
-- [ ] Your Hyper.app version is **${version}**. Please verify your using the [latest](https://github.com/vercel/hyper/releases/latest) Hyper.app version
+- [ ] Your Hyper.app version is **${version}**. Please verify you're using the [latest](https://github.com/vercel/hyper/releases/latest) Hyper.app version
 - [ ] I have searched the [issues](https://github.com/vercel/hyper/issues) of this repo and believe that this is not a duplicate
 ---
 - **Any relevant information from devtools?** _(CMD+OPTION+I on macOS, CTRL+SHIFT+I elsewhere)_:

app/package.json

@@ -10,9 +10,10 @@
   },
   "repository": "zeit/hyper",
   "dependencies": {
+    "@electron/remote": "2.0.1",
     "async-retry": "1.3.3",
     "chokidar": "^3.5.2",
-    "color": "4.0.1",
+    "color": "4.1.0",
     "default-shell": "1.0.1",
     "electron-fetch": "1.7.4",
     "electron-is-dev": "2.0.0",
@@ -34,6 +35,6 @@
     "uuid": "8.3.2"
   },
   "optionalDependencies": {
-    "native-reg": "0.3.5"
+    "native-reg": "1.0.0"
   }
 }

app/ui/window.ts

@@ -14,6 +14,7 @@ import contextMenuTemplate from './contextmenu';
 import {execCommand} from '../commands';
 import {setRendererType, unsetRendererType} from '../utils/renderer-utils';
 import {decorateSessionOptions, decorateSessionClass} from '../plugins';
+import {enable as remoteEnable} from '@electron/remote/main';
 
 export function newWindow(
   options_: BrowserWindowConstructorOptions,
@@ -38,12 +39,15 @@ export function newWindow(
     webPreferences: {
       nodeIntegration: true,
       navigateOnDragDrop: true,
-      enableRemoteModule: true,
       contextIsolation: false
     },
     ...options_
   };
   const window = new BrowserWindow(app.plugins.getDecoratedBrowserOptions(winOpts));
+
+  // Enable remote module on this window
+  remoteEnable(window.webContents);
+
   window.uid = classOpts.uid;
 
   app.plugins.onWindowClass(window);

app/yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@electron/remote@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/@electron/remote/-/remote-2.0.1.tgz#810cbc595a21f0f94641eb2d7e8264063a3f84de"
+  integrity sha512-bGX4/yB2bPZwXm1DsxgoABgH0Cz7oFtXJgkerB8VrStYdTyvhGAULzNLRn9rVmeAuC3VUDXaXpZIlZAZHpsLIA==
+
 "@types/semver@^7.3.8":
   version "7.3.8"
   resolved "https://registry.npmjs.org/@types/semver/-/semver-7.3.8.tgz#508a27995498d7586dcecd77c25e289bfaf90c59"
@@ -14,17 +19,7 @@ ajv-formats@^2.1.1:
   dependencies:
     ajv "^8.0.0"
 
-ajv@^8.0.0:
+ajv@^8.0.0, ajv@^8.6.3:
-  version "8.1.0"
-  resolved "https://registry.npmjs.org/ajv/-/ajv-8.1.0.tgz#45d5d3d36c7cdd808930cc3e603cf6200dbeb736"
-  integrity sha512-B/Sk2Ix7A36fs/ZkuGLIR86EdjbgR6fsAcbx9lOP/QBSXujDNbVmIS/U4Itz5k8fPFDeVZl/zQ/gJW4Jrq6XjQ==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-    uri-js "^4.2.2"
-
-ajv@^8.6.3:
   version "8.6.3"
   resolved "https://registry.npmjs.org/ajv/-/ajv-8.6.3.tgz#11a66527761dc3e9a3845ea775d2d3c0414e8764"
   integrity sha512-SMJOdDP6LqTkD0Uq8qLi+gMwSt0imXLSV080qFVwJCpH9U6Mb+SUGHAXM0KNbcBPguytWyvFxcHgMLe2D2XSpw==
@@ -93,21 +88,21 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.6.0:
+color-string@^1.9.0:
-  version "1.6.0"
+  version "1.9.0"
-  resolved "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
+  resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa"
-  integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
+  integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@4.0.1:
+color@4.1.0:
-  version "4.0.1"
+  version "4.1.0"
-  resolved "https://registry.npmjs.org/color/-/color-4.0.1.tgz#21df44cd10245a91b1ccf5ba031609b0e10e7d67"
+  resolved "https://registry.npmjs.org/color/-/color-4.1.0.tgz#9502e6a2dcacb26adf4c60910a27628d010b3de3"
-  integrity sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==
+  integrity sha512-o2rkkxyLGgYoeUy1OodXpbPAQNmlNBrirQ8ODO8QutzDiDMNdezSOZLNnusQ6pUpCQJUsaJIo9DZJKqa2HgH7A==
   dependencies:
     color-convert "^2.0.1"
-    color-string "^1.6.0"
+    color-string "^1.9.0"
 
 conf@^10.0.3:
   version "10.0.3"
@@ -446,17 +441,17 @@ nan@^2.14.0:
   resolved "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
-native-reg@0.3.5:
+native-reg@1.0.0:
-  version "0.3.5"
+  version "1.0.0"
-  resolved "https://registry.npmjs.org/native-reg/-/native-reg-0.3.5.tgz#80f6601028f236be68ef45b5c17493a94abb1145"
+  resolved "https://registry.npmjs.org/native-reg/-/native-reg-1.0.0.tgz#77f9acbf59eda02680c00b0b1b9d1e0078b7820d"
-  integrity sha512-lwaSAbq02DZ2aFK/ZvHzDpaHQSo7fh0GjIol+juMe6iwmeBO+ZMXFSPLfpOksOhcxgEBhgCU1bVm1G0u9lkdpA==
+  integrity sha512-MxukmqY7jOeiS9+b4TAlfG9cvaQ03oLET35nUGYGHDRcLx0NFk7eeoWqX4wAXaFiMW50ZiFalOA6W8q3fprcsw==
   dependencies:
-    node-gyp-build "^4"
+    node-gyp-build "4"
 
-node-gyp-build@^4:
+node-gyp-build@4:
-  version "4.2.3"
+  version "4.3.0"
-  resolved "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.2.3.tgz#ce6277f853835f718829efb47db20f3e4d9c4739"
+  resolved "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz#9f256b03e5826150be39c764bf51e993946d71a3"
-  integrity sha512-MN6ZpzmfNCRM+3t57PTJHgHyw/h4OWnZ6mR8P5j/uZtqQr46RRuDE/P+g3n0YR/AiYXeWixZZzaip77gdICfRg==
+  integrity sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==
 
 node-pty@0.10.1:
   version "0.10.1"

ava-e2e.config.js

@@ -1,9 +1,5 @@
-export default {
+module.exports = {
   files: ['test/*'],
-  babel: {
-    compileEnhancements: false,
-    compileAsTests: ['**/testUtils/**/*']
-  },
   extensions: ['ts'],
   require: ['ts-node/register/transpile-only'],
   timeout: '30s'

ava.config.js

@@ -1,9 +1,5 @@
-export default {
+module.exports = {
   files: ['test/unit/*'],
-  babel: {
-    compileEnhancements: false,
-    compileAsTests: ['**/testUtils/**/*']
-  },
   extensions: ['ts'],
   require: ['ts-node/register/transpile-only']
 };

lib/command-registry.ts

@@ -1,9 +1,9 @@
-import {remote} from 'electron';
+import {require as remoteRequire} from '@electron/remote';
 import {HyperDispatch} from './hyper';
 import {closeSearch} from './actions/sessions';
 // TODO: Should be updates to new async API https://medium.com/@nornagon/electrons-remote-module-considered-harmful-70d69500f31
 
-const {getDecoratedKeymaps} = remote.require('./plugins') as typeof import('../app/plugins');
+const {getDecoratedKeymaps} = remoteRequire('./plugins') as typeof import('../app/plugins');
 
 let commands: Record<string, (event: any, dispatch: HyperDispatch) => void> = {
   'editor:search-close': (e, dispatch) => {

lib/components/notification.tsx

@@ -99,14 +99,14 @@ export default class Notification extends React.PureComponent<NotificationProps,
             position: relative;
             left: 4px;
             cursor: pointer;
-            opacity: 0.5;
+            font-weight: 600;
             color: currentColor;
-            transition: opacity 0.1s ease-in-out;
+            transition: font-weight 0.1s ease-in-out;
           }
 
           .notification_dismissLink:hover,
           .notification_dismissLink:focus {
-            opacity: 1;
+            font-weight: 900;
           }
         `}</style>
       </div>

lib/components/notifications.tsx

@@ -38,10 +38,10 @@ export default class Notifications extends React.PureComponent<NotificationsProp
           <Notification
             key="message"
             backgroundColor="#FE354E"
+            color="#fff"
             text={this.props.messageText}
             onDismiss={this.props.onDismissMessage}
             userDismissable={this.props.messageDismissable}
-            userDismissColor="#AA2D3C"
           >
             {this.props.messageURL
               ? [
@@ -58,7 +58,7 @@ export default class Notifications extends React.PureComponent<NotificationsProp
                   >
                     more
                   </a>,
-                  ')'
+                  ') '
                 ]
               : null}
           </Notification>

lib/components/term-group.tsx

@@ -104,6 +104,7 @@ class TermGroup_ extends React.PureComponent<TermGroupProps> {
       webLinksActivationKey: this.props.webLinksActivationKey,
       macOptionSelectionMode: this.props.macOptionSelectionMode,
       disableLigatures: this.props.disableLigatures,
+      screenReaderMode: this.props.screenReaderMode,
       uid
     });
 

lib/components/term.tsx

@@ -77,7 +77,8 @@ const getTermOptions = (props: TermProps): ITerminalOptions => {
       brightMagenta: props.colors.lightMagenta,
       brightCyan: props.colors.lightCyan,
       brightWhite: props.colors.lightWhite
-    }
+    },
+    screenReaderMode: props.screenReaderMode
   };
 };
 

lib/components/terms.tsx

@@ -116,6 +116,7 @@ export default class Terms extends React.Component<TermsProps> {
             webLinksActivationKey: this.props.webLinksActivationKey,
             macOptionSelectionMode: this.props.macOptionSelectionMode,
             disableLigatures: this.props.disableLigatures,
+            screenReaderMode: this.props.screenReaderMode,
             parentProps: this.props
           });
 

lib/config.d.ts

@@ -51,6 +51,7 @@ export type configOptions = {
   };
   padding: string;
   quickEdit: boolean;
+  screenReaderMode: boolean;
   scrollback: number;
   selectionColor: string;
   shell: string;

lib/containers/terms.ts

@@ -45,7 +45,8 @@ const mapStateToProps = (state: HyperState) => {
     webGLRenderer: state.ui.webGLRenderer,
     webLinksActivationKey: state.ui.webLinksActivationKey,
     macOptionSelectionMode: state.ui.macOptionSelectionMode,
-    disableLigatures: state.ui.disableLigatures
+    disableLigatures: state.ui.disableLigatures,
+    screenReaderMode: state.ui.screenReaderMode
   };
 };
 

lib/hyper.d.ts

@@ -79,6 +79,7 @@ export type uiState = Immutable<{
   quickEdit: boolean;
   resizeAt: number;
   rows: number | null;
+  screenReaderMode: boolean;
   scrollback: number;
   selectionColor: string;
   showHamburgerMenu: boolean | '';
@@ -287,6 +288,7 @@ export type TermGroupOwnProps = {
   | 'onTitle'
   | 'padding'
   | 'quickEdit'
+  | 'screenReaderMode'
   | 'scrollback'
   | 'selectionColor'
   | 'sessions'
@@ -344,6 +346,7 @@ export type TermProps = {
   padding: string;
   quickEdit: boolean;
   rows: number | null;
+  screenReaderMode: boolean;
   scrollback: number;
   search: boolean;
   searchAddon: SearchAddon | null;

lib/reducers/ui.ts

@@ -107,7 +107,8 @@ const initial: uiState = Immutable<Mutable<uiState>>({
   webGLRenderer: true,
   webLinksActivationKey: '',
   macOptionSelectionMode: 'vertical',
-  disableLigatures: false
+  disableLigatures: true,
+  screenReaderMode: false
 });
 
 const reducer: IUiReducer = (state = initial, action) => {
@@ -260,10 +261,14 @@ const reducer: IUiReducer = (state = initial, action) => {
               ret.macOptionSelectionMode = config.macOptionSelectionMode;
             }
 
-            if (config.disableLigatures) {
+            if (config.disableLigatures !== undefined) {
               ret.disableLigatures = config.disableLigatures;
             }
 
+            if (config.screenReaderMode !== undefined) {
+              ret.screenReaderMode = config.screenReaderMode;
+            }
+
             ret._lastUpdate = now;
 
             return ret;

lib/utils/config.ts

@@ -1,7 +1,8 @@
-import {ipcRenderer, remote} from 'electron';
+import {ipcRenderer} from 'electron';
+import {require as remoteRequire} from '@electron/remote';
 // TODO: Should be updates to new async API https://medium.com/@nornagon/electrons-remote-module-considered-harmful-70d69500f31
 
-const plugins = remote.require('./plugins') as typeof import('../../app/plugins');
+const plugins = remoteRequire('./plugins') as typeof import('../../app/plugins');
 
 export function getConfig() {
   return plugins.getDecoratedConfig();

lib/utils/plugins.ts

@@ -1,6 +1,6 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-import {remote} from 'electron';
+import {require as remoteRequire} from '@electron/remote';
 // TODO: Should be updates to new async API https://medium.com/@nornagon/electrons-remote-module-considered-harmful-70d69500f31
 
 import {connect as reduxConnect, Options} from 'react-redux';
@@ -32,7 +32,7 @@ import IPCChildProcess from './ipc-child-process';
 import ChildProcess from 'child_process';
 
 // remote interface to `../plugins`
-const plugins = remote.require('./plugins') as typeof import('../../app/plugins');
+const plugins = remoteRequire('./plugins') as typeof import('../../app/plugins');
 
 // `require`d modules
 let modules: hyperPlugin[];

package.json

@@ -11,7 +11,7 @@
     "test": "yarn run lint && yarn run test:unit",
     "test:unit": "ava",
     "test:unit:watch": "yarn run test:unit -- --watch",
-    "test:spectron": "ava --config ava-spectron.config.js",
+    "test:e2e": "ava --config ava-e2e.config.js",
     "postinstall": "webpack --config-name hyper-app && electron-builder install-app-deps && yarn run rebuild-node-pty && cpy --cwd=target --parents \"node_modules/**/*\" \"../app/\" && husky install",
     "rebuild-node-pty": "electron-rebuild -f -o node-pty -m target",
     "dist": "yarn run build && cross-env BABEL_ENV=production babel target/renderer/bundle.js --out-file target/renderer/bundle.js --no-comments --minified && electron-builder",
@@ -23,105 +23,107 @@
     "email": "team@zeit.co"
   },
   "dependencies": {
+    "@electron/remote": "2.0.1",
     "args": "5.0.1",
     "chalk": "4.1.2",
-    "color": "4.0.1",
+    "color": "4.1.0",
     "columnify": "1.5.4",
-    "css-loader": "6.3.0",
+    "css-loader": "6.5.1",
-    "got": "11.8.2",
+    "got": "11.8.3",
     "json-loader": "0.5.7",
     "mousetrap": "chabou/mousetrap#useCapture",
     "ms": "2.1.3",
-    "open": "8.2.1",
+    "open": "8.4.0",
     "ora": "5.4.1",
     "parse-url": "5.0.7",
     "php-escape-shell": "1.0.0",
     "react": "17.0.2",
     "react-deep-force-update": "2.1.3",
     "react-dom": "17.0.2",
-    "react-redux": "7.2.5",
+    "react-redux": "7.2.6",
     "recast": "0.20.5",
-    "redux": "4.1.1",
+    "redux": "4.1.2",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "2.4.1",
-    "reselect": "4.0.0",
+    "reselect": "4.1.5",
     "seamless-immutable": "7.1.4",
     "semver": "7.3.5",
     "shebang-loader": "0.0.1",
     "styled-jsx": "4.0.1",
     "stylis": "3.5.4",
     "uuid": "8.3.2",
-    "webpack-cli": "4.8.0",
+    "webpack-cli": "4.9.1",
-    "xterm": "^4.14.1",
+    "xterm": "^4.16.0",
     "xterm-addon-fit": "^0.5.0",
-    "xterm-addon-ligatures": "^0.5.1",
+    "xterm-addon-ligatures": "0.6.0-beta.4",
-    "xterm-addon-search": "^0.8.1",
+    "xterm-addon-search": "^0.8.2",
     "xterm-addon-unicode11": "^0.3.0",
-    "xterm-addon-web-links": "^0.4.0",
+    "xterm-addon-web-links": "^0.5.0",
-    "xterm-addon-webgl": "^0.11.2"
+    "xterm-addon-webgl": "^0.11.4"
   },
   "devDependencies": {
     "@ava/babel": "2.0.0",
-    "@babel/cli": "7.15.7",
+    "@ava/typescript": "^3.0.1",
-    "@babel/core": "7.15.5",
+    "@babel/cli": "7.16.7",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/core": "7.16.7",
-    "@babel/plugin-proposal-numeric-separator": "^7.14.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
+    "@babel/plugin-proposal-numeric-separator": "^7.16.7",
-    "@babel/plugin-proposal-optional-chaining": "7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
-    "@babel/preset-react": "7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "7.16.7",
-    "@babel/preset-typescript": "7.15.0",
+    "@babel/preset-react": "7.16.7",
+    "@babel/preset-typescript": "7.16.7",
     "@types/args": "5.0.0",
     "@types/async-retry": "1.4.3",
     "@types/color": "3.0.2",
     "@types/columnify": "^1.5.1",
     "@types/fs-extra": "9.0.13",
-    "@types/lodash": "^4.14.175",
+    "@types/lodash": "^4.14.178",
     "@types/mkdirp": "1.0.2",
-    "@types/mousetrap": "1.6.8",
+    "@types/mousetrap": "1.6.9",
     "@types/ms": "0.7.31",
     "@types/node": "^14.17.14",
     "@types/pify": "5.0.1",
     "@types/plist": "3.0.2",
-    "@types/react": "^17.0.27",
+    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^17.0.11",
-    "@types/react-redux": "^7.1.18",
+    "@types/react-redux": "^7.1.21",
     "@types/seamless-immutable": "7.1.16",
     "@types/styled-jsx": "2.2.9",
     "@types/terser-webpack-plugin": "5.2.0",
-    "@types/uuid": "8.3.1",
+    "@types/uuid": "8.3.3",
-    "@typescript-eslint/eslint-plugin": "4.32.0",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.32.0",
+    "@typescript-eslint/parser": "4.33.0",
-    "ava": "3.15.0",
+    "ava": "4.0.0",
-    "babel-loader": "8.2.2",
+    "babel-loader": "8.2.3",
-    "concurrently": "6.3.0",
+    "concurrently": "7.0.0",
-    "copy-webpack-plugin": "9.0.1",
+    "copy-webpack-plugin": "10.2.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "7.0.3",
-    "electron": "^13.2.3",
+    "electron": "^14.2.3",
-    "electron-builder": "^22.11.7",
+    "electron-builder": "^22.14.5",
     "electron-devtools-installer": "3.2.0",
     "electron-notarize": "1.1.1",
-    "electron-rebuild": "3.2.3",
+    "electron-rebuild": "3.2.5",
     "electronmon": "^2.0.2",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.26.1",
+    "eslint-plugin-react": "7.28.0",
-    "husky": "7.0.2",
+    "husky": "7.0.4",
-    "inquirer": "8.1.5",
+    "inquirer": "8.2.0",
     "node-addon-api": "4.2.0",
-    "node-gyp": "8.2.0",
+    "node-gyp": "8.4.1",
     "null-loader": "4.0.1",
+    "playwright": "1.17.1",
     "plist": "3.0.4",
-    "prettier": "2.4.1",
+    "prettier": "2.5.1",
     "proxyquire": "2.1.3",
     "redux-devtools-extension": "2.13.9",
-    "spectron": "15.0.0",
+    "style-loader": "3.3.1",
-    "style-loader": "3.3.0",
+    "terser": "5.10.0",
-    "terser": "5.9.0",
+    "ts-node": "10.4.0",
-    "ts-node": "10.2.1",
+    "typescript": "4.5.4",
-    "typescript": "4.4.3",
+    "webpack": "5.65.0"
-    "webpack": "5.56.1"
   },
   "electronmon": {
     "patterns": [

test/index.ts

@@ -1,14 +1,12 @@
-/* eslint-disable eslint-comments/disable-enable-pair */
-/* eslint-disable @typescript-eslint/await-thenable */
 // Native
 import path from 'path';
 import fs from 'fs-extra';
 
 // Packages
 import test from 'ava';
-import {Application} from 'spectron';
+import {_electron, ElectronApplication} from 'playwright';
 
-let app: Application;
+let app: ElectronApplication;
 
 test.before(async () => {
   let pathToBinary;
@@ -30,22 +28,31 @@ test.before(async () => {
       throw new Error('Path to the built binary needs to be defined for this platform in test/index.js');
   }
 
-  app = new Application({
+  app = await _electron.launch({
-    path: pathToBinary
+    executablePath: pathToBinary
   });
-
+  await app.firstWindow();
-  await app.start();
+  await new Promise((resolve) => setTimeout(resolve, 5000));
 });
 
 test.after(async () => {
-  await new Promise((resolve) => setTimeout(resolve, 5000));
+  await app
-  await app.browserWindow.capturePage().then(async (imageBuffer) => {
+    .evaluate(async ({BrowserWindow, desktopCapturer, screen}) => {
-    await fs.writeFile(`dist/tmp/${process.platform}_test.png`, imageBuffer);
+      // eslint-disable-next-line prefer-const
-  });
+      let {width, height, ...position} = BrowserWindow.getFocusedWindow()!.getBounds();
-  await app.stop();
+      const {scaleFactor} = screen.getDisplayNearestPoint(position);
+      width *= scaleFactor;
+      height *= scaleFactor;
+      const sources = await desktopCapturer.getSources({types: ['window'], thumbnailSize: {width, height}});
+      return sources[0].thumbnail.toPNG().toString('base64');
+    })
+    .then((img) => Buffer.from(img || '', 'base64'))
+    .then(async (imageBuffer) => {
+      await fs.writeFile(`dist/tmp/${process.platform}_test.png`, imageBuffer);
+    });
+  await app.close();
 });
 
 test('see if dev tools are open', async (t) => {
-  await app.client.waitUntilWindowLoaded();
+  t.false(await app.evaluate(({webContents}) => webContents.getFocusedWebContents().isDevToolsOpened()));
-  t.false(await app.webContents.isDevToolsOpened());
 });