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. # If you want to have proper hot-reload css experience, define one and set this on.
CSS_HOT_RELOAD=1 CSS_HOT_RELOAD=1
# Define which one theme you want to load for hot-reload purposes. # 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. # 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'
@ -9,5 +8,7 @@ MATRIX_THEMES='light'
#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.
# 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: # If you want to use multiple themes, define the combinations manually like below:
#MATRIX_THEMES='light,dark' #MATRIX_THEMES='light,dark'

74
webpack.config.js
View file

@ -9,6 +9,7 @@ const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload'); const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');
dotenv.config();
let ogImageUrl = process.env.RIOT_OG_IMAGE_URL; let ogImageUrl = process.env.RIOT_OG_IMAGE_URL;
if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png'; 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", "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() { function getActiveThemes() {
// We want to use `light` theme by default if it's not defined. // 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); 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; return themes;
} }
@ -63,7 +46,7 @@ module.exports = (env, argv) => {
nodeEnv = "production"; nodeEnv = "production";
} }
const devMode = nodeEnv !== 'production'; const devMode = nodeEnv !== 'production';
const useCssHotReload = CSS_HOT_RELOAD === '1' && devMode; const useCssHotReload = process.env.CSS_HOT_RELOAD === '1' && devMode;
const development = {}; const development = {};
if (argv.mode === "production") { if (argv.mode === "production") {
@ -88,10 +71,10 @@ module.exports = (env, argv) => {
}); });
const s = JSON.stringify(ACTIVE_THEMES); const s = JSON.stringify(ACTIVE_THEMES);
return ` return `
window.MX_insertedThemeStylesCounter = 0 window.MX_insertedThemeStylesCounter = 0;
window.MX_DEV_ACTIVE_THEMES = (${ s }); window.MX_DEV_ACTIVE_THEMES = (${ s });
${ imports.map(i => `import("${ i }")`).join('\n') }; ${ imports.map(i => `import("${ i }")`).join('\n') };
`; `;
} }
return { 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. * Should be MUCH better with webpack 5, but we're stuck to this solution for now.
*/ */
useCssHotReload ? { useCssHotReload ? {
loader: 'style-loader', options: { loader: 'style-loader',
/** /**
* If we refactor the `theme.js` in `matrix-react-sdk` a little bit, * 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, * we could try using `lazyStyleTag` here to add and remove styles on demand,
* that would nicely resolve issues of race conditions for themes, * that would nicely resolve issues of race conditions for themes,
* at least for development purposes. * at least for development purposes.
*/ */
attributes: { options: {
'data-mx-theme': 'replace_me',
},
// Properly disable all other instances of themes
insert: function insertBeforeAt(element) { insert: function insertBeforeAt(element) {
const isMatrixTheme = element.attributes['data-mx-theme'].value === 'replace_me';
const parent = document.querySelector('head'); const parent = document.querySelector('head');
// We're in iframe
element.disabled = true; if (!window.MX_DEV_ACTIVE_THEMES) {
if (isMatrixTheme) { parent.appendChild(element);
element.attributes['data-mx-theme'].value = window.MX_DEV_ACTIVE_THEMES[window.MX_insertedThemeStylesCounter]; return;
window.MX_insertedThemeStylesCounter++;
} }
// 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); parent.appendChild(element);
}, },
}, },
@ -460,8 +446,8 @@ module.exports = (env, argv) => {
// This exports our CSS using the splitChunks and loaders above. // This exports our CSS using the splitChunks and loaders above.
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: "bundles/[hash]/[name].css", filename: useCssHotReload ? "bundles/[name].css" : "bundles/[hash]/[name].css",
chunkFilename: "bundles/[hash]/[name].css", chunkFilename: useCssHotReload ? "bundles/[name].css" : "bundles/[hash]/[name].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order ignoreOrder: false, // Enable to remove warnings about conflicting order
}), }),