ivy test

Bump electron from 7.1.2 to 7.1.3

.all-contributorsrc

@@ -198,6 +198,33 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "hdougie",
+      "name": "Howie Douglas",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/450799?v=4",
+      "profile": "https://github.com/hdougie",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "ckaczor",
+      "name": "Chris Kaczor",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/180906?v=4",
+      "profile": "https://chriskaczor.com",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "boxmein",
+      "name": "Johannes Kadak",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/358714?v=4",
+      "profile": "https://www.boxmein.net",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.eslintrc.yml

@@ -36,6 +36,7 @@ rules:
   '@typescript-eslint/require-await': off
   '@typescript-eslint/strict-boolean-expressions': off
   '@typescript-eslint/no-misused-promises': off
+  '@typescript-eslint/typedef': off
   '@typescript-eslint/no-use-before-define':
   - error
   - classes: false
@@ -44,7 +45,8 @@ rules:
   - error
   - never
   block-scoped-var: error
-  brace-style:
+  brace-style: off
+  '@typescript-eslint/brace-style':
   - error
   - 1tbs
   - allowSingleLine: true
@@ -85,3 +87,14 @@ rules:
   - as-needed
   - keywords: true
     numbers: true
+  quotes: off
+  '@typescript-eslint/quotes':
+  - error
+  - single
+  - allowTemplateLiterals: true
+  '@typescript-eslint/no-non-null-assertion': off
+  '@typescript-eslint/no-unnecessary-condition': off
+  '@typescript-eslint/no-untyped-public-signature': off # bugs out on constructors
+  '@typescript-eslint/restrict-template-expressions': off
+  '@typescript-eslint/no-dynamic-delete': off
+  '@typescript-eslint/prefer-nullish-coalescing': off

.github/stale.yml

@@ -1,7 +1,7 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
+daysUntilStale: 180
 # Number of days of inactivity before a stale issue is closed
-daysUntilClose: 14
+daysUntilClose: 90
 # Issues with these labels will never be considered stale
 exemptLabels:
   - "T: Enhancement"

.github/workflows/docs.yml

@@ -17,6 +17,11 @@ jobs:
       run: |
         eval $(ssh-agent -s)
         ssh-add <(echo "$DOCS_PRIVATE_KEY")
+        yarn cache clean
+        cd app
+        yarn
+        cd ..
+        rm app/node_modules/.yarn-integrity
         yarn
         yarn run docs
         rsync -e "ssh -o StrictHostKeyChecking=no" -arv docs/api/ root@ajenti.org:/srv/terminus-docs/

.github/workflows/lint.yml

@@ -0,0 +1,26 @@
+name: Lint
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: macOS-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v1
+
+    - name: Installing Node
+      uses: actions/setup-node@v1
+      with:
+        version: 10
+
+    - name: Install deps
+      run: |
+        npm i -g yarn@1.19.1
+        cd app
+        yarn
+        cd ..
+        rm app/node_modules/.yarn-integrity
+        yarn
+
+    - name: Lint
+      run: yarn run lint

.github/workflows/linux.yml

@@ -15,15 +15,13 @@ jobs:
 
     - name: Install deps
       run: |
+        npm i -g yarn@1.19.1
         cd app
         yarn
         cd ..
         rm app/node_modules/.yarn-integrity
         yarn
 
-    - name: Lint
-      run: yarn run lint
-
     - name: Build native deps
       run: scripts/build-native.js
 

.github/workflows/macos.yml

@@ -13,24 +13,42 @@ jobs:
       with:
         version: 10
 
-    - name: Build
+    - name: Install deps
       run: |
+        sudo npm i -g yarn@1.19.1
         cd app
         yarn
         cd ..
         rm app/node_modules/.yarn-integrity
         yarn
-        yarn run lint
-        scripts/build-native.js
-        yarn run build:typings
-        yarn run build
-        scripts/prepackage-plugins.js
-        scripts/build-macos.js
+
+    - name: Build native deps
+      run: scripts/build-native.js
+
+    - name: Build typings
+      run: yarn run build:typings
+
+    - name: Webpack
+      run: yarn run build
+
+    - name: Prepackage plugins
+      run: scripts/prepackage-plugins.js
+
+    - name: Build and sign packages
+      run: scripts/build-macos.js
+      if: github.repository == 'Eugeny/terminus' && github.event_name == 'push'
       env:
+        DEBUG: electron-builder,electron-builder:*
         GH_TOKEN: ${{ secrets.GH_TOKEN }}
         CSC_LINK: ${{ secrets.CSC_LINK }}
         CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
 
+    - name: Build packages without signing
+      run: scripts/build-macos.js
+      if: github.repository != 'Eugeny/terminus' || github.event_name != 'push'
+      env:
+        DEBUG: electron-builder,electron-builder:*
+
     - name: Package artifacts
       run: |
         mkdir artifact-pkg

.github/workflows/windows.yml

@@ -16,21 +16,24 @@ jobs:
     - name: Build
       shell: powershell
       run: |
-        cd app
-        yarn
-        cd ..
-        del app/node_modules/.yarn-integrity
+        npm i -g yarn@1.19.1
         yarn
         node scripts/build-native.js
-        yarn run build:typings
         yarn run build
         node scripts/prepackage-plugins.js
-        node scripts/build-windows.js
+
+    - name: Build and sign packages
+      run: node scripts/build-windows.js
+      if: github.repository == 'Eugeny/terminus' && github.event_name == 'push'
       env:
         GH_TOKEN: ${{ secrets.GH_TOKEN }}
         WIN_CSC_LINK: ${{ secrets.WIN_CSC_LINK }}
         WIN_CSC_KEY_PASSWORD: ${{ secrets.WIN_CSC_KEY_PASSWORD }}
 
+    - name: Build packages without signing
+      run: node scripts/build-windows.js
+      if: github.repository != 'Eugeny/terminus' || github.event_name != 'push'
+
     - name: Package artifacts
       run: |
         mkdir artifact-setup

.gitignore

@@ -24,3 +24,7 @@ yarn-error.log
 docs/api
 .travis.ssh.key
 *.code-workspace
+
+.electron-symbols
+sentry.properties
+sentry-symbols.js

.mergify.yml

@@ -0,0 +1,14 @@
+pull_request_rules:
+  - name: automatic merge on CI success and review
+    conditions:
+    - "status-success=Windows Build / Build"
+    - "status-success=macOS Build / Build"
+    - "status-success=Linux Build / Build"
+    - "status-success=continuous-integration/appveyor/pr"
+    - "#approved-reviews-by>=1"
+    - "#changes-requested-reviews-by=0"
+    - base=master
+    actions:
+      merge:
+        method: merge
+        strict: true

README.md

@@ -95,6 +95,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="http://yfwz100.github.io"><img src="https://avatars2.githubusercontent.com/u/983211?v=4" width="100px;" alt="Wang Zhi"/><br /><sub><b>Wang Zhi</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=yfwz100" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/jack1142"><img src="https://avatars0.githubusercontent.com/u/6032823?v=4" width="100px;" alt="jack1142"/><br /><sub><b>jack1142</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=jack1142" title="Code">💻</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/hdougie"><img src="https://avatars1.githubusercontent.com/u/450799?v=4" width="100px;" alt="Howie Douglas"/><br /><sub><b>Howie Douglas</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=hdougie" title="Code">💻</a></td>
+    <td align="center"><a href="https://chriskaczor.com"><img src="https://avatars2.githubusercontent.com/u/180906?v=4" width="100px;" alt="Chris Kaczor"/><br /><sub><b>Chris Kaczor</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=ckaczor" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.boxmein.net"><img src="https://avatars1.githubusercontent.com/u/358714?v=4" width="100px;" alt="Johannes Kadak"/><br /><sub><b>Johannes Kadak</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=boxmein" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->

app/lib/app.ts

@@ -22,7 +22,6 @@ export class Application {
         app.commandLine.appendSwitch('lang', 'EN')
 
         for (const flag of configData.flags || [['force_discrete_gpu', '0']]) {
-            console.log('Setting Electron flag:', flag.join('='))
             app.commandLine.appendSwitch(flag[0], flag[1])
         }
     }

app/lib/index.ts

@@ -1,8 +1,9 @@
+import './sentry'
 import './lru'
 import { app, ipcMain, Menu } from 'electron'
 import { parseArgs } from './cli'
 import { Application } from './app'
