Add TypeScript and get project passing static analysis with noImplici…

…tAny: false. Convert a couple of files to .ts

package.json

@@ -39,13 +39,16 @@
 		"spectre.css": "^0.5.8"
 	},
 	"devDependencies": {
+		"@types/node": "12",
 		"electron": "^8",
 		"electron-builder": "^22.2.0",
 		"electron-webpack": "^2.7.4",
+		"electron-webpack-ts": "^4.0.1",
 		"node-sass": "^4.13.1",
 		"np": "^5.0.3",
 		"prettier": "1.19.1",
 		"sass-loader": "^8.0.0",
+		"typescript": "^3.8.3",
 		"webpack": "^4.41.2",
 		"webpack-cli": "^3.3.10",
 		"xo": "^0.25.3"

src/common/get_platform.js

@@ -19,5 +19,7 @@ export function getPlatform() {
 			return MAC;
 		case "win32":
 			return WIN;
+		default:
+			throw `Did not recognize platform ${currentPlatform}`;
 	}
 }

src/main/index.js

@@ -1,5 +1,7 @@
 // electron-webpack HMR for development
-const is = require("electron-util");
+// const is = require("electron-util");
+import { is } from "electron-util";
+
 if (is.development && module.hot) {
 	module.hot.accept();
 }

src/main/menu.js

@@ -1,32 +1,31 @@
 const { Menu } = require("electron");
 const { is } = require("electron-util");
-const { buildDebugSubmenu } = require("./menu_debug");
-const { buildDefaultOsTemplate } = require("./menu_default");
-const { buildMacOsTemplate } = require("./menu_mac");
+import { buildDebugSubmenu } from "./menu_debug";
+import { buildDefaultOsTemplate } from "./menu_default";
+import { buildMacOsTemplate } from "./menu_mac";
 
