Browse Source

Step 10.3: Use module replacement to achieve component overrides

This is the same system as the customisations override, however deliberately using a different JSON file to avoid conflicts. 

Forks would be expected to use the customisations file, not the components file, to override/add components.
pull/21282/head
Travis Ralston 3 months ago
parent
commit
5b592eca4f
  1. 5
      components.json
  2. 2
      src/components/views/auth/VectorAuthFooter.tsx
  3. 4
      src/components/views/auth/VectorAuthHeaderLogo.tsx
  4. 8
      src/components/views/auth/VectorAuthPage.tsx
  5. 26
      webpack.config.js

5
components.json

@ -0,0 +1,5 @@
{
"src/components/views/auth/AuthFooter.tsx": "src/components/views/auth/VectorAuthFooter.tsx",
"src/components/views/auth/AuthHeaderLogo.tsx": "src/components/views/auth/VectorAuthHeaderLogo.tsx",
"src/components/views/auth/AuthPage.tsx": "src/components/views/auth/VectorAuthPage.tsx"
}

2
src/components/views/auth/VectorAuthFooter.tsx

@ -44,6 +44,4 @@ const VectorAuthFooter = () => {
);
};
VectorAuthFooter.replaces = 'AuthFooter';
export default VectorAuthFooter;

4
src/components/views/auth/VectorAuthHeaderLogo.tsx

@ -19,9 +19,7 @@ import React from 'react';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
export default class VectorAuthHeaderLogo extends React.PureComponent {
static replaces = 'AuthHeaderLogo';
render() {
public render() {
const brandingConfig = SdkConfig.getObject("branding");
const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";

8
src/components/views/auth/VectorAuthPage.tsx

@ -20,12 +20,10 @@ import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import VectorAuthFooter from "./VectorAuthFooter";
export default class VectorAuthPage extends React.PureComponent {
static replaces = 'AuthPage';
static welcomeBackgroundUrl;
private static welcomeBackgroundUrl;
// cache the url as a static to prevent it changing without refreshing
static getWelcomeBackgroundUrl() {
private static getWelcomeBackgroundUrl() {
if (VectorAuthPage.welcomeBackgroundUrl) return VectorAuthPage.welcomeBackgroundUrl;
const brandingConfig = SdkConfig.getObject("branding");
@ -44,7 +42,7 @@ export default class VectorAuthPage extends React.PureComponent {
return VectorAuthPage.welcomeBackgroundUrl;
}
render() {
public render() {
const pageStyle = {
background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`,
};

26
webpack.config.js

@ -50,14 +50,24 @@ try {
} catch (e) {
// ignore - not important
}
const moduleReplacementPlugins = Object.entries(fileOverrides).map(([oldPath, newPath]) => {
return new webpack.NormalModuleReplacementPlugin(
// because the input is effectively defined by the person running the build, we don't
// need to do anything special to protect against regex overrunning, etc.
new RegExp(oldPath.replace(/\//g, '[\\/\\\\]').replace(/\./g, '\\.')),
path.resolve(__dirname, newPath),
);
});
function parseOverridesToReplacements(overrides) {
return Object.entries(overrides).map(([oldPath, newPath]) => {
return new webpack.NormalModuleReplacementPlugin(
// because the input is effectively defined by the person running the build, we don't
// need to do anything special to protect against regex overrunning, etc.
new RegExp(oldPath.replace(/\//g, '[\\/\\\\]').replace(/\./g, '\\.')),
path.resolve(__dirname, newPath),
);
});
}
const moduleReplacementPlugins = [
...parseOverridesToReplacements(require('./components.json')),
// Allow customisations to override the default components too
...parseOverridesToReplacements(fileOverrides),
];
module.exports = (env, argv) => {
// Establish settings based on the environment and args.

Loading…
Cancel
Save