Skip to content

Commit

Permalink
Merge pull request #28152 from element-hq/t3chguy/remove-hmr
Browse files Browse the repository at this point in the history 
Remove broken HMR support
  • Loading branch information
@t3chguy
t3chguy authored Oct 8, 2024
2 parents 1691468 + 2a33d55 commit 8720a7c
Show file tree
Hide file tree
Showing 7 changed files with 4 additions and 151 deletions.
16 changes: 0 additions & 16 deletions .env.example
View file

This file was deleted.

4 changes: 0 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,8 +198,6 @@
"raw-loader": "^4.0.2",
"rimraf": "^6.0.0",
"semver": "^7.5.2",
"string-replace-loader": "3",
"style-loader": "4",
"stylelint": "^16.1.0",
"stylelint-config-standard": "^36.0.0",
"stylelint-scss": "^6.0.0",
Expand Down
38 changes: 0 additions & 38 deletions src/vector/devcss.ts
View file

This file was deleted.

8 changes: 0 additions & 8 deletions src/vector/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,6 @@ import "./modernizr";
// in webpack.config.js
require("katex/dist/katex.css");

/**
* This require is necessary only for purposes of CSS hot-reload, as otherwise
* webpack has some incredible problems figuring out which CSS files should be
* hot-reloaded, even with proper hints for the loader.
*
* On production build it's going to be an empty module, so don't worry about that.
*/
require("./devcss");
require("./localstorage-fix");

async function settled(...promises: Array<Promise<any>>): Promise<void> {
Expand Down
74 changes: 4 additions & 70 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,6 @@ const cssThemes = {
"theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss",
};

function getActiveThemes() {
// Default to `light` theme when the MATRIX_THEMES environment variable is not defined.
const theme = process.env.MATRIX_THEMES ?? "light";
return theme
.split(",")
.map((x) => x.trim())
.filter(Boolean);
}

// See docs/customisations.md
let fileOverrides = {
/* {[file: string]: string} */
Expand Down Expand Up @@ -105,7 +96,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 = {};
Expand All @@ -130,19 +120,6 @@ module.exports = (env, argv) => {
const reactSdkSrcDir = path.resolve(require.resolve("matrix-react-sdk/package.json"), "..", "src");
const jsSdkSrcDir = path.resolve(require.resolve("matrix-js-sdk/package.json"), "..", "src");

const ACTIVE_THEMES = getActiveThemes();
function getThemesImports() {
const imports = ACTIVE_THEMES.map((t) => {
return cssThemes[`theme-${t}`].replace("./node_modules/", ""); // theme import path
});
const s = JSON.stringify(ACTIVE_THEMES);
return `
window.MX_insertedThemeStylesCounter = 0;
window.MX_DEV_ACTIVE_THEMES = (${s});
${imports.map((i) => `import("${i}")`).join("\n")};
`;
}

return {
...development,

Expand All @@ -157,7 +134,7 @@ module.exports = (env, argv) => {
import: "./src/serviceworker/index.ts",
filename: "sw.js", // update WebPlatform if this changes
},
...(useHMR ? {} : cssThemes),
...cssThemes,
},

optimization: {
Expand Down Expand Up @@ -276,14 +253,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) => {
Expand Down Expand Up @@ -369,42 +338,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: {
Expand Down Expand Up @@ -642,8 +576,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/[fullhash]/[name].css",
chunkFilename: "bundles/[fullhash]/[name].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),

Expand Down
13 changes: 0 additions & 13 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10810,14 +10810,6 @@ string-length@^4.0.1:
char-regex "^1.0.2"
strip-ansi "^6.0.0"

string-replace-loader@3:
version "3.1.0"
resolved "https://registry.yarnpkg.com/string-replace-loader/-/string-replace-loader-3.1.0.tgz#11ac6ee76bab80316a86af358ab773193dd57a4f"
integrity sha512-5AOMUZeX5HE/ylKDnEa/KKBqvlnFmRZudSOjVJHxhoJg9QYTwl1rECx7SLR8BBH7tfxb4Rp7EM2XVfQFxIhsbQ==
dependencies:
loader-utils "^2.0.0"
schema-utils "^3.0.0"

"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
Expand Down Expand Up @@ -10975,11 +10967,6 @@ strip-json-comments@^3.1.1:
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==

style-loader@4:
version "4.0.0"
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==

stylehacks@^7.0.2:
version "7.0.2"
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-7.0.2.tgz#cc0ec317e9d5b30fdbdfe7ed6b8d3b1a8c57fa06"
Expand Down

0 comments on commit 8720a7c

Please sign in to comment.