[No QA] [TS migration] Migrate 'Config' files to TypeScript

README.md

@@ -54,7 +54,7 @@ If you're using another operating system, you will need to ensure `mkcert` is in
 
 ## Running the web app 🕸
 * To run the **development web app**: `npm run web`
-* Changes applied to Javascript will be applied automatically via WebPack as configured in `webpack.dev.js`
+* Changes applied to Javascript will be applied automatically via WebPack as configured in `webpack.dev.ts`
 
 ## Running the iOS app 📱
 For an M1 Mac, read this [SO](https://stackoverflow.com/questions/64901180/how-to-run-cocoapods-on-apple-silicon-m1) for installing cocoapods.

config/proxyConfig.js → config/proxyConfig.ts

@@ -3,7 +3,14 @@
  * We only specify for staging URLs as API requests are sent to the production
  * servers by default.
  */
-module.exports = {
+type ProxyConfig = {
+    STAGING: string;
+    STAGING_SECURE: string;
+};
+
+const proxyConfig: ProxyConfig = {
     STAGING: '/staging/',
     STAGING_SECURE: '/staging-secure/',
 };
+
+export default proxyConfig;

config/webpack/CustomVersionFilePlugin.ts

@@ -0,0 +1,28 @@
+import fs from 'fs';
+import path from 'path';
+import type {Compiler} from 'webpack';
+import {version as APP_VERSION} from '../../package.json';
+
+/**
+ * Simple webpack plugin that writes the app version (from package.json) and the webpack hash to './version.json'
+ */
+class CustomVersionFilePlugin {
+    apply(compiler: Compiler) {
+        compiler.hooks.done.tap(this.constructor.name, () => {
+            const versionPath = path.join(__dirname, '/../../dist/version.json');
+            fs.mkdir(path.dirname(versionPath), {recursive: true}, (directoryError) => {
+                if (directoryError) {
+                    throw directoryError;
+                }
+                fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), {encoding: 'utf8'}, (error) => {
+                    if (!error) {
+                        return;
+                    }
+                    throw error;
+                });
+            });
+        });
+    }
+}
+
+export default CustomVersionFilePlugin;

config/webpack/types.ts

@@ -0,0 +1,6 @@
+type Environment = {
+    file?: string;
+    platform?: 'web' | 'desktop';
+};
+
+export default Environment;

config/webpack/webpack.common.js → config/webpack/webpack.common.ts

