From 10fb3859faab523dad0f9cce23fa7110fd943569 Mon Sep 17 00:00:00 2001 From: Dariusz Niemczyk <“palid@users.noreply.github.com”> Date: Mon, 2 Aug 2021 22:27:13 +0200 Subject: [PATCH] Add better docs and iframe support --- .env.example | 3 +- webpack.config.js | 74 +++++++++++++++++++---------------------------- 2 files changed, 32 insertions(+), 45 deletions(-) diff --git a/.env.example b/.env.example index 52f2a023a2..65d7581ad0 100644 --- a/.env.example +++ b/.env.example @@ -1,7 +1,6 @@ # If you want to have proper hot-reload css experience, define one and set this on. CSS_HOT_RELOAD=1 # Define which one theme you want to load for hot-reload purposes. -# You can load multiple themes at once, but switching between is quite buggy with the hot-reload turned on. # To use a single theme just uncomment a line with the theme you want to use. MATRIX_THEMES='light' #MATRIX_THEMES='dark' @@ -9,5 +8,7 @@ MATRIX_THEMES='light' #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: #MATRIX_THEMES='light,dark' diff --git a/webpack.config.js b/webpack.config.js index 0701b0f437..8df042d14c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -9,6 +9,7 @@ const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload'); +dotenv.config(); let ogImageUrl = process.env.RIOT_OG_IMAGE_URL; if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png'; @@ -22,28 +23,10 @@ const cssThemes = { "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss", }; -let dotenvConfig = { parsed: {} }; -try { - dotenvConfig = dotenv.config(); -} catch (err) { - dotenvConfig = { - parsed: { - CSS_HOT_RELOAD: 0, - MATRIX_THEMES: 'light', - }, - }; -} - -const CSS_HOT_RELOAD = process.env.CSS_HOT_RELOAD ?? dotenvConfig.CSS_HOT_RELOAD; -const MATRIX_THEMES = process.env.MATRIX_THEMES ?? dotenvConfig.MATRIX_THEMES; - function getActiveThemes() { // We want to use `light` theme by default if it's not defined. - const theme = MATRIX_THEMES ?? 'light'; + const theme = process.env.MATRIX_THEMES ?? 'dark'; const themes = theme.split(',').filter(x => x).map(x => x.trim()).filter(x => x); - if (themes.length > 1) { - throw new Error('Please see `.env.example` for proper hot reload & themes configuration.'); - } return themes; } @@ -63,7 +46,7 @@ module.exports = (env, argv) => { nodeEnv = "production"; } const devMode = nodeEnv !== 'production'; - const useCssHotReload = CSS_HOT_RELOAD === '1' && devMode; + const useCssHotReload = process.env.CSS_HOT_RELOAD === '1' && devMode; const development = {}; if (argv.mode === "production") { @@ -88,10 +71,10 @@ module.exports = (env, argv) => { }); const s = JSON.stringify(ACTIVE_THEMES); return ` - window.MX_insertedThemeStylesCounter = 0 - window.MX_DEV_ACTIVE_THEMES = (${ s }); - ${ imports.map(i => `import("${ i }")`).join('\n') }; - `; + window.MX_insertedThemeStylesCounter = 0; + window.MX_DEV_ACTIVE_THEMES = (${ s }); + ${ imports.map(i => `import("${ i }")`).join('\n') }; + `; } return { @@ -285,27 +268,30 @@ module.exports = (env, argv) => { * Should be MUCH better with webpack 5, but we're stuck to this solution for now. */ useCssHotReload ? { - loader: 'style-loader', options: { - /** - * 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. - */ - attributes: { - 'data-mx-theme': 'replace_me', - }, - // Properly disable all other instances of themes + 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 isMatrixTheme = element.attributes['data-mx-theme'].value === 'replace_me'; const parent = document.querySelector('head'); - - element.disabled = true; - if (isMatrixTheme) { - element.attributes['data-mx-theme'].value = window.MX_DEV_ACTIVE_THEMES[window.MX_insertedThemeStylesCounter]; - window.MX_insertedThemeStylesCounter++; + // 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); }, }, @@ -460,8 +446,8 @@ module.exports = (env, argv) => { // This exports our CSS using the splitChunks and loaders above. new MiniCssExtractPlugin({ - filename: "bundles/[hash]/[name].css", - chunkFilename: "bundles/[hash]/[name].css", + filename: useCssHotReload ? "bundles/[name].css" : "bundles/[hash]/[name].css", + chunkFilename: useCssHotReload ? "bundles/[name].css" : "bundles/[hash]/[name].css", ignoreOrder: false, // Enable to remove warnings about conflicting order }),