PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add better docs and iframe support

Browse source
This commit is contained in:
Dariusz Niemczyk 2021-08-02 22:27:13 +02:00 committed by Dariusz Niemczyk
parent 88df5c33a9
commit 10fb3859fa
No known key found for this signature in database
GPG key ID: 28DFE7164F497CB6
2 changed files with 32 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.env.example
View file

@ -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'

56
webpack.config.js
View file

@ -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,7 +71,7 @@ module.exports = (env, argv) => {
});
const s = JSON.stringify(ACTIVE_THEMES);
return `
window.MX_insertedThemeStylesCounter = 0
window.MX_insertedThemeStylesCounter = 0;
window.MX_DEV_ACTIVE_THEMES = (${ s });
${ imports.map(i => `import("${ i }")`).join('\n') };
`;
@ -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: {
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.
*/
attributes: {
'data-mx-theme': 'replace_me',
},
// Properly disable all other instances of themes
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
}),