From feedeabee3aa0a70f8966a5a8563e835177c698e Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Wed, 18 Aug 2021 16:39:27 +0100 Subject: [PATCH 1/9] Improve phrasing --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8f797ab6ec..a19e8058e5 100644 --- a/README.md +++ b/README.md @@ -267,9 +267,9 @@ 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 currently an opt-in development feature, and if you want to have -it working properly on your environment, create a `.env` file in this repository -with proper environmental, see `.env.example` for documentation and example. +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 ============================ From 5dcf3e1eaf77b979c892581958ee205ef7550f2d Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Wed, 18 Aug 2021 16:48:20 +0100 Subject: [PATCH 2/9] Improve phrasing --- .env.example | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/.env.example b/.env.example index 65d7581ad0..00d8a7b738 100644 --- a/.env.example +++ b/.env.example @@ -1,14 +1,13 @@ -# If you want to have proper hot-reload css experience, define one and set this on. +# To enable CSS hot-reload, set the following variable to 1. CSS_HOT_RELOAD=1 -# Define which one theme you want to load for hot-reload purposes. -# To use a single theme just uncomment a line with the theme you want to use. +# To use a single theme, uncomment the line with the theme you want to hot-reload. MATRIX_THEMES='light' #MATRIX_THEMES='dark' #MATRIX_THEMES='light-legacy' #MATRIX_THEMES='dark-legacy' #MATRIX_THEMES='light-custom' #MATRIX_THEMES='dark-custom' -# You can load multiple themes at once, but switching between them may require full page reload. -# It will also multiple compliation times by the number of turned on themes. -# If you want to use multiple themes, define the combinations manually like below: +# 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' From 74bc3c1dabb59f67aa4bc8f28ad1b3c034c73845 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Wed, 18 Aug 2021 16:59:57 +0100 Subject: [PATCH 3/9] Improve phrasing --- src/vector/devcss.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/vector/devcss.ts b/src/vector/devcss.ts index 75ce2b2af2..581a0ad8ba 100644 --- a/src/vector/devcss.ts +++ b/src/vector/devcss.ts @@ -15,15 +15,16 @@ limitations under the License. */ /** - * This code will be autoremoved on production builds. - * The purpose of this code is that the webpack's `string-replace-loader` - * pretty much search for this string in this specific file and replaces it - * like a macro before any previous compilations, which allows us to inject - * some css requires statements that are specific to the themes we have turned - * on by ourselves. Without that very specific workaround, webpack would just - * import all the CSSes, which would make the whole thing useless, as on my - * machine with i9 the recompilation for all themes turned ou would take way - * over 30s, which is definitely too high for nice css reloads speed. + * 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 in a + * powerful machine. * * For more details, see webpack.config.js:184 (string-replace-loader) */ From 45cbfbf5d886848510c6e977db50dc3f1f242c37 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Wed, 18 Aug 2021 17:08:20 +0100 Subject: [PATCH 4/9] Standardise spelling of hot-reload This is the form used elsewhere. --- src/vector/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vector/index.ts b/src/vector/index.ts index fe424c47f2..8e31ebbf8a 100644 --- a/src/vector/index.ts +++ b/src/vector/index.ts @@ -26,9 +26,9 @@ require('highlight.js/styles/github.css'); require('katex/dist/katex.css'); /** - * This require is necessary only for purposes of CSS hot reload, as otherwise + * This require is necessary only for purposes of CSS hot-reload, as otherwise * webpack has some incredibly problems figuring out which css files should be - * hot reloaded, even with proper hints for the loader. + * 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. */ From e96059337e822f97e36abf2cc366acbf1b7c1f8b Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Wed, 18 Aug 2021 17:09:08 +0100 Subject: [PATCH 5/9] Fix typo --- src/vector/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vector/index.ts b/src/vector/index.ts index 8e31ebbf8a..de68bf0a43 100644 --- a/src/vector/index.ts +++ b/src/vector/index.ts @@ -27,7 +27,7 @@ require('katex/dist/katex.css'); /** * This require is necessary only for purposes of CSS hot-reload, as otherwise - * webpack has some incredibly problems figuring out which css files should be + * 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. From 0eb8d3f4d148200f18ca6adce541200efa737bc0 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Wed, 18 Aug 2021 17:11:12 +0100 Subject: [PATCH 6/9] Make code consistent with the comment above --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index fb21e3f0ef..1f6bff41a2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -26,7 +26,7 @@ const cssThemes = { function getActiveThemes() { // We want to use `light` theme by default if it's not defined. - const theme = process.env.MATRIX_THEMES ?? 'dark'; + const theme = process.env.MATRIX_THEMES ?? 'light'; const themes = theme.split(',').filter(x => x).map(x => x.trim()).filter(x => x); return themes; } From c3c47f170cc7d50247b1975131cb16985434ac1d Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Wed, 18 Aug 2021 17:12:36 +0100 Subject: [PATCH 7/9] Improve phrasing --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 1f6bff41a2..c0ae8fde28 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,7 +25,7 @@ const cssThemes = { }; function getActiveThemes() { - // We want to use `light` theme by default if it's not defined. + // Default to `light` theme when the MATRIX_THEMES environment variable is not defined. const theme = process.env.MATRIX_THEMES ?? 'light'; const themes = theme.split(',').filter(x => x).map(x => x.trim()).filter(x => x); return themes; From 412a7554c7fd30f8d42b060ae9f7a74868eabfb9 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Wed, 18 Aug 2021 17:15:06 +0100 Subject: [PATCH 8/9] Remove commented out code --- webpack.config.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index c0ae8fde28..fa5ad87d7d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -558,8 +558,6 @@ module.exports = (env, argv) => { // Only output errors, warnings, or new compilations. // This hides the massive list of modules. stats: 'minimal', - // hot: false, - // injectHot: false, hotOnly: true, inline: true, }, From 23aabcc56c4154e3bd106fbd9bc6d02e469f2deb Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Wed, 18 Aug 2021 17:44:20 +0100 Subject: [PATCH 9/9] Fix typo --- src/vector/devcss.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vector/devcss.ts b/src/vector/devcss.ts index 581a0ad8ba..2f67803385 100644 --- a/src/vector/devcss.ts +++ b/src/vector/devcss.ts @@ -23,7 +23,7 @@ limitations under the License. * * 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 in a + * 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)