feat(electron): use typescript for electron code too (#306)

.eslintignore

@@ -1,3 +1,4 @@
 /node_modules/**
 /dist/**
+/dist-src-electron
 *.d.ts

.eslintrc

@@ -48,6 +48,14 @@
     "INFO_GIT_HASH": true,
     "INFO_VERSION": true
   },
+  "overrides": [
+    {
+      "files": ["src/electron/*"],
+      "rules": {
+        "no-console": "off"
+      }
+    }
+  ],
   "rules": {
     "comma-dangle": 2,
     "no-cond-assign": [2, "except-parens"],

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
 dist-electron
+dist-src-electron
 .vscode
 storage/**/*.zip

ci/cloudbuild-test.yaml

@@ -5,6 +5,9 @@ steps:
   - name: 'gcr.io/cloud-builders/npm'
     entrypoint: npm
     args: ['run', 'eslint']
+  - name: 'gcr.io/cloud-builders/npm'
+    entrypoint: npm
+    args: ['run', 'electron:compile']
   - name: 'gcr.io/cloud-builders/npm'
     entrypoint: npm
     args: ['run', 'build']

electron-builder.json

@@ -3,7 +3,7 @@
     "output": "dist-electron"
   },
   "appId": "com.ubilabs.esa.cfs",
-  "files": ["./src/electron/**/*", "./dist/**/*"],
+  "files": ["./dist-src-electron/*", "./dist/**/*"],
   "win": {
     "target": "portable"
   },

package.json

@@ -2,7 +2,7 @@
   "name": "esa-climate-from-space",
   "version": "0.4.1",
   "description": "Climate from Space application for ESAs CCI+ program.",
