Merge branch 'develop' into travis/inline-widgets

This commit is contained in:
Travis Ralston
2021-03-15 16:37:40 -06:00
262 changed files with 12056 additions and 9954 deletions
+68 -20
View File
@@ -6,16 +6,24 @@ 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://riot.im/app/themes/riot/img/logos/riot-im-logo-black-text.png';
if (!og_image_url) og_image_url = 'https://app.element.io/themes/element/img/logos/opengraph.png';
const additionalPlugins = [
// This is where you can put your customisation replacements.
];
module.exports = (env, argv) => {
if (process.env.CI_PACKAGE) {
// Don't run minification for CI builds (this is only set for runs on develop)
// We override this via environment variable to avoid duplicating the scripts
// in `package.json` just for a different mode.
argv.mode = "development";
}
const development = {};
if (argv.mode !== "production") {
if (argv.mode === "production") {
development['devtool'] = 'nosources-source-map';
} else {
// This makes the sourcemaps human readable for developers. We use eval-source-map
// because the plain source-map devtool ruins the alignment.
development['devtool'] = 'eval-source-map';
@@ -31,13 +39,16 @@ module.exports = (env, argv) => {
...development,
entry: {
"bundle": "./src/vector/index.js",
"bundle": "./src/vector/index.ts",
"indexeddb-worker": "./src/vector/indexeddb-worker.js",
"mobileguide": "./src/vector/mobile_guide/index.js",
"jitsi": "./src/vector/jitsi/index.ts",
"usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.js",
"inline-widget-wrapper": "./src/vector/inline_widget_wrapper/index.js",
// CSS themes
"theme-legacy": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.scss",
"theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.scss",
"theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
"theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
"theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
@@ -56,6 +67,9 @@ module.exports = (env, argv) => {
enforce: true,
// Do not add `chunks: 'all'` here because you'll break the app entry point.
},
default: {
reuseExistingChunk: true,
},
},
},
@@ -93,6 +107,9 @@ module.exports = (env, argv) => {
// same goes for js-sdk - we don't need two copies.
"matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'),
// and prop-types and sanitize-html
"prop-types": path.resolve(__dirname, 'node_modules/prop-types'),
"sanitize-html": path.resolve(__dirname, 'node_modules/sanitize-html'),
// Define a variable so the i18n stuff can load
"$webapp": path.resolve(__dirname, 'webapp'),
@@ -176,6 +193,7 @@ module.exports = (env, argv) => {
require("postcss-simple-vars")(),
require("postcss-strip-inline-comments")(),
require("postcss-hexrgba")(),
// It's important that this plugin is last otherwise we end
// up with broken CSS.
@@ -207,12 +225,14 @@ module.exports = (env, argv) => {
// Note that we use slightly different plugins for SCSS.
require('postcss-import')(),
require("postcss-mixins")(),
require("postcss-simple-vars")(),
require("postcss-extend")(),
require("postcss-nested")(),
require("postcss-mixins")(),
require("postcss-easings")(),
require("postcss-strip-inline-comments")(),
require("postcss-hexrgba")(),
require("postcss-calc")({warnWhenCannotResolve: true}),
// It's important that this plugin is last otherwise we end
// up with broken CSS.
@@ -235,7 +255,7 @@ module.exports = (env, argv) => {
},
{
// cache-bust languages.json file placed in
// riot-web/webapp/i18n during build by copy-res.js
// element-web/webapp/i18n during build by copy-res.js
test: /\.*languages.json$/,
type: "javascript/auto",
loader: 'file-loader',
@@ -255,12 +275,12 @@ module.exports = (env, argv) => {
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) {
// CSS image usages end up in the `bundles/[hash]` output
// directory, so we adjust the final path to navigate up
// twice.
const outputPath = getImgOutputPath(url, resourcePath);
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(path.join("../..", outputPath));
},
},
@@ -271,9 +291,9 @@ module.exports = (env, argv) => {
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) {
const outputPath = getImgOutputPath(url, resourcePath);
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(outputPath);
},
},
@@ -284,12 +304,6 @@ module.exports = (env, argv) => {
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
// This exports our CSS using the splitChunks and loaders above.
new MiniCssExtractPlugin({
filename: 'bundles/[hash]/[name].css',
@@ -304,13 +318,21 @@ module.exports = (env, argv) => {
// HtmlWebpackPlugin will screw up our formatting like the names
// of the themes and which chunks we actually care about.
inject: false,
excludeChunks: ['mobileguide', 'usercontent', 'inline-widget-wrapper'],
excludeChunks: ['mobileguide', 'usercontent', 'inline-widget-wrapper', 'jitsi'],
minify: argv.mode === 'production',
vars: {
og_image_url: og_image_url,
},
}),
// This is the jitsi widget wrapper (embedded, so isolated stack)
new HtmlWebpackPlugin({
template: './src/vector/jitsi/index.html',
filename: 'jitsi.html',
minify: argv.mode === 'production',
chunks: ['jitsi'],
}),
// This is the mobile guide's entry point (separate for faster mobile loading)
new HtmlWebpackPlugin({
template: './src/vector/mobile_guide/index.html',
@@ -319,6 +341,20 @@ module.exports = (env, argv) => {
chunks: ['mobileguide'],
}),
// These are the static error pages for when the javascript env is *really unsupported*
new HtmlWebpackPlugin({
template: './src/vector/static/unable-to-load.html',
filename: 'static/unable-to-load.html',
minify: argv.mode === 'production',
chunks: [],
}),
new HtmlWebpackPlugin({
template: './src/vector/static/incompatible-browser.html',
filename: 'static/incompatible-browser.html',
minify: argv.mode === 'production',
chunks: [],
}),
// This is an inline widget wrapper, similar to usercontent
new HtmlWebpackPlugin({
template: './src/vector/inline_widget_wrapper/index.html',
@@ -333,6 +369,8 @@ module.exports = (env, argv) => {
minify: argv.mode === 'production',
chunks: ['usercontent'],
}),
...additionalPlugins,
],
output: {
@@ -369,15 +407,25 @@ module.exports = (env, argv) => {
/**
* Merge assets found via CSS and imports into a single tree, while also preserving
* directories under `res`.
* directories under e.g. `res` or similar.
*
* @param {string} url The adjusted name of the file, such as `warning.1234567.svg`.
* @param {string} resourcePath The absolute path to the source file with unmodified name.
* @return {string} The returned paths will look like `img/warning.1234567.svg`.
*/
function getImgOutputPath(url, resourcePath) {
const prefix = /^.*[/\\]res[/\\]/;
const outputDir = path.dirname(resourcePath).replace(prefix, "");
function getAssetOutputPath(url, resourcePath) {
// `res` is the parent dir for our own assets in various layers
// `dist` is the parent dir for KaTeX assets
const prefix = /^.*[/\\](dist|res)[/\\]/;
if (!resourcePath.match(prefix)) {
throw new Error(`Unexpected asset path: ${resourcePath}`);
}
let outputDir = path.dirname(resourcePath).replace(prefix, "");
if (resourcePath.includes("KaTeX")) {
// Add a clearly named directory segment, rather than leaving the KaTeX
// assets loose in each asset type directory.
outputDir = path.join(outputDir, "KaTeX");
}
return path.join(outputDir, path.basename(url));
}