v1.11.43

This solves problems wherein the javascript debugger would get confused and
show the execution point two lines away from the source.

CHANGELOG.md

@@ -1,3 +1,50 @@
+Changes in [1.11.43](https://github.com/vector-im/element-web/releases/tag/v1.11.43) (2023-09-15)
+=================================================================================================
+
+(No changes - bumping the version number for an element-desktop release.)
+
+Changes in [1.11.42](https://github.com/vector-im/element-web/releases/tag/v1.11.42) (2023-09-13)
+=================================================================================================
+
+## 🐛 Bug Fixes
+ * Update Compound to fix Firefox-specific avatar regression ([\#11604](https://github.com/matrix-org/matrix-react-sdk/pull/11604)). Fixes #26155.
+
+Changes in [1.11.41](https://github.com/vector-im/element-web/releases/tag/v1.11.41) (2023-09-12)
+=================================================================================================
+
+## 🦖 Deprecations
+ * Deprecate customisations in favour of Module API ([\#25736](https://github.com/vector-im/element-web/pull/25736)). Fixes #25733.
+
+## ✨ Features
+ * Make SVGR icons use forward ref ([\#26082](https://github.com/vector-im/element-web/pull/26082)).
+ * Add support for rendering a custom wrapper around Element ([\#25537](https://github.com/vector-im/element-web/pull/25537)). Contributed by @maheichyk.
+ * Allow creating public knock rooms ([\#11481](https://github.com/matrix-org/matrix-react-sdk/pull/11481)). Contributed by @charlynguyen.
+ * Render custom images in reactions according to MSC4027 ([\#11087](https://github.com/matrix-org/matrix-react-sdk/pull/11087)). Contributed by @sumnerevans.
+ * Introduce room knocks bar ([\#11475](https://github.com/matrix-org/matrix-react-sdk/pull/11475)). Contributed by @charlynguyen.
+ * Room header UI updates ([\#11507](https://github.com/matrix-org/matrix-react-sdk/pull/11507)). Fixes #25892.
+ * Remove green "verified" bar for encrypted events ([\#11496](https://github.com/matrix-org/matrix-react-sdk/pull/11496)).
+ * Update member count on room summary update ([\#11488](https://github.com/matrix-org/matrix-react-sdk/pull/11488)).
+ * Support for E2EE in Element Call  ([\#11492](https://github.com/matrix-org/matrix-react-sdk/pull/11492)).
+ * Allow requesting to join knock rooms via spotlight ([\#11482](https://github.com/matrix-org/matrix-react-sdk/pull/11482)). Contributed by @charlynguyen.
+ * Lock out the first tab if Element is opened in a second tab. ([\#11425](https://github.com/matrix-org/matrix-react-sdk/pull/11425)). Fixes #25157.
+ * Change avatar to use Compound implementation ([\#11448](https://github.com/matrix-org/matrix-react-sdk/pull/11448)).
+
+## 🐛 Bug Fixes
+ * Fix vertical alignment of default avatar font ([\#11582](https://github.com/matrix-org/matrix-react-sdk/pull/11582)). Fixes #26081.
+ * Fix avatars in public room & space search being flex shrunk ([\#11580](https://github.com/matrix-org/matrix-react-sdk/pull/11580)). Fixes #26133.
+ * Fix EventTile avatars being rendered with a size of 0 instead of hidden ([\#11558](https://github.com/matrix-org/matrix-react-sdk/pull/11558)). Fixes #26075.
+ * Fix compound external assets path in bundle ([\#26069](https://github.com/vector-im/element-web/pull/26069)).
+ * Use RoomStateEvent.Update for knocks ([\#11516](https://github.com/matrix-org/matrix-react-sdk/pull/11516)). Contributed by @charlynguyen.
+ * Prevent event propagation when clicking icon buttons ([\#11515](https://github.com/matrix-org/matrix-react-sdk/pull/11515)).
+ * Only display RoomKnocksBar when feature flag is enabled ([\#11513](https://github.com/matrix-org/matrix-react-sdk/pull/11513)). Contributed by @andybalaam.
+ * Fix avatars of knock members for people tab of room settings ([\#11506](https://github.com/matrix-org/matrix-react-sdk/pull/11506)). Fixes #26083. Contributed by @charlynguyen.
+ * Fixes read receipt avatar offset ([\#11483](https://github.com/matrix-org/matrix-react-sdk/pull/11483)). Fixes #26067, #26064 #26059 and #26061.
+ * Fix avatar defects ([\#11473](https://github.com/matrix-org/matrix-react-sdk/pull/11473)). Fixes #26051 and #26046.
+ * Fix consistent avatar output for Percy ([\#11472](https://github.com/matrix-org/matrix-react-sdk/pull/11472)). Fixes #26049 and #26052.
+ * Fix colour of avatar and colour matching with username ([\#11470](https://github.com/matrix-org/matrix-react-sdk/pull/11470)). Fixes #26042.
+ * Fix incompatibility of Soft Logout with Element-R ([\#11468](https://github.com/matrix-org/matrix-react-sdk/pull/11468)).
+ * Fix instances of double translation and guard translation calls using typescript ([\#11443](https://github.com/matrix-org/matrix-react-sdk/pull/11443)).
+
 Changes in [1.11.40](https://github.com/vector-im/element-web/releases/tag/v1.11.40) (2023-08-29)
 =================================================================================================
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.40",
+    "version": "1.11.43",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -70,12 +70,12 @@
     },
     "dependencies": {
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
-        "@matrix-org/react-sdk-module-api": "^2.0.0",
+        "@matrix-org/react-sdk-module-api": "^2.1.0",
         "gfm.css": "^1.1.2",
         "jsrsasign": "^10.5.25",
         "katex": "^0.16.0",
-        "matrix-js-sdk": "28.0.0",
-        "matrix-react-sdk": "3.79.0",
+        "matrix-js-sdk": "28.1.0",
+        "matrix-react-sdk": "3.80.1",
         "matrix-widget-api": "^1.3.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",

scripts/copy-res.js

@@ -5,58 +5,56 @@ const loaderUtils = require("loader-utils");
 // copies the resources into the webapp directory.
 //
 
-// Languages are listed manually so we can choose when to include
-// a translation in the app (because having a translation with only
-// 3 strings translated is just frustrating)
-// This could readily be automated, but it's nice to explicitly
-// control when new languages are available.
+// Languages are listed manually, so we can choose when to include a translation in the app
+// (because having a translation with only 3 strings translated is just frustrating)
+// This could readily be automated, but it's nice to explicitly control when new languages are available.
 const INCLUDE_LANGS = [
-    { value: "bg", label: "Български" },
-    { value: "ca", label: "Català" },
-    { value: "cs", label: "čeština" },
-    { value: "da", label: "Dansk" },
-    { value: "de_DE", label: "Deutsch" },
-    { value: "el", label: "Ελληνικά" },
-    { value: "en_EN", label: "English" },
-    { value: "en_US", label: "English (US)" },
-    { value: "eo", label: "Esperanto" },
-    { value: "es", label: "Español" },
-    { value: "et", label: "Eesti" },
-    { value: "eu", label: "Euskara" },
-    { value: "fi", label: "Suomi" },
-    { value: "fr", label: "Français" },
-    { value: "gl", label: "Galego" },
-    { value: "he", label: "עברית" },
-    { value: "hi", label: "हिन्दी" },
-    { value: "hu", label: "Magyar" },
-    { value: "id", label: "Bahasa Indonesia" },
-    { value: "is", label: "íslenska" },
-    { value: "it", label: "Italiano" },
-    { value: "ja", label: "日本語" },
-    { value: "kab", label: "Taqbaylit" },
-    { value: "ko", label: "한국어" },
-    { value: "lo", label: "ລາວ" },
-    { value: "lt", label: "Lietuvių" },
-    { value: "lv", label: "Latviešu" },
-    { value: "nb_NO", label: "Norwegian Bokmål" },
-    { value: "nl", label: "Nederlands" },
-    { value: "nn", label: "Norsk Nynorsk" },
-    { value: "pl", label: "Polski" },
-    { value: "pt", label: "Português" },
-    { value: "pt_BR", label: "Português do Brasil" },
-    { value: "ru", label: "Русский" },
-    { value: "sk", label: "Slovenčina" },
-    { value: "sq", label: "Shqip" },
-    { value: "sr", label: "српски" },
-    { value: "sv", label: "Svenska" },
-    { value: "te", label: "తెలుగు" },
-    { value: "th", label: "ไทย" },
-    { value: "tr", label: "Türkçe" },
-    { value: "uk", label: "українська мова" },
-    { value: "vi", label: "Tiếng Việt" },
-    { value: "vls", label: "West-Vlaams" },
-    { value: "zh_Hans", label: "简体中文" }, // simplified chinese
-    { value: "zh_Hant", label: "繁體中文" }, // traditional chinese
+    "bg",
+    "ca",
+    "cs",
+    "da",
+    "de_DE",
+    "el",
+    "en_EN",
+    "en_US",
+    "eo",
+    "es",
+    "et",
+    "eu",
+    "fi",
+    "fr",
+    "gl",
+    "he",
+    "hi",
+    "hu",
+    "id",
+    "is",
+    "it",
+    "ja",
+    "kab",
+    "ko",
+    "lo",
+    "lt",
+    "lv",
+    "nb_NO",
+    "nl",
+    "nn",
+    "pl",
+    "pt",
+    "pt_BR",
+    "ru",
+    "sk",
+    "sq",
+    "sr",
+    "sv",
+    "te",
+    "th",
+    "tr",
+    "uk",
+    "vi",
+    "vls",
+    "zh_Hans",
+    "zh_Hant",
 ];
 
 // cpx includes globbed parts of the filename in the destination, but excludes
@@ -185,12 +183,12 @@ function genLangFile(lang, dest) {
 function genLangList(langFileMap) {
     const languages = {};
     INCLUDE_LANGS.forEach(function (lang) {
-        const normalizedLanguage = lang.value.toLowerCase().replace("_", "-");
+        const normalizedLanguage = lang.toLowerCase().replace("_", "-");
         const languageParts = normalizedLanguage.split("-");
         if (languageParts.length == 2 && languageParts[0] == languageParts[1]) {
-            languages[languageParts[0]] = { fileName: langFileMap[lang.value], label: lang.label };
+            languages[languageParts[0]] = langFileMap[lang];
         } else {
-            languages[normalizedLanguage] = { fileName: langFileMap[lang.value], label: lang.label };
+            languages[normalizedLanguage] = langFileMap[lang];
         }
     });
     fs.writeFile("webapp/i18n/languages.json", JSON.stringify(languages, null, 4), function (err) {
@@ -204,11 +202,11 @@ function genLangList(langFileMap) {
     }
 }
 
-/**
-watch the input files for a given language,
-regenerate the file, adding its content-hashed filename to langFileMap
-and regenerating languages.json with the new filename
-*/
+/*
+ * watch the input files for a given language,
+ * regenerate the file, adding its content-hashed filename to langFileMap
+ * and regenerating languages.json with the new filename
+ */
 function watchLanguage(lang, dest, langFileMap) {
     const reactSdkFile = "node_modules/matrix-react-sdk/src/i18n/strings/" + lang + ".json";
     const riotWebFile = "src/i18n/strings/" + lang + ".json";
@@ -236,8 +234,8 @@ function watchLanguage(lang, dest, langFileMap) {
 // language resources
 const I18N_DEST = "webapp/i18n/";
 const I18N_FILENAME_MAP = INCLUDE_LANGS.reduce((m, l) => {
-    const filename = genLangFile(l.value, I18N_DEST);
-    m[l.value] = filename;
+    const filename = genLangFile(l, I18N_DEST);
+    m[l] = filename;
     return m;
 }, {});
 genLangList(I18N_FILENAME_MAP);

src/async-components/structures/CompatibilityView.tsx

@@ -14,13 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react";
-import { _t } from "matrix-react-sdk/src/languageHandler";
+import React, { ReactNode } from "react";
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
+
+import { _t } from "../../languageHandler";
+
 // directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
 // PostCSS variables will be accessible.
 import "../../../res/css/structures/ErrorView.pcss";
-import { ReactNode } from "react";
 
 interface IProps {
     onAccept(): void;
@@ -112,15 +113,13 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
                             <h2 id="step1_heading">{_t("Your browser can't run %(brand)s", { brand })}</h2>
                             <p>
                                 {_t(
-                                    "%(brand)s uses advanced browser features which aren't " +
-                                        "supported by your current browser.",
+                                    "%(brand)s uses advanced browser features which aren't supported by your current browser.",
                                     { brand },
                                 )}
                             </p>
                             <p>
                                 {_t(
-                                    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, " +
-                                        "or <safariLink>Safari</safariLink> for the best experience.",
+                                    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.",
                                     {},
                                     {
                                         chromeLink: (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
@@ -131,8 +130,7 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
                             </p>
                             <p>
                                 {_t(
-                                    "You can continue using your current browser, but some or all features may not work " +
-                                        "and the look and feel of the application may be incorrect.",
+                                    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.",
                                 )}
                             </p>
                             <button onClick={onAccept}>{_t("I understand the risks and wish to continue")}</button>

src/async-components/structures/ErrorView.tsx

@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { _t } from "matrix-react-sdk/src/languageHandler";
+
+import { _t } from "../../languageHandler";
 
 // directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
 // PostCSS variables will be accessible.

src/components/views/auth/VectorAuthFooter.tsx

@@ -17,7 +17,8 @@ limitations under the License.
 
 import React, { ReactElement } from "react";
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
-import { _t } from "matrix-react-sdk/src/languageHandler";
+
+import { _t } from "../../../languageHandler";
 
 const VectorAuthFooter = (): ReactElement => {
     const brandingConfig = SdkConfig.getObject("branding");

src/i18n/strings/sq.json

@@ -27,5 +27,6 @@
     "Use %(brand)s on mobile": "Përdor %(brand)s në celular",
     "Decentralised, encrypted chat & collaboration powered by $matrixLogo": "Fjalosje & bashkëpunim i decentralizuar, i fshehtëzuar, bazuar në $matrixLogo",
     "%(brand)s Desktop: %(platformName)s": "%(brand)s për Desktop: %(platformName)s",
-    "%(appName)s: %(browserName)s on %(osName)s": "%(appName)s: %(browserName)s në %(osName)s"
+    "%(appName)s: %(browserName)s on %(osName)s": "%(appName)s: %(browserName)s në %(osName)s",
+    "Invalid configuration: a default_hs_url can't be specified along with default_server_name or default_server_config": "Formësim i pavlefshëm: një default_hs_url s’mund të jepet tok me default_server_name, apo default_server_config"
 }

src/languageHandler.tsx

@@ -0,0 +1,66 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import {
+    IVariables,
+    TranslatedString,
+    TranslationKey as ReactTranslationKey,
+    // eslint-disable-next-line camelcase
+    _t as react_t,
+    // eslint-disable-next-line camelcase
+    _td as react_td,
+    // eslint-disable-next-line camelcase
+    _tDom as react_tDom,
+    Tags,
+    UserFriendlyError as ReactUserFriendlyError,
+    ErrorOptions,
+} from "matrix-react-sdk/src/languageHandler";
+import { Leaves } from "matrix-react-sdk/src/@types/common";
+
+import type ReactEN from "matrix-react-sdk/src/i18n/strings/en_EN.json";
+import type EN from "./i18n/strings/en_EN.json";
+
+/**
+ * This module wraps languageHandler in the matrix-react-sdk and adds type casts to include translations
+ * which we know will be injected by webpack.
+ */
+
+export type TranslationKey = Leaves<typeof EN & typeof ReactEN, "|", string | { other: string }>;
+
+export class UserFriendlyError extends ReactUserFriendlyError {
+    public constructor(message: TranslationKey, substitutionVariablesAndCause?: IVariables & ErrorOptions) {
+        super(message as ReactTranslationKey, substitutionVariablesAndCause);
+    }
+}
+
+export function _td(s: TranslationKey): TranslationKey {
+    return react_td(s as ReactTranslationKey);
+}
+
+// eslint-next-line @typescript-eslint/naming-convention
+export function _t(text: TranslationKey, variables?: IVariables): string;
+export function _t(text: TranslationKey, variables: IVariables | undefined, tags: Tags): React.ReactNode;
+export function _t(text: TranslationKey, variables?: IVariables, tags?: Tags): TranslatedString {
+    return react_t(text as ReactTranslationKey, variables, tags!);
+}
+
+// eslint-next-line @typescript-eslint/naming-convention
+export function _tDom(text: TranslationKey, variables?: IVariables): TranslatedString;
+export function _tDom(text: TranslationKey, variables: IVariables, tags: Tags): React.ReactNode;
+export function _tDom(text: TranslationKey, variables?: IVariables, tags?: Tags): TranslatedString {
+    return react_tDom(text as ReactTranslationKey, variables!, tags!);
+}

src/vector/app.tsx

@@ -23,7 +23,6 @@ import "matrix-js-sdk/src/browser-index";
 
 import React, { ReactElement } from "react";
 import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
-import { UserFriendlyError } from "matrix-react-sdk/src/languageHandler";
 import AutoDiscoveryUtils from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
 import { AutoDiscovery, ClientConfig } from "matrix-js-sdk/src/autodiscovery";
 import * as Lifecycle from "matrix-react-sdk/src/Lifecycle";
@@ -34,10 +33,13 @@ import { createClient } from "matrix-js-sdk/src/matrix";
 import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
 import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
 import { ValidatedServerConfig } from "matrix-react-sdk/src/utils/ValidatedServerConfig";
+import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle";
+import { ModuleRunner } from "matrix-react-sdk/src/modules/ModuleRunner";
 
 import { parseQs } from "./url_utils";
 import VectorBasePlatform from "./platform/VectorBasePlatform";
 import { getInitialScreenAfterLogin, getScreenFromLocation, init as initRouting, onNewScreen } from "./routing";
+import { UserFriendlyError } from "../languageHandler";
 
 // add React and ReactPerf to the global namespace, to make them easier to access via the console
 // this incidentally means we can forget our React imports in JSX files without penalty.
@@ -109,17 +111,22 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
 
     const initialScreenAfterLogin = getInitialScreenAfterLogin(window.location);
 
+    const wrapperOpts: WrapperOpts = { Wrapper: React.Fragment };
+    ModuleRunner.instance.invoke(WrapperLifecycle.Wrapper, wrapperOpts);
+
     return (
-        <MatrixChat
-            onNewScreen={onNewScreen}
-            config={config}
-            realQueryParams={params}
-            startingFragmentQueryParams={fragParams}
-            enableGuest={!config.disable_guests}
-            onTokenLoginCompleted={onTokenLoginCompleted}
-            initialScreenAfterLogin={initialScreenAfterLogin}
-            defaultDeviceDisplayName={defaultDeviceName}
-        />
+        <wrapperOpts.Wrapper>
+            <MatrixChat
+                onNewScreen={onNewScreen}
+                config={config}
+                realQueryParams={params}
+                startingFragmentQueryParams={fragParams}
+                enableGuest={!config.disable_guests}
+                onTokenLoginCompleted={onTokenLoginCompleted}
+                initialScreenAfterLogin={initialScreenAfterLogin}
+                defaultDeviceDisplayName={defaultDeviceName}
+            />
+        </wrapperOpts.Wrapper>
     );
 }
 
@@ -147,8 +154,7 @@ async function verifyServerConfig(): Promise<IConfigOptions> {
         if (hsUrl && (wkConfig || serverName)) {
             // noinspection ExceptionCaughtLocallyJS
             throw new UserFriendlyError(
-                "Invalid configuration: a default_hs_url can't be specified along with default_server_name " +
-                    "or default_server_config",
+                "Invalid configuration: a default_hs_url can't be specified along with default_server_name or default_server_config",
             );
         }
         if (incompatibleOptions.length < 1) {

src/vector/index.html

@@ -61,7 +61,16 @@
   <body style="height: 100%; margin: 0;">
     <noscript>Sorry, Element requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
     <section id="matrixchat" style="height: 100%;" class="notranslate"></section>
-    <script src="<%= htmlWebpackPlugin.files.js.find(entry => entry.includes("bundle.js")) %>"></script>
+
+<%
+    // insert <script> tags for the JS entry points
+    for (let file of htmlWebpackPlugin.files.js) {
+        if (file.includes("bundle.js") || file.includes("unhomoglyph_data")) {
+%>    <script src="<%= file %>"></script>
+<%
+        }
+    }
+%>
 
     <!-- Legacy supporting Prefetch images -->
     <img src="<%= require('matrix-react-sdk/res/img/warning.svg').default %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>

src/vector/index.ts

@@ -199,8 +199,7 @@ async function start(): Promise<void> {
                 // This uses the default brand since the app config is unavailable.
                 return showError(_t("Your Element is misconfigured"), [
                     _t(
-                        "Your Element configuration contains invalid JSON. " +
-                            "Please correct the problem and reload the page.",
+                        "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.",
                     ),
                     _t("The message from the parser is: %(message)s", {
                         message: error.message || _t("Invalid JSON"),

src/vector/init.tsx

@@ -184,4 +184,4 @@ export async function loadModules(): Promise<void> {
     }
 }
 
-export const _t = languageHandler._t;
+export { _t } from "../languageHandler";

src/vector/platform/ElectronPlatform.tsx

@@ -21,7 +21,6 @@ limitations under the License.
 import { UpdateCheckStatus, UpdateStatus } from "matrix-react-sdk/src/BasePlatform";
 import BaseEventIndexManager from "matrix-react-sdk/src/indexing/BaseEventIndexManager";
 import dis from "matrix-react-sdk/src/dispatcher/dispatcher";
-import { _t } from "matrix-react-sdk/src/languageHandler";
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
 import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
 import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
@@ -48,6 +47,7 @@ import DesktopCapturerSourcePicker from "matrix-react-sdk/src/components/views/e
 import VectorBasePlatform from "./VectorBasePlatform";
 import { SeshatIndexManager } from "./SeshatIndexManager";
 import { IPCManager } from "./IPCManager";
+import { _t } from "../../languageHandler";
 
 interface SquirrelUpdate {
     releaseNotes: string;

src/vector/platform/VectorBasePlatform.ts

@@ -18,11 +18,11 @@ limitations under the License.
 */
 
 import BasePlatform from "matrix-react-sdk/src/BasePlatform";
-import { _t } from "matrix-react-sdk/src/languageHandler";
 
 import type { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
 import { getVectorConfig } from "../getconfig";
 import Favicon from "../../favicon";
+import { _t } from "../../languageHandler";
 
 /**
  * Vector-specific extensions to the BasePlatform template

src/vector/platform/WebPlatform.ts

@@ -18,7 +18,6 @@ limitations under the License.
 
 import { UpdateCheckStatus, UpdateStatus } from "matrix-react-sdk/src/BasePlatform";
 import dis from "matrix-react-sdk/src/dispatcher/dispatcher";
-import { _t } from "matrix-react-sdk/src/languageHandler";
 import { hideToast as hideUpdateToast, showToast as showUpdateToast } from "matrix-react-sdk/src/toasts/UpdateToast";
 import { Action } from "matrix-react-sdk/src/dispatcher/actions";
 import { CheckUpdatesPayload } from "matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload";
@@ -27,6 +26,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import VectorBasePlatform from "./VectorBasePlatform";
 import { parseQs } from "../url_utils";
+import { _t } from "../../languageHandler";
 
 const POKE_RATE_MS = 10 * 60 * 1000; // 10 min
 

test/app-tests/loading-test.tsx

@@ -34,7 +34,7 @@ import { ActionPayload } from "matrix-react-sdk/src/dispatcher/payloads";
 import "../jest-mocks";
 import WebPlatform from "../../src/vector/platform/WebPlatform";
 import { parseQs, parseQsFromFragment } from "../../src/vector/url_utils";
-import { cleanLocalstorage, deleteIndexedDB } from "../test-utils";
+import { cleanLocalstorage, deleteIndexedDB, waitForLoadingSpinner, waitForWelcomeComponent } from "../test-utils";
 
 const DEFAULT_HS_URL = "http://my_server";
 const DEFAULT_IS_URL = "http://my_is";
@@ -189,7 +189,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -202,7 +202,7 @@ describe("loading:", function () {
                 })
                 .then(() => {
                     // Wait for another trip around the event loop for the UI to update
-                    return awaitWelcomeComponent(matrixChat);
+                    return waitForWelcomeComponent(matrixChat);
                 })
                 .then(() => {
                     return waitFor(() => expect(windowLocation?.hash).toEqual("#/welcome"));
@@ -222,7 +222,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -391,7 +391,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -427,7 +427,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -468,7 +468,7 @@ describe("loading:", function () {
                 .then(async () => {
                     // at this point, we're trying to do a guest registration;
                     // we expect a spinner
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/register")
@@ -562,7 +562,7 @@ describe("loading:", function () {
             return sleep(1)
                 .then(async () => {
                     // we expect a spinner while we're logging in
-                    await assertAtLoadingSpinner();
+                    await waitForLoadingSpinner();
 
                     httpBackend
                         .when("POST", "/login")
@@ -650,11 +650,6 @@ describe("loading:", function () {
     }
 });
 
-// assert that we are on the loading page
-async function assertAtLoadingSpinner(): Promise<void> {
-    await screen.findByRole("progressbar");
-}
-
 async function awaitLoggedIn(matrixChat: RenderResult): Promise<void> {
     if (matrixChat.container.querySelector(".mx_MatrixChat_wrapper")) return; // already logged in
 
@@ -680,10 +675,6 @@ async function awaitLoginComponent(matrixChat?: RenderResult): Promise<void> {
     await waitFor(() => matrixChat?.container.querySelector(".mx_AuthPage"));
 }
 
-async function awaitWelcomeComponent(matrixChat?: RenderResult): Promise<void> {
-    await waitFor(() => matrixChat?.container.querySelector(".mx_Welcome"));
-}
-
 function moveFromWelcomeToLogin(matrixChat?: RenderResult): Promise<void> {
     dis.dispatch({ action: "start_login" });
     return awaitLoginComponent(matrixChat);

test/app-tests/wrapper-test.tsx

@@ -0,0 +1,87 @@
+/*
+Copyright 2023 Mikhail Aheichyk
+Copyright 2023 Nordeck IT + Consulting GmbH.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import SdkConfig from "matrix-react-sdk/src/SdkConfig";
+import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
+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 WebPlatform from "../../src/vector/platform/WebPlatform";
+import { loadApp } from "../../src/vector/app";
+import { waitForLoadingSpinner, waitForWelcomeComponent } from "../test-utils";
+
+fetchMock.config.overwriteRoutes = true;
+
+describe("Wrapper", () => {
+    beforeEach(async () => {
+        SdkConfig.reset();
+        PlatformPeg.set(new WebPlatform());
+        fetchMock.get("https://matrix-client.matrix.org/_matrix/client/versions", {
+            unstable_features: {},
+            versions: ["v1.1"],
+        });
+        fetchMock.get("https://matrix.org/.well-known/matrix/client", {
+            "m.homeserver": {
+                base_url: "https://matrix-client.matrix.org",
+            },
+        });
+        fetchMock.get("/version", "1.10.13");
+    });
+
+    it("wrap a matrix chat with header and footer", async () => {
+        SdkConfig.put({
+            default_server_config: {
+                "m.homeserver": {
+                    base_url: "https://matrix-client.matrix.org",
+                },
+            },
+        });
+
+        jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts) => {
+            if (lifecycleEvent === WrapperLifecycle.Wrapper) {
+                (opts as WrapperOpts).Wrapper = ({ children }) => {
+                    return (
+                        <>
+                            <div data-testid="wrapper-header">Header</div>
+                            <div data-testid="wrapper-matrix-chat">{children}</div>
+                            <div data-testid="wrapper-footer">Footer</div>
+                        </>
+                    );
+                };
+            }
+        });
+
+        const matrixChatResult: RenderResult = render(await loadApp({}));
+
+        // at this point, we're trying to do a guest registration;
+        // we expect a spinner
+        await waitForLoadingSpinner();
+
+        await waitForWelcomeComponent(matrixChatResult);
+
+        // Are not semantic elements because Element has a footer already.
+        const header = screen.getByTestId("wrapper-header");
+        const matrixChat = screen.getByTestId("wrapper-matrix-chat");
+        const footer = screen.getByTestId("wrapper-footer");
+
+        expect(header.nextSibling).toBe(matrixChat);
+        expect(matrixChat.nextSibling).toBe(footer);
+    });
+});

test/test-utils.ts

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { RenderResult, screen, waitFor } from "@testing-library/react";
+
 export function cleanLocalstorage(): void {
     window.localStorage.clear();
 }
@@ -47,3 +49,12 @@ export function deleteIndexedDB(dbName: string): Promise<void> {
         throw e;
     });
 }
+
+// wait for loading page
+export async function waitForLoadingSpinner(): Promise<void> {
+    await screen.findByRole("progressbar");
+}
+
+export async function waitForWelcomeComponent(matrixChat?: RenderResult): Promise<void> {
+    await waitFor(() => matrixChat?.container.querySelector(".mx_Welcome"));
+}

webpack.config.js

@@ -171,6 +171,17 @@ module.exports = (env, argv) => {
                         enforce: true,
                         // Do not add `chunks: 'all'` here because you'll break the app entry point.
                     },
+
+                    // put the unhomoglyph data in its own file. It contains
+                    // magic characters which mess up line numbers in the
+                    // javascript debugger.
+                    unhomoglyph_data: {
+                        name: "unhomoglyph_data",
+                        test: /unhomoglyph\/data\.json$/,
+                        enforce: true,
+                        chunks: "all",
+                    },
+
                     default: {
                         reuseExistingChunk: true,
                     },
@@ -524,6 +535,12 @@ module.exports = (env, argv) => {
                                         removeDimensions: true,
                                     },
                                 },
+                                /**
+                                 * Forwards the React ref to the root SVG element
+                                 * Useful when using things like `asChild` in
+                                 * radix-ui
+                                 */
+                                ref: true,
                                 esModule: false,
                                 name: "[name].[hash:7].[ext]",
                                 outputPath: getAssetOutputPath,
@@ -733,6 +750,7 @@ function getAssetOutputPath(url, resourcePath) {
     // `res` is the parent dir for our own assets in various layers
     // `dist` is the parent dir for KaTeX assets
     const prefix = /^.*[/\\](dist|res)[/\\]/;
+
     /**
      * Only needed for https://github.com/vector-im/element-web/pull/15939
      * If keeping this, we are not able to load external assets such as SVG
@@ -742,6 +760,21 @@ function getAssetOutputPath(url, resourcePath) {
         throw new Error(`Unexpected asset path: ${resourcePath}`);
     }
     let outputDir = path.dirname(resourcePath).replace(prefix, "");
+
+    /**
+     * Imports from Compound are "absolute", we need to strip out the prefix
+     * coming before the npm package name.
+     *
+     * This logic is scoped to compound packages for now as they are the only
+     * package that imports external assets. This might need to be made more
+     * generic in the future
+     */
+    const compoundImportsPrefix = /@vector-im(?:\\|\/)compound-(.*?)(?:\\|\/)/;
+    const compoundMatch = outputDir.match(compoundImportsPrefix);
+    if (compoundMatch) {
+        outputDir = outputDir.substring(compoundMatch.index + compoundMatch[0].length);
+    }
+
     if (isKaTeX) {
         // Add a clearly named directory segment, rather than leaving the KaTeX
         // assets loose in each asset type directory.