Merge pull request #18628 from psrpinto/hot-reload-follow-up

Hot reload follow up
This commit is contained in:
Dariusz Niemczyk 2021-08-18 18:49:52 +02:00 committed by GitHub
commit b782d10333
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 25 deletions

View file

@ -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 CSS_HOT_RELOAD=1
# Define which one theme you want to load for hot-reload purposes. # To use a single theme, uncomment the line with the theme you want to hot-reload.
# To use a single theme just uncomment a line with the theme you want to use.
MATRIX_THEMES='light' MATRIX_THEMES='light'
#MATRIX_THEMES='dark' #MATRIX_THEMES='dark'
#MATRIX_THEMES='light-legacy' #MATRIX_THEMES='light-legacy'
#MATRIX_THEMES='dark-legacy' #MATRIX_THEMES='dark-legacy'
#MATRIX_THEMES='light-custom' #MATRIX_THEMES='light-custom'
#MATRIX_THEMES='dark-custom' #MATRIX_THEMES='dark-custom'
# You can load multiple themes at once, but switching between them may require full page reload. # You can also enable multiple themes by using a comma-separated list.
# It will also multiple compliation times by the number of turned on themes. # When multiple themes are enabled, switching between them may require a full page reload.
# If you want to use multiple themes, define the combinations manually like below: # Note that compilation times are proportional to the number of enabled themes.
#MATRIX_THEMES='light,dark' #MATRIX_THEMES='light,dark'

View file

@ -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 hosted by external CDNs or servers but instead please package all dependencies
into Element itself. into Element itself.
CSS hot-reload is currently an opt-in development feature, and if you want to have CSS hot-reload is available as an opt-in development feature. You can enable it
it working properly on your environment, create a `.env` file in this repository by defining a `CSS_HOT_RELOAD` environment variable, in a `.env` file in the root
with proper environmental, see `.env.example` for documentation and example. of the repository. See `.env.example` for documentation and an example.
Setting up a dev environment Setting up a dev environment
============================ ============================

View file

@ -15,15 +15,16 @@ limitations under the License.
*/ */
/** /**
* This code will be autoremoved on production builds. * This code is removed 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 * Webpack's `string-replace-loader` searches for the `use theming` string
* like a macro before any previous compilations, which allows us to inject * in this specific file, and replaces it with CSS requires statements that
* some css requires statements that are specific to the themes we have turned * are specific to the themes we have enabled.
* 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 * Without this workaround, webpack would import the CSS of all themes, which
* machine with i9 the recompilation for all themes turned ou would take way * would defeat the purpose of hot-reloading since all themes would be compiled,
* over 30s, which is definitely too high for nice css reloads speed. * 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) * For more details, see webpack.config.js:184 (string-replace-loader)
*/ */

View file

@ -26,9 +26,9 @@ require('highlight.js/styles/github.css');
require('katex/dist/katex.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 * webpack has some incredible 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. * On production build it's going to be an empty module, so don't worry about that.
*/ */

View file

@ -25,8 +25,8 @@ const cssThemes = {
}; };
function getActiveThemes() { 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 ?? 'dark'; const theme = process.env.MATRIX_THEMES ?? 'light';
const themes = theme.split(',').filter(x => x).map(x => x.trim()).filter(x => x); const themes = theme.split(',').filter(x => x).map(x => x.trim()).filter(x => x);
return themes; return themes;
} }
@ -558,8 +558,6 @@ module.exports = (env, argv) => {
// Only output errors, warnings, or new compilations. // Only output errors, warnings, or new compilations.
// This hides the massive list of modules. // This hides the massive list of modules.
stats: 'minimal', stats: 'minimal',
// hot: false,
// injectHot: false,
hotOnly: true, hotOnly: true,
inline: true, inline: true,
}, },