Bump @types/react from 18.2.75 to 18.2.79

Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.2.75 to 18.2.79.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react)

---
updated-dependencies:
- dependency-name: "@types/react"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

.eslintrc.json

@@ -3,7 +3,9 @@
     "react",
     "prettier",
     "@typescript-eslint",
-    "eslint-comments"
+    "eslint-comments",
+    "lodash",
+    "import"
   ],
   "extends": [
     "eslint:recommended",
@@ -32,7 +34,11 @@
   "settings": {
     "react": {
       "version": "detect"
-    }
+    },
+    "import/resolver": {
+      "typescript": {}
+    },
+    "import/internal-regex": "^(electron|react)$"
   },
   "rules": {
     "func-names": [
@@ -59,7 +65,16 @@
         "bracketSameLine": false
       }
     ],
-    "eslint-comments/no-unused-disable": "error"
+    "eslint-comments/no-unused-disable": "error",
+    "react/no-unknown-property":[
+      "error",
+      {
+        "ignore": [
+          "jsx",
+          "global"
+        ]
+      }
+    ]
   },
   "overrides": [
     {
@@ -83,7 +98,33 @@
         "@typescript-eslint/no-shadow": ["error"],
         "@typescript-eslint/no-unsafe-assignment": "off",
         "@typescript-eslint/no-unsafe-member-access": "off",
-        "@typescript-eslint/restrict-template-expressions": "off"
+        "@typescript-eslint/restrict-template-expressions": "off",
+        "@typescript-eslint/consistent-type-imports": [ "error", { "disallowTypeAnnotations": false } ],
+        "lodash/prop-shorthand": [ "error", "always" ],
+        "lodash/import-scope": [ "error", "method" ],
+        "lodash/collection-return": "error",
+        "lodash/collection-method-value": "error",
+        "import/no-extraneous-dependencies": "error",
+        "import/no-anonymous-default-export": "error",
+        "import/order": [
+          "error",
+          {
+            "groups": [
+              "builtin",
+              "internal",
+              "external",
+              "parent",
+              "sibling",
+              "index"
+            ],
+            "newlines-between": "always",
+            "alphabetize": {
+              "order": "asc",
+              "orderImportKind": "desc",
+              "caseInsensitive": true
+            }
+          }
+        ]
       }
     },
     {

.github/workflows/codeql-analysis.yml

@@ -35,11 +35,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -50,7 +50,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -64,4 +64,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3

.github/workflows/e2e_comment.yml

@@ -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.24.2
+        uses: dawidd6/action-download-artifact@v3.1.4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: nodejs.yml
           run_id: ${{ github.event.workflow_run.id }}
           name: e2e
       - name: Get PR number
-        uses: dawidd6/action-download-artifact@v2.24.2
+        uses: dawidd6/action-download-artifact@v3.1.4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: nodejs.yml
@@ -29,7 +29,7 @@ jobs:
           name: pr_num
       - name: Read the pr_num file
         id: pr_num_reader
-        uses: juliangruber/read-file-action@v1.1.6
+        uses: juliangruber/read-file-action@v1.1.7
         with:
           path: ./pr_num.txt
       - name: List images

.github/workflows/nodejs.yml

@@ -8,30 +8,45 @@ on:
 defaults:
   run:
     shell: bash
+env:
+  NODE_VERSION: 18.x
 jobs:
   build:
     runs-on: ${{matrix.os}}
     strategy:
       matrix:
-        node-version: [16.x]
         os:
-          - macos-12
-          - ubuntu-18.04
+          - macos-latest
+          - ubuntu-latest
           - windows-latest
       fail-fast: false
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: yarn
-          cache-dependency-path: |
-            yarn.lock
-            app/yarn.lock
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Fix node-gyp and Python
+        run: python3 -m pip install packaging setuptools
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      - uses: actions/cache/restore@v4
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock', 'app/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
       - name: Install
         run: yarn install
+        env:
+          npm_config_node_gyp: ${{ github.workspace }}${{ runner.os == 'Windows' && '\node_modules\node-gyp\bin\node-gyp.js' || '/node_modules/node-gyp/bin/node-gyp.js' }}
+      - name: Install libarchive-tools
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt update
+          sudo apt install libarchive-tools
       - name: Lint and Run Unit Tests
         run: yarn run test
       - name: Getting Build Icon
@@ -40,7 +55,14 @@ jobs:
           cp build/canary.ico build/icon.ico
           cp build/canary.icns build/icon.icns
       - name: Build
-        run: if [ ! -z "$CSC_LINK" ] ; then yarn run dist ; else unset CSC_LINK && unset WIN_CSC_LINK && yarn run dist --publish=never ; fi
+        run: |
+          if [ -z "$CSC_LINK" ] ; then unset CSC_LINK ; fi
+          if [ -z "$CSC_KEY_PASSWORD" ] ; then unset CSC_KEY_PASSWORD ; fi
+          if [ -z "$WIN_CSC_LINK" ] ; then unset WIN_CSC_LINK ; fi
+          if [ -z "$WIN_CSC_KEY_PASSWORD" ] ; then unset WIN_CSC_KEY_PASSWORD ; fi
+          if [ -z "$APPLE_ID" ] ; then unset APPLE_ID ; fi
+          if [ -z "$APPLE_APP_SPECIFIC_PASSWORD" ] ; then unset APPLE_APP_SPECIFIC_PASSWORD ; fi
+          yarn run dist
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CSC_LINK: ${{ secrets.MAC_CERT_P12_BASE64 }}
@@ -48,7 +70,7 @@ jobs:
           WIN_CSC_LINK: ${{ secrets.WIN_CERT_P12_BASE64 }}
           WIN_CSC_KEY_PASSWORD: ${{ secrets.WIN_CERT_P12_PASSWORD }}
           APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
       - name: Archive Build Artifacts
         uses: LabhanshAgrawal/upload-artifact@v3
         with:
@@ -58,12 +80,19 @@ jobs:
             dist/*.AppImage
             dist/*.deb
             dist/*.rpm
+            dist/*.pacman
             dist/*.exe
       - name: Run E2E Tests
         if: runner.os != 'Linux'
         run: yarn run test:e2e
+      - name: Run E2E Tests on Linux
+        if: runner.os == 'Linux'
+        uses: GabrielBB/xvfb-action@v1.6
+        with:
+          run: yarn run test:e2e
+        env:
+          SHELL: /bin/bash
       - name: Archive E2E test screenshot
-        if: runner.os != 'Linux'
         uses: actions/upload-artifact@v3
         with:
           name: e2e
@@ -79,3 +108,83 @@ jobs:
         with:
           name: pr_num
           path: ./pr_num.txt
+      - uses: actions/cache/save@v4
+        if: github.event_name == 'push'
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock', 'app/yarn.lock') }}
+
+  build-linux-arm:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        include:
+          - name: armv7l
+            cpu: cortex-a8
+            image: raspios_lite:latest
+          - name: arm64
+            cpu: cortex-a53
+            image: raspios_lite_arm64:latest
+      fail-fast: false
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Fix node-gyp and Python
+        run: python3 -m pip install packaging setuptools
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      - uses: actions/cache/restore@v4
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock', 'app/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install
+        run: |
+          yarn install
+          sudo apt update
+          sudo apt install libarchive-tools
+      - name: Compile
+        run: yarn run build
+      - name: rebuild node-pty
+        uses: pguyot/arm-runner-action@v2.5.2
+        with:
+          image_additional_mb: 2000
+          base_image: ${{ matrix.image }}
+          cpu: ${{ matrix.cpu }}
+          shell: bash
+          copy_artifact_path: target/node_modules/node-pty
+          copy_artifact_dest: target/node_modules
+          commands: |
+            wget https://nodejs.org/dist/v18.16.0/node-v18.16.0-linux-${{ matrix.name }}.tar.xz
+            tar -xJf node-v18.16.0-linux-${{ matrix.name }}.tar.xz
+            sudo cp node-v18.16.0-linux-${{ matrix.name }}/* /usr/local/ -R
+            npm run rebuild-node-pty
+      - name: chown node-pty
+        run: |
+          sudo chown -R $USER:$USER target/node_modules/node-pty
+      - name: Prepare v8 snapshot
+        if: matrix.name == 'armv7l'
+        run: |
+          sudo dpkg --add-architecture i386
+          sudo apt update
+          sudo apt install -y libglib2.0-0:i386 libexpat1:i386 libgcc-s1:i386
+          npm_config_arch=armv7l yarn run v8-snapshot:arch
+      - name: Build
+        run: yarn run electron-builder -l deb rpm AppImage pacman --${{ matrix.name }} -c electron-builder-linux-ci.json
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Archive Build Artifacts
+        uses: LabhanshAgrawal/upload-artifact@v3
+        with:
+          path: |
+            dist/*.snap
+            dist/*.AppImage
+            dist/*.deb
+            dist/*.rpm
+            dist/*.pacman

app/auto-updater-linux.ts

@@ -1,6 +1,7 @@
-import fetch from 'electron-fetch';
 import {EventEmitter} from 'events';
 
+import fetch from 'electron-fetch';
+
 class AutoUpdater extends EventEmitter implements Electron.AutoUpdater {
   updateURL!: string;
   quitAndInstall() {
@@ -26,13 +27,12 @@ class AutoUpdater extends EventEmitter implements Electron.AutoUpdater {
           this.emit('update-not-available');
           return;
         }
-        return res.json().then(({name, notes, pub_date}) => {
+        return res.json().then(({name, notes, pub_date}: {name: string; notes: string; pub_date: string}) => {
           // Only name is mandatory, needed to construct release URL.
           if (!name) {
             throw new Error('Malformed server response: release name is missing.');
           }
-          // If `null` is passed to Date constructor, current time will be used. This doesn't work with `undefined`
-          const date = new Date(pub_date || null);
+          const date = pub_date ? new Date(pub_date) : new Date();
           this.emit('update-available', {}, notes, name, date);
         });
       })
@@ -47,4 +47,6 @@ class AutoUpdater extends EventEmitter implements Electron.AutoUpdater {
   }
 }
 
-export default new AutoUpdater();
+const autoUpdaterLinux = new AutoUpdater();
+
+export default autoUpdaterLinux;

app/commands.ts

@@ -1,4 +1,6 @@
-import {app, Menu, BrowserWindow} from 'electron';
+import {app, Menu} from 'electron';
+import type {BrowserWindow} from 'electron';
+
 import {openConfig, getConfig} from './config';
 import {updatePlugins} from './plugins';
 import {installCLI} from './utils/cli-install';
@@ -144,6 +146,22 @@ const commands: Record<string, (focusedWindow?: BrowserWindow) => void> = {
   };
 });
 
+//Profile specific commands
+getConfig().profiles.forEach((profile) => {
+  commands[`window:new:${profile.name}`] = () => {
+    setTimeout(() => app.createWindow(undefined, undefined, profile.name), 0);
+  };
+  commands[`tab:new:${profile.name}`] = (focusedWindow) => {
+    focusedWindow?.rpc.emit('termgroup add req', {profile: profile.name});
+  };
+  commands[`pane:splitRight:${profile.name}`] = (focusedWindow) => {
+    focusedWindow?.rpc.emit('split request vertical', {profile: profile.name});
+  };
+  commands[`pane:splitDown:${profile.name}`] = (focusedWindow) => {
+    focusedWindow?.rpc.emit('split request horizontal', {profile: profile.name});
+  };
+});
+
 export const execCommand = (command: string, focusedWindow?: BrowserWindow) => {
   const fn = commands[command];
   if (fn) {

app/config.ts

@@ -1,11 +1,14 @@
+import {app} from 'electron';
+
 import chokidar from 'chokidar';
-import notify from './notify';
+
+import type {parsedConfig, configOptions} from '../typings/config';
+
 import {_import, getDefaultConfig} from './config/import';
 import _openConfig from './config/open';
 import {cfgPath, cfgDir} from './config/paths';
+import notify from './notify';
 import {getColorMap} from './utils/colors';
-import {parsedConfig, configOptions} from '../lib/config';
-import {app} from 'electron';
 
 const watchers: Function[] = [];
 let cfg: parsedConfig = {} as any;
@@ -78,8 +81,30 @@ export const getConfigDir = () => {
   return cfgDir;
 };
 
+export const getDefaultProfile = () => {
+  return cfg.config.defaultProfile || cfg.config.profiles[0]?.name || 'default';
+};
+
+// get config for the default profile, keeping it for backward compatibility
 export const getConfig = () => {
-  return cfg.config;
+  return getProfileConfig(getDefaultProfile());
+};
+
+export const getProfiles = () => {
+  return cfg.config.profiles;
+};
+
+export const getProfileConfig = (profileName: string): configOptions => {
+  const {profiles, defaultProfile, ...baseConfig} = cfg.config;
+  const profileConfig = profiles.find((p) => p.name === profileName)?.config || {};
+  for (const key in profileConfig) {
+    if (typeof baseConfig[key] === 'object' && !Array.isArray(baseConfig[key])) {
+      baseConfig[key] = {...baseConfig[key], ...profileConfig[key]};
+    } else {
+      baseConfig[key] = profileConfig[key];
+    }
+  }
+  return {...baseConfig, defaultProfile, profiles};
 };
 
 export const openConfig = () => {

app/config/config-default.json

@@ -61,7 +61,15 @@
     "disableAutoUpdates": false,
     "autoUpdatePlugins": true,
     "preserveCWD": true,
-    "screenReaderMode": false
+    "screenReaderMode": false,
+    "imageSupport": true,
+    "defaultProfile": "default",
+    "profiles": [
+      {
+        "name": "default",
+        "config": {}
+      }
+    ]
   },
   "plugins": [],
   "localPlugins": [],

app/config/import.ts

@@ -1,10 +1,11 @@
-import {readFileSync} from 'fs-extra';
-import {sync as mkdirpSync} from 'mkdirp';
-import {defaultCfg, cfgPath, plugs, defaultPlatformKeyPath} from './paths';
-import {_init} from './init';
+import {readFileSync, mkdirpSync} from 'fs-extra';
+
+import type {rawConfig} from '../../typings/config';
 import notify from '../notify';
-import {rawConfig} from '../../lib/config';
+
+import {_init} from './init';
 import {migrateHyper3Config} from './migrate';
+import {defaultCfg, cfgPath, plugs, defaultPlatformKeyPath} from './paths';
 
 let defaultConfig: rawConfig;
 

app/config/init.ts

@@ -1,12 +1,14 @@
 import vm from 'vm';
+
+import merge from 'lodash/merge';
+
+import type {parsedConfig, rawConfig, configOptions} from '../../typings/config';
 import notify from '../notify';
 import mapKeys from '../utils/map-keys';
-import {parsedConfig, rawConfig, configOptions} from '../../lib/config';
-import _ from 'lodash';
 
 const _extract = (script?: vm.Script): Record<string, any> => {
   const module: Record<string, any> = {};
-  script?.runInNewContext({module});
+  script?.runInNewContext({module}, {displayErrors: true});
   if (!module.exports) {
     throw new Error('Error reading configuration: `module.exports` not set');
   }
@@ -16,10 +18,10 @@ const _extract = (script?: vm.Script): Record<string, any> => {
 
 const _syntaxValidation = (cfg: string) => {
   try {
-    return new vm.Script(cfg, {filename: '.hyper.js', displayErrors: true});
+    return new vm.Script(cfg, {filename: '.hyper.js'});
   } catch (_err) {
     const err = _err as {name: string};
-    notify(`Error loading config: ${err.name}`, `${err}`, {error: err});
+    notify(`Error loading config: ${err.name}`, JSON.stringify(err), {error: err});
   }
 };
 
@@ -32,7 +34,19 @@ const _init = (userCfg: rawConfig, defaultCfg: rawConfig): parsedConfig => {
   return {
     config: (() => {
       if (userCfg?.config) {
-        return _.merge({}, defaultCfg.config, userCfg.config);
+        const conf = userCfg.config;
+        conf.defaultProfile = conf.defaultProfile || 'default';
+        conf.profiles = conf.profiles || [];
+        conf.profiles = conf.profiles.length > 0 ? conf.profiles : [{name: 'default', config: {}}];
+        conf.profiles = conf.profiles.map((p, i) => ({
+          ...p,
+          name: p.name || `profile-${i + 1}`,
+          config: p.config || {}
+        }));
+        if (!conf.profiles.map((p) => p.name).includes(conf.defaultProfile)) {
+          conf.defaultProfile = conf.profiles[0].name;
+        }
+        return merge({}, defaultCfg.config, conf);
       } else {
         notify('Error reading configuration: `config` key is missing');
         return defaultCfg.config || ({} as configOptions);
@@ -41,8 +55,8 @@ const _init = (userCfg: rawConfig, defaultCfg: rawConfig): parsedConfig => {
     // Merging platform specific keymaps with user defined keymaps
     keymaps: mapKeys({...defaultCfg.keymaps, ...userCfg?.keymaps}),
     // Ignore undefined values in plugin and localPlugins array Issue #1862
-    plugins: (userCfg?.plugins && userCfg.plugins.filter(Boolean)) || [],
-    localPlugins: (userCfg?.localPlugins && userCfg.localPlugins.filter(Boolean)) || []
+    plugins: userCfg?.plugins?.filter(Boolean) || [],
+    localPlugins: userCfg?.localPlugins?.filter(Boolean) || []
   };
 };
 

app/config/migrate.ts

@@ -1,11 +1,14 @@
-import {parse, prettyPrint} from 'recast';
-import {builders, namedTypes} from 'ast-types';
-import * as babelParser from 'recast/parsers/babel';
-import {copy, copySync, existsSync, readFileSync, writeFileSync} from 'fs-extra';
 import {dirname, resolve} from 'path';
-import _ from 'lodash';
+
+import {builders, namedTypes} from 'ast-types';
+import type {ExpressionKind} from 'ast-types/lib/gen/kinds';
+import {copy, copySync, existsSync, readFileSync, writeFileSync} from 'fs-extra';
+import merge from 'lodash/merge';
+import {parse, prettyPrint} from 'recast';
+import * as babelParser from 'recast/parsers/babel';
 
 import notify from '../notify';
+
 import {_extractDefault} from './init';
 import {cfgDir, cfgPath, defaultCfg, legacyCfgPath, plugs, schemaFile, schemaPath} from './paths';
 
@@ -63,7 +66,7 @@ export function configToPlugin(code: string): string {
   });
   const statements = ast.program.body;
   let moduleExportsNode: namedTypes.AssignmentExpression | null = null;
-  let configNode: any = null;
+  let configNode: ExpressionKind | null = null;
 
   for (const statement of statements) {
     if (namedTypes.ExpressionStatement.check(statement)) {
@@ -86,7 +89,7 @@ export function configToPlugin(code: string): string {
               namedTypes.Identifier.check(property.key) &&
               property.key.name === 'config'
             ) {
-              configNode = property.value;
+              configNode = property.value as ExpressionKind;
               if (namedTypes.ObjectExpression.check(property.value)) {
                 configNode = removeProperties(property.value);
               }
@@ -165,7 +168,7 @@ export const migrateHyper3Config = () => {
   try {
     const legacyCfgRaw = readFileSync(legacyCfgPath, 'utf8');
     const legacyCfgData = _extractDefault(legacyCfgRaw);
-    newCfgData = _.merge({}, defaultCfgData, legacyCfgData);
+    newCfgData = merge({}, defaultCfgData, legacyCfgData);
 
     const pluginCode = configToPlugin(legacyCfgRaw);
     if (pluginCode) {

app/config/open.ts

@@ -1,8 +1,11 @@
-import {shell} from 'electron';
-import {cfgPath} from './paths';
-import * as Registry from 'native-reg';
 import {exec} from 'child_process';
 
+import {shell} from 'electron';
+
+import * as Registry from 'native-reg';
+
+import {cfgPath} from './paths';
+
 const getUserChoiceKey = () => {
   try {
     // Load FileExts keys for .js files
@@ -57,7 +60,7 @@ const openNotepad = (file: string) =>
     });
   });
 
-export default () => {
+const openConfig = () => {
   // Windows opens .js files with  WScript.exe by default
   // If the user hasn't set up an editor for .js files, we fallback to notepad.
   if (process.platform === 'win32') {
@@ -73,3 +76,5 @@ export default () => {
   }
   return shell.openPath(cfgPath).then((error) => error === '');
 };
+
+export default openConfig;

app/config/paths.ts

@@ -1,8 +1,10 @@
 // This module exports paths, names, and other metadata that is referenced
-import {homedir} from 'os';
-import {app} from 'electron';
 import {statSync} from 'fs';
+import {homedir} from 'os';
 import {resolve, join} from 'path';
+
+import {app} from 'electron';
+
 import isDev from 'electron-is-dev';
 
 const cfgFile = 'hyper.json';
@@ -15,15 +17,15 @@ const homeDirectory = homedir();
 let cfgDir = process.env.XDG_CONFIG_HOME
   ? join(process.env.XDG_CONFIG_HOME, 'Hyper')
   : process.platform === 'win32'
-  ? app.getPath('userData')
-  : join(homeDirectory, '.config', 'Hyper');
+    ? app.getPath('userData')
+    : join(homeDirectory, '.config', 'Hyper');
 
 const legacyCfgPath = join(
   process.env.XDG_CONFIG_HOME !== undefined
     ? join(process.env.XDG_CONFIG_HOME, 'hyper')
     : process.platform == 'win32'
-    ? app.getPath('userData')
-    : homedir(),
+      ? app.getPath('userData')
+      : homedir(),
   '.hyper.js'
 );
 

app/config/schema.json

@@ -24,25 +24,19 @@
                 }
             ],
             "description": "A string or number representing text font weight."
-        }
-    },
-    "properties": {
-        "config": {
+        },
+        "Partial<profileConfigOptions>": {
             "properties": {
-                "autoUpdatePlugins": {
-                    "description": "if `true` (default), Hyper will update plugins every 5 hours\nyou can also set it to a custom time e.g. `1d` or `2h`",
-                    "type": [
-                        "string",
-                        "boolean"
-                    ]
-                },
                 "backgroundColor": {
                     "description": "terminal background color\n\nopacity is only supported on macOS",
                     "type": "string"
                 },
                 "bell": {
                     "description": "Supported Options:\n1. 'SOUND' -> Enables the bell as a sound\n2. false: turns off the bell",
-                    "type": "string"
+                    "enum": [
+                        "SOUND",
+                        false
+                    ]
                 },
                 "bellSound": {
                     "description": "base64 encoded string of the sound file to use for the bell\nif null, the default bell will be used",
@@ -163,14 +157,6 @@
                     ],
                     "type": "string"
                 },
-                "defaultSSHApp": {
-                    "description": "if `true` hyper will be set as the default protocol client for SSH",
-                    "type": "boolean"
-                },
-                "disableAutoUpdates": {
-                    "description": "if `true` hyper will not check for updates",
-                    "type": "boolean"
-                },
                 "disableLigatures": {
                     "description": "if `false` Hyper will use ligatures provided by some fonts",
                     "type": "boolean"
@@ -202,6 +188,10 @@
                     "description": "color of the text",
                     "type": "string"
                 },
+                "imageSupport": {
+                    "description": "Whether to enable Sixel and iTerm2 inline image protocol support or not.",
+                    "type": "boolean"
+                },
                 "letterSpacing": {
                     "description": "letter spacing as a relative unit",
                     "type": "number"
@@ -253,11 +243,11 @@
                     "type": "string"
                 },
                 "shell": {
-                    "description": "the shell to run when spawning a new session (i.e. /usr/local/bin/fish)\nif left empty, your system's login shell will be used by default\n\nWindows\n- Make sure to use a full path if the binary name doesn't work\n- Remove `--login` in shellArgs\n\nWindows Subsystem for Linux (WSL) - previously Bash on Windows\n- Example: `C:\\\\Windows\\\\System32\\\\wsl.exe`\n\nGit-bash on Windows\n- Example: `C:\\\\Program Files\\\\Git\\\\bin\\\\bash.exe`\n\nPowerShell on Windows\n- Example: `C:\\\\WINDOWS\\\\System32\\\\WindowsPowerShell\\\\v1.0\\\\powershell.exe`\n\nCygwin\n- Example: `C:\\\\cygwin64\\\\bin\\\\bash.exe`\n\nGit Bash\n- Example: `C:\\\\Program Files\\\\Git\\\\git-cmd.exe`\nThen Add `--command=usr/bin/bash.exe` to shellArgs",
+                    "description": "the shell to run when spawning a new session (e.g. /usr/local/bin/fish)\nif left empty, your system's login shell will be used by default\n\nWindows\n- Make sure to use a full path if the binary name doesn't work\n- Remove `--login` in shellArgs\n\nWindows Subsystem for Linux (WSL) - previously Bash on Windows\n- Example: `C:\\\\Windows\\\\System32\\\\wsl.exe`\n\nGit-bash on Windows\n- Example: `C:\\\\Program Files\\\\Git\\\\bin\\\\bash.exe`\n\nPowerShell on Windows\n- Example: `C:\\\\WINDOWS\\\\System32\\\\WindowsPowerShell\\\\v1.0\\\\powershell.exe`\n\nCygwin\n- Example: `C:\\\\cygwin64\\\\bin\\\\bash.exe`\n\nGit Bash\n- Example: `C:\\\\Program Files\\\\Git\\\\git-cmd.exe`\nThen Add `--command=usr/bin/bash.exe` to shellArgs",
                     "type": "string"
                 },
                 "shellArgs": {
-                    "description": "for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)\nby default `['--login']` will be used",
+                    "description": "for setting shell arguments (e.g. for using interactive shellArgs: `['-i']`)\nby default `['--login']` will be used",
                     "items": {
                         "type": "string"
                     },
@@ -287,17 +277,6 @@
                 "uiFontFamily": {
                     "type": "string"
                 },
-                "updateChannel": {
-                    "description": "choose either `'stable'` for receiving highly polished, or `'canary'` for less polished but more frequent updates",
-                    "enum": [
-                        "canary",
-                        "stable"
-                    ],
-                    "type": "string"
-                },
-                "useConpty": {
-                    "type": "boolean"
-                },
                 "webGLRenderer": {
                     "description": "Whether to use the WebGL renderer. Set it to false to use canvas-based\nrendering (slower, but supports transparent backgrounds)",
                     "type": "boolean"
@@ -332,50 +311,414 @@
                     "type": "string"
                 }
             },
-            "required": [
-                "autoUpdatePlugins",
-                "backgroundColor",
-                "bell",
-                "bellSound",
-                "bellSoundURL",
-                "borderColor",
-                "colors",
-                "copyOnSelect",
-                "css",
-                "cursorAccentColor",
-                "cursorBlink",
-                "cursorColor",
-                "cursorShape",
-                "defaultSSHApp",
-                "disableAutoUpdates",
-                "disableLigatures",
-                "env",
-                "fontFamily",
-                "fontSize",
-                "fontWeight",
-                "fontWeightBold",
-                "foregroundColor",
-                "letterSpacing",
-                "lineHeight",
-                "macOptionSelectionMode",
-                "padding",
-                "preserveCWD",
-                "quickEdit",
-                "screenReaderMode",
-                "scrollback",
-                "selectionColor",
-                "shell",
-                "shellArgs",
-                "showHamburgerMenu",
-                "showWindowControls",
-                "termCSS",
-                "updateChannel",
-                "webGLRenderer",
-                "webLinksActivationKey",
-                "workingDirectory"
-            ],
             "type": "object"
         },
+        "configOptions": {
+            "allOf": [
+                {
+                    "properties": {
+                        "autoUpdatePlugins": {
+                            "description": "if `true` (default), Hyper will update plugins every 5 hours\nyou can also set it to a custom time e.g. `1d` or `2h`",
+                            "type": [
+                                "string",
+                                "boolean"
+                            ]
+                        },
+                        "defaultSSHApp": {
+                            "description": "if `true` hyper will be set as the default protocol client for SSH",
+                            "type": "boolean"
+                        },
+                        "disableAutoUpdates": {
+                            "description": "if `true` hyper will not check for updates",
+                            "type": "boolean"
+                        },
+                        "updateChannel": {
+                            "description": "choose either `'stable'` for receiving highly polished, or `'canary'` for less polished but more frequent updates",
+                            "enum": [
+                                "canary",
+                                "stable"
+                            ],
+                            "type": "string"
+                        },
+                        "useConpty": {
+                            "type": "boolean"
+                        }
+                    },
+                    "required": [
+                        "autoUpdatePlugins",
+                        "defaultSSHApp",
+                        "disableAutoUpdates",
+                        "updateChannel"
+                    ],
+                    "type": "object"
+                },
+                {
+                    "properties": {
+                        "backgroundColor": {
+                            "description": "terminal background color\n\nopacity is only supported on macOS",
+                            "type": "string"
+                        },
+                        "bell": {
+                            "description": "Supported Options:\n1. 'SOUND' -> Enables the bell as a sound\n2. false: turns off the bell",
+                            "enum": [
+                                "SOUND",
+                                false
+                            ]
+                        },
+                        "bellSound": {
+                            "description": "base64 encoded string of the sound file to use for the bell\nif null, the default bell will be used",
+                            "type": [
+                                "string",
+                                "null"
+                            ]
+                        },
+                        "bellSoundURL": {
+                            "description": "An absolute file path to a sound file on the machine.",
+                            "type": [
+                                "string",
+                                "null"
+                            ]
+                        },
+                        "borderColor": {
+                            "description": "border color (window, tabs)",
+                            "type": "string"
+                        },
+                        "colors": {
+                            "description": "the full list. if you're going to provide the full color palette,\nincluding the 6 x 6 color cubes and the grayscale map, just provide\nan array here instead of a color map object",
+                            "properties": {
+                                "black": {
+                                    "type": "string"
+                                },
+                                "blue": {
+                                    "type": "string"
+                                },
+                                "cyan": {
+                                    "type": "string"
+                                },
+                                "green": {
+                                    "type": "string"
+                                },
+                                "lightBlack": {
+                                    "type": "string"
+                                },
+                                "lightBlue": {
+                                    "type": "string"
+                                },
+                                "lightCyan": {
+                                    "type": "string"
+                                },
+                                "lightGreen": {
+                                    "type": "string"
+                                },
+                                "lightMagenta": {
+                                    "type": "string"
+                                },
+                                "lightRed": {
+                                    "type": "string"
+                                },
+                                "lightWhite": {
+                                    "type": "string"
+                                },
+                                "lightYellow": {
+                                    "type": "string"
+                                },
+                                "magenta": {
+                                    "type": "string"
+                                },
+                                "red": {
+                                    "type": "string"
+                                },
+                                "white": {
+                                    "type": "string"
+                                },
+                                "yellow": {
+                                    "type": "string"
+                                }
+                            },
+                            "required": [
+                                "black",
+                                "blue",
+                                "cyan",
+                                "green",
+                                "lightBlack",
+                                "lightBlue",
+                                "lightCyan",
+                                "lightGreen",
+                                "lightMagenta",
+                                "lightRed",
+                                "lightWhite",
+                                "lightYellow",
+                                "magenta",
+                                "red",
+                                "white",
+                                "yellow"
+                            ],
+                            "type": "object"
+                        },
+                        "copyOnSelect": {
+                            "description": "if `true` selected text will automatically be copied to the clipboard",
+                            "type": "boolean"
+                        },
+                        "css": {
+                            "description": "custom CSS to embed in the main window",
+                            "type": "string"
+                        },
+                        "cursorAccentColor": {
+                            "description": "terminal text color under BLOCK cursor",
+                            "type": "string"
+                        },
+                        "cursorBlink": {
+                            "description": "set to `true` for blinking cursor",
+                            "type": "boolean"
+                        },
+                        "cursorColor": {
+                            "description": "terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)",
+                            "type": "string"
+                        },
+                        "cursorShape": {
+                            "description": "`'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █",
+                            "enum": [
+                                "BEAM",
+                                "BLOCK",
+                                "UNDERLINE"
+                            ],
+                            "type": "string"
+                        },
+                        "disableLigatures": {
+                            "description": "if `false` Hyper will use ligatures provided by some fonts",
+                            "type": "boolean"
+                        },
+                        "env": {
+                            "additionalProperties": {
+                                "type": "string"
+                            },
+                            "description": "for environment variables",
+                            "type": "object"
+                        },
+                        "fontFamily": {
+                            "description": "font family with optional fallbacks",
+                            "type": "string"
+                        },
+                        "fontSize": {
+                            "description": "default font size in pixels for all tabs",
+                            "type": "number"
+                        },
+                        "fontWeight": {
+                            "$ref": "#/definitions/FontWeight",
+                            "description": "default font weight eg:'normal', '400', 'bold'"
+                        },
+                        "fontWeightBold": {
+                            "$ref": "#/definitions/FontWeight",
+                            "description": "font weight for bold characters eg:'normal', '600', 'bold'"
+                        },
+                        "foregroundColor": {
+                            "description": "color of the text",
+                            "type": "string"
+                        },
+                        "imageSupport": {
+                            "description": "Whether to enable Sixel and iTerm2 inline image protocol support or not.",
+                            "type": "boolean"
+                        },
+                        "letterSpacing": {
+                            "description": "letter spacing as a relative unit",
+                            "type": "number"
+                        },
+                        "lineHeight": {
+                            "description": "line height as a relative unit",
+                            "type": "number"
+                        },
+                        "macOptionSelectionMode": {
+                            "description": "choose either `'vertical'`, if you want the column mode when Option key is hold during selection (Default)\nor `'force'`, if you want to force selection regardless of whether the terminal is in mouse events mode\n(inside tmux or vim with mouse mode enabled for example).",
+                            "type": "string"
+                        },
+                        "modifierKeys": {
+                            "properties": {
+                                "altIsMeta": {
+                                    "type": "boolean"
+                                },
+                                "cmdIsMeta": {
+                                    "type": "boolean"
+                                }
+                            },
+                            "required": [
+                                "altIsMeta",
+                                "cmdIsMeta"
+                            ],
+                            "type": "object"
+                        },
+                        "padding": {
+                            "description": "custom padding (CSS format, i.e.: `top right bottom left` or `top horizontal bottom` or `vertical horizontal` or `all`)",
+                            "type": "string"
+                        },
+                        "preserveCWD": {
+                            "description": "set to true to preserve working directory when creating splits or tabs",
+                            "type": "boolean"
+                        },
+                        "quickEdit": {
+                            "description": "if `true` on right click selected text will be copied or pasted if no\nselection is present (`true` by default on Windows and disables the context menu feature)",
+                            "type": "boolean"
+                        },
+                        "screenReaderMode": {
+                            "description": "set to true to enable screen reading apps (like NVDA) to read the contents of the terminal",
+                            "type": "boolean"
+                        },
+                        "scrollback": {
+                            "type": "number"
+                        },
+                        "selectionColor": {
+                            "description": "terminal selection color",
+                            "type": "string"
+                        },
+                        "shell": {
+                            "description": "the shell to run when spawning a new session (e.g. /usr/local/bin/fish)\nif left empty, your system's login shell will be used by default\n\nWindows\n- Make sure to use a full path if the binary name doesn't work\n- Remove `--login` in shellArgs\n\nWindows Subsystem for Linux (WSL) - previously Bash on Windows\n- Example: `C:\\\\Windows\\\\System32\\\\wsl.exe`\n\nGit-bash on Windows\n- Example: `C:\\\\Program Files\\\\Git\\\\bin\\\\bash.exe`\n\nPowerShell on Windows\n- Example: `C:\\\\WINDOWS\\\\System32\\\\WindowsPowerShell\\\\v1.0\\\\powershell.exe`\n\nCygwin\n- Example: `C:\\\\cygwin64\\\\bin\\\\bash.exe`\n\nGit Bash\n- Example: `C:\\\\Program Files\\\\Git\\\\git-cmd.exe`\nThen Add `--command=usr/bin/bash.exe` to shellArgs",
+                            "type": "string"
+                        },
+                        "shellArgs": {
+                            "description": "for setting shell arguments (e.g. for using interactive shellArgs: `['-i']`)\nby default `['--login']` will be used",
+                            "items": {
+                                "type": "string"
+                            },
+                            "type": "array"
+                        },
+                        "showHamburgerMenu": {
+                            "description": "if you're using a Linux setup which show native menus, set to false\n\ndefault: `true` on Linux, `true` on Windows, ignored on macOS",
+                            "enum": [
+                                "",
+                                false,
+                                true
+                            ]
+                        },
+                        "showWindowControls": {
+                            "description": "set to `false` if you want to hide the minimize, maximize and close buttons\n\nadditionally, set to `'left'` if you want them on the left, like in Ubuntu\n\ndefault: `true` on Windows and Linux, ignored on macOS",
+                            "enum": [
+                                "",
+                                false,
+                                "left",
+                                true
+                            ]
+                        },
+                        "termCSS": {
+                            "description": "custom CSS to embed in the terminal window",
+                            "type": "string"
+                        },
+                        "uiFontFamily": {
+                            "type": "string"
+                        },
+                        "webGLRenderer": {
+                            "description": "Whether to use the WebGL renderer. Set it to false to use canvas-based\nrendering (slower, but supports transparent backgrounds)",
+                            "type": "boolean"
+                        },
+                        "webLinksActivationKey": {
+                            "description": "keypress required for weblink activation: [ctrl | alt | meta | shift]",
+                            "enum": [
+                                "",
+                                "alt",
+                                "ctrl",
+                                "meta",
+                                "shift"
+                            ],
+                            "type": "string"
+                        },
+                        "windowSize": {
+                            "description": "Initial window size in pixels",
+                            "items": [
+                                {
+                                    "type": "number"
+                                },
+                                {
+                                    "type": "number"
+                                }
+                            ],
+                            "maxItems": 2,
+                            "minItems": 2,
+                            "type": "array"
+                        },
+                        "workingDirectory": {
+                            "description": "set custom startup directory (must be an absolute path)",
+                            "type": "string"
+                        }
+                    },
+                    "required": [
+                        "backgroundColor",
+                        "bell",
+                        "bellSound",
+                        "bellSoundURL",
+                        "borderColor",
+                        "colors",
+                        "copyOnSelect",
+                        "css",
+                        "cursorAccentColor",
+                        "cursorBlink",
+                        "cursorColor",
+                        "cursorShape",
+                        "disableLigatures",
+                        "env",
+                        "fontFamily",
+                        "fontSize",
+                        "fontWeight",
+                        "fontWeightBold",
+                        "foregroundColor",
+                        "imageSupport",
+                        "letterSpacing",
+                        "lineHeight",
+                        "macOptionSelectionMode",
+                        "padding",
+                        "preserveCWD",
+                        "quickEdit",
+                        "screenReaderMode",
+                        "scrollback",
+                        "selectionColor",
+                        "shell",
+                        "shellArgs",
+                        "showHamburgerMenu",
+                        "showWindowControls",
+                        "termCSS",
+                        "webGLRenderer",
+                        "webLinksActivationKey",
+                        "workingDirectory"
+                    ],
+                    "type": "object"
+                },
+                {
+                    "properties": {
+                        "defaultProfile": {
+                            "description": "The default profile name to use when launching a new session",
+                            "type": "string"
+                        },
+                        "profiles": {
+                            "description": "A list of profiles to use",
+                            "items": {
+                                "properties": {
+                                    "config": {
+                                        "$ref": "#/definitions/Partial<profileConfigOptions>",
+                                        "description": "Specify all the options you want to override for each profile.\nOptions set here override the defaults set in the root."
+                                    },
+                                    "name": {
+                                        "type": "string"
+                                    }
+                                },
+                                "required": [
+                                    "config",
+                                    "name"
+                                ],
+                                "type": "object"
+                            },
+                            "type": "array"
+                        }
+                    },
+                    "required": [
+                        "defaultProfile",
+                        "profiles"
+                    ],
+                    "type": "object"
+                }
+            ]
+        }
+    },
+    "properties": {
+        "config": {
+            "$ref": "#/definitions/configOptions"
+        },
         "keymaps": {
             "additionalProperties": {
                 "anyOf": [

app/config/windows.ts

@@ -1,5 +1,6 @@
+import type {BrowserWindow} from 'electron';
+
 import Config from 'electron-store';
-import {BrowserWindow} from 'electron';
 
 export const defaults = {
   windowPosition: [50, 50] as [number, number],

app/ext-modules.d.ts

@@ -1,8 +0,0 @@
-declare module 'git-describe' {
-  export function gitDescribe(...args: any[]): void;
-}
-
-declare module 'default-shell' {
-  const val: string;
-  export default val;
-}

app/index.d.ts

@@ -1 +0,0 @@
-// Dummy file, required by tsc

app/index.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/order
 import {cfgPath} from './config/paths';
 
 // Print diagnostic information for a few arguments instead of running Hyper.
@@ -11,25 +12,29 @@ if (['--help', '-v', '--version'].includes(process.argv[1])) {
 }
 
 // Enable remote module
+// eslint-disable-next-line import/order
 import {initialize as remoteInitialize} from '@electron/remote/main';
 remoteInitialize();
 
+// set up config
+// eslint-disable-next-line import/order
+import * as config from './config';
+config.setup();
+
 // Native
 import {resolve} from 'path';
 
 // Packages
 import {app, BrowserWindow, Menu, screen} from 'electron';
-import {gitDescribe} from 'git-describe';
+
 import isDev from 'electron-is-dev';
-import * as config from './config';
+import {gitDescribe} from 'git-describe';
+import parseUrl from 'parse-url';
 
-// set up config
-config.setup();
-
-import * as plugins from './plugins';
-import {installCLI} from './utils/cli-install';
 import * as AppMenu from './menus/menu';
+import * as plugins from './plugins';
 import {newWindow} from './ui/window';
+import {installCLI} from './utils/cli-install';
 import * as windowUtils from './utils/window-utils';
 
 const windowSet = new Set<BrowserWindow>([]);
@@ -57,7 +62,7 @@ if (isDev) {
   console.log('running in dev mode');
 
   // Override default appVersion which is set from package.json
-  gitDescribe({customArguments: ['--tags']}, (error: any, gitInfo: any) => {
+  gitDescribe({customArguments: ['--tags']}, (error: any, gitInfo: {raw: string}) => {
     if (!error) {
       app.setVersion(gitInfo.raw);
     }
@@ -73,15 +78,13 @@ async function installDevExtensions(isDev_: boolean) {
   if (!isDev_) {
     return [];
   }
-  const installer = await import('electron-devtools-installer');
+  const {default: installer, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS} = await import('electron-devtools-installer');
 
-  const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'] as const;
+  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
   const forceDownload = Boolean(process.env.UPGRADE_EXTENSIONS);
 
   return Promise.all(
-    extensions.map((name) =>
-      installer.default(installer[name], {forceDownload, loadExtensionOptions: {allowFileAccess: true}})
-    )
+    extensions.map((extension) => installer(extension, {forceDownload, loadExtensionOptions: {allowFileAccess: true}}))
   );
 }
 
@@ -91,9 +94,10 @@ app.on('ready', () =>
     .then(() => {
       function createWindow(
         fn?: (win: BrowserWindow) => void,
-        options: {size?: [number, number]; position?: [number, number]} = {}
+        options: {size?: [number, number]; position?: [number, number]} = {},
+        profileName: string = config.getDefaultProfile()
       ) {
-        const cfg = plugins.getDecoratedConfig();
+        const cfg = plugins.getDecoratedConfig(profileName);
 
         const winSet = config.getWin();
         let [startX, startY] = winSet.position;
@@ -135,7 +139,7 @@ app.on('ready', () =>
           [startX, startY] = config.windowDefaults.windowPosition;
         }
 
-        const hwin = newWindow({width, height, x: startX, y: startY}, cfg, fn);
+        const hwin = newWindow({width, height, x: startX, y: startY}, cfg, fn, profileName);
         windowSet.add(hwin);
         void hwin.loadURL(url);
 
@@ -234,6 +238,6 @@ app.on('open-file', (_event, path) => {
 
 app.on('open-url', (_event, sshUrl) => {
   GetWindow((win: BrowserWindow) => {
-    win.rpc.emit('open ssh', sshUrl);
+    win.rpc.emit('open ssh', parseUrl(sshUrl));
   });
 });

app/menus/menu.ts

@@ -1,20 +1,22 @@
 // Packages
-import {app, dialog, Menu, BrowserWindow} from 'electron';
+import {app, dialog, Menu} from 'electron';
+import type {BrowserWindow} from 'electron';
 
 // Utilities
+import {execCommand} from '../commands';
 import {getConfig} from '../config';
 import {icon} from '../config/paths';
-import viewMenu from './menus/view';
-import shellMenu from './menus/shell';
-import editMenu from './menus/edit';
-import toolsMenu from './menus/tools';
-import windowMenu from './menus/window';
-import helpMenu from './menus/help';
-import darwinMenu from './menus/darwin';
 import {getDecoratedKeymaps} from '../plugins';
-import {execCommand} from '../commands';
 import {getRendererTypes} from '../utils/renderer-utils';
 
+import darwinMenu from './menus/darwin';
+import editMenu from './menus/edit';
+import helpMenu from './menus/help';
+import shellMenu from './menus/shell';
+import toolsMenu from './menus/tools';
+import viewMenu from './menus/view';
+import windowMenu from './menus/window';
+
 const appName = app.name;
 const appVersion = app.getVersion();
 
@@ -61,7 +63,11 @@ export const createMenu = (
   };
   const menu = [
     ...(process.platform === 'darwin' ? [darwinMenu(commandKeys, execCommand, showAbout)] : []),
-    shellMenu(commandKeys, execCommand),
+    shellMenu(
+      commandKeys,
+      execCommand,
+      getConfig().profiles.map((p) => p.name)
+    ),
     editMenu(commandKeys, execCommand),
     viewMenu(commandKeys, execCommand),
     toolsMenu(commandKeys, execCommand),

app/menus/menus/darwin.ts

@@ -1,8 +1,9 @@
 // This menu label is overrided by OSX to be the appName
 // The label is set to appName here so it matches actual behavior
-import {app, BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import {app} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const darwinMenu = (
   commandKeys: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void,
   showAbout: () => void
@@ -54,3 +55,5 @@ export default (
     ]
   };
 };
+
+export default darwinMenu;

app/menus/menus/edit.ts

@@ -1,6 +1,6 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const editMenu = (
   commandKeys: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void
 ) => {
@@ -147,3 +147,5 @@ export default (
     submenu
   };
 };
+
+export default editMenu;

app/menus/menus/help.ts

@@ -1,10 +1,14 @@
 import {release} from 'os';
-import {app, shell, MenuItemConstructorOptions, dialog, clipboard} from 'electron';
+
+import {app, shell, dialog, clipboard} from 'electron';
+import type {MenuItemConstructorOptions} from 'electron';
+
 import {getConfig, getPlugins} from '../../config';
-const {arch, env, platform, versions} = process;
 import {version} from '../../package.json';
 
-export default (commands: Record<string, string>, showAbout: () => void): MenuItemConstructorOptions => {
+const {arch, env, platform, versions} = process;
+
+const helpMenu = (commands: Record<string, string>, showAbout: () => void): MenuItemConstructorOptions => {
   const submenu: MenuItemConstructorOptions[] = [
     {
       label: `${app.name} Website`,
@@ -106,3 +110,5 @@ ${JSON.stringify(getPlugins(), null, 2)}
     submenu
   };
 };
+
+export default helpMenu;

app/menus/menus/shell.ts

@@ -1,8 +1,9 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const shellMenu = (
   commandKeys: Record<string, string>,
-  execCommand: (command: string, focusedWindow?: BrowserWindow) => void
+  execCommand: (command: string, focusedWindow?: BrowserWindow) => void,
+  profiles: string[]
 ): MenuItemConstructorOptions => {
   const isMac = process.platform === 'darwin';
 
@@ -43,6 +44,47 @@ export default (
       {
         type: 'separator'
       },
+      ...profiles.map(
+        (profile): MenuItemConstructorOptions => ({
+          label: profile,
+          submenu: [
+            {
+              label: 'New Tab',
+              accelerator: commandKeys[`tab:new:${profile}`],
+              click(item, focusedWindow) {
+                execCommand(`tab:new:${profile}`, focusedWindow);
+              }
+            },
+            {
+              label: 'New Window',
+              accelerator: commandKeys[`window:new:${profile}`],
+              click(item, focusedWindow) {
+                execCommand(`window:new:${profile}`, focusedWindow);
+              }
+            },
+            {
+              type: 'separator'
+            },
+            {
+              label: 'Split Down',
+              accelerator: commandKeys[`pane:splitDown:${profile}`],
+              click(item, focusedWindow) {
+                execCommand(`pane:splitDown:${profile}`, focusedWindow);
+              }
+            },
+            {
+              label: 'Split Right',
+              accelerator: commandKeys[`pane:splitRight:${profile}`],
+              click(item, focusedWindow) {
+                execCommand(`pane:splitRight:${profile}`, focusedWindow);
+              }
+            }
+          ]
+        })
+      ),
+      {
+        type: 'separator'
+      },
       {
         label: 'Close',
         accelerator: commandKeys['pane:close'],
@@ -58,3 +100,5 @@ export default (
     ]
   };
 };
+
+export default shellMenu;

app/menus/menus/tools.ts

@@ -1,6 +1,6 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const toolsMenu = (
   commands: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void
 ): MenuItemConstructorOptions => {
@@ -45,3 +45,5 @@ export default (
     ]
   };
 };
+
+export default toolsMenu;

app/menus/menus/view.ts

@@ -1,6 +1,6 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const viewMenu = (
   commandKeys: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void
 ): MenuItemConstructorOptions => {
@@ -55,3 +55,5 @@ export default (
     ]
   };
 };
+
+export default viewMenu;

app/menus/menus/window.ts

@@ -1,6 +1,6 @@
-import {BrowserWindow, MenuItemConstructorOptions} from 'electron';
+import type {BrowserWindow, MenuItemConstructorOptions} from 'electron';
 
-export default (
+const windowMenu = (
   commandKeys: Record<string, string>,
   execCommand: (command: string, focusedWindow?: BrowserWindow) => void
 ): MenuItemConstructorOptions => {
@@ -94,3 +94,5 @@ export default (
     ]
   };
 };
+
+export default windowMenu;

app/notifications.ts

@@ -1,7 +1,9 @@
-import ms from 'ms';
+import type {BrowserWindow} from 'electron';
+
 import fetch from 'electron-fetch';
+import ms from 'ms';
+
 import {version} from './package.json';
-import {BrowserWindow} from 'electron';
 
 const NEWS_URL = 'https://hyper-news.now.sh';
 
@@ -22,7 +24,7 @@ export default function fetchNotifications(win: BrowserWindow) {
   })
     .then((res) => res.json())
     .then((data) => {
-      const {message} = data || {};
+      const message: {text: string; url: string; dismissable: boolean} | '' = data.message || '';
       if (typeof message !== 'object' && message !== '') {
         throw new Error('Bad response');
       }

app/notify.ts

@@ -1,4 +1,5 @@
 import {app, Notification} from 'electron';
+
 import {icon} from './config/paths';
 
 export default function notify(title: string, body = '', details: {error?: any} = {}) {

app/package.json

@@ -2,41 +2,44 @@
   "name": "hyper",
   "productName": "Hyper",
   "description": "A terminal built on web technologies",
-  "version": "4.0.0-canary.2",
+  "version": "4.0.0-canary.5",
   "license": "MIT",
   "author": {
     "name": "ZEIT, Inc.",
     "email": "team@zeit.co"
   },
   "repository": "zeit/hyper",
+  "scripts": {
+    "postinstall": "npx patch-package"
+  },
   "dependencies": {
-    "@babel/parser": "7.20.7",
-    "@electron/remote": "2.0.9",
+    "@babel/parser": "7.24.4",
+    "@electron/remote": "2.1.2",
+    "ast-types": "^0.16.1",
     "async-retry": "1.3.3",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "color": "4.2.3",
     "default-shell": "1.0.1",
+    "electron-devtools-installer": "3.2.0",
     "electron-fetch": "1.9.1",
     "electron-is-dev": "2.0.0",
-    "electron-store": "8.1.0",
-    "fs-extra": "11.1.0",
+    "electron-store": "8.2.0",
+    "fs-extra": "11.2.0",
     "git-describe": "4.1.1",
     "lodash": "4.17.21",
-    "mkdirp": "1.0.4",
     "ms": "2.1.3",
     "native-process-working-directory": "^1.0.2",
-    "node-pty": "0.11.0-beta27",
+    "node-pty": "1.0.0",
     "os-locale": "5.0.0",
     "parse-url": "8.1.0",
-    "pify": "5.0.0",
     "queue": "6.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "recast": "0.22.0",
-    "semver": "7.3.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "recast": "0.23.6",
+    "semver": "7.6.0",
     "shell-env": "3.0.1",
     "sudo-prompt": "^9.2.1",
-    "uuid": "9.0.0"
+    "uuid": "9.0.1"
   },
   "optionalDependencies": {
     "native-reg": "1.1.1"

app/patches/node-pty+1.0.0.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/node-pty/src/win/conpty.cc b/node_modules/node-pty/src/win/conpty.cc
+index 47af75c..884d542 100644
+--- a/node_modules/node-pty/src/win/conpty.cc
++++ b/node_modules/node-pty/src/win/conpty.cc
+@@ -472,10 +472,6 @@ static NAN_METHOD(PtyKill) {
+       }
+     }
+ 
+-    DisconnectNamedPipe(handle->hIn);
+-    DisconnectNamedPipe(handle->hOut);
+-    CloseHandle(handle->hIn);
+-    CloseHandle(handle->hOut);
+     CloseHandle(handle->hShell);
+   }
+ 

app/plugins.ts

@@ -1,22 +1,28 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import {app, dialog, BrowserWindow, App, ipcMain} from 'electron';
-import {resolve, basename} from 'path';
+import {exec, execFile} from 'child_process';
 import {writeFileSync} from 'fs';
+import {resolve, basename} from 'path';
+import {promisify} from 'util';
+
+import {app, dialog, ipcMain as _ipcMain} from 'electron';
+import type {BrowserWindow, App, MenuItemConstructorOptions} from 'electron';
+import React from 'react';
+
 import Config from 'electron-store';
 import ms from 'ms';
-import React from 'react';
 import ReactDom from 'react-dom';
+
+import type {IpcMainWithCommands} from '../typings/common';
+import type {configOptions} from '../typings/config';
+
 import * as config from './config';
+import {plugs} from './config/paths';
 import notify from './notify';
 import {availableExtensions} from './plugins/extensions';
 import {install} from './plugins/install';
-import {plugs} from './config/paths';
 import mapKeys from './utils/map-keys';
-import {configOptions} from '../lib/config';
-import {promisify} from 'util';
-import {exec, execFile} from 'child_process';
 
 // local storage
 const cache = new Config();
@@ -276,7 +282,7 @@ function requirePlugins(): any[] {
   const {plugins: plugins_, localPlugins} = paths;
 
   const load = (path_: string) => {
-    let mod: any;
+    let mod: Record<string, any>;
     try {
       mod = require(path_);
       const exposed = mod && Object.keys(mod).some((key) => availableExtensions.has(key));
@@ -312,7 +318,7 @@ function requirePlugins(): any[] {
     ...localPlugins.filter((p) => basename(p) !== 'migrated-hyper3-config')
   ]
     .map(load)
-    .filter((v) => Boolean(v));
+    .filter((v): v is Record<string, any> => Boolean(v));
 }
 
 export const onApp = (app_: App) => {
@@ -415,7 +421,7 @@ export const getDeprecatedConfig = () => {
   return deprecated;
 };
 
-export const decorateMenu = (tpl: any) => {
+export const decorateMenu = (tpl: MenuItemConstructorOptions[]) => {
   return decorateObject(tpl, 'decorateMenu');
 };
 
@@ -423,8 +429,8 @@ export const getDecoratedEnv = (baseEnv: Record<string, string>) => {
   return decorateObject(baseEnv, 'decorateEnv');
 };
 
-export const getDecoratedConfig = () => {
-  const baseConfig = config.getConfig();
+export const getDecoratedConfig = (profile: string) => {
+  const baseConfig = config.getProfileConfig(profile);
   const decoratedConfig = decorateObject(baseConfig, 'decorateConfig');
   const fixedConfig = config.fixConfigDefaults(decoratedConfig);
   const translatedConfig = config.htermConfigTranslate(fixedConfig);
@@ -456,12 +462,19 @@ export const decorateSessionClass = <T>(Session: T): T => {
 
 export {toDependencies as _toDependencies};
 
-ipcMain.handle('child_process.exec', (event, args) => {
-  const {command, options} = args;
+const ipcMain = _ipcMain as IpcMainWithCommands;
+
+ipcMain.handle('child_process.exec', (event, command, options) => {
   return promisify(exec)(command, options);
 });
 
-ipcMain.handle('child_process.execFile', (event, _args) => {
-  const {file, args, options} = _args;
+ipcMain.handle('child_process.execFile', (event, file, args, options) => {
   return promisify(execFile)(file, args, options);
 });
+
+ipcMain.handle('getLoadedPluginVersions', () => getLoadedPluginVersions());
+ipcMain.handle('getPaths', () => getPaths());
+ipcMain.handle('getBasePaths', () => getBasePaths());
+ipcMain.handle('getDeprecatedConfig', () => getDeprecatedConfig());
+ipcMain.handle('getDecoratedConfig', (e, profile) => getDecoratedConfig(profile));
+ipcMain.handle('getDecoratedKeymaps', () => getDecoratedKeymaps());

app/plugins/install.ts

@@ -1,6 +1,8 @@
 import cp from 'child_process';
-import queue from 'queue';
+
 import ms from 'ms';
+import queue from 'queue';
+
 import {yarn, plugs} from '../config/paths';
 
 export const install = (fn: (err: string | null) => void) => {

app/rpc.ts

@@ -1,15 +1,22 @@
 import {EventEmitter} from 'events';
-import {ipcMain, BrowserWindow} from 'electron';
+
+import {ipcMain} from 'electron';
+import type {BrowserWindow, IpcMainEvent} from 'electron';
+
 import {v4 as uuidv4} from 'uuid';
 
-export class Server extends EventEmitter {
+import type {TypedEmitter, MainEvents, RendererEvents, FilterNever} from '../typings/common';
+
+export class Server {
+  emitter: TypedEmitter<MainEvents>;
   destroyed = false;
   win: BrowserWindow;
   id!: string;
+
   constructor(win: BrowserWindow) {
-    super();
+    this.emitter = new EventEmitter();
     this.win = win;
-    this.ipcListener = this.ipcListener.bind(this);
+    this.emit = this.emit.bind(this);
 
     if (this.destroyed) {
       return;
@@ -18,14 +25,13 @@ export class Server extends EventEmitter {
     const uid = uuidv4();
     this.id = uid;
 
-    // eslint-disable-next-line @typescript-eslint/unbound-method
     ipcMain.on(uid, this.ipcListener);
 
     // we intentionally subscribe to `on` instead of `once`
     // to support reloading the window and re-initializing
     // the channel
     this.wc.on('did-finish-load', () => {
-      this.wc.send('init', uid);
+      this.wc.send('init', uid, win.profileName);
     });
   }
 
@@ -33,23 +39,35 @@ export class Server extends EventEmitter {
     return this.win.webContents;
   }
 
-  ipcListener(event: any, {ev, data}: {ev: string; data: any}) {
-    super.emit(ev, data);
-  }
+  ipcListener = <U extends keyof MainEvents>(event: IpcMainEvent, {ev, data}: {ev: U; data: MainEvents[U]}) =>
+    this.emitter.emit(ev, data);
 
-  emit(ch: string, data: any = {}): any {
+  on = <U extends keyof MainEvents>(ev: U, fn: (arg0: MainEvents[U]) => void) => {
+    this.emitter.on(ev, fn);
+    return this;
+  };
+
+  once = <U extends keyof MainEvents>(ev: U, fn: (arg0: MainEvents[U]) => void) => {
+    this.emitter.once(ev, fn);
+    return this;
+  };
+
+  emit<U extends Exclude<keyof RendererEvents, FilterNever<RendererEvents>>>(ch: U): boolean;
+  emit<U extends FilterNever<RendererEvents>>(ch: U, data: RendererEvents[U]): boolean;
+  emit<U extends keyof RendererEvents>(ch: U, data?: RendererEvents[U]) {
     // This check is needed because data-batching can cause extra data to be
     // emitted after the window has already closed
     if (!this.win.isDestroyed()) {
       this.wc.send(this.id, {ch, data});
+      return true;
     }
+    return false;
   }
 
   destroy() {
-    this.removeAllListeners();
+    this.emitter.removeAllListeners();
     this.wc.removeAllListeners();
     if (this.id) {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
       ipcMain.removeListener(this.id, this.ipcListener);
     } else {
       // mark for `genUid` in constructor
@@ -58,6 +76,8 @@ export class Server extends EventEmitter {
   }
 }
 
-export default (win: BrowserWindow) => {
+const createRPC = (win: BrowserWindow) => {
   return new Server(win);
 };
+
+export default createRPC;

app/session.ts

@@ -1,14 +1,17 @@
 import {EventEmitter} from 'events';
-import {StringDecoder} from 'string_decoder';
-import defaultShell from 'default-shell';
-import {getDecoratedEnv} from './plugins';
-import {productName, version} from './package.json';
-import * as config from './config';
-import {IPty, IWindowsPtyForkOptions, spawn as npSpawn} from 'node-pty';
-import {cliScriptPath} from './config/paths';
 import {dirname} from 'path';
-import shellEnv from 'shell-env';
+import {StringDecoder} from 'string_decoder';
+
+import defaultShell from 'default-shell';
+import type {IPty, IWindowsPtyForkOptions, spawn as npSpawn} from 'node-pty';
 import osLocale from 'os-locale';
+import shellEnv from 'shell-env';
+
+import * as config from './config';
+import {cliScriptPath} from './config/paths';
+import {productName, version} from './package.json';
+import {getDecoratedEnv} from './plugins';
+import {getFallBackShellConfig} from './utils/shell-fallback';
 
 const createNodePtyError = () =>
   new Error(
@@ -23,7 +26,6 @@ try {
   throw createNodePtyError();
 }
 
-const envFromConfig = config.getConfig().env || {};
 const useConpty = config.getConfig().useConpty;
 
 // Max duration to batch session data before sending it to the renderer process.
@@ -56,7 +58,7 @@ class DataBatcher extends EventEmitter {
     this.timeout = null;
   }
 
-  write(chunk: Buffer) {
+  write(chunk: Buffer | string) {
     if (this.data.length + chunk.length >= BATCH_MAX_SIZE) {
       // We've reached the max batch size. Flush it and start another one
       if (this.timeout) {
@@ -66,7 +68,7 @@ class DataBatcher extends EventEmitter {
       this.flush();
     }
 
-    this.data += this.decoder.write(chunk);
+    this.data += typeof chunk === 'string' ? chunk : this.decoder.write(chunk);
 
     if (!this.timeout) {
       this.timeout = setTimeout(() => this.flush(), BATCH_DURATION_MS);
@@ -84,11 +86,12 @@ class DataBatcher extends EventEmitter {
 
 interface SessionOptions {
   uid: string;
-  rows: number;
-  cols: number;
-  cwd: string;
-  shell: string;
-  shellArgs: string[];
+  rows?: number;
+  cols?: number;
+  cwd?: string;
+  shell?: string;
+  shellArgs?: string[];
+  profile: string;
 }
 export default class Session extends EventEmitter {
   pty: IPty | null;
@@ -96,6 +99,7 @@ export default class Session extends EventEmitter {
   shell: string | null;
   ended: boolean;
   initTimestamp: number;
+  profile!: string;
   constructor(options: SessionOptions) {
     super();
     this.pty = null;
@@ -106,22 +110,25 @@ export default class Session extends EventEmitter {
     this.init(options);
   }
 
-  init({uid, rows, cols: columns, cwd, shell: _shell, shellArgs: _shellArgs}: SessionOptions) {
+  init({uid, rows, cols, cwd, shell: _shell, shellArgs: _shellArgs, profile}: SessionOptions) {
+    this.profile = profile;
+    const envFromConfig = config.getProfileConfig(profile).env || {};
+    const defaultShellArgs = ['--login'];
+
+    const shell = _shell || defaultShell;
+    const shellArgs = _shellArgs || defaultShellArgs;
+
     const cleanEnv =
       process.env['APPIMAGE'] && process.env['APPDIR'] ? shellEnv.sync(_shell || defaultShell) : process.env;
-    const baseEnv = Object.assign(
-      {},
-      cleanEnv,
-      {
-        LANG: `${osLocale.sync().replace(/-/, '_')}.UTF-8`,
-        TERM: 'xterm-256color',
-        COLORTERM: 'truecolor',
-        TERM_PROGRAM: productName,
-        TERM_PROGRAM_VERSION: version
-      },
-      envFromConfig
-    );
-
+    const baseEnv: Record<string, string> = {
+      ...cleanEnv,
+      LANG: `${osLocale.sync().replace(/-/, '_')}.UTF-8`,
+      TERM: 'xterm-256color',
+      COLORTERM: 'truecolor',
+      TERM_PROGRAM: productName,
+      TERM_PROGRAM_VERSION: version,
+      ...envFromConfig
+    };
     // path to AppImage mount point is added to PATH environment variable automatically
     // which conflicts with the cli
     if (baseEnv['APPIMAGE'] && baseEnv['APPDIR']) {
@@ -137,10 +144,8 @@ export default class Session extends EventEmitter {
       delete baseEnv.GOOGLE_API_KEY;
     }
 
-    const defaultShellArgs = ['--login'];
-
     const options: IWindowsPtyForkOptions = {
-      cols: columns,
+      cols,
       rows,
       cwd,
       env: getDecoratedEnv(baseEnv)
@@ -151,9 +156,6 @@ export default class Session extends EventEmitter {
       options.useConpty = useConpty;
     }
 
-    const shell = _shell || defaultShell;
-    const shellArgs = _shellArgs || defaultShellArgs;
-
     try {
       this.pty = spawn(shell, shellArgs, options);
     } catch (_err) {
@@ -170,7 +172,7 @@ export default class Session extends EventEmitter {
       if (this.ended) {
         return;
       }
-      this.batcher?.write(chunk as any);
+      this.batcher?.write(chunk);
     });
 
     this.batcher.on('flush', (data: string) => {
@@ -183,15 +185,32 @@ export default class Session extends EventEmitter {
         // this will inform users in case there are errors in the config instead of instant exit
         const runDuration = new Date().getTime() - this.initTimestamp;
         if (e.exitCode > 0 && runDuration < 1000) {
-          const defaultShellConfig = {shell: defaultShell, shellArgs: defaultShellArgs};
-          const msg = `
+          const fallBackShellConfig = getFallBackShellConfig(shell, shellArgs, defaultShell, defaultShellArgs);
+          if (fallBackShellConfig) {
+            const msg = `
 shell exited in ${runDuration} ms with exit code ${e.exitCode}
 please check the shell config: ${JSON.stringify({shell, shellArgs}, undefined, 2)}
-fallback to default shell config: ${JSON.stringify(defaultShellConfig, undefined, 2)}
+using fallback shell config: ${JSON.stringify(fallBackShellConfig, undefined, 2)}
 `;
-          console.warn(msg);
-          this.batcher?.write(msg.replace(/\n/g, '\r\n') as any);
-          this.init({uid, rows, cols: columns, cwd, ...defaultShellConfig});
+            console.warn(msg);
+            this.batcher?.write(msg.replace(/\n/g, '\r\n'));
+            this.init({
+              uid,
+              rows,
+              cols,
+              cwd,
+              shell: fallBackShellConfig.shell,
+              shellArgs: fallBackShellConfig.shellArgs,
+              profile
+            });
+          } else {
+            const msg = `
+shell exited in ${runDuration} ms with exit code ${e.exitCode}
+No fallback available, please check the shell config.
+`;
+            console.warn(msg);
+            this.batcher?.write(msg.replace(/\n/g, '\r\n'));
+          }
         } else {
           this.ended = true;
           this.emit('exit');

app/tsconfig.json

@@ -7,6 +7,8 @@
   },
   "include": [
     "./**/*",
-    "./package.json"
+    "./package.json",
+    "../typings/extend-electron.d.ts",
+    "../typings/ext-modules.d.ts"
   ]
 }

