PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Remove broken HMR support

Browse source 
It has been broken since the Webpack 5 upgrade

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-04 13:41:25 +01:00
parent 36c80099fb
commit 9407af0bfb
No known key found for this signature in database
GPG key ID: A2B008A5F49F5D0D
3 changed files with 4 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.example
View file

@ -1,5 +1,3 @@
# To enable CSS hot-reload, set the following variable to 1.
CSS_HOT_RELOAD=1
# To use the full page error dialog, set this to 1. Please report false positives to
# the issue tracker for handling.
FULL_PAGE_ERRORS=0

4
README.md
View file

@ -206,10 +206,6 @@ internet. So please don't depend on resources (JS libs, CSS, images, fonts)
hosted by external CDNs or servers but instead please package all dependencies
into Element itself.
CSS hot-reload is available as an opt-in development feature. You can enable it
by defining a `CSS_HOT_RELOAD` environment variable, in a `.env` file in the root
of the repository. See `.env.example` for documentation and an example.
# Setting up a dev environment
Much of the functionality in Element is actually in the `matrix-react-sdk` and

52
webpack.config.js
View file

@ -105,7 +105,6 @@ module.exports = (env, argv) => {
// (called to build nightly and develop.element.io)
const nodeEnv = argv.mode;
const devMode = nodeEnv !== "production";
const useHMR = process.env.CSS_HOT_RELOAD === "1" && devMode;
const enableMinification = !devMode && !process.env.CI_PACKAGE;
const development = {};
@ -157,7 +156,7 @@ module.exports = (env, argv) => {
import: "./src/serviceworker/index.ts",
filename: "sw.js", // update WebPlatform if this changes
},
...(useHMR ? {} : cssThemes),
...cssThemes,
},
optimization: {
@ -276,14 +275,6 @@ module.exports = (env, argv) => {
/highlight\.js[\\/]lib[\\/]languages/,
],
rules: [
useHMR && {
test: /devcss\.ts$/,
loader: "string-replace-loader",
options: {
search: '"use theming";',
replace: getThemesImports(),
},
},
{
test: /\.(ts|js)x?$/,
include: (f) => {
@ -369,42 +360,7 @@ module.exports = (env, argv) => {
{
test: /\.pcss$/,
use: [
/**
* This code is hopeful that no .pcss outside of our themes will be directly imported in any
* of the JS/TS files.
* Should be MUCH better with webpack 5, but we're stuck to this solution for now.
*/
useHMR
? {
loader: "style-loader",
/**
* If we refactor the `theme.js` in `matrix-react-sdk` a little bit,
* we could try using `lazyStyleTag` here to add and remove styles on demand,
* that would nicely resolve issues of race conditions for themes,
* at least for development purposes.
*/
options: {
insert: function insertBeforeAt(element) {
const parent = document.querySelector("head");
// We're in iframe
if (!window.MX_DEV_ACTIVE_THEMES) {
parent.appendChild(element);
return;
}
// Properly disable all other instances of themes
element.disabled = true;
element.onload = () => {
element.disabled = true;
};
const theme =
window.MX_DEV_ACTIVE_THEMES[window.MX_insertedThemeStylesCounter];
element.setAttribute("data-mx-theme", theme);
window.MX_insertedThemeStylesCounter++;
parent.appendChild(element);
},
},
}
: MiniCssExtractPlugin.loader,
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
@ -642,8 +598,8 @@ module.exports = (env, argv) => {
// This exports our CSS using the splitChunks and loaders above.
new MiniCssExtractPlugin({
filename: useHMR ? "bundles/[name].css" : "bundles/[fullhash]/[name].css",
chunkFilename: useHMR ? "bundles/[name].css" : "bundles/[fullhash]/[name].css",
filename: "bundles/[name].css",
chunkFilename: "bundles/[name].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),