OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve asset path for KaTeX fonts 

This adjusts our asset path handling to group KaTeX fonts in a more sensible way
alongside the other fonts we have. It also resolves production build issues on
Windows.

Fixes https://github.com/vector-im/element-web/issues/15911
pull/15939/head
J. Ryan Stinnett 2020-12-09 17:01:40 +00:00
parent c41f164c75
commit c667473258
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
webpack.config.js
View File

@ -269,12 +269,12 @@ module.exports = (env, argv) => {
options: { options: {
esModule: false, esModule: false,
name: '[name].[hash:7].[ext]', name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath, outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) { publicPath: function(url, resourcePath) {
// CSS image usages end up in the `bundles/[hash]` output // CSS image usages end up in the `bundles/[hash]` output
// directory, so we adjust the final path to navigate up // directory, so we adjust the final path to navigate up
// twice. // twice.
const outputPath = getImgOutputPath(url, resourcePath); const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(path.join("../..", outputPath)); return toPublicPath(path.join("../..", outputPath));
}, },
}, },
@ -285,9 +285,9 @@ module.exports = (env, argv) => {
options: { options: {
esModule: false, esModule: false,
name: '[name].[hash:7].[ext]', name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath, outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) { publicPath: function(url, resourcePath) {
const outputPath = getImgOutputPath(url, resourcePath); const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(outputPath); return toPublicPath(outputPath);
}, },
}, },
@ -392,15 +392,25 @@ module.exports = (env, argv) => {
/** /**
* Merge assets found via CSS and imports into a single tree, while also preserving * 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} 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. * @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`. * @return {string} The returned paths will look like `img/warning.1234567.svg`.
*/ */
function getImgOutputPath(url, resourcePath) { function getAssetOutputPath(url, resourcePath) {
const prefix = /^.*[/\\]res[/\\]/; // `res` is the parent dir for our own assets in various layers
const outputDir = path.dirname(resourcePath).replace(prefix, ""); // `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)); return path.join(outputDir, path.basename(url));
} }