app/ui/contextmenu.ts

@@ -1,8 +1,11 @@
+import type {MenuItemConstructorOptions, BrowserWindow} from 'electron';
+
+import {execCommand} from '../commands';
+import {getProfiles} from '../config';
 import editMenu from '../menus/menus/edit';
 import shellMenu from '../menus/menus/shell';
-import {execCommand} from '../commands';
 import {getDecoratedKeymaps} from '../plugins';
-import {MenuItemConstructorOptions, BrowserWindow} from 'electron';
+
 const separator: MenuItemConstructorOptions = {type: 'separator'};
 
 const getCommandKeys = (keymaps: Record<string, string[]>): Record<string, string> =>
@@ -20,14 +23,20 @@ const filterCutCopy = (selection: string, menuItem: MenuItemConstructorOptions)
   return menuItem;
 };
 
-export default (
+const contextMenuTemplate = (
   createWindow: (fn?: (win: BrowserWindow) => void, options?: Record<string, any>) => BrowserWindow,
   selection: string
 ) => {
   const commandKeys = getCommandKeys(getDecoratedKeymaps());
-  const _shell = shellMenu(commandKeys, execCommand).submenu as MenuItemConstructorOptions[];
+  const _shell = shellMenu(
+    commandKeys,
+    execCommand,
+    getProfiles().map((p) => p.name)
+  ).submenu as MenuItemConstructorOptions[];
   const _edit = editMenu(commandKeys, execCommand).submenu.filter(filterCutCopy.bind(null, selection));
   return _edit
     .concat(separator, _shell)
     .filter((menuItem) => !Object.prototype.hasOwnProperty.call(menuItem, 'enabled') || menuItem.enabled);
 };
+
+export default contextMenuTemplate;

app/ui/window.ts

@@ -1,28 +1,36 @@
-import {app, BrowserWindow, shell, Menu, BrowserWindowConstructorOptions, Event} from 'electron';
+import {existsSync} from 'fs';
 import {isAbsolute, normalize, sep} from 'path';
 import {URL, fileURLToPath} from 'url';
-import {v4 as uuidv4} from 'uuid';
-import isDev from 'electron-is-dev';
-import updater from '../updater';
-import toElectronBackgroundColor from '../utils/to-electron-background-color';
-import {icon, homeDirectory} from '../config/paths';
-import createRPC from '../rpc';
-import notify from '../notify';
-import fetchNotifications from '../notifications';
-import Session from '../session';
-import contextMenuTemplate from './contextmenu';
-import {execCommand} from '../commands';
-import {setRendererType, unsetRendererType} from '../utils/renderer-utils';
-import {decorateSessionOptions, decorateSessionClass} from '../plugins';
+
+import {app, BrowserWindow, shell, Menu} from 'electron';
+import type {BrowserWindowConstructorOptions} from 'electron';
+
 import {enable as remoteEnable} from '@electron/remote/main';
-import {configOptions} from '../../lib/config';
+import isDev from 'electron-is-dev';
 import {getWorkingDirectoryFromPID} from 'native-process-working-directory';
-import {existsSync} from 'fs';
+import {v4 as uuidv4} from 'uuid';
+
+import type {sessionExtraOptions} from '../../typings/common';
+import type {configOptions} from '../../typings/config';
+import {execCommand} from '../commands';
+import {getDefaultProfile} from '../config';
+import {icon, homeDirectory} from '../config/paths';
+import fetchNotifications from '../notifications';
+import notify from '../notify';
+import {decorateSessionOptions, decorateSessionClass} from '../plugins';
+import createRPC from '../rpc';
+import Session from '../session';
+import updater from '../updater';
+import {setRendererType, unsetRendererType} from '../utils/renderer-utils';
+import toElectronBackgroundColor from '../utils/to-electron-background-color';
+
+import contextMenuTemplate from './contextmenu';
 
 export function newWindow(
   options_: BrowserWindowConstructorOptions,
   cfg: configOptions,
-  fn?: (win: BrowserWindow) => void
+  fn?: (win: BrowserWindow) => void,
+  profileName: string = getDefaultProfile()
 ): BrowserWindow {
   const classOpts = Object.assign({uid: uuidv4()});
   app.plugins.decorateWindowClass(classOpts);
@@ -48,6 +56,8 @@ export function newWindow(
   };
   const window = new BrowserWindow(app.plugins.getDecoratedBrowserOptions(winOpts));
 
+  window.profileName = profileName;
+
   // Enable remote module on this window
   remoteEnable(window.webContents);
 
@@ -60,28 +70,13 @@ export function newWindow(
   const sessions = new Map<string, Session>();
 
   const updateBackgroundColor = () => {
-    const cfg_ = app.plugins.getDecoratedConfig();
+    const cfg_ = app.plugins.getDecoratedConfig(profileName);
     window.setBackgroundColor(toElectronBackgroundColor(cfg_.backgroundColor || '#000'));
   };
 
-  // set working directory
-  let argPath = process.argv[1];
-  if (argPath && process.platform === 'win32') {
-    if (/[a-zA-Z]:"/.test(argPath)) {
-      argPath = argPath.replace('"', sep);
-    }
-    argPath = normalize(argPath + sep);
-  }
-  let workingDirectory = homeDirectory;
-  if (argPath && isAbsolute(argPath)) {
-    workingDirectory = argPath;
-  } else if (cfg.workingDirectory && isAbsolute(cfg.workingDirectory)) {
-    workingDirectory = cfg.workingDirectory;
-  }
-
   // config changes
   const cfgUnsubscribe = app.config.subscribe(() => {
-    const cfg_ = app.plugins.getDecoratedConfig();
+    const cfg_ = app.plugins.getDecoratedConfig(profileName);
 
     // notify renderer
     window.webContents.send('config change');
@@ -124,34 +119,58 @@ export function newWindow(
     }
   });
 
-  function createSession(extraOptions: any = {}) {
+  function createSession(extraOptions: sessionExtraOptions = {}) {
     const uid = uuidv4();
-    const extraOptionsFiltered: any = {};
+    const extraOptionsFiltered: sessionExtraOptions = {};
     Object.keys(extraOptions).forEach((key) => {
       if (extraOptions[key] !== undefined) extraOptionsFiltered[key] = extraOptions[key];
     });
 
+    const profile = extraOptionsFiltered.profile || profileName;
+    const activeSession = extraOptionsFiltered.activeUid ? sessions.get(extraOptionsFiltered.activeUid) : undefined;
     let cwd = '';
-    if (cfg.preserveCWD === undefined || cfg.preserveCWD) {
-      const activePID = extraOptionsFiltered.activeUid && sessions.get(extraOptionsFiltered.activeUid)?.pty?.pid;
-      try {
-        cwd = activePID && getWorkingDirectoryFromPID(activePID);
-      } catch (error) {
-        console.error(error);
+    if (cfg.preserveCWD !== false && activeSession && activeSession.profile === profile) {
+      const activePID = activeSession.pty?.pid;
+      if (activePID !== undefined) {
+        try {
+          cwd = getWorkingDirectoryFromPID(activePID) || '';
+        } catch (error) {
+          console.error(error);
+        }
       }
       cwd = cwd && isAbsolute(cwd) && existsSync(cwd) ? cwd : '';
     }
 
+    const profileCfg = app.plugins.getDecoratedConfig(profile);
+
+    // set working directory
+    let argPath = process.argv[1];
+    if (argPath && process.platform === 'win32') {
+      if (/[a-zA-Z]:"/.test(argPath)) {
+        argPath = argPath.replace('"', sep);
+      }
+      argPath = normalize(argPath + sep);
+    }
+    let workingDirectory = homeDirectory;
+    if (argPath && isAbsolute(argPath)) {
+      workingDirectory = argPath;
+    } else if (profileCfg.workingDirectory && isAbsolute(profileCfg.workingDirectory)) {
+      workingDirectory = profileCfg.workingDirectory;
+    }
+
     // remove the rows and cols, the wrong value of them will break layout when init create
     const defaultOptions = Object.assign(
       {
         cwd: cwd || workingDirectory,
         splitDirection: undefined,
-        shell: cfg.shell,
-        shellArgs: cfg.shellArgs && Array.from(cfg.shellArgs)
+        shell: profileCfg.shell,
+        shellArgs: profileCfg.shellArgs && Array.from(profileCfg.shellArgs)
       },
       extraOptionsFiltered,
-      {uid}
+      {
+        profile: extraOptionsFiltered.profile || profileName,
+        uid
+      }
     );
     const options = decorateSessionOptions(defaultOptions);
     const DecoratedSession = decorateSessionClass(Session);
@@ -171,7 +190,8 @@ export function newWindow(
       splitDirection: options.splitDirection,
       shell: session.shell,
       pid: session.pty ? session.pty.pid : null,
-      activeUid: options.activeUid
+      activeUid: options.activeUid ?? undefined,
+      profile: options.profile
     });
 
     session.on('data', (data: string) => {
@@ -206,8 +226,8 @@ export function newWindow(
       session.resize({cols, rows});
     }
   });
-  rpc.on('data', ({uid, data, escaped}: {uid: string; data: string; escaped: boolean}) => {
-    const session = sessions.get(uid);
+  rpc.on('data', ({uid, data, escaped}) => {
+    const session = uid && sessions.get(uid);
     if (session) {
       if (escaped) {
         const escapedData = session.shell?.endsWith('cmd.exe')
@@ -237,11 +257,12 @@ export function newWindow(
   // Same deal as above, grabbing the window titlebar when the window
   // is maximized on Windows results in unmaximize, without hitting any
   // app buttons
-  for (const ev of ['maximize', 'unmaximize', 'minimize', 'restore'] as any) {
-    window.on(ev, () => {
-      rpc.emit('windowGeometry change', {isMaximized: window.isMaximized()});
-    });
-  }
+  const onGeometryChange = () => rpc.emit('windowGeometry change', {isMaximized: window.isMaximized()});
+  window.on('maximize', onGeometryChange);
+  window.on('unmaximize', onGeometryChange);
+  window.on('minimize', onGeometryChange);
+  window.on('restore', onGeometryChange);
+
   window.on('move', () => {
     const position = window.getPosition();
     rpc.emit('move', {bounds: {x: position[0], y: position[1]}});
@@ -255,10 +276,10 @@ export function newWindow(
   });
   // pass on the full screen events from the window to react
   rpc.win.on('enter-full-screen', () => {
-    rpc.emit('enter full screen', {});
+    rpc.emit('enter full screen');
   });
   rpc.win.on('leave-full-screen', () => {
-    rpc.emit('leave full screen', {});
+    rpc.emit('leave full screen');
   });
   const deleteSessions = () => {
     sessions.forEach((session, key) => {
@@ -276,22 +297,33 @@ export function newWindow(
     }
   });
 
-  const handleDrop = (event: Event, url: string) => {
+  const handleDroppedURL = (url: string) => {
     const protocol = typeof url === 'string' && new URL(url).protocol;
     if (protocol === 'file:') {
-      event.preventDefault();
       const path = fileURLToPath(url);
-      rpc.emit('session data send', {data: path, escaped: true});
+      return {uid: null, data: path, escaped: true};
     } else if (protocol === 'http:' || protocol === 'https:') {
-      event.preventDefault();
-      rpc.emit('session data send', {data: url});
+      return {uid: null, data: url};
     }
   };
 
   // If file is dropped onto the terminal window, navigate and new-window events are prevented
-  // and his path is added to active session.
-  window.webContents.on('will-navigate', handleDrop);
-  window.webContents.on('new-window', handleDrop);
+  // and it's path is added to active session.
+  window.webContents.on('will-navigate', (event, url) => {
+    const data = handleDroppedURL(url);
+    if (data) {
+      event.preventDefault();
+      rpc.emit('session data send', data);
+    }
+  });
+  window.webContents.setWindowOpenHandler(({url}) => {
+    const data = handleDroppedURL(url);
+    if (data) {
+      rpc.emit('session data send', data);
+      return {action: 'deny'};
+    }
+    return {action: 'allow'};
+  });
 
   // expose internals to extension authors
   window.rpc = rpc;

app/updater.ts

@@ -1,12 +1,15 @@
 // Packages
-import electron, {app, BrowserWindow, AutoUpdater} from 'electron';
-import ms from 'ms';
+import electron, {app} from 'electron';
+import type {BrowserWindow, AutoUpdater} from 'electron';
+
 import retry from 'async-retry';
+import ms from 'ms';
 
 // Utilities
+import autoUpdaterLinux from './auto-updater-linux';
+import {getDefaultProfile} from './config';
 import {version} from './package.json';
 import {getDecoratedConfig} from './plugins';
-import autoUpdaterLinux from './auto-updater-linux';
 
 const {platform} = process;
 const isLinux = platform === 'linux';
@@ -15,7 +18,7 @@ const autoUpdater: AutoUpdater = isLinux ? autoUpdaterLinux : electron.autoUpdat
 
 const getDecoratedConfigWithRetry = async () => {
   return await retry(() => {
-    const content = getDecoratedConfig();
+    const content = getDecoratedConfig(getDefaultProfile());
     if (!content) {
       throw new Error('No config content loaded');
     }
@@ -69,28 +72,23 @@ async function init() {
   isInit = true;
 }
 
-export default (win: BrowserWindow) => {
+const updater = (win: BrowserWindow) => {
   if (!isInit) {
     void init();
   }
 
   const {rpc} = win;
 
-  const onupdate = (
-    ev: Event,
-    releaseNotes: string,
-    releaseName: string,
-    date: Date,
-    updateUrl: string,
-    onQuitAndInstall: any
-  ) => {
+  const onupdate = (ev: Event, releaseNotes: string, releaseName: string, date: Date, updateUrl: string) => {
     const releaseUrl = updateUrl || `https://github.com/vercel/hyper/releases/tag/${releaseName}`;
-    rpc.emit('update available', {releaseNotes, releaseName, releaseUrl, canInstall: !!onQuitAndInstall});
+    rpc.emit('update available', {releaseNotes, releaseName, releaseUrl, canInstall: !isLinux});
   };
 
-  const eventName: any = isLinux ? 'update-available' : 'update-downloaded';
-
-  autoUpdater.on(eventName, onupdate);
+  if (isLinux) {
+    autoUpdater.on('update-available', onupdate);
+  } else {
+    autoUpdater.on('update-downloaded', onupdate);
+  }
 
   rpc.once('quit and install', () => {
     autoUpdater.quitAndInstall();
@@ -111,6 +109,12 @@ export default (win: BrowserWindow) => {
   });
 
   win.on('close', () => {
-    autoUpdater.removeListener(eventName, onupdate);
+    if (isLinux) {
+      autoUpdater.removeListener('update-available', onupdate);
+    } else {
+      autoUpdater.removeListener('update-downloaded', onupdate);
+    }
   });
 };
+
+export default updater;

app/utils/cli-install.ts

@@ -1,20 +1,23 @@
-import pify from 'pify';
-import fs from 'fs';
+import {existsSync, readlink, symlink} from 'fs';
 import path from 'path';
-import notify from '../notify';
-import {cliScriptPath, cliLinkPath} from '../config/paths';
+import {promisify} from 'util';
+
+import {clipboard, dialog} from 'electron';
+
+import {mkdirpSync} from 'fs-extra';
 import * as Registry from 'native-reg';
 import type {ValueType} from 'native-reg';
 import sudoPrompt from 'sudo-prompt';
-import {clipboard, dialog} from 'electron';
-import {mkdirpSync} from 'fs-extra';
 
-const readlink = pify(fs.readlink);
-const symlink = pify(fs.symlink);
-const sudoExec = pify(sudoPrompt.exec, {multiArgs: true});
+import {cliScriptPath, cliLinkPath} from '../config/paths';
+import notify from '../notify';
+
+const readLink = promisify(readlink);
+const symLink = promisify(symlink);
+const sudoExec = promisify(sudoPrompt.exec);
 
 const checkInstall = () => {
-  return readlink(cliLinkPath)
+  return readLink(cliLinkPath)
     .then((link) => link === cliScriptPath)
     .catch((err) => {
       if (err.code === 'ENOENT') {
@@ -32,14 +35,14 @@ const addSymlink = async (silent: boolean) => {
       return;
     }
     console.log('Linking HyperCLI');
-    if (!fs.existsSync(path.dirname(cliLinkPath))) {
+    if (!existsSync(path.dirname(cliLinkPath))) {
       try {
         mkdirpSync(path.dirname(cliLinkPath));
       } catch (err) {
         throw `Failed to create directory ${path.dirname(cliLinkPath)} - ${err}`;
       }
     }
-    await symlink(cliScriptPath, cliLinkPath);
+    await symLink(cliScriptPath, cliLinkPath);
   } catch (_err) {
     const err = _err as {code: string};
     // 'EINVAL' is returned by readlink,

app/utils/map-keys.ts

@@ -11,7 +11,7 @@ const generatePrefixedCommand = (command: string, shortcuts: string[]) => {
   return result;
 };
 
-export default (config: Record<string, string[] | string>) => {
+const mapKeys = (config: Record<string, string[] | string>) => {
   return Object.keys(config).reduce((keymap: Record<string, string[]>, command: string) => {
     if (!command) {
       return keymap;
@@ -39,3 +39,5 @@ export default (config: Record<string, string[] | string>) => {
     return keymap;
   }, {});
 };
+
+export default mapKeys;

app/utils/shell-fallback.ts

@@ -0,0 +1,25 @@
+export const getFallBackShellConfig = (
+  shell: string,
+  shellArgs: string[],
+  defaultShell: string,
+  defaultShellArgs: string[]
+): {
+  shell: string;
+  shellArgs: string[];
+} | null => {
+  if (shellArgs.length > 0) {
+    return {
+      shell,
+      shellArgs: []
+    };
+  }
+
+  if (shell != defaultShell) {
+    return {
+      shell: defaultShell,
+      shellArgs: defaultShellArgs
+    };
+  }
+
+  return null;
+};

app/utils/system-context-menu.ts

@@ -9,7 +9,7 @@ const regKeys = [
 ];
 const regParts = [
   {key: 'command', name: '', value: `${appPath} "%V"`},
-  {name: '', value: 'Open Hyper here'},
+  {name: '', value: 'Open &Hyper here'},
   {name: 'Icon', value: `${appPath}`}
 ];
 

app/utils/to-electron-background-color.ts

@@ -4,7 +4,7 @@ import Color from 'color';
 // returns a background color that's in hex
 // format including the alpha channel (e.g.: `#00000050`)
 // input can be any css value (rgb, hsl, string…)
-export default (bgColor: string) => {
+const toElectronBackgroundColor = (bgColor: string) => {
   const color = Color(bgColor);
 
   if (color.alpha() === 1) {
@@ -15,3 +15,5 @@ export default (bgColor: string) => {
   const alphaHex = Math.round(color.alpha() * 255).toString(16);
   return `#${alphaHex}${color.hex().toString().slice(1)}`;
 };
+
+export default toElectronBackgroundColor;

app/yarn.lock

@@ -2,15 +2,15 @@
 # yarn lockfile v1
 
 
-"@babel/parser@7.20.7":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
-  integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
+"@babel/parser@7.24.4":
+  version "7.24.4"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
+  integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
 
-"@electron/remote@2.0.9":
-  version "2.0.9"
-  resolved "https://registry.npmjs.org/@electron/remote/-/remote-2.0.9.tgz#092ff085407bc907f45b89a72c36faa773ccf2d9"
-  integrity sha512-LR0W0ID6WAKHaSs0x5LX9aiG+5pFBNAJL6eQAJfGkCuZPUa6nZz+czZLdlTDETG45CgF/0raSvCtYOYUpr6c+A==
+"@electron/remote@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/@electron/remote/-/remote-2.1.2.tgz#52a97c8faa5b769155b649ef262f2f8c851776e6"
+  integrity sha512-EPwNx+nhdrTBxyCqXt/pftoQg/ybtWDW3DUWHafejvnB1ZGGfMpv6e15D8KeempocjXe78T7WreyGGb3mlZxdA==
 
 "@types/semver@^7.3.8":
   version "7.3.8"
@@ -47,20 +47,10 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-assert@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz#95fc1c616d48713510680f2eaf2d10dd22e02d32"
-  integrity sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==
-  dependencies:
-    es6-object-assign "^1.1.0"
-    is-nan "^1.2.1"
-    object-is "^1.0.1"
-    util "^0.12.0"
-
-ast-types@0.15.2:
-  version "0.15.2"
-  resolved "https://registry.npmjs.org/ast-types/-/ast-types-0.15.2.tgz#39ae4809393c4b16df751ee563411423e85fb49d"
-  integrity sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==
+ast-types@^0.16.1:
+  version "0.16.1"
+  resolved "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz#7a9da1617c9081bc121faafe91711b4c8bb81da2"
+  integrity sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==
   dependencies:
     tslib "^2.0.1"
 
@@ -76,16 +66,24 @@ atomically@^1.7.0:
   resolved "https://registry.npmjs.org/atomically/-/atomically-1.7.0.tgz#c07a0458432ea6dbc9a3506fffa424b48bccaafe"
   integrity sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==
 
-available-typed-arrays@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
-  integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 binary-extensions@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
   integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
 
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
 braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -93,18 +91,10 @@ braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
-  dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
-
-chokidar@^3.5.3:
-  version "3.5.3"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
-  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+chokidar@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
   dependencies:
     anymatch "~3.1.2"
     braces "~3.0.2"
@@ -144,6 +134,11 @@ color@4.2.3:
     color-convert "^2.0.1"
     color-string "^1.9.0"
 
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
 conf@^10.2.0:
   version "10.2.0"
   resolved "https://registry.npmjs.org/conf/-/conf-10.2.0.tgz#838e757be963f1a2386dfe048a98f8f69f7b55d6"
@@ -160,6 +155,11 @@ conf@^10.2.0:
     pkg-up "^3.1.0"
     semver "^7.3.5"
 
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -192,14 +192,6 @@ default-shell@1.0.1, default-shell@^1.0.1:
   resolved "https://registry.npmjs.org/default-shell/-/default-shell-1.0.1.tgz#752304bddc6174f49eb29cb988feea0b8813c8bc"
   integrity sha1-dSMEvdxhdPSespy5iP7qC4gTyLw=
 
-define-properties@^1.1.3:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
-  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
-  dependencies:
-    has-property-descriptors "^1.0.0"
-    object-keys "^1.1.1"
-
 dot-prop@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/dot-prop/-/dot-prop-6.0.1.tgz#fc26b3cf142b9e59b74dbd39ed66ce620c681083"
@@ -207,6 +199,16 @@ dot-prop@^6.0.1:
   dependencies:
     is-obj "^2.0.0"
 
+electron-devtools-installer@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/electron-devtools-installer/-/electron-devtools-installer-3.2.0.tgz#acc48d24eb7033fe5af284a19667e73b78d406d0"
+  integrity sha512-t3UczsYugm4OAbqvdImMCImIMVdFzJAHgbwHpkl5jmfu1izVgUcP/mnrPqJIpEeCK1uZGpt+yHgWEN+9EwoYhQ==
+  dependencies:
+    rimraf "^3.0.2"
+    semver "^7.2.1"
+    tslib "^2.1.0"
+    unzip-crx-3 "^0.2.0"
+
 electron-fetch@1.9.1:
   version "1.9.1"
   resolved "https://registry.npmjs.org/electron-fetch/-/electron-fetch-1.9.1.tgz#e28bfe78d467de3f2dec884b1d72b8b05322f30f"
@@ -219,10 +221,10 @@ electron-is-dev@2.0.0:
   resolved "https://registry.npmjs.org/electron-is-dev/-/electron-is-dev-2.0.0.tgz#833487a069b8dad21425c67a19847d9064ab19bd"
   integrity sha512-3X99K852Yoqu9AcW50qz3ibYBWY79/pBhlMCab8ToEWS48R0T9tyxRiQhwylE7zQdXrMnx2JKqUJyMPmt5FBqA==
 
-electron-store@8.1.0:
-  version "8.1.0"
-  resolved "https://registry.npmjs.org/electron-store/-/electron-store-8.1.0.tgz#46a398f2bd9aa83c4a9daaae28380e2b3b9c7597"
-  integrity sha512-2clHg/juMjOH0GT9cQ6qtmIvK183B39ZXR0bUoPwKwYHJsEF3quqyDzMFUAu+0OP8ijmN2CbPRAelhNbWUbzwA==
+electron-store@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/electron-store/-/electron-store-8.2.0.tgz#114e6e453e8bb746ab4ccb542424d8c881ad2ca1"
+  integrity sha512-ukLL5Bevdil6oieAOXz3CMy+OgaItMiVBg701MNlG6W5RaC0AHN7rvlqTCmeb6O7jP0Qa1KKYTE0xV0xbhF4Hw==
   dependencies:
     conf "^10.2.0"
     type-fest "^2.17.0"
@@ -246,11 +248,6 @@ env-paths@^2.2.1:
   resolved "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
 
-es6-object-assign@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz#c2c3582656247c39ea107cb1e6652b6f9f24523c"
-  integrity sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==
-
 esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -303,41 +300,25 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
-for-each@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
-  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
-  dependencies:
-    is-callable "^1.1.3"
-
-fs-extra@11.1.0:
-  version "11.1.0"
-  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz#5784b102104433bb0e090f48bfc4a30742c357ed"
-  integrity sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==
+fs-extra@11.2.0:
+  version "11.2.0"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b"
+  integrity sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==
   dependencies:
     graceful-fs "^4.2.0"
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
 fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
-  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.3"
-
 get-stream@^4.0.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -369,44 +350,23 @@ glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-gopd@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
-  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+glob@^7.1.3:
+  version "7.2.3"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
   dependencies:
-    get-intrinsic "^1.1.3"
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
 
 graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.4"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
-has-property-descriptors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
-  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
-  dependencies:
-    get-intrinsic "^1.1.1"
-
-has-symbols@^1.0.2, has-symbols@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
-  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
-
-has-tostringtag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
-  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
-  dependencies:
-    has-symbols "^1.0.2"
-
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
-  dependencies:
-    function-bind "^1.1.1"
-
 human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
@@ -419,7 +379,20 @@ iconv-lite@^0.6.2:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
-inherits@^2.0.3, inherits@~2.0.3:
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -429,14 +402,6 @@ invert-kv@^3.0.0:
   resolved "https://registry.npmjs.org/invert-kv/-/invert-kv-3.0.1.tgz#a93c7a3d4386a1dc8325b97da9bb1620c0282523"
   integrity sha512-CYdFeFexxhv/Bcny+Q0BfOV+ltRlJcd4BBZBYFX/O0u4npJrgZtIcjokegtiSMAvlMTJ+Koq0GBCc//3bueQxw==
 
-is-arguments@^1.0.4:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
-  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
-
 is-arrayish@^0.3.1:
   version "0.3.2"
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
@@ -449,23 +414,11 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-callable@^1.1.3:
-  version "1.2.7"
-  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
-  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
-
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
-is-generator-function@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
-  integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
-  dependencies:
-    has-tostringtag "^1.0.0"
-
 is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
@@ -473,14 +426,6 @@ is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-nan@^1.2.1:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz#043a54adea31748b55b6cd4e09aadafa69bd9e1d"
-  integrity sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -501,16 +446,10 @@ is-stream@^2.0.0:
   resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-typed-array@^1.1.10, is-typed-array@^1.1.3:
-  version "1.1.10"
-  resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
-  integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
-  dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-tostringtag "^1.0.0"
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
 
 isexe@^2.0.0:
   version "2.0.0"
@@ -541,6 +480,16 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jszip@^3.1.0:
+  version "3.10.1"
+  resolved "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
+  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    setimmediate "^1.0.5"
+
 lcid@^3.0.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/lcid/-/lcid-3.1.1.tgz#9030ec479a058fc36b5e8243ebaac8b6ac582fd0"
@@ -548,6 +497,13 @@ lcid@^3.0.0:
   dependencies:
     invert-kv "^3.0.0"
 
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -606,10 +562,24 @@ mimic-fn@^3.0.0:
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz#65755145bbf3e36954b949c16450427451d5ca74"
   integrity sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==
 
-mkdirp@1.0.4:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+mkdirp@^0.5.1:
+  version "0.5.6"
+  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
 
 ms@2.1.3:
   version "2.1.3"
@@ -650,10 +620,10 @@ node-gyp-build@4:
   resolved "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz#9f256b03e5826150be39c764bf51e993946d71a3"
   integrity sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==
 
-node-pty@0.11.0-beta27:
-  version "0.11.0-beta27"
-  resolved "https://registry.npmjs.org/node-pty/-/node-pty-0.11.0-beta27.tgz#13ebfb687aff23af3b38991e676ac0fb92accb82"
-  integrity sha512-HkP1lHsgOgXroEMuFt/2hNkyI+roSSKIMKkyaW3g/NVNY3j5gpYD2YM05EbYlJbjaUFAWqbJzoLIVs2g+A+B8A==
+node-pty@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/node-pty/-/node-pty-1.0.0.tgz#7daafc0aca1c4ca3de15c61330373af4af5861fd"
+  integrity sha512-wtBMWWS7dFZm/VgqElrTvtfMq4GzJ6+edFI0Y0zyzygUSZMgZdraDUMUhCIvkjhJjme15qWmbyJbtAx4ot4uZA==
   dependencies:
     nan "^2.17.0"
 
@@ -676,28 +646,10 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-object-is@^1.0.1:
-  version "1.1.5"
-  resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
-  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
-  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
-
-once@^1.3.1, once@^1.4.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
   dependencies:
     wrappy "1"
 
@@ -751,6 +703,11 @@ p-try@^2.0.0:
   resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+pako@~1.0.2:
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
 parse-path@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/parse-path/-/parse-path-7.0.0.tgz#605a2d58d0a749c8594405d8cc3a2bf76d16099b"
@@ -770,6 +727,11 @@ path-exists@^3.0.0:
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
   integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
 
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
 path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
@@ -785,11 +747,6 @@ picomatch@^2.0.4, picomatch@^2.2.1:
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
-pify@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f"
-  integrity sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==
-
 pkg-up@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
@@ -797,6 +754,11 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
 protocols@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz#8f155da3fc0f32644e83c5782c8e8212ccf70a86"
@@ -822,22 +784,33 @@ queue@6.0.2:
   dependencies:
     inherits "~2.0.3"
 
-react-dom@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
-react@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
+
+readable-stream@~2.3.6:
+  version "2.3.8"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
 
 readdirp@~3.6.0:
   version "3.6.0"
@@ -846,15 +819,15 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-recast@0.22.0:
-  version "0.22.0"
-  resolved "https://registry.npmjs.org/recast/-/recast-0.22.0.tgz#1dd3bf1b86e5eb810b044221a1a734234ed3e9c0"
-  integrity sha512-5AAx+mujtXijsEavc5lWXBPQqrM4+Dl5qNH96N2aNeuJFUzpiiToKPsxQD/zAIJHspz7zz0maX0PCtCTFVlixQ==
+recast@0.23.6:
+  version "0.23.6"
+  resolved "https://registry.npmjs.org/recast/-/recast-0.23.6.tgz#198fba74f66143a30acc81929302d214ce4e3bfa"
+  integrity sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==
   dependencies:
-    assert "^2.0.0"
-    ast-types "0.15.2"
+    ast-types "^0.16.1"
     esprima "~4.0.0"
     source-map "~0.6.1"
+    tiny-invariant "^1.3.3"
     tslib "^2.0.1"
 
 require-from-string@^2.0.2:
@@ -867,23 +840,34 @@ retry@0.13.1:
   resolved "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
   integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==
 
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
 "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
-semver@7.3.8, semver@^7.3.5:
-  version "7.3.8"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
-  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+semver@7.6.0, semver@^7.2.1, semver@^7.3.5:
+  version "7.6.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
+  integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -892,6 +876,11 @@ semver@^5.5.0, semver@^5.6.0:
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -947,6 +936,13 @@ source-map@~0.6.1:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
 strip-ansi@^5.2.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
@@ -969,6 +965,11 @@ sudo-prompt@^9.2.1:
   resolved "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd"
   integrity sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==
 
+tiny-invariant@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
+  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -976,10 +977,10 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-tslib@^2.0.1:
-  version "2.4.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
-  integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
+tslib@^2.0.1, tslib@^2.1.0:
+  version "2.6.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
+  integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==
 
 type-fest@^2.17.0:
   version "2.18.0"
@@ -991,6 +992,15 @@ universalify@^2.0.0:
   resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
+unzip-crx-3@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/unzip-crx-3/-/unzip-crx-3-0.2.0.tgz#d5324147b104a8aed9ae8639c95521f6f7cda292"
+  integrity sha512-0+JiUq/z7faJ6oifVB5nSwt589v1KCduqIJupNVDoWSXZtWDmjDGO3RAEOvwJ07w90aoXoP4enKsR7ecMrJtWQ==
+  dependencies:
+    jszip "^3.1.0"
+    mkdirp "^0.5.1"
+    yaku "^0.16.6"
+
 uri-js@^4.2.2:
   version "4.4.0"
   resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
@@ -998,33 +1008,15 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-util@^0.12.0:
-  version "0.12.5"
-  resolved "https://registry.npmjs.org/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc"
-  integrity sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==
-  dependencies:
-    inherits "^2.0.3"
-    is-arguments "^1.0.4"
-    is-generator-function "^1.0.7"
-    is-typed-array "^1.1.3"
-    which-typed-array "^1.1.2"
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-uuid@9.0.0:
-  version "9.0.0"
-  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
-  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
-
-which-typed-array@^1.1.2:
-  version "1.1.9"
-  resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
-  integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
-  dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-tostringtag "^1.0.0"
-    is-typed-array "^1.1.10"
+uuid@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
 
 which@^1.2.9:
   version "1.3.1"
@@ -1045,6 +1037,11 @@ wrappy@1:
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+yaku@^0.16.6:
+  version "0.16.7"
+  resolved "https://registry.npmjs.org/yaku/-/yaku-0.16.7.tgz#1d195c78aa9b5bf8479c895b9504fd4f0847984e"
+  integrity sha512-Syu3IB3rZvKvYk7yTiyl1bo/jiEFaaStrgv1V2TIJTqYPStSMQVO8EQjg/z+DRzLq/4LIIharNT3iH1hylEIRw==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"

bin/notarize.js

@@ -1,4 +1,4 @@
-const { notarize } = require("electron-notarize");
+const { notarize } = require("@electron/notarize");
 
 exports.default = async function notarizing(context) {
   const { electronPlatformName, appOutDir } = context;

bin/snapshot-libs.js

@@ -7,10 +7,6 @@ require('normalize-url');
 require('parse-url');
 require('php-escape-shell');
 require('plist');
-require('react-deep-force-update');
-require('react-dom');
-require('react-redux');
-require('react');
 require('redux-thunk');
 require('redux');
 require('reselect');
@@ -22,10 +18,14 @@ if (false) {
   require('args');
   require('mousetrap');
   require('open');
+  require('react-dom');
+  require('react-redux');
+  require('react');
   require('xterm-addon-fit');
-  require('xterm-addon-ligatures');
+  require('xterm-addon-image');
   require('xterm-addon-search');
   require('xterm-addon-web-links');
   require('xterm-addon-webgl');
+  require('xterm-addon-canvas');
   require('xterm');
 }

build/win/installer.nsh

@@ -1,15 +1,15 @@
 !macro customInstall
-  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper" "" "Open Hyper here"
-  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper" "Icon" "$appExe"
-  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper\command" "" `$appExe "%V"`
+  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper" "" "Open &Hyper here"
+  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper" "Icon" `"$appExe"`
+  WriteRegStr HKCU "Software\Classes\Directory\Background\shell\Hyper\command" "" `"$appExe" "%V"`
 
-  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper" "" "Open Hyper here"
-  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper" "Icon" "$appExe"
-  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper\command" "" `$appExe "%V"`
+  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper" "" "Open &Hyper here"
+  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper" "Icon" `"$appExe"`
+  WriteRegStr HKCU "Software\Classes\Directory\shell\Hyper\command" "" `"$appExe" "%V"`
 
-  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper" "" "Open Hyper here"
-  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper" "Icon" "$appExe"
-  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper\command" "" `$appExe "%V"`
+  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper" "" "Open &Hyper here"
+  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper" "Icon" `"$appExe"`
+  WriteRegStr HKCU "Software\Classes\Drive\shell\Hyper\command" "" `"$appExe" "%V"`
 !macroend
 
 !macro customUnInstall
@@ -25,4 +25,4 @@
 !macro customInit
   IfFileExists $LOCALAPPDATA\Hyper\Update.exe 0 +2
   nsExec::Exec '"$LOCALAPPDATA\Hyper\Update.exe" --uninstall -s'
-!macroend
+!macroend

cli/api.ts

@@ -2,18 +2,20 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import fs from 'fs';
 import os from 'os';
+import path from 'path';
+
 import got from 'got';
 import registryUrlModule from 'registry-url';
+
 const registryUrl = registryUrlModule();
-import path from 'path';
 
 // If the user defines XDG_CONFIG_HOME they definitely want their config there,
 // otherwise use the home directory in linux/mac and userdata in windows
 const applicationDirectory = process.env.XDG_CONFIG_HOME
   ? path.join(process.env.XDG_CONFIG_HOME, 'Hyper')
   : process.platform === 'win32'
-  ? path.join(process.env.APPDATA!, 'Hyper')
-  : path.join(os.homedir(), '.config', 'Hyper');
+    ? path.join(process.env.APPDATA!, 'Hyper')
+    : path.join(os.homedir(), '.config', 'Hyper');
 
 const devConfigFileName = path.join(__dirname, `../hyper.json`);
 
@@ -30,7 +32,7 @@ const fileName =
 function memoize<T extends (...args: any[]) => any>(fn: T): T {
   let hasResult = false;
   let result: any;
-  return ((...args: any[]) => {
+  return ((...args: Parameters<T>) => {
     if (!hasResult) {
       result = fn(...args);
       hasResult = true;

cli/index.ts

@@ -1,16 +1,20 @@
 // This is a CLI tool, using console is OK
 /* eslint no-console: 0 */
-import {spawn, exec, SpawnOptions} from 'child_process';
-import {isAbsolute, resolve} from 'path';
+import {spawn, exec} from 'child_process';
+import type {SpawnOptions} from 'child_process';
 import {existsSync} from 'fs';
-import {version} from '../app/package.json';
-import pify from 'pify';
+import {isAbsolute, resolve} from 'path';
+import {promisify} from 'util';
+
 import args from 'args';
 import chalk from 'chalk';
-import open from 'open';
 import _columnify from 'columnify';
 import got from 'got';
+import open from 'open';
 import ora from 'ora';
+
+import {version} from '../app/package.json';
+
 import * as api from './api';
 
 let commandPromise: Promise<void> | undefined;
@@ -191,8 +195,10 @@ const main = (argv: string[]) => {
     version: false,
     mri: {
       boolean: ['v', 'verbose']
-    }
-  } as any);
+    },
+    mainColor: 'yellow',
+    subColor: 'dim'
+  });
 
   if (commandPromise) {
     return commandPromise;
@@ -232,7 +238,7 @@ const main = (argv: string[]) => {
       const opts = {
         env
       };
-      return pify(exec)(cmd, opts);
+      return promisify(exec)(cmd, opts);
     }
   }
 

electron-builder-linux-ci.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "http://json.schemastore.org/electron-builder",
+  "extends": "electron-builder.json",
+  "afterSign": null,
+  "npmRebuild": false
+}

electron-builder.json

@@ -17,42 +17,25 @@
       ]
     }
   ],
+  "artifactName": "${productName}-${version}-${arch}.${ext}",
   "linux": {
     "category": "TerminalEmulator",
     "target": [
-      {
-        "target": "deb",
-        "arch": [
-          "x64",
-          "arm64"
-        ]
-      },
-      {
-        "target": "AppImage",
-        "arch": [
-          "x64",
-          "arm64"
-        ]
-      },
-      {
-        "target": "rpm",
-        "arch": [
-          "x64",
-          "arm64"
-        ]
-      },
-      {
-        "target": "snap",
-        "arch": [
-          "x64"
-        ]
-      }
+      "deb",
+      "AppImage",
+      "rpm",
+      "snap",
+      "pacman"
     ]
   },
   "win": {
-    "target": [
-      "nsis"
-    ],
+    "target": {
+      "target": "nsis",
+      "arch": [
+        "x64",
+        "arm64"
+      ]
+    },
     "rfc3161TimeStampServer": "http://timestamp.comodoca.com"
   },
   "nsis": {

lib/actions/config.ts

@@ -1,6 +1,6 @@
-import {CONFIG_LOAD, CONFIG_RELOAD} from '../constants/config';
-import {HyperActions} from '../hyper';
-import {configOptions} from '../config';
+import type {configOptions} from '../../typings/config';
+import {CONFIG_LOAD, CONFIG_RELOAD} from '../../typings/constants/config';
+import type {HyperActions} from '../../typings/hyper';
 
 export function loadConfig(config: configOptions): HyperActions {
   return {

lib/actions/header.ts

@@ -1,14 +1,15 @@
-import {CLOSE_TAB, CHANGE_TAB} from '../constants/tabs';
+import {CLOSE_TAB, CHANGE_TAB} from '../../typings/constants/tabs';
 import {
   UI_WINDOW_MAXIMIZE,
   UI_WINDOW_UNMAXIMIZE,
   UI_OPEN_HAMBURGER_MENU,
   UI_WINDOW_MINIMIZE,
   UI_WINDOW_CLOSE
-} from '../constants/ui';
+} from '../../typings/constants/ui';
+import type {HyperDispatch} from '../../typings/hyper';
 import rpc from '../rpc';
+
 import {userExitTermGroup, setActiveGroup} from './term-groups';
-import {HyperDispatch} from '../hyper';
 
 export function closeTab(uid: string) {
   return (dispatch: HyperDispatch) => {
@@ -39,7 +40,7 @@ export function maximize() {
     dispatch({
       type: UI_WINDOW_MAXIMIZE,
       effect() {
-        rpc.emit('maximize', null);
+        rpc.emit('maximize');
       }
     });
   };
@@ -50,7 +51,7 @@ export function unmaximize() {
     dispatch({
       type: UI_WINDOW_UNMAXIMIZE,
       effect() {
-        rpc.emit('unmaximize', null);
+        rpc.emit('unmaximize');
       }
     });
   };
@@ -72,7 +73,7 @@ export function minimize() {
     dispatch({
       type: UI_WINDOW_MINIMIZE,
       effect() {
-        rpc.emit('minimize', null);
+        rpc.emit('minimize');
       }
     });
   };
@@ -83,7 +84,7 @@ export function close() {
     dispatch({
       type: UI_WINDOW_CLOSE,
       effect() {
-        rpc.emit('close', null);
+        rpc.emit('close');
       }
     });
   };

lib/actions/index.ts

@@ -1,6 +1,6 @@
+import {INIT} from '../../typings/constants';
+import type {HyperDispatch} from '../../typings/hyper';
 import rpc from '../rpc';
-import {INIT} from '../constants';
-import {HyperDispatch} from '../hyper';
 
 export default function init() {
   return (dispatch: HyperDispatch) => {

lib/actions/notifications.ts

@@ -1,5 +1,5 @@
-import {NOTIFICATION_MESSAGE, NOTIFICATION_DISMISS} from '../constants/notifications';
-import {HyperActions} from '../hyper';
+import {NOTIFICATION_MESSAGE, NOTIFICATION_DISMISS} from '../../typings/constants/notifications';
+import type {HyperActions} from '../../typings/hyper';
 
 export function dismissNotification(id: string): HyperActions {
   return {

lib/actions/sessions.ts

@@ -1,6 +1,4 @@
-import rpc from '../rpc';
-import {keys} from '../utils/object';
-import findBySession from '../utils/term-groups';
+import type {Session} from '../../typings/common';
 import {
   SESSION_ADD,
   SESSION_RESIZE,
@@ -14,10 +12,13 @@ import {
   SESSION_USER_DATA,
   SESSION_SET_XTERM_TITLE,
   SESSION_SEARCH
-} from '../constants/sessions';
-import {HyperState, session, HyperDispatch, HyperActions} from '../hyper';
+} from '../../typings/constants/sessions';
+import type {HyperState, HyperDispatch, HyperActions} from '../../typings/hyper';
+import rpc from '../rpc';
+import {keys} from '../utils/object';
+import findBySession from '../utils/term-groups';
 
-export function addSession({uid, shell, pid, cols, rows, splitDirection, activeUid}: session) {
+export function addSession({uid, shell, pid, cols = null, rows = null, splitDirection, activeUid, profile}: Session) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     const {sessions} = getState();
     const now = Date.now();
@@ -30,20 +31,20 @@ export function addSession({uid, shell, pid, cols, rows, splitDirection, activeU
       rows,
       splitDirection,
       activeUid: activeUid ? activeUid : sessions.activeUid,
-      now
+      now,
+      profile
     });
   };
 }
 
-export function requestSession() {
+export function requestSession(profile: string | undefined) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     dispatch({
       type: SESSION_REQUEST,
       effect: () => {
         const {ui} = getState();
-        // the cols and rows from preview session maybe not accurate. so remove.
-        const {/*cols, rows,*/ cwd} = ui;
-        rpc.emit('new', {cwd});
+        const {cwd} = ui;
+        rpc.emit('new', {cwd, profile});
       }
     });
   };
@@ -162,7 +163,7 @@ export function closeSearch(uid?: string, keyEvent?: any) {
   };
 }
 
-export function sendSessionData(uid: string | null, data: any, escaped?: boolean | null) {
+export function sendSessionData(uid: string | null, data: string, escaped?: boolean) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     dispatch({
       type: SESSION_USER_DATA,

lib/actions/term-groups.ts

@@ -1,28 +1,32 @@
-import rpc from '../rpc';
+import {SESSION_REQUEST} from '../../typings/constants/sessions';
 import {
   DIRECTION,
   TERM_GROUP_RESIZE,
   TERM_GROUP_REQUEST,
   TERM_GROUP_EXIT,
   TERM_GROUP_EXIT_ACTIVE
-} from '../constants/term-groups';
-import {SESSION_REQUEST} from '../constants/sessions';
-import findBySession from '../utils/term-groups';
+} from '../../typings/constants/term-groups';
+import type {ITermState, ITermGroup, HyperState, HyperDispatch, HyperActions} from '../../typings/hyper';
+import rpc from '../rpc';
 import {getRootGroups} from '../selectors';
+import findBySession from '../utils/term-groups';
+
 import {setActiveSession, ptyExitSession, userExitSession} from './sessions';
-import {ITermState, ITermGroup, HyperState, HyperDispatch, HyperActions} from '../hyper';
 
 function requestSplit(direction: 'VERTICAL' | 'HORIZONTAL') {
-  return (activeUid: string) =>
+  return (_activeUid: string | undefined, _profile: string | undefined) =>
     (dispatch: HyperDispatch, getState: () => HyperState): void => {
       dispatch({
         type: SESSION_REQUEST,
         effect: () => {
           const {ui, sessions} = getState();
+          const activeUid = _activeUid ? _activeUid : sessions.activeUid;
+          const profile = _profile ? _profile : activeUid ? sessions.sessions[activeUid].profile : window.profileName;
           rpc.emit('new', {
             splitDirection: direction,
             cwd: ui.cwd,
-            activeUid: activeUid ? activeUid : sessions.activeUid
+            activeUid,
+            profile
           });
         }
       });
@@ -40,17 +44,20 @@ export function resizeTermGroup(uid: string, sizes: number[]): HyperActions {
   };
 }
 
-export function requestTermGroup(activeUid: string) {
+export function requestTermGroup(_activeUid: string | undefined, _profile: string | undefined) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     dispatch({
       type: TERM_GROUP_REQUEST,
       effect: () => {
         const {ui, sessions} = getState();
         const {cwd} = ui;
+        const activeUid = _activeUid ? _activeUid : sessions.activeUid;
+        const profile = _profile ? _profile : activeUid ? sessions.sessions[activeUid].profile : window.profileName;
         rpc.emit('new', {
           isNewGroup: true,
           cwd,
-          activeUid: activeUid ? activeUid : sessions.activeUid
+          activeUid,
+          profile
         });
       }
     });

lib/actions/ui.ts

@@ -1,10 +1,9 @@
+import {stat} from 'fs';
+import type {Stats} from 'fs';
+
+import type parseUrl from 'parse-url';
 import {php_escapeshellcmd as escapeShellCmd} from 'php-escape-shell';
-import {isExecutable} from '../utils/file';
-import {getRootGroups} from '../selectors';
-import findBySession from '../utils/term-groups';
-import notify from '../utils/notify';
-import rpc from '../rpc';
-import {requestSession, sendSessionData, setActiveSession} from './sessions';
+
 import {
   UI_FONT_SIZE_SET,
   UI_FONT_SIZE_INCR,
@@ -24,14 +23,18 @@ import {
   UI_OPEN_SSH_URL,
   UI_CONTEXTMENU_OPEN,
   UI_COMMAND_EXEC
-} from '../constants/ui';
+} from '../../typings/constants/ui';
+import type {HyperState, HyperDispatch, HyperActions, ITermGroups} from '../../typings/hyper';
+import rpc from '../rpc';
+import {getRootGroups} from '../selectors';
+import {isExecutable} from '../utils/file';
+import notify from '../utils/notify';
+import findBySession from '../utils/term-groups';
 
+import {requestSession, sendSessionData, setActiveSession} from './sessions';
 import {setActiveGroup} from './term-groups';
-import parseUrl from 'parse-url';
-import {HyperState, HyperDispatch, HyperActions, ITermGroups} from '../hyper';
-import {stat, Stats} from 'fs';
 
-export function openContextMenu(uid: string, selection: any) {
+export function openContextMenu(uid: string, selection: string) {
   return (dispatch: HyperDispatch, getState: () => HyperState) => {
     dispatch({
       type: UI_CONTEXTMENU_OPEN,
@@ -269,11 +272,11 @@ export function openFile(path: string) {
             }
             rpc.once('session add', ({uid}) => {
               rpc.once('session data', () => {
-                dispatch(sendSessionData(uid, command, null));
+                dispatch(sendSessionData(uid, command));
               });
             });
           }
-          dispatch(requestSession());
+          dispatch(requestSession(undefined));
         });
       }
     });
@@ -292,12 +295,11 @@ export function leaveFullScreen(): HyperActions {
   };
 }
 
-export function openSSH(url: string) {
+export function openSSH(parsedUrl: ReturnType<typeof parseUrl>) {
   return (dispatch: HyperDispatch) => {
     dispatch({
       type: UI_OPEN_SSH_URL,
       effect() {
-        const parsedUrl = parseUrl(url, true);
         let command = `${parsedUrl.protocol} ${parsedUrl.user ? `${parsedUrl.user}@` : ''}${parsedUrl.resource}`;
 
         if (parsedUrl.port) command += ` -p ${parsedUrl.port}`;
@@ -306,11 +308,11 @@ export function openSSH(url: string) {
 
         rpc.once('session add', ({uid}) => {
           rpc.once('session data', () => {
-            dispatch(sendSessionData(uid, command, null));
+            dispatch(sendSessionData(uid, command));
           });
         });
 
-        dispatch(requestSession());
+        dispatch(requestSession(undefined));
       }
     });
   };

lib/actions/updater.ts

@@ -1,12 +1,12 @@
-import {UPDATE_INSTALL, UPDATE_AVAILABLE} from '../constants/updater';
+import {UPDATE_INSTALL, UPDATE_AVAILABLE} from '../../typings/constants/updater';
+import type {HyperActions} from '../../typings/hyper';
 import rpc from '../rpc';
-import {HyperActions} from '../hyper';
 
 export function installUpdate(): HyperActions {
   return {
     type: UPDATE_INSTALL,
     effect: () => {
-      rpc.emit('quit and install', null);
+      rpc.emit('quit and install');
     }
   };
 }

lib/command-registry.ts

@@ -1,9 +1,7 @@
-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
+import type {HyperDispatch} from '../typings/hyper';
 
-const {getDecoratedKeymaps} = remoteRequire('./plugins') as typeof import('../app/plugins');
+import {closeSearch} from './actions/sessions';
+import {ipcRenderer} from './utils/ipc';
 
 let commands: Record<string, (event: any, dispatch: HyperDispatch) => void> = {
   'editor:search-close': (e, dispatch) => {
@@ -12,8 +10,8 @@ let commands: Record<string, (event: any, dispatch: HyperDispatch) => void> = {
   }
 };
 
-export const getRegisteredKeys = () => {
-  const keymaps = getDecoratedKeymaps();
+export const getRegisteredKeys = async () => {
+  const keymaps = await ipcRenderer.invoke('getDecoratedKeymaps');
 
   return Object.keys(keymaps).reduce((result: Record<string, string>, actionName) => {
     const commandKeys = keymaps[actionName];

lib/components/header.tsx

@@ -1,27 +1,27 @@
-import React from 'react';
+import React, {forwardRef, useState} from 'react';
 
+import type {HeaderProps} from '../../typings/hyper';
 import {decorate, getTabsProps} from '../utils/plugins';
 
 import Tabs_ from './tabs';
-import {HeaderProps} from '../hyper';
 
 const Tabs = decorate(Tabs_, 'Tabs');
 
-export default class Header extends React.PureComponent<HeaderProps> {
-  headerMouseDownWindowX!: number;
-  headerMouseDownWindowY!: number;
+const Header = forwardRef<HTMLElement, HeaderProps>((props, ref) => {
+  const [headerMouseDownWindowX, setHeaderMouseDownWindowX] = useState<number>(0);
+  const [headerMouseDownWindowY, setHeaderMouseDownWindowY] = useState<number>(0);
 
-  onChangeIntent = (active: string) => {
+  const onChangeIntent = (active: string) => {
     // we ignore clicks if they're a byproduct of a drag
     // motion to move the window
-    if (window.screenX !== this.headerMouseDownWindowX || window.screenY !== this.headerMouseDownWindowY) {
+    if (window.screenX !== headerMouseDownWindowX || window.screenY !== headerMouseDownWindowY) {
       return;
     }
 
-    this.props.onChangeTab(active);
+    props.onChangeTab(active);
   };
 
-  handleHeaderMouseDown = () => {
+  const handleHeaderMouseDown = () => {
     // the hack of all hacks, this prevents the term
     // iframe from losing focus, for example, when
     // the user drags the nav around
@@ -30,43 +30,43 @@ export default class Header extends React.PureComponent<HeaderProps> {
 
     // persist start positions of a potential drag motion
     // to differentiate dragging from clicking
-    this.headerMouseDownWindowX = window.screenX;
-    this.headerMouseDownWindowY = window.screenY;
+    setHeaderMouseDownWindowX(window.screenX);
+    setHeaderMouseDownWindowY(window.screenY);
   };
 
-  handleHamburgerMenuClick = (event: React.MouseEvent) => {
+  const handleHamburgerMenuClick = (event: React.MouseEvent) => {
     let {right: x, bottom: y} = event.currentTarget.getBoundingClientRect();
     x -= 15; // to compensate padding
     y -= 12; // ^ same
-    this.props.openHamburgerMenu({x, y});
+    props.openHamburgerMenu({x, y});
   };
 
-  handleMaximizeClick = () => {
-    if (this.props.maximized) {
-      this.props.unmaximize();
+  const handleMaximizeClick = () => {
+    if (props.maximized) {
+      props.unmaximize();
     } else {
-      this.props.maximize();
+      props.maximize();
     }
   };
 
-  handleMinimizeClick = () => {
-    this.props.minimize();
+  const handleMinimizeClick = () => {
+    props.minimize();
   };
 
-  handleCloseClick = () => {
-    this.props.close();
+  const handleCloseClick = () => {
+    props.close();
   };
 
-  getWindowHeaderConfig() {
-    const {showHamburgerMenu, showWindowControls} = this.props;
+  const getWindowHeaderConfig = () => {
+    const {showHamburgerMenu, showWindowControls} = props;
 
     const defaults = {
-      hambMenu: !this.props.isMac, // show by default on windows and linux
-      winCtrls: !this.props.isMac // show by default on Windows and Linux
+      hambMenu: !props.isMac, // show by default on windows and linux
+      winCtrls: !props.isMac // show by default on Windows and Linux
     };
 
     // don't allow the user to change defaults on macOS
-    if (this.props.isMac) {
+    if (props.isMac) {
       return defaults;
     }
 
@@ -74,182 +74,187 @@ export default class Header extends React.PureComponent<HeaderProps> {
       hambMenu: showHamburgerMenu === '' ? defaults.hambMenu : showHamburgerMenu,
       winCtrls: showWindowControls === '' ? defaults.winCtrls : showWindowControls
     };
+  };
+
+  const {isMac} = props;
+  const {borderColor} = props;
+  let title = 'Hyper';
+  if (props.tabs.length === 1 && props.tabs[0].title) {
+    // if there's only one tab we use its title as the window title
+    title = props.tabs[0].title;
   }
+  const {hambMenu, winCtrls} = getWindowHeaderConfig();
+  const left = winCtrls === 'left';
+  const maxButtonHref = props.maximized
+    ? './renderer/assets/icons.svg#restore-window'
+    : './renderer/assets/icons.svg#maximize-window';
 
-  render() {
-    const {isMac} = this.props;
-    const props = getTabsProps(this.props, {
-      tabs: this.props.tabs,
-      borderColor: this.props.borderColor,
-      onClose: this.props.onCloseTab,
-      onChange: this.onChangeIntent,
-      fullScreen: this.props.fullScreen
-    });
-    const {borderColor} = props;
-    let title = 'Hyper';
-    if (props.tabs.length === 1 && props.tabs[0].title) {
-      // if there's only one tab we use its title as the window title
-      title = props.tabs[0].title;
-    }
-    const {hambMenu, winCtrls} = this.getWindowHeaderConfig();
-    const left = winCtrls === 'left';
-    const maxButtonHref = this.props.maximized
-      ? './renderer/assets/icons.svg#restore-window'
-      : './renderer/assets/icons.svg#maximize-window';
-
-    return (
-      <header
-        className={`header_header ${isMac && 'header_headerRounded'}`}
-        onMouseDown={this.handleHeaderMouseDown}
-        onMouseUp={() => window.focusActiveTerm()}
-        onDoubleClick={this.handleMaximizeClick}
-      >
-        {!isMac && (
-          <div
-            className={`header_windowHeader ${props.tabs.length > 1 ? 'header_windowHeaderWithBorder' : ''}`}
-            style={{borderColor}}
-          >
-            {hambMenu && (
-              <svg
-                className={`header_shape ${left ? 'header_hamburgerMenuRight' : 'header_hamburgerMenuLeft'}`}
-                onClick={this.handleHamburgerMenuClick}
-              >
-                <use xlinkHref="./renderer/assets/icons.svg#hamburger-menu" />
-              </svg>
-            )}
-            <span className="header_appTitle">{title}</span>
-            {winCtrls && (
-              <div className={`header_windowControls ${left ? 'header_windowControlsLeft' : ''}`}>
-                <div className={`${left ? 'header_minimizeWindowLeft' : ''}`} onClick={this.handleMinimizeClick}>
-                  <svg className="header_shape">
-                    <use xlinkHref="./renderer/assets/icons.svg#minimize-window" />
-                  </svg>
-                </div>
-                <div className={`${left ? 'header_maximizeWindowLeft' : ''}`} onClick={this.handleMaximizeClick}>
-                  <svg className="header_shape">
-                    <use xlinkHref={maxButtonHref} />
-                  </svg>
-                </div>
-                <div
-                  className={`header_closeWindow ${left ? 'header_closeWindowLeft' : ''}`}
-                  onClick={this.handleCloseClick}
-                >
-                  <svg className="header_shape">
-                    <use xlinkHref="./renderer/assets/icons.svg#close-window" />
-                  </svg>
-                </div>
+  return (
+    <header
+      className={`header_header ${isMac && 'header_headerRounded'}`}
+      onMouseDown={handleHeaderMouseDown}
+      onMouseUp={() => window.focusActiveTerm()}
+      onDoubleClick={handleMaximizeClick}
+      ref={ref}
+    >
+      {!isMac && (
+        <div
+          className={`header_windowHeader ${props.tabs.length > 1 ? 'header_windowHeaderWithBorder' : ''}`}
+          style={{borderColor}}
+        >
+          {hambMenu && (
+            <svg
+              className={`header_shape ${left ? 'header_hamburgerMenuRight' : 'header_hamburgerMenuLeft'}`}
+              onClick={handleHamburgerMenuClick}
+            >
+              <use xlinkHref="./renderer/assets/icons.svg#hamburger-menu" />
+            </svg>
+          )}
+          <span className="header_appTitle">{title}</span>
+          {winCtrls && (
+            <div className={`header_windowControls ${left ? 'header_windowControlsLeft' : ''}`}>
+              <div className={`${left ? 'header_minimizeWindowLeft' : ''}`} onClick={handleMinimizeClick}>
+                <svg className="header_shape">
+                  <use xlinkHref="./renderer/assets/icons.svg#minimize-window" />
+                </svg>
               </div>
-            )}
-          </div>
-        )}
-        {this.props.customChildrenBefore}
-        <Tabs {...props} />
-        {this.props.customChildren}
+              <div className={`${left ? 'header_maximizeWindowLeft' : ''}`} onClick={handleMaximizeClick}>
+                <svg className="header_shape">
+                  <use xlinkHref={maxButtonHref} />
+                </svg>
+              </div>
+              <div className={`header_closeWindow ${left ? 'header_closeWindowLeft' : ''}`} onClick={handleCloseClick}>
+                <svg className="header_shape">
+                  <use xlinkHref="./renderer/assets/icons.svg#close-window" />
+                </svg>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      {props.customChildrenBefore}
+      <Tabs
+        {...getTabsProps(props, {
+          tabs: props.tabs,
+          borderColor: props.borderColor,
+          backgroundColor: props.backgroundColor,
+          onClose: props.onCloseTab,
+          onChange: onChangeIntent,
+          fullScreen: props.fullScreen,
+          defaultProfile: props.defaultProfile,
+          profiles: props.profiles.asMutable({deep: true}),
+          openNewTab: props.openNewTab
+        })}
+      />
+      {props.customChildren}
 
-        <style jsx>{`
-          .header_header {
-            position: fixed;
-            top: 1px;
-            left: 1px;
-            right: 1px;
-            z-index: 100;
-          }
+      <style jsx>{`
+        .header_header {
+          position: fixed;
+          top: 1px;
+          left: 1px;
+          right: 1px;
+          z-index: 100;
+        }
 
-          .header_headerRounded {
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-          }
+        .header_headerRounded {
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
 
-          .header_windowHeader {
-            height: 34px;
-            width: 100%;
-            position: fixed;
-            top: 1px;
-            left: 1px;
-            right: 1px;
-            -webkit-app-region: drag;
-            -webkit-user-select: none;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
+        .header_windowHeader {
+          height: 34px;
+          width: 100%;
+          position: fixed;
+          top: 1px;
+          left: 1px;
+          right: 1px;
+          -webkit-app-region: drag;
+          -webkit-user-select: none;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
 
-          .header_windowHeaderWithBorder {
-            border-color: #ccc;
-            border-bottom-style: solid;
-            border-bottom-width: 1px;
-          }
+        .header_windowHeaderWithBorder {
+          border-color: #ccc;
+          border-bottom-style: solid;
+          border-bottom-width: 1px;
+        }
 
-          .header_appTitle {
-            font-size: 12px;
-          }
+        .header_appTitle {
+          font-size: 12px;
+        }
 
-          .header_shape,
-          .header_shape > svg {
-            width: 40px;
-            height: 34px;
-            padding: 12px 15px 12px 15px;
-            -webkit-app-region: no-drag;
-            color: #fff;
-            opacity: 0.5;
-            shape-rendering: crispEdges;
-          }
+        .header_shape,
+        .header_shape > svg {
+          width: 40px;
+          height: 34px;
+          padding: 12px 15px 12px 15px;
+          -webkit-app-region: no-drag;
+          color: #fff;
+          opacity: 0.5;
+          shape-rendering: crispEdges;
+        }
 
-          .header_shape:hover {
-            opacity: 1;
-          }
+        .header_shape:hover {
+          opacity: 1;
+        }
 
-          .header_shape:active {
-            opacity: 0.3;
-          }
+        .header_shape:active {
+          opacity: 0.3;
+        }
 
-          .header_hamburgerMenuLeft {
-            position: fixed;
-            top: 0;
-            left: 0;
-          }
+        .header_hamburgerMenuLeft {
+          position: fixed;
+          top: 0;
+          left: 0;
+        }
 
-          .header_hamburgerMenuRight {
-            position: fixed;
-            top: 0;
-            right: 0;
-          }
+        .header_hamburgerMenuRight {
+          position: fixed;
+          top: 0;
+          right: 0;
+        }
 
-          .header_windowControls {
-            display: flex;
-            width: 120px;
-            height: 34px;
-            justify-content: space-between;
-            position: fixed;
-            top: 0;
-            right: 0;
-          }
+        .header_windowControls {
+          display: flex;
+          width: 120px;
+          height: 34px;
+          justify-content: space-between;
+          position: fixed;
+          top: 0;
+          right: 0;
+        }
 
-          .header_windowControlsLeft {
-            left: 0px;
-          }
+        .header_windowControlsLeft {
+          left: 0px;
+        }
 
-          .header_closeWindowLeft {
-            order: 1;
-          }
+        .header_closeWindowLeft {
+          order: 1;
+        }
 
-          .header_minimizeWindowLeft {
-            order: 2;
-          }
+        .header_minimizeWindowLeft {
+          order: 2;
+        }
 
-          .header_maximizeWindowLeft {
-            order: 3;
-          }
+        .header_maximizeWindowLeft {
+          order: 3;
+        }
 
-          .header_closeWindow:hover {
-            color: #fe354e;
-          }
+        .header_closeWindow:hover {
+          color: #fe354e;
+        }
 
-          .header_closeWindow:active {
-            color: #fe354e;
-          }
-        `}</style>
-      </header>
-    );
-  }
-}
+        .header_closeWindow:active {
+          color: #fe354e;
+        }
+      `}</style>
+    </header>
+  );
+});
+
+Header.displayName = 'Header';
+
+export default Header;

lib/components/new-tab.tsx

@@ -0,0 +1,149 @@
+import React, {useRef, useState} from 'react';
+
+import {VscChevronDown} from '@react-icons/all-files/vsc/VscChevronDown';
+import useClickAway from 'react-use/lib/useClickAway';
+
+import type {configOptions} from '../../typings/config';
+
+interface Props {
+  defaultProfile: string;
+  profiles: configOptions['profiles'];
+  openNewTab: (name: string) => void;
+  backgroundColor: string;
+  borderColor: string;
+  tabsVisible: boolean;
+}
+const isMac = /Mac/.test(navigator.userAgent);
+
+const DropdownButton = ({defaultProfile, profiles, openNewTab, backgroundColor, borderColor, tabsVisible}: Props) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const ref = useRef(null);
+
+  const toggleDropdown = () => {
+    setDropdownOpen(!dropdownOpen);
+  };
+
+  useClickAway(ref, () => {
+    setDropdownOpen(false);
+  });
+
+  return (
+    <div
+      ref={ref}
+      title="New Tab"
+      className={`new_tab ${tabsVisible ? 'tabs_visible' : 'tabs_hidden'}`}
+      onClick={toggleDropdown}
+      onDoubleClick={(e) => e.stopPropagation()}
+      onBlur={() => setDropdownOpen(false)}
+    >
+      <VscChevronDown style={{verticalAlign: 'middle'}} />
+
+      {dropdownOpen && (
+        <ul
+          key="dropdown"
+          className="profile_dropdown"
+          style={{
+            borderColor,
+            backgroundColor
+          }}
+        >
+          {profiles.map((profile) => (
+            <li
+              key={profile.name}
+              onClick={() => {
+                openNewTab(profile.name);
+                setDropdownOpen(false);
+              }}
+              className={`profile_dropdown_item ${
+                profile.name === defaultProfile && profiles.length > 1 ? 'profile_dropdown_item_default' : ''
+              }`}
+            >
+              {profile.name}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <style jsx>{`
+        .profile_dropdown {
+          border-width: 1px;
+          border-style: solid;
+          border-bottom-width: 0px;
+          border-right-width: 0px;
+          position: absolute;
+          top: 33px;
+          right: 0px;
+          z-index: 1000;
+          padding: 0px;
+          margin: 0px;
+          list-style-type: none;
+          white-space: nowrap;
+          min-width: 120px;
+        }
+
+        .profile_dropdown_item {
+          padding: 0px 20px;
+          height: 34px;
+          line-height: 34px;
+          cursor: pointer;
+          font-size: 12px;
+          color: #fff;
+          background-color: transparent;
+          border-width: 0px;
+          border-style: solid;
+          border-color: transparent;
+          border-bottom-width: 1px;
+          border-bottom-style: solid;
+          border-bottom-color: ${borderColor};
+          text-align: start;
+          text-transform: capitalize;
+        }
+
+        .profile_dropdown_item:hover {
+          background-color: ${borderColor};
+        }
+
+        .profile_dropdown_item_default {
+          font-weight: bold;
+        }
+
+        .new_tab {
+          background: transparent;
+          color: #fff;
+          border-left: 1px;
+          border-bottom: 1px;
+          border-left-style: solid;
+          border-bottom-style: solid;
+          border-left-width: 1px;
+          border-bottom-width: 1px;
+          cursor: pointer;
+          font-size: 12px;
+          height: 34px;
+          line-height: 34px;
+          padding: 0 16px;
+          position: relative;
+          text-align: center;
+          -webkit-user-select: none;
+          ${isMac ? '-webkit-app-region: drag;' : ''}
+          top: '0px';
+        }
+
+        .tabs_visible {
+          border-color: ${borderColor};
+        }
+
+        .tabs_hidden {
+          border-color: transparent;
+          position: absolute;
+          right: 0px;
+        }
+
+        .tabs_hidden:hover {
+          border-color: ${borderColor};
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default DropdownButton;

lib/components/notification.tsx

@@ -1,115 +1,110 @@
-import React from 'react';
-import {NotificationProps, NotificationState} from '../hyper';
+import React, {forwardRef, useEffect, useRef, useState} from 'react';
 
-export default class Notification extends React.PureComponent<NotificationProps, NotificationState> {
-  dismissTimer!: NodeJS.Timeout;
-  constructor(props: NotificationProps) {
-    super(props);
-    this.state = {
-      dismissing: false
-    };
-  }
+import type {NotificationProps} from '../../typings/hyper';
 
-  componentDidMount() {
-    if (this.props.dismissAfter) {
-      this.setDismissTimer();
-    }
-  }
+const Notification = forwardRef<HTMLDivElement, React.PropsWithChildren<NotificationProps>>((props, ref) => {
+  const dismissTimer = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [dismissing, setDismissing] = useState(false);
 
-  componentDidUpdate(prevProps: NotificationProps, prevState: NotificationState) {
+  useEffect(() => {
+    setDismissTimer();
+  }, []);
+
+  useEffect(() => {
     // if we have a timer going and the notification text
     // changed we reset the timer
-    if (this.props.text !== prevProps.text) {
-      if (prevProps.dismissAfter) {
-        this.resetDismissTimer();
-      }
-      if (prevState.dismissing) {
-        this.setState({dismissing: false});
-      }
-    }
-  }
+    resetDismissTimer();
+    setDismissing(false);
+  }, [props.text]);
 
-  handleDismiss = () => {
-    this.setState({dismissing: true});
+  const handleDismiss = () => {
+    setDismissing(true);
   };
 
-  onElement = (el: HTMLDivElement | null) => {
+  const onElement = (el: HTMLDivElement | null) => {
     if (el) {
       el.addEventListener('webkitTransitionEnd', () => {
-        if (this.state.dismissing) {
-          this.props.onDismiss();
+        if (dismissing) {
+          props.onDismiss();
         }
       });
-      const {backgroundColor} = this.props;
+      const {backgroundColor} = props;
       if (backgroundColor) {
         el.style.setProperty('background-color', backgroundColor, 'important');
       }
+
+      if (ref) {
+        if (typeof ref === 'function') ref(el);
+        else ref.current = el;
+      }
     }
   };
 
-  setDismissTimer() {
-    this.dismissTimer = setTimeout(() => {
-      this.handleDismiss();
-    }, this.props.dismissAfter);
-  }
+  const setDismissTimer = () => {
+    if (typeof props.dismissAfter === 'number') {
+      dismissTimer.current = setTimeout(() => {
+        handleDismiss();
+      }, props.dismissAfter);
+    }
+  };
 
-  resetDismissTimer() {
-    clearTimeout(this.dismissTimer);
-    this.setDismissTimer();
-  }
+  const resetDismissTimer = () => {
+    clearTimeout(dismissTimer.current);
+    setDismissTimer();
+  };
 
-  componentWillUnmount() {
-    clearTimeout(this.dismissTimer);
-  }
+  useEffect(() => {
+    return () => {
+      clearTimeout(dismissTimer.current);
+    };
+  }, []);
 
-  render() {
-    const {backgroundColor, color} = this.props;
-    const opacity = this.state.dismissing ? 0 : 1;
-    return (
-      <div ref={this.onElement} style={{opacity, backgroundColor, color}} className="notification_indicator">
-        {this.props.customChildrenBefore}
-        {this.props.children || this.props.text}
-        {this.props.userDismissable ? (
-          <a
-            className="notification_dismissLink"
-            onClick={this.handleDismiss}
-            style={{color: this.props.userDismissColor}}
-          >
-            [x]
-          </a>
-        ) : null}
-        {this.props.customChildren}
+  const {backgroundColor, color} = props;
+  const opacity = dismissing ? 0 : 1;
+  return (
+    <div ref={onElement} style={{opacity, backgroundColor, color}} className="notification_indicator">
+      {props.customChildrenBefore}
+      {props.children || props.text}
+      {props.userDismissable ? (
+        <a className="notification_dismissLink" onClick={handleDismiss} style={{color: props.userDismissColor}}>
+          [x]
+        </a>
+      ) : null}
+      {props.customChildren}
 
-        <style jsx>{`
-          .notification_indicator {
-            display: inline-block;
-            cursor: default;
-            -webkit-user-select: none;
-            background: rgba(255, 255, 255, 0.2);
-            padding: 8px 14px 9px;
-            margin-left: 10px;
-            transition: 150ms opacity ease;
-            color: #fff;
-            font-size: 12px;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-              'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-          }
+      <style jsx>{`
+        .notification_indicator {
+          display: inline-block;
+          cursor: default;
+          -webkit-user-select: none;
+          background: rgba(255, 255, 255, 0.2);
+          padding: 8px 14px 9px;
+          margin-left: 10px;
+          transition: 150ms opacity ease;
+          color: #fff;
+          font-size: 12px;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+            'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        }
 
-          .notification_dismissLink {
-            position: relative;
-            left: 4px;
-            cursor: pointer;
-            font-weight: 600;
-            color: currentColor;
-            transition: font-weight 0.1s ease-in-out;
-          }
+        .notification_dismissLink {
+          position: relative;
+          left: 4px;
+          cursor: pointer;
+          font-weight: 600;
+          color: currentColor;
+          transition: font-weight 0.1s ease-in-out;
+        }
 
-          .notification_dismissLink:hover,
-          .notification_dismissLink:focus {
-            font-weight: 900;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
+        .notification_dismissLink:hover,
+        .notification_dismissLink:focus {
+          font-weight: 900;
+        }
+      `}</style>
+    </div>
+  );
+});
+
+Notification.displayName = 'Notification';
+
+export default Notification;

lib/components/notifications.tsx

@@ -1,132 +1,132 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 
+import type {NotificationsProps} from '../../typings/hyper';
 import {decorate} from '../utils/plugins';
 
 import Notification_ from './notification';
-import {NotificationsProps} from '../hyper';
 
 const Notification = decorate(Notification_, 'Notification');
 
-export default class Notifications extends React.PureComponent<NotificationsProps> {
-  render() {
-    return (
-      <div className="notifications_view">
-        {this.props.customChildrenBefore}
-        {this.props.fontShowing && (
-          <Notification
-            key="font"
-            backgroundColor="rgba(255, 255, 255, .2)"
-            text={`${this.props.fontSize}px`}
-            userDismissable={false}
-            onDismiss={this.props.onDismissFont}
-            dismissAfter={1000}
-          />
-        )}
+const Notifications = forwardRef<HTMLDivElement, NotificationsProps>((props, ref) => {
+  return (
+    <div className="notifications_view" ref={ref}>
+      {props.customChildrenBefore}
+      {props.fontShowing && (
+        <Notification
+          key="font"
+          backgroundColor="rgba(255, 255, 255, .2)"
+          text={`${props.fontSize}px`}
+          userDismissable={false}
+          onDismiss={props.onDismissFont}
+          dismissAfter={1000}
+        />
+      )}
 
-        {this.props.resizeShowing && (
-          <Notification
-            key="resize"
-            backgroundColor="rgba(255, 255, 255, .2)"
-            text={`${this.props.cols}x${this.props.rows}`}
-            userDismissable={false}
-            onDismiss={this.props.onDismissResize}
-            dismissAfter={1000}
-          />
-        )}
+      {props.resizeShowing && (
+        <Notification
+          key="resize"
+          backgroundColor="rgba(255, 255, 255, .2)"
+          text={`${props.cols}x${props.rows}`}
+          userDismissable={false}
+          onDismiss={props.onDismissResize}
+          dismissAfter={1000}
+        />
+      )}
 
-        {this.props.messageShowing && (
-          <Notification
-            key="message"
-            backgroundColor="#FE354E"
-            color="#fff"
-            text={this.props.messageText}
-            onDismiss={this.props.onDismissMessage}
-            userDismissable={this.props.messageDismissable}
-          >
-            {this.props.messageURL
-              ? [
-                  this.props.messageText,
-                  ' (',
-                  <a
-                    key="link"
-                    style={{color: '#fff'}}
-                    onClick={(ev) => {
-                      void window.require('electron').shell.openExternal(ev.currentTarget.href);
-                      ev.preventDefault();
-                    }}
-                    href={this.props.messageURL}
-                  >
-                    more
-                  </a>,
-                  ') '
-                ]
-              : null}
-          </Notification>
-        )}
-
-        {this.props.updateShowing && (
-          <Notification
-            key="update"
-            backgroundColor="#18E179"
-            color="#000"
-            text={`Version ${this.props.updateVersion} ready`}
-            onDismiss={this.props.onDismissUpdate}
-            userDismissable
-          >
-            Version <b>{this.props.updateVersion}</b> ready.
-            {this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}`} (
-            <a
-              style={{color: '#000'}}
-              onClick={(ev) => {
-                void window.require('electron').shell.openExternal(ev.currentTarget.href);
-                ev.preventDefault();
-              }}
-              href={`https://github.com/vercel/hyper/releases/tag/${this.props.updateVersion}`}
-            >
-              notes
-            </a>
-            ).{' '}
-            {this.props.updateCanInstall ? (
+      {props.messageShowing && (
+        <Notification
+          key="message"
+          backgroundColor="#FE354E"
+          color="#fff"
+          text={props.messageText}
+          onDismiss={props.onDismissMessage}
+          userDismissable={props.messageDismissable}
+        >
+          {props.messageURL ? (
+            <>
+              {props.messageText} (
               <a
-                style={{
-                  cursor: 'pointer',
-                  textDecoration: 'underline',
-                  fontWeight: 'bold'
-                }}
-                onClick={this.props.onUpdateInstall}
-              >
-                Restart
-              </a>
-            ) : (
-              <a
-                style={{
-                  color: '#000',
-                  cursor: 'pointer',
-                  textDecoration: 'underline',
-                  fontWeight: 'bold'
-                }}
+                style={{color: '#fff'}}
                 onClick={(ev) => {
                   void window.require('electron').shell.openExternal(ev.currentTarget.href);
                   ev.preventDefault();
                 }}
-                href={this.props.updateReleaseUrl!}
+                href={props.messageURL}
               >
-                Download
+                more
               </a>
-            )}
-            .{' '}
-          </Notification>
-        )}
-        {this.props.customChildren}
+              )
+            </>
+          ) : null}
+        </Notification>
+      )}
 
-        <style jsx>{`
-          .notifications_view {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
+      {props.updateShowing && (
+        <Notification
+          key="update"
+          backgroundColor="#18E179"
+          color="#000"
+          text={`Version ${props.updateVersion} ready`}
+          onDismiss={props.onDismissUpdate}
+          userDismissable
+        >
+          Version <b>{props.updateVersion}</b> ready.
+          {props.updateNote && ` ${props.updateNote.trim().replace(/\.$/, '')}`} (
+          <a
+            style={{color: '#000'}}
+            onClick={(ev) => {
+              void window.require('electron').shell.openExternal(ev.currentTarget.href);
+              ev.preventDefault();
+            }}
+            href={`https://github.com/vercel/hyper/releases/tag/${props.updateVersion}`}
+          >
+            notes
+          </a>
+          ).{' '}
+          {props.updateCanInstall ? (
+            <a
+              style={{
+                cursor: 'pointer',
+                textDecoration: 'underline',
+                fontWeight: 'bold'
+              }}
+              onClick={props.onUpdateInstall}
+            >
+              Restart
+            </a>
+          ) : (
+            <a
+              style={{
+                color: '#000',
+                cursor: 'pointer',
+                textDecoration: 'underline',
+                fontWeight: 'bold'
+              }}
+              onClick={(ev) => {
+                void window.require('electron').shell.openExternal(ev.currentTarget.href);
+                ev.preventDefault();
+              }}
+              href={props.updateReleaseUrl!}
+            >
+              Download
+            </a>
+          )}
+          .{' '}
+        </Notification>
+      )}
+      {props.customChildren}
+
+      <style jsx>{`
+        .notifications_view {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+        }
+      `}</style>
+    </div>
+  );
+});
+
+Notifications.displayName = 'Notifications';
+
+export default Notifications;

lib/components/searchBox.tsx

@@ -1,13 +1,15 @@
-import React, {useCallback} from 'react';
-import {SearchBoxProps} from '../hyper';
-import {VscArrowUp} from '@react-icons/all-files/vsc/VscArrowUp';
+import React, {useCallback, useRef, useEffect, forwardRef} from 'react';
+
 import {VscArrowDown} from '@react-icons/all-files/vsc/VscArrowDown';
-import {VscClose} from '@react-icons/all-files/vsc/VscClose';
+import {VscArrowUp} from '@react-icons/all-files/vsc/VscArrowUp';
 import {VscCaseSensitive} from '@react-icons/all-files/vsc/VscCaseSensitive';
+import {VscClose} from '@react-icons/all-files/vsc/VscClose';
 import {VscRegex} from '@react-icons/all-files/vsc/VscRegex';
 import {VscWholeWord} from '@react-icons/all-files/vsc/VscWholeWord';
 import clsx from 'clsx';
 
+import type {SearchBoxProps} from '../../typings/hyper';
+
 type SearchButtonColors = {
   foregroundColor: string;
   selectionColor: string;
@@ -82,179 +84,154 @@ const SearchButton = ({
   );
 };
 
-class SearchBox extends React.PureComponent<SearchBoxProps> {
-  searchTerm: string;
-  input: HTMLInputElement | null = null;
-  searchButtonColors: SearchButtonColors;
+const SearchBox = forwardRef<HTMLDivElement, SearchBoxProps>((props, ref) => {
+  const {
+    caseSensitive,
+    wholeWord,
+    regex,
+    results,
+    toggleCaseSensitive,
+    toggleWholeWord,
+    toggleRegex,
+    next,
+    prev,
+    close,
+    backgroundColor,
+    foregroundColor,
+    borderColor,
+    selectionColor,
+    font
+  } = props;
 
-  constructor(props: SearchBoxProps) {
-    super(props);
-    this.searchTerm = '';
-    this.searchButtonColors = {
-      backgroundColor: this.props.borderColor,
-      selectionColor: this.props.selectionColor,
-      foregroundColor: this.props.foregroundColor
-    };
-  }
+  const searchTermRef = useRef<string>('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
-  handleChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    this.searchTerm = event.currentTarget.value;
-    if (event.shiftKey && event.key === 'Enter') {
-      this.props.prev(this.searchTerm);
-    } else if (event.key === 'Enter') {
-      this.props.next(this.searchTerm);
-    }
+  const handleChange = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      searchTermRef.current = event.currentTarget.value;
+      if (event.shiftKey && event.key === 'Enter') {
+        prev(searchTermRef.current);
+      } else if (event.key === 'Enter') {
+        next(searchTermRef.current);
+      }
+    },
+    [prev, next]
+  );
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [inputRef.current]);
+
+  const searchButtonColors: SearchButtonColors = {
+    backgroundColor: borderColor,
+    selectionColor,
+    foregroundColor
   };
 
-  componentDidMount(): void {
-    this.input?.focus();
-  }
+  return (
+    <div className="flex-row search-container" ref={ref}>
+      <div className="flex-row search-box">
+        <input className="search-input" type="text" onKeyDown={handleChange} ref={inputRef} placeholder="Search" />
 
-  render() {
-    const {
-      caseSensitive,
-      wholeWord,
-      regex,
-      results,
-      toggleCaseSensitive,
-      toggleWholeWord,
-      toggleRegex,
-      next,
-      prev,
-      close,
-      backgroundColor,
-      foregroundColor,
-      borderColor,
-      selectionColor,
-      font
-    } = this.props;
+        <SearchButton onClick={toggleCaseSensitive} active={caseSensitive} title="Match Case" {...searchButtonColors}>
+          <VscCaseSensitive size="14px" />
+        </SearchButton>
 
-    return (
-      <div className="flex-row search-container">
-        <div className="flex-row search-box">
-          <input
-            className="search-input"
-            type="text"
-            onKeyDown={this.handleChange}
-            ref={(input) => {
-              this.input = input;
-            }}
-            placeholder="Search"
-          ></input>
+        <SearchButton onClick={toggleWholeWord} active={wholeWord} title="Match Whole Word" {...searchButtonColors}>
+          <VscWholeWord size="14px" />
+        </SearchButton>
 
-          <SearchButton
-            onClick={toggleCaseSensitive}
-            active={caseSensitive}
-            title="Match Case"
-            {...this.searchButtonColors}
-          >
-            <VscCaseSensitive size="14px" />
-          </SearchButton>
+        <SearchButton onClick={toggleRegex} active={regex} title="Use Regular Expression" {...searchButtonColors}>
+          <VscRegex size="14px" />
+        </SearchButton>
+      </div>
 
-          <SearchButton
-            onClick={toggleWholeWord}
-            active={wholeWord}
-            title="Match Whole Word"
-            {...this.searchButtonColors}
-          >
-            <VscWholeWord size="14px" />
-          </SearchButton>
-
-          <SearchButton
-            onClick={toggleRegex}
-            active={regex}
-            title="Use Regular Expression"
-            {...this.searchButtonColors}
-          >
-            <VscRegex size="14px" />
-          </SearchButton>
-        </div>
-
-        <span style={{minWidth: '60px', marginLeft: '4px'}}>
-          {results === undefined
-            ? ''
-            : results.resultCount === 0
+      <span style={{minWidth: '60px', marginLeft: '4px'}}>
+        {results === undefined
+          ? ''
+          : results.resultCount === 0
             ? 'No results'
             : `${results.resultIndex + 1} of ${results.resultCount}`}
-        </span>
+      </span>
 
-        <div className="flex-row">
-          <SearchButton
-            onClick={() => prev(this.searchTerm)}
-            active={false}
-            title="Previous Match"
-            {...this.searchButtonColors}
-          >
-            <VscArrowUp size="14px" />
-          </SearchButton>
+      <div className="flex-row">
+        <SearchButton
+          onClick={() => prev(searchTermRef.current)}
+          active={false}
+          title="Previous Match"
+          {...searchButtonColors}
+        >
+          <VscArrowUp size="14px" />
+        </SearchButton>
 
-          <SearchButton
-            onClick={() => next(this.searchTerm)}
-            active={false}
-            title="Next Match"
-            {...this.searchButtonColors}
-          >
-            <VscArrowDown size="14px" />
-          </SearchButton>
+        <SearchButton
+          onClick={() => next(searchTermRef.current)}
+          active={false}
+          title="Next Match"
+          {...searchButtonColors}
+        >
+          <VscArrowDown size="14px" />
+        </SearchButton>
 
-          <SearchButton onClick={() => close()} active={false} title="Close" {...this.searchButtonColors}>
-            <VscClose size="14px" />
-          </SearchButton>
-        </div>
-
-        <style jsx>
-          {`
-            .search-container {
-              background-color: ${backgroundColor};
-              border: 1px solid ${borderColor};
-              border-radius: 2px;
-              position: absolute;
-              right: 13px;
-              top: 4px;
-              z-index: 10;
-              padding: 4px;
-              font-family: ${font};
-              font-size: 12px;
-            }
-
-            .search-input {
-              outline: none;
-              background-color: transparent;
-              border: none;
-              color: ${foregroundColor};
-              align-self: stretch;
-              width: 100px;
-            }
-
-            .flex-row {
-              display: flex;
-              flex-direction: row;
-              justify-content: space-between;
-              align-items: center;
-              gap: 4px;
-            }
-
-            .search-box {
-              border: none;
-              border-radius: 2px;
-              outline: ${borderColor} solid 1px;
-              background-color: ${backgroundColor};
-              color: ${foregroundColor};
-              padding: 0px 4px;
-            }
-
-            .search-input::placeholder {
-              color: ${foregroundColor};
-            }
-
-            .search-box:focus-within {
-              outline: ${selectionColor} solid 2px;
-            }
-          `}
-        </style>
+        <SearchButton onClick={close} active={false} title="Close" {...searchButtonColors}>
+          <VscClose size="14px" />
+        </SearchButton>
       </div>
-    );
-  }
-}
+
+      <style jsx>
+        {`
+          .search-container {
+            background-color: ${backgroundColor};
+            border: 1px solid ${borderColor};
+            border-radius: 2px;
+            position: absolute;
+            right: 13px;
+            top: 4px;
+            z-index: 10;
+            padding: 4px;
+            font-family: ${font};
+            font-size: 12px;
+          }
+
+          .search-input {
+            outline: none;
+            background-color: transparent;
+            border: none;
+            color: ${foregroundColor};
+            align-self: stretch;
+            width: 100px;
+          }
+
+          .flex-row {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            gap: 4px;
+          }
+
+          .search-box {
+            border: none;
+            border-radius: 2px;
+            outline: ${borderColor} solid 1px;
+            background-color: ${backgroundColor};
+            color: ${foregroundColor};
+            padding: 0px 4px;
+          }
+
+          .search-input::placeholder {
+            color: ${foregroundColor};
+          }
+
+          .search-box:focus-within {
+            outline: ${selectionColor} solid 2px;
+          }
+        `}
+      </style>
+    </div>
+  );
+});
+
+SearchBox.displayName = 'SearchBox';
 
 export default SearchBox;

lib/components/split-pane.tsx

@@ -1,219 +1,191 @@
-import React from 'react';
-import _ from 'lodash';
-import {SplitPaneProps} from '../hyper';
+import React, {useState, useEffect, useRef, forwardRef} from 'react';
 
-export default class SplitPane extends React.PureComponent<SplitPaneProps, {dragging: boolean}> {
-  dragPanePosition!: number;
-  dragTarget!: Element;
-  panes!: Element[];
-  paneIndex!: number;
-  d1!: 'height' | 'width';
-  d2!: 'top' | 'left';
-  d3!: 'clientX' | 'clientY';
-  panesSize!: number;
-  dragging!: boolean;
-  constructor(props: SplitPaneProps) {
-    super(props);
-    this.state = {dragging: false};
-  }
+import sum from 'lodash/sum';
 
-  componentDidUpdate(prevProps: SplitPaneProps) {
-    if (this.state.dragging && prevProps.sizes !== this.props.sizes) {
-      // recompute positions for ongoing dragging
-      this.dragPanePosition = this.dragTarget.getBoundingClientRect()[this.d2];
-    }
-  }
+import type {SplitPaneProps} from '../../typings/hyper';
 
-  setupPanes(ev: any) {
-    this.panes = Array.from(ev.target.parentNode.childNodes);
-    this.paneIndex = this.panes.indexOf(ev.target);
-    this.paneIndex -= Math.ceil(this.paneIndex / 2);
-  }
+const SplitPane = forwardRef<HTMLDivElement, SplitPaneProps>((props, ref) => {
+  const dragPanePosition = useRef<number>(0);
+  const dragTarget = useRef<HTMLDivElement | null>(null);
+  const paneIndex = useRef<number>(0);
+  const d1 = props.direction === 'horizontal' ? 'height' : 'width';
+  const d2 = props.direction === 'horizontal' ? 'top' : 'left';
+  const d3 = props.direction === 'horizontal' ? 'clientY' : 'clientX';
+  const panesSize = useRef<number | null>(null);
+  const [dragging, setDragging] = useState(false);
 
-  handleAutoResize = (ev: React.MouseEvent) => {
+  const handleAutoResize = (ev: React.MouseEvent<HTMLDivElement>, index: number) => {
     ev.preventDefault();
 
-    this.setupPanes(ev);
+    paneIndex.current = index;
 
-    const sizes_ = this.getSizes();
-    sizes_[this.paneIndex] = 0;
-    sizes_[this.paneIndex + 1] = 0;
+    const sizes_ = getSizes();
+    sizes_[paneIndex.current] = 0;
+    sizes_[paneIndex.current + 1] = 0;
 
-    const availableWidth = 1 - _.sum(sizes_);
-    sizes_[this.paneIndex] = availableWidth / 2;
-    sizes_[this.paneIndex + 1] = availableWidth / 2;
+    const availableWidth = 1 - sum(sizes_);
+    sizes_[paneIndex.current] = availableWidth / 2;
+    sizes_[paneIndex.current + 1] = availableWidth / 2;
 
-    this.props.onResize(sizes_);
+    props.onResize(sizes_);
   };
 
-  handleDragStart = (ev: any) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  const handleDragStart = (ev: React.MouseEvent<HTMLDivElement>, index: number) => {
     ev.preventDefault();
-    this.setState({dragging: true});
-    window.addEventListener('mousemove', this.onDrag);
-    window.addEventListener('mouseup', this.onDragEnd);
+    setDragging(true);
+    window.addEventListener('mousemove', onDrag);
+    window.addEventListener('mouseup', onDragEnd);
 
-    // dimensions to consider
-    if (this.props.direction === 'horizontal') {
-      this.d1 = 'height';
-      this.d2 = 'top';
-      this.d3 = 'clientY';
-    } else {
-      this.d1 = 'width';
-      this.d2 = 'left';
-      this.d3 = 'clientX';
-    }
-
-    this.dragTarget = ev.target;
-    this.dragPanePosition = this.dragTarget.getBoundingClientRect()[this.d2];
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    this.panesSize = ev.target.parentNode.getBoundingClientRect()[this.d1];
-    this.setupPanes(ev);
+    const target = ev.target as HTMLDivElement;
+    dragTarget.current = target;
+    dragPanePosition.current = dragTarget.current.getBoundingClientRect()[d2];
+    panesSize.current = target.parentElement!.getBoundingClientRect()[d1];
+    paneIndex.current = index;
   };
 
-  getSizes() {
-    const {sizes} = this.props;
+  const getSizes = () => {
+    const {sizes} = props;
     let sizes_: number[];
 
     if (sizes) {
       sizes_ = [...sizes.asMutable()];
     } else {
-      const total = (this.props.children as React.ReactNodeArray).length;
+      const total = props.children.length;
       const count = new Array<number>(total).fill(1 / total);
 
       sizes_ = count;
     }
     return sizes_;
-  }
+  };
 
-  onDrag = (ev: MouseEvent) => {
-    const sizes_ = this.getSizes();
+  const onDrag = (ev: MouseEvent) => {
+    const sizes_ = getSizes();
 
-    const i = this.paneIndex;
-    const pos = ev[this.d3];
-    const d = Math.abs(this.dragPanePosition - pos) / this.panesSize;
-    if (pos > this.dragPanePosition) {
+    const i = paneIndex.current;
+    const pos = ev[d3];
+    const d = Math.abs(dragPanePosition.current - pos) / panesSize.current!;
+    if (pos > dragPanePosition.current) {
       sizes_[i] += d;
       sizes_[i + 1] -= d;
     } else {
       sizes_[i] -= d;
       sizes_[i + 1] += d;
     }
-    this.props.onResize(sizes_);
+    props.onResize(sizes_);
   };
 
-  onDragEnd = () => {
-    if (this.state.dragging) {
-      window.removeEventListener('mousemove', this.onDrag);
-      window.removeEventListener('mouseup', this.onDragEnd);
-      this.setState({dragging: false});
-    }
+  const onDragEnd = () => {
+    window.removeEventListener('mousemove', onDrag);
+    window.removeEventListener('mouseup', onDragEnd);
+    setDragging(false);
   };
 
-  render() {
-    const children = this.props.children as React.ReactNodeArray;
-    const {direction, borderColor} = this.props;
-    const sizeProperty = direction === 'horizontal' ? 'height' : 'width';
-    // workaround for the fact that if we don't specify
-    // sizes, sometimes flex fails to calculate the
-    // right height for the horizontal panes
-    const sizes = this.props.sizes || new Array<number>(children.length).fill(1 / children.length);
-    return (
-      <div className={`splitpane_panes splitpane_panes_${direction}`}>
-        {React.Children.map(children, (child, i) => {
-          const style = {
-            // flexBasis doesn't work for the first horizontal pane, height need to be specified
-            [sizeProperty]: `${sizes[i] * 100}%`,
-            flexBasis: `${sizes[i] * 100}%`,
-            flexGrow: 0
-          };
-          return [
-            <div key="pane" className="splitpane_pane" style={style}>
+  useEffect(() => {
+    return () => {
+      onDragEnd();
+    };
+  }, []);
+
+  const {children, direction, borderColor} = props;
+  const sizeProperty = direction === 'horizontal' ? 'height' : 'width';
+  // workaround for the fact that if we don't specify
+  // sizes, sometimes flex fails to calculate the
+  // right height for the horizontal panes
+  const sizes = props.sizes || new Array<number>(children.length).fill(1 / children.length);
+  return (
+    <div className={`splitpane_panes splitpane_panes_${direction}`} ref={ref}>
+      {children.map((child, i) => {
+        const style = {
+          // flexBasis doesn't work for the first horizontal pane, height need to be specified
+          [sizeProperty]: `${sizes[i] * 100}%`,
+          flexBasis: `${sizes[i] * 100}%`,
+          flexGrow: 0
+        };
+
+        return (
+          <React.Fragment key={i}>
+            <div className="splitpane_pane" style={style}>
               {child}
-            </div>,
-            i < children.length - 1 ? (
+            </div>
+            {i < children.length - 1 ? (
               <div
-                key="divider"
-                onMouseDown={this.handleDragStart}
-                onDoubleClick={this.handleAutoResize}
+                onMouseDown={(e) => handleDragStart(e, i)}
+                onDoubleClick={(e) => handleAutoResize(e, i)}
                 style={{backgroundColor: borderColor}}
                 className={`splitpane_divider splitpane_divider_${direction}`}
               />
-            ) : null
-          ];
-        })}
-        <div style={{display: this.state.dragging ? 'block' : 'none'}} className="splitpane_shim" />
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+      <div style={{display: dragging ? 'block' : 'none'}} className="splitpane_shim" />
 
-        <style jsx>{`
-          .splitpane_panes {
-            display: flex;
-            flex: 1;
-            outline: none;
-            position: relative;
-            width: 100%;
-            height: 100%;
-          }
+      <style jsx>{`
+        .splitpane_panes {
+          display: flex;
+          flex: 1;
+          outline: none;
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
 
-          .splitpane_panes_vertical {
-            flex-direction: row;
-          }
+        .splitpane_panes_vertical {
+          flex-direction: row;
+        }
 
-          .splitpane_panes_horizontal {
-            flex-direction: column;
-          }
+        .splitpane_panes_horizontal {
+          flex-direction: column;
+        }
 
-          .splitpane_pane {
-            flex: 1;
-            outline: none;
-            position: relative;
-          }
+        .splitpane_pane {
+          flex: 1;
+          outline: none;
+          position: relative;
+        }
 
-          .splitpane_divider {
-            box-sizing: border-box;
-            z-index: 1;
-            background-clip: padding-box;
-            flex-shrink: 0;
-          }
+        .splitpane_divider {
+          box-sizing: border-box;
+          z-index: 1;
+          background-clip: padding-box;
+          flex-shrink: 0;
+        }
 
-          .splitpane_divider_vertical {
-            border-left: 5px solid rgba(255, 255, 255, 0);
-            border-right: 5px solid rgba(255, 255, 255, 0);
-            width: 11px;
-            margin: 0 -5px;
-            cursor: col-resize;
-          }
+        .splitpane_divider_vertical {
+          border-left: 5px solid rgba(255, 255, 255, 0);
+          border-right: 5px solid rgba(255, 255, 255, 0);
+          width: 11px;
+          margin: 0 -5px;
+          cursor: col-resize;
+        }
 
-          .splitpane_divider_horizontal {
-            height: 11px;
-            margin: -5px 0;
-            border-top: 5px solid rgba(255, 255, 255, 0);
-            border-bottom: 5px solid rgba(255, 255, 255, 0);
-            cursor: row-resize;
-            width: 100%;
-          }
+        .splitpane_divider_horizontal {
+          height: 11px;
+          margin: -5px 0;
+          border-top: 5px solid rgba(255, 255, 255, 0);
+          border-bottom: 5px solid rgba(255, 255, 255, 0);
+          cursor: row-resize;
+          width: 100%;
+        }
 
-          /*
-            this shim is used to make sure mousemove events
-            trigger in all the draggable area of the screen
-            this is not the case due to hterm's <iframe>
-          */
-          .splitpane_shim {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: transparent;
-          }
-        `}</style>
-      </div>
-    );
-  }
+        /*
+          this shim is used to make sure mousemove events
+          trigger in all the draggable area of the screen
+          this is not the case due to hterm's <iframe>
+        */
+        .splitpane_shim {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: transparent;
+        }
+      `}</style>
+    </div>
+  );
+});
 
-  componentWillUnmount() {
-    // ensure drag end
-    if (this.dragging) {
-      this.onDragEnd();
-    }
-  }
-}
+SplitPane.displayName = 'SplitPane';
+
+export default SplitPane;

lib/components/style-sheet.tsx

@@ -1,24 +1,27 @@
-import React from 'react';
-import {StyleSheetProps} from '../hyper';
+import React, {forwardRef} from 'react';
 
-export default class StyleSheet extends React.PureComponent<StyleSheetProps> {
-  render() {
-    const {borderColor} = this.props;
+import type {StyleSheetProps} from '../../typings/hyper';
 
-    return (
-      <style jsx global>{`
-        ::-webkit-scrollbar {
-          width: 5px;
-        }
-        ::-webkit-scrollbar-thumb {
-          -webkit-border-radius: 10px;
-          border-radius: 10px;
-          background: ${borderColor};
-        }
-        ::-webkit-scrollbar-thumb:window-inactive {
-          background: ${borderColor};
-        }
-      `}</style>
-    );
-  }
-}
+const StyleSheet = forwardRef<HTMLStyleElement, StyleSheetProps>((props, ref) => {
+  const {borderColor} = props;
+
+  return (
+    <style jsx global ref={ref}>{`
+      ::-webkit-scrollbar {
+        width: 5px;
+      }
+      ::-webkit-scrollbar-thumb {
+        -webkit-border-radius: 10px;
+        border-radius: 10px;
+        background: ${borderColor};
+      }
+      ::-webkit-scrollbar-thumb:window-inactive {
+        background: ${borderColor};
+      }
+    `}</style>
+  );
+});
+
+StyleSheet.displayName = 'StyleSheet';
+
+export default StyleSheet;

lib/components/tab.tsx

@@ -1,164 +1,168 @@
-import React from 'react';
-import {TabProps} from '../hyper';
+import React, {forwardRef} from 'react';
 
-export default class Tab extends React.PureComponent<TabProps> {
-  constructor(props: TabProps) {
-    super(props);
-  }
+import type {TabProps} from '../../typings/hyper';
 
-  handleClick = (event: React.MouseEvent) => {
+const Tab = forwardRef<HTMLLIElement, TabProps>((props, ref) => {
+  const handleClick = (event: React.MouseEvent) => {
     const isLeftClick = event.nativeEvent.which === 1;
 
-    if (isLeftClick && !this.props.isActive) {
-      this.props.onSelect();
+    if (isLeftClick && !props.isActive) {
+      props.onSelect();
     }
   };
 
-  handleMouseUp = (event: React.MouseEvent) => {
+  const handleMouseUp = (event: React.MouseEvent) => {
     const isMiddleClick = event.nativeEvent.which === 2;
 
     if (isMiddleClick) {
-      this.props.onClose();
+      props.onClose();
     }
   };
 
-  render() {
-    const {isActive, isFirst, isLast, borderColor, hasActivity} = this.props;
+  const {isActive, isFirst, isLast, borderColor, hasActivity} = props;
 
-    return (
-      <React.Fragment>
-        <li
-          onClick={this.props.onClick}
-          style={{borderColor}}
-          className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${
-            isFirst && isActive ? 'tab_firstActive' : ''
-          } ${hasActivity ? 'tab_hasActivity' : ''}`}
+  return (
+    <>
+      <li
+        onClick={props.onClick}
+        style={{borderColor}}
+        className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${
+          isFirst && isActive ? 'tab_firstActive' : ''
+        } ${hasActivity ? 'tab_hasActivity' : ''}`}
+        ref={ref}
+      >
+        {props.customChildrenBefore}
+        <span
+          className={`tab_text ${isLast ? 'tab_textLast' : ''} ${isActive ? 'tab_textActive' : ''}`}
+          onClick={handleClick}
+          onMouseUp={handleMouseUp}
         >
-          {this.props.customChildrenBefore}
-          <span
-            className={`tab_text ${isLast ? 'tab_textLast' : ''} ${isActive ? 'tab_textActive' : ''}`}
-            onClick={this.handleClick}
-            onMouseUp={this.handleMouseUp}
-          >
-            <span title={this.props.text} className="tab_textInner">
-              {this.props.text}
-            </span>
+          <span title={props.text} className="tab_textInner">
+            {props.text}
           </span>
-          <i className="tab_icon" onClick={this.props.onClose}>
-            <svg className="tab_shape">
-              <use xlinkHref="./renderer/assets/icons.svg#close-tab" />
-            </svg>
-          </i>
-          {this.props.customChildren}
-        </li>
+        </span>
+        <i className="tab_icon" onClick={props.onClose}>
+          <svg className="tab_shape">
+            <use xlinkHref="./renderer/assets/icons.svg#close-tab" />
+          </svg>
+        </i>
+        {props.customChildren}
+      </li>
 
-        <style jsx>{`
-          .tab_tab {
-            color: #ccc;
-            border-color: #ccc;
-            border-bottom-width: 1px;
-            border-bottom-style: solid;
-            border-left-width: 1px;
-            border-left-style: solid;
-            list-style-type: none;
-            flex-grow: 1;
-            position: relative;
-          }
+      <style jsx>{`
+        .tab_tab {
+          color: #ccc;
+          border-color: #ccc;
+          border-bottom-width: 1px;
+          border-bottom-style: solid;
+          border-left-width: 1px;
+          border-left-style: solid;
+          list-style-type: none;
+          flex-grow: 1;
+          position: relative;
+        }
 
-          .tab_tab:hover {
-            color: #ccc;
-          }
+        .tab_tab:hover {
+          color: #ccc;
+        }
 
-          .tab_first {
-            border-left-width: 0;
-            padding-left: 1px;
-          }
+        .tab_first {
+          border-left-width: 0;
+          padding-left: 1px;
+        }
 
-          .tab_firstActive {
-            border-left-width: 1px;
-            padding-left: 0;
-          }
+        .tab_firstActive {
+          border-left-width: 1px;
+          padding-left: 0;
+        }
 
-          .tab_active {
-            color: #fff;
-            border-bottom-width: 0;
-          }
-          .tab_active:hover {
-            color: #fff;
-          }
+        .tab_active {
+          color: #fff;
+          border-bottom-width: 0;
+        }
+        .tab_active:hover {
+          color: #fff;
+        }
 
-          .tab_hasActivity {
-            color: #50e3c2;
-          }
+        .tab_hasActivity {
+          color: #50e3c2;
+        }
 
-          .tab_hasActivity:hover {
-            color: #50e3c2;
-          }
+        .tab_hasActivity:hover {
+          color: #50e3c2;
+        }
 
-          .tab_text {
-            transition: color 0.2s ease;
-            height: 34px;
-            display: block;
-            width: 100%;
-            position: relative;
-            overflow: hidden;
-          }
+        .tab_text {
+          transition: color 0.2s ease;
+          height: 34px;
+          display: block;
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+        }
 
-          .tab_textInner {
-            position: absolute;
-            left: 24px;
-            right: 24px;
-            top: 0;
-            bottom: 0;
-            text-align: center;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
+        .tab_textInner {
+          position: absolute;
+          left: 24px;
+          right: 24px;
+          top: 0;
+          bottom: 0;
+          text-align: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
 
-          .tab_icon {
-            transition: opacity 0.2s ease, color 0.2s ease, transform 0.25s ease, background-color 0.1s ease;
-            pointer-events: none;
-            position: absolute;
-            right: 7px;
-            top: 10px;
-            display: inline-block;
-            width: 14px;
-            height: 14px;
-            border-radius: 100%;
-            color: #e9e9e9;
-            opacity: 0;
-            transform: scale(0.95);
-          }
+        .tab_icon {
+          transition:
+            opacity 0.2s ease,
+            color 0.2s ease,
+            transform 0.25s ease,
+            background-color 0.1s ease;
+          pointer-events: none;
+          position: absolute;
+          right: 7px;
+          top: 10px;
+          display: inline-block;
+          width: 14px;
+          height: 14px;
+          border-radius: 100%;
+          color: #e9e9e9;
+          opacity: 0;
+          transform: scale(0.95);
+        }
 
-          .tab_icon:hover {
-            background-color: rgba(255, 255, 255, 0.13);
-            color: #fff;
-          }
+        .tab_icon:hover {
+          background-color: rgba(255, 255, 255, 0.13);
+          color: #fff;
+        }
 
-          .tab_icon:active {
-            background-color: rgba(255, 255, 255, 0.1);
-            color: #909090;
-          }
+        .tab_icon:active {
+          background-color: rgba(255, 255, 255, 0.1);
+          color: #909090;
+        }
 
-          .tab_tab:hover .tab_icon {
-            opacity: 1;
-            transform: none;
-            pointer-events: all;
-          }
+        .tab_tab:hover .tab_icon {
+          opacity: 1;
+          transform: none;
+          pointer-events: all;
+        }
 
-          .tab_shape {
-            position: absolute;
-            left: 4px;
-            top: 4px;
-            width: 6px;
-            height: 6px;
-            vertical-align: middle;
-            fill: currentColor;
-            shape-rendering: crispEdges;
-          }
-        `}</style>
-      </React.Fragment>
-    );
-  }
-}
+        .tab_shape {
+          position: absolute;
+          left: 4px;
+          top: 4px;
+          width: 6px;
+          height: 6px;
+          vertical-align: middle;
+          fill: currentColor;
+          shape-rendering: crispEdges;
+        }
+      `}</style>
+    </>
+  );
+});
+
+Tab.displayName = 'Tab';
+
+export default Tab;

lib/components/tabs.tsx

@@ -1,105 +1,113 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 
+import type {TabsProps} from '../../typings/hyper';
 import {decorate, getTabProps} from '../utils/plugins';
 
+import DropdownButton from './new-tab';
 import Tab_ from './tab';
-import {TabsProps} from '../hyper';
 
 const Tab = decorate(Tab_, 'Tab');
 const isMac = /Mac/.test(navigator.userAgent);
 
-export default class Tabs extends React.PureComponent<TabsProps> {
-  render() {
-    const {tabs = [], borderColor, onChange, onClose, fullScreen} = this.props;
+const Tabs = forwardRef<HTMLElement, TabsProps>((props, ref) => {
+  const {tabs = [], borderColor, onChange, onClose, fullScreen} = props;
 
-    const hide = !isMac && tabs.length === 1;
+  const hide = !isMac && tabs.length === 1;
 
-    return (
-      <nav className={`tabs_nav ${hide ? 'tabs_hiddenNav' : ''}`}>
-        {this.props.customChildrenBefore}
-        {tabs.length === 1 && isMac ? <div className="tabs_title">{tabs[0].title}</div> : null}
-        {tabs.length > 1
-          ? [
-              <ul key="list" className={`tabs_list ${fullScreen && isMac ? 'tabs_fullScreen' : ''}`}>
-                {tabs.map((tab, i) => {
-                  const {uid, title, isActive, hasActivity} = tab;
-                  const props = getTabProps(tab, this.props, {
-                    text: title === '' ? 'Shell' : title,
-                    isFirst: i === 0,
-                    isLast: tabs.length - 1 === i,
-                    borderColor,
-                    isActive,
-                    hasActivity,
-                    onSelect: onChange.bind(null, uid),
-                    onClose: onClose.bind(null, uid)
-                  });
-                  return <Tab key={`tab-${uid}`} {...props} />;
-                })}
-              </ul>,
-              isMac && (
-                <div
-                  key="shim"
-                  style={{borderColor}}
-                  className={`tabs_borderShim ${fullScreen ? 'tabs_borderShimUndo' : ''}`}
-                />
-              )
-            ]
-          : null}
-        {this.props.customChildren}
+  return (
+    <nav className={`tabs_nav ${hide ? 'tabs_hiddenNav' : ''}`} ref={ref}>
+      {props.customChildrenBefore}
+      {tabs.length === 1 && isMac ? <div className="tabs_title">{tabs[0].title}</div> : null}
+      {tabs.length > 1 ? (
+        <>
+          <ul key="list" className={`tabs_list ${fullScreen && isMac ? 'tabs_fullScreen' : ''}`}>
+            {tabs.map((tab, i) => {
+              const {uid, title, isActive, hasActivity} = tab;
+              const tabProps = getTabProps(tab, props, {
+                text: title === '' ? 'Shell' : title,
+                isFirst: i === 0,
+                isLast: tabs.length - 1 === i,
+                borderColor,
+                isActive,
+                hasActivity,
+                onSelect: onChange.bind(null, uid),
+                onClose: onClose.bind(null, uid)
+              });
+              return <Tab key={`tab-${uid}`} {...tabProps} />;
+            })}
+          </ul>
+          {isMac && (
+            <div
+              key="shim"
+              style={{borderColor}}
+              className={`tabs_borderShim ${fullScreen ? 'tabs_borderShimUndo' : ''}`}
+            />
+          )}
+        </>
+      ) : null}
+      <DropdownButton {...props} tabsVisible={tabs.length > 1} />
+      {props.customChildren}
 
-        <style jsx>{`
-          .tabs_nav {
-            font-size: 12px;
-            height: 34px;
-            line-height: 34px;
-            vertical-align: middle;
-            color: #9b9b9b;
-            cursor: default;
-            position: relative;
-            -webkit-user-select: none;
-            -webkit-app-region: ${isMac ? 'drag' : ''};
-            top: ${isMac ? '0px' : '34px'};
-          }
+      <style jsx>{`
+        .tabs_nav {
+          font-size: 12px;
+          height: 34px;
+          line-height: 34px;
+          vertical-align: middle;
+          color: #9b9b9b;
+          cursor: default;
+          position: relative;
+          -webkit-user-select: none;
+          -webkit-app-region: ${isMac ? 'drag' : ''};
+          top: ${isMac ? '0px' : '34px'};
+          display: flex;
+          flex-flow: row;
+        }
 
-          .tabs_hiddenNav {
-            display: none;
-          }
+        .tabs_hiddenNav {
+          display: none;
+        }
 
-          .tabs_title {
-            text-align: center;
-            color: #fff;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            padding-left: 76px;
-            padding-right: 76px;
-          }
+        .tabs_title {
+          text-align: center;
+          color: #fff;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          padding-left: 76px;
+          padding-right: 76px;
+          flex-grow: 1;
+        }
 
-          .tabs_list {
-            max-height: 34px;
-            display: flex;
-            flex-flow: row;
-            margin-left: ${isMac ? '76px' : '0'};
-          }
+        .tabs_list {
+          max-height: 34px;
+          display: flex;
+          flex-flow: row;
+          margin-left: ${isMac ? '76px' : '0'};
+          flex-grow: 1;
+        }
 
-          .tabs_fullScreen {
-            margin-left: -1px;
-          }
+        .tabs_fullScreen {
+          margin-left: -1px;
+        }
 
-          .tabs_borderShim {
-            position: absolute;
-            width: 76px;
-            bottom: 0;
-            border-color: #ccc;
-            border-bottom-style: solid;
-            border-bottom-width: 1px;
-          }
+        .tabs_borderShim {
+          position: absolute;
+          width: 76px;
+          bottom: 0;
+          border-color: #ccc;
+          border-bottom-style: solid;
+          border-bottom-width: 1px;
+        }
 
-          .tabs_borderShimUndo {
-            border-bottom-width: 0px;
-          }
-        `}</style>
-      </nav>
-    );
-  }
-}
+        .tabs_borderShimUndo {
+          border-bottom-width: 0px;
+        }
+      `}</style>
+    </nav>
+  );
+});
+
+Tabs.displayName = 'Tabs';
+
+export default Tabs;

lib/components/term-group.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
+
 import {connect} from 'react-redux';
-import {decorate, getTermProps, getTermGroupProps} from '../utils/plugins';
+
+import type {HyperState, HyperDispatch, TermGroupProps, TermGroupOwnProps} from '../../typings/hyper';
 import {resizeTermGroup} from '../actions/term-groups';
-import Term_ from './term';
+import {decorate, getTermProps, getTermGroupProps} from '../utils/plugins';
+
 import SplitPane_ from './split-pane';
-import {HyperState, HyperDispatch, TermGroupProps, TermGroupOwnProps} from '../hyper';
+import Term_ from './term';
 
 const Term = decorate(Term_, 'Term');
 const SplitPane = decorate(SplitPane_, 'SplitPane');
@@ -82,7 +85,6 @@ class TermGroup_ extends React.PureComponent<TermGroupProps> {
       letterSpacing: this.props.letterSpacing,
       modifierKeys: this.props.modifierKeys,
       padding: this.props.padding,
-      url: session.url,
       cleared: session.cleared,
       search: session.search,
       cols: session.cols,
@@ -106,6 +108,8 @@ class TermGroup_ extends React.PureComponent<TermGroupProps> {
       macOptionSelectionMode: this.props.macOptionSelectionMode,
       disableLigatures: this.props.disableLigatures,
       screenReaderMode: this.props.screenReaderMode,
+      windowsPty: this.props.windowsPty,
+      imageSupport: this.props.imageSupport,
       uid
     });
 

lib/components/term.tsx

@@ -1,24 +1,33 @@
-import React from 'react';
-import {Terminal, ITerminalOptions, IDisposable} from 'xterm';
-import {FitAddon} from 'xterm-addon-fit';
-import {WebLinksAddon} from 'xterm-addon-web-links';
-import {SearchAddon, ISearchDecorationOptions} from 'xterm-addon-search';
-import {WebglAddon} from 'xterm-addon-webgl';
-import {LigaturesAddon} from 'xterm-addon-ligatures';
-import {Unicode11Addon} from 'xterm-addon-unicode11';
 import {clipboard, shell} from 'electron';
+import React from 'react';
+
 import Color from 'color';
+import isEqual from 'lodash/isEqual';
+import pickBy from 'lodash/pickBy';
+import {Terminal} from 'xterm';
+import type {ITerminalOptions, IDisposable} from 'xterm';
+import {CanvasAddon} from 'xterm-addon-canvas';
+import {FitAddon} from 'xterm-addon-fit';
+import {ImageAddon} from 'xterm-addon-image';
+import {LigaturesAddon} from 'xterm-addon-ligatures';
+import {SearchAddon} from 'xterm-addon-search';
+import type {ISearchDecorationOptions} from 'xterm-addon-search';
+import {Unicode11Addon} from 'xterm-addon-unicode11';
+import {WebLinksAddon} from 'xterm-addon-web-links';
+import {WebglAddon} from 'xterm-addon-webgl';
+
+import type {TermProps} from '../../typings/hyper';
 import terms from '../terms';
 import processClipboard from '../utils/paste';
-import _SearchBox from './searchBox';
-import {TermProps} from '../hyper';
-import {ObjectTypedKeys} from '../utils/object';
 import {decorate} from '../utils/plugins';
+
+import _SearchBox from './searchBox';
+
 import 'xterm/css/xterm.css';
 
 const SearchBox = decorate(_SearchBox, 'SearchBox');
 
-const isWindows = ['Windows', 'Win16', 'Win32', 'WinCE'].includes(navigator.platform);
+const isWindows = ['Windows', 'Win16', 'Win32', 'WinCE'].includes(navigator.platform) || process.platform === 'win32';
 
 // map old hterm constants to xterm.js
 const CURSOR_STYLES = {
@@ -42,7 +51,7 @@ const isWebgl2Supported = (() => {
 const getTermOptions = (props: TermProps): ITerminalOptions => {
   // Set a background color only if it is opaque
   const needTransparency = Color(props.backgroundColor).alpha() < 1;
-  const backgroundColor = needTransparency ? 'transparent' : props.backgroundColor;
+  const backgroundColor = needTransparency ? 'rgba(0,0,0,0)' : props.backgroundColor;
 
   return {
     macOptionIsMeta: props.modifierKeys.altIsMeta,
@@ -57,14 +66,14 @@ const getTermOptions = (props: TermProps): ITerminalOptions => {
     letterSpacing: props.letterSpacing,
     allowTransparency: needTransparency,
     macOptionClickForcesSelection: props.macOptionSelectionMode === 'force',
-    bellStyle: props.bell === 'SOUND' ? 'sound' : 'none',
     windowsMode: isWindows,
+    ...(isWindows && props.windowsPty && {windowsPty: props.windowsPty}),
     theme: {
       foreground: props.foregroundColor,
       background: backgroundColor,
       cursor: props.cursorColor,
       cursorAccent: props.cursorAccentColor,
-      selection: props.selectionColor,
+      selectionBackground: props.selectionColor,
       black: props.colors.black,
       red: props.colors.red,
       green: props.colors.green,
@@ -83,7 +92,8 @@ const getTermOptions = (props: TermProps): ITerminalOptions => {
       brightWhite: props.colors.lightWhite
     },
     screenReaderMode: props.screenReaderMode,
-    overviewRulerWidth: 20
+    overviewRulerWidth: 20,
+    allowProposedApi: true
   };
 };
 
@@ -107,7 +117,8 @@ export default class Term extends React.PureComponent<
   termWrapperRef: HTMLElement | null;
   termOptions: ITerminalOptions;
   disposableListeners: IDisposable[];
-  termDefaultBellSound: string | null;
+  defaultBellSound: HTMLAudioElement | null;
+  bellSound: HTMLAudioElement | null;
   fitAddon: FitAddon;
   searchAddon: SearchAddon;
   static rendererTypes: Record<string, string>;
@@ -131,7 +142,8 @@ export default class Term extends React.PureComponent<
     this.termWrapperRef = null;
     this.termOptions = {};
     this.disposableListeners = [];
-    this.termDefaultBellSound = null;
+    this.defaultBellSound = null;
+    this.bellSound = null;
     this.fitAddon = new FitAddon();
     this.searchAddon = new SearchAddon();
     this.searchDecorations = {
@@ -158,7 +170,14 @@ export default class Term extends React.PureComponent<
 
     this.termOptions = getTermOptions(props);
     this.term = props.term || new Terminal(this.termOptions);
-    this.termDefaultBellSound = this.term.getOption('bellSound');
+    this.defaultBellSound = new Audio(
+      // Source: https://freesound.org/people/altemark/sounds/45759/
+      // This sound is released under the Creative Commons Attribution 3.0 Unported
+      // (CC BY 3.0) license. It was created by 'altemark'. No modifications have been
+      // made, apart from the conversion to base64.
+      'data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4LjMyLjEwNAAAAAAAAAAAAAAA//tQxAADB8AhSmxhIIEVCSiJrDCQBTcu3UrAIwUdkRgQbFAZC1CQEwTJ9mjRvBA4UOLD8nKVOWfh+UlK3z/177OXrfOdKl7pyn3Xf//WreyTRUoAWgBgkOAGbZHBgG1OF6zM82DWbZaUmMBptgQhGjsyYqc9ae9XFz280948NMBWInljyzsNRFLPWdnZGWrddDsjK1unuSrVN9jJsK8KuQtQCtMBjCEtImISdNKJOopIpBFpNSMbIHCSRpRR5iakjTiyzLhchUUBwCgyKiweBv/7UsQbg8isVNoMPMjAAAA0gAAABEVFGmgqK////9bP/6XCykxBTUUzLjEwMKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq'
+    );
+    this.setBellSound(props.bell, props.bellSound);
 
     // The parent element for the terminal is attached and removed manually so
     // that we can preserve it across mounts and unmounts of the component
@@ -186,9 +205,9 @@ export default class Term extends React.PureComponent<
       }
       Term.reportRenderer(props.uid, useWebGL ? 'WebGL' : 'Canvas');
 
-      const shallActivateWebLink = (event: Record<string, any> | undefined): boolean => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        return event && (!props.webLinksActivationKey || event[`${props.webLinksActivationKey}Key`]);
+      const shallActivateWebLink = (event: MouseEvent): boolean => {
+        if (!event) return false;
+        return props.webLinksActivationKey ? event[`${props.webLinksActivationKey}Key`] : true;
       };
 
       // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -196,29 +215,34 @@ export default class Term extends React.PureComponent<
       this.term.loadAddon(this.fitAddon);
       this.term.loadAddon(this.searchAddon);
       this.term.loadAddon(
-        new WebLinksAddon(
-          (event: MouseEvent | undefined, uri: string) => {
-            if (shallActivateWebLink(event)) void shell.openExternal(uri);
-          },
-          {
-            // prevent default electron link handling to allow selection, e.g. via double-click
-            willLinkActivate: (event: MouseEvent | undefined) => {
-              event?.preventDefault();
-              return shallActivateWebLink(event);
-            },
-            priority: Date.now()
-          }
-        )
+        new WebLinksAddon((event, uri) => {
+          if (shallActivateWebLink(event)) void shell.openExternal(uri);
+        })
       );
       this.term.open(this.termRef);
+
       if (useWebGL) {
-        this.term.loadAddon(new WebglAddon());
+        const webglAddon = new WebglAddon();
+        this.term.loadAddon(webglAddon);
+        webglAddon.onContextLoss(() => {
+          console.warn('WebGL context lost. Falling back to canvas-based rendering.');
+          webglAddon.dispose();
+          this.term.loadAddon(new CanvasAddon());
+        });
+      } else {
+        this.term.loadAddon(new CanvasAddon());
       }
+
       if (props.disableLigatures !== true && !useWebGL) {
         this.term.loadAddon(new LigaturesAddon());
       }
+
       this.term.loadAddon(new Unicode11Addon());
       this.term.unicode.activeVersion = '11';
+
+      if (props.imageSupport) {
+        this.term.loadAddon(new ImageAddon());
+      }
     } else {
       // get the cached plugins
       this.fitAddon = props.fitAddon!;
@@ -252,6 +276,10 @@ export default class Term extends React.PureComponent<
       this.disposableListeners.push(this.term.onData(props.onData));
     }
 
+    this.term.onBell(() => {
+      this.ringBell();
+    });
+
     if (props.onResize) {
       this.disposableListeners.push(
         this.term.onResize(({cols, rows}) => {
@@ -393,6 +421,18 @@ export default class Term extends React.PureComponent<
     return !e.catched;
   }
 
+  setBellSound(bell: 'SOUND' | false, sound: string | null) {
+    if (bell && bell.toUpperCase() === 'SOUND') {
+      this.bellSound = sound ? new Audio(sound) : this.defaultBellSound;
+    } else {
+      this.bellSound = null;
+    }
+  }
+
+  ringBell() {
+    void this.bellSound?.play();
+  }
+
   componentDidUpdate(prevProps: TermProps) {
     if (!prevProps.cleared && this.props.cleared) {
       this.clear();
@@ -400,40 +440,19 @@ export default class Term extends React.PureComponent<
 
     const nextTermOptions = getTermOptions(this.props);
 
-    // Use bellSound in nextProps if it exists
-    // otherwise use the default sound found in xterm.
-    nextTermOptions.bellSound = this.props.bellSound || this.termDefaultBellSound!;
+    if (prevProps.bell !== this.props.bell || prevProps.bellSound !== this.props.bellSound) {
+      this.setBellSound(this.props.bell, this.props.bellSound);
+    }
 
     if (prevProps.search && !this.props.search) {
       this.closeSearchBox();
     }
 
     // Update only options that have changed.
-    ObjectTypedKeys(nextTermOptions)
-      .filter((option) => option !== 'theme' && nextTermOptions[option] !== this.termOptions[option])
-      .forEach((option) => {
-        try {
-          this.term.setOption(option, nextTermOptions[option]);
-        } catch (_e) {
-          const e = _e as {message: string};
-          if (/The webgl renderer only works with the webgl char atlas/i.test(e.message)) {
-            // Ignore this because the char atlas will also be changed
-          } else {
-            throw e;
-          }
-        }
-      });
-
-    // Do we need to update theme?
-    const shouldUpdateTheme =
-      !this.termOptions.theme ||
-      nextTermOptions.rendererType !== this.termOptions.rendererType ||
-      ObjectTypedKeys(nextTermOptions.theme!).some(
-        (option) => nextTermOptions.theme![option] !== this.termOptions.theme![option]
-      );
-    if (shouldUpdateTheme) {
-      this.term.setOption('theme', nextTermOptions.theme);
-    }
+    this.term.options = pickBy(
+      nextTermOptions,
+      (value, key) => !isEqual(this.termOptions[key as keyof ITerminalOptions], value)
+    );
 
     this.termOptions = nextTermOptions;
 

lib/components/terms.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
-import {decorate, getTermGroupProps} from '../utils/plugins';
+
+import type {TermsProps, HyperDispatch} from '../../typings/hyper';
 import {registerCommandHandlers} from '../command-registry';
-import TermGroup_ from './term-group';
-import StyleSheet_ from './style-sheet';
-import {TermsProps, HyperDispatch} from '../hyper';
-import Term from './term';
 import {ObjectTypedKeys} from '../utils/object';
+import {decorate, getTermGroupProps} from '../utils/plugins';
+
+import StyleSheet_ from './style-sheet';
+import type Term from './term';
+import TermGroup_ from './term-group';
 
 const TermGroup = decorate(TermGroup_, 'TermGroup');
 const StyleSheet = decorate(StyleSheet_, 'StyleSheet');
 
 const isMac = /Mac/.test(navigator.userAgent);
 
-export default class Terms extends React.Component<TermsProps> {
+export default class Terms extends React.Component<React.PropsWithChildren<TermsProps>> {
   terms: Record<string, Term>;
   registerCommands: (cmds: Record<string, (e: any, dispatch: HyperDispatch) => void>) => void;
   constructor(props: TermsProps, context: any) {
@@ -119,6 +121,8 @@ export default class Terms extends React.Component<TermsProps> {
             macOptionSelectionMode: this.props.macOptionSelectionMode,
             disableLigatures: this.props.disableLigatures,
             screenReaderMode: this.props.screenReaderMode,
+            windowsPty: this.props.windowsPty,
+            imageSupport: this.props.imageSupport,
             parentProps: this.props
           });
 

lib/containers/header.ts

@@ -1,10 +1,11 @@
 import {createSelector} from 'reselect';
 
-import Header from '../components/header';
+import type {HyperState, HyperDispatch, ITab} from '../../typings/hyper';
 import {closeTab, changeTab, maximize, openHamburgerMenu, unmaximize, minimize, close} from '../actions/header';
-import {connect} from '../utils/plugins';
+import {requestTermGroup} from '../actions/term-groups';
+import Header from '../components/header';
 import {getRootGroups} from '../selectors';
-import {HyperState, HyperDispatch, ITab} from '../hyper';
+import {connect} from '../utils/plugins';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
@@ -38,7 +39,9 @@ const mapStateToProps = (state: HyperState) => {
     maximized: state.ui.maximized,
     fullScreen: state.ui.fullScreen,
     showHamburgerMenu: state.ui.showHamburgerMenu,
-    showWindowControls: state.ui.showWindowControls
+    showWindowControls: state.ui.showWindowControls,
+    defaultProfile: state.ui.defaultProfile,
+    profiles: state.ui.profiles
   };
 };
 
@@ -70,6 +73,10 @@ const mapDispatchToProps = (dispatch: HyperDispatch) => {
 
     close: () => {
       dispatch(close());
+    },
+
+    openNewTab: (profile: string) => {
+      dispatch(requestTermGroup(undefined, profile));
     }
   };
 };

lib/containers/hyper.tsx

@@ -1,149 +1,142 @@
-import React from 'react';
-import Mousetrap, {MousetrapInstance} from 'mousetrap';
+import React, {forwardRef, useEffect, useRef} from 'react';
 
-import {connect} from '../utils/plugins';
-import * as uiActions from '../actions/ui';
-import {getRegisteredKeys, getCommandHandler, shouldPreventDefault} from '../command-registry';
+import Mousetrap from 'mousetrap';
+import type {MousetrapInstance} from 'mousetrap';
 import stylis from 'stylis';
 
+import type {HyperState, HyperProps, HyperDispatch} from '../../typings/hyper';
+import * as uiActions from '../actions/ui';
+import {getRegisteredKeys, getCommandHandler, shouldPreventDefault} from '../command-registry';
+import type Terms from '../components/terms';
+import {connect} from '../utils/plugins';
+
 import {HeaderContainer} from './header';
-import TermsContainer from './terms';
 import NotificationsContainer from './notifications';
-import {HyperState, HyperProps, HyperDispatch} from '../hyper';
-import Terms from '../components/terms';
+import TermsContainer from './terms';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
-class Hyper extends React.PureComponent<HyperProps> {
-  mousetrap!: MousetrapInstance;
-  terms!: Terms;
-  constructor(props: HyperProps) {
-    super(props);
-  }
+const Hyper = forwardRef<HTMLDivElement, HyperProps>((props, ref) => {
+  const mousetrap = useRef<MousetrapInstance | null>(null);
+  const terms = useRef<Terms | null>(null);
 
-  componentDidUpdate(prev: HyperProps) {
-    if (this.props.backgroundColor !== prev.backgroundColor) {
-      // this can be removed when `setBackgroundColor` in electron
-      // starts working again
-      document.body.style.backgroundColor = this.props.backgroundColor;
-    }
-    const {lastConfigUpdate} = this.props;
-    if (lastConfigUpdate && lastConfigUpdate !== prev.lastConfigUpdate) {
-      this.attachKeyListeners();
-    }
-    if (prev.activeSession !== this.props.activeSession) {
-      this.handleFocusActive(this.props.activeSession!);
-    }
-  }
+  useEffect(() => {
+    void attachKeyListeners();
+  }, [props.lastConfigUpdate]);
+  useEffect(() => {
+    handleFocusActive(props.activeSession);
+  }, [props.activeSession]);
 
-  handleFocusActive = (uid?: string) => {
-    const term = uid && this.terms.getTermByUid(uid);
+  const handleFocusActive = (uid?: string | null) => {
+    const term = uid && terms.current?.getTermByUid(uid);
     if (term) {
       term.focus();
     }
   };
 
-  handleSelectAll = () => {
-    const term = this.terms.getActiveTerm();
+  const handleSelectAll = () => {
+    const term = terms.current?.getActiveTerm();
     if (term) {
       term.selectAll();
     }
   };
 
-  attachKeyListeners() {
-    if (!this.mousetrap) {
+  const attachKeyListeners = async () => {
+    if (!mousetrap.current) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      this.mousetrap = new (Mousetrap as any)(window, true);
-      this.mousetrap.stopCallback = () => {
+      mousetrap.current = new (Mousetrap as any)(window, true);
+      mousetrap.current!.stopCallback = () => {
         // All events should be intercepted even if focus is in an input/textarea
         return false;
       };
     } else {
-      this.mousetrap.reset();
+      mousetrap.current.reset();
     }
 
-    const keys = getRegisteredKeys();
+    const keys = await getRegisteredKeys();
     Object.keys(keys).forEach((commandKeys) => {
-      this.mousetrap.bind(
+      mousetrap.current?.bind(
         commandKeys,
         (e) => {
           const command = keys[commandKeys];
-          // We should tell to xterm that it should ignore this event.
+          // We should tell xterm to ignore this event.
           (e as any).catched = true;
-          this.props.execCommand(command, getCommandHandler(command), e);
+          props.execCommand(command, getCommandHandler(command), e);
           shouldPreventDefault(command) && e.preventDefault();
         },
         'keydown'
       );
     });
-  }
+  };
 
-  componentDidMount() {
-    this.attachKeyListeners();
-    window.rpc.on('term selectAll', this.handleSelectAll);
-  }
+  useEffect(() => {
+    void attachKeyListeners();
+    window.rpc.on('term selectAll', handleSelectAll);
+  }, []);
 
-  onTermsRef = (terms: Terms) => {
-    this.terms = terms;
+  const onTermsRef = (_terms: Terms | null) => {
+    terms.current = _terms;
     window.focusActiveTerm = (uid?: string) => {
       if (uid) {
-        this.handleFocusActive(uid);
+        handleFocusActive(uid);
       } else {
-        this.terms.getActiveTerm().focus();
+        terms.current?.getActiveTerm()?.focus();
       }
     };
   };
 
-  componentWillUnmount() {
-    document.body.style.backgroundColor = 'inherit';
-    this.mousetrap?.reset();
-  }
+  useEffect(() => {
+    return () => {
+      mousetrap.current?.reset();
+    };
+  }, []);
 
-  render() {
-    const {isMac: isMac_, customCSS, uiFontFamily, borderColor, maximized, fullScreen} = this.props;
-    const borderWidth = isMac_ ? '' : `${maximized ? '0' : '1'}px`;
-    stylis.set({prefix: false});
-    return (
-      <div id="hyper">
-        <div
-          style={{fontFamily: uiFontFamily, borderColor, borderWidth}}
-          className={`hyper_main ${isMac_ && 'hyper_mainRounded'} ${fullScreen ? 'fullScreen' : ''}`}
-        >
-          <HeaderContainer />
-          <TermsContainer ref_={this.onTermsRef} />
-          {this.props.customInnerChildren}
-        </div>
-
-        <NotificationsContainer />
-
-        {this.props.customChildren}
-
-        <style jsx>
-          {`
-            .hyper_main {
-              position: fixed;
-              top: 0;
-              left: 0;
-              right: 0;
-              bottom: 0;
-              border: 1px solid #333;
-            }
-
-            .hyper_mainRounded {
-              border-radius: 10px;
-            }
-          `}
-        </style>
-
-        {/*
-          Add custom CSS to Hyper.
-          We add a scope to the customCSS so that it can get around the weighting applied by styled-jsx
-        */}
-        <style dangerouslySetInnerHTML={{__html: stylis('#hyper', customCSS)}} />
+  const {isMac: isMac_, customCSS, uiFontFamily, borderColor, maximized, fullScreen} = props;
+  const borderWidth = isMac_ ? '' : `${maximized ? '0' : '1'}px`;
+  stylis.set({prefix: false});
+  return (
+    <div id="hyper" ref={ref}>
+      <div
+        style={{fontFamily: uiFontFamily, borderColor, borderWidth}}
+        className={`hyper_main ${isMac_ && 'hyper_mainRounded'} ${fullScreen ? 'fullScreen' : ''}`}
+      >
+        <HeaderContainer />
+        <TermsContainer ref_={onTermsRef} />
+        {props.customInnerChildren}
       </div>
-    );
-  }
-}
+
+      <NotificationsContainer />
+
+      {props.customChildren}
+
+      <style jsx>
+        {`
+          .hyper_main {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid #333;
+          }
+
+          .hyper_mainRounded {
+            border-radius: 10.5px;
+            overflow: hidden;
+          }
+        `}
+      </style>
+
+      {/*
+        Add custom CSS to Hyper.
+        We add a scope to the customCSS so that it can get around the weighting applied by styled-jsx
+      */}
+      <style dangerouslySetInnerHTML={{__html: stylis('#hyper', customCSS)}} />
+    </div>
+  );
+});
+
+Hyper.displayName = 'Hyper';
 
 const mapStateToProps = (state: HyperState) => {
   return {

lib/containers/notifications.ts

@@ -1,8 +1,8 @@
-import Notifications from '../components/notifications';
-import {installUpdate} from '../actions/updater';
-import {connect} from '../utils/plugins';
+import type {HyperState, HyperDispatch} from '../../typings/hyper';
 import {dismissNotification} from '../actions/notifications';
-import {HyperState, HyperDispatch} from '../hyper';
+import {installUpdate} from '../actions/updater';
+import Notifications from '../components/notifications';
+import {connect} from '../utils/plugins';
 
 const mapStateToProps = (state: HyperState) => {
   const {ui} = state;

lib/containers/terms.ts

@@ -1,5 +1,4 @@
-import Terms from '../components/terms';
-import {connect} from '../utils/plugins';
+import type {HyperState, HyperDispatch} from '../../typings/hyper';
 import {
   resizeSession,
   sendSessionData,
@@ -8,10 +7,10 @@ import {
   openSearch,
   closeSearch
 } from '../actions/sessions';
-
 import {openContextMenu} from '../actions/ui';
+import Terms from '../components/terms';
 import {getRootGroups} from '../selectors';
-import {HyperState, HyperDispatch} from '../hyper';
+import {connect} from '../utils/plugins';
 
 const mapStateToProps = (state: HyperState) => {
   const {sessions} = state.sessions;
@@ -53,13 +52,15 @@ const mapStateToProps = (state: HyperState) => {
     webLinksActivationKey: state.ui.webLinksActivationKey,
     macOptionSelectionMode: state.ui.macOptionSelectionMode,
     disableLigatures: state.ui.disableLigatures,
-    screenReaderMode: state.ui.screenReaderMode
+    screenReaderMode: state.ui.screenReaderMode,
+    windowsPty: state.ui.windowsPty,
+    imageSupport: state.ui.imageSupport
   };
 };
 
 const mapDispatchToProps = (dispatch: HyperDispatch) => {
   return {
-    onData(uid: string, data: any) {
+    onData(uid: string, data: string) {
       dispatch(sendSessionData(uid, data));
     },
 
@@ -83,7 +84,7 @@ const mapDispatchToProps = (dispatch: HyperDispatch) => {
       dispatch(closeSearch(uid));
     },
 
-    onContextMenu(uid: string, selection: any) {
+    onContextMenu(uid: string, selection: string) {
       dispatch(setActiveSession(uid));
       dispatch(openContextMenu(uid, selection));
     }

lib/ext-modules.d.ts

@@ -1,11 +0,0 @@
-declare module 'php-escape-shell' {
-  export function php_escapeshellcmd(path: string): string;
-}
-
-declare module 'parse-url' {
-  export default function (...args: any[]): any;
-}
-
-declare module 'react-deep-force-update' {
-  export default function (...args: any[]): any;
-}

lib/index.tsx

@@ -1,24 +1,25 @@
 import './v8-snapshot-util';
 import {webFrame} from 'electron';
-import forceUpdate from 'react-deep-force-update';
-import {Provider} from 'react-redux';
 import React from 'react';
-import {render} from 'react-dom';
 
-import rpc from './rpc';
+import {createRoot} from 'react-dom/client';
+import {Provider} from 'react-redux';
+
+import type {configOptions} from '../typings/config';
+
+import {loadConfig, reloadConfig} from './actions/config';
 import init from './actions/index';
-import * as config from './utils/config';
-import * as plugins from './utils/plugins';
-import {getBase64FileData} from './utils/file';
-import * as uiActions from './actions/ui';
-import * as updaterActions from './actions/updater';
+import {addNotificationMessage} from './actions/notifications';
 import * as sessionActions from './actions/sessions';
 import * as termGroupActions from './actions/term-groups';
-import {addNotificationMessage} from './actions/notifications';
-import {loadConfig, reloadConfig} from './actions/config';
+import * as uiActions from './actions/ui';
+import * as updaterActions from './actions/updater';
 import HyperContainer from './containers/hyper';
+import rpc from './rpc';
 import configureStore from './store/configure-store';
-import {configOptions} from './config';
+import * as config from './utils/config';
+import {getBase64FileData} from './utils/file';
+import * as plugins from './utils/plugins';
 
 // On Linux, the default zoom was somehow changed with Electron 3 (or maybe 2).
 // Setting zoom factor to 1.2 brings back the normal default size
@@ -156,16 +157,16 @@ rpc.on('session search close', () => {
   store_.dispatch(sessionActions.closeSearch());
 });
 
-rpc.on('termgroup add req', ({activeUid}) => {
-  store_.dispatch(termGroupActions.requestTermGroup(activeUid));
+rpc.on('termgroup add req', ({activeUid, profile}) => {
+  store_.dispatch(termGroupActions.requestTermGroup(activeUid, profile));
 });
 
-rpc.on('split request horizontal', ({activeUid}) => {
-  store_.dispatch(termGroupActions.requestHorizontalSplit(activeUid));
+rpc.on('split request horizontal', ({activeUid, profile}) => {
+  store_.dispatch(termGroupActions.requestHorizontalSplit(activeUid, profile));
 });
 
-rpc.on('split request vertical', ({activeUid}) => {
-  store_.dispatch(termGroupActions.requestVerticalSplit(activeUid));
+rpc.on('split request vertical', ({activeUid, profile}) => {
+  store_.dispatch(termGroupActions.requestVerticalSplit(activeUid, profile));
 });
 
 rpc.on('reset fontSize req', () => {
@@ -204,8 +205,8 @@ rpc.on('open file', ({path}) => {
   store_.dispatch(uiActions.openFile(path));
 });
 
-rpc.on('open ssh', (url) => {
-  store_.dispatch(uiActions.openSSH(url));
+rpc.on('open ssh', (parsedUrl) => {
+  store_.dispatch(uiActions.openSSH(parsedUrl));
 });
 
 rpc.on('update available', ({releaseName, releaseNotes, releaseUrl, canInstall}) => {
@@ -232,14 +233,14 @@ rpc.on('leave full screen', () => {
   store_.dispatch(uiActions.leaveFullScreen());
 });
 
-const app = render(
+const root = createRoot(document.getElementById('mount')!);
+
+root.render(
   <Provider store={store_}>
     <HyperContainer />
-  </Provider>,
-  document.getElementById('mount')
+  </Provider>
 );
 
 rpc.on('reload', () => {
   plugins.reload();
-  forceUpdate(app);
 });

lib/reducers/index.ts

@@ -1,8 +1,11 @@
-import {combineReducers, Reducer} from 'redux';
-import ui from './ui';
+import {combineReducers} from 'redux';
+import type {Reducer} from 'redux';
+
+import type {HyperActions, HyperState} from '../../typings/hyper';
+
 import sessions from './sessions';
 import termGroups from './term-groups';
-import {HyperActions, HyperState} from '../hyper';
+import ui from './ui';
 
 export default combineReducers({
   ui,

lib/reducers/sessions.ts

@@ -1,5 +1,5 @@
 import Immutable from 'seamless-immutable';
-import {decorateSessionsReducer} from '../utils/plugins';
+
 import {
   SESSION_ADD,
   SESSION_PTY_EXIT,
@@ -11,8 +11,9 @@ import {
   SESSION_SET_XTERM_TITLE,
   SESSION_SET_CWD,
   SESSION_SEARCH
-} from '../constants/sessions';
-import {sessionState, session, Mutable, ISessionReducer} from '../hyper';
+} from '../../typings/constants/sessions';
+import type {sessionState, session, Mutable, ISessionReducer} from '../../typings/hyper';
+import {decorateSessionsReducer} from '../utils/plugins';
 
 const initialState: sessionState = Immutable<Mutable<sessionState>>({
   sessions: {},
@@ -25,17 +26,17 @@ function Session(obj: Immutable.DeepPartial<session>) {
     title: '',
     cols: null,
     rows: null,
-    url: null,
     cleared: false,
     search: false,
     shell: '',
-    pid: null
+    pid: null,
+    profile: ''
   };
   return Immutable(x).merge(obj);
 }
 
 function deleteSession(state: sessionState, uid: string) {
-  return state.updateIn(['sessions'], (sessions: typeof state['sessions']) => {
+  return state.updateIn(['sessions'], (sessions: (typeof state)['sessions']) => {
     const sessions_ = sessions.asMutable();
     delete sessions_[uid];
     return sessions_;
@@ -52,7 +53,8 @@ const reducer: ISessionReducer = (state = initialState, action) => {
           rows: action.rows,
           uid: action.uid,
           shell: action.shell ? action.shell.split('/').pop() : null,
-          pid: action.pid
+          pid: action.pid,
+          profile: action.profile
         })
       );
 

lib/reducers/term-groups.ts

@@ -1,10 +1,13 @@
+import Immutable from 'seamless-immutable';
+import type {Immutable as ImmutableType} from 'seamless-immutable';
 import {v4 as uuidv4} from 'uuid';
-import Immutable, {Immutable as ImmutableType} from 'seamless-immutable';
-import {TERM_GROUP_EXIT, TERM_GROUP_RESIZE} from '../constants/term-groups';
-import {SESSION_ADD, SESSION_SET_ACTIVE, SessionAddAction} from '../constants/sessions';
-import findBySession from '../utils/term-groups';
+
+import {SESSION_ADD, SESSION_SET_ACTIVE} from '../../typings/constants/sessions';
+import type {SessionAddAction} from '../../typings/constants/sessions';
+import {TERM_GROUP_EXIT, TERM_GROUP_RESIZE} from '../../typings/constants/term-groups';
+import type {ITermGroup, ITermState, ITermGroups, ITermGroupReducer, Mutable} from '../../typings/hyper';
 import {decorateTermGroupsReducer} from '../utils/plugins';
-import {ITermGroup, ITermState, ITermGroups, ITermGroupReducer, Mutable} from '../hyper';
+import findBySession from '../utils/term-groups';
 
 const MIN_SIZE = 0.05;
 const initialState: ITermState = Immutable<Mutable<ITermState>>({

lib/reducers/ui.ts

@@ -1,6 +1,18 @@
-import Immutable, {Immutable as ImmutableType} from 'seamless-immutable';
-import {decorateUIReducer} from '../utils/plugins';
-import {CONFIG_LOAD, CONFIG_RELOAD} from '../constants/config';
+import {release} from 'os';
+
+import Immutable from 'seamless-immutable';
+import type {Immutable as ImmutableType} from 'seamless-immutable';
+
+import {CONFIG_LOAD, CONFIG_RELOAD} from '../../typings/constants/config';
+import {NOTIFICATION_MESSAGE, NOTIFICATION_DISMISS} from '../../typings/constants/notifications';
+import {
+  SESSION_ADD,
+  SESSION_RESIZE,
+  SESSION_PTY_DATA,
+  SESSION_PTY_EXIT,
+  SESSION_SET_ACTIVE,
+  SESSION_SET_CWD
+} from '../../typings/constants/sessions';
 import {
   UI_FONT_SIZE_SET,
   UI_FONT_SIZE_RESET,
@@ -10,23 +22,17 @@ import {
   UI_WINDOW_GEOMETRY_CHANGED,
   UI_ENTER_FULLSCREEN,
   UI_LEAVE_FULLSCREEN
-} from '../constants/ui';
-import {NOTIFICATION_MESSAGE, NOTIFICATION_DISMISS} from '../constants/notifications';
-import {
-  SESSION_ADD,
-  SESSION_RESIZE,
-  SESSION_PTY_DATA,
-  SESSION_PTY_EXIT,
-  SESSION_SET_ACTIVE,
-  SESSION_SET_CWD
-} from '../constants/sessions';
-import {UPDATE_AVAILABLE} from '../constants/updater';
-import {uiState, Mutable, IUiReducer} from '../hyper';
+} from '../../typings/constants/ui';
+import {UPDATE_AVAILABLE} from '../../typings/constants/updater';
+import type {uiState, Mutable, IUiReducer} from '../../typings/hyper';
+import {decorateUIReducer} from '../utils/plugins';
+
+const isWindows = ['Windows', 'Win16', 'Win32', 'WinCE'].includes(navigator.platform) || process.platform === 'win32';
 
 const allowedCursorShapes = new Set(['BEAM', 'BLOCK', 'UNDERLINE']);
 const allowedCursorBlinkValues = new Set([true, false]);
 const allowedBells = new Set(['SOUND', 'false', false]);
-const allowedHamburgerMenuValues = new Set([true, false]);
+const allowedHamburgerMenuValues = new Set([true, false, ''] as const);
 const allowedWindowControlsValues = new Set([true, false, 'left']);
 
 // Populate `config-default.js` from this :)
@@ -50,6 +56,7 @@ const initial: uiState = Immutable<Mutable<uiState>>({
   fontSmoothingOverride: 'antialiased',
   fontWeight: 'normal',
   fontWeightBold: 'bold',
+  imageSupport: true,
   lineHeight: 1,
   letterSpacing: 0,
   css: '',
@@ -108,7 +115,9 @@ const initial: uiState = Immutable<Mutable<uiState>>({
   webLinksActivationKey: '',
   macOptionSelectionMode: 'vertical',
   disableLigatures: true,
-  screenReaderMode: false
+  screenReaderMode: false,
+  defaultProfile: '',
+  profiles: []
 });
 
 const reducer: IUiReducer = (state = initial, action) => {
@@ -210,7 +219,7 @@ const reducer: IUiReducer = (state = initial, action) => {
             }
 
             if (allowedBells.has(config.bell)) {
-              ret.bell = config.bell;
+              ret.bell = (config.bell as any) === 'false' ? false : config.bell;
             }
 
             if (config.bellSoundURL !== state.bellSoundURL) {
@@ -235,7 +244,7 @@ const reducer: IUiReducer = (state = initial, action) => {
               ret.modifierKeys = config.modifierKeys;
             }
 
-            if (allowedHamburgerMenuValues.has(config.showHamburgerMenu as any)) {
+            if (allowedHamburgerMenuValues.has(config.showHamburgerMenu)) {
               ret.showHamburgerMenu = config.showHamburgerMenu;
             }
 
@@ -269,6 +278,27 @@ const reducer: IUiReducer = (state = initial, action) => {
               ret.screenReaderMode = config.screenReaderMode;
             }
 
+            const buildNumber = parseInt(release().split('.').at(-1) || '0', 10);
+            if (isWindows && !Number.isNaN(buildNumber) && buildNumber > 0) {
+              const useConpty = typeof config.useConpty === 'boolean' ? config.useConpty : buildNumber >= 18309;
+              ret.windowsPty = {
+                backend: useConpty ? 'conpty' : 'winpty',
+                buildNumber
+              };
+            }
+
+            if (config.imageSupport !== undefined) {
+              ret.imageSupport = config.imageSupport;
+            }
+
+            if (config.defaultProfile !== undefined) {
+              ret.defaultProfile = config.defaultProfile;
+            }
+
+            if (config.profiles !== undefined) {
+              ret.profiles = config.profiles;
+            }
+
             ret._lastUpdate = now;
 
             return ret;
@@ -431,13 +461,7 @@ const reducer: IUiReducer = (state = initial, action) => {
     }
   }
 
-  if (
-    typeof state.cols !== 'undefined' &&
-    state.cols !== null &&
-    typeof state.rows !== 'undefined' &&
-    state.rows !== null &&
-    (state.rows !== state_.rows || state.cols !== state_.cols)
-  ) {
+  if (state.cols !== null && state.rows !== null && (state.rows !== state_.rows || state.cols !== state_.cols)) {
     state_ = state_.merge({notifications: {resize: true}}, {deep: true});
   }
 

lib/rpc.ts

@@ -1,3 +1,5 @@
 import RPC from './utils/rpc';
 
-export default new RPC();
+const rpc = new RPC();
+
+export default rpc;

lib/selectors.ts

@@ -1,5 +1,6 @@
 import {createSelector} from 'reselect';
-import {HyperState} from './hyper';
+
+import type {HyperState} from '../typings/hyper';
 
 const getTermGroups = ({termGroups}: Pick<HyperState, 'termGroups'>) => termGroups.termGroups;
 export const getRootGroups = createSelector(getTermGroups, (termGroups) =>

lib/store/configure-store.dev.ts

@@ -1,15 +1,21 @@
+import {composeWithDevTools} from '@redux-devtools/extension';
 import {createStore, applyMiddleware} from 'redux';
-import _thunk, {ThunkMiddleware} from 'redux-thunk';
+import _thunk from 'redux-thunk';
+import type {ThunkMiddleware} from 'redux-thunk';
+
+import type {HyperState, HyperActions} from '../../typings/hyper';
 import rootReducer from '../reducers/index';
 import effects from '../utils/effects';
 import * as plugins from '../utils/plugins';
+
 import writeMiddleware from './write-middleware';
-import {composeWithDevTools} from 'redux-devtools-extension';
-import {HyperState, HyperActions} from '../hyper';
+
 const thunk: ThunkMiddleware<HyperState, HyperActions> = _thunk;
 
-export default () => {
+const configureStoreForDevelopment = () => {
   const enhancer = composeWithDevTools(applyMiddleware(thunk, plugins.middleware, thunk, writeMiddleware, effects));
 
   return createStore(rootReducer, enhancer);
 };
+
+export default configureStoreForDevelopment;

lib/store/configure-store.prod.ts

@@ -1,11 +1,17 @@
 import {createStore, applyMiddleware} from 'redux';
-import _thunk, {ThunkMiddleware} from 'redux-thunk';
+import _thunk from 'redux-thunk';
+import type {ThunkMiddleware} from 'redux-thunk';
+
+import type {HyperState, HyperActions} from '../../typings/hyper';
 import rootReducer from '../reducers/index';
 import effects from '../utils/effects';
 import * as plugins from '../utils/plugins';
+
 import writeMiddleware from './write-middleware';
-import {HyperState, HyperActions} from '../hyper';
+
 const thunk: ThunkMiddleware<HyperState, HyperActions> = _thunk;
 
-export default () =>
+const configureStoreForProd = () =>
   createStore(rootReducer, applyMiddleware(thunk, plugins.middleware, thunk, writeMiddleware, effects));
+
+export default configureStoreForProd;

lib/store/configure-store.ts

@@ -1,10 +1,11 @@
-import configureStoreForProduction from './configure-store.prod';
 import configureStoreForDevelopment from './configure-store.dev';
+import configureStoreForProduction from './configure-store.prod';
 
-export default () => {
+const configureStore = () => {
   if (process.env.NODE_ENV === 'production') {
     return configureStoreForProduction();
   }
 
   return configureStoreForDevelopment();
 };
+export default configureStore;

lib/store/write-middleware.ts

@@ -1,10 +1,12 @@
+import type {Dispatch, Middleware} from 'redux';
+
+import type {HyperActions, HyperState} from '../../typings/hyper';
 import terms from '../terms';
-import {Middleware} from 'redux';
 
 // the only side effect we perform from middleware
 // is to write to the react term instance directly
 // to avoid a performance hit
-const writeMiddleware: Middleware = () => (next) => (action) => {
+const writeMiddleware: Middleware<{}, HyperState, Dispatch<HyperActions>> = () => (next) => (action: HyperActions) => {
   if (action.type === 'SESSION_PTY_DATA') {
     const term = terms[action.uid];
     if (term) {

lib/terms.ts

@@ -1,4 +1,4 @@
-import Term from './components/term';
+import type Term from './components/term';
 
 // react Term components add themselves
 // to this object upon mounting / unmounting

lib/utils/config.ts

@@ -1,11 +1,21 @@
-import {ipcRenderer} from 'electron';
-import {require as remoteRequire} from '@electron/remote';
+import {require as remoteRequire, getCurrentWindow} from '@electron/remote';
 // TODO: Should be updates to new async API https://medium.com/@nornagon/electrons-remote-module-considered-harmful-70d69500f31
 
+import {ipcRenderer} from './ipc';
+
 const plugins = remoteRequire('./plugins') as typeof import('../../app/plugins');
 
+Object.defineProperty(window, 'profileName', {
+  get() {
+    return getCurrentWindow().profileName;
+  },
+  set() {
+    throw new Error('profileName is readonly');
+  }
+});
+
 export function getConfig() {
-  return plugins.getDecoratedConfig();
+  return plugins.getDecoratedConfig(window.profileName);
 }
 
 export function subscribe(fn: (event: Electron.IpcRendererEvent, ...args: any[]) => void) {

lib/utils/effects.ts

@@ -1,3 +1,6 @@
+import type {Dispatch, Middleware} from 'redux';
+
+import type {HyperActions, HyperState} from '../../typings/hyper';
 /**
  * Simple redux middleware that executes
  * the `effect` field if provided in an action
@@ -6,8 +9,7 @@
  * defer or add to existing side effects at will
  * as the result of an action being triggered.
  */
-import {Middleware} from 'redux';
-const effectsMiddleware: Middleware = () => (next) => (action) => {
+const effectsMiddleware: Middleware<{}, HyperState, Dispatch<HyperActions>> = () => (next) => (action) => {
   const ret = next(action);
   if (action.effect) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call

lib/utils/file.ts

@@ -10,7 +10,8 @@
  * PR: https://github.com/kevva/executable/pull/10
  */
 
-import fs, {Stats} from 'fs';
+import fs from 'fs';
+import type {Stats} from 'fs';
 
 export function isExecutable(fileStat: Stats): boolean {
   if (process.platform === 'win32') {

lib/utils/ipc-child-process.ts

@@ -1,11 +1,13 @@
-import {ipcRenderer} from 'electron';
+import type {ExecFileOptions, ExecOptions} from 'child_process';
 
-export function exec(command: string, options?: any, callback?: (..._args: any) => void) {
+import {ipcRenderer} from './ipc';
+
+export function exec(command: string, options: ExecOptions, callback: (..._args: any) => void) {
   if (typeof options === 'function') {
     callback = options;
     options = {};
   }
-  ipcRenderer.invoke('child_process.exec', {command, options}).then(
+  ipcRenderer.invoke('child_process.exec', command, options).then(
     ({stdout, stderr}) => callback?.(null, stdout, stderr),
     (error) => callback?.(error, '', '')
   );
@@ -15,17 +17,17 @@ export function execSync() {
   console.error('Calling execSync from renderer is disabled');
 }
 
-export function execFile(file: string, args?: any, options?: any, callback?: (..._args: any) => void) {
+export function execFile(file: string, args: string[], options: ExecFileOptions, callback: (..._args: any) => void) {
   if (typeof options === 'function') {
     callback = options;
-    options = null;
+    options = {};
   }
   if (typeof args === 'function') {
     callback = args;
-    args = null;
-    options = null;
+    args = [];
+    options = {};
   }
-  ipcRenderer.invoke('child_process.execFile', {file, args, options}).then(
+  ipcRenderer.invoke('child_process.execFile', file, args, options).then(
     ({stdout, stderr}) => callback?.(null, stdout, stderr),
     (error) => callback?.(error, '', '')
   );
@@ -47,7 +49,7 @@ export function fork() {
   console.error('Calling fork from renderer is disabled');
 }
 
-export default {
+const IPCChildProcess = {
   exec,
   execSync,
   execFile,
@@ -56,3 +58,5 @@ export default {
   spawnSync,
   fork
 };
+
+export default IPCChildProcess;

lib/utils/ipc.ts

@@ -0,0 +1,5 @@
+import {ipcRenderer as _ipc} from 'electron';
+
+import type {IpcRendererWithCommands} from '../../typings/common';
+
+export const ipcRenderer = _ipc as IpcRendererWithCommands;

lib/utils/paste.ts

@@ -1,4 +1,5 @@
 import {clipboard} from 'electron';
+
 import plist from 'plist';
 
 const getPath = (platform: string) => {

lib/utils/plugins.ts

@@ -1,19 +1,19 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable @typescript-eslint/no-unsafe-return */
+import ChildProcess from 'child_process';
+import pathModule from 'path';
+
+import React, {PureComponent} from 'react';
+import type {ComponentType} from 'react';
+
 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';
-import {basename} from 'path';
-
-// patching Module._load
-// so plugins can `require` them without needing their own version
-// https://github.com/vercel/hyper/issues/619
-import React, {PureComponent} from 'react';
 import ReactDOM from 'react-dom';
-import Notification from '../components/notification';
-import notify from './notify';
-import {
+import {connect as reduxConnect} from 'react-redux';
+import type {ConnectOptions} from 'react-redux/es/components/connect';
+import type {Dispatch, Middleware} from 'redux';
+
+import type {
   hyperPlugin,
   IUiReducer,
   ISessionReducer,
@@ -24,12 +24,14 @@ import {
   TabsProps,
   TermGroupOwnProps,
   TermProps,
-  Assignable
-} from '../hyper';
-import {Middleware} from 'redux';
-import {ObjectTypedKeys} from './object';
+  Assignable,
+  HyperActions
+} from '../../typings/hyper';
+import Notification from '../components/notification';
+
 import IPCChildProcess from './ipc-child-process';
-import ChildProcess from 'child_process';
+import notify from './notify';
+import {ObjectTypedKeys} from './object';
 
 // remote interface to `../plugins`
 const plugins = remoteRequire('./plugins') as typeof import('../../app/plugins');
@@ -163,6 +165,9 @@ export function decorate<P extends Record<string, any>>(
   };
 }
 
+// patching Module._load
+// so plugins can `require` them without needing their own version
+// https://github.com/vercel/hyper/issues/619
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Module = require('module') as typeof import('module') & {_load: Function};
 const originalLoad = Module._load;
@@ -216,12 +221,10 @@ const clearModulesCache = () => {
   }
 };
 
-const pathModule = window.require('path') as typeof import('path');
-
 const getPluginName = (path: string) => pathModule.basename(path);
 
 const getPluginVersion = (path: string): string | null => {
-  let version = null;
+  let version: string | null = null;
   try {
     version = window.require(pathModule.resolve(path, 'package.json')).version as string;
   } catch (err) {
@@ -266,7 +269,7 @@ const loadModules = () => {
   const loadedPlugins = plugins.getLoadedPluginVersions().map((plugin: any) => plugin.name);
   modules = paths.plugins
     .concat(paths.localPlugins)
-    .filter((plugin) => loadedPlugins.indexOf(basename(plugin)) !== -1)
+    .filter((plugin) => loadedPlugins.indexOf(pathModule.basename(plugin)) !== -1)
     .map((path) => {
       let mod: hyperPlugin;
       const pluginName = getPluginName(path);
@@ -456,12 +459,15 @@ export function getTabProps<T extends Assignable<TabProps, T>>(tab: any, parentP
 export function connect<stateProps extends {}, dispatchProps>(
   stateFn: (state: HyperState) => stateProps,
   dispatchFn: (dispatch: HyperDispatch) => dispatchProps,
-  c: any,
-  d: Options = {}
+  c: null | undefined,
+  d: ConnectOptions = {}
 ) {
-  return (Class: any, name: keyof typeof connectors) => {
-    return reduxConnect<stateProps, dispatchProps, any, HyperState>(
-      (state) => {
+  return <P extends Record<string, unknown>>(
+    Class: ComponentType<P & stateProps & dispatchProps>,
+    name: keyof typeof connectors
+  ) => {
+    return reduxConnect(
+      (state: HyperState) => {
         let ret = stateFn(state);
         connectors[name].state.forEach((fn) => {
           let ret_;
@@ -487,7 +493,7 @@ export function connect<stateProps extends {}, dispatchProps>(
         });
         return ret;
       },
-      (dispatch) => {
+      (dispatch: HyperDispatch) => {
         let ret = dispatchFn(dispatch);
         connectors[name].dispatch.forEach((fn) => {
           let ret_;
@@ -518,7 +524,7 @@ export function connect<stateProps extends {}, dispatchProps>(
       },
       c,
       d
-    )(decorate(Class, name));
+    )(decorate(Class, name) as any) as ComponentType<P>;
   };
 }
 
@@ -570,7 +576,7 @@ export function decorateSessionsReducer(fn: ISessionReducer) {
 }
 
 // redux middleware generator
-export const middleware: Middleware = (store) => (next) => (action) => {
+export const middleware: Middleware<{}, HyperState, Dispatch<HyperActions>> = (store) => (next) => (action) => {
   const nextMiddleware = (remaining: Middleware[]) => (action_: any) =>
     remaining.length ? remaining[0](store)(nextMiddleware(remaining.slice(1)))(action_) : next(action_);
   nextMiddleware(middlewares)(action);

lib/utils/rpc.ts

@@ -1,13 +1,26 @@
 import {EventEmitter} from 'events';
-import {IpcRenderer, IpcRendererEvent} from 'electron';
-import electron from 'electron';
+
+import type {IpcRendererEvent} from 'electron';
+
+import type {
+  FilterNever,
+  IpcRendererWithCommands,
+  MainEvents,
+  RendererEvents,
+  TypedEmitter
+} from '../../typings/common';
+
+import {ipcRenderer} from './ipc';
+
 export default class Client {
-  emitter: EventEmitter;
-  ipc: IpcRenderer;
+  emitter: TypedEmitter<RendererEvents>;
+  ipc: IpcRendererWithCommands;
   id!: string;
+
   constructor() {
     this.emitter = new EventEmitter();
-    this.ipc = electron.ipcRenderer;
+    this.ipc = ipcRenderer;
+    this.emit = this.emit.bind(this);
     if (window.__rpcId) {
       setTimeout(() => {
         this.id = window.__rpcId;
@@ -15,11 +28,13 @@ export default class Client {
         this.emitter.emit('ready');
       }, 0);
     } else {
-      this.ipc.on('init', (ev: IpcRendererEvent, uid: string) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      this.ipc.on('init', (ev: IpcRendererEvent, uid: string, profileName: string) => {
         // we cache so that if the object
         // gets re-instantiated we don't
         // wait for a `init` event
         window.__rpcId = uid;
+        // window.profileName = profileName;
         this.id = uid;
         this.ipc.on(uid, this.ipcListener);
         this.emitter.emit('ready');
@@ -27,35 +42,43 @@ export default class Client {
     }
   }
 
-  ipcListener = (event: any, {ch, data}: {ch: string; data: any}) => {
-    this.emitter.emit(ch, data);
+  ipcListener = <U extends keyof RendererEvents>(
+    event: IpcRendererEvent,
+    {ch, data}: {ch: U; data: RendererEvents[U]}
+  ) => this.emitter.emit(ch, data);
+
+  on = <U extends keyof RendererEvents>(ev: U, fn: (arg0: RendererEvents[U]) => void) => {
+    this.emitter.on(ev, fn);
+    return this;
   };
 
-  on(ev: string, fn: (...args: any[]) => void) {
-    this.emitter.on(ev, fn);
-  }
-
-  once(ev: string, fn: (...args: any[]) => void) {
+  once = <U extends keyof RendererEvents>(ev: U, fn: (arg0: RendererEvents[U]) => void) => {
     this.emitter.once(ev, fn);
-  }
+    return this;
+  };
 
-  emit(ev: string, data: any) {
+  emit<U extends Exclude<keyof MainEvents, FilterNever<MainEvents>>>(ev: U): boolean;
+  emit<U extends FilterNever<MainEvents>>(ev: U, data: MainEvents[U]): boolean;
+  emit<U extends keyof MainEvents>(ev: U, data?: MainEvents[U]) {
     if (!this.id) {
       throw new Error('Not ready');
     }
     this.ipc.send(this.id, {ev, data});
+    return true;
   }
 
-  removeListener(ev: string, fn: (...args: any[]) => void) {
+  removeListener = <U extends keyof RendererEvents>(ev: U, fn: (arg0: RendererEvents[U]) => void) => {
     this.emitter.removeListener(ev, fn);
-  }
+    return this;
+  };
 
-  removeAllListeners() {
+  removeAllListeners = () => {
     this.emitter.removeAllListeners();
-  }
+    return this;
+  };
 
-  destroy() {
+  destroy = () => {
     this.removeAllListeners();
     this.ipc.removeAllListeners(this.id);
-  }
+  };
 }

lib/utils/term-groups.ts

@@ -1,4 +1,4 @@
-import {ITermState} from '../hyper';
+import type {ITermState} from '../../typings/hyper';
 
 export default function findBySession(termGroupState: ITermState, sessionUid: string) {
   const {termGroups} = termGroupState;

lib/v8-snapshot-util.ts

@@ -2,7 +2,7 @@ if (typeof snapshotResult !== 'undefined') {
   const Module = __non_webpack_require__('module');
   const originalLoad: (module: string, ...args: any[]) => any = Module._load;
 
-  Module._load = function _load(module: string, ...args: any[]): NodeModule {
+  Module._load = function _load(module: string, ...args: unknown[]): NodeModule {
     let cachedModule = snapshotResult.customRequire.cache[module];
 
     if (cachedModule) return cachedModule.exports;

package.json

@@ -1,26 +1,26 @@
 {
   "name": "hyper",
-  "version": "4.0.0-canary.2",
+  "version": "4.0.0-canary.5",
   "repository": "zeit/hyper",
   "scripts": {
     "start": "echo 'please run `yarn run dev` in one tab and then `yarn run app` in another one'",
     "app": "cross-env ELECTRONMON_LOGLEVEL=error electronmon target",
     "dev": "concurrently -n \"Webpack,TypeScript\" -c \"cyan.bold,blue.bold\" \"webpack -w\" \"tsc --build -v --pretty --watch --preserveWatchOutput\" -k",
-    "build": "cross-env NODE_ENV=production webpack && tsc -b -v",
+    "build": "cross-env NODE_ENV=production webpack && tsc -b -v && cross-env BABEL_ENV=production babel target/renderer/bundle.js --out-file target/renderer/bundle.js --no-comments --minified",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.json",
     "test": "yarn run lint && yarn run test:unit",
     "test:unit": "ava",
     "test:unit:watch": "yarn run test:unit -- --watch",
     "test:e2e": "ava --config ava-e2e.config.js",
-    "postinstall": "yarn run v8-snapshot && webpack --config-name hyper-app && electron-builder install-app-deps && yarn run rebuild-node-pty && cpy --cwd=target --parents \"node_modules/**/*\" \"../app/\" && husky install && yarn run generate-schema",
+    "postinstall": "yarn run v8-snapshot && webpack --config-name hyper-app && electron-builder install-app-deps && yarn run rebuild-node-pty && cpy --cwd=target node_modules \"../../app/\" && husky install && yarn run generate-schema",
     "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",
+    "dist": "yarn run build && electron-builder",
     "clean": "node ./bin/rimraf-standalone.js node_modules && node ./bin/rimraf-standalone.js ./app/node_modules && node ./bin/rimraf-standalone.js ./app/renderer",
     "v8-snapshot": "cross-env npm_config_arch=x64 yarn run v8-snapshot:arch && cross-env npm_config_arch=arm64 yarn run v8-snapshot:arch",
     "v8-snapshot:arch": "yarn run mk-snapshot && yarn run cp-snapshot",
     "mk-snapshot": "cross-env ELECTRON_CUSTOM_VERSION=$npm_package_devDependencies_electron node node_modules/electron-mksnapshot/download-mksnapshot.js && node bin/mk-snapshot.js",
     "cp-snapshot": "node bin/cp-snapshot.js",
-    "generate-schema": "typescript-json-schema ./lib/config.d.ts rawConfig -o ./app/config/schema.json --required"
+    "generate-schema": "typescript-json-schema ./typings/config.d.ts rawConfig -o ./app/config/schema.json --required"
   },
   "license": "MIT",
   "author": {
@@ -28,114 +28,114 @@
     "email": "team@zeit.co"
   },
   "dependencies": {
-    "@electron/remote": "2.0.9",
+    "@electron/remote": "2.1.2",
     "@react-icons/all-files": "4.1.0",
+    "@redux-devtools/extension": "^3.3.0",
     "args": "5.0.3",
-    "chalk": "5.2.0",
-    "clsx": "1.2.1",
+    "chalk": "5.3.0",
+    "clsx": "2.1.0",
     "color": "4.2.3",
     "columnify": "1.6.0",
-    "css-loader": "6.7.3",
+    "css-loader": "7.1.1",
     "got": "12.4.1",
     "json-loader": "0.5.7",
+    "lodash": "4.17.21",
     "mousetrap": "chabou/mousetrap#useCapture",
     "ms": "2.1.3",
-    "open": "8.4.0",
-    "ora": "5.4.1",
-    "parse-url": "8.1.0",
+    "open": "8.4.2",
+    "ora": "8.0.1",
     "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.8",
-    "redux": "4.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-redux": "8.1.3",
+    "react-use": "^17.5.0",
+    "redux": "4.2.1",
     "redux-thunk": "2.4.2",
     "registry-url": "^6.0.1",
-    "reselect": "4.1.7",
+    "reselect": "4.1.8",
     "seamless-immutable": "7.1.4",
-    "semver": "7.3.8",
+    "semver": "7.6.0",
     "shebang-loader": "0.0.1",
-    "styled-jsx": "5.1.1",
+    "styled-jsx": "5.1.2",
     "stylis": "3.5.4",
-    "typescript-json-schema": "0.55.0",
-    "uuid": "9.0.0",
-    "webpack-cli": "5.0.1",
-    "xterm": "4.19.0",
-    "xterm-addon-fit": "^0.5.0",
-    "xterm-addon-ligatures": "0.6.0-beta.19",
-    "xterm-addon-search": "^0.9.0",
-    "xterm-addon-unicode11": "^0.3.0",
-    "xterm-addon-web-links": "^0.6.0",
-    "xterm-addon-webgl": "0.12.0"
+    "typescript-json-schema": "0.63.0",
+    "uuid": "9.0.1",
+    "webpack-cli": "5.1.4",
+    "xterm": "5.3.0",
+    "xterm-addon-canvas": "0.5.0",
+    "xterm-addon-fit": "0.8.0",
+    "xterm-addon-image": "0.5.0",
+    "xterm-addon-ligatures": "0.7.0",
+    "xterm-addon-search": "0.13.0",
+    "xterm-addon-unicode11": "0.6.0",
+    "xterm-addon-web-links": "0.9.0",
+    "xterm-addon-webgl": "0.16.0"
   },
   "devDependencies": {
     "@ava/babel": "2.0.0",
-    "@ava/typescript": "^3.0.1",
-    "@babel/cli": "7.20.7",
-    "@babel/core": "7.20.7",
+    "@ava/typescript": "^4.1.0",
+    "@babel/cli": "7.24.1",
+    "@babel/core": "7.24.4",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "7.20.7",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
-    "@types/args": "5.0.0",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@babel/preset-react": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
+    "@electron/rebuild": "^3.6.0",
+    "@types/args": "5.0.3",
     "@types/async-retry": "1.4.3",
-    "@types/color": "3.0.3",
-    "@types/columnify": "^1.5.1",
-    "@types/fs-extra": "9.0.13",
-    "@types/lodash": "^4.14.191",
-    "@types/mkdirp": "1.0.2",
-    "@types/mousetrap": "1.6.11",
-    "@types/ms": "0.7.31",
-    "@types/node": "16.18.11",
-    "@types/pify": "5.0.1",
-    "@types/plist": "3.0.2",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@types/react-redux": "^7.1.22",
-    "@types/seamless-immutable": "7.1.16",
+    "@types/color": "3.0.6",
+    "@types/columnify": "^1.5.4",
+    "@types/fs-extra": "11.0.4",
+    "@types/lodash": "^4.17.0",
+    "@types/mousetrap": "1.6.15",
+    "@types/ms": "0.7.34",
+    "@types/node": "18.19.31",
+    "@types/plist": "3.0.5",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
+    "@types/seamless-immutable": "7.1.19",
     "@types/styled-jsx": "2.2.9",
-    "@types/terser-webpack-plugin": "5.2.0",
-    "@types/uuid": "9.0.0",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
-    "ava": "5.1.0",
-    "babel-loader": "9.1.0",
-    "concurrently": "7.6.0",
-    "copy-webpack-plugin": "11.0.0",
-    "cpy-cli": "^3.1.1",
+    "@types/uuid": "9.0.8",
+    "@typescript-eslint/eslint-plugin": "7.0.0",
+    "@typescript-eslint/parser": "6.21.0",
+    "ava": "6.1.2",
+    "babel-loader": "9.1.3",
+    "concurrently": "8.2.2",
+    "copy-webpack-plugin": "12.0.2",
+    "cpy-cli": "^5.0.0",
     "cross-env": "7.0.3",
-    "electron": "21.3.3",
-    "electron-builder": "^23.3.3",
-    "electron-devtools-installer": "3.2.0",
+    "electron": "22.3.25",
+    "electron-builder": "^24.13.3",
     "electron-link": "^0.6.0",
-    "electron-mksnapshot": "22.0.0",
-    "electron-notarize": "1.2.2",
-    "electron-rebuild": "3.2.9",
+    "electron-mksnapshot": "29.3.0",
     "electronmon": "^2.0.2",
-    "eslint": "7.32.0",
-    "eslint-config-prettier": "8.5.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-json-schema-validator": "^4.0.3",
-    "eslint-plugin-jsonc": "^2.5.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.31.1",
-    "husky": "8.0.2",
-    "inquirer": "9.1.4",
-    "node-addon-api": "5.0.0",
-    "node-gyp": "9.3.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-json-schema-validator": "^4.8.3",
+    "eslint-plugin-jsonc": "^2.15.1",
+    "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "7.34.1",
+    "husky": "9.0.11",
+    "inquirer": "9.2.18",
+    "node-addon-api": "8.0.0",
     "null-loader": "4.0.1",
-    "playwright": "1.27.1",
-    "plist": "3.0.6",
-    "prettier": "2.8.1",
+    "parse-url": "8.1.0",
+    "playwright": "1.43.1",
+    "plist": "3.1.0",
+    "prettier": "3.2.5",
     "proxyquire": "2.1.3",
-    "redux-devtools-extension": "2.13.9",
-    "style-loader": "3.3.1",
-    "terser": "5.16.1",
-    "ts-node": "10.9.1",
-    "typescript": "4.9.4",
-    "webpack": "5.75.0"
+    "style-loader": "4.0.0",
+    "terser": "5.30.3",
+    "terser-webpack-plugin": "^5.3.10",
+    "ts-node": "10.9.2",
+    "typescript": "5.4.5",
+    "webpack": "5.91.0"
   },
   "electronmon": {
     "patterns": [