Convert application entrypoint files into Typescript

app/application.ts

@@ -1,5 +1,6 @@
 import loadPolyfills from './soapbox/load_polyfills';
 
+// @ts-ignore
 require.context('./images/', true);
 
 // Load stylesheet

app/soapbox/load_polyfills.ts

@@ -14,11 +14,16 @@ function importExtraPolyfills() {
 
 function loadPolyfills() {
   const needsBasePolyfills = !(
+    // @ts-ignore
     Array.prototype.includes &&
+    // @ts-ignore
     HTMLCanvasElement.prototype.toBlob &&
     window.Intl &&
+    // @ts-ignore
     Number.isNaN &&
+    // @ts-ignore
     Object.assign &&
+    // @ts-ignore
     Object.values &&
     window.Symbol
   );

app/soapbox/main.tsx

@@ -5,7 +5,7 @@ import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { NODE_ENV } from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build_config';
 
 import { default as Soapbox } from './containers/soapbox';
 import * as monitoring from './monitoring';
@@ -19,11 +19,11 @@ function main() {
   monitoring.start();
 
   ready(() => {
-    const mountNode = document.getElementById('soapbox');
+    const mountNode = document.getElementById('soapbox') as HTMLElement;
 
     ReactDOM.render(<Soapbox />, mountNode);
 
-    if (NODE_ENV === 'production') {
+    if (BuildConfig.NODE_ENV === 'production') {
       // avoid offline in dev mode because it's harder to debug
       OfflinePluginRuntime.install();
     }

app/soapbox/monitoring.ts

@@ -1,13 +1,13 @@
-import { NODE_ENV, SENTRY_DSN } from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build_config';
 
-export const start = () => {
+export const start = (): void => {
   Promise.all([
     import(/* webpackChunkName: "error" */'@sentry/react'),
     import(/* webpackChunkName: "error" */'@sentry/tracing'),
   ]).then(([Sentry, { Integrations: Integrations }]) => {
     Sentry.init({
-      dsn: SENTRY_DSN,
-      environment: NODE_ENV,
+      dsn: BuildConfig.SENTRY_DSN,
+      environment: BuildConfig.NODE_ENV,
       debug: false,
       integrations: [new Integrations.BrowserTracing()],
 
@@ -18,7 +18,7 @@ export const start = () => {
   }).catch(console.error);
 };
 
-export const captureException = error => {
+export const captureException = (error: Error): void => {
   import(/* webpackChunkName: "error" */'@sentry/react')
     .then(Sentry => {
       Sentry.captureException(error);

app/soapbox/performance.ts

@@ -1,6 +1,6 @@
 'use strict';
 
-import { NODE_ENV } from 'soapbox/build_config';
+import * as BuildConfig from 'soapbox/build_config';
 
 //
 // Tools for performance debugging, only enabled in development mode.
@@ -8,9 +8,9 @@ import { NODE_ENV } from 'soapbox/build_config';
 // Also see config/webpack/loaders/mark.js for the webpack loader marks.
 //
 
-let marky;
+let marky: any;
 
-if (NODE_ENV === 'development') {
+if (BuildConfig.NODE_ENV === 'development') {
   if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) {
     // Increase Firefox's performance entry limit; otherwise it's capped to 150.
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1331135
@@ -22,14 +22,10 @@ if (NODE_ENV === 'development') {
   //window.ReactPerf.start();
 }
 
-export function start(name) {
-  if (NODE_ENV === 'development') {
-    marky.mark(name);
-  }
+export function start(name: string): void {
+  marky?.mark(name);
 }
 
-export function stop(name) {
-  if (NODE_ENV === 'development') {
-    marky.stop(name);
-  }
+export function stop(name: string): void {
+  marky?.stop(name);
 }

app/soapbox/ready.ts

@@ -1,6 +1,6 @@
 'use strict';
 
-export default function ready(loaded) {
+export default function ready(loaded: () => void): void {
   if (['interactive', 'complete'].includes(document.readyState)) {
     loaded();
   } else {

tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": "app/",
     "sourceMap": true,
     "strict": true,
-    "module": "es6",
+    "module": "es2022",
     "target": "es5",
     "jsx": "react",
     "allowJs": true,

webpack/shared.js

@@ -35,7 +35,7 @@ const makeHtmlConfig = (params = {}) => {
 
 module.exports = {
   entry: {
-    application: resolve('app/application.js'),
+    application: resolve('app/application.ts'),
   },
 
   output: {