Merge pull request #28152 from element-hq/t3chguy/remove-hmr
Remove broken HMR support
This commit is contained in:
Michael Telatynski
GitHub
commit
8720a7cef7
7 changed files with 4 additions and 151 deletions
16
.env.example
16
.env.example
|
|
@ -1,16 +0,0 @@
|
|||
# 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
|
||||
# To use a single theme, uncomment the line with the theme you want to hot-reload.
|
||||
MATRIX_THEMES='light'
|
||||
#MATRIX_THEMES='dark'
|
||||
#MATRIX_THEMES='legacy-light'
|
||||
#MATRIX_THEMES='legacy-dark'
|
||||
#MATRIX_THEMES='light-custom'
|
||||
#MATRIX_THEMES='dark-custom'
|
||||
# You can also enable multiple themes by using a comma-separated list.
|
||||
# When multiple themes are enabled, switching between them may require a full page reload.
|
||||
# Note that compilation times are proportional to the number of enabled themes.
|
||||
#MATRIX_THEMES='light,dark'
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
/**
|
||||
* This code is removed on production builds.
|
||||
*
|
||||
* Webpack's `string-replace-loader` searches for the `use theming` string
|
||||
* in this specific file, and replaces it with CSS requires statements that
|
||||
* are specific to the themes we have enabled.
|
||||
*
|
||||
* Without this workaround, webpack would import the CSS of all themes, which
|
||||
* would defeat the purpose of hot-reloading since all themes would be compiled,
|
||||
* which would result in compilation times on the order of 30s, even on a
|
||||
* powerful machine.
|
||||
*
|
||||
* For more details, see webpack.config.js:184 (string-replace-loader)
|
||||
*/
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
("use theming");
|
||||
/**
|
||||
* Clean up old hot-module script injections as they hog up memory
|
||||
* and anything other than the newest one is really not needed at all.
|
||||
* We don't need to do it more frequently than every half a minute or so,
|
||||
* but it's done to delay full page reload due to app slowness.
|
||||
*/
|
||||
setInterval(() => {
|
||||
const elements = Array.from(document.querySelectorAll("script[src*=hot-update]"));
|
||||
if (elements.length > 1) {
|
||||
const oldInjects = elements.slice(0, elements.length - 1);
|
||||
oldInjects.forEach((e) => e.remove());
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
|
@ -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> {
|
||||
|
|
|
|||
|
|
@ -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} */
|
||||
|
|
@ -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 = {};
|
||||
|
|
@ -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,
|
||||
|
||||
|
|
@ -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: {
|
||||
|
|
@ -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) => {
|
||||
|
|
@ -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: {
|
||||
|
|
@ -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
|
||||
}),
|
||||
|
||||
|
|
|
|||
13
yarn.lock
13
yarn.lock
|
|
@ -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"
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue