build: use typescript for internal Electron JS code (#16441)

default_app/default_app.ts

@@ -1,19 +1,17 @@
-'use strict'
+import { app, BrowserWindow, BrowserWindowConstructorOptions } from 'electron'
+import * as path from 'path'
 
-const { app, BrowserWindow } = require('electron')
-const path = require('path')
-
-let mainWindow = null
+let mainWindow: BrowserWindow | null = null
 
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
   app.quit()
 })
 
-exports.load = async (appUrl) => {
+export const load = async (appUrl: string) => {
   await app.whenReady()
 
-  const options = {
+  const options: BrowserWindowConstructorOptions = {
     width: 900,
     height: 600,
     autoHideMenuBar: true,
@@ -33,7 +31,7 @@ exports.load = async (appUrl) => {
 
   mainWindow = new BrowserWindow(options)
 
-  mainWindow.on('ready-to-show', () => mainWindow.show())
+  mainWindow.on('ready-to-show', () => mainWindow!.show())
 
   mainWindow.loadURL(appUrl)
   mainWindow.focus()

default_app/main.ts

@@ -1,20 +1,31 @@
-'use strict'
+import { app, dialog } from 'electron'
 
-const { app, dialog } = require('electron')
+import * as fs from 'fs'
+import * as path from 'path'
+import * as url from 'url'
+
+type DefaultAppOptions = {
+  file: null | string;
+  noHelp: boolean;
+  version: boolean;
+  webdriver: boolean;
+  interactive: boolean;
+  abi: boolean;
+  modules: string[];
+}
 
-const fs = require('fs')
 const Module = require('module')
-const path = require('path')
-const url = require('url')
 
 // Parse command line options.
 const argv = process.argv.slice(1)
 
-const option = {
+const option: DefaultAppOptions = {
   file: null,
   noHelp: Boolean(process.env.ELECTRON_NO_HELP),
-  version: null,
-  webdriver: null,
+  version: false,
+  webdriver: false,
+  interactive: false,
+  abi: false,
   modules: []
 }
 
@@ -62,7 +73,7 @@ if (option.modules.length > 0) {
   Module._preloadModules(option.modules)
 }
 
-function loadApplicationPackage (packagePath) {
+function loadApplicationPackage (packagePath: string) {
   // Add a flag indicating app is started from default app.
   Object.defineProperty(process, 'defaultApp', {
     configurable: false,
@@ -112,14 +123,15 @@ function loadApplicationPackage (packagePath) {
   }
 }
 
-function showErrorMessage (message) {
+function showErrorMessage (message: string) {
   app.focus()
   dialog.showErrorBox('Error launching app', message)
   process.exit(1)
 }
 
-function loadApplicationByUrl (appUrl) {
-  require('./default_app').load(appUrl)
+async function loadApplicationByUrl (appUrl: string) {
+  const { load } = await import('./default_app')
+  load(appUrl)
 }
 
 function startRepl () {

default_app/renderer.ts

@@ -1,9 +1,7 @@
-'use strict'
-
-const { remote, shell } = require('electron')
-const fs = require('fs')
-const path = require('path')
-const URL = require('url')
+import { remote, shell } from 'electron'
+import * as fs from 'fs'
+import * as path from 'path'
+import * as URL from 'url'
 
 function initialize () {
   // Find the shortest path to the electron binary
@@ -13,13 +11,13 @@ function initialize () {
     ? absoluteElectronPath
     : relativeElectronPath
 
-  for (const link of document.querySelectorAll('a[href]')) {
+  for (const link of document.querySelectorAll<HTMLLinkElement>('a[href]')) {
     // safely add `?utm_source=default_app
-    const parsedUrl = URL.parse(link.getAttribute('href'), true)
+    const parsedUrl = URL.parse(link.getAttribute('href')!, true)
     parsedUrl.query = { ...parsedUrl.query, utm_source: 'default_app' }
     const url = URL.format(parsedUrl)
 
-    const openLinkExternally = (e) => {
+    const openLinkExternally = (e: Event) => {
       e.preventDefault()
       shell.openExternalSync(url)
     }
@@ -28,13 +26,13 @@ function initialize () {
     link.addEventListener('auxclick', openLinkExternally)
   }
 
-  document.querySelector('.electron-version').innerText = `Electron v${process.versions.electron}`
-  document.querySelector('.chrome-version').innerText = `Chromium v${process.versions.chrome}`
-  document.querySelector('.node-version').innerText = `Node v${process.versions.node}`
-  document.querySelector('.v8-version').innerText = `v8 v${process.versions.v8}`
-  document.querySelector('.command-example').innerText = `${electronPath} path-to-app`
+  document.querySelector<HTMLAnchorElement>('.electron-version')!.innerText = `Electron v${process.versions.electron}`
+  document.querySelector<HTMLAnchorElement>('.chrome-version')!.innerText = `Chromium v${process.versions.chrome}`
+  document.querySelector<HTMLAnchorElement>('.node-version')!.innerText = `Node v${process.versions.node}`
+  document.querySelector<HTMLAnchorElement>('.v8-version')!.innerText = `v8 v${process.versions.v8}`
+  document.querySelector<HTMLAnchorElement>('.command-example')!.innerText = `${electronPath} path-to-app`
 
-  function getOcticonSvg (name) {
+  function getOcticonSvg (name: string) {
     const octiconPath = path.resolve(__dirname, 'octicon', `${name}.svg`)
     if (fs.existsSync(octiconPath)) {
       const content = fs.readFileSync(octiconPath, 'utf8')
@@ -45,13 +43,15 @@ function initialize () {
     return null
   }
 
-  function loadSVG (element) {
+  function loadSVG (element: HTMLSpanElement) {
     for (const cssClass of element.classList) {
       if (cssClass.startsWith('octicon-')) {
         const icon = getOcticonSvg(cssClass.substr(8))
         if (icon) {
-          icon.classList = element.classList
-          element.parentNode.insertBefore(icon, element)
+          for (const elemClass of element.classList) {
+            icon.classList.add(elemClass)
+          }
+          element.before(icon)
           element.remove()
           break
         }
@@ -59,7 +59,7 @@ function initialize () {
     }
   }
 
-  for (const element of document.querySelectorAll('.octicon')) {
+  for (const element of document.querySelectorAll<HTMLSpanElement>('.octicon')) {
     loadSVG(element)
   }
 }