[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,23 @@
+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}, (dirErr) => {
+                if (dirErr) {
+                    return;
+                }
+                fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), {encoding: 'utf8'}, () => {});
+            });
+        });
+    }
+}
+
+export default CustomVersionFilePlugin;

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

@@ -1,13 +1,16 @@
-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');
+/* eslint-disable @typescript-eslint/naming-convention */
+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';
+
 const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
-const CustomVersionFilePlugin = require('./CustomVersionFilePlugin');
 
 const includeModules = [
     'react-native-animatable',
@@ -25,14 +28,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';
@@ -42,12 +45,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: {
@@ -275,4 +274,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,29 @@
-const path = require('path');
-const webpack = require('webpack');
-const _ = require('underscore');
-
-const desktopDependencies = require('../../desktop/package.json').dependencies;
-const getCommonConfig = require('./webpack.common');
+/* eslint-disable @typescript-eslint/naming-convention */
+import path from 'path';
+import webpack from 'webpack';
+// eslint-disable-next-line @dword-design/import-alias/prefer-alias, import/no-relative-packages
+import {dependencies as desktopDependencies} from '../../desktop/package.json';
+import getCommonConfig from './webpack.common';
+import type {EnvFile} from './webpack.dev';
 
 /**
  * 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 +40,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 +62,5 @@ module.exports = (env) => {
 
     return [mainProcessConfig, rendererConfig];
 };
+
+export default getConfig;

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

@@ -1,18 +1,23 @@
-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');
+/* eslint-disable @typescript-eslint/naming-convention */
+import path from 'path';
+import portfinder from 'portfinder';
+import {TimeAnalyticsPlugin} from 'time-analytics-webpack-plugin';
+import type webpack from 'webpack';
+import {DefinePlugin} from 'webpack';
+import {merge} from 'webpack-merge';
+import getCommonConfig from './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 +65,7 @@ module.exports = (env = {}) =>
             ],
             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
@@ -74,7 +79,10 @@ module.exports = (env = {}) =>
                     /([\\/]node_modules[\\/](?!react-native-onyx))/,
                 ],
             },
-        });
+        } as webpack.Configuration);
 
         return TimeAnalyticsPlugin.wrap(config);
     });
+
+export default getConfig;
+export type {EnvFile};

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,12 +243,12 @@ 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.ts#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
+    --- 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

@@ -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.ts` script which initializes Electron and renders `www`
 

desktop/start.ts

@@ -11,9 +11,9 @@ portfinder
     .getPortPromise({
         port: basePort,
     })
-    .then((port): Promise<never> => {
-        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';
+    .then((port) => {
+        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,