@@ -1,13 +1,17 @@
-const path = require('path');
-const fs = require('fs');
-const {IgnorePlugin, DefinePlugin, ProvidePlugin, EnvironmentPlugin} = require('webpack');
-const {CleanWebpackPlugin} = require('clean-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const dotenv = require('dotenv');
-const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
+import {CleanWebpackPlugin} from 'clean-webpack-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
+import dotenv from 'dotenv';
+import fs from 'fs';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import path from 'path';
+import type {Configuration} from 'webpack';
+import {DefinePlugin, EnvironmentPlugin, IgnorePlugin, ProvidePlugin} from 'webpack';
+import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
+import CustomVersionFilePlugin from './CustomVersionFilePlugin';
+import type Environment from './types';
+
+// require is necessary, there are no types for this package and the declaration file can't be seen by the build process which causes an error.
 const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
-const CustomVersionFilePlugin = require('./CustomVersionFilePlugin');
 
 const includeModules = [
     'react-native-animatable',
@@ -25,29 +29,25 @@ const includeModules = [
     'expo-av',
 ].join('|');
 
-const envToLogoSuffixMap = {
+const environmentToLogoSuffixMap: Record<string, string> = {
     production: '',
     staging: '-stg',
     dev: '-dev',
     adhoc: '-adhoc',
 };
 
-function mapEnvToLogoSuffix(envFile) {
-    let env = envFile.split('.')[2];
-    if (typeof env === 'undefined') {
-        env = 'dev';
+function mapEnvironmentToLogoSuffix(environmentFile: string): string {
+    let environment = environmentFile.split('.')[2];
+    if (typeof environment === 'undefined') {
+        environment = 'dev';
     }
-    return envToLogoSuffixMap[env];
+    return environmentToLogoSuffixMap[environment];
 }
 
 /**
  * Get a production grade config for web or desktop
- * @param {Object} env
- * @param {String} env.envFile path to the env file to be used
- * @param {'web'|'desktop'} env.platform
- * @returns {Configuration}
  */
-const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
+const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment): Configuration => ({
     mode: 'production',
     devtool: 'source-map',
     entry: {
@@ -68,10 +68,10 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
         new HtmlWebpackPlugin({
             template: 'web/index.html',
             filename: 'index.html',
-            splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(envFile)}.svg`), 'utf-8'),
+            splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvironmentToLogoSuffix(file)}.svg`), 'utf-8'),
             isWeb: platform === 'web',
-            isProduction: envFile === '.env.production',
-            isStaging: envFile === '.env.staging',
+            isProduction: file === '.env.production',
+            isStaging: file === '.env.staging',
         }),
         new PreloadWebpackPlugin({
             rel: 'preload',
@@ -121,12 +121,14 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
         ...(platform === 'web' ? [new CustomVersionFilePlugin()] : []),
         new DefinePlugin({
             ...(platform === 'desktop' ? {} : {process: {env: {}}}),
-            __REACT_WEB_CONFIG__: JSON.stringify(dotenv.config({path: envFile}).parsed),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            __REACT_WEB_CONFIG__: JSON.stringify(dotenv.config({path: file}).parsed),
 
             // React Native JavaScript environment requires the global __DEV__ variable to be accessible.
             // react-native-render-html uses variable to log exclusively during development.
             // See https://reactnative.dev/docs/javascript-environment
-            __DEV__: /staging|prod|adhoc/.test(envFile) === false,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            __DEV__: /staging|prod|adhoc/.test(file) === false,
         }),
 
         // This allows us to interactively inspect JS bundle contents
@@ -203,21 +205,34 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
     },
     resolve: {
         alias: {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             'react-native-config': 'react-web-config',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             'react-native$': 'react-native-web',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             'react-native-sound': 'react-native-web-sound',
             // Module alias for web & desktop
             // https://webpack.js.org/configuration/resolve/#resolvealias
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@assets': path.resolve(__dirname, '../../assets'),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@components': path.resolve(__dirname, '../../src/components/'),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@hooks': path.resolve(__dirname, '../../src/hooks/'),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@libs': path.resolve(__dirname, '../../src/libs/'),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@navigation': path.resolve(__dirname, '../../src/libs/Navigation/'),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@pages': path.resolve(__dirname, '../../src/pages/'),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@styles': path.resolve(__dirname, '../../src/styles/'),
             // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@src': path.resolve(__dirname, '../../src/'),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@userActions': path.resolve(__dirname, '../../src/libs/actions/'),
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             '@desktop': path.resolve(__dirname, '../../desktop'),
         },
 
@@ -242,6 +257,7 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             '.tsx',
         ],
         fallback: {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             'process/browser': require.resolve('process/browser'),
             crypto: false,
         },
@@ -275,4 +291,4 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
     },
 });
 
-module.exports = webpackConfig;
+export default getCommonConfiguration;

config/webpack/webpack.desktop.js → config/webpack/webpack.desktop.ts

@@ -1,29 +1,28 @@
-const path = require('path');
-const webpack = require('webpack');
-const _ = require('underscore');
-
-const desktopDependencies = require('../../desktop/package.json').dependencies;
-const getCommonConfig = require('./webpack.common');
+import path from 'path';
+import type {Configuration} from 'webpack';
+import webpack from 'webpack';
+// eslint-disable-next-line @dword-design/import-alias/prefer-alias, import/no-relative-packages -- alias imports don't work for webpack
+import {dependencies as desktopDependencies} from '../../desktop/package.json';
+import type Environment from './types';
+import getCommonConfig from './webpack.common';
 
 /**
  * Desktop creates 2 configurations in parallel
  * 1. electron-main - the core that serves the app content
  * 2. web - the app content that would be rendered in electron
  * Everything is placed in desktop/dist and ready for packaging
- * @param {Object} env
- * @returns {webpack.Configuration[]}
  */
-module.exports = (env) => {
-    const rendererConfig = getCommonConfig({...env, platform: 'desktop'});
+const getConfiguration = (environment: Environment): Configuration[] => {
+    const rendererConfig = getCommonConfig({...environment, platform: 'desktop'});
     const outputPath = path.resolve(__dirname, '../../desktop/dist');
 
     rendererConfig.name = 'renderer';
-    rendererConfig.output.path = path.join(outputPath, 'www');
+    (rendererConfig.output ??= {}).path = path.join(outputPath, 'www');
 
     // Expose react-native-config to desktop-main
-    const definePlugin = _.find(rendererConfig.plugins, (plugin) => plugin.constructor === webpack.DefinePlugin);
+    const definePlugin = rendererConfig.plugins?.find((plugin) => plugin?.constructor === webpack.DefinePlugin);
 
-    const mainProcessConfig = {
+    const mainProcessConfig: Configuration = {
         mode: 'production',
         name: 'desktop-main',
         target: 'electron-main',
@@ -38,13 +37,15 @@ module.exports = (env) => {
         },
         resolve: rendererConfig.resolve,
         plugins: [definePlugin],
-        externals: [..._.keys(desktopDependencies), 'fsevents'],
+        externals: [...Object.keys(desktopDependencies), 'fsevents'],
         node: {
             /**
              * Disables webpack processing of __dirname and __filename, so it works like in node
              * https://github.com/webpack/webpack/issues/2010
              */
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             __dirname: false,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             __filename: false,
         },
         module: {
@@ -60,3 +61,5 @@ module.exports = (env) => {
 
     return [mainProcessConfig, rendererConfig];
 };
+
+export default getConfiguration;

config/webpack/webpack.dev.js → config/webpack/webpack.dev.ts

@@ -1,34 +1,39 @@
-const path = require('path');
-const portfinder = require('portfinder');
-const {DefinePlugin} = require('webpack');
-const {merge} = require('webpack-merge');
-const {TimeAnalyticsPlugin} = require('time-analytics-webpack-plugin');
-const getCommonConfig = require('./webpack.common');
+import path from 'path';
+import portfinder from 'portfinder';
+import {TimeAnalyticsPlugin} from 'time-analytics-webpack-plugin';
+import type {Configuration} from 'webpack';
+import {DefinePlugin} from 'webpack';
+import type {Configuration as DevServerConfiguration} from 'webpack-dev-server';
+import {merge} from 'webpack-merge';
+import type Environment from './types';
+import getCommonConfig from './webpack.common';
 
 const BASE_PORT = 8082;
 
 /**
  * Configuration for the local dev server
- * @param {Object} env
- * @returns {Configuration}
  */
-module.exports = (env = {}) =>
+const getConfiguration = (environment: Environment): Promise<Configuration> =>
     portfinder.getPortPromise({port: BASE_PORT}).then((port) => {
         // Check if the USE_WEB_PROXY variable has been provided
         // and rewrite any requests to the local proxy server
-        const proxySettings =
+        const proxySettings: Pick<DevServerConfiguration, 'proxy'> =
             process.env.USE_WEB_PROXY === 'false'
                 ? {}
                 : {
                       proxy: {
+                          // eslint-disable-next-line @typescript-eslint/naming-convention
                           '/api': 'http://[::1]:9000',
+                          // eslint-disable-next-line @typescript-eslint/naming-convention
                           '/staging': 'http://[::1]:9000',
+                          // eslint-disable-next-line @typescript-eslint/naming-convention
                           '/chat-attachments': 'http://[::1]:9000',
+                          // eslint-disable-next-line @typescript-eslint/naming-convention
                           '/receipts': 'http://[::1]:9000',
                       },
                   };
 
-        const baseConfig = getCommonConfig(env);
+        const baseConfig = getCommonConfig(environment);
 
         const config = merge(baseConfig, {
             mode: 'development',
@@ -55,12 +60,13 @@ module.exports = (env = {}) =>
             },
             plugins: [
                 new DefinePlugin({
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
                     'process.env.PORT': port,
                 }),
             ],
             cache: {
                 type: 'filesystem',
-                name: env.platform || 'default',
+                name: environment.platform ?? 'default',
                 buildDependencies: {
                     // By default, webpack and loaders are build dependencies
                     // This (also) makes all dependencies of this config file - build dependencies
@@ -78,3 +84,5 @@ module.exports = (env = {}) =>
 
         return TimeAnalyticsPlugin.wrap(config);
     });
+
+export default getConfiguration;

contributingGuides/APPLE_GOOGLE_SIGNIN.md

@@ -146,7 +146,7 @@ After you've set ngrok up to be able to run on your machine (requires configurin
 ngrok http 8082 --host-header="dev.new.expensify.com:8082" --subdomain=mysubdomain
 ```
 
-The `--host-header` flag is there to avoid webpack errors with header validation. In addition, add `allowedHosts: 'all'` to the dev server config in `webpack.dev.js`:
+The `--host-header` flag is there to avoid webpack errors with header validation. In addition, add `allowedHosts: 'all'` to the dev server config in `webpack.dev.ts`:
 
 ```js
 devServer: {
@@ -243,9 +243,9 @@ Here's how you can re-enable the SSO buttons in development mode:
                                         <Text
                                             accessibilityElementsHidden
     ```
-- Update the webpack.dev.js [config](https://github.com/Expensify/App/blob/1d6bb1d14cff3dd029868a0a7c8ee14ae78c527b/config/webpack/webpack.dev.js#L47-L49) to change `host` from `dev.new.expensify.com` to `localhost` and server type from `https` to `http`. The reason for this is that Google Sign In allows localhost, but `dev.new.expensify.com` is not a registered Google Sign In domain.
+- Update the webpack.dev.ts [config](https://github.com/Expensify/App/blob/1d6bb1d14cff3dd029868a0a7c8ee14ae78c527b/config/webpack/webpack.dev.js#L47-L49) to change `host` from `dev.new.expensify.com` to `localhost` and server type from `https` to `http`. The reason for this is that Google Sign In allows localhost, but `dev.new.expensify.com` is not a registered Google Sign In domain.
     ```diff
-    diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
+    diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts
     index e28383eff5..b14f6f34aa 100644
     --- a/config/webpack/webpack.dev.js
     +++ b/config/webpack/webpack.dev.js