-  "main": "src/electron/main.js",
+  "main": "dist-src-electron/main.js",
   "scripts": {
     "start": "webpack-dev-server",
     "clean": "rm -rf ./dist",
@@ -17,10 +17,11 @@
     "preversion": "npm run test",
     "version": "npm run changelog && git checkout -b chore/release-${npm_package_version} && git add .",
     "postversion": "git push -u origin chore/release-${npm_package_version} && git push --tags --no-verify",
-    "electron:start": "electron .",
+    "electron:compile": "tsc --project tsconfig-electron.json && cp src/electron/preload.js dist-src-electron/",
+    "electron:start": "npm run electron:compile && electron .",
     "electron:install": "electron-builder install-app-deps",
-    "electron:clean": "rm -rf ./dist-electron",
-    "electron:build": "npm run electron:clean && npm run electron:install && npm run build && electron-builder -mwl --x64 --config electron-builder.json",
+    "electron:clean": "rm -rf ./dist-electron && rm -rf ./dist-src-electron",
+    "electron:build": "npm run electron:clean && npm run electron:install && npm run build && npm run electron:compile && electron-builder -mwl --x64 --config electron-builder.json",
     "story-packages": "./scripts/create-story-packages.sh",
     "clean:story-packages": "find ./storage -type f -name \"*.zip\" -delete",
     "upload-storage": "npm run story-packages && gsutil rsync -r -x \".DS_Store\" ./storage gs://esa-cfs-storage/$npm_package_version && gsutil -m setmeta -r -h \"Cache-Control: no-cache\" gs://esa-cfs-storage/$npm_package_version/ && npm run clean:story-packages"
@@ -56,6 +57,7 @@
     "@types/cesium": "^1.66.0",
     "@types/classnames": "^2.2.9",
     "@types/lodash.debounce": "^4.0.6",
+    "@types/node": "^12.12.6",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/react-redux": "^7.1.7",

src/electron/download-delete.js → src/electron/download-delete.ts

@@ -1,13 +1,13 @@
-const fs = require('fs');
-const path = require('path');
-const {app} = require('electron');
+import * as fs from 'fs';
+import * as path from 'path';
+import {BrowserWindow, app} from 'electron';
 
 const {getDownloadedIds} = require('./get-downloaded-ids');
 
 /**
  * Removes the folder matching the given id from the offline directoy
  */
-module.exports = function deleteId(browserWindow, id) {
+module.exports = function deleteId(browserWindow: BrowserWindow, id: string) {
   // check if id contains '/', '\', '..' or ':'
   if (id.match(/:|\/|\\|\.\./)) {
     throw new Error('deleteId: Invalid id');
@@ -17,12 +17,12 @@ module.exports = function deleteId(browserWindow, id) {
   const pathToDelete = path.join(downloadsPath, 'downloads', id);
 
   if (!fs.statSync(pathToDelete).isDirectory() || id.length < 5) {
-    throw new Error('deleteId: Path to delete does not exist', pathToDelete);
+    throw new Error(`deleteId: Path to delete does not exist: ${pathToDelete}`);
   }
 
   console.log('Deleting', pathToDelete);
 
-  fs.rmdir(pathToDelete, {recursive: true}, err => {
+  fs.rmdir(pathToDelete, {recursive: true}, (err: Error | null) => {
     if (!err) {
       browserWindow.webContents.send(
         'offline-update',

src/electron/download-handler.js → src/electron/download-handler.ts

@@ -1,17 +1,18 @@
-const fs = require('fs');
-const path = require('path');
-const zip = require('cross-zip');
-const {app} = require('electron');
+import * as fs from 'fs';
+import * as path from 'path';
+// @ts-ignore no types available for cross-zip
+import {unzipSync} from 'cross-zip';
+import {app, BrowserWindow} from 'electron';
 
 const {getDownloadedIds} = require('./get-downloaded-ids');
 
-// keep track of all active downloads
-const activeDownloads = {};
+// keep track of all active downloads and their progress
+const activeDownloads: {[url: string]: number} = {};
 
 /**
  * Intercepts all browser downloads in the given window
  */
-module.exports.addDownloadHandler = function(browserWindow) {
+export function addDownloadHandler(browserWindow: BrowserWindow) {
   // update the downloaded data state once on load
   browserWindow.webContents.on('did-finish-load', () => {
     browserWindow.webContents.send(
@@ -51,7 +52,7 @@ module.exports.addDownloadHandler = function(browserWindow) {
     item.once('done', (event, state) => {
       if (state === 'completed') {
         console.log('Download successfully', item.savePath);
-        zip.unzipSync(item.savePath, offlinePath);
+        unzipSync(item.savePath, offlinePath);
         fs.unlinkSync(item.savePath);
         browserWindow.webContents.send(
           'offline-update',
@@ -68,4 +69,4 @@ module.exports.addDownloadHandler = function(browserWindow) {
       }
     });
   });
-};
+}

src/electron/get-downloaded-ids.js → src/electron/get-downloaded-ids.ts

@@ -1,6 +1,6 @@
-const fs = require('fs');
-const path = require('path');
-const {app} = require('electron');
+import * as fs from 'fs';
+import * as path from 'path';
+import {app} from 'electron';
 
 /**
  * Get downloaded Ids from the downloads folder content

src/electron/load-action.js → src/electron/load-action.ts

@@ -1,11 +1,11 @@
-const fs = require('fs');
-const path = require('path');
-const {app} = require('electron');
+import * as fs from 'fs';
+import * as path from 'path';
+import {app} from 'electron';
 
 /**
  * Loads a persisted action from the filesystem
  */
-module.exports = function loadAction(actionType, pathToFile) {
+module.exports = function loadAction(actionType: string, pathToFile: string) {
   const type = actionType.toLowerCase();
   const downloadsPath = app.getPath('downloads');
   const filePath = pathToFile

src/electron/main.js → src/electron/main.ts

@@ -1,11 +1,11 @@
-const path = require('path');
-const {app, BrowserWindow} = require('electron');
-const {addDownloadHandler} = require('./download-handler.js');
+import * as path from 'path';
+import {app, BrowserWindow} from 'electron';
+import {addDownloadHandler} from './download-handler.js';
 
 // future proof for electron 9 and prevent annoying deprecation warning message
 app.allowRendererProcessReuse = true;
 
-let windows = [];
+let windows: BrowserWindow[] = [];
 
 function createWindow() {
   // create a new browser window
@@ -28,7 +28,7 @@ function createWindow() {
   addDownloadHandler(window);
 
   // load the index page in the window
-  const indexPath = `file://${__dirname}/../../dist/index.html`;
+  const indexPath = `file://${__dirname}/../dist/index.html`;
   window.loadURL(indexPath);
 
   window.webContents.openDevTools();

src/electron/save-action.js → src/electron/save-action.ts

@@ -1,11 +1,12 @@
-const fs = require('fs');
-const path = require('path');
-const {app} = require('electron');
+import * as fs from 'fs';
+import * as path from 'path';
+import {app} from 'electron';
+import {AnyAction} from 'redux';
 
 /**
  * Saves an action for offline usage
  */
-module.exports = function saveAction(action) {
+module.exports = function saveAction(action: AnyAction) {
   const type = action.type.toLowerCase();
   const downloadsPath = app.getPath('downloads');
   const actionsPath = path.join(downloadsPath, 'actions');

tsconfig-electron.json

@@ -0,0 +1,13 @@
+{
+  "include": ["src/electron/*"],
+  "compilerOptions": {
+    "outDir": "./dist-src-electron/",
+    "strict": true,
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "module": "commonjs",
+    "allowSyntheticDefaultImports": false,
+    "moduleResolution": "node",
+    "target": "ES2019"
+  }
+}