Merge branch 'johannes/webpack-cli-4.10.0' into johannes/webpack-5

.github/workflows/build.yml

@@ -36,6 +36,9 @@ jobs:
               with:
                   cache: "yarn"
 
+            # Workaround for yarn install timeouts, especially on Windows
+            - run: yarn config set network-timeout 300000
+
             - name: Install Dependencies
               run: "./scripts/layered.sh"
 

.github/workflows/docs.yml

@@ -0,0 +1,102 @@
+name: Deploy documentation
+
+on:
+    push:
+        branches: [develop]
+    workflow_dispatch: {}
+
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+concurrency:
+    group: "pages"
+    cancel-in-progress: false
+
+jobs:
+    build:
+        name: GitHub Pages
+        runs-on: ubuntu-latest
+        steps:
+            - name: Fetch element-desktop
+              uses: actions/checkout@v4
+              with:
+                  repository: vector-im/element-desktop
+                  path: element-desktop
+
+            - name: Fetch element-web
+              uses: actions/checkout@v4
+              with:
+                  path: element-web
+
+            - name: Fetch matrix-react-sdk
+              uses: actions/checkout@v4
+              with:
+                  repository: matrix-org/matrix-react-sdk
+                  path: matrix-react-sdk
+
+            - name: Fetch matrix-js-sdk
+              uses: actions/checkout@v4
+              with:
+                  repository: matrix-org/matrix-js-sdk
+                  path: matrix-js-sdk
+
+            - name: Setup mdBook
+              uses: peaceiris/actions-mdbook@v1
+              with:
+                  mdbook-version: "0.4.10"
+
+            - name: Install mdbook-combiner
+              run: cargo install mdbook-combiner
+
+            - name: Prepare docs
+              run: |
+                  mkdir docs
+
+                  mv element-desktop/README.md element-desktop/docs/
+                  mv element-desktop/docs "docs/Element Desktop"
+
+                  mv element-web/README.md element-web/docs/
+                  mv element-web/docs "docs/Element Web"
+
+                  mv matrix-react-sdk/README.md matrix-react-sdk/docs/
+                  mv matrix-react-sdk/docs "docs/Matrix React SDK"
+
+                  mv matrix-js-sdk/README.md matrix-js-sdk/docs/
+                  mv matrix-js-sdk/docs "docs/Matrix JS SDK"
+
+                  sed -i -e 's/\.\.\/README.md/README.md/' docs/**/SUMMARY.md
+
+                  mdbook-combiner -m docs
+                  sed -i -E 's/^\t# (.+)$/- [\1]()/gm;t' SUMMARY.md
+                  sed -i -E 's/^- \[(.+)]\(<>\)$/---\n# \1/gm;t' SUMMARY.md
+                  sed -i -E 's/\t- \[Introduction]/- [Introduction]/gm;t' SUMMARY.md
+
+                  cat <<EOF > docs/SUMMARY.md
+                  # Summary
+                  - [Introduction](<Element Web/README.md>)
+
+                  EOF
+                  cat SUMMARY.md >> docs/SUMMARY.md
+
+                  mv element-web/book.toml .
+
+            - name: Build docs
+              run: mdbook build
+
+            - name: Upload artifact
+              uses: actions/upload-pages-artifact@v2
+              with:
+                  path: ./book
+
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        runs-on: ubuntu-latest
+        needs: build
+        steps:
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v2

.github/workflows/localazy_upload.yaml

@@ -3,7 +3,7 @@ on:
     push:
         branches: [develop]
         paths:
-            - "src/strings/i18n/en_EN.json"
+            - "src/i18n/strings/en_EN.json"
 jobs:
     upload:
         uses: matrix-org/matrix-web-i18n/.github/workflows/localazy_upload.yaml@main

.github/workflows/triage-assigned.yml

@@ -10,7 +10,7 @@ jobs:
         if: |
             contains(github.event.issue.assignees.*.login, 't3chguy') ||
             contains(github.event.issue.assignees.*.login, 'andybalaam') ||
-            contains(github.event.issue.assignees.*.login, 'justjanne')
+            contains(github.event.issue.assignees.*.login, 'MidhunSureshR')
         steps:
             - uses: actions/add-to-project@main
               with:

.github/workflows/triage-labelled.yml

@@ -20,7 +20,8 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Video-Rooms') ||
             contains(github.event.issue.labels.*.name, 'A-Message-Starring') ||
             contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor') ||
