From f06eb14c48bb01fa09b1da9b4a5f34460b62b9a9 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Apr 2021 15:15:48 +0100 Subject: [PATCH 1/3] Linter recommendations --- webpack.config.js | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 2335ea9a03..cf1db3f981 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,8 +5,8 @@ const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const webpack = require("webpack"); -let og_image_url = process.env.RIOT_OG_IMAGE_URL; -if (!og_image_url) og_image_url = 'https://app.element.io/themes/element/img/logos/opengraph.png'; +let ogImageUrl = process.env.RIOT_OG_IMAGE_URL; +if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png'; const additionalPlugins = [ // This is where you can put your customisation replacements. @@ -124,11 +124,11 @@ module.exports = (env, argv) => { // overflows (https://github.com/webpack/webpack/issues/1721), and // there is no need for webpack to parse them - they can just be // included as-is. - /highlight\.js[\\\/]lib[\\\/]languages/, + /highlight\.js[\\/]lib[\\/]languages/, // olm takes ages for webpack to process, and it's already heavily // optimised, so there is little to gain by us uglifying it. - /olm[\\\/](javascript[\\\/])?olm\.js$/, + /olm[\\/](javascript[\\/])?olm\.js$/, ], rules: [ { @@ -152,8 +152,8 @@ module.exports = (env, argv) => { }, loader: 'babel-loader', options: { - cacheDirectory: true - } + cacheDirectory: true, + }, }, { test: /\.css$/, @@ -164,14 +164,14 @@ module.exports = (env, argv) => { options: { importLoaders: 1, sourceMap: true, - } + }, }, { loader: 'postcss-loader', ident: 'postcss', options: { - sourceMap: true, - plugins: () => [ + "sourceMap": true, + "plugins": () => [ // Note that we use significantly fewer plugins on the plain // CSS parser. If we start to parse plain CSS, we end with all // kinds of nasty problems (like stylesheets not loading). @@ -198,11 +198,11 @@ module.exports = (env, argv) => { // up with broken CSS. require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}), ], - parser: "postcss-scss", + "parser": "postcss-scss", "local-plugins": true, }, }, - ] + ], }, { test: /\.scss$/, @@ -213,14 +213,14 @@ module.exports = (env, argv) => { options: { importLoaders: 1, sourceMap: true, - } + }, }, { loader: 'postcss-loader', ident: 'postcss', options: { - sourceMap: true, - plugins: () => [ + "sourceMap": true, + "plugins": () => [ // Note that we use slightly different plugins for SCSS. require('postcss-import')(), @@ -237,11 +237,11 @@ module.exports = (env, argv) => { // up with broken CSS. require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}), ], - parser: "postcss-scss", + "parser": "postcss-scss", "local-plugins": true, }, }, - ] + ], }, { test: /\.wasm$/, @@ -311,7 +311,7 @@ module.exports = (env, argv) => { }, ], }, - ] + ], }, plugins: [ @@ -332,7 +332,7 @@ module.exports = (env, argv) => { excludeChunks: ['mobileguide', 'usercontent', 'jitsi'], minify: argv.mode === 'production', vars: { - og_image_url: og_image_url, + og_image_url: ogImageUrl, }, }), @@ -438,6 +438,7 @@ function getAssetOutputPath(url, resourcePath) { * be placed directly into things like CSS files. * * @param {string} path Some path to a file. + * @returns {string} converted path */ function toPublicPath(path) { return path.replace(/\\/g, '/'); From 0532c9c37bf5e881671275f194df0b8faadf1ec1 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Apr 2021 15:17:24 +0100 Subject: [PATCH 2/3] Use React production for CI builds When running Nightly build we want to benefit from the fast runtime that React production offers and get rid of the runtime overhead that comes with development. We are setting NODE_ENV and not "webpack.mode" to not loose sourcemaps and have minified sources in that environment --- webpack.config.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/webpack.config.js b/webpack.config.js index cf1db3f981..a3d067d5a5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,6 +18,20 @@ module.exports = (env, argv) => { // We override this via environment variable to avoid duplicating the scripts // in `package.json` just for a different mode. argv.mode = "development"; + + // More and more people are using nightly build as their main client + // Libraries like React have a development build that is useful + // when working on the app but adds significant runtime overhead + // We want to use the React production build but not compile the whole + // application to productions standards + additionalPlugins.concat([ + new webpack.EnvironmentPlugin({ + "NODE_ENV": "production", + }), + new webpack.DefinePlugin({ + "process.env.NODE_ENV": "production", + }), + ]); } const development = {}; From 84d6dcf49846778bd90f839252a3e182029da60f Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 16 Apr 2021 09:18:32 +0100 Subject: [PATCH 3/3] Revert overzealous ESLint updates --- webpack.config.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index a3d067d5a5..7bb3e696a5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -138,11 +138,11 @@ module.exports = (env, argv) => { // overflows (https://github.com/webpack/webpack/issues/1721), and // there is no need for webpack to parse them - they can just be // included as-is. - /highlight\.js[\\/]lib[\\/]languages/, + /highlight\.js[\\\/]lib[\\\/]languages/, // olm takes ages for webpack to process, and it's already heavily // optimised, so there is little to gain by us uglifying it. - /olm[\\/](javascript[\\/])?olm\.js$/, + /olm[\\\/](javascript[\\\/])?olm\.js$/, ], rules: [ { @@ -184,8 +184,8 @@ module.exports = (env, argv) => { loader: 'postcss-loader', ident: 'postcss', options: { - "sourceMap": true, - "plugins": () => [ + sourceMap: true, + plugins: () => [ // Note that we use significantly fewer plugins on the plain // CSS parser. If we start to parse plain CSS, we end with all // kinds of nasty problems (like stylesheets not loading). @@ -212,7 +212,7 @@ module.exports = (env, argv) => { // up with broken CSS. require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}), ], - "parser": "postcss-scss", + parser: "postcss-scss", "local-plugins": true, }, }, @@ -233,8 +233,8 @@ module.exports = (env, argv) => { loader: 'postcss-loader', ident: 'postcss', options: { - "sourceMap": true, - "plugins": () => [ + sourceMap: true, + plugins: () => [ // Note that we use slightly different plugins for SCSS. require('postcss-import')(), @@ -251,7 +251,7 @@ module.exports = (env, argv) => { // up with broken CSS. require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}), ], - "parser": "postcss-scss", + parser: "postcss-scss", "local-plugins": true, }, },