tsconfig: Remove declare module * declaration and normalize imports.

The change in this commits are pretty involved but cannot be split
into small commits. The main changes in this commits are:
    * Remove declare module * now that we don't need it
    * Normalize import paths so typescript is happy

Previously, we were using wrong import paths and so typescript couldn't
really provide full types information for imports. The wrong paths isn't
a bug because it was done to make sure it work when it was imported via a
script tag; we fix this by using require inside the script tag in main.html.

Also, did audit to make sure we correctly use __dirname not that it's
value will be diffrent, it won't be js/ but will be respective to the file
path of the module.

app/renderer/js/components/webview.ts

@@ -26,6 +26,11 @@ class WebView extends BaseComponent {
 	customCSS: string;
 	$webviewsContainer: DOMTokenList;
 	$el: Electron.WebviewTag;
+
+	// This is required because in main.js we access WebView.method as
+	// webview[method].
+	[key: string]: any;
+
 	constructor(props: WebViewProps) {
 		super();
 

app/renderer/js/main.ts

@@ -1,25 +1,26 @@
 'use strict';
 
 import { ipcRenderer, remote, clipboard, shell } from 'electron';
+import path from 'path';
 import isDev from 'electron-is-dev';
 import escape from 'escape-html';
 import electronConnect from 'electron-connect';
-import feedbackHolder from './js/feedback';
+import { feedbackHolder } from './feedback';
 
 const { session, app, Menu, dialog } = remote;
 
 // eslint-disable-next-line import/no-unassigned-import
-require('./js/tray');
+require('./tray');
 
-import DomainUtil = require('./js/utils/domain-util');
+import DomainUtil = require('./utils/domain-util');
-import WebView = require('./js/components/webview');
+import WebView = require('./components/webview');
-import ServerTab = require('./js/components/server-tab');
+import ServerTab = require('./components/server-tab');
-import FunctionalTab = require('./js/components/functional-tab');
+import FunctionalTab = require('./components/functional-tab');
-import ConfigUtil = require('./js/utils/config-util');
+import ConfigUtil = require('./utils/config-util');
-import DNDUtil = require('./js/utils/dnd-util');
+import DNDUtil = require('./utils/dnd-util');
-import ReconnectUtil = require('./js/utils/reconnect-util');
+import ReconnectUtil = require('./utils/reconnect-util');
-import Logger = require('./js/utils/logger-util');
+import Logger = require('./utils/logger-util');
-import CommonUtil = require('./js/utils/common-util');
+import CommonUtil = require('./utils/common-util');
 
 const logger = new Logger({
 	file: 'errors.log',
@@ -66,6 +67,9 @@ interface SettingsOptions {
 	loading?: AnyObject;
 }
 
+const rendererDirectory = path.resolve(__dirname, '..');
+type ServerOrFunctionalTab = ServerTab | FunctionalTab;
+
 class ServerManagerView {
 	$addServerButton: HTMLButtonElement;
 	$tabsContainer: Element;
@@ -87,7 +91,7 @@ class ServerManagerView {
 	$fullscreenEscapeKey: string;
 	loading: AnyObject;
 	activeTabIndex: number;
-	tabs: Array<typeof ServerTab>;
+	tabs: ServerOrFunctionalTab[];
 	functionalTabs: AnyObject;
 	tabIndex: number;
 	constructor() {
@@ -246,7 +250,7 @@ class ServerManagerView {
 		}
 	}
 
-	initServer(server: typeof DomainUtil, index: number): void {
+	initServer(server: any, index: number): void {
 		const tabIndex = this.getTabIndex();
 		this.tabs.push(new ServerTab({
 			role: 'server',
@@ -460,7 +464,7 @@ class ServerManagerView {
 		this.openFunctionalTab({
 			name: 'Settings',
 			materialIcon: 'settings',
-			url: `file://${__dirname}/preference.html#${nav}`
+			url: `file://${rendererDirectory}/preference.html#${nav}`
 		});
 		this.$settingsButton.classList.add('active');
 		this.tabs[this.functionalTabs.Settings].webview.send('switch-settings-nav', nav);
@@ -470,7 +474,7 @@ class ServerManagerView {
 		this.openFunctionalTab({
 			name: 'About',
 			materialIcon: 'sentiment_very_satisfied',
-			url: `file://${__dirname}/about.html`
+			url: `file://${rendererDirectory}/about.html`
 		});
 	}
 
@@ -478,7 +482,7 @@ class ServerManagerView {
 		this.openFunctionalTab({
 			name: 'Network Troubleshooting',
 			materialIcon: 'network_check',
-			url: `file://${__dirname}/network.html`
+			url: `file://${rendererDirectory}/network.html`
 		});
 	}
 
@@ -493,9 +497,9 @@ class ServerManagerView {
 	// not crash app when this.tabs is passed into
 	// ipcRenderer. Something about webview, and props.webview
 	// properties in ServerTab causes the app to crash.
-	get tabsForIpc(): Array<typeof ServerTab> {
+	get tabsForIpc(): ServerOrFunctionalTab[] {
-		const tabs: Array<typeof ServerTab> = [];
+		const tabs: ServerOrFunctionalTab[] = [];
-		this.tabs.forEach(tab => {
+		this.tabs.forEach((tab: ServerOrFunctionalTab) => {
 			const proto = Object.create(Object.getPrototypeOf(tab));
 			const tabClone = Object.assign(proto, tab);
 
@@ -605,7 +609,7 @@ class ServerManagerView {
 	updateBadge(): void {
 		let messageCountAll = 0;
 		for (const tab of this.tabs) {
-			if (tab && tab.updateBadge) {
+			if (tab && tab instanceof ServerTab && tab.updateBadge) {
 				const count = tab.webview.badgeCount;
 				messageCountAll += count;
 				tab.updateBadge(count);
@@ -688,7 +692,7 @@ class ServerManagerView {
 			ipcRenderer.on(key, () => {
 				const activeWebview = this.tabs[this.activeTabIndex].webview;
 				if (activeWebview) {
-					activeWebview[webviewListeners[key]]();
+					activeWebview[webviewListeners[key] as string]();
 				}
 			});
 		}
@@ -777,7 +781,8 @@ class ServerManagerView {
 		});
 
 		ipcRenderer.on('update-realm-name', (event: Event, serverURL: string, realmName: string) => {
-			DomainUtil.getDomains().forEach((domain: typeof DomainUtil, index: number) => {
+			// TODO: TypeScript - Type annotate getDomains() or this domain paramter.
+			DomainUtil.getDomains().forEach((domain: any, index: number) => {
 				if (domain.url.includes(serverURL)) {
 					const serverTooltipSelector = `.tab .server-tooltip`;
 					const serverTooltips = document.querySelectorAll(serverTooltipSelector);
@@ -798,7 +803,8 @@ class ServerManagerView {
 		});
 
 		ipcRenderer.on('update-realm-icon', (event: Event, serverURL: string, iconURL: string) => {
-			DomainUtil.getDomains().forEach((domain: typeof DomainUtil, index: number) => {
+			// TODO: TypeScript - Type annotate getDomains() or this domain paramter.
+			DomainUtil.getDomains().forEach((domain: any, index: number) => {
 				if (domain.url.includes(serverURL)) {
 					DomainUtil.saveServerIcon(iconURL).then((localIconUrl: string) => {
 						const serverImgsSelector = `.tab .server-icons`;

app/renderer/js/pages/preference/preference.ts

@@ -2,20 +2,20 @@
 
 import { ipcRenderer } from 'electron';
 
-import BaseComponent = require('./js/components/base');
+import BaseComponent = require('../../components/base');
-import Nav = require('./js/pages/preference/nav');
+import Nav = require('./nav');
-import ServersSection = require('./js/pages/preference/servers-section');
+import ServersSection = require('./servers-section');
-import GeneralSection = require('./js/pages/preference/general-section');
+import GeneralSection = require('./general-section');
-import NetworkSection = require('./js/pages/preference/network-section');
+import NetworkSection = require('./network-section');
-import ConnectedOrgSection = require('./js/pages/preference/connected-org-section');
+import ConnectedOrgSection = require('./connected-org-section');
-import ShortcutsSection = require('./js/pages/preference/shortcuts-section');
+import ShortcutsSection = require('./shortcuts-section');
 
-type Section = typeof ServersSection | typeof GeneralSection | typeof NetworkSection | typeof ConnectedOrgSection | typeof ShortcutsSection;
+type Section = ServersSection | GeneralSection | NetworkSection | ConnectedOrgSection | ShortcutsSection;
 
 class PreferenceView extends BaseComponent {
 	$sidebarContainer: Element;
 	$settingsContainer: Element;
-	nav: typeof Nav;
+	nav: Nav;
 	section: Section;
 	constructor() {
 		super();

app/renderer/js/pages/preference/servers-section.ts

@@ -46,4 +46,4 @@ class ServersSection extends BaseSection {
 	}
 }
 
-module.exports = ServersSection;
+export = ServersSection;

app/renderer/main.html

@@ -55,6 +55,11 @@
             <send-feedback></send-feedback>
         </div>
     </body>
-    <script src="js/main.js"></script>
+    
+    <script>
+        // we don't use src='./js/main' in the script tag because
+        // it messes up require module path resolution
+        require('./js/main');
+    </script>
     <script>require('./js/shared/preventdrag.js')</script>
 </html>

app/renderer/preference.html

@@ -12,6 +12,8 @@
             <div id="settings-container"></div>
         </div>
     </body>
-    <script src="js/pages/preference/preference.js"></script>
+    <script>
-    <script>require('./js/shared/preventdrag.js')</script>
+        require('./js/pages/preference/preference.js');
+        require('./js/shared/preventdrag.js')
+    </script>
 </html>

typings.d.ts

@@ -1,8 +1,16 @@
-// TODO: TypeScript - Remove this when the typescript migration
+declare module 'adm-zip';
-// is done. Ideally we would do declare module only for our modules
+declare module 'auto-launch';
-// that are not yet converted but relative path module declaration
+declare module 'is-online';
-// are not supported
+declare module 'request';
-declare module '*';
+declare module 'semver';
+declare module '@electron-elements/send-feedback';
+declare module 'node-mac-notifier';
+declare module 'electron-connect';
+declare module 'electron-is-dev';
+declare module 'electron-spellchecker';
+declare module 'escape-html';
+declare module 'fs-extra';
+declare module 'wurl';
 
 interface PageParamsObject {
     realm_uri: string;