-function buildTemplate() {
-	return process.platform === "darwin"
-		? buildMacOsTemplate()
-		: buildDefaultOsTemplate();
-}
-
-function buildMenu() {
-	let template = buildTemplate();
+function buildMenuTemplate() {
+	let menuTemplate =
+		process.platform === "darwin"
+			? buildMacOsTemplate()
+			: buildDefaultOsTemplate();
 
 	if (is.development) {
-		template.push({
+		menuTemplate.push({
 			label: "Debug",
 			submenu: buildDebugSubmenu()
 		});
 	}
 
-	return Menu.buildFromTemplate(template);
+	return menuTemplate;
 }
 
-const setupMenu = function() {
-	Menu.setApplicationMenu(buildMenu());
-};
+function buildMenu() {
+	const menuTemplate = buildMenuTemplate();
 
-module.exports = {
-	setupMenu
-};
+	return Menu.buildFromTemplate(menuTemplate);
+}
+
+export function setupMenu() {
+	Menu.setApplicationMenu(buildMenu());
+}

src/main/menu_debug.js → src/main/menu_debug.ts

@@ -1,6 +1,7 @@
 const { app, shell } = require("electron");
+const config = require("../common/config");
 
-function buildDebugSubmenu() {
+export function buildDebugSubmenu() {
 	return [
 		{
 			label: "Show Settings",
@@ -35,7 +36,3 @@ function buildDebugSubmenu() {
 		}
 	];
 }
-
-module.exports = {
-	buildDebugSubmenu
-};

src/main/menu_default.js → src/main/menu_default.ts

@@ -2,7 +2,7 @@ const { buildHelpSubmenu } = require("./menu_help");
 const { fileMenuOpenItem } = require("./menu_file_open");
 
 // Linux and Windows
-function buildDefaultOsTemplate() {
+export function buildDefaultOsTemplate() {
 	return [
 		{
 			role: "fileMenu",
@@ -28,7 +28,3 @@ function buildDefaultOsTemplate() {
 		}
 	];
 }
-
-module.exports = {
-	buildDefaultOsTemplate
-};

src/main/menu_mac.js → src/main/menu_mac.ts

@@ -2,7 +2,7 @@ const { buildHelpSubmenu } = require("./menu_help");
 const { appMenu } = require("electron-util");
 const { fileMenuOpenItem } = require("./menu_file_open");
 
-function buildMacOsTemplate() {
+export function buildMacOsTemplate() {
 	return [
 		appMenu([
 			// No preferences menu for now
@@ -41,7 +41,3 @@ function buildMacOsTemplate() {
 		}
 	];
 }
-
-module.exports = {
-	buildMacOsTemplate
-};

src/renderer/add_files.js

@@ -73,14 +73,7 @@ function cleanExifData(exifHash) {
 }
 
 // The heart of the app, removing exif data from the image.
-// This uses the Perl binary "exiftool" from .resources
-// TODO: ensure process is close after we're done working
-// with it. I ran into some issues with auto-cleanup when
-// I first built the app (when parallelizing for multiple image
-// drag and drop, I think), so just got it working to start.
-// But it should be easy enough to fix. Here's the relevant
-// section from node-exiftool docs, from
-// https://www.npmjs.com/package/node-exiftool
+// This uses the Perl binary "exiftool" from .resources with it.
 //
 // Opening and Closing
 //

src/renderer/drag.js

@@ -3,7 +3,11 @@ import { selectFiles } from "./select_files";
 document.addEventListener("drop", event => {
 	event.preventDefault();
 	event.stopPropagation();
-	const files = event.dataTransfer.files;
+	const dataTransfer = event.dataTransfer;
+	if (!dataTransfer) {
+		throw "Error getting data transfer for drop event";
+	}
+	const files = dataTransfer.files;
 	const paths = filePaths({ fileList: files });
 
 	selectFiles({ filePaths: paths });

src/renderer/empty_pane.js

@@ -1,9 +1,14 @@
 function hideEmptyPane() {
-	emptyPane().classList.add("d-none");
+	const pane = emptyPane();
+	if (!pane) {
+		throw "Could not find empty pane to hide";
+	}
+
+	pane.classList.add("d-none");
 }
 
 function emptyPane() {
-	return document.querySelector("#empty");
+	return document.getElementById("empty");
 }
 
 module.exports = {

src/renderer/index.js

@@ -7,7 +7,7 @@ if (is.development && module.hot) {
 }
 
 // stylesheets
-require("../styles/index.scss");
+import "../styles/index.scss";
 
 // app
 require("../renderer/drag");

src/renderer/selected_files.js

@@ -1,17 +1,34 @@
 function selectedFilesList() {
-	return document.querySelector("#file-list tbody");
+	const pane = selectedFilesPane();
+	if (!pane) {
+		throw "Could not find file list pane element for selected files list";
+	}
+
+	return pane.querySelector("tbody");
 }
 
 function showSelectedFilesPane() {
-	selectedFilesPane().classList.remove("d-none");
+	const pane = selectedFilesPane();
+	if (!pane) {
+		throw "Could not find file list pane element to show";
+	}
+
+	pane.classList.remove("d-none");
 }
 
 function eraseSelectedFilesPane() {
-	selectedFilesList().innerHTML = "";
+	const filesListElement = selectedFilesList();
+	if (!filesListElement) {
+		throw "Could not find file list element to erase";
+	}
+
+	if (filesListElement) {
+		filesListElement.innerHTML = "";
+	}
 }
 
 function selectedFilesPane() {
-	return document.querySelector("#file-list");
+	return document.getElementById("file-list");
 }
 
 module.exports = {

src/renderer/table.js

@@ -11,7 +11,7 @@ function updateRowWithExif({ tdNode, exifData }) {
 
 	// text
 	const textNode = document.createElement("div");
-	textNode.textContent = label;
+	textNode.textContent = label.toString();
 	textNode.classList.add("popover", "popover-bottom");
 	tdNode.appendChild(textNode);
 
@@ -86,7 +86,11 @@ function addTableRow({ filePath }) {
 	trNode.appendChild(tdNumExifAfterNode);
 
 	// add tr to list
-	selectedFilesList().appendChild(trNode);
+	const list = selectedFilesList();
+	if (!list) {
+		throw "Error while retrieving selected files list element";
+	}
+	list.appendChild(trNode);
 
 	return trNode;
 }

tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "./node_modules/electron-webpack/tsconfig-base.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"noImplicitAny": false,
+		"outDir": "./dist/",
+		"resolveJsonModule": true
+	},
+	"include": ["./src/**/*.js", "./src/**/*.ts"],
+}