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.

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"
+}

src/components/views/auth/VectorAuthFooter.tsx

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

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';
+    public render() {
-
-    render() {
         const brandingConfig = SdkConfig.getObject("branding");
         const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
 

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';
+    private static welcomeBackgroundUrl;
-
-    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()})`,
         };

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(
+function parseOverridesToReplacements(overrides) {
-        // because the input is effectively defined by the person running the build, we don't
+    return Object.entries(overrides).map(([oldPath, newPath]) => {
-        // need to do anything special to protect against regex overrunning, etc.
+        return new webpack.NormalModuleReplacementPlugin(
-        new RegExp(oldPath.replace(/\//g, '[\\/\\\\]').replace(/\./g, '\\.')),
+            // because the input is effectively defined by the person running the build, we don't
-        path.resolve(__dirname, newPath),
+            // 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.