From f1347b9ef50b332e6ba852a9f36ffa46d32c7f91 Mon Sep 17 00:00:00 2001 From: Jason Wesson Date: Fri, 9 Feb 2024 04:48:17 +0000 Subject: [PATCH] refactor: move webpack config logic to node_modules via patch-package * add JS/JSX compatability to jest and webpack configs --- package-lock.json | 113 ++++++++++++++++++++++ package.json | 1 + patches/@edx+frontend-build+13.0.14.patch | 91 +++++++++++++++++ webpack.dev.config.js | 9 -- webpack.prod.config.js | 19 ---- 5 files changed, 205 insertions(+), 28 deletions(-) create mode 100644 patches/@edx+frontend-build+13.0.14.patch delete mode 100644 webpack.dev.config.js delete mode 100644 webpack.prod.config.js diff --git a/package-lock.json b/package-lock.json index fc31a60a..afb52916 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,6 +47,7 @@ "glob": "7.2.3", "husky": "7.0.4", "jest": "27.5.1", + "patch-package": "8.0.0", "resize-observer-polyfill": "^1.5.1", "rosie": "2.1.1", "sharp": "0.32.6" @@ -6352,6 +6353,12 @@ "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, + "node_modules/@yarnpkg/lockfile": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz", + "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==", + "dev": true + }, "node_modules/abab": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", @@ -10274,6 +10281,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/find-yarn-workspace-root": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz", + "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==", + "dev": true, + "dependencies": { + "micromatch": "^4.0.2" + } + }, "node_modules/flat-cache": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", @@ -14908,6 +14924,15 @@ "node": ">=0.10.0" } }, + "node_modules/klaw-sync": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz", + "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.1.11" + } + }, "node_modules/kleur": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", @@ -16114,6 +16139,94 @@ "node": ">=0.10.0" } }, + "node_modules/patch-package": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz", + "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==", + "dev": true, + "dependencies": { + "@yarnpkg/lockfile": "^1.1.0", + "chalk": "^4.1.2", + "ci-info": "^3.7.0", + "cross-spawn": "^7.0.3", + "find-yarn-workspace-root": "^2.0.0", + "fs-extra": "^9.0.0", + "json-stable-stringify": "^1.0.2", + "klaw-sync": "^6.0.0", + "minimist": "^1.2.6", + "open": "^7.4.2", + "rimraf": "^2.6.3", + "semver": "^7.5.3", + "slash": "^2.0.0", + "tmp": "^0.0.33", + "yaml": "^2.2.2" + }, + "bin": { + "patch-package": "index.js" + }, + "engines": { + "node": ">=14", + "npm": ">5" + } + }, + "node_modules/patch-package/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/patch-package/node_modules/open": { + "version": "7.4.2", + "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz", + "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==", + "dev": true, + "dependencies": { + "is-docker": "^2.0.0", + "is-wsl": "^2.1.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/patch-package/node_modules/semver": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/patch-package/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, + "node_modules/patch-package/node_modules/yaml": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", + "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", + "dev": true, + "engines": { + "node": ">= 14" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", diff --git a/package.json b/package.json index 7fa7b5e6..0d337b88 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "glob": "7.2.3", "husky": "7.0.4", "jest": "27.5.1", + "patch-package": "8.0.0", "resize-observer-polyfill": "^1.5.1", "rosie": "2.1.1", "sharp": "0.32.6" diff --git a/patches/@edx+frontend-build+13.0.14.patch b/patches/@edx+frontend-build+13.0.14.patch new file mode 100644 index 00000000..048ee3f2 --- /dev/null +++ b/patches/@edx+frontend-build+13.0.14.patch @@ -0,0 +1,91 @@ +diff --git a/node_modules/@edx/frontend-build/config/jest.config.js b/node_modules/@edx/frontend-build/config/jest.config.js +index ae08b70..952ccc3 100644 +--- a/node_modules/@edx/frontend-build/config/jest.config.js ++++ b/node_modules/@edx/frontend-build/config/jest.config.js +@@ -3,12 +3,12 @@ const fs = require('fs'); + + const presets = require('../lib/presets'); + +-let envConfigPath = path.resolve(__dirname, './jest/fallback.env.config.js'); +-const appEnvConfigPath = path.resolve(process.cwd(), './env.config.js'); ++const appEnvConfigPathJs = path.resolve(process.cwd(), './env.config.js'); ++const appEnvConfigPathJsx = path.resolve(process.cwd(), './env.config.jsx'); + +-if (fs.existsSync(appEnvConfigPath)) { +- envConfigPath = appEnvConfigPath; +-} ++const envConfigPath = fs.existsSync(appEnvConfigPathJs) ? appEnvConfigPathJs ++ : fs.existsSync(appEnvConfigPathJsx) ? appEnvConfigPathJsx ++ : path.resolve(__dirname, './jest/fallback.env.config.js'); + + module.exports = { + testURL: 'http://localhost/', +diff --git a/node_modules/@edx/frontend-build/config/webpack.dev.config.js b/node_modules/@edx/frontend-build/config/webpack.dev.config.js +index 5ce7716..932a853 100644 +--- a/node_modules/@edx/frontend-build/config/webpack.dev.config.js ++++ b/node_modules/@edx/frontend-build/config/webpack.dev.config.js +@@ -7,6 +7,7 @@ const Dotenv = require('dotenv-webpack'); + const dotenv = require('dotenv'); + const HtmlWebpackPlugin = require('html-webpack-plugin'); + const path = require('path'); ++const fs = require('fs'); + const PostCssAutoprefixerPlugin = require('autoprefixer'); + const PostCssRTLCSS = require('postcss-rtlcss'); + const PostCssCustomMediaCSS = require('postcss-custom-media'); +@@ -17,6 +18,12 @@ const presets = require('../lib/presets'); + const resolvePrivateEnvConfig = require('../lib/resolvePrivateEnvConfig'); + const getLocalAliases = require('./getLocalAliases'); + ++const envConfigPathJs = path.resolve(process.cwd(),'./env.config.js'); ++const envConfigPathJsx = path.resolve(process.cwd(), './env.config.jsx'); ++const envConfig = fs.existsSync(envConfigPathJs) ? require(envConfigPathJs) ++ : fs.existsSync(envConfigPathJsx) ? require(envConfigPathJsx) ++ : {}; ++ + // Add process env vars. Currently used only for setting the + // server port and the publicPath + dotenv.config({ +@@ -174,7 +181,7 @@ module.exports = merge(commonConfig, { + // reloading. + devServer: { + host: '0.0.0.0', +- port: process.env.PORT || 8080, ++ port: envConfig.PORT || process.env.PORT || 8080, + historyApiFallback: { + index: path.join(PUBLIC_PATH, 'index.html'), + disableDotRule: true, +diff --git a/node_modules/@edx/frontend-build/config/webpack.prod.config.js b/node_modules/@edx/frontend-build/config/webpack.prod.config.js +index 2879dd9..64c2e7b 100644 +--- a/node_modules/@edx/frontend-build/config/webpack.prod.config.js ++++ b/node_modules/@edx/frontend-build/config/webpack.prod.config.js +@@ -12,6 +12,7 @@ const NewRelicSourceMapPlugin = require('@edx/new-relic-source-map-webpack-plugi + const HtmlWebpackPlugin = require('html-webpack-plugin'); + const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + const path = require('path'); ++const fs = require('fs'); + const PostCssAutoprefixerPlugin = require('autoprefixer'); + const PostCssRTLCSS = require('postcss-rtlcss'); + const PostCssCustomMediaCSS = require('postcss-custom-media'); +@@ -23,6 +24,22 @@ const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic + const commonConfig = require('./webpack.common.config'); + const presets = require('../lib/presets'); + ++/** This condition confirms whether the configuration for the MFE has switched to a JS-based configuration ++ * as previously implemented in frontend-build and frontend-platform. If the environment variable exists, then ++ * an env.config.js file will be created at the root directory and its env variables can be accessed with getConfig(). ++ * ++ * https://github.com/openedx/frontend-build/blob/master/docs/0002-js-environment-config.md ++ * https://github.com/openedx/frontend-platform/blob/master/docs/decisions/0007-javascript-file-configuration.rst ++ */ ++const envConfigPath = process.env.JS_CONFIG_FILEPATH; ++if (envConfigPath) { ++ const envConfigFilename = envConfigPath.slice(envConfigPath.indexOf('env.config')); ++ ++ fs.copyFile(process.env.JS_CONFIG_FILEPATH, envConfigFilename, (err) => { ++ if (err) { throw err; } ++ }); ++} ++ + // Add process env vars. Currently used only for setting the PUBLIC_PATH. + dotenv.config({ + path: path.resolve(process.cwd(), '.env'), diff --git a/webpack.dev.config.js b/webpack.dev.config.js deleted file mode 100644 index 065bd2c1..00000000 --- a/webpack.dev.config.js +++ /dev/null @@ -1,9 +0,0 @@ -const { createConfig } = require('@edx/frontend-build'); -/** Uncomment the lines below if you wish to use an env.config.js in development */ -// const envConfig = require('./env.config'); - -const config = createConfig('webpack-dev'); - -// config.devServer.port = envConfig.PORT || process.env.PORT || 8080; - -module.exports = config; diff --git a/webpack.prod.config.js b/webpack.prod.config.js deleted file mode 100644 index 3722b4e8..00000000 --- a/webpack.prod.config.js +++ /dev/null @@ -1,19 +0,0 @@ -const fs = require('fs'); -const { createConfig } = require('@edx/frontend-build'); - -/** This condition confirms whether the configuration for the MFE has switched to a JS-based configuration - * as previously implemented in frontend-build and frontend-platform. If the environment variable exists, then - * an env.config.js file will be created at the root directory and its env variables can be accessed with getConfig(). - * - * https://github.com/openedx/frontend-build/blob/master/docs/0002-js-environment-config.md - * https://github.com/openedx/frontend-platform/blob/master/docs/decisions/0007-javascript-file-configuration.rst - */ -if (process.env.JS_CONFIG_FILEPATH) { - fs.copyFile(process.env.JS_CONFIG_FILEPATH, 'env.config.js', (err) => { - if (err) { throw err; } - }); -} - -const config = createConfig('webpack-prod'); - -module.exports = config;