.

Makefile

@@ -17,6 +17,16 @@ build:
 watch:
 	DEV=1 ./node_modules/.bin/webpack --progress -w
 
+install-deps:
+	npm install
+	npm prune
+	for dir in app terminus-* ; do \
+    	cd $$dir; \
+		npm --color always install 2>&1 | grep -v 'requires a peer'; \
+		npm --color always prune 2>&1 | grep -v 'requires a peer'; \
+		cd ..; \
+	done
+	make build-native
 
 build-native:
 	./node_modules/.bin/electron-rebuild -f -w terminus-terminal/node_modules/node-pty -m terminus-terminal

package.json

@@ -1,7 +1,6 @@
 {
   "name": "term",
   "devDependencies": {
-    "angular2-perfect-scrollbar": "2.0.0",
     "@types/fs-promise": "^1.0.1",
     "@types/core-js": "^0.9.35",
     "@types/electron": "1.4.34",

terminus-core/src/api/index.ts

@@ -1,4 +1,4 @@
-export { BaseTabComponent } from '../components/baseTab'
+export { BaseTabComponent } from '../components/baseTab.component'
 export { TabRecoveryProvider } from './tabRecovery'
 export { ToolbarButtonProvider, IToolbarButton } from './toolbarButtonProvider'
 export { ConfigProvider } from './configProvider'
@@ -6,10 +6,10 @@ export { HotkeyProvider, IHotkeyDescription } from './hotkeyProvider'
 export { DefaultTabProvider } from './defaultTabProvider'
 export { Theme } from './theme'
 
-export { AppService } from '../services/app'
-export { ConfigService } from '../services/config'
-export { DockingService } from '../services/docking'
-export { ElectronService } from '../services/electron'
-export { Logger, LogService } from '../services/log'
-export { HotkeysService } from '../services/hotkeys'
-export { HostAppService, Platform } from '../services/hostApp'
+export { AppService } from '../services/app.service'
+export { ConfigService } from '../services/config.service'
+export { DockingService } from '../services/docking.service'
+export { ElectronService } from '../services/electron.service'
+export { Logger, LogService } from '../services/log.service'
+export { HotkeysService } from '../services/hotkeys.service'
+export { HostAppService, Platform } from '../services/hostApp.service'

terminus-core/src/app.d.ts

@@ -1,8 +0,0 @@
-declare interface Window {
-    require: any
-    process: any
-    __dirname: any
-    __platform: any
-}
-
-declare var window: Window

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

@@ -2,23 +2,23 @@ import { Component, Inject } from '@angular/core'
 import { trigger, style, animate, transition, state } from '@angular/animations'
 import { ToasterConfig } from 'angular2-toaster'
 
-import { ElectronService } from '../services/electron'
-import { HostAppService } from '../services/hostApp'
-import { HotkeysService } from '../services/hotkeys'
-import { Logger, LogService } from '../services/log'
-import { QuitterService } from '../services/quitter'
-import { ConfigService } from '../services/config'
-import { DockingService } from '../services/docking'
-import { TabRecoveryService } from '../services/tabRecovery'
-import { ThemesService } from '../services/themes'
+import { ElectronService } from '../services/electron.service'
+import { HostAppService } from '../services/hostApp.service'
+import { HotkeysService } from '../services/hotkeys.service'
+import { Logger, LogService } from '../services/log.service'
+import { QuitterService } from '../services/quitter.service'
+import { ConfigService } from '../services/config.service'
+import { DockingService } from '../services/docking.service'
+import { TabRecoveryService } from '../services/tabRecovery.service'
+import { ThemesService } from '../services/themes.service'
 
 import { AppService, IToolbarButton, ToolbarButtonProvider } from '../api'
 
 
 @Component({
     selector: 'app-root',
-    template: require('./appRoot.pug'),
-    styles: [require('./appRoot.scss')],
+    template: require('./appRoot.component.pug'),
+    styles: [require('./appRoot.component.scss')],
     animations: [
         trigger('animateTab', [
             state('in', style({

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

@@ -3,8 +3,8 @@ import { IToolbarButton, ToolbarButtonProvider } from '../api'
 
 @Component({
   selector: 'start-page',
-  template: require('./startPage.pug'),
-  styles: [require('./startPage.scss')],
+  template: require('./startPage.component.pug'),
+  styles: [require('./startPage.component.scss')],
 })
 export class StartPageComponent {
     constructor(

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

@@ -1,5 +1,5 @@
 import { Component, Input, ViewChild, HostBinding, ViewContainerRef } from '@angular/core'
-import { BaseTabComponent } from '../components/baseTab'
+import { BaseTabComponent } from '../components/baseTab.component'
 
 @Component({
     selector: 'tab-body',

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

@@ -1,12 +1,10 @@
 import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core'
-import { BaseTabComponent } from '../components/baseTab'
-
-import './tabHeader.scss'
+import { BaseTabComponent } from '../components/baseTab.component'
 
 @Component({
   selector: 'tab-header',
-  template: require('./tabHeader.pug'),
-  styles: [require('./tabHeader.scss')],
+  template: require('./tabHeader.component.pug'),
+  styles: [require('./tabHeader.component.scss')],
 })
 export class TabHeaderComponent {
     @Input() index: number

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

@@ -1,10 +1,10 @@
 import { Component, HostBinding } from '@angular/core'
-import { HostAppService, Platform } from '../services/hostApp'
+import { HostAppService, Platform } from '../services/hostApp.service'
 
 @Component({
   selector: 'title-bar',
-  template: require('./titleBar.pug'),
-  styles: [require('./titleBar.scss')],
+  template: require('./titleBar.component.pug'),
+  styles: [require('./titleBar.component.scss')],
 })
 export class TitleBarComponent {
     @HostBinding('class.inset-titlebar') insetTitlebar = false

terminus-core/src/index.ts

@@ -6,24 +6,24 @@ import { ToasterModule } from 'angular2-toaster'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'
 
-import { AppService } from './services/app'
-import { ConfigService } from './services/config'
-import { ElectronService } from './services/electron'
-import { HostAppService } from './services/hostApp'
-import { LogService } from './services/log'
-import { HotkeysService, AppHotkeyProvider } from './services/hotkeys'
-import { NotifyService } from './services/notify'
-import { PluginsService } from './services/plugins'
-import { QuitterService } from './services/quitter'
-import { DockingService } from './services/docking'
-import { TabRecoveryService } from './services/tabRecovery'
-import { ThemesService } from './services/themes'
+import { AppService } from './services/app.service'
+import { ConfigService } from './services/config.service'
+import { ElectronService } from './services/electron.service'
+import { HostAppService } from './services/hostApp.service'
+import { LogService } from './services/log.service'
+import { HotkeysService, AppHotkeyProvider } from './services/hotkeys.service'
+import { NotifyService } from './services/notify.service'
+import { PluginsService } from './services/plugins.service'
+import { QuitterService } from './services/quitter.service'
+import { DockingService } from './services/docking.service'
+import { TabRecoveryService } from './services/tabRecovery.service'
+import { ThemesService } from './services/themes.service'
 
-import { AppRootComponent } from './components/appRoot'
+import { AppRootComponent } from './components/appRoot.component'
 import { TabBodyComponent } from './components/tabBody.component'
-import { StartPageComponent } from './components/startPage'
-import { TabHeaderComponent } from './components/tabHeader'
-import { TitleBarComponent } from './components/titleBar'
+import { StartPageComponent } from './components/startPage.component'
+import { TabHeaderComponent } from './components/tabHeader.component'
+import { TitleBarComponent } from './components/titleBar.component'
 
 import { HotkeyProvider } from './api/hotkeyProvider'
 import { Theme } from './api/theme'

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

@@ -1,8 +1,8 @@
 import { Subject } from 'rxjs'
 import { Injectable, ComponentFactoryResolver, Injector, Optional } from '@angular/core'
-import { Logger, LogService } from '../services/log'
 import { DefaultTabProvider } from '../api/defaultTabProvider'
-import { BaseTabComponent } from '../components/baseTab'
+import { BaseTabComponent } from '../components/baseTab.component'
+import { Logger, LogService } from '../services/log.service'
 
 export declare type TabComponentType = new (...args: any[]) => BaseTabComponent
 

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

@@ -2,8 +2,8 @@ import * as yaml from 'js-yaml'
 import * as path from 'path'
 import * as fs from 'fs'
 import { EventEmitter, Injectable, Inject } from '@angular/core'
-import { ElectronService } from '../services/electron'
 import { ConfigProvider } from '../api/configProvider'
+import { ElectronService } from '../services/electron.service'
 
 
 export class ConfigProxy {

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
-import { HostAppService } from '../services/hostApp'
-import { ConfigService } from '../services/config'
-import { ElectronService } from '../services/electron'
+import { ConfigService } from '../services/config.service'
+import { ElectronService } from '../services/electron.service'
+import { HostAppService } from '../services/hostApp.service'
 
 
 export interface IScreen {

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

@@ -1,6 +1,6 @@
 import { Injectable, NgZone, EventEmitter } from '@angular/core'
-import { ElectronService } from '../services/electron'
-import { Logger, LogService } from '../services/log'
+import { ElectronService } from '../services/electron.service'
+import { Logger, LogService } from '../services/log.service'
 
 export enum Platform {
     Linux, macOS, Windows,

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

@@ -1,8 +1,8 @@
 import { Injectable, Inject, NgZone, EventEmitter } from '@angular/core'
-import { ElectronService } from '../services/electron'
-import { ConfigService } from '../services/config'
-import { NativeKeyEvent, stringifyKeySequence } from './hotkeys.util'
 import { IHotkeyDescription, HotkeyProvider } from '../api/hotkeyProvider'
+import { NativeKeyEvent, stringifyKeySequence } from './hotkeys.util'
+import { ConfigService } from '../services/config.service'
+import { ElectronService } from '../services/electron.service'
 
 
 export interface PartialHotkeyMatch {

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { HostAppService } from '../services/hostApp'
+import { HostAppService } from '../services/hostApp.service'
 
 
 @Injectable()

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

@@ -1,8 +1,8 @@
 import { Injectable, Inject } from '@angular/core'
-import { Logger, LogService } from '../services/log'
-import { BaseTabComponent } from '../components/baseTab'
 import { TabRecoveryProvider } from '../api/tabRecovery'
-import { AppService } from '../services/app'
+import { BaseTabComponent } from '../components/baseTab.component'
+import { Logger, LogService } from '../services/log.service'
+import { AppService } from '../services/app.service'
 
 
 @Injectable()

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

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@angular/core'
-import { ConfigService } from '../services/config'
+import { ConfigService } from '../services/config.service'
 import { Theme } from '../api/theme'
 
 

terminus-settings/src/buttonProvider.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { ToolbarButtonProvider, IToolbarButton, AppService } from 'terminus-core'
 
-import { SettingsTabComponent } from './components/settingsTab'
+import { SettingsTabComponent } from './components/settingsTab.component'
 
 
 @Injectable()

terminus-settings/src/components/hotkeyDisplay.pug

@@ -1,7 +0,0 @@
-.stroke(*ngFor='let stroke of model')
-    .key-container(
-        *ngFor='let key of splitKeys(stroke); let isLast = last; trackBy: key',
-        [@animateKey]='animate ? "in" : ""'
-    )
-        .key {{key}}
-        .plus(*ngIf='!isLast') +

terminus-settings/src/components/hotkeyDisplay.scss

@@ -1,26 +0,0 @@
-:host {
-    display: inline-block;
-
-    .stroke {
-        display: inline-block;
-        margin: 0 5px;
-        background: #222;
-        border-radius: 2px;
-        box-shadow: 0 1px 0 rgba(0,0,0,.5);
-        text-shadow: 0 1px 0 rgba(0,0,0,.5);
-
-        .key-container {
-            display: inline-block;
-
-            .key {
-                display: inline-block;
-                padding: 4px 5px;
-            }
-
-            .plus {
-                display: inline-block;
-                padding: 4px 2px;
-            }
-        }
-    }
-}

terminus-settings/src/components/hotkeyDisplay.ts

@@ -1,41 +0,0 @@
-import { Component, Input, trigger, style, animate, transition } from '@angular/core'
-
-
-@Component({
-    selector: 'hotkey-display',
-    template: require('./hotkeyDisplay.pug'),
-    styles: [require('./hotkeyDisplay.scss')],
-    //changeDetection: ChangeDetectionStrategy.OnPush,
-    animations: [
-        trigger('animateKey', [
-            transition('void => in', [
-                style({
-                    transform: 'translateX(25px)',
-                    opacity: '0',
-                }),
-                animate('250ms ease-out', style({
-                    transform: 'translateX(0)',
-                    opacity: '1',
-                }))
-            ]),
-            transition('in => void', [
-                style({
-                    transform: 'translateX(0)',
-                    opacity: '1',
-                }),
-                animate('250ms ease-in', style({
-                    transform: 'translateX(25px)',
-                    opacity: '0',
-                }))
-            ])
-        ])
-    ]
-})
-export class HotkeyDisplayComponent {
-    splitKeys(keys: string): string[] {
-        return keys.split('+').map((x) => x.trim())
-    }
-
-    @Input() model: string[]
-    @Input() animate = false
-}

terminus-settings/src/components/hotkeyInput.scss

@@ -1,14 +0,0 @@
-:host {
-    display: inline-block;
-    padding: 5px;
-
-    transition: 0.125s all;
-
-    &:hover:not(.active) {
-        background: rgba(255, 255, 255, .033);
-    }
-
-    &:active:not(.active) {
-        background: rgba(0, 0, 0, .1);
-    }
-}

terminus-settings/src/components/hotkeyInput.ts

@@ -1,33 +0,0 @@
-import { Component, Input, Output, EventEmitter, HostListener, ChangeDetectionStrategy } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-
-import { HotkeyInputModalComponent } from './hotkeyInputModal'
-
-
-@Component({
-  selector: 'hotkey-input',
-  template: `
-    <hotkey-display [model]='model'></hotkey-display>
-  `,
-  styles: [require('./hotkeyInput.scss')],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HotkeyInputComponent {
-    constructor(
-        private ngbModal: NgbModal,
-    ) { }
-
-    @HostListener('click') public click() {
-        this.ngbModal.open(HotkeyInputModalComponent).result.then((value: string[]) => {
-            this.model = value
-            this.modelChange.emit(this.model)
-        })
-    }
-
-    splitKeys(keys: string): string[] {
-        return keys.split('+').map((x) => x.trim())
-    }
-
-    @Input() model: string[]
-    @Output() modelChange = new EventEmitter()
-}

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

@@ -8,8 +8,8 @@ const INPUT_TIMEOUT = 1000
 
 @Component({
   selector: 'hotkey-input-modal',
-  template: require('./hotkeyInputModal.pug'),
-  styles: [require('./hotkeyInputModal.scss')],
+  template: require('./hotkeyInputModal.component.pug'),
+  styles: [require('./hotkeyInputModal.component.scss')],
   animations: [
       trigger('animateKey', [
           transition(':enter', [

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

@@ -1,12 +1,12 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { HotkeyInputModalComponent } from './hotkeyInputModal'
+import { HotkeyInputModalComponent } from './hotkeyInputModal.component'
 
 
 @Component({
   selector: 'multi-hotkey-input',
-  template: require('./multiHotkeyInput.pug'),
-  styles: [require('./multiHotkeyInput.scss')],
+  template: require('./multiHotkeyInput.component.pug'),
+  styles: [require('./multiHotkeyInput.component.scss')],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MultiHotkeyInputComponent {

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

@@ -6,10 +6,10 @@ import { SettingsTabProvider } from '../api'
 
 @Component({
   selector: 'settings-tab',
-  template: require('./settingsTab.pug'),
+  template: require('./settingsTab.component.pug'),
   styles: [
-    require('./settingsTab.scss'),
-    require('./settingsTab.deep.css'),
+    require('./settingsTab.component.scss'),
+    require('./settingsTab.deep.component.css'),
   ],
 })
 export class SettingsTabComponent extends BaseTabComponent {

terminus-settings/src/index.ts

@@ -6,12 +6,10 @@ import { Ng2FilterPipeModule } from 'ng2-filter-pipe'
 
 import { ToolbarButtonProvider, TabRecoveryProvider } from 'terminus-core'
 
-import { HotkeyInputComponent } from './components/hotkeyInput'
-import { HotkeyDisplayComponent } from './components/hotkeyDisplay'
-import { HotkeyInputModalComponent } from './components/hotkeyInputModal'
-import { MultiHotkeyInputComponent } from './components/multiHotkeyInput'
-import { SettingsTabComponent } from './components/settingsTab'
-import { SettingsTabBodyComponent } from './components/settingsTabBody'
+import { HotkeyInputModalComponent } from './components/hotkeyInputModal.component'
+import { MultiHotkeyInputComponent } from './components/multiHotkeyInput.component'
+import { SettingsTabComponent } from './components/settingsTab.component'
+import { SettingsTabBodyComponent } from './components/settingsTabBody.component'
 
 import { ButtonProvider } from './buttonProvider'
 import { RecoveryProvider } from './recoveryProvider'
@@ -33,8 +31,6 @@ import { RecoveryProvider } from './recoveryProvider'
         SettingsTabComponent,
     ],
     declarations: [
-        HotkeyDisplayComponent,
-        HotkeyInputComponent,
         HotkeyInputModalComponent,
         MultiHotkeyInputComponent,
         SettingsTabComponent,

terminus-settings/src/recoveryProvider.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { TabRecoveryProvider, AppService } from 'terminus-core'
 
-import { SettingsTabComponent } from './components/settingsTab'
+import { SettingsTabComponent } from './components/settingsTab.component'
 
 
 @Injectable()

terminus-terminal/src/api.ts

@@ -1,4 +1,4 @@
-import { TerminalTabComponent } from './components/terminalTab'
+import { TerminalTabComponent } from './components/terminalTab.component'
 export { TerminalTabComponent }
 
 export abstract class TerminalDecorator {

terminus-terminal/src/buttonProvider.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core'
 import { HotkeysService, ToolbarButtonProvider, IToolbarButton, AppService, ConfigService } from 'terminus-core'
 
-import { SessionsService } from './services/sessions'
-import { TerminalTabComponent } from './components/terminalTab'
+import { SessionsService } from './services/sessions.service'
+import { TerminalTabComponent } from './components/terminalTab.component'
 
 
 @Injectable()

terminus-terminal/src/components/colorPicker.component.ts

@@ -4,8 +4,8 @@ import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
     selector: 'color-picker',
-    template: require('./colorPicker.pug'),
-    styles: [require('./colorPicker.scss')],
+    template: require('./colorPicker.component.pug'),
+    styles: [require('./colorPicker.component.scss')],
 })
 export class ColorPickerComponent {
     @Input() model: string

terminus-terminal/src/components/terminalSettingsTab.component.ts

@@ -13,8 +13,8 @@ import { TerminalColorSchemeProvider, ITerminalColorScheme } from '../api'
 
 
 @Component({
-    template: require('./terminalSettingsTab.pug'),
-    styles: [require('./terminalSettingsTab.scss')],
+    template: require('./terminalSettingsTab.component.pug'),
+    styles: [require('./terminalSettingsTab.component.scss')],
 })
 export class TerminalSettingsTabComponent {
     fonts: string[] = []

terminus-terminal/src/components/terminalTab.component.ts

@@ -2,15 +2,16 @@ import { BehaviorSubject, ReplaySubject, Subject, Subscription } from 'rxjs'
 import { Component, NgZone, Inject, ViewChild, HostBinding, Input } from '@angular/core'
 import { AppService, ConfigService, BaseTabComponent } from 'terminus-core'
 
+import { Session } from '../services/sessions.service'
+
 import { TerminalDecorator, ResizeEvent } from '../api'
-import { Session } from '../services/sessions'
 import { hterm, preferenceManager } from '../hterm'
 
 
 @Component({
   selector: 'terminalTab',
   template: '<div #content class="content"></div>',
-  styles: [require('./terminalTab.scss')],
+  styles: [require('./terminalTab.component.scss')],
 })
 export class TerminalTabComponent extends BaseTabComponent {
     hterm: any

terminus-terminal/src/hterm.ts

@@ -18,7 +18,7 @@ hterm.hterm.VT.ESC['k'] = function(parseState) {
 }
 
 preferenceManager.set('user-css', dataurl.convert({
-    data: require('./components/terminal.userCSS.scss'),
+    data: require('./hterm.userCSS.scss'),
     mimetype: 'text/css',
     charset: 'utf8',
 }))

terminus-terminal/src/index.ts

@@ -6,10 +6,12 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { HostAppService, Platform, ToolbarButtonProvider, TabRecoveryProvider, ConfigProvider, HotkeysService } from 'terminus-core'
 import { SettingsTabProvider } from 'terminus-settings'
 
-import { TerminalTabComponent } from './components/terminalTab'
-import { TerminalSettingsTabComponent } from './components/terminalSettingsTab'
-import { ColorPickerComponent } from './components/colorPicker'
-import { SessionsService } from './services/sessions'
+import { TerminalTabComponent } from './components/terminalTab.component'
+import { TerminalSettingsTabComponent } from './components/terminalSettingsTab.component'
+import { ColorPickerComponent } from './components/colorPicker.component'
+
+import { SessionsService } from './services/sessions.service'
+
 import { ScreenPersistenceProvider } from './persistenceProviders'
 import { ButtonProvider } from './buttonProvider'
 import { RecoveryProvider } from './recoveryProvider'

terminus-terminal/src/recoveryProvider.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core'
 import { TabRecoveryProvider, AppService } from 'terminus-core'
 
-import { SessionsService } from './services/sessions'
-import { TerminalTabComponent } from './components/terminalTab'
+import { TerminalTabComponent } from './components/terminalTab.component'
+import { SessionsService } from './services/sessions.service'
 
 
 @Injectable()

terminus-terminal/src/settings.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { SettingsTabProvider, ComponentType } from 'terminus-settings'
 
-import { TerminalSettingsTabComponent } from './components/terminalSettingsTab'
+import { TerminalSettingsTabComponent } from './components/terminalSettingsTab.component'
 
 
 @Injectable()