-            contains(github.event.issue.labels.*.name, 'A-Element-Call')
+            contains(github.event.issue.labels.*.name, 'A-Element-Call') ||
+            contains(github.event.issue.labels.*.name, 'A-Element-R')
         steps:
             - uses: actions/github-script@v6
               with:
@@ -136,3 +137,26 @@ jobs:
               with:
                   project-url: https://github.com/orgs/vector-im/projects/101
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+    element_r:
+        name: Add Element R issues to Crypto Team board
+        runs-on: ubuntu-latest
+        if: >
+            contains(github.event.issue.labels.*.name, 'A-Element-R')
+        steps:
+            - id: add_to_project
+              uses: actions/add-to-project@v0.5.0
+              with:
+                  project-url: ${{ env.PROJECT_URL }}
+                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+
+            - id: set_fields
+              uses: titoportas/update-project-fields@020b5aa9db8f9501d4b16d6417c2132ff26e6279 # v0.1.0
+              with:
+                  project-url: ${{ env.PROJECT_URL }}
+                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  item-id: ${{ steps.add_to_project.outputs.itemId }} # Use the item-id output of the previous step
+                  field-keys: Workstream,module
+                  field-values: Element-R,web
+        env:
+            PROJECT_URL: https://github.com/orgs/vector-im/projects/76

.github/workflows/upgrade_dependencies.yml

@@ -1,8 +0,0 @@
-name: Upgrade Dependencies
-on:
-    workflow_dispatch: {}
-jobs:
-    upgrade:
-        uses: matrix-org/matrix-js-sdk/.github/workflows/upgrade_dependencies.yml@develop
-        secrets:
-            ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

.gitignore

@@ -27,3 +27,4 @@ electron/pub
 # Auto-generated file
 /src/modules.ts
 /build_config.yaml
+/book

book.toml

@@ -0,0 +1,26 @@
+# Documentation for possible options in this file is at
+# https://rust-lang.github.io/mdBook/format/config.html
+[book]
+title = "Element Web & Desktop"
+authors = ["New Vector Ltd.", "The Matrix.org Foundation C.I.C."]
+language = "en"
+multilingual = false
+
+# The directory that documentation files are stored in
+src = "docs"
+
+[build]
+# Prevent markdown pages from being automatically generated when they're
+# linked to in SUMMARY.md
+create-missing = false
+
+[output.html]
+# Remove the numbers that appear before each item in the sidebar, as they can
+# get quite messy as we nest deeper
+no-section-label = true
+
+# The source code URL of the repository
+git-repository-url = "https://github.com/vector-im/element-web"
+
+# The path that the docs are hosted on
+site-url = "/element-web/"

docs/SUMMARY.md

@@ -0,0 +1,39 @@
+# Summary
+
+-   [Introduction](../README.md)
+
+# Usage
+
+-   [Betas](betas.md)
+-   [Labs](labs.md)
+
+# Setup
+
+-   [Config](config.md)
+-   [Custom home page](custom-home.md)
+-   [Kubernetes](kubernetes.md)
+-   [Jitsi](jitsi.md)
+-   [Encryption](e2ee.md)
+
+# Build
+
+-   [Customisations](customisations.md)
+-   [Modules](modules.md)
+-   [Native Node modules](native-node-modules.md)
+
+# Contribution
+
+-   [Choosing an issue](choosing-an-issue.md)
+-   [Translation](translating.md)
+-   [Netlify builds](pr-previews.md)
+-   [Code review](review.md)
+
+# Development
+
+-   [App load order](app-load.md)
+-   [Translation](translating-dev.md)
+-   [Theming](theming.md)
+-   [Memory profiling](memory-profiles-and-leaks.md)
+-   [Jitsi](jitsi-dev.md)
+-   [Feature flags](feature-flags.md)
+-   [OIDC and delegated authentication](oidc.md)

docs/config.md

@@ -54,8 +54,8 @@ One of the following options **must** be supplied:
    being optional.
 
 If both `default_server_config` and `default_server_name` are used, Element will try to look up the connection
-infomation using `.well-known`, and if that fails, take `default_server_config` as the homeserver connection
-infomation.
+information using `.well-known`, and if that fails, take `default_server_config` as the homeserver connection
+information.
 
 ## Labs flags
 

docs/e2ee.md

@@ -36,7 +36,7 @@ When `force_disable` is true:
 -   any `io.element.e2ee.default` value will be disregarded.
 
 Note: If the server is configured to forcibly enable encryption for some or all rooms,
