From 5b592eca4fb1ebe597c3c7c0c061aba8f2ce83c2 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Thu, 24 Mar 2022 23:41:19 -0600
Subject: [PATCH] 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                               |  5 ++++
 .../views/auth/VectorAuthFooter.tsx           |  2 --
 .../views/auth/VectorAuthHeaderLogo.tsx       |  4 +--
 src/components/views/auth/VectorAuthPage.tsx  |  8 +++---
 webpack.config.js                             | 26 +++++++++++++------
 5 files changed, 27 insertions(+), 18 deletions(-)
 create mode 100644 components.json

diff --git a/components.json b/components.json
new file mode 100644
index 0000000000..cc5046ed69
--- /dev/null
+++ b/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"
+}
diff --git a/src/components/views/auth/VectorAuthFooter.tsx b/src/components/views/auth/VectorAuthFooter.tsx
index 0cdfdc0a23..87557ab4bd 100644
--- a/src/components/views/auth/VectorAuthFooter.tsx
+++ b/src/components/views/auth/VectorAuthFooter.tsx
@@ -44,6 +44,4 @@ const VectorAuthFooter = () => {
     );
 };
 
-VectorAuthFooter.replaces = 'AuthFooter';
-
 export default VectorAuthFooter;
diff --git a/src/components/views/auth/VectorAuthHeaderLogo.tsx b/src/components/views/auth/VectorAuthHeaderLogo.tsx
index deaf9cc232..d44e3e5a7b 100644
--- a/src/components/views/auth/VectorAuthHeaderLogo.tsx
+++ b/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";
 
diff --git a/src/components/views/auth/VectorAuthPage.tsx b/src/components/views/auth/VectorAuthPage.tsx
index 7df756a67d..d2e6d9f8db 100644
--- a/src/components/views/auth/VectorAuthPage.tsx
+++ b/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()})`,
         };
diff --git a/webpack.config.js b/webpack.config.js
index ad64899c94..bd20c2cf06 100644
--- a/webpack.config.js
+++ b/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.