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

.storybook/webpack.config.js

@@ -28,7 +28,7 @@ module.exports = ({config}) => {
         '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'),
         '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
 
-        // Module alias support for storybook files, coping from `webpack.common.js`
+        // Module alias support for storybook files, coping from `webpack.common.ts`
         ...custom.resolve.alias,
     };
 

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,25 @@
+import type * as FS from 'fs';
+import type {Compiler} from 'webpack';
+
+const fs = require('fs') as typeof FS;
+const path = require('path');
+const APP_VERSION = require('../../package.json').version;
+
+/**
+ * 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}, (dirErr) => {
+                if (dirErr) {
+                    return;
+                }
+                fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), {encoding: 'utf8'}, () => {});
+            });
+        });
+    }
+}
+
+export = CustomVersionFilePlugin;

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

@@ -1,10 +1,13 @@
-const path = require('path');
-const fs = require('fs');
-const {IgnorePlugin, DefinePlugin, ProvidePlugin, EnvironmentPlugin} = require('webpack');
+/* eslint-disable @typescript-eslint/naming-convention */
+import type {Configuration} from 'webpack';
+
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const dotenv = require('dotenv');
+const fs = require('fs');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const {DefinePlugin, EnvironmentPlugin, IgnorePlugin, ProvidePlugin} = require('webpack');
 const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
 const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
 const CustomVersionFilePlugin = require('./CustomVersionFilePlugin');
@@ -26,14 +29,14 @@ const includeModules = [
     'expo-av',
 ].join('|');
 
-const envToLogoSuffixMap = {
+const envToLogoSuffixMap: Record<string, string> = {
     production: '',
     staging: '-stg',
     dev: '-dev',
     adhoc: '-adhoc',
 };
 
-function mapEnvToLogoSuffix(envFile) {
+function mapEnvToLogoSuffix(envFile: string): string {
     let env = envFile.split('.')[2];
     if (typeof env === 'undefined') {
         env = 'dev';
@@ -43,12 +46,8 @@ function mapEnvToLogoSuffix(envFile) {
 
 /**
  * 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 getCommonConfig = ({envFile = '.env', platform = 'web'}): Configuration => ({
     mode: 'production',
     devtool: 'source-map',
     entry: {
@@ -276,4 +275,4 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
     },
 });
 
-module.exports = webpackConfig;
+export default getCommonConfig;

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

@@ -1,27 +1,30 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import getCommonConfig from './webpack.common';
+import type {EnvFile} from './webpack.dev';
+
 const path = require('path');
 const webpack = require('webpack');
-const _ = require('underscore');
 
 const desktopDependencies = require('../../desktop/package.json').dependencies;
-const getCommonConfig = require('./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 getConfig = (env: EnvFile = {}) => {
     const rendererConfig = getCommonConfig({...env, platform: 'desktop'});
     const outputPath = path.resolve(__dirname, '../../desktop/dist');
 
     rendererConfig.name = 'renderer';
-    rendererConfig.output.path = path.join(outputPath, 'www');
+    if (rendererConfig.output) {
+        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 = _.find(rendererConfig.plugins, (plugin) => plugin.constructor === webpack.DefinePlugin);
+    const definePlugin = rendererConfig.plugins?.find((plugin) => plugin?.constructor === webpack.DefinePlugin);
 
     const mainProcessConfig = {
         mode: 'production',
@@ -38,7 +41,7 @@ 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
@@ -60,3 +63,5 @@ module.exports = (env) => {
 
     return [mainProcessConfig, rendererConfig];
 };
+
+export default getConfig;

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

@@ -1,18 +1,26 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type webpack from 'webpack';
+import getCommonConfig from './webpack.common';
+
+import portfinder = require('portfinder');
+import TimeAnalyticsWebpackPlugin = require('time-analytics-webpack-plugin');
+
+const {TimeAnalyticsPlugin} = TimeAnalyticsWebpackPlugin;
 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');
 
 const BASE_PORT = 8082;
 
+type EnvFile = Partial<{
+    envFile: string;
+    platform: 'web' | 'desktop';
+}>;
+
 /**
  * Configuration for the local dev server
- * @param {Object} env
- * @returns {Configuration}
  */
-module.exports = (env = {}) =>
+const getConfig = (env: EnvFile = {}): Promise<webpack.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
@@ -60,7 +68,7 @@
             ],
             cache: {
                 type: 'filesystem',
-                name: env.platform || 'default',
+                name: env.platform ?? 'default',
                 buildDependencies: {
                     // By default, webpack and loaders are build dependencies
                     // This (also) makes all dependencies of this config file - build dependencies
@@ -78,3 +86,6 @@
 
         return TimeAnalyticsPlugin.wrap(config);
     });
+
+export default getConfig;
+export type {EnvFile};

contributingGuides/APPLE_GOOGLE_SIGNIN.md

@@ -167,7 +167,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: {
@@ -265,13 +265,13 @@ Google allows the web app to be hosted at localhost, but according to the
 current Google console configuration for the Expensify client ID, it must be
 hosted on port 8082.
 
-Also note that you'll need to update the webpack.dev.js config 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.
+Also note that you'll need to update the webpack.dev.ts config 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
+--- a/config/webpack/webpack.dev.ts
++++ b/config/webpack/webpack.dev.ts
 @@ -44,9 +44,9 @@ module.exports = (env = {}) =>
                  ...proxySettings,
                  historyApiFallback: true,

desktop/README.md

@@ -90,7 +90,7 @@ mc policy set public electron-builder/electron-builder
 Once you have Min.IO setup and running, the next step is to temporarily revert some changes from https://github.com/Expensify/App/commit/b640b3010fd7a40783d1c04faf4489836e98038d, specifically
 
 1. Update the `desktop-build` command in package.json to add `--publish always` at the end
-2. Update electronBuilder.config.js to replace the `publish` value with the following:
+2. Update electronBuilder.config.ts to replace the `publish` value with the following:
 ```
  publish: [{
    provider: 's3',
@@ -129,7 +129,7 @@ Once the command finishes, revert the version update in `package.json`, remove `
 To avoid bundling unnecessary `node_modules` we use a [2 package structure](https://www.electron.build/tutorials/two-package-structure)
 The root [package.json](../package.json) serves for `devDependencies` and shared (renderer) `dependencies`
 The [desktop/package.json](./package.json) serves for desktop (electron-main) specific dependencies
-We use Webpack with a [desktop specific config](../config/webpack/webpack.desktop.js) to bundle our js code
+We use Webpack with a [desktop specific config](../config/webpack/webpack.desktop.ts) to bundle our js code
 Half of the config takes care of packaging root package dependencies - everything related to rendering App in the Electron window. Packaged under `dist/www`
 The other half is about bundling the `main.js` script which initializes Electron and renders `www`
 

desktop/start.js

@@ -10,8 +10,8 @@ portfinder
         port: basePort,
     })
     .then((port) => {
-        const devServer = `webpack-dev-server --config config/webpack/webpack.dev.js --port ${port} --env platform=desktop`;
-        const buildMain = 'webpack watch --config config/webpack/webpack.desktop.js --config-name desktop-main --mode=development';
+        const devServer = `webpack-dev-server --config config/webpack/webpack.dev.ts --port ${port} --env platform=desktop`;
+        const buildMain = 'webpack watch --config config/webpack/webpack.desktop.ts --config-name desktop-main --mode=development';
 
         const env = {
             PORT: port,