-this behaviour will be overriden.
+this behaviour will be overridden.
 
 # Secure backup
 

docs/labs.md

@@ -128,7 +128,7 @@ Enables rendering of MD / HTML in room topics.
 
 Configures Element to use a new cryptography implementation based on the [matrix-rust-sdk](https://github.com/matrix-org/matrix-rust-sdk).
 
-This setting is (currently) _sticky_ to a user's session: it only takes effect when the user logs in to a new session. Likewise, even after disabling the setting in `config.json`, the Rust implemention will remain in use until users log out.
+This setting is (currently) _sticky_ to a user's session: it only takes effect when the user logs in to a new session. Likewise, even after disabling the setting in `config.json`, the Rust implementation will remain in use until users log out.
 
 ## New room header & details (`feature_new_room_decoration_ui`) [In Development]
 

docs/oidc.md

@@ -0,0 +1,43 @@
+# OIDC and delegated authentication
+
+## Compatibility/OIDC-aware mode
+
+[MSC2965: OIDC provider discovery](https://github.com/matrix-org/matrix-spec-proposals/pull/2965)
+[MSC3824: OIDC aware clients](https://github.com/matrix-org/matrix-spec-proposals/pull/3824)
+This mode uses an SSO flow to gain a `loginToken` from the authentication provider, then continues with SSO login.
+Element Web uses [MSC2965: OIDC provider discovery](https://github.com/matrix-org/matrix-spec-proposals/pull/2965) to discover the configured provider.
+Wherever valid MSC2965 configuration is discovered, OIDC-aware login flow will be the only option offered.
+
+## (🧪Experimental) OIDC-native flow
+
+Can be enabled by a config-level-only setting in `config.json`
+
+```json
+{
+    "features": {
+        "feature_oidc_native_flow": true
+    }
+}
+```
+
+See https://areweoidcyet.com/client-implementation-guide/ for implementation details.
+
+Element Web uses [MSC2965: OIDC provider discovery](https://github.com/matrix-org/matrix-spec-proposals/pull/2965) to discover the configured provider.
+Where OIDC native login flow is enabled and valid MSC2965 configuration is discovered, OIDC native login flow will be the only login option offered.
+Element Web will attempt to [dynamically register](https://openid.net/specs/openid-connect-registration-1_0.html) with the configured OP.
+Then, authentication will be completed [as described here](https://areweoidcyet.com/client-implementation-guide/).
+
+#### Statically configured OIDC clients
+
+Clients that are already registered with the OP can configure their `client_id` in `config.json`.
+Where static configuration exists for the OP dynamic client registration will not be attempted.
+
+```json
+{
+    "oidc_static_clients": {
+        "https://dummyoidcprovider.com/": {
+            "client_id": "abc123"
+        }
+    }
+}
+```

docs/translating-dev.md

@@ -70,7 +70,7 @@ There you can also require all translations to be redone if the meaning of the s
 1. Add it to the array in `_t` for example `_t(TKEY, {variable: this.variable})`
 1. Add the variable inside the string. The syntax for variables is `%(variable)s`. Please note the _s_ at the end. The name of the variable has to match the previous used name.
 
--   You can use the special `count` variable to choose between multiple versions of the same string, in order to get the correct pluralization. E.g. `_t('You have %(count)s new messages', { count: 2 })` would show 'You have 2 new messages', while `_t('You have %(count)s new messages', { count: 1 })` would show 'You have one new message' (assuming a singular version of the string has been added to the translation file. See above). Passing in `count` is much prefered over having an if-statement choose the correct string to use, because some languages have much more complicated plural rules than english (e.g. they might need a completely different form if there are three things rather than two).
+-   You can use the special `count` variable to choose between multiple versions of the same string, in order to get the correct pluralization. E.g. `_t('You have %(count)s new messages', { count: 2 })` would show 'You have 2 new messages', while `_t('You have %(count)s new messages', { count: 1 })` would show 'You have one new message' (assuming a singular version of the string has been added to the translation file. See above). Passing in `count` is much preferred over having an if-statement choose the correct string to use, because some languages have much more complicated plural rules than english (e.g. they might need a completely different form if there are three things rather than two).
 -   If you want to translate text that includes e.g. hyperlinks or other HTML you have to also use tag substitution, e.g. `_t('<a>Click here!</a>', {}, { 'a': (sub) => <a>{sub}</a> })`. If you don't do the tag substitution you will end up showing literally '<a>' rather than making a hyperlink.
 -   You can also use React components with normal variable substitution if you want to insert HTML markup, e.g. `_t('Your email address is %(emailAddress)s', { emailAddress: <i>{userEmailAddress}</i> })`.
 

package.json

@@ -66,8 +66,8 @@
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp"
     },
     "resolutions": {
-        "@types/react-dom": "17.0.19",
-        "@types/react": "17.0.58"
+        "@types/react-dom": "17.0.21",
+        "@types/react": "17.0.68"
     },
     "dependencies": {
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
@@ -101,7 +101,7 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/register": "^7.12.10",
         "@babel/runtime": "^7.12.5",
-        "@casualbot/jest-sonar-reporter": "^2.2.5",
+        "@casualbot/jest-sonar-reporter": "2.2.7",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@sentry/webpack-plugin": "^2.7.1",
         "@svgr/webpack": "^5.5.0",
@@ -111,11 +111,10 @@
         "@types/jsrsasign": "^10.5.4",
         "@types/loader-utils": "^2.0.4",
         "@types/lodash": "^4.14.197",
-        "@types/modernizr": "^3.5.3",
         "@types/node": "^16",
         "@types/node-fetch": "^2.6.4",
-        "@types/react": "17.0.58",
-        "@types/react-dom": "17.0.19",
+        "@types/react": "17.0.68",
+        "@types/react-dom": "17.0.21",
         "@types/ua-parser-js": "^0.7.36",
         "@typescript-eslint/eslint-plugin": "^5.45.0",
         "@typescript-eslint/parser": "^5.45.0",
@@ -128,17 +127,17 @@
         "cpx": "1.5.0",
         "css-loader": "^4",
         "dotenv": "^16.0.2",
-        "eslint": "8.48.0",
+        "eslint": "8.51.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^9.0.0",
-        "eslint-plugin-deprecate": "0.7.0",
+        "eslint-plugin-deprecate": "0.8.4",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-matrix-org": "^1.0.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "eslint-plugin-unicorn": "^48.0.0",
         "extract-text-webpack-plugin": "^4.0.0-beta.0",
-        "fake-indexeddb": "^4.0.0",
+        "fake-indexeddb": "^5.0.0",
         "fetch-mock-jest": "^1.5.1",
         "file-loader": "^6.0.0",
         "fs-extra": "^11.0.0",
@@ -158,7 +157,7 @@
         "modernizr": "^3.12.0",
         "node-fetch": "^2.6.7",
         "optimize-css-assets-webpack-plugin": "^6.0.1",
-        "postcss": "^8.4.16",
+        "postcss": "^8.4.31",
         "postcss-easings": "^2.0.0",
         "postcss-hexrgba": "2.0.1",
         "postcss-import": "^12.0.1",
@@ -183,7 +182,7 @@
         "terser-webpack-plugin": "^5.3.9",
         "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",
-        "typescript": "5.1.6",
+        "typescript": "5.2.2",
         "util": "^0.12.5",
         "webpack": "^5.88.2",
         "webpack-bundle-analyzer": "^4.8.0",

src/i18n/strings/bg.json

@@ -1,38 +0,0 @@
-{
-    "action": {
-        "create_account": "Създай профил",
-        "dismiss": "Затвори",
-        "explore_rooms": "Открий стаи",
-        "open": "Отвори",
-        "sign_in": "Вписване"
-    },
-    "auth": {
-        "sso_complete_in_browser_dialog_title": "Отидете в браузъра за да завършите влизането"
-    },
-    "download_completed": "Свалянето завърши",
-    "error": {
-        "app_launch_unexpected_error": "Неочаквана грешка при подготвянето на приложението. Вижте конзолата за подробности.",
-        "cannot_load_config": "Неуспешно зареждане на конфигурационния файл: презаредете страницата за да опитате пак.",
-        "invalid_configuration_no_server": "Невалидна конфигурация: не е указан сървър по подразбиране.",
-        "invalid_json": "Вашата Element конфигурация съдържа невалиден JSON. Коригирайте проблема и презаредете страницата.",
-        "invalid_json_detail": "Грешката от парсъра е: %(message)s",
-        "invalid_json_generic": "Невалиден JSON",
-        "misconfigured": "Вашият Element не е конфигуриран правилно"
-    },
-    "failed_to_start": "Неуспешно стартиране",
-    "go_to_element_io": "Отиди на element.io",
-    "incompatible_browser": {
-        "browser_links": "Инсталирайте <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink> или <safariLink>Safari</safariLink> за най-добра работа.",
-        "continue_warning": "Разбирам рисковете и желая да продължа",
-        "feature_warning": "Може да продължите да използвате сегашния си браузър, но някои или всички функции може да се окажат неработещи, или пък външния вид на приложението да изглежда неправилен.",
-        "features": "%(brand)s използва модерни функции на браузъра, които не се поддържат от Вашия.",
-        "summary": "Браузърът ви не може да изпълни %(brand)s",
-        "title": "Неподдържан браузър"
-    },
-    "powered_by_matrix": "Базирано на Matrix",
-    "powered_by_matrix_with_logo": "Децентрализиран, криптиран чат &amp; сътрудничество, захранено от $matrixlogo",
-    "unknown_device": "Непознато устройство",
-    "use_brand_on_mobile": "Използвайте %(brand)s на мобилен телефон",
-    "web_default_device_name": "%(appName)s: %(browserName)s под %(osName)s",
-    "welcome_to_element": "Добре дошли в Element"
-}

src/i18n/strings/pl.json

@@ -16,7 +16,7 @@
         "cannot_load_config": "Nie udało się załadować pliku konfiguracyjnego: odśwież stronę, aby spróbować ponownie.",
         "invalid_configuration_mixed_server": "Nieprawidłowa konfiguracja: nie można określić default_hs_url wraz z default_server_name lub default_server_config",
         "invalid_configuration_no_server": "Błędna konfiguracja: nie wybrano domyślnego serwera.",
-        "invalid_json": "Twoja konfiguracja Elementa zawiera nieprawidłowy JSON. Rozwiąż problem i odśwież stronę.",
+        "invalid_json": "Twoja konfiguracja Element zawiera nieprawidłowy JSON. Rozwiąż problem i odśwież stronę.",
         "invalid_json_detail": "Wiadomość od parsera to: %(message)s",
         "invalid_json_generic": "Błędny JSON",
         "misconfigured": "Twój Element jest nieprawidłowo skonfigurowany"

src/i18n/strings/tr.json

@@ -1,37 +0,0 @@
-{
-    "action": {
-        "create_account": "Hesap Oluştur",
-        "dismiss": "Kapat",
-        "explore_rooms": "Odaları keşfet",
-        "open": "Aç",
-        "sign_in": "Giriş Yap"
-    },
-    "auth": {
-        "sso_complete_in_browser_dialog_title": "Oturum açmayı tamamlamak için tarayıcınıza gidin"
-    },
-    "download_completed": "İndirme Tamamlandı",
-    "error": {
-        "app_launch_unexpected_error": "Uygulama hazırlanırken beklenmeyen bir hata oldu. Detaylar için konsola bakın.",
-        "cannot_load_config": "Yapılandırma (config) dosyası yüklenemedi: lütfen yeniden denemek için sayfayı yenileyin.",
-        "invalid_configuration_no_server": "Hatalı ayarlar: varsayılan sunucu belirlenmemiş.",
-        "invalid_json": "Element uygulamasının ayarları hatalı JSON içeriyor. Lütfen hatayı düzeltip sayfayı yenileyin.",
-        "invalid_json_detail": "Ayrıştırıcıdan gelen mesaj: %(message)s",
-        "invalid_json_generic": "Hatalı JSON",
-        "misconfigured": "Element uygulaması hatalı ayarlanmış"
-    },
-    "failed_to_start": "Başlatılamadı",
-    "go_to_element_io": "element.io adresine git",
-    "incompatible_browser": {
-        "browser_links": "Daha iyi bir deneyim için lütfen <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink> ya da <safariLink>Safari</safariLink> tarayıcılarından birini yükleyin.",
-        "continue_warning": "Riskleri anlıyorum ve devam etmek istiyorum",
-        "feature_warning": "Şu anda kullanmış olduğunuz tarayıcınızı kullanmaya devam edebilirsiniz ancak uygulamanın sunduğu bazı ya da bütün özellikler çalışmayabilir ve deneyiminizi kötü yönde etkileyebilir.",
-        "features": "%(brand)s, kullandığınız tarayıcı tarafından desteklenmeyen, gelişmiş tarayıcı özellikleri kullanıyor.",
-        "summary": "Tarayıcınız %(brand)s uygulamasını çalıştıramıyor",
-        "title": "Desteklenmeyen tarayıcı"
-    },
-    "powered_by_matrix": "Gücünü Matrix'ten alır",
-    "powered_by_matrix_with_logo": "$matrixLogo tarafından merkeziyetsiz, şifrelenmiş sohbet &amp; iş birliği",
-    "unknown_device": "Bilinmeyen aygıt",
-    "use_brand_on_mobile": "Mobilde %(brand)s kullan",
-    "welcome_to_element": "Element'e hoş geldiniz"
-}

src/vector/app.tsx

@@ -65,7 +65,7 @@ function onTokenLoginCompleted(): void {
     window.history.replaceState(null, "", url.href);
 }
 
-export async function loadApp(fragParams: {}): Promise<ReactElement> {
+export async function loadApp(fragParams: {}, matrixChatRef: React.Ref<MatrixChat>): Promise<ReactElement> {
     initRouting();
     const platform = PlatformPeg.get();
 
@@ -117,6 +117,7 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
     return (
         <wrapperOpts.Wrapper>
             <MatrixChat
+                ref={matrixChatRef}
                 onNewScreen={onNewScreen}
                 config={config}
                 realQueryParams={params}

src/vector/init.tsx

@@ -30,6 +30,7 @@ import SdkConfig from "matrix-react-sdk/src/SdkConfig";
 import { setTheme } from "matrix-react-sdk/src/theme";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ModuleRunner } from "matrix-react-sdk/src/modules/ModuleRunner";
+import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
 
 import ElectronPlatform from "./platform/ElectronPlatform";
 import PWAPlatform from "./platform/PWAPlatform";
@@ -147,7 +148,10 @@ export async function loadApp(fragParams: {}): Promise<void> {
         /* webpackPreload: true */
         "./app"
     );
-    window.matrixChat = ReactDOM.render(await module.loadApp(fragParams), document.getElementById("matrixchat"));
+    function setWindowMatrixChat(matrixChat: MatrixChat): void {
+        window.matrixChat = matrixChat;
+    }
+    ReactDOM.render(await module.loadApp(fragParams, setWindowMatrixChat), document.getElementById("matrixchat"));
 }
 
 export async function showError(title: string, messages?: string[]): Promise<void> {

test/app-tests/server-config-test.ts

@@ -47,7 +47,7 @@ describe("Loading server config", function () {
                 },
             },
         });
-        await loadApp({});
+        await loadApp({}, null);
         expect((SdkConfig.get("validated_server_config") || {}).hsUrl).toBe("https://matrix-client.matrix.org");
     });
 
@@ -55,7 +55,7 @@ describe("Loading server config", function () {
         SdkConfig.put({
             default_server_name: "matrix.org",
         });
-        await loadApp({});
+        await loadApp({}, null);
         expect((SdkConfig.get("validated_server_config") || {}).hsUrl).toBe("https://matrix-client.matrix.org");
     });
 
@@ -72,7 +72,7 @@ describe("Loading server config", function () {
                     },
                 },
             });
-            await loadApp({});
+            await loadApp({}, null);
             expect((SdkConfig.get("validated_server_config") || {}).hsUrl).toBe("https://matrix-client.matrix.org");
         },
     );

test/app-tests/wrapper-test.tsx

@@ -22,6 +22,7 @@ import fetchMock from "fetch-mock-jest";
 import { render, RenderResult, screen } from "@testing-library/react";
 import { ModuleRunner } from "matrix-react-sdk/src/modules/ModuleRunner";
 import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle";
+import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
 
 import WebPlatform from "../../src/vector/platform/WebPlatform";
 import { loadApp } from "../../src/vector/app";
@@ -68,7 +69,8 @@ describe("Wrapper", () => {
             }
         });
 
-        const matrixChatResult: RenderResult = render(await loadApp({}));
+        const ref = React.createRef<MatrixChat>();
+        const matrixChatResult: RenderResult = render(await loadApp({}, ref));
 
         // at this point, we're trying to do a guest registration;
         // we expect a spinner
@@ -83,5 +85,8 @@ describe("Wrapper", () => {
 
         expect(header.nextSibling).toBe(matrixChat);
         expect(matrixChat.nextSibling).toBe(footer);
+
+        // Should still hold a reference to the MatrixChat component
+        expect(ref.current).toBeInstanceOf(MatrixChat);
     });
 });