From 7b98ae0c1abad9144d84c5469a2749ed8e3a0c61 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 4 Mar 2024 08:57:14 +0100 Subject: [PATCH 01/40] update libraries to newer version with types, install types --- package-lock.json | 187 ++++++++++++++++++++++------------------------ package.json | 3 +- 2 files changed, 90 insertions(+), 100 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5f55ddd82868..eb1f2ca1ed91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -184,6 +184,7 @@ "@types/semver": "^7.5.4", "@types/setimmediate": "^1.0.2", "@types/underscore": "^1.11.5", + "@types/webpack-bundle-analyzer": "^4.7.0", "@typescript-eslint/eslint-plugin": "^6.13.2", "@typescript-eslint/parser": "^6.13.2", "@vercel/ncc": "0.38.1", @@ -198,7 +199,7 @@ "babel-plugin-transform-remove-console": "^6.9.4", "clean-webpack-plugin": "^3.0.0", "concurrently": "^5.3.0", - "copy-webpack-plugin": "^6.4.1", + "copy-webpack-plugin": "^10.1.0", "css-loader": "^6.7.2", "diff-so-fancy": "^1.3.0", "dotenv": "^16.0.3", @@ -21189,6 +21190,26 @@ "source-map": "^0.6.0" } }, + "node_modules/@types/webpack-bundle-analyzer": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@types/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz", + "integrity": "sha512-c5i2ThslSNSG8W891BRvOd/RoCjI2zwph8maD22b1adtSns20j+0azDDMCK06DiVrzTgnwiDl5Ntmu1YRJw8Sg==", + "dev": true, + "dependencies": { + "@types/node": "*", + "tapable": "^2.2.0", + "webpack": "^5" + } + }, + "node_modules/@types/webpack-bundle-analyzer/node_modules/tapable": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", + "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@types/webpack-env": { "version": "1.18.0", "dev": true, @@ -26724,155 +26745,123 @@ } }, "node_modules/copy-webpack-plugin": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.4.1.tgz", - "integrity": "sha512-MXyPCjdPVx5iiWyl40Va3JGh27bKzOTNY3NjUTrosD2q7dR/cLD0013uqJ3BpFbUjyONINjb6qI7nDIJujrMbA==", + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz", + "integrity": "sha512-xFVltahqlsRcyyJqQbDY6EYTtyQZF9rf+JPjwHObLdPFMEISqkFkr7mFoVOC6BfYS/dNThyoQKvziugm+OnwBg==", "dev": true, - "license": "MIT", "dependencies": { - "cacache": "^15.0.5", - "fast-glob": "^3.2.4", - "find-cache-dir": "^3.3.1", - "glob-parent": "^5.1.1", - "globby": "^11.0.1", - "loader-utils": "^2.0.0", + "fast-glob": "^3.2.7", + "glob-parent": "^6.0.1", + "globby": "^12.0.2", "normalize-path": "^3.0.0", - "p-limit": "^3.0.2", - "schema-utils": "^3.0.0", - "serialize-javascript": "^5.0.1", - "webpack-sources": "^1.4.3" + "schema-utils": "^4.0.0", + "serialize-javascript": "^6.0.0" }, "engines": { - "node": ">= 10.13.0" + "node": ">= 12.20.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/webpack" }, "peerDependencies": { - "webpack": "^4.37.0 || ^5.0.0" + "webpack": "^5.1.0" } }, - "node_modules/copy-webpack-plugin/node_modules/find-cache-dir": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", - "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==", + "node_modules/copy-webpack-plugin/node_modules/ajv-keywords": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz", + "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==", "dev": true, - "license": "MIT", "dependencies": { - "commondir": "^1.0.1", - "make-dir": "^3.0.2", - "pkg-dir": "^4.1.0" - }, - "engines": { - "node": ">=8" + "fast-deep-equal": "^3.1.3" }, - "funding": { - "url": "https://github.com/avajs/find-cache-dir?sponsor=1" + "peerDependencies": { + "ajv": "^8.8.2" } }, - "node_modules/copy-webpack-plugin/node_modules/find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "node_modules/copy-webpack-plugin/node_modules/array-union": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz", + "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==", "dev": true, - "license": "MIT", - "dependencies": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - }, "engines": { - "node": ">=8" + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/copy-webpack-plugin/node_modules/locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "node_modules/copy-webpack-plugin/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", "dev": true, - "license": "MIT", "dependencies": { - "p-locate": "^4.1.0" + "is-glob": "^4.0.3" }, "engines": { - "node": ">=8" + "node": ">=10.13.0" } }, - "node_modules/copy-webpack-plugin/node_modules/make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "node_modules/copy-webpack-plugin/node_modules/globby": { + "version": "12.2.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz", + "integrity": "sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==", "dev": true, - "license": "MIT", "dependencies": { - "semver": "^6.0.0" + "array-union": "^3.0.1", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.7", + "ignore": "^5.1.9", + "merge2": "^1.4.1", + "slash": "^4.0.0" }, "engines": { - "node": ">=8" + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/copy-webpack-plugin/node_modules/p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "node_modules/copy-webpack-plugin/node_modules/schema-utils": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", + "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", "dev": true, - "license": "MIT", "dependencies": { - "p-limit": "^2.2.0" + "@types/json-schema": "^7.0.9", + "ajv": "^8.9.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.1.0" }, "engines": { - "node": ">=8" + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" } }, - "node_modules/copy-webpack-plugin/node_modules/p-locate/node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "node_modules/copy-webpack-plugin/node_modules/serialize-javascript": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", + "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "dev": true, - "license": "MIT", "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "randombytes": "^2.1.0" } }, - "node_modules/copy-webpack-plugin/node_modules/path-exists": { + "node_modules/copy-webpack-plugin/node_modules/slash": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", + "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", "dev": true, - "license": "MIT", "engines": { - "node": ">=8" - } - }, - "node_modules/copy-webpack-plugin/node_modules/pkg-dir": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", - "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "find-up": "^4.0.0" + "node": ">=12" }, - "engines": { - "node": ">=8" - } - }, - "node_modules/copy-webpack-plugin/node_modules/semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true, - "bin": { - "semver": "bin/semver.js" + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/core-js": { diff --git a/package.json b/package.json index e3c23d4538d3..b15951d49242 100644 --- a/package.json +++ b/package.json @@ -232,6 +232,7 @@ "@types/semver": "^7.5.4", "@types/setimmediate": "^1.0.2", "@types/underscore": "^1.11.5", + "@types/webpack-bundle-analyzer": "^4.7.0", "@typescript-eslint/eslint-plugin": "^6.13.2", "@typescript-eslint/parser": "^6.13.2", "@vercel/ncc": "0.38.1", @@ -246,7 +247,7 @@ "babel-plugin-transform-remove-console": "^6.9.4", "clean-webpack-plugin": "^3.0.0", "concurrently": "^5.3.0", - "copy-webpack-plugin": "^6.4.1", + "copy-webpack-plugin": "^10.1.0", "css-loader": "^6.7.2", "diff-so-fancy": "^1.3.0", "dotenv": "^16.0.3", From 630b8aea826dec37f812633766d44b46e9f119c6 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 4 Mar 2024 08:58:54 +0100 Subject: [PATCH 02/40] migrate electronBuilder.config.js to TypeScript --- ...Builder.config.js => electronBuilder.config.ts} | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) rename config/{electronBuilder.config.js => electronBuilder.config.ts} (74%) diff --git a/config/electronBuilder.config.js b/config/electronBuilder.config.ts similarity index 74% rename from config/electronBuilder.config.js rename to config/electronBuilder.config.ts index e4ed685f65fe..219da2703c62 100644 --- a/config/electronBuilder.config.js +++ b/config/electronBuilder.config.ts @@ -2,25 +2,25 @@ const {version} = require('../package.json'); const pullRequestNumber = process.env.PULL_REQUEST_NUMBER; -const s3Bucket = { +const s3Bucket: Record = { production: 'expensify-cash', staging: 'staging-expensify-cash', adhoc: 'ad-hoc-expensify-cash', }; -const s3Path = { +const s3Path: Record = { production: '/', staging: '/', adhoc: process.env.PULL_REQUEST_NUMBER ? `/desktop/${pullRequestNumber}/` : '/', }; -const macIcon = { +const macIcon: Record = { production: './desktop/icon.png', staging: './desktop/icon-stg.png', adhoc: './desktop/icon-adhoc.png', }; -const isCorrectElectronEnv = ['production', 'staging', 'adhoc'].includes(process.env.ELECTRON_ENV); +const isCorrectElectronEnv: boolean = ['production', 'staging', 'adhoc'].includes(process.env.ELECTRON_ENV ?? ''); if (!isCorrectElectronEnv) { throw new Error('Invalid ELECTRON_ENV!'); @@ -37,7 +37,7 @@ module.exports = { }, mac: { category: 'public.app-category.finance', - icon: macIcon[process.env.ELECTRON_ENV], + icon: process.env.ELECTRON_ENV ? macIcon[process.env.ELECTRON_ENV] : undefined, hardenedRuntime: true, entitlements: 'desktop/entitlements.mac.plist', entitlementsInherit: 'desktop/entitlements.mac.plist', @@ -54,9 +54,9 @@ module.exports = { publish: [ { provider: 's3', - bucket: s3Bucket[process.env.ELECTRON_ENV], + bucket: process.env.ELECTRON_ENV ? s3Bucket[process.env.ELECTRON_ENV] : undefined, channel: 'latest', - path: s3Path[process.env.ELECTRON_ENV], + path: process.env.ELECTRON_ENV ? s3Path[process.env.ELECTRON_ENV] : undefined, }, ], files: ['dist', '!dist/www/{.well-known,favicon*}'], From 1dbe373fcadf2d9104e0232c463ed372b7cdafcc Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 4 Mar 2024 09:03:41 +0100 Subject: [PATCH 03/40] migrate proxyConfig.js to TypeScript --- config/{proxyConfig.js => proxyConfig.ts} | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) rename config/{proxyConfig.js => proxyConfig.ts} (64%) diff --git a/config/proxyConfig.js b/config/proxyConfig.ts similarity index 64% rename from config/proxyConfig.js rename to config/proxyConfig.ts index fa09c436461f..0fecef28c1cf 100644 --- a/config/proxyConfig.js +++ b/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; From c6a484f6323a37553c4aad2c7df8d8fb9f7ee7d5 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 4 Mar 2024 09:15:20 +0100 Subject: [PATCH 04/40] migrate webpack.common.js to TypeScript --- .../{webpack.common.js => webpack.common.ts} | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) rename config/webpack/{webpack.common.js => webpack.common.ts} (92%) diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.ts similarity index 92% rename from config/webpack/webpack.common.js rename to config/webpack/webpack.common.ts index 170198987793..71ba7e584fde 100644 --- a/config/webpack/webpack.common.js +++ b/config/webpack/webpack.common.ts @@ -1,13 +1,13 @@ -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'); -const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin'); -const CustomVersionFilePlugin = require('./CustomVersionFilePlugin'); +import PreloadWebpackPlugin from '@vue/preload-webpack-plugin'; +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 {DefinePlugin, EnvironmentPlugin, IgnorePlugin, ProvidePlugin} from 'webpack'; +import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'; +import CustomVersionFilePlugin from './CustomVersionFilePlugin'; const includeModules = [ 'react-native-animatable', @@ -26,14 +26,14 @@ const includeModules = [ 'expo-av', ].join('|'); -const envToLogoSuffixMap = { +const envToLogoSuffixMap: Record = { 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,10 +43,6 @@ 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'}) => ({ mode: 'production', @@ -276,4 +272,4 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({ }, }); -module.exports = webpackConfig; +export default webpackConfig; From 866211c240e8fc27f1333f362633be44cc8dc231 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 4 Mar 2024 09:15:38 +0100 Subject: [PATCH 05/40] migrate webpack.desktop.js to TypeScript --- config/webpack/{webpack.desktop.js => webpack.desktop.ts} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename config/webpack/{webpack.desktop.js => webpack.desktop.ts} (95%) diff --git a/config/webpack/webpack.desktop.js b/config/webpack/webpack.desktop.ts similarity index 95% rename from config/webpack/webpack.desktop.js rename to config/webpack/webpack.desktop.ts index 2612e2b190fa..252538b8b072 100644 --- a/config/webpack/webpack.desktop.js +++ b/config/webpack/webpack.desktop.ts @@ -1,6 +1,6 @@ -const path = require('path'); -const webpack = require('webpack'); -const _ = require('underscore'); +import path from 'path'; +import _ from 'underscore'; +import webpack from 'webpack'; const desktopDependencies = require('../../desktop/package.json').dependencies; const getCommonConfig = require('./webpack.common'); From 847b4b7cf938ca19a232e2661e6207adade91d6f Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 4 Mar 2024 09:16:07 +0100 Subject: [PATCH 06/40] start migrating webpack.dev.js to TypeScript --- .../{webpack.dev.js => webpack.dev.ts} | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) rename config/webpack/{webpack.dev.js => webpack.dev.ts} (85%) diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.ts similarity index 85% rename from config/webpack/webpack.dev.js rename to config/webpack/webpack.dev.ts index e28383eff557..9c5cb94aa86d 100644 --- a/config/webpack/webpack.dev.js +++ b/config/webpack/webpack.dev.ts @@ -1,18 +1,22 @@ -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 {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 = {}) => +module.exports = (env: EnvFile = {}) => 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 From b29a9b336e80c3534adc54b7b01df40c1262f5fb Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 4 Mar 2024 09:20:11 +0100 Subject: [PATCH 07/40] add module declaration for preload-webpack-plugin --- src/types/modules/preload-webpack-plugin.d.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/types/modules/preload-webpack-plugin.d.ts diff --git a/src/types/modules/preload-webpack-plugin.d.ts b/src/types/modules/preload-webpack-plugin.d.ts new file mode 100644 index 000000000000..8f9d33a51080 --- /dev/null +++ b/src/types/modules/preload-webpack-plugin.d.ts @@ -0,0 +1,16 @@ +declare module '@vue/preload-webpack-plugin' { + // eslint-disable-next-line @typescript-eslint/consistent-type-definitions + interface Options { + rel: string; + as: string; + fileWhitelist: RegExp[]; + include: string; + } + + declare class PreloadWebpackPlugin { + constructor(options?: Options); + apply(compiler: Compiler): void; + } + + export default PreloadWebpackPlugin; +} From 7ad015da9a4a45231f168efeebbc0b795201d346 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 4 Mar 2024 09:21:30 +0100 Subject: [PATCH 08/40] update scripts and documentation --- desktop/README.md | 2 +- scripts/build-desktop.sh | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/desktop/README.md b/desktop/README.md index 77abff97a898..4ef763c6fedf 100644 --- a/desktop/README.md +++ b/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', diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh index 025559dc4671..2354ab9fdaa2 100755 --- a/scripts/build-desktop.sh +++ b/scripts/build-desktop.sh @@ -25,4 +25,4 @@ npx webpack --config config/webpack/webpack.desktop.js --env envFile=$ENV_FILE title "Building Desktop App Archive Using Electron" info "" shift 1 -npx electron-builder --config config/electronBuilder.config.js --publish always "$@" +npx electron-builder --config config/electronBuilder.config.ts --publish always "$@" From 21f632801ad6f5566c5619fe0ab8cdfe924b4fee Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 4 Mar 2024 16:32:52 +0100 Subject: [PATCH 09/40] fix webpack.common.ts --- config/webpack/webpack.common.ts | 1 + config/webpack/webpack.desktop.ts | 10 +++++----- config/webpack/webpack.dev.ts | 12 ++++++------ 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index 71ba7e584fde..b26a3a01e825 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/naming-convention */ import PreloadWebpackPlugin from '@vue/preload-webpack-plugin'; import {CleanWebpackPlugin} from 'clean-webpack-plugin'; import CopyPlugin from 'copy-webpack-plugin'; diff --git a/config/webpack/webpack.desktop.ts b/config/webpack/webpack.desktop.ts index 252538b8b072..397fb6f7a3fd 100644 --- a/config/webpack/webpack.desktop.ts +++ b/config/webpack/webpack.desktop.ts @@ -1,6 +1,6 @@ -import path from 'path'; -import _ from 'underscore'; -import webpack from 'webpack'; +const path = require('path'); +const _ = require('underscore'); +const webpack = require('webpack'); const desktopDependencies = require('../../desktop/package.json').dependencies; const getCommonConfig = require('./webpack.common'); @@ -10,8 +10,8 @@ const getCommonConfig = require('./webpack.common'); * 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[]} + * @param env + * @returns */ module.exports = (env) => { const rendererConfig = getCommonConfig({...env, platform: 'desktop'}); diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 9c5cb94aa86d..0d9a44c0bf20 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -1,10 +1,10 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import path from 'path'; -import portfinder from 'portfinder'; -import {TimeAnalyticsPlugin} from 'time-analytics-webpack-plugin'; -import {DefinePlugin} from 'webpack'; -import {merge} from 'webpack-merge'; -import getCommonConfig from './webpack.common'; +const path = require('path'); +const portfinder = require('portfinder'); +const {TimeAnalyticsPlugin} = require('time-analytics-webpack-plugin'); +const {DefinePlugin} = require('webpack'); +const {merge} = require('webpack-merge'); +const getCommonConfig = require('./webpack.common'); const BASE_PORT = 8082; From 59522b781097467f4003a3af1fec52c77ea511bb Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 5 Mar 2024 10:07:15 +0100 Subject: [PATCH 10/40] update imports in webpack.dev.ts --- config/webpack/webpack.dev.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 0d9a44c0bf20..45e79a3bf578 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -1,7 +1,9 @@ /* eslint-disable @typescript-eslint/naming-convention */ +import portfinder = require('portfinder'); +import TimeAnalyticsWebpackPlugin = require('time-analytics-webpack-plugin'); + +const {TimeAnalyticsPlugin} = TimeAnalyticsWebpackPlugin; const path = require('path'); -const portfinder = require('portfinder'); -const {TimeAnalyticsPlugin} = require('time-analytics-webpack-plugin'); const {DefinePlugin} = require('webpack'); const {merge} = require('webpack-merge'); const getCommonConfig = require('./webpack.common'); @@ -16,7 +18,7 @@ type EnvFile = Partial<{ /** * Configuration for the local dev server */ -module.exports = (env: EnvFile = {}) => +const getConfig = (env: EnvFile = {}) => 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 @@ -64,7 +66,7 @@ module.exports = (env: EnvFile = {}) => ], 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 @@ -82,3 +84,5 @@ module.exports = (env: EnvFile = {}) => return TimeAnalyticsPlugin.wrap(config); }); + +export default getConfig; From 1819da7109e6cff37c0e53db44eec79e8c7aa148 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Mar 2024 09:07:37 +0100 Subject: [PATCH 11/40] update scripts in package.json, install webpack types --- package-lock.json | 100 +++++++++++++++++++++++++++++++++++++--------- package.json | 11 ++--- 2 files changed, 87 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 31933d6f3596..3f9d80e1417d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -184,6 +184,7 @@ "@types/semver": "^7.5.4", "@types/setimmediate": "^1.0.2", "@types/underscore": "^1.11.5", + "@types/webpack": "^5.28.5", "@types/webpack-bundle-analyzer": "^4.7.0", "@typescript-eslint/eslint-plugin": "^6.13.2", "@typescript-eslint/parser": "^6.13.2", @@ -13261,6 +13262,20 @@ "integrity": "sha512-Mnq3O9Xz52exs3mlxMcQuA7/9VFe/dXcrgAyfjLkABIqxXKOgBRjyazTxUbjsxDa4BP7hhPliyjVTP9RDP14xg==", "dev": true }, + "node_modules/@storybook/builder-webpack4/node_modules/@types/webpack": { + "version": "4.41.38", + "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.38.tgz", + "integrity": "sha512-oOW7E931XJU1mVfCnxCVgv8GLFL768pDO5u2Gzk82i8yTIgX6i7cntyZOkZYb/JtYM8252SN9bQp9tgkVDSsRw==", + "dev": true, + "dependencies": { + "@types/node": "*", + "@types/tapable": "^1", + "@types/uglify-js": "*", + "@types/webpack-sources": "*", + "anymatch": "^3.0.0", + "source-map": "^0.6.0" + } + }, "node_modules/@storybook/builder-webpack4/node_modules/@webassemblyjs/helper-buffer": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz", @@ -16068,6 +16083,20 @@ "integrity": "sha512-Mnq3O9Xz52exs3mlxMcQuA7/9VFe/dXcrgAyfjLkABIqxXKOgBRjyazTxUbjsxDa4BP7hhPliyjVTP9RDP14xg==", "dev": true }, + "node_modules/@storybook/core-server/node_modules/@types/webpack": { + "version": "4.41.38", + "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.38.tgz", + "integrity": "sha512-oOW7E931XJU1mVfCnxCVgv8GLFL768pDO5u2Gzk82i8yTIgX6i7cntyZOkZYb/JtYM8252SN9bQp9tgkVDSsRw==", + "dev": true, + "dependencies": { + "@types/node": "*", + "@types/tapable": "^1", + "@types/uglify-js": "*", + "@types/webpack-sources": "*", + "anymatch": "^3.0.0", + "source-map": "^0.6.0" + } + }, "node_modules/@storybook/core-server/node_modules/@webassemblyjs/helper-buffer": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz", @@ -17167,6 +17196,20 @@ "integrity": "sha512-Mnq3O9Xz52exs3mlxMcQuA7/9VFe/dXcrgAyfjLkABIqxXKOgBRjyazTxUbjsxDa4BP7hhPliyjVTP9RDP14xg==", "dev": true }, + "node_modules/@storybook/manager-webpack4/node_modules/@types/webpack": { + "version": "4.41.38", + "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.38.tgz", + "integrity": "sha512-oOW7E931XJU1mVfCnxCVgv8GLFL768pDO5u2Gzk82i8yTIgX6i7cntyZOkZYb/JtYM8252SN9bQp9tgkVDSsRw==", + "dev": true, + "dependencies": { + "@types/node": "*", + "@types/tapable": "^1", + "@types/uglify-js": "*", + "@types/webpack-sources": "*", + "anymatch": "^3.0.0", + "source-map": "^0.6.0" + } + }, "node_modules/@storybook/manager-webpack4/node_modules/@webassemblyjs/helper-buffer": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz", @@ -21110,11 +21153,10 @@ } }, "node_modules/@types/source-list-map": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", - "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==", - "dev": true, - "license": "MIT" + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.6.tgz", + "integrity": "sha512-5JcVt1u5HDmlXkwOD2nslZVllBBc7HDuOICfiZah2Z0is8M8g+ddAEawbmd3VjedfDHBzxCaXLs07QEmb7y54g==", + "dev": true }, "node_modules/@types/stack-utils": { "version": "2.0.1", @@ -21136,9 +21178,10 @@ "license": "MIT" }, "node_modules/@types/uglify-js": { - "version": "3.17.0", + "version": "3.17.5", + "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.5.tgz", + "integrity": "sha512-TU+fZFBTBcXj/GpDpDaBmgWk/gn96kMZ+uocaFUlV2f8a6WdMzzI44QBCmGcCiYR0Y6ZlNRiyUyKKt5nl/lbzQ==", "dev": true, - "license": "MIT", "dependencies": { "source-map": "^0.6.1" } @@ -21178,16 +21221,14 @@ "integrity": "sha512-50GQhDVTq/herLMiqSQkdtRu+d5q/cWHn4VvKJtrj4DJAjo1MNkWYa2MA41BaBO1q1HgsUjuQvEOk0QHvlnAaQ==" }, "node_modules/@types/webpack": { - "version": "4.41.32", + "version": "5.28.5", + "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-5.28.5.tgz", + "integrity": "sha512-wR87cgvxj3p6D0Crt1r5avwqffqPXUkNlnQ1mjU93G7gCuFjufZR4I6j8cz5g1F1tTYpfOOFvly+cmIQwL9wvw==", "dev": true, - "license": "MIT", "dependencies": { "@types/node": "*", - "@types/tapable": "^1", - "@types/uglify-js": "*", - "@types/webpack-sources": "*", - "anymatch": "^3.0.0", - "source-map": "^0.6.0" + "tapable": "^2.2.0", + "webpack": "^5" } }, "node_modules/@types/webpack-bundle-analyzer": { @@ -21216,11 +21257,10 @@ "license": "MIT" }, "node_modules/@types/webpack-sources": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz", - "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.3.tgz", + "integrity": "sha512-4nZOdMwSPHZ4pTEZzSp0AsTM4K7Qmu40UKW4tJDiOVs20UzYF9l+qUe4s0ftfN0pin06n+5cWWDJXH+sbhAiDw==", "dev": true, - "license": "MIT", "dependencies": { "@types/node": "*", "@types/source-list-map": "*", @@ -21232,11 +21272,19 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", "dev": true, - "license": "BSD-3-Clause", "engines": { "node": ">= 8" } }, + "node_modules/@types/webpack/node_modules/tapable": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", + "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@types/ws": { "version": "8.5.3", "dev": true, @@ -25982,6 +26030,20 @@ "webpack": "*" } }, + "node_modules/clean-webpack-plugin/node_modules/@types/webpack": { + "version": "4.41.38", + "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.38.tgz", + "integrity": "sha512-oOW7E931XJU1mVfCnxCVgv8GLFL768pDO5u2Gzk82i8yTIgX6i7cntyZOkZYb/JtYM8252SN9bQp9tgkVDSsRw==", + "dev": true, + "dependencies": { + "@types/node": "*", + "@types/tapable": "^1", + "@types/uglify-js": "*", + "@types/webpack-sources": "*", + "anymatch": "^3.0.0", + "source-map": "^0.6.0" + } + }, "node_modules/cli-boxes": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz", diff --git a/package.json b/package.json index 614244de50bb..26969642c787 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,10 @@ "start": "npx react-native start", "web": "scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server", "web-proxy": "ts-node web/proxy.js", - "web-server": "webpack-dev-server --open --config config/webpack/webpack.dev.js", - "build": "webpack --config config/webpack/webpack.common.js --env envFile=.env.production", - "build-staging": "webpack --config config/webpack/webpack.common.js --env envFile=.env.staging", - "build-adhoc": "webpack --config config/webpack/webpack.common.js --env envFile=.env.adhoc", + "web-server": "webpack-dev-server --open --config config/webpack/webpack.dev.ts", + "build": "webpack --config config/webpack/webpack.common.ts --env envFile=.env.production", + "build-staging": "webpack --config config/webpack/webpack.common.ts --env envFile=.env.staging", + "build-adhoc": "webpack --config config/webpack/webpack.common.ts --env envFile=.env.adhoc", "desktop": "scripts/set-pusher-suffix.sh && ts-node desktop/start.js", "desktop-build": "scripts/build-desktop.sh production", "desktop-build-staging": "scripts/build-desktop.sh staging", @@ -47,7 +47,7 @@ "storybook-build-staging": "ENV=staging build-storybook -o dist/docs", "gh-actions-build": "./.github/scripts/buildActions.sh", "gh-actions-validate": "./.github/scripts/validateActionsAndWorkflows.sh", - "analyze-packages": "ANALYZE_BUNDLE=true webpack --config config/webpack/webpack.common.js --env envFile=.env.production", + "analyze-packages": "ANALYZE_BUNDLE=true webpack --config config/webpack/webpack.common.ts --env envFile=.env.production", "symbolicate:android": "npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map", "symbolicate:ios": "npx metro-symbolicate main.jsbundle.map", "test:e2e": "ts-node tests/e2e/testRunner.js --config ./config.local.ts", @@ -233,6 +233,7 @@ "@types/semver": "^7.5.4", "@types/setimmediate": "^1.0.2", "@types/underscore": "^1.11.5", + "@types/webpack": "^5.28.5", "@types/webpack-bundle-analyzer": "^4.7.0", "@typescript-eslint/eslint-plugin": "^6.13.2", "@typescript-eslint/parser": "^6.13.2", From 05b5c439b3eaca8fd38c6cafdb8e117be4726fce Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Mar 2024 09:20:43 +0100 Subject: [PATCH 12/40] update file extensions in documentation --- README.md | 2 +- desktop/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 72736b3fedb7..3f22cff7cb63 100644 --- a/README.md +++ b/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. diff --git a/desktop/README.md b/desktop/README.md index 4ef763c6fedf..bd68ec571659 100644 --- a/desktop/README.md +++ b/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.js` script which initializes Electron and renders `www` From 8bcb07885539f46c998659ba88e1049f92ad1e88 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Mar 2024 09:29:03 +0100 Subject: [PATCH 13/40] update tsconfig --- tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tsconfig.json b/tsconfig.json index 30708f63d12b..59f095d3f752 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,6 +31,7 @@ "moduleResolution": "node", "resolveJsonModule": true, "allowSyntheticDefaultImports": true, + "esModuleInterop": true, "skipLibCheck": true, "incremental": true, "baseUrl": ".", From 56e5b173a37a7087e65595f589f83b89ce450887 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Mar 2024 09:30:26 +0100 Subject: [PATCH 14/40] update file extensions in documentation --- contributingGuides/APPLE_GOOGLE_SIGNIN.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/contributingGuides/APPLE_GOOGLE_SIGNIN.md b/contributingGuides/APPLE_GOOGLE_SIGNIN.md index 4bb86e31b486..e62d78e020af 100644 --- a/contributingGuides/APPLE_GOOGLE_SIGNIN.md +++ b/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, From b80efcca9aea1c1c2299cb3893ecf91780561e95 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Mar 2024 09:52:40 +0100 Subject: [PATCH 15/40] update file extension in webpack.config.js --- .storybook/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 204f70344b18..07b57c687daf 100644 --- a/.storybook/webpack.config.js +++ b/.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, }; From 7649b0298aad7ccd0dc02215445be820ee095d64 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Mar 2024 10:05:48 +0100 Subject: [PATCH 16/40] migrate webpack.common.js to TypeScript --- config/webpack/webpack.common.ts | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index b26a3a01e825..2916064bf2a4 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -1,14 +1,16 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import PreloadWebpackPlugin from '@vue/preload-webpack-plugin'; -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 {DefinePlugin, EnvironmentPlugin, IgnorePlugin, ProvidePlugin} from 'webpack'; -import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'; -import CustomVersionFilePlugin from './CustomVersionFilePlugin'; +import type {Configuration} from 'webpack'; + +const {CleanWebpackPlugin} = require('clean-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'); const includeModules = [ 'react-native-animatable', @@ -45,7 +47,7 @@ function mapEnvToLogoSuffix(envFile: string): string { /** * Get a production grade config for web or desktop */ -const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({ +const getCommonConfig = ({envFile = '.env', platform = 'web'}): Configuration => ({ mode: 'production', devtool: 'source-map', entry: { @@ -273,4 +275,4 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({ }, }); -export default webpackConfig; +export default getCommonConfig; From a0ba0148abbbb681ba8e46c125b26661b694c59b Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Mar 2024 10:08:48 +0100 Subject: [PATCH 17/40] migrate webpack.desktop.js to TypeScript --- config/webpack/webpack.desktop.ts | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/config/webpack/webpack.desktop.ts b/config/webpack/webpack.desktop.ts index 397fb6f7a3fd..9c28afd614d5 100644 --- a/config/webpack/webpack.desktop.ts +++ b/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 _ = require('underscore'); const webpack = require('webpack'); 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 env - * @returns */ -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; From 512cf42d93b4c7ddea593012515db28c7abbdf5c Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Mar 2024 10:09:22 +0100 Subject: [PATCH 18/40] migrate webpack.dev.js to TypeScript --- config/webpack/webpack.dev.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 45e79a3bf578..56dc735edd86 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -1,12 +1,14 @@ /* eslint-disable @typescript-eslint/naming-convention */ +import type webpack from 'webpack'; + import portfinder = require('portfinder'); import TimeAnalyticsWebpackPlugin = require('time-analytics-webpack-plugin'); +import getCommonConfig from './webpack.common'; const {TimeAnalyticsPlugin} = TimeAnalyticsWebpackPlugin; const path = require('path'); const {DefinePlugin} = require('webpack'); const {merge} = require('webpack-merge'); -const getCommonConfig = require('./webpack.common'); const BASE_PORT = 8082; @@ -18,7 +20,7 @@ type EnvFile = Partial<{ /** * Configuration for the local dev server */ -const getConfig = (env: EnvFile = {}) => +const getConfig = (env: EnvFile = {}): Promise => 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 @@ -86,3 +88,4 @@ const getConfig = (env: EnvFile = {}) => }); export default getConfig; +export type {EnvFile}; From 5ef518ace9b9fa291cd809ea9d86dc1482be6cc6 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Mar 2024 10:14:50 +0100 Subject: [PATCH 19/40] update file extensions in scripts --- desktop/start.js | 4 ++-- scripts/build-desktop.sh | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/desktop/start.js b/desktop/start.js index 05a1b031350d..0802dabdda2f 100644 --- a/desktop/start.js +++ b/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, diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh index 2354ab9fdaa2..0c8a19c592e6 100755 --- a/scripts/build-desktop.sh +++ b/scripts/build-desktop.sh @@ -20,7 +20,7 @@ title "Bundling Desktop js Bundle Using Webpack" info " • ELECTRON_ENV: $ELECTRON_ENV" info " • ENV file: $ENV_FILE" info "" -npx webpack --config config/webpack/webpack.desktop.js --env envFile=$ENV_FILE +npx webpack --config config/webpack/webpack.desktop.ts --env envFile=$ENV_FILE title "Building Desktop App Archive Using Electron" info "" From 77a9b0dd8b7e9b81b11263ea430ccdcbe7ff3f1a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 7 Mar 2024 14:47:59 +0100 Subject: [PATCH 20/40] start migrating CustomVersionFilePlugin to TypeScript --- ...ustomVersionFilePlugin.js => CustomVersionFilePlugin.ts} | 6 ++++-- config/webpack/webpack.dev.ts | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) rename config/webpack/{CustomVersionFilePlugin.js => CustomVersionFilePlugin.ts} (91%) diff --git a/config/webpack/CustomVersionFilePlugin.js b/config/webpack/CustomVersionFilePlugin.ts similarity index 91% rename from config/webpack/CustomVersionFilePlugin.js rename to config/webpack/CustomVersionFilePlugin.ts index ed7c0f3dca95..4003429341c6 100644 --- a/config/webpack/CustomVersionFilePlugin.js +++ b/config/webpack/CustomVersionFilePlugin.ts @@ -1,3 +1,5 @@ +import type {Compiler} from 'webpack'; + const fs = require('fs'); const path = require('path'); const APP_VERSION = require('../../package.json').version; @@ -6,7 +8,7 @@ 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) { + apply(compiler: Compiler) { compiler.hooks.done.tap( this.constructor.name, () => @@ -30,4 +32,4 @@ class CustomVersionFilePlugin { } } -module.exports = CustomVersionFilePlugin; +export default CustomVersionFilePlugin; diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 56dc735edd86..654ee20f2a6e 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -1,9 +1,9 @@ /* 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'); -import getCommonConfig from './webpack.common'; const {TimeAnalyticsPlugin} = TimeAnalyticsWebpackPlugin; const path = require('path'); From 3c2935946ee576e2b8d015afca78908859f5f552 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 8 Mar 2024 13:03:52 +0100 Subject: [PATCH 21/40] Migrate CustomVersionFilePlugin to TypeScript --- config/webpack/CustomVersionFilePlugin.ts | 34 ++++++++--------------- 1 file changed, 12 insertions(+), 22 deletions(-) diff --git a/config/webpack/CustomVersionFilePlugin.ts b/config/webpack/CustomVersionFilePlugin.ts index 4003429341c6..fc19d8543599 100644 --- a/config/webpack/CustomVersionFilePlugin.ts +++ b/config/webpack/CustomVersionFilePlugin.ts @@ -1,6 +1,7 @@ +import type * as FS from 'fs'; import type {Compiler} from 'webpack'; -const fs = require('fs'); +const fs = require('fs') as typeof FS; const path = require('path'); const APP_VERSION = require('../../package.json').version; @@ -9,27 +10,16 @@ const APP_VERSION = require('../../package.json').version; */ class CustomVersionFilePlugin { apply(compiler: Compiler) { - compiler.hooks.done.tap( - this.constructor.name, - () => - new Promise((resolve, reject) => { - const versionPath = path.join(__dirname, '/../../dist/version.json'); - fs.mkdir(path.dirname(versionPath), {recursive: true}, (dirErr) => { - if (dirErr) { - reject(dirErr); - return; - } - fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), 'utf8', (fileErr) => { - if (fileErr) { - reject(fileErr); - return; - } - resolve(); - }); - }); - }), - ); + 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; +export = CustomVersionFilePlugin; From ca48f2cd27c2a5b7e17278794a4d52f532cf2ff7 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 8 Mar 2024 13:10:04 +0100 Subject: [PATCH 22/40] revert electronBuilder.config.to to JavaScript --- ...Builder.config.ts => electronBuilder.config.js} | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) rename config/{electronBuilder.config.ts => electronBuilder.config.js} (74%) diff --git a/config/electronBuilder.config.ts b/config/electronBuilder.config.js similarity index 74% rename from config/electronBuilder.config.ts rename to config/electronBuilder.config.js index 219da2703c62..e4ed685f65fe 100644 --- a/config/electronBuilder.config.ts +++ b/config/electronBuilder.config.js @@ -2,25 +2,25 @@ const {version} = require('../package.json'); const pullRequestNumber = process.env.PULL_REQUEST_NUMBER; -const s3Bucket: Record = { +const s3Bucket = { production: 'expensify-cash', staging: 'staging-expensify-cash', adhoc: 'ad-hoc-expensify-cash', }; -const s3Path: Record = { +const s3Path = { production: '/', staging: '/', adhoc: process.env.PULL_REQUEST_NUMBER ? `/desktop/${pullRequestNumber}/` : '/', }; -const macIcon: Record = { +const macIcon = { production: './desktop/icon.png', staging: './desktop/icon-stg.png', adhoc: './desktop/icon-adhoc.png', }; -const isCorrectElectronEnv: boolean = ['production', 'staging', 'adhoc'].includes(process.env.ELECTRON_ENV ?? ''); +const isCorrectElectronEnv = ['production', 'staging', 'adhoc'].includes(process.env.ELECTRON_ENV); if (!isCorrectElectronEnv) { throw new Error('Invalid ELECTRON_ENV!'); @@ -37,7 +37,7 @@ module.exports = { }, mac: { category: 'public.app-category.finance', - icon: process.env.ELECTRON_ENV ? macIcon[process.env.ELECTRON_ENV] : undefined, + icon: macIcon[process.env.ELECTRON_ENV], hardenedRuntime: true, entitlements: 'desktop/entitlements.mac.plist', entitlementsInherit: 'desktop/entitlements.mac.plist', @@ -54,9 +54,9 @@ module.exports = { publish: [ { provider: 's3', - bucket: process.env.ELECTRON_ENV ? s3Bucket[process.env.ELECTRON_ENV] : undefined, + bucket: s3Bucket[process.env.ELECTRON_ENV], channel: 'latest', - path: process.env.ELECTRON_ENV ? s3Path[process.env.ELECTRON_ENV] : undefined, + path: s3Path[process.env.ELECTRON_ENV], }, ], files: ['dist', '!dist/www/{.well-known,favicon*}'], From 21721cf6a22a59c6033d1ecc3957c709d89446c0 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Mar 2024 09:46:59 +0100 Subject: [PATCH 23/40] convert CustomVersionFilePlugin to esmodule --- config/webpack/CustomVersionFilePlugin.ts | 2 +- config/webpack/webpack.common.ts | 2 +- config/webpack/webpack.dev.ts | 2 +- package-lock.json | 147 ---------------------- scripts/build-desktop.sh | 3 +- 5 files changed, 5 insertions(+), 151 deletions(-) diff --git a/config/webpack/CustomVersionFilePlugin.ts b/config/webpack/CustomVersionFilePlugin.ts index fc19d8543599..b1f5a539f650 100644 --- a/config/webpack/CustomVersionFilePlugin.ts +++ b/config/webpack/CustomVersionFilePlugin.ts @@ -22,4 +22,4 @@ class CustomVersionFilePlugin { } } -export = CustomVersionFilePlugin; +export default CustomVersionFilePlugin; diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index e94a74808734..f371d17b8e09 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ import type {Configuration} from 'webpack'; +import CustomVersionFilePlugin from './CustomVersionFilePlugin'; const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); @@ -10,7 +11,6 @@ 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'); const includeModules = [ 'react-native-animatable', diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 654ee20f2a6e..56dc735edd86 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -1,9 +1,9 @@ /* 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'); +import getCommonConfig from './webpack.common'; const {TimeAnalyticsPlugin} = TimeAnalyticsWebpackPlugin; const path = require('path'); diff --git a/package-lock.json b/package-lock.json index 4efb67c540fb..afab9260f32f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8047,153 +8047,6 @@ "integrity": "sha512-C9Br1BQqm6io6lvYHptlLcOHbzlaqxp9tS35P8Qj3pdiiYRTzU3KPvZ61rQ+ZnZ4FOQ6MwPsKsmB8+6WHkAY6Q==", "license": "MIT" }, - "node_modules/@onfido/active-video-capture": { - "version": "0.28.6", - "resolved": "https://registry.npmjs.org/@onfido/active-video-capture/-/active-video-capture-0.28.6.tgz", - "integrity": "sha512-RFUeKaOSjj/amPp6VzhVkq/7kIkutEnnttT9n5KDeD3Vx8a09KD3a/xvxdQppveHlDAYsdBP6LrJwSSpjXiprg==", - "dependencies": { - "@mediapipe/face_detection": "^0.4.1646425229", - "@mediapipe/face_mesh": "^0.4.1633559619", - "@onfido/castor": "^2.2.2", - "@onfido/castor-icons": "^2.12.0", - "@tensorflow-models/face-detection": "^1.0.1", - "@tensorflow-models/face-landmarks-detection": "^1.0.2", - "@tensorflow/tfjs-backend-wasm": "3.20.0", - "@tensorflow/tfjs-backend-webgl": "3.20.0", - "@tensorflow/tfjs-converter": "3.20.0", - "@tensorflow/tfjs-core": "3.20.0", - "preact": "10.11.3", - "react-webcam": "^7.2.0" - }, - "engines": { - "node": ">=16" - } - }, - "node_modules/@onfido/active-video-capture/node_modules/@tensorflow-models/face-landmarks-detection": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@tensorflow-models/face-landmarks-detection/-/face-landmarks-detection-1.0.5.tgz", - "integrity": "sha512-54XJPi8g29/MknJ33ZBrLsEzr9kw/dJtrJMMD3xrCrnRlfFQPIKQ5PI2Wml55Fz2p4U2hemzBB0/H+S94JddIQ==", - "dependencies": { - "rimraf": "^3.0.2" - }, - "peerDependencies": { - "@mediapipe/face_mesh": "~0.4.0", - "@tensorflow-models/face-detection": "~1.0.0", - "@tensorflow/tfjs-backend-webgl": "^3.12.0", - "@tensorflow/tfjs-converter": "^3.12.0", - "@tensorflow/tfjs-core": "^3.12.0" - } - }, - "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-backend-cpu": { - "version": "3.20.0", - "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-3.20.0.tgz", - "integrity": "sha512-gf075YaBLwSAAiUwa0D4GvYyUBhbJ1BVSivUNQmUfGKvIr2lIhF0qstBr033YTc3lhkbFSHEEPAHh/EfpqyjXQ==", - "dependencies": { - "@types/seedrandom": "^2.4.28", - "seedrandom": "^3.0.5" - }, - "engines": { - "yarn": ">= 1.3.2" - }, - "peerDependencies": { - "@tensorflow/tfjs-core": "3.20.0" - } - }, - "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-backend-wasm": { - "version": "3.20.0", - "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-wasm/-/tfjs-backend-wasm-3.20.0.tgz", - "integrity": "sha512-k+sDcrcPtGToLjKRffgtSqlcN4MC6g4hXWRarZfgvvyvFqpxVfVqrGYHGTirXdN47sKYhmcTSMvbM2quGaaQnA==", - "dependencies": { - "@tensorflow/tfjs-backend-cpu": "3.20.0", - "@types/emscripten": "~0.0.34" - }, - "peerDependencies": { - "@tensorflow/tfjs-core": "3.20.0" - } - }, - "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-backend-webgl": { - "version": "3.20.0", - "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-3.20.0.tgz", - "integrity": "sha512-SucbyQ08re3HvRgVfarRtKFIjNM4JvIAzcXmw4vaE/HrCtPEePkGO1VrmfQoN470EdUmGiwgqAjoyBvM2VOlVg==", - "dependencies": { - "@tensorflow/tfjs-backend-cpu": "3.20.0", - "@types/offscreencanvas": "~2019.3.0", - "@types/seedrandom": "^2.4.28", - "@types/webgl-ext": "0.0.30", - "@types/webgl2": "0.0.6", - "seedrandom": "^3.0.5" - }, - "engines": { - "yarn": ">= 1.3.2" - }, - "peerDependencies": { - "@tensorflow/tfjs-core": "3.20.0" - } - }, - "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-converter": { - "version": "3.20.0", - "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-3.20.0.tgz", - "integrity": "sha512-8EIYqtQwvSYw9GFNW2OFU8Qnl/FQF/kKAsQJoORYaZ419WJo+FIZWbAWDtCpJSAgkgoHH1jYWgV9H313cVmqxg==", - "peerDependencies": { - "@tensorflow/tfjs-core": "3.20.0" - } - }, - "node_modules/@onfido/active-video-capture/node_modules/@tensorflow/tfjs-core": { - "version": "3.20.0", - "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-3.20.0.tgz", - "integrity": "sha512-L16JyVA4a8jFJXFgB9/oYZxcGq/GfLypt5dMVTyedznARZZ9SiY/UMMbo3IKl9ZylG1dOVVTpjzV3EvBYfeJXw==", - "dependencies": { - "@types/long": "^4.0.1", - "@types/offscreencanvas": "~2019.3.0", - "@types/seedrandom": "^2.4.28", - "@types/webgl-ext": "0.0.30", - "@webgpu/types": "0.1.16", - "long": "4.0.0", - "node-fetch": "~2.6.1", - "seedrandom": "^3.0.5" - }, - "engines": { - "yarn": ">= 1.3.2" - } - }, - "node_modules/@onfido/active-video-capture/node_modules/@webgpu/types": { - "version": "0.1.16", - "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.16.tgz", - "integrity": "sha512-9E61voMP4+Rze02jlTXud++Htpjyyk8vw5Hyw9FGRrmhHQg2GqbuOfwf5Klrb8vTxc2XWI3EfO7RUHMpxTj26A==" - }, - "node_modules/@onfido/castor": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@onfido/castor/-/castor-2.3.0.tgz", - "integrity": "sha512-FkydkjedS6b2g3SqgZMYnVRZvUs/MkaEuXXJWG9+LNc7DMFT1K8smOnNuHzkiM3cJhXL6yAADdKE0mg+ZIrucQ==", - "dependencies": { - "@onfido/castor-tokens": "^1.0.0-beta.6", - "csstype": "^3.1.1" - }, - "peerDependencies": { - "@onfido/castor-icons": ">=1.0.0" - } - }, - "node_modules/@onfido/castor-icons": { - "version": "2.22.0", - "resolved": "https://registry.npmjs.org/@onfido/castor-icons/-/castor-icons-2.22.0.tgz", - "integrity": "sha512-7OnCvu5xqVWcBLqovZyb99NP0oHw7sjkVYXZhi438i0U6Pgecrhu/14Gc/IN/kvgDxWj9qmiYdd0qdjNaVckrQ==", - "peerDependencies": { - "react": ">=17 || ^16.14 || ^15.7 || ^0.14.10" - } - }, - "node_modules/@onfido/castor-tokens": { - "version": "1.0.0-beta.6", - "resolved": "https://registry.npmjs.org/@onfido/castor-tokens/-/castor-tokens-1.0.0-beta.6.tgz", - "integrity": "sha512-MfwuSlNdM0Ay0cI3LLyqZGsHW0e1Y1R/0IdQKVU575PdWQx1Q/538aOZMo/a3/oSW0pMEgfOm+mNqPx057cvWA==" - }, - "node_modules/@onfido/opencv": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@onfido/opencv/-/opencv-2.1.1.tgz", - "integrity": "sha512-Bwo0YsZrrdm+p5hpNFZ7yrqNVWJxOUbQW9aWDEUtkDWUL+nX2RHIR6F4lBGVmbqnG24anadS/+nEvy80SwD3tQ==", - "dependencies": { - "mirada": "^0.0.15" - } - }, "node_modules/@onfido/react-native-sdk": { "version": "10.6.0", "resolved": "https://registry.npmjs.org/@onfido/react-native-sdk/-/react-native-sdk-10.6.0.tgz", diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh index 0c8a19c592e6..e4c236979358 100755 --- a/scripts/build-desktop.sh +++ b/scripts/build-desktop.sh @@ -25,4 +25,5 @@ npx webpack --config config/webpack/webpack.desktop.ts --env envFile=$ENV_FILE title "Building Desktop App Archive Using Electron" info "" shift 1 -npx electron-builder --config config/electronBuilder.config.ts --publish always "$@" +# npx electron-builder --config config/electronBuilder.config.js --publish always "$@" +npx electron-builder --config config/electronBuilder.config.js "$@" From ec234b6220e270d010ec99889f8928dc8517330a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Mar 2024 10:28:10 +0100 Subject: [PATCH 24/40] use import instead of require in webpack.dev.ts --- config/webpack/webpack.dev.ts | 8 ++++---- scripts/build-desktop.sh | 3 +-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 56dc735edd86..1350272e3356 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -1,14 +1,14 @@ /* eslint-disable @typescript-eslint/naming-convention */ +import path from 'path'; import type webpack from 'webpack'; +import {DefinePlugin} from 'webpack'; +import {merge} from 'webpack-merge'; import portfinder = require('portfinder'); import TimeAnalyticsWebpackPlugin = require('time-analytics-webpack-plugin'); import getCommonConfig from './webpack.common'; const {TimeAnalyticsPlugin} = TimeAnalyticsWebpackPlugin; -const path = require('path'); -const {DefinePlugin} = require('webpack'); -const {merge} = require('webpack-merge'); const BASE_PORT = 8082; @@ -82,7 +82,7 @@ const getConfig = (env: EnvFile = {}): Promise => /([\\/]node_modules[\\/](?!react-native-onyx))/, ], }, - }); + } as webpack.Configuration); return TimeAnalyticsPlugin.wrap(config); }); diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh index e4c236979358..eebf86e69ceb 100755 --- a/scripts/build-desktop.sh +++ b/scripts/build-desktop.sh @@ -25,5 +25,4 @@ npx webpack --config config/webpack/webpack.desktop.ts --env envFile=$ENV_FILE title "Building Desktop App Archive Using Electron" info "" shift 1 -# npx electron-builder --config config/electronBuilder.config.js --publish always "$@" -npx electron-builder --config config/electronBuilder.config.js "$@" +npx electron-builder --config config/electronBuilder.config.js --publish always "$@" From a3e32ed288765b6acfd4b5f0aa33aa926349c5c8 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Mar 2024 10:43:25 +0100 Subject: [PATCH 25/40] use import instead of require in CustomVersionFilePlugin --- config/webpack/CustomVersionFilePlugin.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/config/webpack/CustomVersionFilePlugin.ts b/config/webpack/CustomVersionFilePlugin.ts index b1f5a539f650..a8d9d7464046 100644 --- a/config/webpack/CustomVersionFilePlugin.ts +++ b/config/webpack/CustomVersionFilePlugin.ts @@ -1,9 +1,7 @@ -import type * as FS from 'fs'; +import fs from 'fs'; +import path from 'path'; import type {Compiler} from 'webpack'; - -const fs = require('fs') as typeof FS; -const path = require('path'); -const APP_VERSION = require('../../package.json').version; +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' From 73406a639d185518dd58c41b6951cce3427931bf Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Mar 2024 11:04:18 +0100 Subject: [PATCH 26/40] replace require with import in webpack.common.ts, bump version of clean-webpack-plugin --- config/webpack/webpack.common.ts | 19 +++++++++---------- package-lock.json | 28 ++++++---------------------- package.json | 2 +- 3 files changed, 16 insertions(+), 33 deletions(-) diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index f371d17b8e09..135a903a5566 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -1,17 +1,16 @@ /* eslint-disable @typescript-eslint/naming-convention */ +import PreloadWebpackPlugin from '@vue/preload-webpack-plugin'; +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 {CleanWebpackPlugin} = require('clean-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 includeModules = [ 'react-native-animatable', 'react-native-reanimated', diff --git a/package-lock.json b/package-lock.json index afab9260f32f..ae3e7fd90800 100644 --- a/package-lock.json +++ b/package-lock.json @@ -200,7 +200,7 @@ "babel-plugin-react-native-web": "^0.18.7", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-remove-console": "^6.9.4", - "clean-webpack-plugin": "^3.0.0", + "clean-webpack-plugin": "^4.0.0", "concurrently": "^5.3.0", "copy-webpack-plugin": "^10.1.0", "css-loader": "^6.7.2", @@ -25718,34 +25718,18 @@ } }, "node_modules/clean-webpack-plugin": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz", - "integrity": "sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz", + "integrity": "sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==", "dev": true, - "license": "MIT", "dependencies": { - "@types/webpack": "^4.4.31", "del": "^4.1.1" }, "engines": { - "node": ">=8.9.0" + "node": ">=10.0.0" }, "peerDependencies": { - "webpack": "*" - } - }, - "node_modules/clean-webpack-plugin/node_modules/@types/webpack": { - "version": "4.41.38", - "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.38.tgz", - "integrity": "sha512-oOW7E931XJU1mVfCnxCVgv8GLFL768pDO5u2Gzk82i8yTIgX6i7cntyZOkZYb/JtYM8252SN9bQp9tgkVDSsRw==", - "dev": true, - "dependencies": { - "@types/node": "*", - "@types/tapable": "^1", - "@types/uglify-js": "*", - "@types/webpack-sources": "*", - "anymatch": "^3.0.0", - "source-map": "^0.6.0" + "webpack": ">=4.0.0 <6.0.0" } }, "node_modules/cli-boxes": { diff --git a/package.json b/package.json index 364d087e230e..bd50eb12ef0b 100644 --- a/package.json +++ b/package.json @@ -251,7 +251,7 @@ "babel-plugin-react-native-web": "^0.18.7", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-remove-console": "^6.9.4", - "clean-webpack-plugin": "^3.0.0", + "clean-webpack-plugin": "^4.0.0", "concurrently": "^5.3.0", "copy-webpack-plugin": "^10.1.0", "css-loader": "^6.7.2", From d11e749751fa47b709bb1c14e814e6189ed6013a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Mar 2024 12:04:21 +0100 Subject: [PATCH 27/40] replace require with import in webpack.desktop.ts --- config/webpack/webpack.common.ts | 3 ++- config/webpack/webpack.desktop.ts | 9 ++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index 135a903a5566..66f1a52c846f 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -1,5 +1,4 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import PreloadWebpackPlugin from '@vue/preload-webpack-plugin'; import {CleanWebpackPlugin} from 'clean-webpack-plugin'; import CopyPlugin from 'copy-webpack-plugin'; import dotenv from 'dotenv'; @@ -11,6 +10,8 @@ import {DefinePlugin, EnvironmentPlugin, IgnorePlugin, ProvidePlugin} from 'webp import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'; import CustomVersionFilePlugin from './CustomVersionFilePlugin'; +const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin'); + const includeModules = [ 'react-native-animatable', 'react-native-reanimated', diff --git a/config/webpack/webpack.desktop.ts b/config/webpack/webpack.desktop.ts index 9c28afd614d5..0a81b27917ba 100644 --- a/config/webpack/webpack.desktop.ts +++ b/config/webpack/webpack.desktop.ts @@ -1,12 +1,11 @@ /* 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'; -const path = require('path'); -const webpack = require('webpack'); - -const desktopDependencies = require('../../desktop/package.json').dependencies; - /** * Desktop creates 2 configurations in parallel * 1. electron-main - the core that serves the app content From e09aadf9df0ab72b8c13cce019dbefe2fb55e88f Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Mar 2024 12:59:46 +0100 Subject: [PATCH 28/40] replace require with import in webpack.dev.ts --- config/webpack/webpack.dev.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 1350272e3356..a4e88b0d3cf8 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -1,15 +1,12 @@ /* 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 portfinder = require('portfinder'); -import TimeAnalyticsWebpackPlugin = require('time-analytics-webpack-plugin'); import getCommonConfig from './webpack.common'; -const {TimeAnalyticsPlugin} = TimeAnalyticsWebpackPlugin; - const BASE_PORT = 8082; type EnvFile = Partial<{ From acedc7fe5d73bb6b44c13162182e4032d6f5c211 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Mar 2024 13:02:16 +0100 Subject: [PATCH 29/40] update file extension in readme --- desktop/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/desktop/README.md b/desktop/README.md index bd68ec571659..24970f95414a 100644 --- a/desktop/README.md +++ b/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.ts to replace the `publish` value with the following: +2. Update electronBuilder.config.js to replace the `publish` value with the following: ``` publish: [{ provider: 's3', From b2fb18fc6125dbad690b1e3f0fc2b006270b9d32 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 15 Mar 2024 12:39:19 +0100 Subject: [PATCH 30/40] remove esModuleInterop from tsconfig --- tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 59f095d3f752..30708f63d12b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,7 +31,6 @@ "moduleResolution": "node", "resolveJsonModule": true, "allowSyntheticDefaultImports": true, - "esModuleInterop": true, "skipLibCheck": true, "incremental": true, "baseUrl": ".", From b05ea1a3dfc2331045af180203354f7beb6972e4 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 19 Mar 2024 11:50:37 +0100 Subject: [PATCH 31/40] apply minor improvements --- config/webpack/webpack.common.ts | 1 + config/webpack/webpack.dev.ts | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index 66f1a52c846f..61ef611ac986 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -10,6 +10,7 @@ import {DefinePlugin, EnvironmentPlugin, IgnorePlugin, ProvidePlugin} from 'webp import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'; import CustomVersionFilePlugin from './CustomVersionFilePlugin'; +// 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 includeModules = [ diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index a4e88b0d3cf8..5ee714e25ad0 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -9,10 +9,10 @@ import getCommonConfig from './webpack.common'; const BASE_PORT = 8082; -type EnvFile = Partial<{ - envFile: string; - platform: 'web' | 'desktop'; -}>; +type EnvFile = { + envFile?: string; + platform?: 'web' | 'desktop'; +}; /** * Configuration for the local dev server From 55eb2d38ab67f096eceb989b183154972f986adc Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 20 Mar 2024 14:12:07 +0100 Subject: [PATCH 32/40] apply suggested changes --- config/webpack/types.ts | 11 +++++++++++ config/webpack/webpack.common.ts | 4 ++-- config/webpack/webpack.desktop.ts | 13 ++++++------- config/webpack/webpack.dev.ts | 11 ++++------- contributingGuides/APPLE_GOOGLE_SIGNIN.md | 6 +++--- scripts/build-desktop.sh | 3 ++- 6 files changed, 28 insertions(+), 20 deletions(-) create mode 100644 config/webpack/types.ts diff --git a/config/webpack/types.ts b/config/webpack/types.ts new file mode 100644 index 000000000000..bf20fb17d2b7 --- /dev/null +++ b/config/webpack/types.ts @@ -0,0 +1,11 @@ +import type {Configuration} from 'webpack'; + +type EnvFile = { + envFile?: string; + platform?: 'web' | 'desktop'; +}; + +type WebpackConfig = Configuration; + +// eslint-disable-next-line import/prefer-default-export +export type {EnvFile, WebpackConfig}; diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index 61ef611ac986..634392aa1fcc 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -5,10 +5,10 @@ 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 {WebpackConfig} 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'); @@ -47,7 +47,7 @@ function mapEnvToLogoSuffix(envFile: string): string { /** * Get a production grade config for web or desktop */ -const getCommonConfig = ({envFile = '.env', platform = 'web'}): Configuration => ({ +const getCommonConfig = ({envFile = '.env', platform = 'web'}): WebpackConfig => ({ mode: 'production', devtool: 'source-map', entry: { diff --git a/config/webpack/webpack.desktop.ts b/config/webpack/webpack.desktop.ts index 544809c5f0fb..a9e3a40d8c16 100644 --- a/config/webpack/webpack.desktop.ts +++ b/config/webpack/webpack.desktop.ts @@ -1,8 +1,10 @@ /* eslint-disable @typescript-eslint/naming-convention */ 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 +// 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 {WebpackConfig} from './types'; import getCommonConfig from './webpack.common'; import type {EnvFile} from './webpack.dev'; @@ -12,20 +14,17 @@ import type {EnvFile} from './webpack.dev'; * 2. web - the app content that would be rendered in electron * Everything is placed in desktop/dist and ready for packaging */ -const getConfig = (env: EnvFile = {}) => { +const getConfig = (env: EnvFile = {}): WebpackConfig[] => { const rendererConfig = getCommonConfig({...env, platform: 'desktop'}); const outputPath = path.resolve(__dirname, '../../desktop/dist'); rendererConfig.name = 'renderer'; - if (rendererConfig.output) { - 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', diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 5ee714e25ad0..182c8393a212 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -4,24 +4,21 @@ import portfinder from 'portfinder'; import {TimeAnalyticsPlugin} from 'time-analytics-webpack-plugin'; import type webpack from 'webpack'; import {DefinePlugin} from 'webpack'; +import type * as webpackDevServer from 'webpack-dev-server'; import {merge} from 'webpack-merge'; +import type {EnvFile, WebpackConfig} from './types'; import getCommonConfig from './webpack.common'; const BASE_PORT = 8082; -type EnvFile = { - envFile?: string; - platform?: 'web' | 'desktop'; -}; - /** * Configuration for the local dev server */ -const getConfig = (env: EnvFile = {}): Promise => +const getConfig = (env: EnvFile = {}): Promise => 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 = process.env.USE_WEB_PROXY === 'false' ? {} : { diff --git a/contributingGuides/APPLE_GOOGLE_SIGNIN.md b/contributingGuides/APPLE_GOOGLE_SIGNIN.md index e36d96d91160..e6b999b7cb01 100644 --- a/contributingGuides/APPLE_GOOGLE_SIGNIN.md +++ b/contributingGuides/APPLE_GOOGLE_SIGNIN.md @@ -243,12 +243,12 @@ Here's how you can re-enable the SSO buttons in development mode: ...proxySettings, historyApiFallback: true, diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh index eebf86e69ceb..e4c236979358 100755 --- a/scripts/build-desktop.sh +++ b/scripts/build-desktop.sh @@ -25,4 +25,5 @@ npx webpack --config config/webpack/webpack.desktop.ts --env envFile=$ENV_FILE title "Building Desktop App Archive Using Electron" info "" shift 1 -npx electron-builder --config config/electronBuilder.config.js --publish always "$@" +# npx electron-builder --config config/electronBuilder.config.js --publish always "$@" +npx electron-builder --config config/electronBuilder.config.js "$@" From bbe50b6b8c9c4f9705de84a01729b81305463294 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 20 Mar 2024 14:24:17 +0100 Subject: [PATCH 33/40] update require to suit ESM in webpack.config.js --- .storybook/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 07b57c687daf..231042ec66e5 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -17,7 +17,7 @@ switch (process.env.ENV) { } const env = dotenv.config({path: path.resolve(__dirname, `../${envFile}`)}); -const custom = require('../config/webpack/webpack.common')({ +const custom = require('../config/webpack/webpack.common').default({ envFile, }); From e059dd1d84f621aac923a5e8329e5490de6dff99 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 21 Mar 2024 08:52:15 +0100 Subject: [PATCH 34/40] apply suggested changes --- config/webpack/CustomVersionFilePlugin.ts | 5 ++++- config/webpack/types.ts | 6 +----- config/webpack/webpack.common.ts | 4 ++-- config/webpack/webpack.desktop.ts | 5 ++--- config/webpack/webpack.dev.ts | 13 ++++++------- scripts/build-desktop.sh | 3 +-- 6 files changed, 16 insertions(+), 20 deletions(-) diff --git a/config/webpack/CustomVersionFilePlugin.ts b/config/webpack/CustomVersionFilePlugin.ts index a8d9d7464046..aa368c1b9d95 100644 --- a/config/webpack/CustomVersionFilePlugin.ts +++ b/config/webpack/CustomVersionFilePlugin.ts @@ -12,9 +12,12 @@ class CustomVersionFilePlugin { const versionPath = path.join(__dirname, '/../../dist/version.json'); fs.mkdir(path.dirname(versionPath), {recursive: true}, (dirErr) => { if (dirErr) { + console.error('Error creating version.json directory', dirErr); return; } - fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), {encoding: 'utf8'}, () => {}); + fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), {encoding: 'utf8'}, (err) => { + console.error('Error writing to version.json', err); + }); }); }); } diff --git a/config/webpack/types.ts b/config/webpack/types.ts index bf20fb17d2b7..37a6a1964ddf 100644 --- a/config/webpack/types.ts +++ b/config/webpack/types.ts @@ -1,11 +1,7 @@ -import type {Configuration} from 'webpack'; - type EnvFile = { envFile?: string; platform?: 'web' | 'desktop'; }; -type WebpackConfig = Configuration; - // eslint-disable-next-line import/prefer-default-export -export type {EnvFile, WebpackConfig}; +export type {EnvFile}; diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index 634392aa1fcc..61ef611ac986 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -5,10 +5,10 @@ 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 {WebpackConfig} 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'); @@ -47,7 +47,7 @@ function mapEnvToLogoSuffix(envFile: string): string { /** * Get a production grade config for web or desktop */ -const getCommonConfig = ({envFile = '.env', platform = 'web'}): WebpackConfig => ({ +const getCommonConfig = ({envFile = '.env', platform = 'web'}): Configuration => ({ mode: 'production', devtool: 'source-map', entry: { diff --git a/config/webpack/webpack.desktop.ts b/config/webpack/webpack.desktop.ts index a9e3a40d8c16..0ea1299ad5fb 100644 --- a/config/webpack/webpack.desktop.ts +++ b/config/webpack/webpack.desktop.ts @@ -4,9 +4,8 @@ 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 {WebpackConfig} from './types'; +import type {EnvFile} from './types'; import getCommonConfig from './webpack.common'; -import type {EnvFile} from './webpack.dev'; /** * Desktop creates 2 configurations in parallel @@ -14,7 +13,7 @@ import type {EnvFile} from './webpack.dev'; * 2. web - the app content that would be rendered in electron * Everything is placed in desktop/dist and ready for packaging */ -const getConfig = (env: EnvFile = {}): WebpackConfig[] => { +const getConfig = (env: EnvFile = {}): Configuration[] => { const rendererConfig = getCommonConfig({...env, platform: 'desktop'}); const outputPath = path.resolve(__dirname, '../../desktop/dist'); diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 182c8393a212..c79112aa8299 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -2,11 +2,11 @@ import path from 'path'; import portfinder from 'portfinder'; import {TimeAnalyticsPlugin} from 'time-analytics-webpack-plugin'; -import type webpack from 'webpack'; +import type {Configuration} from 'webpack'; import {DefinePlugin} from 'webpack'; -import type * as webpackDevServer from 'webpack-dev-server'; +import type {Configuration as DevServerConfiguration} from 'webpack-dev-server'; import {merge} from 'webpack-merge'; -import type {EnvFile, WebpackConfig} from './types'; +import type {EnvFile} from './types'; import getCommonConfig from './webpack.common'; const BASE_PORT = 8082; @@ -14,11 +14,11 @@ const BASE_PORT = 8082; /** * Configuration for the local dev server */ -const getConfig = (env: EnvFile = {}): Promise => +const getConfig = (env: EnvFile = {}): Promise => 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: Pick = + const proxySettings: Pick = process.env.USE_WEB_PROXY === 'false' ? {} : { @@ -76,10 +76,9 @@ const getConfig = (env: EnvFile = {}): Promise => /([\\/]node_modules[\\/](?!react-native-onyx))/, ], }, - } as webpack.Configuration); + }); return TimeAnalyticsPlugin.wrap(config); }); export default getConfig; -export type {EnvFile}; diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh index e4c236979358..eebf86e69ceb 100755 --- a/scripts/build-desktop.sh +++ b/scripts/build-desktop.sh @@ -25,5 +25,4 @@ npx webpack --config config/webpack/webpack.desktop.ts --env envFile=$ENV_FILE title "Building Desktop App Archive Using Electron" info "" shift 1 -# npx electron-builder --config config/electronBuilder.config.js --publish always "$@" -npx electron-builder --config config/electronBuilder.config.js "$@" +npx electron-builder --config config/electronBuilder.config.js --publish always "$@" From b44cd0f39e05be944459d5f0ff621bd92c786331 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 25 Mar 2024 08:30:52 +0100 Subject: [PATCH 35/40] apply suggested changes; --- config/webpack/types.ts | 5 ++--- config/webpack/webpack.common.ts | 3 ++- config/webpack/webpack.desktop.ts | 4 ++-- config/webpack/webpack.dev.ts | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/config/webpack/types.ts b/config/webpack/types.ts index 37a6a1964ddf..e73e55b3d1e8 100644 --- a/config/webpack/types.ts +++ b/config/webpack/types.ts @@ -1,7 +1,6 @@ -type EnvFile = { +type Env = { envFile?: string; platform?: 'web' | 'desktop'; }; -// eslint-disable-next-line import/prefer-default-export -export type {EnvFile}; +export default Env; diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index 61ef611ac986..834087ac0bf1 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -9,6 +9,7 @@ import type {Configuration} from 'webpack'; import {DefinePlugin, EnvironmentPlugin, IgnorePlugin, ProvidePlugin} from 'webpack'; import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'; import CustomVersionFilePlugin from './CustomVersionFilePlugin'; +import type Env 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'); @@ -47,7 +48,7 @@ function mapEnvToLogoSuffix(envFile: string): string { /** * Get a production grade config for web or desktop */ -const getCommonConfig = ({envFile = '.env', platform = 'web'}): Configuration => ({ +const getCommonConfig = ({envFile = '.env', platform = 'web'}: Env): Configuration => ({ mode: 'production', devtool: 'source-map', entry: { diff --git a/config/webpack/webpack.desktop.ts b/config/webpack/webpack.desktop.ts index 0ea1299ad5fb..60f96a924c7d 100644 --- a/config/webpack/webpack.desktop.ts +++ b/config/webpack/webpack.desktop.ts @@ -4,7 +4,7 @@ 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 {EnvFile} from './types'; +import type Env from './types'; import getCommonConfig from './webpack.common'; /** @@ -13,7 +13,7 @@ import getCommonConfig from './webpack.common'; * 2. web - the app content that would be rendered in electron * Everything is placed in desktop/dist and ready for packaging */ -const getConfig = (env: EnvFile = {}): Configuration[] => { +const getConfig = (env: Env): Configuration[] => { const rendererConfig = getCommonConfig({...env, platform: 'desktop'}); const outputPath = path.resolve(__dirname, '../../desktop/dist'); diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index c79112aa8299..6a4cc9009352 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -6,7 +6,7 @@ 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 {EnvFile} from './types'; +import type Env from './types'; import getCommonConfig from './webpack.common'; const BASE_PORT = 8082; @@ -14,7 +14,7 @@ const BASE_PORT = 8082; /** * Configuration for the local dev server */ -const getConfig = (env: EnvFile = {}): Promise => +const getConfig = (env: Env): Promise => 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 From 6ec96ddb8d50e296def9dd1eba63e54228d43483 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 25 Mar 2024 16:20:23 +0100 Subject: [PATCH 36/40] apply suggested changes to CustomVersionFilePlugin.ts --- config/webpack/CustomVersionFilePlugin.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/config/webpack/CustomVersionFilePlugin.ts b/config/webpack/CustomVersionFilePlugin.ts index aa368c1b9d95..a5b02518da4b 100644 --- a/config/webpack/CustomVersionFilePlugin.ts +++ b/config/webpack/CustomVersionFilePlugin.ts @@ -12,11 +12,13 @@ class CustomVersionFilePlugin { const versionPath = path.join(__dirname, '/../../dist/version.json'); fs.mkdir(path.dirname(versionPath), {recursive: true}, (dirErr) => { if (dirErr) { - console.error('Error creating version.json directory', dirErr); - return; + throw dirErr; } fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), {encoding: 'utf8'}, (err) => { - console.error('Error writing to version.json', err); + if (!err) { + return; + } + throw err; }); }); }); From d38ea29bb857eb668e7aca4659efc58bfd36fd3f Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 26 Mar 2024 09:49:32 +0100 Subject: [PATCH 37/40] apply suggested changes --- config/webpack/CustomVersionFilePlugin.ts | 12 ++++++------ config/webpack/types.ts | 6 +++--- config/webpack/webpack.common.ts | 16 ++++++++-------- config/webpack/webpack.desktop.ts | 7 ++++--- config/webpack/webpack.dev.ts | 10 +++++++--- package.json | 8 ++++---- scripts/build-desktop.sh | 2 +- 7 files changed, 33 insertions(+), 28 deletions(-) diff --git a/config/webpack/CustomVersionFilePlugin.ts b/config/webpack/CustomVersionFilePlugin.ts index a5b02518da4b..96ab8e61e480 100644 --- a/config/webpack/CustomVersionFilePlugin.ts +++ b/config/webpack/CustomVersionFilePlugin.ts @@ -10,15 +10,15 @@ 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) { - throw dirErr; + fs.mkdir(path.dirname(versionPath), {recursive: true}, (directoryError) => { + if (directoryError) { + throw directoryError; } - fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), {encoding: 'utf8'}, (err) => { - if (!err) { + fs.writeFile(versionPath, JSON.stringify({version: APP_VERSION}), {encoding: 'utf8'}, (error) => { + if (!error) { return; } - throw err; + throw error; }); }); }); diff --git a/config/webpack/types.ts b/config/webpack/types.ts index e73e55b3d1e8..45a81feb9bff 100644 --- a/config/webpack/types.ts +++ b/config/webpack/types.ts @@ -1,6 +1,6 @@ -type Env = { - envFile?: string; +type Environment = { + file?: string; platform?: 'web' | 'desktop'; }; -export default Env; +export default Environment; diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index 834087ac0bf1..690eb99af312 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -9,7 +9,7 @@ import type {Configuration} from 'webpack'; import {DefinePlugin, EnvironmentPlugin, IgnorePlugin, ProvidePlugin} from 'webpack'; import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'; import CustomVersionFilePlugin from './CustomVersionFilePlugin'; -import type Env from './types'; +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'); @@ -48,7 +48,7 @@ function mapEnvToLogoSuffix(envFile: string): string { /** * Get a production grade config for web or desktop */ -const getCommonConfig = ({envFile = '.env', platform = 'web'}: Env): Configuration => ({ +const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment): Configuration => ({ mode: 'production', devtool: 'source-map', entry: { @@ -69,10 +69,10 @@ const getCommonConfig = ({envFile = '.env', platform = 'web'}: Env): Configurati 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${mapEnvToLogoSuffix(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', @@ -122,12 +122,12 @@ const getCommonConfig = ({envFile = '.env', platform = 'web'}: Env): Configurati ...(platform === 'web' ? [new CustomVersionFilePlugin()] : []), new DefinePlugin({ ...(platform === 'desktop' ? {} : {process: {env: {}}}), - __REACT_WEB_CONFIG__: JSON.stringify(dotenv.config({path: envFile}).parsed), + __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, + __DEV__: /staging|prod|adhoc/.test(file) === false, }), // This allows us to interactively inspect JS bundle contents @@ -276,4 +276,4 @@ const getCommonConfig = ({envFile = '.env', platform = 'web'}: Env): Configurati }, }); -export default getCommonConfig; +export default getCommonConfiguration; diff --git a/config/webpack/webpack.desktop.ts b/config/webpack/webpack.desktop.ts index 60f96a924c7d..fd7b8c16f50c 100644 --- a/config/webpack/webpack.desktop.ts +++ b/config/webpack/webpack.desktop.ts @@ -1,10 +1,9 @@ -/* eslint-disable @typescript-eslint/naming-convention */ 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 Env from './types'; +import type Environment from './types'; import getCommonConfig from './webpack.common'; /** @@ -13,7 +12,7 @@ import getCommonConfig from './webpack.common'; * 2. web - the app content that would be rendered in electron * Everything is placed in desktop/dist and ready for packaging */ -const getConfig = (env: Env): Configuration[] => { +const getConfig = (env: Environment): Configuration[] => { const rendererConfig = getCommonConfig({...env, platform: 'desktop'}); const outputPath = path.resolve(__dirname, '../../desktop/dist'); @@ -44,7 +43,9 @@ const getConfig = (env: Env): Configuration[] => { * 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: { diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 6a4cc9009352..6f07d2391b7e 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import path from 'path'; import portfinder from 'portfinder'; import {TimeAnalyticsPlugin} from 'time-analytics-webpack-plugin'; @@ -6,7 +5,7 @@ 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 Env from './types'; +import type Environment from './types'; import getCommonConfig from './webpack.common'; const BASE_PORT = 8082; @@ -14,7 +13,7 @@ const BASE_PORT = 8082; /** * Configuration for the local dev server */ -const getConfig = (env: Env): Promise => +const getConfig = (env: Environment): Promise => 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 @@ -23,9 +22,13 @@ const getConfig = (env: Env): Promise => ? {} : { 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', }, }; @@ -57,6 +60,7 @@ const getConfig = (env: Env): Promise => }, plugins: [ new DefinePlugin({ + // eslint-disable-next-line @typescript-eslint/naming-convention 'process.env.PORT': port, }), ], diff --git a/package.json b/package.json index df990d72c1cb..f3d062313bf6 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,9 @@ "web": "scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server", "web-proxy": "ts-node web/proxy.ts", "web-server": "webpack-dev-server --open --config config/webpack/webpack.dev.ts", - "build": "webpack --config config/webpack/webpack.common.ts --env envFile=.env.production", - "build-staging": "webpack --config config/webpack/webpack.common.ts --env envFile=.env.staging", - "build-adhoc": "webpack --config config/webpack/webpack.common.ts --env envFile=.env.adhoc", + "build": "webpack --config config/webpack/webpack.common.ts --env file=.env.production", + "build-staging": "webpack --config config/webpack/webpack.common.ts --env file=.env.staging", + "build-adhoc": "webpack --config config/webpack/webpack.common.ts --env file=.env.adhoc", "desktop": "scripts/set-pusher-suffix.sh && ts-node desktop/start.ts", "desktop-build": "scripts/build-desktop.sh production", "desktop-build-staging": "scripts/build-desktop.sh staging", @@ -47,7 +47,7 @@ "storybook-build-staging": "ENV=staging build-storybook -o dist/docs", "gh-actions-build": "./.github/scripts/buildActions.sh", "gh-actions-validate": "./.github/scripts/validateActionsAndWorkflows.sh", - "analyze-packages": "ANALYZE_BUNDLE=true webpack --config config/webpack/webpack.common.ts --env envFile=.env.production", + "analyze-packages": "ANALYZE_BUNDLE=true webpack --config config/webpack/webpack.common.ts --env file=.env.production", "symbolicate:android": "npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map", "symbolicate:ios": "npx metro-symbolicate main.jsbundle.map", "symbolicate-release:ios": "scripts/release-profile.ts --platform=ios", diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh index eebf86e69ceb..43ed481e2dc0 100755 --- a/scripts/build-desktop.sh +++ b/scripts/build-desktop.sh @@ -20,7 +20,7 @@ title "Bundling Desktop js Bundle Using Webpack" info " • ELECTRON_ENV: $ELECTRON_ENV" info " • ENV file: $ENV_FILE" info "" -npx webpack --config config/webpack/webpack.desktop.ts --env envFile=$ENV_FILE +npx webpack --config config/webpack/webpack.desktop.ts --env file=$ENV_FILE title "Building Desktop App Archive Using Electron" info "" From 80796d317678d87185ca5ee53fec8f4260e30ef9 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 27 Mar 2024 10:45:41 +0100 Subject: [PATCH 38/40] apply suggested changes --- config/webpack/webpack.common.ts | 31 +++++++++++++++++++++++-------- config/webpack/webpack.desktop.ts | 6 +++--- config/webpack/webpack.dev.ts | 8 ++++---- 3 files changed, 30 insertions(+), 15 deletions(-) diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index 690eb99af312..b0e301ef3a6c 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import {CleanWebpackPlugin} from 'clean-webpack-plugin'; import CopyPlugin from 'copy-webpack-plugin'; import dotenv from 'dotenv'; @@ -30,19 +29,19 @@ const includeModules = [ 'expo-av', ].join('|'); -const envToLogoSuffixMap: Record = { +const environmentToLogoSuffixMap: Record = { production: '', staging: '-stg', dev: '-dev', adhoc: '-adhoc', }; -function mapEnvToLogoSuffix(envFile: string): string { - 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]; } /** @@ -69,7 +68,7 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment): new HtmlWebpackPlugin({ template: 'web/index.html', filename: 'index.html', - splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(file)}.svg`), 'utf-8'), + splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvironmentToLogoSuffix(file)}.svg`), 'utf-8'), isWeb: platform === 'web', isProduction: file === '.env.production', isStaging: file === '.env.staging', @@ -122,11 +121,13 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment): ...(platform === 'web' ? [new CustomVersionFilePlugin()] : []), new DefinePlugin({ ...(platform === 'desktop' ? {} : {process: {env: {}}}), + // 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 + // eslint-disable-next-line @typescript-eslint/naming-convention __DEV__: /staging|prod|adhoc/.test(file) === false, }), @@ -204,21 +205,34 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment): }, 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'), }, @@ -243,6 +257,7 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment): '.tsx', ], fallback: { + // eslint-disable-next-line @typescript-eslint/naming-convention 'process/browser': require.resolve('process/browser'), crypto: false, }, diff --git a/config/webpack/webpack.desktop.ts b/config/webpack/webpack.desktop.ts index fd7b8c16f50c..be65e001c44a 100644 --- a/config/webpack/webpack.desktop.ts +++ b/config/webpack/webpack.desktop.ts @@ -12,8 +12,8 @@ import getCommonConfig from './webpack.common'; * 2. web - the app content that would be rendered in electron * Everything is placed in desktop/dist and ready for packaging */ -const getConfig = (env: Environment): Configuration[] => { - 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'; @@ -62,4 +62,4 @@ const getConfig = (env: Environment): Configuration[] => { return [mainProcessConfig, rendererConfig]; }; -export default getConfig; +export default getConfiguration; diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 6f07d2391b7e..68c613632f9b 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -13,7 +13,7 @@ const BASE_PORT = 8082; /** * Configuration for the local dev server */ -const getConfig = (env: Environment): Promise => +const getConfiguration = (environment: Environment): Promise => 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 @@ -33,7 +33,7 @@ const getConfig = (env: Environment): Promise => }, }; - const baseConfig = getCommonConfig(env); + const baseConfig = getCommonConfig(environment); const config = merge(baseConfig, { mode: 'development', @@ -66,7 +66,7 @@ const getConfig = (env: Environment): Promise => ], 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 @@ -85,4 +85,4 @@ const getConfig = (env: Environment): Promise => return TimeAnalyticsPlugin.wrap(config); }); -export default getConfig; +export default getConfiguration; From 0756e497b7c8fa8ebfadbbc8cf1bbedcc98b5202 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Mar 2024 09:05:12 +0100 Subject: [PATCH 39/40] apply suggested changes to webpack config files --- config/webpack/webpack.desktop.ts | 4 ++-- config/webpack/webpack.dev.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/config/webpack/webpack.desktop.ts b/config/webpack/webpack.desktop.ts index be65e001c44a..09314a9c30db 100644 --- a/config/webpack/webpack.desktop.ts +++ b/config/webpack/webpack.desktop.ts @@ -4,7 +4,7 @@ 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'; +import getCommonConfiguration from './webpack.common'; /** * Desktop creates 2 configurations in parallel @@ -13,7 +13,7 @@ import getCommonConfig from './webpack.common'; * Everything is placed in desktop/dist and ready for packaging */ const getConfiguration = (environment: Environment): Configuration[] => { - const rendererConfig = getCommonConfig({...environment, platform: 'desktop'}); + const rendererConfig = getCommonConfiguration({...environment, platform: 'desktop'}); const outputPath = path.resolve(__dirname, '../../desktop/dist'); rendererConfig.name = 'renderer'; diff --git a/config/webpack/webpack.dev.ts b/config/webpack/webpack.dev.ts index 68c613632f9b..8f32a2d95c99 100644 --- a/config/webpack/webpack.dev.ts +++ b/config/webpack/webpack.dev.ts @@ -6,7 +6,7 @@ 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'; +import getCommonConfiguration from './webpack.common'; const BASE_PORT = 8082; @@ -33,7 +33,7 @@ const getConfiguration = (environment: Environment): Promise => }, }; - const baseConfig = getCommonConfig(environment); + const baseConfig = getCommonConfiguration(environment); const config = merge(baseConfig, { mode: 'development', From ed108c423eb6ace5920dd1d989667e83a8721cab Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Mar 2024 14:59:00 +0100 Subject: [PATCH 40/40] add additional if statements to webpack.common.ts --- .storybook/webpack.config.ts | 76 ++++++++++++++++++++---------------- 1 file changed, 42 insertions(+), 34 deletions(-) diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts index 2fdae76c1268..3b93756f1df5 100644 --- a/.storybook/webpack.config.ts +++ b/.storybook/webpack.config.ts @@ -31,49 +31,57 @@ switch (process.env.ENV) { } const env = dotenv.config({path: path.resolve(__dirname, `../${envFile}`)}); -const custom: CustomWebpackConfig = require('../config/webpack/webpack.common')({ +const custom: CustomWebpackConfig = require('../config/webpack/webpack.common').default({ envFile, }); const webpackConfig = ({config}: {config: Configuration}) => { - if (config.resolve && config.plugins && config.module) { - config.resolve.alias = { - 'react-native-config': 'react-web-config', - 'react-native$': 'react-native-web', - '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'), - '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'), - ...custom.resolve.alias, - }; + if (!config.resolve) { + config.resolve = {}; + } + if (!config.plugins) { + config.plugins = []; + } + if (!config.module) { + config.module = {}; + } - // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values - const definePluginIndex = config.plugins.findIndex((plugin) => plugin instanceof DefinePlugin); - if (definePluginIndex !== -1 && config.plugins[definePluginIndex] instanceof DefinePlugin) { - const definePlugin = config.plugins[definePluginIndex] as DefinePlugin; - if (definePlugin.definitions) { - definePlugin.definitions.__REACT_WEB_CONFIG__ = JSON.stringify(env); - } - } - config.resolve.extensions = custom.resolve.extensions; + config.resolve.alias = { + 'react-native-config': 'react-web-config', + 'react-native$': 'react-native-web', + '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'), + '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'), + ...custom.resolve.alias, + }; - const babelRulesIndex = custom.module.rules.findIndex((rule) => rule.loader === 'babel-loader'); - const babelRule = custom.module.rules[babelRulesIndex]; - if (babelRule) { - config.module.rules?.push(babelRule); + // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values + const definePluginIndex = config.plugins.findIndex((plugin) => plugin instanceof DefinePlugin); + if (definePluginIndex !== -1 && config.plugins[definePluginIndex] instanceof DefinePlugin) { + const definePlugin = config.plugins[definePluginIndex] as DefinePlugin; + if (definePlugin.definitions) { + definePlugin.definitions.__REACT_WEB_CONFIG__ = JSON.stringify(env); } + } + config.resolve.extensions = custom.resolve.extensions; - const fileLoaderRule = config.module.rules?.find( - (rule): rule is RuleSetRule => - typeof rule !== 'boolean' && typeof rule !== 'string' && typeof rule !== 'number' && !!rule?.test && rule.test instanceof RegExp && rule.test.test('.svg'), - ); - if (fileLoaderRule) { - fileLoaderRule.exclude = /\.svg$/; - } - config.module.rules?.push({ - test: /\.svg$/, - enforce: 'pre', - loader: require.resolve('@svgr/webpack'), - }); + const babelRulesIndex = custom.module.rules.findIndex((rule) => rule.loader === 'babel-loader'); + const babelRule = custom.module.rules[babelRulesIndex]; + if (babelRule) { + config.module.rules?.push(babelRule); + } + + const fileLoaderRule = config.module.rules?.find( + (rule): rule is RuleSetRule => + typeof rule !== 'boolean' && typeof rule !== 'string' && typeof rule !== 'number' && !!rule?.test && rule.test instanceof RegExp && rule.test.test('.svg'), + ); + if (fileLoaderRule) { + fileLoaderRule.exclude = /\.svg$/; } + config.module.rules?.push({ + test: /\.svg$/, + enforce: 'pre', + loader: require.resolve('@svgr/webpack'), + }); return config; };