-import electronDebug = require('electron-debug')
+import * as electronDebug from 'electron-debug'
 
 if (!process.env.TERMINUS_PLUGINS) {
     process.env.TERMINUS_PLUGINS = ''
@@ -46,7 +47,7 @@ if (argv.d) {
     electronDebug({
         isEnabled: true,
         showDevTools: true,
-        devToolsMode: 'undocked'
+        devToolsMode: 'undocked',
     })
 }
 

app/lib/sentry.ts

@@ -0,0 +1,18 @@
+const { init } = process.type === 'main' ? require('@sentry/electron/dist/main') : require('@sentry/electron/dist/renderer')
+
+
+const SENTRY_DSN = 'https://4717a0a7ee0b4429bd3a0f06c3d7eec3@sentry.io/181876'
+let release
+try {
+    release = require('electron').app.getVersion()
+} catch {
+    release = require('electron').remote.app.getVersion()
+}
+
+init({
+    dsn: SENTRY_DSN,
+    release,
+    integrations (integrations) {
+        return integrations.filter(integration => integration.name !== 'Breadcrumbs')
+    },
+})

app/lib/window.ts

@@ -1,8 +1,9 @@
 import { Subject, Observable } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
 import { BrowserWindow, app, ipcMain, Rectangle, screen } from 'electron'
-import ElectronConfig = require('electron-config')
+import * as ElectronConfig from 'electron-config'
 import * as os from 'os'
+import * as path from 'path'
 
 import { loadConfig } from './config'
 
@@ -46,10 +47,11 @@ export class Window {
             minHeight: 300,
             webPreferences: {
                 nodeIntegration: true,
+                preload: path.join(__dirname, 'sentry.js'),
             },
             frame: false,
             show: false,
-            backgroundColor: '#00000000'
+            backgroundColor: '#00000000',
         }
 
         if (this.windowBounds) {
@@ -80,7 +82,7 @@ export class Window {
         this.window = new BrowserWindow(bwOptions)
         this.window.once('ready-to-show', () => {
             if (process.platform === 'darwin') {
-                this.window.setVibrancy('dark')
+                this.window.setVibrancy('window')
             } else if (process.platform === 'win32' && (configData.appearance || {}).vibrancy) {
                 this.setVibrancy(true)
             }
@@ -106,7 +108,7 @@ export class Window {
         this.ready = new Promise(resolve => {
             const listener = event => {
                 if (event.sender === this.window.webContents) {
-                    ipcMain.removeListener('app:ready', listener)
+                    ipcMain.removeListener('app:ready', listener as any)
                     resolve()
                 }
             }
@@ -147,14 +149,14 @@ export class Window {
         this.window.webContents.send(event, ...args)
     }
 
-    isDestroyed() {
+    isDestroyed () {
         return !this.window || this.window.isDestroyed();
     }
 
     private setupWindowManagement () {
         this.window.on('show', () => {
             this.visible.next(true)
-            this.window.webContents.send('host:window-shown')
+            this.send('host:window-shown')
         })
 
         this.window.on('hide', () => {
@@ -164,20 +166,20 @@ export class Window {
         let moveSubscription = new Observable<void>(observer => {
             this.window.on('move', () => observer.next())
         }).pipe(debounceTime(250)).subscribe(() => {
-            this.window.webContents.send('host:window-moved')
+            this.send('host:window-moved')
         })
 
         this.window.on('closed', () => {
             moveSubscription.unsubscribe()
         })
 
-        this.window.on('enter-full-screen', () => this.window.webContents.send('host:window-enter-full-screen'))
-        this.window.on('leave-full-screen', () => this.window.webContents.send('host:window-leave-full-screen'))
+        this.window.on('enter-full-screen', () => this.send('host:window-enter-full-screen'))
+        this.window.on('leave-full-screen', () => this.send('host:window-leave-full-screen'))
 
         this.window.on('close', event => {
             if (!this.closing) {
                 event.preventDefault()
-                this.window.webContents.send('host:window-close-request')
+                this.send('host:window-close-request')
                 return
             }
             this.windowConfig.set('windowBoundaries', this.windowBounds)

app/package.json

@@ -13,41 +13,43 @@
     "watch": "webpack --progress --color --watch"
   },
   "dependencies": {
-    "@angular/animations": "7.2.8",
-    "@angular/common": "7.2.8",
-    "@angular/compiler": "7.2.8",
-    "@angular/core": "7.2.8",
-    "@angular/forms": "7.2.8",
-    "@angular/platform-browser": "7.2.8",
-    "@angular/platform-browser-dynamic": "7.2.8",
-    "@ng-bootstrap/ng-bootstrap": "^4.2.0",
+    "@angular/animations": "9.0.0-rc.5",
+    "@angular/common": "9.0.0-rc.5",
+    "@angular/compiler": "9.0.0-rc.5",
+    "@angular/core": "9.0.0-rc.5",
+    "@angular/forms": "9.0.0-rc.5",
+    "@angular/platform-browser": "9.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "9.0.0-rc.5",
+    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
     "devtron": "1.4.0",
     "electron-config": "2.0.0",
     "electron-debug": "^3.0.1",
     "electron-is-dev": "1.1.0",
-    "electron-updater": "^4.0.6",
-    "fontmanager-redux": "0.3.3",
+    "electron-updater": "^4.2.0",
+    "fontmanager-redux": "0.4.0",
     "js-yaml": "3.13.1",
-    "keytar": "4.13.0",
+    "keytar": "^5.0.0",
     "mz": "^2.7.0",
-    "ngx-toastr": "^10.1.0",
-    "node-pty": "^0.9.0-beta22",
+    "ngx-toastr": "^11.2.1",
+    "node-pty": "^0.10.0-beta2",
     "npm": "6.9.0",
     "path": "0.12.7",
-    "rxjs": "^6.5.2",
-    "rxjs-compat": "^6.5.2",
-    "yargs": "^14.0.0",
-    "zone.js": "^0.8.29"
+    "rxjs": "^6.5.3",
+    "rxjs-compat": "^6.5.3",
+    "yargs": "^15.0.2",
+    "zone.js": "^0.10.2"
   },
   "optionalDependencies": {
-    "macos-native-processlist": "^1.0.1",
+    "macos-native-processlist": "^1.0.2",
     "windows-blurbehind": "^1.0.1",
-    "windows-native-registry": "^1.0.14",
+    "windows-native-registry": "^1.0.16",
     "windows-process-tree": "^0.2.4",
     "windows-swca": "^2.0.2"
   },
   "devDependencies": {
+    "@angular/localize": "^9.0.0-rc.7",
     "@types/mz": "0.0.32",
-    "node-abi": "^2.11.0"
+    "@types/node": "12.7.12",
+    "node-abi": "^2.13.0"
   }
 }

app/src/app.module.ts

@@ -1,20 +1,48 @@
-import { NgModule } from '@angular/core'
+import { NgModule, Compiler, Inject, Injector, ɵcreateInjector as createInjector } from '@angular/core'
+import '@angular/localize/init'
+import { CommonModule } from '@angular/common'
 import { BrowserModule } from '@angular/platform-browser'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
 
-export function getRootModule (plugins: any[]) {
-    const imports = [
+@NgModule({
+    imports: [
         BrowserModule,
-        ...plugins,
-        NgbModule.forRoot(),
+        CommonModule,
+        NgbModule,
         ToastrModule.forRoot({
             positionClass: 'toast-bottom-center',
             toastClass: 'toast',
             preventDuplicates: true,
             extendedTimeOut: 5000,
         }),
-    ]
+    ],
+})
+export class RootModule {
+    constructor (
+        private compiler: Compiler,
+        private injector: Injector,
+        @Inject('plugins') private plugins: any[],
+    ) { }
+
+    async ngDoBootstrap (app) {
+        console.log('bootstrap', app)
+        for (let plugin of this.plugins) {
+            console.log(plugin)
+            // try {
+            const injector = createInjector(plugin, this.injector)
+            console.log(injector)
+                const module = await this.compiler.compileModuleAsync(plugin)
+                console.log(module)
+            // } catch (e) {
+            //     console.error('Failed loading', plugin, e)
+            // }
+        }
+    }
+}
+
+
+export function setupRootModule (plugins: any[]) {
     const bootstrap = [
         ...plugins.filter(x => x.bootstrap).map(x => x.bootstrap),
     ]
@@ -22,11 +50,4 @@ export function getRootModule (plugins: any[]) {
     if (bootstrap.length === 0) {
         throw new Error('Did not find any bootstrap components. Are there any plugins installed?')
     }
-
-    @NgModule({
-        imports,
-        bootstrap,
-    }) class RootModule { } // eslint-disable-line @typescript-eslint/no-extraneous-class
-
-    return RootModule
 }

app/src/entry.preload.ts

@@ -1,4 +1,5 @@
 import '../lib/lru'
+import 'core-js/proposals/reflect-metadata'
 import 'source-sans-pro/source-sans-pro.css'
 import 'source-code-pro/source-code-pro.css'
 import '@fortawesome/fontawesome-free/css/solid.css'
@@ -6,33 +7,71 @@ import '@fortawesome/fontawesome-free/css/brands.css'
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 import 'ngx-toastr/toastr.css'
 import './preload.scss'
+import * as path from 'path'
 
-import * as Raven from 'raven-js'
+const nodeModule = require('module') // eslint-disable-line @typescript-eslint/no-var-requires
+const nodeRequire = (global as any).require
 
-const SENTRY_DSN = 'https://4717a0a7ee0b4429bd3a0f06c3d7eec3@sentry.io/181876'
 
-Raven.config(
-    SENTRY_DSN,
-    {
-        release: require('electron').remote.app.getVersion(),
-        dataCallback: (data: any) => {
-            const normalize = (filename: string) => {
-                const splitArray = filename.split('/')
-                return splitArray[splitArray.length - 1]
-            }
+const builtinModules = [
+    '@angular/animations',
+    '@angular/common',
+    '@angular/compiler',
+    '@angular/core',
+    '@angular/forms',
+    '@angular/localize',
+    '@angular/platform-browser',
+    '@angular/platform-browser-dynamic',
+    '@ng-bootstrap/ng-bootstrap',
+    'ngx-toastr',
+    'rxjs',
+    'rxjs/operators',
+    'rxjs/internal/observable/fromEvent',
+    'rxjs/internal/observable/merge',
+    'rxjs-compat/Subject',
+    'zone.js/dist/zone.js',
+    'terminus-core',
+    // 'terminus-settings',
+    // 'terminus-terminal',
+]
 
-            data.exception.values[0].stacktrace.frames.forEach((frame: any) => {
-                frame.filename = normalize(frame.filename)
-            })
+const cachedBuiltinModules = {}
 
-            data.culprit = data.exception.values[0].stacktrace.frames[0].filename
+if (process.env.TERMINUS_DEV) {
+    console.info(path.dirname(require('electron').remote.app.getAppPath()))
+    nodeModule.globalPaths.unshift(path.dirname(require('electron').remote.app.getAppPath()))
+    nodeModule.globalPaths.unshift(path.join(require('electron').remote.app.getAppPath(), 'node_modules'))
+}
 
-            return data
-        },
-    },
-)
+const originalRequire = (global as any).require
+;(global as any).require = function (query: string) {
+    if (cachedBuiltinModules[query]) {
+        return cachedBuiltinModules[query]
+    }
+    return originalRequire.apply(this, arguments)
+}
 
-process.on('uncaughtException' as any, (err) => {
-    Raven.captureException(err as any)
-    console.error(err)
+const originalModuleRequire = nodeModule.prototype.require
+nodeModule.prototype.require = function (query: string) {
+    if (cachedBuiltinModules[query]) {
+        return cachedBuiltinModules[query]
+    }
+    return originalModuleRequire.call(this, query)
+}
+
+global['require'].resolve = originalRequire.resolve
+nodeModule.prototype.require.resolve = originalModuleRequire.resolve
+
+builtinModules.forEach(m => {
+    const label = 'Caching ' + m
+    console.time(label)
+    try {
+        console.log(m + '/__ivy_ngcc__/fesm5/' + m.split('/')[1] + '.js')
+        cachedBuiltinModules[m] = nodeRequire(m + '/__ivy_ngcc__/fesm5/' + m.split('/')[1] + '.js')
+        console.log('loaded ivy')
+    } catch (e) {
+        console.error(e)
+        cachedBuiltinModules[m] = nodeRequire(m)
+    }
+    console.timeEnd(label)
 })

app/src/entry.ts

@@ -1,7 +1,3 @@
-import 'zone.js'
-import 'core-js/proposals/reflect-metadata'
-import 'rxjs'
-
 import * as isDev from 'electron-is-dev'
 
 import './global.scss'
@@ -10,7 +6,7 @@ import './toastr.scss'
 import { enableProdMode, NgModuleRef } from '@angular/core'
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 
-import { getRootModule } from './app.module'
+import { setupRootModule, RootModule } from './app.module'
 import { findPlugins, loadPlugins, PluginInfo } from './plugins'
 
 // Always land on the start view
@@ -19,7 +15,7 @@ location.hash = ''
 ;(process as any).enablePromiseAPI = true
 
 if (process.platform === 'win32' && !('HOME' in process.env)) {
-    process.env.HOME = process.env.HOMEDRIVE + process.env.HOMEPATH
+    process.env.HOME = `${process.env.HOMEDRIVE}${process.env.HOMEPATH}`
 }
 
 if (isDev) {
@@ -32,12 +28,14 @@ async function bootstrap (plugins: PluginInfo[], safeMode = false): Promise<NgMo
     if (safeMode) {
         plugins = plugins.filter(x => x.isBuiltin)
     }
-    const pluginsModules = await loadPlugins(plugins, (current, total) => {
+    const pluginModules = await loadPlugins(plugins, (current, total) => {
         (document.querySelector('.progress .bar') as HTMLElement).style.width = `${100 * current / total}%` // eslint-disable-line
     })
-    const module = getRootModule(pluginsModules)
-    window['rootModule'] = module
-    return platformBrowserDynamic().bootstrapModule(module)
+    setupRootModule(pluginModules)
+    window['rootModule'] = RootModule
+    return platformBrowserDynamic([
+        { provide: 'plugins', useValue: pluginModules },
+    ]).bootstrapModule(RootModule)
 }
 
 findPlugins().then(async plugins => {

app/src/plugins.ts

@@ -12,11 +12,8 @@ function normalizePath (path: string): string {
     return path
 }
 
-nodeRequire.main.paths.map((x: string) => nodeModule.globalPaths.push(normalizePath(x)))
+global['module'].paths.map((x: string) => nodeModule.globalPaths.push(normalizePath(x)))
 
-if (process.env.TERMINUS_DEV) {
-    nodeModule.globalPaths.unshift(path.dirname(require('electron').remote.app.getAppPath()))
-}
 
 const builtinPluginsPath = process.env.TERMINUS_DEV ? path.dirname(require('electron').remote.app.getAppPath()) : path.join((process as any).resourcesPath, 'builtin-plugins')
 
@@ -52,49 +49,6 @@ export interface PluginInfo {
     info?: any
 }
 
-const builtinModules = [
-    '@angular/animations',
-    '@angular/common',
-    '@angular/compiler',
-    '@angular/core',
-    '@angular/forms',
-    '@angular/platform-browser',
-    '@angular/platform-browser-dynamic',
-    '@ng-bootstrap/ng-bootstrap',
-    'ngx-toastr',
-    'rxjs',
-    'rxjs/operators',
-    'rxjs-compat/Subject',
-    'terminus-core',
-    'terminus-settings',
-    'terminus-terminal',
-    'zone.js/dist/zone.js',
-]
-
-const cachedBuiltinModules = {}
-builtinModules.forEach(m => {
-    const label = 'Caching ' + m
-    console.time(label)
-    cachedBuiltinModules[m] = nodeRequire(m)
-    console.timeEnd(label)
-})
-
-const originalRequire = (global as any).require
-;(global as any).require = function (query: string) {
-    if (cachedBuiltinModules[query]) {
-        return cachedBuiltinModules[query]
-    }
-    return originalRequire.apply(this, arguments)
-}
-
-const originalModuleRequire = nodeModule.prototype.require
-nodeModule.prototype.require = function (query: string) {
-    if (cachedBuiltinModules[query]) {
-        return cachedBuiltinModules[query]
-    }
-    return originalModuleRequire.call(this, query)
-}
-
 export async function findPlugins (): Promise<PluginInfo[]> {
     const paths = nodeModule.globalPaths
     let foundPlugins: PluginInfo[] = []
@@ -156,7 +110,9 @@ export async function findPlugins (): Promise<PluginInfo[]> {
         }
     }
 
-    (window as any).installedPlugins = foundPlugins
+    foundPlugins.sort((a, b) => a.name > b.name ? 1 : -1)
+
+    ;(window as any).installedPlugins = foundPlugins
     return foundPlugins
 }
 
@@ -165,6 +121,7 @@ export async function loadPlugins (foundPlugins: PluginInfo[], progress: Progres
     progress(0, 1)
     let index = 0
     for (const foundPlugin of foundPlugins) {
+        if (foundPlugin.name !== 'core') continue
         console.info(`Loading ${foundPlugin.name}: ${nodeRequire.resolve(foundPlugin.path)}`)
         progress(index, foundPlugins.length)
         try {

app/src/root.component.ts

@@ -1,6 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-    template: '<app-root></app-root>',
-})
-export class RootComponent { } // eslint-disable-line @typescript-eslint/no-extraneous-class

app/src/toastr.scss

@@ -10,6 +10,10 @@
     background-image: none;
     width: auto;
 
+    &.toast-error {
+      background-color: #BD362F;
+    }
+
     &.toast-info {
       background-color: #555;
     }

app/tsconfig.json

@@ -1,7 +1,8 @@
 {
     "compilerOptions": {
         "baseUrl": "./src",
-        "module": "commonjs",
+        "module": "es2015",
+        "moduleResolution": "node",
         "target": "es2015",
         "declaration": false,
         "noImplicitAny": false,
@@ -19,7 +20,10 @@
            "es2015.iterable",
            "es2017",
            "es7"
-        ]
+        ],
+        "paths": {
+            "*": ["../../app/node_modules/*"]
+        }
     },
     "compileOnSave": false,
     "exclude": [
@@ -28,5 +32,9 @@
         "*/node_modules",
         "terminus*",
         "platforms"
-    ]
+    ],
+    "angularCompilerOptions": {
+        "enableIvy": true,
+        "disableTypeScriptVersionCheck": true
+    }
 }

app/webpack.config.js

@@ -1,11 +1,13 @@
 const path = require('path')
 const webpack = require('webpack')
+const { AngularCompilerPlugin } = require('@ngtools/webpack')
 
 module.exports = {
   name: 'terminus',
   target: 'node',
   entry: {
     'index.ignore': 'file-loader?name=index.html!pug-html-loader!' + path.resolve(__dirname, './index.pug'),
+    sentry: path.resolve(__dirname, 'lib/sentry.ts'),
     preload: path.resolve(__dirname, 'src/entry.preload.ts'),
     bundle: path.resolve(__dirname, 'src/entry.ts'),
   },
@@ -27,13 +29,8 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.ts$/,
-        use: {
-          loader: 'awesome-typescript-loader',
-          options: {
-            configFileName: path.resolve(__dirname, 'tsconfig.json'),
-          },
-        },
+          test: /(?:\.ngfactory\.js|\.ngfactory|\.ngstyle\.js|\.ts)$/,
+          loader: '@ngtools/webpack',
       },
       { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
       { test: /\.css$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
@@ -78,5 +75,13 @@ module.exports = {
   },
   plugins: [
     new webpack.optimize.ModuleConcatenationPlugin(),
+    new webpack.DefinePlugin({
+      'process.type': '"renderer"'
+    }),
+    new AngularCompilerPlugin({
+        tsConfigPath: path.resolve(__dirname, 'tsconfig.json'),
+        entryModule: 'src/index#default',
+        sourceMap: true,
+    }),
   ],
 }

app/webpack.main.config.js

@@ -45,5 +45,8 @@ module.exports = {
   },
   plugins: [
     new webpack.optimize.ModuleConcatenationPlugin(),
+    new webpack.DefinePlugin({
+      'process.type': '"main"',
+    }),
   ],
 }

package.json

@@ -1,32 +1,39 @@
 {
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.10.2",
+    "@angular/compiler": "9.0.0-rc.5",
+    "@angular/compiler-cli": "9.0.0-rc.5",
+    "@angular/core": "9.0.0-rc.5",
+    "@fortawesome/fontawesome-free": "^5.11.2",
+    "@ngtools/webpack": "9.0.0-rc.5",
+    "@sentry/cli": "^1.49.0",
+    "@sentry/electron": "^1.0.0",
     "@types/electron-config": "^3.2.2",
     "@types/electron-debug": "^2.1.0",
-    "@types/fs-promise": "1.0.3",
     "@types/js-yaml": "^3.12.1",
-    "@types/node": "12.7.2",
-    "@types/webpack-env": "1.13.9",
-    "@typescript-eslint/eslint-plugin": "^1.13.0",
-    "@typescript-eslint/parser": "^1.13.0",
+    "@types/node": "12.7.12",
+    "@types/webpack-env": "1.14.1",
+    "@typescript-eslint/eslint-plugin": "^2.9.0",
+    "@typescript-eslint/parser": "^2.10.0",
     "apply-loader": "2.0.0",
     "awesome-typescript-loader": "^5.0.0",
-    "core-js": "^3.2.0",
-    "cross-env": "5.2.0",
-    "css-loader": "3.2.0",
-    "electron": "^6.0.5",
-    "electron-builder": "^21.2.0",
-    "electron-installer-snap": "^4.0.0",
+    "core-js": "^3.4.2",
+    "cross-env": "6.0.3",
+    "css-loader": "3.4.0",
+    "electron": "^7.1.3",
+    "electron-builder": "22.1.0",
+    "electron-download": "^4.1.1",
+    "electron-installer-snap": "^4.1.0",
     "electron-notarize": "^0.1.1",
     "electron-rebuild": "^1.8.5",
-    "eslint": "^5.16.0",
-    "file-loader": "^4.1.0",
+    "eslint": "^6.7.1",
+    "eslint-plugin-import": "^2.18.2",
+    "file-loader": "^5.0.2",
     "graceful-fs": "^4.2.2",
     "html-loader": "0.5.5",
     "json-loader": "0.5.7",
-    "node-abi": "^2.11.0",
-    "node-gyp": "^5.0.3",
-    "node-sass": "^4.12.0",
+    "node-abi": "^2.12.0",
+    "node-gyp": "^6.0.1",
+    "node-sass": "^4.13.0",
     "npmlog": "4.1.2",
     "npx": "^10.2.0",
     "pug": "^2.0.4",
@@ -34,22 +41,21 @@
     "pug-lint": "^2.6.0",
     "pug-loader": "^2.4.0",
     "pug-static-loader": "2.0.0",
-    "raven-js": "3.27.2",
-    "raw-loader": "3.1.0",
-    "sass-loader": "^7.3.1",
+    "raw-loader": "4.0.0",
+    "sass-loader": "^8.0.0",
     "shelljs": "0.8.3",
-    "source-code-pro": "^2.30.1",
-    "source-sans-pro": "2.45.0",
-    "style-loader": "^1.0.0",
+    "source-code-pro": "^2.30.2",
+    "source-sans-pro": "3.6.0",
+    "style-loader": "^1.0.1",
     "svg-inline-loader": "^0.8.0",
-    "to-string-loader": "1.1.5",
+    "to-string-loader": "1.1.6",
     "tslib": "^1.10.0",
-    "typedoc": "^0.15.0",
-    "typescript": "^3.5.3",
-    "url-loader": "^2.1.0",
-    "val-loader": "1.1.1",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.6",
+    "typedoc": "^0.15.3",
+    "typescript": "^3.7.3",
+    "url-loader": "^3.0.0",
+    "val-loader": "2.1.0",
+    "webpack": "4",
+    "webpack-cli": "^3.3.10",
     "yaml-loader": "0.5.0"
   },
   "resolutions": {
@@ -134,8 +140,5 @@
     "lint": "eslint --ext ts */src",
     "postinstall": "node ./scripts/install-deps.js"
   },
-  "repository": "eugeny/terminus",
-  "dependencies": {
-    "eslint-plugin-import": "^2.18.2"
-  }
+  "repository": "eugeny/terminus"
 }

scripts/install-deps.js

@@ -25,8 +25,5 @@ if (['darwin', 'linux'].includes(process.platform)) {
   for (let x of vars.builtinPlugins) {
     sh.ln('-fs', '../' + x, x)
   }
-  for (let x of vars.bundledModules) {
-    sh.ln('-fs', '../app/node_modules/' + x, x)
-  }
   sh.cd('..')
 }

scripts/vars.js

@@ -22,8 +22,4 @@ exports.builtinPlugins = [
   'terminus-plugin-manager',
   'terminus-ssh',
 ]
-exports.bundledModules = [
-  '@angular',
-  '@ng-bootstrap',
-]
 exports.electronVersion = electronInfo.version

terminus-community-color-schemes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminus-community-color-schemes",
-  "version": "1.0.83-nightly.0",
+  "version": "1.0.98-nightly.0",
   "description": "Community color schemes for Terminus",
   "keywords": [
     "terminus-builtin-plugin"

terminus-community-color-schemes/webpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
     target: 'node',
     entry: 'src/index.ts',
     context: __dirname,
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'eval-cheap-module-source-map',
     output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'index.js',

terminus-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminus-core",
-  "version": "1.0.83-nightly.4",
+  "version": "1.0.98-nightly.0",
   "description": "Terminus core",
   "keywords": [
     "terminus-builtin-plugin"
@@ -23,12 +23,12 @@
     "axios": "^0.19.0",
     "bootstrap": "^4.1.3",
     "core-js": "^3.1.2",
-    "deepmerge": "^3.2.0",
+    "deepmerge": "^4.1.1",
     "electron-updater": "^4.0.6",
     "js-yaml": "^3.9.0",
     "mixpanel": "^0.10.2",
     "ng2-dnd": "^5.0.2",
-    "ngx-perfect-scrollbar": "^6.0.0",
+    "ngx-perfect-scrollbar": "^8.0.0",
     "shell-escape": "^0.2.0",
     "uuid": "^3.3.2",
     "winston": "^3.2.1"

terminus-core/src/api/tabRecovery.ts

@@ -34,5 +34,5 @@ export abstract class TabRecoveryProvider {
      * @returns [[RecoveredTab]] descriptor containing tab type and component inputs
      *          or `null` if this token is from a different tab type or is not supported
      */
-    abstract async recover (recoveryToken: any): Promise<RecoveredTab | null>
+    abstract async recover (recoveryToken: any): Promise<RecoveredTab|null>
 }

terminus-core/src/api/toolbarButtonProvider.ts

@@ -5,7 +5,7 @@ export interface ToolbarButton {
     /**
      * Raw SVG icon code
      */
-    icon: string
+    icon?: string
 
     title: string
 

terminus-core/src/components/appRoot.component.pug

@@ -10,8 +10,8 @@ title-bar(
         .inset.background(*ngIf='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"')
         .tabs(
             dnd-sortable-container,
-            [sortableData]='app.tabs',
         )
+            //- [sortableData]='app.tabs',
             tab-header(
                 *ngFor='let tab of app.tabs; let idx = index',
                 dnd-sortable,
@@ -47,8 +47,11 @@ title-bar(
                         (click)='item.click()',
                         ngbDropdownItem,
                     )
-                        .icon-wrapper([innerHTML]='sanitizeIcon(item.icon)')
-                        .ml-3 {{item.title}}
+                        .icon-wrapper(
+                            *ngIf='hasIcons(button.submenuItems)',
+                            [innerHTML]='sanitizeIcon(item.icon)'
+                        )
+                        div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
 
         .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
 
@@ -70,8 +73,11 @@ title-bar(
                         (click)='item.click()',
                         ngbDropdownItem,
                     )
-                        .icon-wrapper([innerHTML]='sanitizeIcon(item.icon)')
-                        .ml-3 {{item.title}}
+                        .icon-wrapper(
+                            *ngIf='hasIcons(button.submenuItems)',
+                            [innerHTML]='sanitizeIcon(item.icon)'
+                        )
+                        div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
 
             button.btn.btn-secondary.btn-tab-bar.btn-update(
                 *ngIf='updatesAvailable',

terminus-core/src/components/appRoot.component.scss

@@ -18,6 +18,7 @@ $tab-border-radius: 4px;
 
 
 .content {
+    height: 100%;
     flex: auto;
     display: flex;
     flex-direction: column-reverse;

terminus-core/src/components/appRoot.component.ts

@@ -20,8 +20,8 @@ import { AppService, ToolbarButton, ToolbarButtonProvider } from '../api'
 /** @hidden */
 @Component({
     selector: 'app-root',
-    template: require('./appRoot.component.pug'),
-    styles: [require('./appRoot.component.scss')],
+    templateUrl: './appRoot.component.pug',
+    styleUrls: ['./appRoot.component.scss'],
     animations: [
         trigger('animateTab', [
             state('in', style({
@@ -128,7 +128,9 @@ export class AppRootComponent {
         })
 
         this.hostApp.windowCloseRequest$.subscribe(async () => {
-            await this.app.closeAllTabs() && this.hostApp.closeWindow()
+            if (await this.app.closeAllTabs()) {
+                this.hostApp.closeWindow()
+            }
         })
 
         if (window['safeModeReason']) {
@@ -144,7 +146,7 @@ export class AppRootComponent {
         config.changed$.subscribe(() => this.updateVibrancy())
         this.updateVibrancy()
 
-        let lastProgress = null
+        let lastProgress: number|null = null
         this.app.tabOpened$.subscribe(tab => {
             this.unsortedTabs.push(tab)
             tab.progress$.subscribe(progress => {
@@ -248,6 +250,10 @@ export class AppRootComponent {
         }
     }
 
+    hasIcons (submenuItems: ToolbarButton[]): boolean {
+        return submenuItems.some(x => !!x.icon)
+    }
+
     sanitizeIcon (icon: string): any {
         return this.domSanitizer.bypassSecurityTrustHtml(icon || '')
     }
@@ -258,7 +264,7 @@ export class AppRootComponent {
             buttons = buttons.concat(provider.provide())
         })
         return buttons
-            .filter(button => button.weight > 0 === aboveZero)
+            .filter(button => (button.weight || 0) > 0 === aboveZero)
             .sort((a: ToolbarButton, b: ToolbarButton) => (a.weight || 0) - (b.weight || 0))
     }
 

terminus-core/src/components/baseTab.component.ts

@@ -36,7 +36,7 @@ export abstract class BaseTabComponent {
     /**
      * CSS color override for the tab's header
      */
-    color: string = null
+    color: string|null = null
 
     protected hasFocus = false
 
@@ -50,14 +50,14 @@ export abstract class BaseTabComponent {
     private titleChange = new Subject<string>()
     private focused = new Subject<void>()
     private blurred = new Subject<void>()
-    private progress = new Subject<number>()
+    private progress = new Subject<number|null>()
     private activity = new Subject<boolean>()
     private destroyed = new Subject<void>()
 
     get focused$ (): Observable<void> { return this.focused }
     get blurred$ (): Observable<void> { return this.blurred }
     get titleChange$ (): Observable<string> { return this.titleChange }
-    get progress$ (): Observable<number> { return this.progress }
+    get progress$ (): Observable<number|null> { return this.progress }
     get activity$ (): Observable<boolean> { return this.activity }
     get destroyed$ (): Observable<void> { return this.destroyed }
     get recoveryStateChangedHint$ (): Observable<void> { return this.recoveryStateChangedHint }
@@ -83,7 +83,7 @@ export abstract class BaseTabComponent {
      *
      * @param  {type} progress: value between 0 and 1, or `null` to remove
      */
-    setProgress (progress: number) {
+    setProgress (progress: number|null) {
         this.progress.next(progress)
         if (progress) {
             if (this.progressClearTimeout) {
@@ -125,7 +125,7 @@ export abstract class BaseTabComponent {
     /**
      * Override this to enable task completion notifications for the tab
      */
-    async getCurrentProcess (): Promise<BaseTabProcess> {
+    async getCurrentProcess (): Promise<BaseTabProcess|null> {
         return null
     }
 

terminus-core/src/components/checkbox.component.pug

@@ -1,4 +0,0 @@
-.icon(tabindex='0', [class.active]='model', (keyup.space)='click()')
-    i.fas.fa-square.off
-    i.fas.fa-check-square.on
-.text {{text}}

terminus-core/src/components/checkbox.component.scss

@@ -1,55 +0,0 @@
-:host {
-    cursor: pointer;
-    margin: 5px 0;
-
-    &:focus {
-        background: rgba(255,255,255,.05);
-        border-radius: 5px;
-    }
-
-    &:active {
-        background: rgba(255,255,255,.1);
-        border-radius: 3px;
-    }
-
-    &[disabled] {
-        opacity: 0.5;
-    }
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .off {
-        color: rgba(0, 0, 0, .5);
-    }
-
-    .icon {
-        position: relative;
-        flex: none;
-        width: 14px;
-        height: 14px;
-
-        i {
-            position: absolute;
-            left: 0;
-            top: -2px;
-            transition: 0.25s opacity;
-            display: block;
-            font-size: 18px;
-        }
-
-        i.on, &.active i.off {
-            opacity: 0;
-        }
-
-        i.off, &.active i.on {
-            opacity: 1;
-        }
-    }
-
-    .text {
-        flex: auto;
-        margin-left: 8px;
-    }
-}

terminus-core/src/components/checkbox.component.ts

@@ -4,8 +4,12 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 /** @hidden */
 @Component({
     selector: 'checkbox',
-    template: require('./checkbox.component.pug'),
-    styles: [require('./checkbox.component.scss')],
+    template: `
+        <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" [(ngModel)]='model'>
+            <label class="custom-control-label">{{text}}</label>
+        </div>
+    `,
     providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true },
     ],

terminus-core/src/components/renameTabModal.component.ts

@@ -4,7 +4,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 /** @hidden */
 @Component({
     selector: 'rename-tab-modal',
-    template: require('./renameTabModal.component.pug'),
+    templateUrl: './renameTabModal.component.pug',
 })
 export class RenameTabModalComponent {
     @Input() value: string

terminus-core/src/components/safeModeModal.component.ts

@@ -3,7 +3,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 /** @hidden */
 @Component({
-    template: require('./safeModeModal.component.pug'),
+    templateUrl: './safeModeModal.component.pug',
 })
 export class SafeModeModalComponent {
     @Input() error: Error

terminus-core/src/components/splitTab.component.ts

@@ -33,8 +33,8 @@ export class SplitContainer {
     /**
      * @return Flat list of all tabs inside this container
      */
-    getAllTabs () {
-        let r = []
+    getAllTabs (): BaseTabComponent[] {
+        let r: BaseTabComponent[] = []
         for (const child of this.children) {
             if (child instanceof SplitContainer) {
                 r = r.concat(child.getAllTabs())
@@ -94,7 +94,7 @@ export class SplitContainer {
     }
 
     async serialize () {
-        const children = []
+        const children: any[] = []
         for (const child of this.children) {
             if (child instanceof SplitContainer) {
                 children.push(await child.serialize())
@@ -138,7 +138,7 @@ export interface SplitSpannerInfo {
             (change)='onSpannerAdjusted(spanner)'
         ></split-tab-spanner>
     `,
-    styles: [require('./splitTab.component.scss')],
+    styleUrls: ['./splitTab.component.scss'],
 })
 export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDestroy {
     /** @hidden */
@@ -292,9 +292,9 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
     /**
      * Inserts a new `tab` to the `side` of the `relative` tab
      */
-    addTab (tab: BaseTabComponent, relative: BaseTabComponent, side: SplitDirection) {
-        let target = this.getParentOf(relative) || this.root
-        let insertIndex = target.children.indexOf(relative)
+    addTab (tab: BaseTabComponent, relative: BaseTabComponent|null, side: SplitDirection) {
+        let target = (relative ? this.getParentOf(relative) : null) || this.root
+        let insertIndex = relative ? target.children.indexOf(relative) : -1
 
         if (
             target.orientation === 'v' && ['l', 'r'].includes(side) ||
@@ -302,7 +302,7 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
         ) {
             const newContainer = new SplitContainer()
             newContainer.orientation = target.orientation === 'v' ? 'h' : 'v'
-            newContainer.children = [relative]
+            newContainer.children = relative ? [relative] : []
             newContainer.ratios = [1]
             target.children[insertIndex] = newContainer
             target = newContainer
@@ -333,6 +333,9 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
 
     removeTab (tab: BaseTabComponent) {
         const parent = this.getParentOf(tab)
+        if (!parent) {
+            return
+        }
         const index = parent.children.indexOf(tab)
         parent.ratios.splice(index, 1)
         parent.children.splice(index, 1)
@@ -356,11 +359,18 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
     navigate (dir: SplitDirection) {
         let rel: BaseTabComponent | SplitContainer = this.focusedTab
         let parent = this.getParentOf(rel)
+        if (!parent) {
+            return
+        }
+
         const orientation = ['l', 'r'].includes(dir) ? 'h' : 'v'
 
         while (parent !== this.root && parent.orientation !== orientation) {
             rel = parent
             parent = this.getParentOf(rel)
+            if (!parent) {
+                return
+            }
         }
 
         if (parent.orientation !== orientation) {
@@ -381,13 +391,15 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
 
     async splitTab (tab: BaseTabComponent, dir: SplitDirection) {
         const newTab = await this.tabsService.duplicate(tab)
-        this.addTab(newTab, tab, dir)
+        if (newTab) {
+            this.addTab(newTab, tab, dir)
+        }
     }
 
     /**
      * @returns the immediate parent of `tab`
      */
-    getParentOf (tab: BaseTabComponent | SplitContainer, root?: SplitContainer): SplitContainer {
+    getParentOf (tab: BaseTabComponent | SplitContainer, root?: SplitContainer): SplitContainer|null {
         root = root || this.root
         for (const child of root.children) {
             if (child instanceof SplitContainer) {
@@ -414,8 +426,8 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
     }
 
     /** @hidden */
-    async getCurrentProcess (): Promise<BaseTabProcess> {
-        return (await Promise.all(this.getAllTabs().map(x => x.getCurrentProcess()))).find(x => !!x)
+    async getCurrentProcess (): Promise<BaseTabProcess|null> {
+        return (await Promise.all(this.getAllTabs().map(x => x.getCurrentProcess()))).find(x => !!x) || null
     }
 
     /** @hidden */
@@ -443,8 +455,10 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
 
     private detachTabView (tab: BaseTabComponent) {
         const ref = this.viewRefs.get(tab)
-        this.viewRefs.delete(tab)
-        this.viewContainer.remove(this.viewContainer.indexOf(ref))
+        if (ref) {
+            this.viewRefs.delete(tab)
+            this.viewContainer.remove(this.viewContainer.indexOf(ref))
+        }
     }
 
     private layout () {
@@ -471,7 +485,7 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
             if (child instanceof SplitContainer) {
                 this.layoutInternal(child, childX, childY, childW, childH)
             } else {
-                const element = this.viewRefs.get(child).rootNodes[0]
+                const element = this.viewRefs.get(child)!.rootNodes[0]
                 element.style.position = 'absolute'
                 element.style.left = `${childX}%`
                 element.style.top = `${childY}%`
@@ -518,7 +532,7 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
 /** @hidden */
 @Injectable()
 export class SplitTabRecoveryProvider extends TabRecoveryProvider {
-    async recover (recoveryToken: any): Promise<RecoveredTab> {
+    async recover (recoveryToken: any): Promise<RecoveredTab|null> {
         if (recoveryToken && recoveryToken.type === 'app:split-tab') {
             return {
                 type: SplitTabComponent,

terminus-core/src/components/splitTabSpanner.component.ts

@@ -5,7 +5,7 @@ import { SplitContainer } from './splitTab.component'
 @Component({
     selector: 'split-tab-spanner',
     template: '',
-    styles: [require('./splitTabSpanner.component.scss')],
+    styleUrls: ['./splitTabSpanner.component.scss'],
 })
 export class SplitTabSpannerComponent {
     @Input() container: SplitContainer
@@ -67,13 +67,13 @@ export class SplitTabSpannerComponent {
                 this.container.x,
                 this.container.y + this.container.h * this.container.getOffsetRatio(this.index),
                 this.container.w,
-                null
+                0
             )
         } else {
             this.setDimensions(
                 this.container.x + this.container.w * this.container.getOffsetRatio(this.index),
                 this.container.y,
-                null,
+                0,
                 this.container.h
             )
         }
@@ -82,7 +82,7 @@ export class SplitTabSpannerComponent {
     private setDimensions (x: number, y: number, w: number, h: number) {
         this.cssLeft = `${x}%`
         this.cssTop = `${y}%`
-        this.cssWidth = w ? `${w}%` : null
-        this.cssHeight = h ? `${h}%` : null
+        this.cssWidth = w ? `${w}%` : 'initial'
+        this.cssHeight = h ? `${h}%` : 'initial'
     }
 }

terminus-core/src/components/startPage.component.ts

@@ -7,8 +7,8 @@ import { ToolbarButton, ToolbarButtonProvider } from '../api'
 /** @hidden */
 @Component({
     selector: 'start-page',
-    template: require('./startPage.component.pug'),
-    styles: [require('./startPage.component.scss')],
+    templateUrl: './startPage.component.pug',
+    styleUrls: ['./startPage.component.scss'],
 })
 export class StartPageComponent {
     version: string

terminus-core/src/components/tabBody.component.ts

@@ -10,9 +10,9 @@ import { BaseTabComponent } from '../components/baseTab.component'
         </perfect-scrollbar-->
         <ng-template #placeholder></ng-template>
     `,
-    styles: [
-        require('./tabBody.component.scss'),
-        require('./tabBody.deep.component.css'),
+    styleUrls: [
+        './tabBody.component.scss',
+        './tabBody.deep.component.css',
     ],
 })
 export class TabBodyComponent implements OnChanges {

terminus-core/src/components/tabHeader.component.scss

@@ -48,7 +48,7 @@ $tabs-height: 38px;
         width: $button-size;
         height: $button-size;
         border-radius: $button-size / 2;
-        line-height: $button-size * 0.9;
+        line-height: $button-size;
         align-self: center;
         margin-right: 10px;
 

terminus-core/src/components/tabHeader.component.ts

@@ -17,15 +17,15 @@ export interface SortableComponentProxy {
 /** @hidden */
 @Component({
     selector: 'tab-header',
-    template: require('./tabHeader.component.pug'),
-    styles: [require('./tabHeader.component.scss')],
+    templateUrl: './tabHeader.component.pug',
+    styleUrls: ['./tabHeader.component.scss'],
 })
 export class TabHeaderComponent {
     @Input() index: number
     @Input() @HostBinding('class.active') active: boolean
     @Input() @HostBinding('class.has-activity') hasActivity: boolean
     @Input() tab: BaseTabComponent
-    @Input() progress: number
+    @Input() progress: number|null
     @ViewChild('handle') handle: ElementRef
 
     private constructor (
@@ -78,12 +78,21 @@ export class TabHeaderComponent {
         this.showRenameTabModal()
     }
 
-    @HostListener('auxclick', ['$event']) async onAuxClick ($event: MouseEvent) {
+    @HostListener('mousedown', ['$event']) async onMouseDown ($event: MouseEvent) {
+        if ($event.which === 2) {
+            $event.preventDefault()
+        }
+    }
+
+    @HostListener('mouseup', ['$event']) async onMouseUp ($event: MouseEvent) {
         if ($event.which === 2) {
             this.app.closeTab(this.tab, true)
         }
+    }
+
+    @HostListener('auxclick', ['$event']) async onAuxClick ($event: MouseEvent) {
         if ($event.which === 3) {
-            event.preventDefault()
+            $event.preventDefault()
 
             const contextMenu = this.electron.remote.Menu.buildFromTemplate(await this.buildContextMenu())
 

terminus-core/src/components/titleBar.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core'
+import { HostAppService } from '../services/hostApp.service'
 
 /** @hidden */
 @Component({
     selector: 'title-bar',
-    template: require('./titleBar.component.pug'),
-    styles: [require('./titleBar.component.scss')],
+    templateUrl: './titleBar.component.pug',
+    styleUrls: ['./titleBar.component.scss'],
 })
-export class TitleBarComponent { } // eslint-disable-line @typescript-eslint/no-extraneous-class
+export class TitleBarComponent {
+    constructor (public hostApp: HostAppService) { }
+}

terminus-core/src/components/toggle.component.scss

@@ -16,55 +16,8 @@
     padding-left: 10px;
     margin-left: -10px;
 
-    &:focus {
-        background: rgba(255,255,255,.05);
-        border-radius: 5px;
-    }
-
     &[disabled] {
         opacity: 0.5;
     }
 
-    .body {
-        $border-width: 2px;
-        border-radius: 5px;
-        border: $border-width solid rgba(255, 255, 255, .2);
-        padding: $padding;
-        height: $toggle-size + $border-width * 2 + $padding * 2;
-        width: $toggle-size * 2 + $border-width * 2 + $padding * 2;
-
-        position: relative;
-
-        .toggle {
-            position: absolute;
-            border-radius: 2px;
-            width: $toggle-size;
-            height: $toggle-size;
-            background: #475158;
-            top: $padding;
-            left: $padding;
-            transition: 0.25s left;
-            line-height: 19px;
-            text-align: center;
-            font-size: 10px;
-
-            i {
-                opacity: 0;
-                transition: 0.25s opacity;
-            }
-        }
-    }
-
-    &.active .body .toggle {
-        left: $toggle-size + $padding;
-
-        i {
-            color: white;
-            opacity: 1;
-        }
-    }
-
-    &:active {
-        background: rgba(255,255,255,.1);
-    }
 }

terminus-core/src/components/toggle.component.ts

@@ -6,15 +6,12 @@ import { CheckboxComponent } from './checkbox.component'
 @Component({
     selector: 'toggle',
     template: `
-      <div class="switch">
-        <div class="body">
-          <div class="toggle" [class.bg-primary]='model'>
-            <i class="fa fa-check"></i>
-          </div>
-        </div>
-      </div>
+    <div class="custom-control custom-switch">
+      <input type="checkbox" class="custom-control-input" [(ngModel)]='model'>
+      <label class="custom-control-label"></label>
+    </div>
     `,
-    styles: [require('./toggle.component.scss')],
+    styleUrls: ['./toggle.component.scss'],
     providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true },
     ],

terminus-core/src/components/welcomeTab.component.ts

@@ -6,8 +6,8 @@ import { AppService } from '../services/app.service'
 /** @hidden */
 @Component({
     selector: 'welcome-page',
-    template: require('./welcomeTab.component.pug'),
-    styles: [require('./welcomeTab.component.scss')],
+    templateUrl: './welcomeTab.component.pug',
+    styleUrls: ['./welcomeTab.component.scss'],
 })
 export class WelcomeTabComponent extends BaseTabComponent {
     constructor (

terminus-core/src/components/windowControls.component.ts

@@ -5,13 +5,15 @@ import { AppService } from '../services/app.service'
 /** @hidden */
 @Component({
     selector: 'window-controls',
-    template: require('./windowControls.component.pug'),
-    styles: [require('./windowControls.component.scss')],
+    templateUrl: './windowControls.component.pug',
+    styleUrls: ['./windowControls.component.scss'],
 })
 export class WindowControlsComponent {
     constructor (public hostApp: HostAppService, public app: AppService) { }
 
     async closeWindow () {
-        await this.app.closeAllTabs() && this.hostApp.closeWindow()
+        if (await this.app.closeAllTabs()) {
+            this.hostApp.closeWindow()
+        }
     }
 }

terminus-core/src/index.ts

@@ -1,10 +1,11 @@
-import { NgModule, ModuleWithProviders } from '@angular/core'
+import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar'
-import { DndModule } from 'ng2-dnd'
+// import { DndModule } from 'ng2-dnd'
 
 import { AppRootComponent } from './components/appRoot.component'
 import { CheckboxComponent } from './components/checkbox.component'
@@ -25,7 +26,7 @@ import { AutofocusDirective } from './directives/autofocus.directive'
 import { HotkeyProvider } from './api/hotkeyProvider'
 import { ConfigProvider } from './api/configProvider'
 import { Theme } from './api/theme'
-import { TabContextMenuItemProvider } from './api/tabContextMenuProvider'
+// import { TabContextMenuItemProvider } from './api/tabContextMenuProvider'
 import { TabRecoveryProvider } from './api/tabRecovery'
 
 import { AppService } from './services/app.service'
@@ -34,7 +35,7 @@ import { ConfigService } from './services/config.service'
 import { StandardTheme, StandardCompactTheme, PaperTheme } from './theme'
 import { CoreConfigProvider } from './config'
 import { AppHotkeyProvider } from './hotkeys'
-import { TaskCompletionContextMenu, CommonOptionsContextMenu, CloseContextMenu } from './tabContextMenu'
+// import { TaskCompletionContextMenu, CommonOptionsContextMenu, CloseContextMenu } from './tabContextMenu'
 
 import 'perfect-scrollbar/css/perfect-scrollbar.css'
 import 'ng2-dnd/bundles/style.css'
@@ -51,9 +52,9 @@ const PROVIDERS = [
     { provide: Theme, useClass: StandardCompactTheme, multi: true },
     { provide: Theme, useClass: PaperTheme, multi: true },
     { provide: ConfigProvider, useClass: CoreConfigProvider, multi: true },
-    { provide: TabContextMenuItemProvider, useClass: CommonOptionsContextMenu, multi: true },
-    { provide: TabContextMenuItemProvider, useClass: CloseContextMenu, multi: true },
-    { provide: TabContextMenuItemProvider, useClass: TaskCompletionContextMenu, multi: true },
+    // { provide: TabContextMenuItemProvider, useClass: CommonOptionsContextMenu, multi: true },
+    // { provide: TabContextMenuItemProvider, useClass: CloseContextMenu, multi: true },
+    // { provide: TabContextMenuItemProvider, useClass: TaskCompletionContextMenu, multi: true },
     { provide: TabRecoveryProvider, useClass: SplitTabRecoveryProvider, multi: true },
     { provide: PERFECT_SCROLLBAR_CONFIG, useValue: { suppressScrollX: true } },
 ]
@@ -64,10 +65,11 @@ const PROVIDERS = [
         BrowserModule,
         BrowserAnimationsModule,
         FormsModule,
-        NgbModule.forRoot(),
+        NgbModule,
         PerfectScrollbarModule,
-        DndModule.forRoot(),
+        // DndModule,
     ],
+    providers: PROVIDERS,
     declarations: [
         AppRootComponent as any,
         CheckboxComponent,
@@ -96,7 +98,7 @@ const PROVIDERS = [
         AutofocusDirective,
     ],
 })
-export default class AppModule { // eslint-disable-line @typescript-eslint/no-extraneous-class
+export class AppModule { // eslint-disable-line @typescript-eslint/no-extraneous-class
     constructor (app: AppService, config: ConfigService) {
         app.ready$.subscribe(() => {
             if (config.store.enableWelcomeTab) {
@@ -104,18 +106,17 @@ export default class AppModule { // eslint-disable-line @typescript-eslint/no-ex
             }
         })
     }
-
-    static forRoot (): ModuleWithProviders {
-        return {
-            ngModule: AppModule,
-            providers: PROVIDERS,
-        }
-    }
 }
 
+export default AppModule
+
 export { AppRootComponent as bootstrap }
 export * from './api'
 
 // Deprecations
 export { ToolbarButton as IToolbarButton } from './api'
 export { HotkeyDescription as IHotkeyDescription } from './api'
+
+export function fakeBootstrap () {
+    return platformBrowserDynamic().bootstrapModule(AppModule)
+}

terminus-core/src/services/app.service.ts

@@ -25,14 +25,14 @@ class CompletionObserver {
 
     async tick () {
         if (!await this.tab.getCurrentProcess()) {
-            this.done.next(null)
+            this.done.next()
             this.stop()
         }
     }
 
     stop () {
         clearInterval(this.interval)
-        this.destroyed.next(null)
+        this.destroyed.next()
         this.destroyed.complete()
         this.done.complete()
     }
@@ -71,20 +71,29 @@ export class AppService {
         private tabsService: TabsService,
     ) {
         if (hostApp.getWindow().id === 1) {
-            this.tabRecovery.recoverTabs().then(tabs => {
-                for (const tab of tabs) {
-                    this.openNewTabRaw(tab.type, tab.options)
-                }
-                this.tabsChanged$.subscribe(() => {
-                    tabRecovery.saveTabs(this.tabs)
+            if (config.store.terminal.recoverTabs) {
+                this.tabRecovery.recoverTabs().then(tabs => {
+                    for (const tab of tabs) {
+                        this.openNewTabRaw(tab.type, tab.options)
+                    }
+                    this.startTabStorage()
                 })
-                setInterval(() => {
-                    tabRecovery.saveTabs(this.tabs)
-                }, 30000)
-            })
+            } else {
+                /** Continue to store the tabs even if the setting is currently off */
+                this.startTabStorage()
+            }
         }
     }
 
+    startTabStorage () {
+        this.tabsChanged$.subscribe(() => {
+            this.tabRecovery.saveTabs(this.tabs)
+        })
+        setInterval(() => {
+            this.tabRecovery.saveTabs(this.tabs)
+        }, 30000)
+    }
+
     addTabRaw (tab: BaseTabComponent) {
         this.tabs.push(tab)
         this.selectTab(tab)
@@ -144,7 +153,7 @@ export class AppService {
         if (this.tabs.includes(this._activeTab)) {
             this.lastTabIndex = this.tabs.indexOf(this._activeTab)
         } else {
-            this.lastTabIndex = null
+            this.lastTabIndex = 0
         }
         if (this._activeTab) {
             this._activeTab.clearActivity()
@@ -229,7 +238,7 @@ export class AppService {
 
     /** @hidden */
     emitReady () {
-        this.ready.next(null)
+        this.ready.next()
         this.ready.complete()
         this.hostApp.emitReady()
     }
@@ -246,7 +255,7 @@ export class AppService {
             })
             this.completionObservers.set(tab, observer)
         }
-        return this.completionObservers.get(tab).done$
+        return this.completionObservers.get(tab)!.done$
     }
 
     stopObservingTabCompletion (tab: BaseTabComponent) {

terminus-core/src/services/config.service.ts

@@ -7,7 +7,7 @@ import { ConfigProvider } from '../api/configProvider'
 import { ElectronService } from './electron.service'
 import { HostAppService } from './hostApp.service'
 
-const configMerge = (a, b) => require('deepmerge')(a, b, { arrayMerge: (_d, s) => s })
+const configMerge = (a, b) => require('deepmerge')(a, b, { arrayMerge: (_d, s) => s }) // eslint-disable-line @typescript-eslint/no-var-requires
 
 function isStructuralMember (v) {
     return v instanceof Object && !(v instanceof Array) &&
@@ -95,7 +95,7 @@ export class ConfigService {
     private changed = new Subject<void>()
     private _store: any
     private defaults: any
-    private servicesCache: { [id: string]: Function[] } = null
+    private servicesCache: { [id: string]: Function[] }|null = null
 
     get changed$ (): Observable<void> { return this.changed }
 
@@ -170,7 +170,7 @@ export class ConfigService {
      *
      * @typeparam T Base provider type
      */
-    enabledServices<T> (services: T[]): T[] {
+    enabledServices<T extends object> (services: T[]): T[] {
         if (!this.servicesCache) {
             this.servicesCache = {}
             const ngModule = window['rootModule'].ngInjectorDef

terminus-core/src/services/hostApp.service.ts

@@ -215,7 +215,7 @@ export class HostAppService {
     setVibrancy (enable: boolean, type: string) {
         document.body.classList.toggle('vibrant', enable)
         if (this.platform === Platform.macOS) {
-            this.getWindow().setVibrancy(enable ? 'dark' : null)
+            this.getWindow().setVibrancy(enable ? 'dark' : null as any) // electron issue 20269
         }
         if (this.platform === Platform.Windows) {
             this.electron.ipcRenderer.send('window-set-vibrancy', enable, type)

terminus-core/src/services/hotkeys.service.ts

@@ -93,7 +93,7 @@ export class HotkeysService {
         return stringifyKeySequence(this.currentKeystrokes.map(x => x.event))
     }
 
-    getCurrentFullyMatchedHotkey (): string {
+    getCurrentFullyMatchedHotkey (): string|null {
         const currentStrokes = this.getCurrentKeystrokes()
         const config = this.getHotkeysConfig()
         for (const id in config) {
@@ -116,7 +116,7 @@ export class HotkeysService {
     getCurrentPartiallyMatchedHotkeys (): PartialHotkeyMatch[] {
         const currentStrokes = this.getCurrentKeystrokes()
         const config = this.getHotkeysConfig()
-        const result = []
+        const result: PartialHotkeyMatch[] = []
         for (const id in config) {
             for (const sequence of config[id]) {
                 for (let matchLength = Math.min(currentStrokes.length, sequence.length); matchLength > 0; matchLength--) {

terminus-core/src/services/hotkeys.util.ts

@@ -15,7 +15,7 @@ export function stringifyKeySequence (events: KeyboardEvent[]): string[] {
     events = events.slice()
 
     while (events.length > 0) {
-        const event = events.shift()
+        const event = events.shift()!
         if ((event as any).event === 'keydown') {
             const itemKeys: string[] = []
             if (event.ctrlKey) {

terminus-core/src/services/shellIntegration.service.ts

@@ -37,7 +37,7 @@ export class ShellIntegrationService {
                 'extras',
                 'automator-workflows',
             )
-            this.automatorWorkflowsDestination = path.join(process.env.HOME, 'Library', 'Services')
+            this.automatorWorkflowsDestination = path.join(process.env.HOME as string, 'Library', 'Services')
         }
         this.updatePaths()
     }

terminus-core/src/services/tabRecovery.service.ts

@@ -27,7 +27,7 @@ export class TabRecoveryService {
         )
     }
 
-    async recoverTab (token: any): Promise<RecoveredTab> {
+    async recoverTab (token: any): Promise<RecoveredTab|null> {
         for (const provider of this.config.enabledServices(this.tabRecoveryProviders)) {
             try {
                 const tab = await provider.recover(token)

terminus-core/src/services/tabs.service.ts

@@ -29,7 +29,7 @@ export class TabsService {
     /**
      * Duplicates an existing tab instance (using the tab recovery system)
      */
-    async duplicate (tab: BaseTabComponent): Promise<BaseTabComponent> {
+    async duplicate (tab: BaseTabComponent): Promise<BaseTabComponent|null> {
         const token = await tab.getRecoveryToken()
         if (!token) {
             return null

terminus-core/src/services/themes.service.ts

@@ -4,7 +4,7 @@ import { Theme } from '../api/theme'
 
 @Injectable({ providedIn: 'root' })
 export class ThemesService {
-    private styleElement: HTMLElement = null
+    private styleElement: HTMLElement|null = null
 
     /** @hidden */
     constructor (
@@ -17,22 +17,22 @@ export class ThemesService {
         })
     }
 
-    findTheme (name: string): Theme {
-        return this.config.enabledServices(this.themes).find(x => x.name === name)
+    findTheme (name: string): Theme|null {
+        return this.config.enabledServices(this.themes).find(x => x.name === name) || null
     }
 
     findCurrentTheme (): Theme {
-        return this.findTheme(this.config.store.appearance.theme) || this.findTheme('Standard')
+        return this.findTheme(this.config.store.appearance.theme) || this.findTheme('Standard')!
     }
 
     applyTheme (theme: Theme): void {
         if (!this.styleElement) {
             this.styleElement = document.createElement('style')
             this.styleElement.setAttribute('id', 'theme')
-            document.querySelector('head').appendChild(this.styleElement)
+            document.querySelector('head')!.appendChild(this.styleElement)
         }
         this.styleElement.textContent = theme.css
-        document.querySelector('style#custom-css').innerHTML = this.config.store.appearance.css
+        document.querySelector('style#custom-css')!.innerHTML = this.config.store.appearance.css
     }
 
     private applyCurrentTheme (): void {

terminus-core/src/services/touchbar.service.ts

@@ -42,7 +42,7 @@ export class TouchbarService {
                 const showIcon = this.app.activeTab !== tab && hasActivity
                 const segment = this.tabSegments[app.tabs.indexOf(tab)]
                 if (segment) {
-                    segment.icon = showIcon ? activityIcon : null
+                    segment.icon = showIcon ? activityIcon : undefined
                 }
             })
         })
@@ -83,7 +83,9 @@ export class TouchbarService {
             segments: buttons.map(button => this.getButton(button)),
             mode: 'buttons',
             change: (selectedIndex) => this.zone.run(() => {
-                buttons[selectedIndex].click()
+                if (buttons[selectedIndex].click) {
+                    buttons[selectedIndex].click!()
+                }
             }),
         })
 
@@ -100,8 +102,8 @@ export class TouchbarService {
 
     private getButton (button: ToolbarButton): Electron.SegmentedControlSegment {
         return {
-            label: button.touchBarNSImage ? null : this.shortenTitle(button.touchBarTitle || button.title),
-            icon: button.touchBarNSImage ? this.getCachedNSImage(button.touchBarNSImage) : null,
+            label: button.touchBarNSImage ? undefined : this.shortenTitle(button.touchBarTitle || button.title),
+            icon: button.touchBarNSImage ? this.getCachedNSImage(button.touchBarNSImage) : undefined,
             // click: () => this.zone.run(() => button.click()),
         }
     }

terminus-core/src/tabContextMenu.ts

@@ -5,7 +5,7 @@ import { TabHeaderComponent } from './components/tabHeader.component'
 import { TabContextMenuItemProvider } from './api/tabContextMenuProvider'
 
 /** @hidden */
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class CloseContextMenu extends TabContextMenuItemProvider {
     weight = -5
 
@@ -63,7 +63,7 @@ const COLORS = [
 ]
 
 /** @hidden */
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
     weight = -1
 
@@ -78,7 +78,7 @@ export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
         return [
             {
                 label: 'Rename',
-                click: () => this.zone.run(() => tabHeader.showRenameTabModal()),
+                click: () => this.zone.run(() => tabHeader?.showRenameTabModal()),
             },
             {
                 label: 'Duplicate',
@@ -86,7 +86,7 @@ export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
             },
             {
                 label: 'Color',
-                sublabel: COLORS.find(x => x.value === tab.color).name,
+                sublabel: COLORS.find(x => x.value === tab.color)!.name,
                 submenu: COLORS.map(color => ({
                     label: color.name,
                     type: 'radio',
@@ -101,7 +101,7 @@ export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
 }
 
 /** @hidden */
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class TaskCompletionContextMenu extends TabContextMenuItemProvider {
     constructor (
         private app: AppService,

terminus-core/src/theme.scss

@@ -1,103 +1,11 @@
-$tab-border-radius: 5px;
+@import "./theme.vars";
+
+// ---------
+
+
 $button-hover-bg: rgba(0, 0, 0, .25);
 $button-active-bg: rgba(0, 0, 0, .5);
 
-
-$white:  #fff !default;
-$black:  #000 !default;
-$red:    #d9534f !default;
-$orange: #f0ad4e !default;
-$yellow: #ffd500 !default;
-$green:  #5cb85c !default;
-$blue:   #0275d8 !default;
-$teal:   #5bc0de !default;
-$pink:   #ff5b77 !default;
-$purple: #613d7c !default;
-
-$theme-colors: (
-    "primary":    $blue,
-    "secondary": #394b5d
-);
-
-$content-bg: rgba(39, 49, 60, 0.65); //#1D272D;
-$content-bg-solid: #1D272D;
-$body-bg: #131d27;
-$body-bg2: #20333e;
-
-$body-color: #ccc;
-$font-family-sans-serif: "Source Sans Pro";
-$font-family-monospace: "Source Code Pro";
-$font-size-base: 14rem / 16;
-
-$btn-border-radius: 0;
-$btn-secondary-color:            #ccc;
-$btn-secondary-bg:               #222;
-$btn-secondary-border:           #444;
-
-//$btn-warning-bg:                 rgba($orange, .5);
-
-
-$nav-tabs-border-width:                       0;
-$nav-tabs-border-radius:                      0;
-$nav-tabs-link-hover-border-color:            $body-bg;
-$nav-tabs-active-link-hover-color:            $white;
-$nav-tabs-active-link-hover-bg:               $blue;
-$nav-tabs-active-link-hover-border-color:     darken($blue, 30%);
-$nav-pills-border-radius:  0;
-
-$input-bg:                       #111;
-$input-disabled-bg:              #333;
-
-$input-color:                    $body-color;
-$input-color-placeholder:        #333;
-$input-border-color:             #344;
-$input-border-width: 1px;
-//$input-box-shadow:               inset 0 1px 1px rgba($black,.075);
-$input-border-radius:            0;
-$custom-select-border-radius: 0;
-$input-bg-focus:                 $input-bg;
-$input-border-focus:             lighten($blue, 25%);
-$input-focus-box-shadow:         none;
-$input-color-focus:              $input-color;
-$input-group-addon-bg:           $body-bg;
-$input-group-addon-border-color: $input-border-color;
-
-$modal-content-bg:               $content-bg-solid;
-$modal-content-border-color:     $body-bg;
-$modal-header-border-color:      transparent;
-$modal-footer-border-color:      transparent;
-
-$popover-bg:                     $body-bg;
-
-$dropdown-bg:                    $body-bg;
-$dropdown-link-color:            $body-color;
-$dropdown-link-hover-color:      white;
-$dropdown-link-hover-bg:         $body-bg2;
-//$dropdown-link-active-color:     $component-active-color;
-//$dropdown-link-active-bg:        $component-active-bg;
-$dropdown-link-disabled-color:   #333;
-$dropdown-header-color:          #333;
-
-$list-group-color: $body-color;
-$list-group-bg: rgba(255,255,255,.05);
-$list-group-border-color:  rgba(255,255,255,.1);
-$list-group-hover-bg: rgba(255,255,255,.1);
-$list-group-link-active-bg: rgba(255,255,255,.2);
-
-$list-group-action-color: $body-color;
-$list-group-action-bg: rgba(255,255,255,.05);
-$list-group-action-active-bg: $list-group-link-active-bg;
-
-$pre-bg: $dropdown-bg;
-$pre-color: $dropdown-link-color;
-
-$alert-danger-bg: $body-bg;
-$alert-danger-text: $red;
-$alert-danger-border: $red;
-
-$headings-font-weight: lighter;
-$headings-color: #eee;
-
 @import '~bootstrap/scss/bootstrap.scss';
 
 window-controls {
@@ -230,18 +138,20 @@ settings-tab > ngb-tabset {
 
     & > .nav {
         background: rgba(0, 0, 0, 0.25);
+        flex-shrink: 0;
 
         & > .nav-item > .nav-link {
             border: none;
             padding: 10px 50px 10px 20px;
             font-size: 14px;
+            border-radius: 0;
 
             &:not(.active) {
-              color: $body-color;
+                color: $body-color;
 
-              &:hover {
-                  color: $white;
-              }
+                &:hover {
+                    color: $white;
+                }
             }
         }
     }
@@ -309,14 +219,6 @@ hotkey-input-modal {
     margin-bottom: 2px;
 }
 
-.nav-tabs {
-    background: $btn-secondary-bg;
-    .nav-link {
-        transition: 0.25s all;
-        border-bottom-color: $nav-tabs-border-color;
-    }
-}
-
 ngb-tabset .tab-content {
     padding-top: 20px;
 }
@@ -360,22 +262,10 @@ ngb-tabset .tab-content {
     }
 }
 
-select.form-control {
-  -webkit-appearance: none;
-  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
-  background-position: 100% 50%;
-  background-repeat: no-repeat;
-  padding-right: 30px;
-}
-
 checkbox i.on {
     color: $blue;
 }
 
-toggle.active .body .toggle {
-    background: $blue;
-}
-
 .modal .modal-footer {
     background: rgba(0, 0, 0, .25);
 
@@ -404,3 +294,101 @@ toggle.active .body .toggle {
 *::-webkit-resizer {
     opacity: 0;
 }
+
+search-panel {
+    background: rgba(39, 49, 60, 0.65) !important;
+}
+
+
+.btn {
+    cursor: pointer;
+    justify-content: flex-start;
+    overflow: hidden;
+
+    &.disabled,
+    &:disabled {
+        cursor: not-allowed;
+    }
+}
+
+.btn.btn-outline-secondary {
+    @include button-outline-variant(#9badb9, #fff);
+    &:hover:not([disabled]), &:active:not([disabled]), &.active:not([disabled]) {
+        background-color: #3f484e;
+        border-color: darken(#9badb9, 25%);
+    }
+
+    border-color: darken(#9badb9, 25%);
+
+    &.disabled,
+    &:disabled {
+        color: #9badb9;
+    }
+}
+
+.btn-warning:not(:disabled):not(.disabled) {
+    &.active, &:active {
+        color: $gray-900;
+    }
+}
+
+.btn-secondary:not(:disabled):not(.disabled) {
+    &.active, &:active {
+        background: #191e23;
+    }
+}
+
+.btn-link {
+    &:hover, &[aria-expanded=true], &:active, &.active {
+        color: $link-hover-color;
+        border-radius: $btn-border-radius;
+    }
+
+    &[aria-expanded=true], &:active, &.active {
+        background: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.btn-group .btn.active {
+    border-color: transparent !important;
+}
+
+.nav-tabs {
+    margin-bottom: 10px;
+
+    &.nav-justified .nav-link {
+        margin-right: 5px;
+    }
+
+    .nav-link {
+        border: none;
+        border-bottom: $nav-tabs-border-width solid transparent;
+        text-transform: uppercase;
+        font-weight: bold;
+        padding: 5px 0;
+        margin-right: 20px;
+
+        uib-tab-heading > i {
+            font-size: 18px;
+        }
+
+        @include hover-focus {
+            color: $nav-tabs-link-active-color;
+        }
+
+        &.disabled {
+            color: $nav-link-disabled-color;
+            border-color: transparent;
+        }
+    }
+
+    .nav-item:last-child .nav-link {
+        margin-right: 0;
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+        color: $nav-tabs-link-active-color;
+        border-color: $nav-tabs-link-active-border-color;
+    }
+}

terminus-core/src/theme.vars.scss

@@ -0,0 +1,187 @@
+$white:    #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;
+
+
+$red:    #d9534f !default;
+$orange: #f0ad4e !default;
+$yellow: #ffd500 !default;
+$green:  #5cb85c !default;
+$blue:   #0275d8 !default;
+$teal:   #5bc0de !default;
+$pink:   #ff5b77 !default;
+$purple: #613d7c !default;
+
+
+@import "~bootstrap/scss/functions";
+
+$content-bg: rgba(39, 49, 60, 0.65); //#1D272D;
+$content-bg-solid: #1D272D;
+
+$table-bg: rgba(255,255,255,.05);
+$table-bg-hover: rgba(255,255,255,.1);
+$table-border-color: rgba(255,255,255,.1);
+
+$theme-colors: (
+  primary: $blue,
+  secondary: #38434e,
+  success: $green,
+  info: $blue,
+  warning: $orange,
+  danger: $red,
+  light: $gray-300,
+  dark: $gray-800,
+  rare: $purple
+);
+
+$body-color: #ccc;
+$body-bg: #131d27;
+$body-bg2: #20333e;
+
+
+$font-family-sans-serif: "Source Sans Pro";
+$font-family-monospace: "Source Code Pro";
+$font-size-base: 14rem / 16;
+$font-size-lg: 1.28rem;
+$font-size-sm: .85rem;
+
+$line-height-base: 1.6;
+
+$headings-color: #ced9e2;
+$headings-font-weight: lighter;
+
+$input-btn-padding-y: .3rem;
+$input-btn-padding-x: .9rem;
+$input-btn-line-height: 1.6;
+$input-btn-line-height-sm: 1.8;
+$input-btn-line-height-lg: 1.8;
+
+$btn-link-disabled-color: $gray-600;
+$btn-focus-box-shadow: none;
+
+$h4-font-size: 18px;
+
+$link-color: $gray-400;
+$link-hover-color: $white;
+$link-hover-decoration: none;
+
+$component-active-color: $white;
+$component-active-bg: #2f3a42;
+
+$list-group-bg: $table-bg;
+$list-group-border-color: $table-border-color;
+
+$list-group-item-padding-y: 0.8rem;
+$list-group-item-padding-x: 1rem;
+
+$list-group-hover-bg: $table-bg-hover;
+$list-group-active-bg: rgba(255,255,255,.2);
+$list-group-active-color: $component-active-color;
+$list-group-active-border-color: translate;
+
+$list-group-action-color: $body-color;
+$list-group-action-hover-color: white;
+
+$list-group-action-active-color: $component-active-color;
+$list-group-action-active-bg: $list-group-active-bg;
+
+$alert-padding-y: 0.9rem;
+$alert-padding-x: 1.25rem;
+
+$input-box-shadow: none;
+
+$transition-base: all .15s ease-in-out;
+$transition-fade: opacity .1s linear;
+$transition-collapse: height .35s ease;
+$btn-transition: all .15s ease-in-out;
+
+$popover-bg: $body-bg;
+$popover-body-color: $body-color;
+$popover-header-bg: $table-bg-hover;
+$popover-header-color: $headings-color;
+$popover-arrow-color: $popover-bg;
+$popover-max-width: 360px;
+
+$btn-border-width:  2px;
+
+$input-bg:                       #181e23;
+$input-disabled-bg:              #2e3235;
+
+$input-color:                    #ddd;
+$input-border-color:             $input-bg;
+$input-border-width:             2px;
+
+$input-focus-bg:                 $input-bg;
+$input-focus-border-color:       rgba(171, 171, 171, 0.61);
+$input-focus-color:              $input-color;
+
+$input-btn-focus-color: var(--focus-color);
+$input-btn-focus-box-shadow:  0 0 0 2px $input-btn-focus-color;
+
+$input-group-addon-color: $input-color;
+$input-group-addon-bg: $input-bg;
+$input-group-addon-border-color: transparent;
+$input-group-btn-border-color: $input-bg;
+
+$nav-tabs-border-radius: 0;
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-width: 2px;
+$nav-tabs-link-hover-border-color: transparent;
+$nav-tabs-link-active-color: #eee;
+$nav-tabs-link-active-bg: transparent;
+$nav-tabs-link-active-border-color: #eee;
+
+$navbar-padding-y: 0;
+$navbar-padding-x: 0;
+
+$dropdown-bg: $table-bg;
+$dropdown-color: $body-color;
+$dropdown-border-width: 1px;
+$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175);
+$dropdown-header-color: $gray-500;
+
+$dropdown-link-color: $body-color;
+$dropdown-link-hover-color: #eee;
+$dropdown-link-hover-bg: rgba(255,255,255,.04);
+$dropdown-link-active-color: white;
+$dropdown-link-active-bg: rgba(0, 0, 0, .2);
+$dropdown-item-padding-y: 0.5rem;
+$dropdown-item-padding-x: 1.5rem;
+
+
+$code-color: $orange;
+$code-bg: rgba(0, 0, 0, .25);
+$code-padding-y: 3px;
+$code-padding-x: 5px;
+$pre-bg: $dropdown-bg;
+$pre-color: $dropdown-link-color;
+
+$badge-font-size: 0.75rem;
+$badge-font-weight: bold;
+$badge-padding-y: 4px;
+$badge-padding-x: 6px;
+
+
+$custom-control-indicator-size: 1.2rem;
+$custom-control-indicator-bg: $body-bg;
+$custom-control-indicator-border-color: lighten($body-bg, 25%);
+$custom-control-indicator-checked-bg: theme-color("primary");
+$custom-control-indicator-checked-color: $body-bg;
+$custom-control-indicator-checked-border-color: transparent;
+$custom-control-indicator-active-bg: rgba(255, 255, 0, 0.5);
+
+
+$modal-content-bg:               $content-bg-solid;
+$modal-content-border-color:     $body-bg;
+$modal-header-border-width:         0;
+$modal-footer-border-color:         #222;
+$modal-footer-border-width:         1px;
+$modal-content-border-width:        0;

terminus-core/tsconfig.json

@@ -2,6 +2,9 @@
   "extends": "../tsconfig.json",
   "exclude": ["node_modules", "dist"],
   "compilerOptions": {
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "paths": {
+      "*": ["../../app/node_modules/*"]
+    }
   }
 }

terminus-core/webpack.config.js

@@ -1,10 +1,11 @@
 const path = require('path')
+const { AngularCompilerPlugin } = require('@ngtools/webpack')
 
 module.exports = {
     target: 'node',
     entry: 'src/index.ts',
     context: __dirname,
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'cheap-module-source-map',
     output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'index.js',
@@ -23,22 +24,26 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.ts$/,
-                use: {
-                    loader: 'awesome-typescript-loader',
-                    options: {
-                        configFileName: path.resolve(__dirname, 'tsconfig.json'),
-                        typeRoots: [
-                            path.resolve(__dirname, 'node_modules/@types'),
-                            path.resolve(__dirname, '../node_modules/@types'),
-                        ],
-                        paths: {
-                            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-                            "*": [path.resolve(__dirname, '../app/node_modules/*')],
-                        },
-                    },
-                },
+                test: /(?:\.ngfactory\.js|\.ngfactory|\.ngstyle\.js|\.ts)$/,
+                loader: '@ngtools/webpack',
             },
+            // {
+            //     test: /\.ts$/,
+            //     use: {
+            //         loader: 'awesome-typescript-loader',
+            //         options: {
+            //             configFileName: path.resolve(__dirname, 'tsconfig.json'),
+            //             typeRoots: [
+            //                 path.resolve(__dirname, 'node_modules/@types'),
+            //                 path.resolve(__dirname, '../node_modules/@types'),
+            //             ],
+            //             paths: {
+            //                 "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+            //                 "*": [path.resolve(__dirname, '../app/node_modules/*')],
+            //             },
+            //         },
+            //     },
+            // },
             { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] },
             { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] },
             { test: /\.css$/, use: ['to-string-loader', 'css-loader'], include: /component\.css/ },
@@ -57,4 +62,12 @@ module.exports = {
         /^@angular/,
         /^@ng-bootstrap/,
     ],
+    plugins: [
+        new AngularCompilerPlugin({
+            tsConfigPath: path.resolve(__dirname, 'tsconfig.json'),
+            entryModule: './terminus-core/src/index#AppModule',
+            sourceMap: true,
+            directTemplateLoading: true,
+        }),
+    ],
 }

terminus-core/yarn.lock

@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.1.tgz#5c6f4a1eabca84792fbd916f0cb40847f123c656"
   integrity sha512-SGGAhXLHDx+PK4YLNcNGa6goPf9XRWQNAUUbffkwVGGXIxmDKWyGGL4inzq2sPmExu431Ekb9aEMn9BkPqEYFA==
 
+"@types/semver@^6.0.2":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.0.tgz#d688d574400d96c5b0114968705366f431831e1a"
+  integrity sha512-1OzrNb4RuAzIT7wHSsgZRlMBlNsJl+do6UblR7JMW4oB7bbR+uBEYtUh7gEc/jM84GGilh68lSOokyM/zNUlBA==
+
 "@types/shell-escape@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@types/shell-escape/-/shell-escape-0.2.0.tgz#cd2f0df814388599dd07196dcc510de2669d1ed2"
@@ -19,17 +24,17 @@
   dependencies:
     winston "*"
 
-agent-base@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
-  integrity sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==
+agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
   dependencies:
     es6-promisify "^5.0.0"
 
 argparse@^1.0.7:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
-  integrity sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
@@ -48,36 +53,17 @@ axios@^0.19.0:
     follow-redirects "1.5.10"
     is-buffer "^2.0.2"
 
-bluebird-lst@^1.0.6, bluebird-lst@^1.0.7:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/bluebird-lst/-/bluebird-lst-1.0.8.tgz#61b572e8b3eb57e0fff676a0e54566d93597e6a4"
-  integrity sha512-InUDOaBaIjIobOa3O4YRAbFgff907uTJZXW0m0rhk3zhVZ4GvsmdCLEAKC1CTWTtUWCM8iWTTfFX9N/xQR/etw==
-  dependencies:
-    bluebird "^3.5.4"
-
-bluebird@^3.5.4:
-  version "3.5.5"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
-  integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
-
 bootstrap@^4.1.3:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
   integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
 
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
-
-builder-util-runtime@~8.1.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/builder-util-runtime/-/builder-util-runtime-8.1.1.tgz#f2f6fc43e33d26892bd491667fc746ad69bccc50"
-  integrity sha512-+ieS4PMB33vVE2S3ZNWBEQJ1zKmAs/agrBdh7XadE1lKLjrH4aXYuOh9OOGdxqIRldhlhNBaF+yKMMEFOdNVig==
+builder-util-runtime@8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/builder-util-runtime/-/builder-util-runtime-8.4.0.tgz#3163fffc078e6b8f3dd5b6eb12a8345573590682"
+  integrity sha512-CJB/eKfPf2vHrkmirF5eicVnbDCkMBbwd5tRYlTlgud16zFeqD7QmrVUAOEXdnsrcNkiLg9dbuUsQKtl/AwsYQ==
   dependencies:
-    bluebird-lst "^1.0.6"
     debug "^4.1.1"
-    fs-extra-p "^7.0.0"
     sax "^1.2.4"
 
 color-convert@^1.9.1:
@@ -132,9 +118,9 @@ colorspace@1.1.x:
     text-hex "1.0.x"
 
 core-js@^3.1.2:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.2.0.tgz#0a835fdf6aa677fff83a823a7b5276c9e7cebb76"
-  integrity sha512-gybgLzmr7SQRSF6UzGYXducx4eE10ONQlyEnQoqiGPbmbn7zLkb73tPfc4YbZN0lvcTQwoLNPjq4RuCaCumGyQ==
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.2.tgz#ee2b1a60b50388d8ddcda8cdb44a92c7a9ea76df"
+  integrity sha512-bUTfqFWtNKWp73oNIfRkqwYZJeNT3lstzZcAkhhiuvDraRSgOH1/+F9ZklbpR4zpdKuo4cpXN8tKP7s61yjX+g==
 
 core-util-is@~1.0.0:
   version "1.0.2"
@@ -162,10 +148,10 @@ debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-deepmerge@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.2.1.tgz#76a1f47854bcfcd66ee9a948d110540a8e12b261"
-  integrity sha512-+hbDSzTqEW0fWgnlKksg7XAOtT+ddZS5lHZJ6f6MdixRs9wQy+50fm1uUCVb1IkvjLUYX/SfFO021ZNwriURTw==
+deepmerge@^4.1.1:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
 diagnostics@^1.1.1:
   version "1.1.1"
@@ -177,19 +163,18 @@ diagnostics@^1.1.1:
     kuler "1.0.x"
 
 electron-updater@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/electron-updater/-/electron-updater-4.0.6.tgz#9c4f495ae0e80bf4425e3e1b801c5ed2ab933c2d"
-  integrity sha512-JPGLME6fxJcHG8hX7HWFl6Aew6iVm0DkcrENreKa5SUJCHG+uUaAhxDGDt+YGcNkyx1uJ6eBGMvFxDTLUv67pg==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/electron-updater/-/electron-updater-4.2.0.tgz#f9ecfc657f65ead737d42b9efecf628d3756b550"
+  integrity sha512-GuS3g7HDh17x/SaFjxjswlWUaKHczksYkV2Xc5CKj/bZH0YCvTSHtOmnBAdAmCk99u/71p3zP8f0jIqDfGcjww==
   dependencies:
-    bluebird-lst "^1.0.6"
-    builder-util-runtime "~8.1.0"
-    fs-extra-p "^7.0.0"
-    js-yaml "^3.12.0"
-    lazy-val "^1.0.3"
+    "@types/semver" "^6.0.2"
+    builder-util-runtime "8.4.0"
+    fs-extra "^8.1.0"
+    js-yaml "^3.13.1"
+    lazy-val "^1.0.4"
     lodash.isequal "^4.5.0"
-    pako "^1.0.7"
-    semver "^5.6.0"
-    source-map-support "^0.5.9"
+    pako "^1.0.10"
+    semver "^6.3.0"
 
 enabled@1.0.x:
   version "1.0.2"
@@ -216,9 +201,9 @@ es6-promisify@^5.0.0:
     es6-promise "^4.0.3"
 
 esprima@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
-  integrity sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 fast-safe-stringify@^2.0.4:
   version "2.0.6"
@@ -237,34 +222,26 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-fs-extra-p@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra-p/-/fs-extra-p-7.0.1.tgz#4eec0b6dfa150fa90f6ddd773b4fb1d55cad54e3"
-  integrity sha512-yhd2OV0HnHt2oitlp+X9hl2ReX4X/7kQeL7/72qzPHTZj5eUPGzAKOvEglU02Fa1OeG2rSy/aKB4WGVaLiF8tw==
+fs-extra@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
   dependencies:
-    bluebird-lst "^1.0.7"
-    fs-extra "^7.0.1"
-
-fs-extra@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
-  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
-  dependencies:
-    graceful-fs "^4.1.2"
+    graceful-fs "^4.2.0"
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
-  integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
+  integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
 
-https-proxy-agent@2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz#51552970fa04d723e04c56d04178c3f92592bbc0"
-  integrity sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==
+https-proxy-agent@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-3.0.0.tgz#0106efa5d63d6d6f3ab87c999fa4877a3fd1ff97"
+  integrity sha512-y4jAxNEihqvBI5F3SaO2rtsjIOnnNA8sEbuiP+UhJZJHeM2NRm6c09ax2tgqme+SgUUvjao2fJXF4h3D6Cb2HQ==
   dependencies:
-    agent-base "^4.1.0"
+    agent-base "^4.3.0"
     debug "^3.1.0"
 
 inherits@^2.0.3, inherits@~2.0.3:
@@ -292,7 +269,7 @@ isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-js-yaml@^3.12.0, js-yaml@^3.9.0:
+js-yaml@^3.13.1, js-yaml@^3.9.0:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -314,7 +291,7 @@ kuler@1.0.x:
   dependencies:
     colornames "^1.1.1"
 
-lazy-val@^1.0.3:
+lazy-val@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.4.tgz#882636a7245c2cfe6e0a4e3ba6c5d68a137e5c65"
   integrity sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q==
@@ -341,11 +318,11 @@ logform@^2.1.1:
     triple-beam "^1.3.0"
 
 mixpanel@^0.10.2:
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/mixpanel/-/mixpanel-0.10.2.tgz#10ff6cd76034b262d469094ad3d8c99039345376"
-  integrity sha512-+zbBQGd/Q5LLRooqJ2iyEDzKz2/ly4TipH5tE9te0BDMJpROxUMGffPulyHbh4FtMcbJuPmIUSIfy//JhhnlnA==
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/mixpanel/-/mixpanel-0.10.3.tgz#2dff3bc0e17b57d6365547d315cbbf3ecfdb8a00"
+  integrity sha512-wIYr5o+1XSzJ80o3QED35K/yfPAKi5FigZXTSfcs4vltfeKbilIjNgwxdno7LrqzhjoSjmIyDWkI7D3lr7TwDw==
   dependencies:
-    https-proxy-agent "2.2.1"
+    https-proxy-agent "3.0.0"
 
 ms@2.0.0:
   version "2.0.0"
@@ -353,37 +330,37 @@ ms@2.0.0:
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
 ms@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
-  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
 ng2-dnd@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/ng2-dnd/-/ng2-dnd-5.0.2.tgz#862278ac7dedfa14f5783bbf34014d5d73dfefb4"
   integrity sha512-5mWWBePwvEPsNd/HkdbD543Q9mPyJofL6zkNydl8/Ah3qrrvZT2DaEPbknY08OgkXpI2qUGksc01OzzVlRQ9dQ==
 
-ngx-perfect-scrollbar@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-6.0.0.tgz#92b51957c04ed6a6d416beca2707bab005667b68"
-  integrity sha512-x4bzfI7AmeZubUN+tJJ99GYniSgHLJbTAg3ecbWd8dG6z59efgx4yxUjN1sDh7UYgimtg3w857qXEZJW/USAhA==
+ngx-perfect-scrollbar@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-8.0.0.tgz#19c1bbf9b1a36d89b00a68f7834e39427d29182f"
+  integrity sha512-IXoFbULQnxyJj0gdCcKCLE/6OW9HCP9KARzMCKS1kNxTuzG4DghjM2AaCBRM5/sFwdbn6rqOKMCINtHA8W8YCA==
   dependencies:
-    perfect-scrollbar "^1.3.0"
-    resize-observer-polyfill "^1.4.0"
+    perfect-scrollbar "^1.4.0"
+    resize-observer-polyfill "^1.5.0"
 
 one-time@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/one-time/-/one-time-0.0.4.tgz#f8cdf77884826fe4dff93e3a9cc37b1e4480742e"
   integrity sha1-+M33eISCb+Tf+T46nMN7HkSAdC4=
 
-pako@^1.0.7:
+pako@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
   integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
 
-perfect-scrollbar@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
-  integrity sha512-7Ub8YOvZB5k+pTy0K3LYUDnH9Xl3qvHcclJyIX+AV5UxHxll146iVGq4rtc+848nTDBQq89J7QxKKMA++cTXzQ==
+perfect-scrollbar@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz#5d014ef9775e1f43058a1dbae9ed1daf0e7091f1"
+  integrity sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw==
 
 process-nextick-args@~2.0.0:
   version "2.0.0"
@@ -412,10 +389,10 @@ readable-stream@^3.1.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-resize-observer-polyfill@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
-  integrity sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
 safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
@@ -427,10 +404,10 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-semver@^5.6.0:
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
-  integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
+semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
 shell-escape@^0.2.0:
   version "0.2.0"
@@ -444,19 +421,6 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-source-map-support@^0.5.9:
-  version "0.5.12"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.12.tgz#b4f3b10d51857a5af0138d3ce8003b201613d599"
-  integrity sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map@^0.6.0:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -492,9 +456,9 @@ triple-beam@^1.2.0, triple-beam@^1.3.0:
   integrity sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==
 
 universalify@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
-  integrity sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
@@ -502,9 +466,9 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
 uuid@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
-  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
+  integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
 
 winston-transport@^4.3.0:
   version "4.3.0"

terminus-plugin-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminus-plugin-manager",
-  "version": "1.0.83-nightly.0",
+  "version": "1.0.98-nightly.0",
   "description": "Terminus' plugin manager",
   "keywords": [
     "terminus-builtin-plugin"
@@ -17,11 +17,9 @@
   "author": "Eugene Pankov",
   "license": "MIT",
   "devDependencies": {
-    "@types/mz": "0.0.32",
     "@types/semver": "^6.0.0",
     "axios": "^0.19.0",
     "mz": "^2.6.0",
-    "ngx-pipes": "^1.6.1",
     "semver": "^6.1.0"
   },
   "peerDependencies": {

terminus-plugin-manager/src/components/pluginsSettingsTab.component.pug

@@ -5,12 +5,12 @@
 
 .d-flex
     h3.mb-1 Installed
-    button.btn.btn-outline-info.btn-sm.ml-auto((click)='openPluginsFolder()')
+    button.btn.btn-outline-secondary.btn-sm.ml-auto((click)='openPluginsFolder()')
         i.fas.fa-folder
         span Plugins folder
-    
+
 .list-group.list-group-flush.mt-2
-    .list-group-item.d-flex.align-items-center(*ngFor='let plugin of pluginManager.installedPlugins|orderBy:"name"')
+    .list-group-item.d-flex.align-items-center(*ngFor='let plugin of pluginManager.installedPlugins')
         .mr-auto.d-flex.flex-column
             div
                 strong {{plugin.name}}
@@ -28,20 +28,20 @@
             i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Installing')
             span Upgrade ({{knownUpgrades[plugin.name].version}})
 
-        button.btn.btn-primary.ml-2(
+        button.btn.btn-link.text-primary.ml-2(
             *ngIf='config.store.pluginBlacklist.includes(plugin.name)',
             (click)='enablePlugin(plugin)'
         )
             i.fas.fa-fw.fa-play
-                
-        button.btn.btn-secondary.ml-2(
+
+        button.btn.btn-link.ml-2(
             *ngIf='!config.store.pluginBlacklist.includes(plugin.name)',
             (click)='disablePlugin(plugin)'
         )
             i.fas.fa-fw.fa-pause
-            
-        button.btn.btn-danger.ml-2(
-            (click)='uninstallPlugin(plugin)', 
+
+        button.btn.btn-link.text-danger.ml-2(
+            (click)='uninstallPlugin(plugin)',
             *ngIf='!plugin.isBuiltin',
             [disabled]='busy[plugin.name] != undefined'
         )
@@ -65,7 +65,7 @@ div
 
 
     .list-group.list-group-flush.mb-4(*ngIf='availablePlugins$')
-        ng-container(*ngFor='let plugin of (availablePlugins$|async|orderBy:"name")')
+        ng-container(*ngFor='let plugin of (availablePlugins$|async)')
             .list-group-item.d-flex.align-items-center(*ngIf='!isAlreadyInstalled(plugin)')
                 button.btn.btn-primary.mr-3(
                     (click)='installPlugin(plugin)',
@@ -73,7 +73,7 @@ div
                 )
                     i.fas.fa-fw.fa-download(*ngIf='busy[plugin.name] != BusyState.Installing')
                     i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Installing')
-                
+
                 div((click)='showPluginInfo(plugin)')
                     div
                         strong {{plugin.name}}

terminus-plugin-manager/src/components/pluginsSettingsTab.component.ts

@@ -1,5 +1,5 @@
 import { BehaviorSubject, Observable } from 'rxjs'
-import { debounceTime, distinctUntilChanged, first, tap, flatMap } from 'rxjs/operators'
+import { debounceTime, distinctUntilChanged, first, tap, flatMap, map } from 'rxjs/operators'
 import * as semver from 'semver'
 
 import { Component, Input } from '@angular/core'
@@ -18,7 +18,7 @@ export class PluginsSettingsTabComponent {
     @Input() availablePlugins$: Observable<PluginInfo[]>
     @Input() availablePluginsQuery$ = new BehaviorSubject<string>('')
     @Input() availablePluginsReady = false
-    @Input() knownUpgrades: {[id: string]: PluginInfo} = {}
+    @Input() knownUpgrades: {[id: string]: PluginInfo|null} = {}
     @Input() busy: {[id: string]: BusyState} = {}
     @Input() erroredPlugin: string
     @Input() errorMessage: string
@@ -43,9 +43,12 @@ export class PluginsSettingsTabComponent {
                     }))
                 })
             )
-        this.availablePlugins$.pipe(first()).subscribe(available => {
+        this.availablePlugins$.pipe(first(), map((plugins: PluginInfo[]) => {
+            plugins.sort((a, b) => a.name > b.name ? 1 : -1)
+            return plugins
+        })).subscribe(available => {
             for (const plugin of this.pluginManager.installedPlugins) {
-                this.knownUpgrades[plugin.name] = available.find(x => x.name === plugin.name && semver.gt(x.version, plugin.version))
+                this.knownUpgrades[plugin.name] = available.find(x => x.name === plugin.name && semver.gt(x.version, plugin.version)) || null
             }
         })
     }
@@ -91,7 +94,7 @@ export class PluginsSettingsTabComponent {
     }
 
     async upgradePlugin (plugin: PluginInfo): Promise<void> {
-        return this.installPlugin(this.knownUpgrades[plugin.name])
+        return this.installPlugin(this.knownUpgrades[plugin.name]!)
     }
 
     showPluginInfo (plugin: PluginInfo) {

terminus-plugin-manager/src/index.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
-import { NgPipesModule } from 'ngx-pipes'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 
 import { SettingsTabProvider } from 'terminus-settings'
@@ -15,7 +14,6 @@ import { PluginsSettingsTabProvider } from './settings'
         BrowserModule,
         FormsModule,
         NgbModule,
-        NgPipesModule,
     ],
     providers: [
         { provide: SettingsTabProvider, useClass: PluginsSettingsTabProvider, multi: true },

terminus-plugin-manager/webpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
     target: 'node',
     entry: 'src/index.ts',
     context: __dirname,
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'eval-cheap-module-source-map',
     output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'index.js',
@@ -26,7 +26,7 @@ module.exports = {
                 test: /\.ts$/,
                 use: {
                     loader: 'awesome-typescript-loader',
-                    query: {
+                    options: {
                         configFileName: path.resolve(__dirname, 'tsconfig.json'),
                         typeRoots: [
                             path.resolve(__dirname, 'node_modules/@types'),

terminus-plugin-manager/yarn.lock

@@ -2,22 +2,10 @@
 # yarn lockfile v1
 
 
-"@types/mz@0.0.32":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@types/mz/-/mz-0.0.32.tgz#e8248b4e41424c052edc1725dd33650c313a3659"
-  integrity sha512-cy3yebKhrHuOcrJGkfwNHhpTXQLgmXSv1BX+4p32j+VUQ6aP2eJ5cL7OvGcAQx75fCTFaAIIAKewvqL+iwSd4g==
-  dependencies:
-    "@types/node" "*"
-
-"@types/node@*":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.10.tgz#51babf9c7deadd5343620055fc8aff7995c8b031"
-  integrity sha512-LcsGbPomWsad6wmMNv7nBLw7YYYyfdYcz6xryKYQhx89c3XXan+8Q6AJ43G5XDIaklaVkK3mE4fCb0SBvMiPSQ==
-
 "@types/semver@^6.0.0":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.0.1.tgz#a984b405c702fa5a7ec6abc56b37f2ba35ef5af6"
-  integrity sha512-ffCdcrEE5h8DqVxinQjo+2d1q+FV5z7iNtPofw3JsrltSoSVlOGaW0rY8XxtO9XukdTn8TaCGWmk2VFGhI70mg==
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.0.tgz#d688d574400d96c5b0114968705366f431831e1a"
+  integrity sha512-1OzrNb4RuAzIT7wHSsgZRlMBlNsJl+do6UblR7JMW4oB7bbR+uBEYtUh7gEc/jM84GGilh68lSOokyM/zNUlBA==
 
 any-promise@^1.0.0:
   version "1.3.0"
@@ -65,20 +53,15 @@ mz@^2.6.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-ngx-pipes@^1.6.1:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/ngx-pipes/-/ngx-pipes-1.6.6.tgz#32bb80906c220f1e84d5cce7d6dae002cffead4b"
-  integrity sha512-mRV0xOZDd6/Jlvti4W0pDepZRIHLHd3kZ6ZzdqyGCU0dxbKVWWLTR1jlNlxN1ruMk8eO0Y8lNh6a1bEW7dJP1w==
-
 object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
 semver@^6.1.0:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.2.tgz#079960381376a3db62eb2edc8a3bfb10c7cfe318"
-  integrity sha512-z4PqiCpomGtWj8633oeAdXm1Kn1W++3T8epkZYnwiVgIYIJ0QHszhInYSJTYxebByQH7KVCEAn8R9duzZW2PhQ==
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
 thenify-all@^1.0.0:
   version "1.6.0"

terminus-settings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminus-settings",
-  "version": "1.0.83-nightly.4",
+  "version": "1.0.98-nightly.0",
   "description": "Terminus terminal settings page",
   "keywords": [
     "terminus-builtin-plugin"
@@ -17,8 +17,7 @@
   "author": "Eugene Pankov",
   "license": "MIT",
   "devDependencies": {
-    "@types/deep-equal": "1.0.1",
-    "ngx-pipes": "^1.6.1"
+    "@types/deep-equal": "1.0.1"
   },
   "peerDependencies": {
     "@angular/common": "^7",
@@ -26,7 +25,7 @@
     "@angular/forms": "^7",
     "@angular/platform-browser": "^7",
     "@ng-bootstrap/ng-bootstrap": "^1",
-    "terminus-core": "*",
-    "rxjs": "^5"
+    "rxjs": "^5",
+    "terminus-core": "*"
   }
 }

terminus-settings/src/components/hotkeyInputModal.component.ts

@@ -41,8 +41,8 @@ export class HotkeyInputModalComponent {
     @Input() timeoutProgress = 0
 
     private keySubscription: Subscription
-    private lastKeyEvent: number
-    private keyTimeoutInterval: number = null
+    private lastKeyEvent: number|null = null
+    private keyTimeoutInterval: number|null = null
 
     constructor (
         private modalInstance: NgbActiveModal,
@@ -78,7 +78,7 @@ export class HotkeyInputModalComponent {
         this.keySubscription.unsubscribe()
         this.hotkeys.clearCurrentKeystrokes()
         this.hotkeys.enable()
-        clearInterval(this.keyTimeoutInterval)
+        clearInterval(this.keyTimeoutInterval!)
     }
 
     close () {

terminus-settings/src/components/settingsTab.component.pug

@@ -8,14 +8,14 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
         ng-template(ngbTabContent)
             .d-flex.align-items-center.mb-4
                 h1.terminus-title.mb-2.mr-2 Terminus
-                    sup α 
-                
+                    sup α
+
                 .text-muted.mr-auto {{homeBase.appVersion}}
-                            
+
                 button.btn.btn-secondary.mr-3((click)='homeBase.openGitHub()')
                     i.fab.fa-github
                     span GitHub
-                    
+
                 button.btn.btn-secondary((click)='homeBase.reportBug()')
                     i.fas.fa-bug
                     span Report a problem
@@ -57,7 +57,7 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
                     .title(*ngIf='hostApp.platform === Platform.Windows') Acrylic background
                     .title(*ngIf='hostApp.platform === Platform.macOS') Vibrancy
                     .description Gives the window a blurred transparent background
-                    
+
                 toggle(
                     [(ngModel)]='config.store.appearance.vibrancy',
                     (ngModelChange)='config.save()'
@@ -85,7 +85,7 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
                             [value]='"fluent"'
                         )
                         | Fluent
-                    
+
             .form-line
                 .header
                     .title Transparency
@@ -256,27 +256,28 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
             | Hotkeys
         ng-template(ngbTabContent)
             h3.mb-3 Hotkeys
-            
+
             .input-group.mb-4
                 .input-group-prepend
                     .input-group-text
                         i.fas.fa-fw.fa-search
                 input.form-control(type='search', placeholder='Search hotkeys', [(ngModel)]='hotkeyFilter')
-                            
+
             .form-group
                 table.hotkeys-table
                     tr
                         th Name
                         th ID
                         th Hotkey
-                    tr(*ngFor='let hotkey of hotkeyDescriptions|filterBy:["name"]:hotkeyFilter')
-                        td {{hotkey.name}}
-                        td {{hotkey.id}}
-                        td.pr-5
-                            multi-hotkey-input(
-                                [model]='getHotkey(hotkey.id)',
-                                (modelChange)='setHotkey(hotkey.id, $event); config.save(); docking.dock()'
-                            )
+                    ng-container(*ngFor='let hotkey of hotkeyDescriptions')
+                        tr(*ngIf='!hotkeyFilter || hotkey.name.toLowerCase().includes(hotkeyFilter.toLowerCase())')
+                            td {{hotkey.name}}
+                            td {{hotkey.id}}
+                            td.pr-5
+                                multi-hotkey-input(
+                                    [model]='getHotkey(hotkey.id)',
+                                    (modelChange)='setHotkey(hotkey.id, $event); config.save(); docking.dock()'
+                                )
 
     ngb-tab(*ngFor='let provider of settingsProviders', [id]='provider.id')
         ng-template(ngbTabTitle)
@@ -285,7 +286,7 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
         ng-template(ngbTabContent)
             settings-tab-body([provider]='provider')
 
-                
+
     ngb-tab(id='config-file')
         ng-template(ngbTabTitle)
             i.fas.fa-fw.fa-code.mr-2
@@ -303,7 +304,7 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
                         textarea.form-control.h-100(
                             [(ngModel)]='configDefaults',
                             readonly
-                        )   
+                        )
                 .mt-2.mb-2.d-flex
                     button.btn.btn-primary((click)='saveConfigFile()', *ngIf='isConfigFileValid()')
                         i.fas.fa-check.mr-2

terminus-settings/src/components/settingsTab.deep.component.css

@@ -1,12 +1,12 @@
 :host /deep/ ngb-tabset {
     flex: auto;
     display: flex;
+    height: 100%;
 }
 
 :host /deep/ ngb-tabset > .nav {
-    display: flex;
-    flex-direction: column;
-    flex: none;
+    display: block;
+    overflow-y: auto;
 }
 
 :host /deep/ ngb-tabset > .tab-content {

terminus-settings/src/index.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgPipesModule } from 'ngx-pipes'
 
 import TerminusCorePlugin, { ToolbarButtonProvider, TabRecoveryProvider, HotkeyProvider, ConfigProvider } from 'terminus-core'
 
@@ -22,7 +21,6 @@ import { SettingsConfigProvider } from './config'
         BrowserModule,
         FormsModule,
         NgbModule,
-        NgPipesModule,
         TerminusCorePlugin,
     ],
     providers: [

terminus-settings/src/recoveryProvider.ts

@@ -6,7 +6,7 @@ import { SettingsTabComponent } from './components/settingsTab.component'
 /** @hidden */
 @Injectable()
 export class RecoveryProvider extends TabRecoveryProvider {
-    async recover (recoveryToken: any): Promise<RecoveredTab> {
+    async recover (recoveryToken: any): Promise<RecoveredTab|null> {
         if (recoveryToken && recoveryToken.type === 'app:settings') {
             return { type: SettingsTabComponent }
         }

terminus-settings/webpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
     target: 'node',
     entry: 'src/index.ts',
     context: __dirname,
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'eval-cheap-module-source-map',
     output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'index.js',

terminus-settings/yarn.lock

@@ -6,8 +6,3 @@
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/deep-equal/-/deep-equal-1.0.1.tgz#71cfabb247c22bcc16d536111f50c0ed12476b03"
   integrity sha512-mMUu4nWHLBlHtxXY17Fg6+ucS/MnndyOWyOe7MmwkoMYxvfQU2ajtRaEvqSUv+aVkMqH/C0NCI8UoVfRNQ10yg==
-
-ngx-pipes@^1.6.1:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/ngx-pipes/-/ngx-pipes-1.6.6.tgz#32bb80906c220f1e84d5cce7d6dae002cffead4b"
-  integrity sha512-mRV0xOZDd6/Jlvti4W0pDepZRIHLHd3kZ6ZzdqyGCU0dxbKVWWLTR1jlNlxN1ruMk8eO0Y8lNh6a1bEW7dJP1w==

terminus-ssh/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminus-ssh",
-  "version": "1.0.83-nightly.0",
+  "version": "1.0.98-nightly.0",
   "description": "SSH connection manager for Terminus",
   "keywords": [
     "terminus-builtin-plugin"
@@ -17,9 +17,11 @@
   "author": "Eugene Pankov",
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "12.7.3",
     "@types/ssh2": "^0.5.35",
     "ssh2": "^0.8.2",
-    "ssh2-streams": "^0.4.2"
+    "ssh2-streams": "^0.4.2",
+    "terminus-terminal": "^1.0.98-nightly.0"
   },
   "peerDependencies": {
     "@angular/common": "^7",

terminus-ssh/src/api.ts

@@ -1,7 +1,11 @@
 import { BaseSession } from 'terminus-terminal'
+import { Server, Socket, createServer, createConnection } from 'net'
+import { Client, ClientChannel } from 'ssh2'
+import { Logger } from 'terminus-core'
+import { Subject, Observable } from 'rxjs'
 
 export interface LoginScript {
-    expect?: string
+    expect: string
     send: string
     isRegex?: boolean
     optional?: boolean
@@ -15,13 +19,13 @@ export enum SSHAlgorithmType {
 }
 
 export interface SSHConnection {
-    name?: string
+    name: string
     host: string
     port: number
     user: string
     password?: string
     privateKey?: string
-    group?: string
+    group: string | null
     scripts?: LoginScript[]
     keepaliveInterval?: number
     keepaliveCountMax?: number
@@ -30,18 +34,82 @@ export interface SSHConnection {
     algorithms?: {[t: string]: string[]}
 }
 
+export enum PortForwardType {
+    Local, Remote
+}
+
+export class ForwardedPort {
+    type: PortForwardType
+    host = '127.0.0.1'
+    port: number
+    targetAddress: string
+    targetPort: number
+
+    private listener: Server
+
+    async startLocalListener (callback: (Socket) => void): Promise<void> {
+        this.listener = createServer(callback)
+        return new Promise((resolve, reject) => {
+            this.listener.listen(this.port, '127.0.0.1')
+            this.listener.on('error', reject)
+            this.listener.on('listening', resolve)
+        })
+    }
+
+    stopLocalListener () {
+        this.listener.close()
+    }
+
+    toString () {
+        if (this.type === PortForwardType.Local) {
+            return `(local) ${this.host}:${this.port} → (remote) ${this.targetAddress}:${this.targetPort}`
+        } else {
+            return `(remote) ${this.host}:${this.port} → (local) ${this.targetAddress}:${this.targetPort}`
+        }
+    }
+}
+
 export class SSHSession extends BaseSession {
     scripts?: LoginScript[]
-    shell: any
+    shell: ClientChannel
+    ssh: Client
+    forwardedPorts: ForwardedPort[] = []
+    logger: Logger
+
+    get serviceMessage$ (): Observable<string> { return this.serviceMessage }
+    private serviceMessage = new Subject<string>()
 
     constructor (public connection: SSHConnection) {
         super()
         this.scripts = connection.scripts || []
     }
 
-    start () {
+    async start () {
         this.open = true
 
+        try {
+            try {
+                this.shell = await this.openShellChannel({ x11: true })
+            } catch (e) {
+                if (e.toString().includes('Unable to request X11')) {
+                    this.logger.debug('X11 forwarding rejected, trying without')
+                    this.shell = await this.openShellChannel({})
+                } else {
+                    throw e
+                }
+            }
+        } catch (err) {
+            this.emitServiceMessage(`Remote rejected opening a shell channel: ${err}`)
+        }
+
+        this.shell.on('greeting', greeting => {
+            this.emitServiceMessage(`Shell greeting: ${greeting}`)
+        })
+
+        this.shell.on('banner', banner => {
+            this.emitServiceMessage(`Shell banner: ${banner}`)
+        })
+
         this.shell.on('data', data => {
             const dataString = data.toString()
             this.emitOutput(dataString)
@@ -67,12 +135,12 @@ export class SSHSession extends BaseSession {
                     }
 
                     if (match) {
-                        console.log('Executing script: "' + cmd + '"')
+                        this.logger.info('Executing script: "' + cmd + '"')
                         this.shell.write(cmd + '\n')
                         this.scripts = this.scripts.filter(x => x !== script)
                     } else {
                         if (script.optional) {
-                            console.log('Skip optional script: ' + script.expect)
+                            this.logger.debug('Skip optional script: ' + script.expect)
                             found = true
                             this.scripts = this.scripts.filter(x => x !== script)
                         } else {
@@ -88,17 +156,140 @@ export class SSHSession extends BaseSession {
         })
 
         this.shell.on('end', () => {
+            this.logger.info('Shell session ended')
             if (this.open) {
                 this.destroy()
             }
         })
 
+        this.ssh.on('tcp connection', (details, accept, reject) => {
+            this.logger.info(`Incoming forwarded connection: (remote) ${details.srcIP}:${details.srcPort} -> (local) ${details.destIP}:${details.destPort}`)
+            const forward = this.forwardedPorts.find(x => x.port === details.destPort)
+            if (!forward) {
+                this.emitServiceMessage(`Rejected incoming forwarded connection for unrecognized port ${details.destPort}`)
+                return reject()
+            }
+            const socket = new Socket()
+            socket.connect(forward.targetPort, forward.targetAddress)
+            socket.on('error', e => {
+                this.emitServiceMessage(`Could not forward the remote connection to ${forward.targetAddress}:${forward.targetPort}: ${e}`)
+                reject()
+            })
+            socket.on('connect', () => {
+                this.logger.info('Connection forwarded')
+                const stream = accept()
+                stream.pipe(socket)
+                socket.pipe(stream)
+                stream.on('close', () => {
+                    socket.destroy()
+                })
+                socket.on('close', () => {
+                    stream.close()
+                })
+            })
+        })
+
+        this.ssh.on('x11', (details, accept, reject) => {
+            this.logger.info(`Incoming X11 connection from ${details.srcIP}:${details.srcPort}`)
+            let displaySpec = process.env.DISPLAY || ':0'
+            this.logger.debug(`Trying display ${displaySpec}`)
+            let xHost = displaySpec.split(':')[0]
+            let xDisplay = parseInt(displaySpec.split(':')[1].split('.')[0] || '0')
+            let xPort = xDisplay < 100 ? xDisplay + 6000 : xDisplay
+
+            const socket = displaySpec.startsWith('/') ? createConnection(displaySpec) : new Socket()
+            if (!displaySpec.startsWith('/')) {
+                socket.connect(xPort, xHost)
+            }
+            socket.on('error', e => {
+                this.emitServiceMessage(`Could not connect to the X server ${xHost}:${xPort}: ${e}`)
+                reject()
+            })
+            socket.on('connect', () => {
+                this.logger.info('Connection forwarded')
+                const stream = accept()
+                stream.pipe(socket)
+                socket.pipe(stream)
+                stream.on('close', () => {
+                    socket.destroy()
+                })
+                socket.on('close', () => {
+                    stream.close()
+                })
+            })
+        })
+
         this.executeUnconditionalScripts()
     }
 
+    emitServiceMessage (msg: string) {
+        this.serviceMessage.next(msg)
+        this.logger.info(msg)
+    }
+
+    async addPortForward (fw: ForwardedPort) {
+        if (fw.type === PortForwardType.Local) {
+            await fw.startLocalListener((socket: Socket) => {
+                this.logger.info(`New connection on ${fw}`)
+                this.ssh.forwardOut(
+                    socket.remoteAddress || '127.0.0.1',
+                    socket.remotePort || 0,
+                    fw.targetAddress,
+                    fw.targetPort,
+                    (err, stream) => {
+                        if (err) {
+                            this.emitServiceMessage(`Remote has rejected the forwaded connection via ${fw}: ${err}`)
+                            socket.destroy()
+                            return
+                        }
+                        stream.pipe(socket)
+                        socket.pipe(stream)
+                        stream.on('close', () => {
+                            socket.destroy()
+                        })
+                        socket.on('close', () => {
+                            stream.close()
+                        })
+                    }
+                )
+            }).then(() => {
+                this.emitServiceMessage(`Forwaded ${fw}`)
+                this.forwardedPorts.push(fw)
+            }).catch(e => {
+                this.emitServiceMessage(`Failed to forward port ${fw}: ${e}`)
+                throw e
+            })
+        }
+        if (fw.type === PortForwardType.Remote) {
+            await new Promise((resolve, reject) => {
+                this.ssh.forwardIn(fw.host, fw.port, err => {
+                    if (err) {
+                        this.emitServiceMessage(`Remote rejected port forwarding for ${fw}: ${err}`)
+                        return reject(err)
+                    }
+                    resolve()
+                })
+            })
+            this.emitServiceMessage(`Forwaded ${fw}`)
+            this.forwardedPorts.push(fw)
+        }
+    }
+
+    async removePortForward (fw: ForwardedPort) {
+        if (fw.type === PortForwardType.Local) {
+            fw.stopLocalListener()
+            this.forwardedPorts = this.forwardedPorts.filter(x => x !== fw)
+        }
+        if (fw.type === PortForwardType.Remote) {
+            this.ssh.unforwardIn(fw.host, fw.port)
+            this.forwardedPorts = this.forwardedPorts.filter(x => x !== fw)
+        }
+        this.emitServiceMessage(`Stopped forwarding ${fw}`)
+    }
+
     resize (columns, rows) {
         if (this.shell) {
-            this.shell.setWindow(rows, columns)
+            this.shell.setWindow(rows, columns, rows, columns)
         }
     }
 
@@ -114,6 +305,11 @@ export class SSHSession extends BaseSession {
         }
     }
 
+    async destroy (): Promise<void> {
+        this.serviceMessage.complete()
+        await super.destroy()
+    }
+
     async getChildProcesses (): Promise<any[]> {
         return []
     }
@@ -122,10 +318,22 @@ export class SSHSession extends BaseSession {
         this.kill('TERM')
     }
 
-    async getWorkingDirectory (): Promise<string> {
+    async getWorkingDirectory (): Promise<string|null> {
         return null
     }
 
+    private openShellChannel (options): Promise<ClientChannel> {
+        return new Promise<ClientChannel>((resolve, reject) => {
+            this.ssh.shell({ term: 'xterm-256color' }, options, (err, shell) => {
+                if (err) {
+                    reject(err)
+                } else {
+                    resolve(shell)
+                }
+            })
+        })
+    }
+
     private executeUnconditionalScripts () {
         if (this.scripts) {
             for (const script of this.scripts) {

terminus-ssh/src/components/editConnectionModal.component.pug

@@ -1,69 +1,69 @@
 .modal-body
-    ngb-tabset(type='pills', [activeId]='basic')
+    ngb-tabset([activeId]='basic')
         ngb-tab(id='basic')
             ng-template(ngbTabTitle) General
             ng-template(ngbTabContent)
                 .form-group
                     label Name
                     input.form-control(
-                        type='text', 
-                        autofocus, 
-                        [(ngModel)]='connection.name', 
+                        type='text',
+                        autofocus,
+                        [(ngModel)]='connection.name',
                     )
 
                 .form-group
                     label Group
                     input.form-control(
-                        type='text', 
+                        type='text',
                         placeholder='Ungrouped',
-                        [(ngModel)]='connection.group', 
+                        [(ngModel)]='connection.group',
                     )
 
                 .form-group
                     label Host
                     input.form-control(
-                        type='text', 
-                        [(ngModel)]='connection.host', 
+                        type='text',
+                        [(ngModel)]='connection.host',
                     )
 
                 .form-group
                     label Port
                     input.form-control(
                         type='number',
-                        placeholder='22', 
-                        [(ngModel)]='connection.port', 
+                        placeholder='22',
+                        [(ngModel)]='connection.port',
                     )
 
                 .form-group
                     label Username
                     input.form-control(
-                        type='text', 
-                        [(ngModel)]='connection.user', 
+                        type='text',
+                        [(ngModel)]='connection.user',
                     )
-                    
+
                 .form-line
                     .header
                         .title Password
                         .description(*ngIf='!hasSavedPassword') Save a password in the keychain
                         .description(*ngIf='hasSavedPassword') There is a saved password for this connection
-                    button.btn.btn-outline-success.ml-4(*ngIf='!hasSavedPassword', (click)='setPassword()') 
-                        i.fas.fa-key 
+                    button.btn.btn-outline-success.ml-4(*ngIf='!hasSavedPassword', (click)='setPassword()')
+                        i.fas.fa-key
                         span Set password
-                    button.btn.btn-danger.ml-4(*ngIf='hasSavedPassword', (click)='clearSavedPassword()') 
+                    button.btn.btn-danger.ml-4(*ngIf='hasSavedPassword', (click)='clearSavedPassword()')
                         i.fas.fa-trash-alt
                         span Forget
-                    
+
                 .form-line
                     .header
-                        .title Private key 
+                        .title Private key
                         .description Path to the private key file
                     .input-group
                         input.form-control(
-                            type='text', 
-                            placeholder='Key file path', 
+                            type='text',
+                            placeholder='Key file path',
                             [(ngModel)]='connection.privateKey'
                         )
-                        .input-group-btn
+                        .input-group-append
                             button.btn.btn-secondary((click)='selectPrivateKey()')
                                 i.fas.fa-folder-open
 
@@ -73,27 +73,27 @@
                 .form-group
                     label Keep Alive Interval (Milliseconds)
                     input.form-control(
-                        type='number', 
-                        placeholder='0', 
-                        [(ngModel)]='connection.keepaliveInterval', 
+                        type='number',
+                        placeholder='0',
+                        [(ngModel)]='connection.keepaliveInterval',
                     )
 
                 .form-group
                     label Max Keep Alive Count
                     input.form-control(
-                        type='number', 
-                        placeholder='3', 
-                        [(ngModel)]='connection.keepaliveCountMax', 
+                        type='number',
+                        placeholder='3',
+                        [(ngModel)]='connection.keepaliveCountMax',
                     )
 
                 .form-group
                     label Ready Timeout (Milliseconds)
                     input.form-control(
-                        type='number', 
-                        placeholder='20000', 
-                        [(ngModel)]='connection.readyTimeout', 
+                        type='number',
+                        placeholder='20000',
+                        [(ngModel)]='connection.readyTimeout',
                     )
-                    
+
                 .form-group
                     label Ciphers
                     div(*ngFor='let alg of supportedAlgorithms.cipher')
@@ -128,12 +128,12 @@
                     tr(*ngFor='let script of connection.scripts')
                         td.pr-2
                             input.form-control(
-                                type='text', 
+                                type='text',
                                 [(ngModel)]='script.expect'
                             )
                         td
                             input.form-control(
-                                type='text', 
+                                type='text',
                                 [(ngModel)]='script.send'
                             )
                         td.pl-2
@@ -152,11 +152,11 @@
                                     i.fas.fa-arrow-down
                                 button.btn.btn-outline-danger.ml-0((click)='deleteScript(script)')
                                     i.fas.fa-trash
-                
+
                 button.btn.btn-outline-info.mt-2((click)='addScript()')
                     i.fas.fa-plus
                     span New item
-    
+
 .modal-footer
     button.btn.btn-outline-primary((click)='save()') Save
     button.btn.btn-outline-danger((click)='cancel()') Cancel

terminus-ssh/src/components/editConnectionModal.component.ts

@@ -66,7 +66,7 @@ export class EditConnectionModalComponent {
         modal.componentInstance.password = true
         try {
             const result = await modal.result
-            if (result && result.value) {
+            if (result?.value) {
                 this.passwordStorage.savePassword(this.connection, result.value)
                 this.hasSavedPassword = true
             }
@@ -79,20 +79,21 @@ export class EditConnectionModalComponent {
     }
 
     selectPrivateKey () {
-        const path = this.electron.dialog.showOpenDialog(
+        this.electron.dialog.showOpenDialog(
             this.hostApp.getWindow(),
             {
                 title: 'Select private key',
             }
-        )
-        if (path) {
-            this.connection.privateKey = path[0]
-        }
+        ).then(result => {
+            if (result.filePaths) {
+                this.connection.privateKey = result.filePaths[0]
+            }
+        })
     }
 
     save () {
         for (const k of Object.values(SSHAlgorithmType)) {
-            this.connection.algorithms[k] = Object.entries(this.algorithms[k])
+            this.connection.algorithms![k] = Object.entries(this.algorithms[k])
                 .filter(([_k, v]) => !!v)
                 .map(([k, _v]) => k)
         }
@@ -104,6 +105,9 @@ export class EditConnectionModalComponent {
     }
 
     moveScriptUp (script: LoginScript) {
+        if (!this.connection.scripts) {
+            this.connection.scripts = []
+        }
         const index = this.connection.scripts.indexOf(script)
         if (index > 0) {
             this.connection.scripts.splice(index, 1)
@@ -112,6 +116,9 @@ export class EditConnectionModalComponent {
     }
 
     moveScriptDown (script: LoginScript) {
+        if (!this.connection.scripts) {
+            this.connection.scripts = []
+        }
         const index = this.connection.scripts.indexOf(script)
         if (index >= 0 && index < this.connection.scripts.length - 1) {
             this.connection.scripts.splice(index, 1)
@@ -120,7 +127,7 @@ export class EditConnectionModalComponent {
     }
 
     async deleteScript (script: LoginScript) {
-        if ((await this.electron.showMessageBox(
+        if (this.connection.scripts && (await this.electron.showMessageBox(
             this.hostApp.getWindow(),
             {
                 type: 'warning',
@@ -135,6 +142,9 @@ export class EditConnectionModalComponent {
     }
 
     addScript () {
+        if (!this.connection.scripts) {
+            this.connection.scripts = []
+        }
         this.connection.scripts.push({ expect: '', send: '' })
     }
 }

terminus-ssh/src/components/promptModal.component.ts

@@ -6,6 +6,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
     template: require('./promptModal.component.pug'),
 })
 export class PromptModalComponent {
+    @Input() prompt: string
     @Input() value: string
     @Input() password: boolean
     @Input() remember: boolean

terminus-ssh/src/components/sshModal.component.ts

@@ -15,7 +15,7 @@ export class SSHModalComponent {
     connections: SSHConnection[]
     childFolders: SSHConnectionGroup[]
     quickTarget: string
-    lastConnection: SSHConnection
+    lastConnection: SSHConnection|null = null
     childGroups: SSHConnectionGroup[]
     groupCollapsed: {[id: string]: boolean} = {}
 
@@ -49,6 +49,7 @@ export class SSHModalComponent {
 
         const connection: SSHConnection = {
             name: this.quickTarget,
+            group: null,
             host,
             user,
             port,
@@ -87,7 +88,7 @@ export class SSHModalComponent {
 
         let connections = this.connections
         if (this.quickTarget) {
-            connections = connections.filter(connection => (connection.name + connection.group).toLowerCase().includes(this.quickTarget))
+            connections = connections.filter((connection: SSHConnection) => (connection.name + connection.group!).toLowerCase().includes(this.quickTarget))
         }
 
         for (const connection of connections) {
@@ -95,10 +96,10 @@ export class SSHModalComponent {
             let group = this.childGroups.find(x => x.name === connection.group)
             if (!group) {
                 group = {
-                    name: connection.group,
+                    name: connection.group!,
                     connections: [],
                 }
-                this.childGroups.push(group)
+                this.childGroups.push(group!)
             }
             group.connections.push(connection)
         }

terminus-ssh/src/components/sshPortForwardingModal.component.pug

@@ -0,0 +1,48 @@
+.modal-header
+    h5.m-0 Port forwarding
+
+.modal-body.pt-0
+    .list-group-light.mb-3
+        .list-group-item.d-flex.align-items-center(*ngFor='let fw of session.forwardedPorts')
+            strong(*ngIf='fw.type === PortForwardType.Local') Local
+            strong(*ngIf='fw.type === PortForwardType.Remote') Remote
+            .ml-3 {{fw.host}}:{{fw.port}} → {{fw.targetAddress}}:{{fw.targetPort}}
+            button.btn.btn-link.ml-auto((click)='remove(fw)')
+                i.fas.fa-trash-alt.mr-2
+                span Remove
+
+    .input-group.mb-2
+        input.form-control(type='text', [(ngModel)]='newForward.host')
+        .input-group-append
+            .input-group-text :
+        input.form-control(type='number', [(ngModel)]='newForward.port')
+        .input-group-append
+            .input-group-text →
+        input.form-control(type='text', [(ngModel)]='newForward.targetAddress')
+        .input-group-append
+            .input-group-text :
+        input.form-control(type='number', [(ngModel)]='newForward.targetPort')
+
+    .d-flex
+        .btn-group.mr-auto(
+            [(ngModel)]='newForward.type',
+            ngbRadioGroup
+        )
+            label.btn.btn-secondary.m-0(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='PortForwardType.Local'
+                )
+                | Local
+            label.btn.btn-secondary.m-0(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='PortForwardType.Remote'
+                )
+                | Remote
+
+        button.btn.btn-primary((click)='addForward()')
+            i.fas.fa-check.mr-2
+            span Forward port

terminus-ssh/src/components/sshPortForwardingModal.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { ForwardedPort, PortForwardType, SSHSession } from '../api'
+
+/** @hidden */
+@Component({
+    template: require('./sshPortForwardingModal.component.pug'),
+    // styles: [require('./sshPortForwardingModal.component.scss')],
+})
+export class SSHPortForwardingModalComponent {
+    @Input() session: SSHSession
+    newForward = new ForwardedPort()
+    PortForwardType = PortForwardType
+
+    constructor (
+        public modalInstance: NgbActiveModal,
+    ) {
+        this.reset()
+    }
+
+    reset () {
+        this.newForward = new ForwardedPort()
+        this.newForward.type = PortForwardType.Local
+        this.newForward.host = '127.0.0.1'
+        this.newForward.port = 8000
+        this.newForward.targetAddress = '127.0.0.1'
+        this.newForward.targetPort = 80
+    }
+
+    async addForward () {
+        try {
+            await this.session.addPortForward(this.newForward)
+            this.reset()
+        } catch (e) {
+            console.error(e)
+        }
+    }
+
+    remove (fw: ForwardedPort) {
+        this.session.removePortForward(fw)
+    }
+}

terminus-ssh/src/components/sshSettingsTab.component.ts

@@ -27,6 +27,7 @@ export class SSHSettingsTabComponent {
     createConnection () {
         const connection: SSHConnection = {
             name: '',
+            group: null,
             host: '',
             port: 22,
             user: 'root',
@@ -113,10 +114,10 @@ export class SSHSettingsTabComponent {
             let group = this.childGroups.find(x => x.name === connection.group)
             if (!group) {
                 group = {
-                    name: connection.group,
+                    name: connection.group!,
                     connections: [],
                 }
-                this.childGroups.push(group)
+                this.childGroups.push(group!)
             }
             group.connections.push(connection)
         }

terminus-ssh/src/components/sshTab.component.pug

@@ -0,0 +1,3 @@
+button.btn.btn-outline-secondary((click)='showPortForwarding()')
+    i.fas.fa-plug
+    span Ports

terminus-ssh/src/components/sshTab.component.scss

@@ -3,6 +3,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    position: relative;
 
     &> .content {
         flex: auto;
@@ -11,4 +12,11 @@
         overflow: hidden;
         margin: 15px;
     }
+
+    &> button {
+        position: absolute;
+        bottom: 20px;
+        right: 40px;
+        z-index: 4;
+    }
 }

terminus-ssh/src/components/sshTab.component.ts

@@ -1,18 +1,14 @@
 import { Component } from '@angular/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs/operators'
 import { BaseTerminalTabComponent } from 'terminus-terminal'
 import { SSHService } from '../services/ssh.service'
 import { SSHConnection, SSHSession } from '../api'
+import { SSHPortForwardingModalComponent } from './sshPortForwardingModal.component'
 
 /** @hidden */
 @Component({
-    template: `
-        <div
-            #content
-            class="content"
-            [style.opacity]='frontendIsReady ? 1 : 0'
-        ></div>
-    `,
+    template: BaseTerminalTabComponent.template + require<string>('./sshTab.component.pug'),
     styles: [require('./sshTab.component.scss'), ...BaseTerminalTabComponent.styles],
     animations: BaseTerminalTabComponent.animations,
 })
@@ -20,8 +16,11 @@ export class SSHTabComponent extends BaseTerminalTabComponent {
     connection: SSHConnection
     ssh: SSHService
     session: SSHSession
+    private ngbModal: NgbModal
 
     ngOnInit () {
+        this.ngbModal = this.injector.get<NgbModal>(NgbModal)
+
         this.logger = this.log.create('terminalTab')
         this.ssh = this.injector.get(SSHService)
         this.frontendReady$.pipe(first()).subscribe(() => {
@@ -41,12 +40,16 @@ export class SSHTabComponent extends BaseTerminalTabComponent {
             return
         }
 
-        this.session = new SSHSession(this.connection)
+        this.session = this.ssh.createSession(this.connection)
+        this.session.serviceMessage$.subscribe(msg => {
+            this.write(`\r\n[SSH] ${msg}\r\n`)
+            this.session.resize(this.size.columns, this.size.rows)
+        })
         this.attachSessionHandlers()
         this.write(`Connecting to ${this.connection.host}`)
         const interval = setInterval(() => this.write('.'), 500)
         try {
-            await this.ssh.connectSession(this.session, message => {
+            await this.ssh.connectSession(this.session, (message: string) => {
                 this.write('\r\n' + message)
             })
         } catch (e) {
@@ -57,8 +60,8 @@ export class SSHTabComponent extends BaseTerminalTabComponent {
             clearInterval(interval)
             this.write('\r\n')
         }
+        await this.session.start()
         this.session.resize(this.size.columns, this.size.rows)
-        this.session.start()
     }
 
     async getRecoveryToken (): Promise<any> {
@@ -67,4 +70,9 @@ export class SSHTabComponent extends BaseTerminalTabComponent {
             connection: this.connection,
         }
     }
+
+    showPortForwarding () {
+        const modal = this.ngbModal.open(SSHPortForwardingModalComponent).componentInstance as SSHPortForwardingModalComponent
+        modal.session = this.session
+    }
 }

terminus-ssh/src/index.ts

@@ -5,9 +5,11 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
 import TerminusCoreModule, { ToolbarButtonProvider, ConfigProvider, TabRecoveryProvider, HotkeyProvider } from 'terminus-core'
 import { SettingsTabProvider } from 'terminus-settings'
+import TerminusTerminalModule from 'terminus-terminal'
 
 import { EditConnectionModalComponent } from './components/editConnectionModal.component'
 import { SSHModalComponent } from './components/sshModal.component'
+import { SSHPortForwardingModalComponent } from './components/sshPortForwardingModal.component'
 import { PromptModalComponent } from './components/promptModal.component'
 import { SSHSettingsTabComponent } from './components/sshSettingsTab.component'
 import { SSHTabComponent } from './components/sshTab.component'
@@ -26,6 +28,7 @@ import { SSHHotkeyProvider } from './hotkeys'
         FormsModule,
         ToastrModule,
         TerminusCoreModule,
+        TerminusTerminalModule,
     ],
     providers: [
         { provide: ToolbarButtonProvider, useClass: ButtonProvider, multi: true },
@@ -38,6 +41,7 @@ import { SSHHotkeyProvider } from './hotkeys'
         EditConnectionModalComponent,
         PromptModalComponent,
         SSHModalComponent,
+        SSHPortForwardingModalComponent,
         SSHSettingsTabComponent,
         SSHTabComponent,
     ],
@@ -45,6 +49,7 @@ import { SSHHotkeyProvider } from './hotkeys'
         EditConnectionModalComponent,
         PromptModalComponent,
         SSHModalComponent,
+        SSHPortForwardingModalComponent,
         SSHSettingsTabComponent,
         SSHTabComponent,
     ],

terminus-ssh/src/recoveryProvider.ts

@@ -6,7 +6,7 @@ import { SSHTabComponent } from './components/sshTab.component'
 /** @hidden */
 @Injectable()
 export class RecoveryProvider extends TabRecoveryProvider {
-    async recover (recoveryToken: any): Promise<RecoveredTab> {
+    async recover (recoveryToken: any): Promise<RecoveredTab|null> {
         if (recoveryToken && recoveryToken.type === 'app:ssh-tab') {
             return {
                 type: SSHTabComponent,

terminus-ssh/src/services/passwordStorage.service.ts

@@ -12,7 +12,7 @@ export class PasswordStorageService {
         await keytar.deletePassword(`ssh@${connection.host}`, connection.user)
     }
 
-    async loadPassword (connection: SSHConnection): Promise<string> {
+    async loadPassword (connection: SSHConnection): Promise<string|null> {
         return keytar.getPassword(`ssh@${connection.host}`, connection.user)
     }
 }