Switch to electron ngx, some performance improvements (#1109)

* various improvements + switch to electron-ngx

* remove electron option

.travis.yml

@@ -3,30 +3,30 @@ sudo: false
 
 language: node_js
 node_js:
-    - '10'
+  - '12'
 
 cache:
-    directories:
-        - ./node_modules
+  directories:
+    - ./node_modules
 
 before_install:
-        - travis_retry sudo apt-get update
-        - travis_retry sudo apt-get install --no-install-recommends --no-upgrade -qq libavahi-compat-libdnssd-dev
+  - travis_retry sudo apt-get update
+  - travis_retry sudo apt-get install --no-install-recommends --no-upgrade -qq libavahi-compat-libdnssd-dev
 
 install:
-    - npm install
+  - npm install
 
 jobs:
-    include:
-        - stage: lint
-          if: branch = master
-          name: 'Linting Application ...'
-          script: npm run lint
-        - stage: build
-          if: type = push AND branch != master OR type = pull_request
-          name: 'Building Application ...'
-          script: npm run ng:build
-        - stage: build
-          if: type = push AND branch = master
-          name: 'Building Application ...'
-          script: npm run pack
+  include:
+    - stage: lint
+      if: branch = master
+      name: 'Linting Application ...'
+      script: npm run lint
+    - stage: build
+      if: type = push AND branch != master OR type = pull_request
+      name: 'Building Application ...'
+      script: npm run ng:build
+    - stage: build
+      if: type = push AND branch = master
+      name: 'Building Application ...'
+      script: npm run pack

main.js

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable import/no-commonjs */
 
+require('v8-compile-cache');
+
 const { app, BrowserWindow, ipcMain } = require('electron');
 const path = require('path');
 const url = require('url');
@@ -12,7 +14,6 @@ const dev = args.some(val => val === '--serve');
 const activateListeners = require('./helper/listener');
 
 app.commandLine.appendSwitch('touch-events', 'enabled');
-app.allowRendererProcessReuse = true;
 
 let window;
 

package.json

@@ -31,6 +31,37 @@
     "directories": {
       "output": "package"
     },
+    "files": [
+      "**/*",
+      "LICENSE.md",
+      "!**/*.ts",
+      "!*.code-workspace",
+      "!package.json",
+      "!package-lock.json",
+      "!CONTRIBUTING.md",
+      "!README.md",
+      "!sample.config.json",
+      "!angular.json",
+      "!karma.conf.js",
+      "!tsconfig.app.json",
+      "!tsconfig.json",
+      "!tsconfig.spec.json",
+      "!.eslintrc.js",
+      "!.gitignore",
+      "!.prettierrc",
+      "!.travis.yml",
+      "!.dependabot/",
+      "!.github/",
+      "!.vscode/",
+      "!src/",
+      "!e2e/",
+      "!docs/",
+      "!package/",
+      "!screenshots/",
+      "!scripts/",
+      "!themes/",
+      "!build/"
+    ],
     "linux": {
       "target": [
         {
@@ -85,10 +116,12 @@
     "got": "^11.8.0",
     "jquery": "^3.5.1",
     "lodash": "^4.17.20",
+    "ngx-electron": "^2.2.0",
     "ngx-spinner": "^10.0.1",
     "progress-stream": "^2.0.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.3",
+    "v8-compile-cache": "^2.1.1",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
@@ -98,7 +131,7 @@
     "@angular/language-service": "~10.1.6",
     "@types/ajv": "^1.0.0",
     "@types/lodash": "^4.14.162",
-    "@types/node": "^14.14.1",
+    "@types/node": "12.19.0",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^3.10.1",
     "codelyzer": "^6.0.1",

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import _ from 'lodash';
+import { ElectronService } from 'ngx-electron';
 
 import { AppService } from './app.service';
 import { ConfigService } from './config/config.service';
@@ -28,6 +29,7 @@ export class AppComponent implements OnInit {
     private octoprintScriptService: OctoprintScriptService,
     private notificationService: NotificationService,
     private router: Router,
+    private electronService: ElectronService,
   ) {}
 
   public activated = false;
@@ -37,6 +39,12 @@ export class AppComponent implements OnInit {
   }
 
   private async initialize(): Promise<void> {
+    if (!this.electronService.isElectronApp) {
+      this.notificationService.setWarning(
+        'Non electron environment detected!',
+        'The app may not work as intended. If you run an official build please open a new issue on GitHub.',
+      );
+    }
     if (this.configService && this.configService.isInitialized()) {
       if (this.configService.isLoaded()) {
         if (this.configService.isValid()) {

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { RoundProgressModule } from 'angular-svg-round-progressbar';
+import { NgxElectronModule } from 'ngx-electron';
 import { NgxSpinnerModule } from 'ngx-spinner';
 
 import { AppComponent } from './app.component';
@@ -67,6 +68,7 @@ import { URLSafePipe } from './url.pipe';
     RoundProgressModule,
     FormsModule,
     FontAwesomeModule,
+    NgxElectronModule,
     NgxSpinnerModule,
     BrowserAnimationsModule,
     MatRippleModule,

src/app/app.service.ts

@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { ElectronService } from 'ngx-electron';
 
 import { ConfigService } from './config/config.service';
 import { NotificationService } from './notification/notification.service';
@@ -10,8 +11,6 @@ import { NotificationService } from './notification/notification.service';
 export class AppService {
   private updateError: string[];
   private loadedFile = false;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private ipc: any;
   public version: string;
   public latestVersion: string;
   private latestVersionAssetsURL: string;
@@ -21,20 +20,11 @@ export class AppService {
     private configService: ConfigService,
     private notificationService: NotificationService,
     private http: HttpClient,
+    private electronService: ElectronService,
   ) {
-    try {
-      this.ipc = window.require('electron').ipcRenderer;
-      this.enableVersionListener();
-      this.enableCustomCSSListener();
-      setTimeout(() => {
-        this.ipc.send('appInfo');
-      }, 0);
-    } catch (e) {
-      this.notificationService.setError(
-        "Can't connect to backend",
-        'Please restart your system. If the issue persists open an issue on GitHub.',
-      );
-    }
+    this.enableVersionListener();
+    this.enableCustomCSSListener();
+    this.electronService.ipcRenderer.send('appInfo');
     this.updateError = [
       ".printer should have required property 'zBabystepGCode'",
       ".octodash should have required property 'previewProgressCircle'",
@@ -52,20 +42,20 @@ export class AppService {
   }
 
   private enableVersionListener(): void {
-    this.ipc.on('versionInformation', (_, versionInformation: VersionInformation): void => {
+    this.electronService.ipcRenderer.on('versionInformation', (_, versionInformation: VersionInformation): void => {
       this.version = versionInformation.version;
       this.checkUpdate();
     });
   }
 
   private enableCustomCSSListener(): void {
-    this.ipc.on('customStyles', (_, customCSS: string): void => {
+    this.electronService.ipcRenderer.on('customStyles', (_, customCSS: string): void => {
       const css = document.createElement('style');
       css.appendChild(document.createTextNode(customCSS));
       document.head.append(css);
     });
 
-    this.ipc.on('customStylesError', (_, customCSSError: string): void => {
+    this.electronService.ipcRenderer.on('customStylesError', (_, customCSSError: string): void => {
       this.notificationService.setError("Can't load custom styles!", customCSSError);
     });
   }
@@ -93,15 +83,11 @@ export class AppService {
   }
 
   public turnDisplayOff(): void {
-    if (this.ipc) {
-      this.ipc.send('screenSleep', '');
-    }
+    this.electronService.ipcRenderer.send('screenSleep', '');
   }
 
   public turnDisplayOn(): void {
-    if (this.ipc) {
-      this.ipc.send('screenWakeup', '');
-    }
+    this.electronService.ipcRenderer.send('screenWakeup', '');
   }
 
   public getUpdateError(): string[] {

src/app/bottom-bar/bottom-bar.component.scss

@@ -26,7 +26,6 @@
   &__error {
     color: #c23616;
     animation: blinker 2s linear infinite;
-    transform: translate3D(0, 0, 0);
   }
 }
 

src/app/config/no-config/no-config.component.scss

@@ -18,7 +18,6 @@
     background-color: #44bd32;
     width: 0;
     transition: width 0.7s ease-in-out;
-    transform: translate3D(0, 0, 0);
 
     &-wrapper {
       background-color: #718093;

src/app/config/no-config/no-config.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { ElectronService } from 'ngx-electron';
 import { NotificationService } from 'src/app/notification/notification.service';
 import { OctoprintScriptService } from 'src/app/octoprint-script.service';
 
@@ -11,9 +12,6 @@ import { Config, ConfigService } from '../config.service';
   styleUrls: ['./no-config.component.scss'],
 })
 export class NoConfigComponent implements OnInit {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private ipc: any;
-
   public page = 0;
   public totalPages = 7;
 
@@ -36,17 +34,9 @@ export class NoConfigComponent implements OnInit {
     private configService: ConfigService,
     private router: Router,
     private notificationService: NotificationService,
+    private electronService: ElectronService,
     private octoprintScriptService: OctoprintScriptService,
   ) {
-    try {
-      this.ipc = window.require('electron').ipcRenderer;
-    } catch (e) {
-      this.notificationService.setError(
-        "Can't connect to backend",
-        'Please restart your system. If the issue persists open an issue on GitHub.',
-      );
-    }
-
     this.configUpdate = this.configService.isUpdate();
     if (this.configUpdate) {
       this.config = configService.getCurrentConfig();
@@ -59,14 +49,14 @@ export class NoConfigComponent implements OnInit {
   public ngOnInit(): void {
     this.changeProgress();
 
-    this.ipc.on('discoveredNodes', (_, nodes: OctoprintNodes) => {
+    this.electronService.ipcRenderer.on('discoveredNodes', (_, nodes: OctoprintNodes) => {
       this.octoprintNodes = nodes;
     });
   }
 
   public discoverOctoprintInstances(): void {
     this.octoprintNodes = null;
-    this.ipc.send('discover');
+    this.electronService.ipcRenderer.send('discover');
     setTimeout(() => {
       const searching = document.querySelector('.no-config__discovered-instances__searching');
       if (searching) {
@@ -157,7 +147,6 @@ export class NoConfigComponent implements OnInit {
   }
 
   changeFeedSpeed(amount: number): void {
-    console.log(amount);
     if (this.config.filament.feedSpeed + amount < 0) {
       this.config.filament.feedSpeed = 0;
     } else if (this.config.filament.feedSpeed + amount > 999) {
@@ -204,7 +193,7 @@ export class NoConfigComponent implements OnInit {
   private beforeNavigation(value: number): number {
     switch (this.page) {
       case 1:
-        this.ipc.send('stopDiscover');
+        this.electronService.ipcRenderer.send('stopDiscover');
         if (value > 0) {
           this.loadOctoprintClient();
           return 0.5;