v1.11.41

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

.github/workflows/backport.yml

@@ -23,7 +23,7 @@ jobs:
               )
             )
         steps:
-            - uses: tibdex/backport@2e217641d82d02ba0603f46b1aeedefb258890ac # v2
+            - uses: tibdex/backport@9565281eda0731b1d20c4025c43339fb0a23812e # v2
               with:
                   labels_template: "<%= JSON.stringify([...labels, 'X-Release-Blocker']) %>"
                   # We can't use GITHUB_TOKEN here or CI won't run on the new PR

CHANGELOG.md

@@ -1,3 +1,65 @@
+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)
+=================================================================================================
+
+## ✨ Features
+ * Hide account deactivation for externally managed accounts ([\#11445](https://github.com/matrix-org/matrix-react-sdk/pull/11445)). Fixes #26022. Contributed by @kerryarchibald.
+ * OIDC: Redirect to delegated auth provider when signing out ([\#11432](https://github.com/matrix-org/matrix-react-sdk/pull/11432)). Fixes #26000. Contributed by @kerryarchibald.
+ * Disable 3pid fields in settings when `m.3pid_changes` capability is disabled ([\#11430](https://github.com/matrix-org/matrix-react-sdk/pull/11430)). Fixes #25995. Contributed by @kerryarchibald.
+ * OIDC: disable multi session signout for OIDC-aware servers in session manager ([\#11431](https://github.com/matrix-org/matrix-react-sdk/pull/11431)). Contributed by @kerryarchibald.
+ * Implement updated open dialog method of the Module API ([\#11395](https://github.com/matrix-org/matrix-react-sdk/pull/11395)). Contributed by @dhenneke.
+ * Polish & delabs `Exploring public spaces` feature ([\#11423](https://github.com/matrix-org/matrix-react-sdk/pull/11423)).
+ * Treat lists with a single empty item as plain text, not Markdown. ([\#6833](https://github.com/matrix-org/matrix-react-sdk/pull/6833)). Fixes vector-im/element-meta#1265.
+ * Allow managing room knocks ([\#11404](https://github.com/matrix-org/matrix-react-sdk/pull/11404)). Contributed by @charlynguyen.
+ * Pin the action buttons to the bottom of the scrollable dialogs ([\#11407](https://github.com/matrix-org/matrix-react-sdk/pull/11407)). Contributed by @dhenneke.
+ * Support Matrix 1.1 (drop legacy r0 versions) ([\#9819](https://github.com/matrix-org/matrix-react-sdk/pull/9819)).
+
+## 🐛 Bug Fixes
+ * Fix path separator for Windows based systems ([\#25997](https://github.com/vector-im/element-web/pull/25997)).
+ * Fix instances of double translation and guard translation calls using typescript ([\#11443](https://github.com/matrix-org/matrix-react-sdk/pull/11443)).
+ * Fix export type "Current timeline" to match its behaviour to its name ([\#11426](https://github.com/matrix-org/matrix-react-sdk/pull/11426)). Fixes #25988.
+ * Fix Room Settings > Notifications file upload input being shown superfluously ([\#11415](https://github.com/matrix-org/matrix-react-sdk/pull/11415)). Fixes #18392.
+ * Simplify registration with email validation ([\#11398](https://github.com/matrix-org/matrix-react-sdk/pull/11398)). Fixes #25832 #23601 and #22297.
+ * correct home server URL ([\#11391](https://github.com/matrix-org/matrix-react-sdk/pull/11391)). Fixes #25931. Contributed by @NSV1991.
+ * Include non-matching DMs in Spotlight recent conversations when the DM's userId is part of the search API results ([\#11374](https://github.com/matrix-org/matrix-react-sdk/pull/11374)). Contributed by @mgcm.
+ * Fix useRoomMembers missing updates causing incorrect membership counts ([\#11392](https://github.com/matrix-org/matrix-react-sdk/pull/11392)). Fixes #17096.
+ * Show error when searching public rooms fails ([\#11378](https://github.com/matrix-org/matrix-react-sdk/pull/11378)).
+
 Changes in [1.11.39](https://github.com/vector-im/element-web/releases/tag/v1.11.39) (2023-08-15)
 =================================================================================================
 

docs/labs.md

@@ -124,11 +124,6 @@ If you're enabling this at the deployment level, you may also want to reference
 
 Enables rendering of MD / HTML in room topics.
 
-## Exploring public spaces (`feature_exploring_public_spaces`)
-
-Enables exploring public spaces in the new search dialog. Requires the server to
-have [MSC3827](https://github.com/matrix-org/matrix-spec-proposals/pull/3827) enabled.
-
 ## Use the Rust cryptography implementation (`feature_rust_crypto`) [In Development]
 
 Configures Element to use a new cryptography implementation based on the [matrix-rust-sdk](https://github.com/matrix-org/matrix-rust-sdk).

jest.config.ts

@@ -25,7 +25,7 @@ const config: Config = {
     },
     testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)"],
     setupFiles: ["jest-canvas-mock"],
-    setupFilesAfterEnv: ["<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"],
+    setupFilesAfterEnv: ["<rootDir>/node_modules/matrix-react-sdk/test/setupTests.ts"],
     moduleNameMapper: {
         "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/imageMock.js",

module_system/installer.ts

@@ -185,9 +185,20 @@ function getModuleApiVersionFor(moduleName: string): string {
     return findDepVersionInPackageJson(moduleApiDepName, pkgJsonStr);
 }
 
+// A list of Module API versions that are supported in addition to the currently installed one
+// defined in the package.json. This is necessary because semantic versioning is applied to both
+// the Module-side surface of the API and the Client-side surface of the API. So breaking changes
+// in the Client-side surface lead to a major bump even though the Module-side surface stays
+// compatible. We aim to not break the Module-side surface so we maintain a list of compatible
+// older versions.
+const backwardsCompatibleMajorVersions = ["1.0.0"];
+
 function isModuleVersionCompatible(ourApiVersion: string, moduleApiVersion: string): boolean {
     if (!moduleApiVersion) return false;
-    return semver.satisfies(ourApiVersion, moduleApiVersion);
+    return (
+        semver.satisfies(ourApiVersion, moduleApiVersion) ||
+        backwardsCompatibleMajorVersions.some((version) => semver.satisfies(version, moduleApiVersion))
+    );
 }
 
 function writeModulesTs(content: string): void {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.39",
+    "version": "1.11.41",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -36,7 +36,7 @@
         "clean": "rimraf lib webapp",
         "build": "yarn clean && yarn build:genfiles && yarn build:bundle",
         "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
-        "build:jitsi": "node scripts/build-jitsi.js",
+        "build:jitsi": "ts-node scripts/build-jitsi.ts",
         "build:res": "node scripts/copy-res.js",
         "build:genfiles": "yarn build:res && yarn build:jitsi && yarn build:module_system",
         "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
@@ -61,7 +61,7 @@
         "lint:style": "stylelint \"res/css/**/*.pcss\"",
         "test": "jest",
         "coverage": "yarn test --coverage",
-        "analyse:unused-exports": "node ./scripts/analyse_unused_exports.js",
+        "analyse:unused-exports": "ts-node ./scripts/analyse_unused_exports.ts",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp"
     },
     "resolutions": {
@@ -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": "^1.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": "27.2.0",
-        "matrix-react-sdk": "3.78.0",
+        "matrix-js-sdk": "28.1.0",
+        "matrix-react-sdk": "3.80.0",
         "matrix-widget-api": "^1.3.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
@@ -109,6 +109,7 @@
         "@types/jsrsasign": "^10.5.4",
         "@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/ua-parser-js": "^0.7.36",
@@ -124,7 +125,7 @@
         "dotenv": "^16.0.2",
         "eslint": "8.45.0",
         "eslint-config-google": "^0.14.0",
-        "eslint-config-prettier": "^8.5.0",
+        "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-deprecate": "^0.7.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-matrix-org": "^1.0.0",
@@ -145,7 +146,7 @@
         "json-loader": "^0.5.7",
         "loader-utils": "^3.0.0",
         "matrix-mock-request": "^2.5.0",
-        "matrix-web-i18n": "^1.4.0",
+        "matrix-web-i18n": "^2.0.0",
         "mini-css-extract-plugin": "^1",
         "minimist": "^1.2.6",
         "mkdirp": "^3.0.0",
@@ -163,10 +164,10 @@
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^5.0.2",
         "prettier": "2.8.8",
+        "proxy-agent": "^6.3.0",
         "raw-loader": "^4.0.2",
         "rimraf": "^5.0.0",
         "semver": "^7.5.2",
-        "simple-proxy-agent": "^1.1.0",
         "string-replace-loader": "3",
         "style-loader": "2",
         "stylelint": "^15.10.1",

scripts/analyse_unused_exports.ts

@@ -1,13 +1,12 @@
 #!/usr/bin/env node
-"use strict";
 
-const fs = require("fs");
-const { exec } = require("node:child_process");
+import * as fs from "node:fs";
+import { exec } from "node:child_process";
 
 const includeJSSDK = process.argv.includes("--include-js-sdk");
-const ignore = [];
+const ignore: string[] = [];
 
-ignore.push(...Object.values(JSON.parse(fs.readFileSync(`${__dirname}/../components.json`))));
+ignore.push(...Object.values<string>(JSON.parse(fs.readFileSync(`${__dirname}/../components.json`, "utf-8"))));
 ignore.push("/index.ts");
 // We ignore js-sdk by default as it may export for other non element-web projects
 if (!includeJSSDK) ignore.push("matrix-js-sdk");
@@ -31,7 +30,7 @@ exec(command, (error, stdout, stderr) => {
     // won't have an "/" character at the start, so we try to fix that for
     // better UX
     // TODO: This might break on Windows
-    lines = lines.reduce((newLines, line) => {
+    lines = lines.reduce<string[]>((newLines, line) => {
         if (!line.startsWith("/")) newLines.push("/" + line);
         else newLines.push(line);
         return newLines;

scripts/build-jitsi.ts

@@ -3,11 +3,11 @@
 // due to file associations in Windows.
 // Sorry.
 
-const fs = require("fs");
-const path = require("path");
-const { mkdirpSync } = require("mkdirp");
-const fetch = require("node-fetch");
-const ProxyAgent = require("simple-proxy-agent");
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { mkdirpSync } from "mkdirp";
+import fetch from "node-fetch";
+import { ProxyAgent } from "proxy-agent";
 
 console.log("Making webapp directory");
 mkdirpSync("webapp");
@@ -16,15 +16,12 @@ mkdirpSync("webapp");
 console.log("Downloading Jitsi script");
 const fname = path.join("webapp", "jitsi_external_api.min.js");
 
-const options = {};
-if (process.env.HTTPS_PROXY) {
-    options.agent = new ProxyAgent(process.env.HTTPS_PROXY, { tunnel: true });
-}
-
-fetch("https://meet.element.io/libs/external_api.min.js", options)
+fetch("https://meet.element.io/libs/external_api.min.js", {
+    agent: new ProxyAgent(),
+})
     .then((res) => {
         const stream = fs.createWriteStream(fname);
-        return new Promise((resolve, reject) => {
+        return new Promise<void>((resolve, reject) => {
             res.body.pipe(stream);
             res.body.on("error", (err) => reject(err));
             res.body.on("finish", () => resolve());

scripts/check-i18n.pl

@@ -1 +0,0 @@
-../../matrix-react-sdk/scripts/check-i18n.pl

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
@@ -81,7 +79,6 @@ const parseArgs = require("minimist");
 const Cpx = require("cpx");
 const chokidar = require("chokidar");
 const fs = require("fs");
-const rimraf = require("rimraf");
 
 const argv = parseArgs(process.argv.slice(2), {});
 
@@ -158,7 +155,7 @@ function genLangFile(lang, dest) {
     const reactSdkFile = "node_modules/matrix-react-sdk/src/i18n/strings/" + lang + ".json";
     const riotWebFile = "src/i18n/strings/" + lang + ".json";
 
-    let translations = {};
+    const translations = {};
     [reactSdkFile, riotWebFile].forEach(function (f) {
         if (fs.existsSync(f)) {
             try {
@@ -170,8 +167,6 @@ function genLangFile(lang, dest) {
         }
     });
 
-    translations = weblateToCounterpart(translations);
-
     const json = JSON.stringify(translations, null, 4);
     const jsonBuffer = Buffer.from(json);
     const digest = loaderUtils.getHashDigest(jsonBuffer, null, null, 7);
@@ -188,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) {
@@ -207,51 +202,11 @@ function genLangList(langFileMap) {
     }
 }
 
-/**
- * Convert translation key from weblate format
- * (which only supports a single level) to counterpart
- * which requires object values for 'count' translations.
- *
- * eg.
- *     "there are %(count)s badgers|one": "a badger",
- *     "there are %(count)s badgers|other": "%(count)s badgers"
- *   becomes
- *     "there are %(count)s badgers": {
- *         "one": "a badger",
- *         "other": "%(count)s badgers"
- *     }
+/*
+ * 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 weblateToCounterpart(inTrs) {
-    const outTrs = {};
-
-    for (const key of Object.keys(inTrs)) {
-        const keyParts = key.split("|", 2);
-        if (keyParts.length === 2) {
-            let obj = outTrs[keyParts[0]];
-            if (obj === undefined) {
-                obj = outTrs[keyParts[0]] = {};
-            } else if (typeof obj === "string") {
-                // This is a transitional edge case if a string went from singular to pluralised and both still remain
-                // in the translation json file. Use the singular translation as `other` and merge pluralisation atop.
-                obj = outTrs[keyParts[0]] = {
-                    other: inTrs[key],
-                };
-                console.warn("Found entry in i18n file in both singular and pluralised form", keyParts[0]);
-            }
-            obj[keyParts[1]] = inTrs[key];
-        } else {
-            outTrs[key] = inTrs[key];
-        }
-    }
-
-    return outTrs;
-}
-
-/**
-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";
@@ -279,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/basefile.json

@@ -1 +1 @@
-{}
+{}

src/i18n/strings/ka.json

@@ -27,5 +27,6 @@
     "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s იყენებს ბრაუზერის გაფართოებულ ფუნქციებს, რომლებიც არ არის მხარდაჭერილი თქვენი ამჟამინდელი ბრაუზერის მიერ.",
     "%(appName)s: %(browserName)s on %(osName)s": "%(appName)s: %(browserName)s %(osName)s-ზე",
     "%(brand)s Desktop: %(platformName)s": "%(brand)s სამუშაო მაგიდა: %(platformName)s",
-    "The message from the parser is: %(message)s": "პარსერის შეტყობინებაა: %(message)s"
+    "The message from the parser is: %(message)s": "პარსერის შეტყობინებაა: %(message)s",
+    "Invalid configuration: a default_hs_url can't be specified along with default_server_name or default_server_config": "არასწორი კონფიგურაცია: default_hs_url არ შეიძლება მითითებული იყოს default_server_name ან default_server_config-თან ერთად"
 }

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,11 +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 { QueryDict, encodeParams } from "matrix-js-sdk/src/utils";
+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.
@@ -48,31 +49,6 @@ logger.log(`Application is running in ${process.env.NODE_ENV} mode`);
 
 window.matrixLogger = logger;
 
-// We use this to work out what URL the SDK should
-// pass through when registering to allow the user to
-// click back to the client having registered.
-// It's up to us to recognise if we're loaded with
-// this URL and tell MatrixClient to resume registration.
-//
-// If we're in electron, we should never pass through a file:// URL otherwise
-// the identity server will try to 302 the browser to it, which breaks horribly.
-// so in that instance, hardcode to use app.element.io for now instead.
-function makeRegistrationUrl(params: QueryDict): string {
-    let url: string;
-    if (window.location.protocol === "vector:") {
-        url = "https://app.element.io/#/register";
-    } else {
-        url = window.location.protocol + "//" + window.location.host + window.location.pathname + "#/register";
-    }
-
-    const encodedParams = encodeParams(params);
-    if (encodedParams) {
-        url += "?" + encodedParams;
-    }
-
-    return url;
-}
-
 function onTokenLoginCompleted(): void {
     // if we did a token login, we're now left with the token, hs and is
     // url as query params in the url;
@@ -135,18 +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}
-            makeRegistrationUrl={makeRegistrationUrl}
-            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>
     );
 }
 
@@ -174,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";
@@ -143,9 +143,6 @@ describe("loading:", function () {
                     enableGuest={true}
                     onTokenLoginCompleted={resolve}
                     initialScreenAfterLogin={getScreenFromLocation(windowLocation!)}
-                    makeRegistrationUrl={(): string => {
-                        throw new Error("Not implemented");
-                    }}
                 />,
             );
         });
@@ -158,10 +155,8 @@ describe("loading:", function () {
     async function expectAndAwaitSync(opts?: { isGuest?: boolean }): Promise<any> {
         let syncRequest: (typeof MockHttpBackend.prototype.requests)[number] | null = null;
         httpBackend.when("GET", "/_matrix/client/versions").respond(200, {
-            versions: ["r0.3.0"],
-            unstable_features: {
-                "m.lazy_load_members": true,
-            },
+            versions: ["v1.1"],
+            unstable_features: {},
         });
         const isGuest = opts?.isGuest;
         if (!isGuest) {
@@ -194,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")
@@ -207,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"));
@@ -220,14 +215,14 @@ describe("loading:", function () {
             });
 
             // Pass the liveliness checks
-            httpBackend.when("GET", "/versions").respond(200, { versions: ["r0.4.0"] });
+            httpBackend.when("GET", "/versions").respond(200, { versions: ["v1.1"] });
             httpBackend.when("GET", "/_matrix/identity/v2").respond(200, {});
 
             return sleep(1)
                 .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")
@@ -270,7 +265,7 @@ describe("loading:", function () {
             });
 
             // Pass the liveliness checks
-            httpBackend.when("GET", "/versions").respond(200, { versions: ["r0.4.0"] });
+            httpBackend.when("GET", "/versions").respond(200, { versions: ["v1.1"] });
             httpBackend.when("GET", "/_matrix/identity/v2").respond(200, {});
 
             return awaitLoginComponent(matrixChat)
@@ -283,7 +278,7 @@ describe("loading:", function () {
                     // the only outstanding request should be a GET /login
                     // (in particular there should be no /register request for
                     // guest registration).
-                    const allowedRequests = ["/_matrix/client/r0/login", "/versions", "/_matrix/identity/v2"];
+                    const allowedRequests = ["/_matrix/client/v3/login", "/versions", "/_matrix/identity/v2"];
                     for (const req of httpBackend.requests) {
                         if (req.method === "GET" && allowedRequests.find((p) => req.path.endsWith(p))) {
                             continue;
@@ -396,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")
@@ -432,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")
@@ -473,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")
@@ -567,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")
@@ -655,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
 
@@ -685,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/server-config-test.ts

@@ -29,7 +29,7 @@ describe("Loading server config", function () {
         PlatformPeg.set(new WebPlatform());
         fetchMock.get("https://matrix-client.matrix.org/_matrix/client/versions", {
             unstable_features: {},
-            versions: [],
+            versions: ["v1.1"],
         });
         fetchMock.get("https://matrix.org/.well-known/matrix/client", {
             "m.homeserver": {

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,
                     },
@@ -216,6 +227,10 @@ module.exports = (env, argv) => {
                 // Same goes for js/react-sdk - we don't need two copies.
                 "matrix-js-sdk": path.resolve(__dirname, "node_modules/matrix-js-sdk"),
                 "matrix-react-sdk": path.resolve(__dirname, "node_modules/matrix-react-sdk"),
+                "@matrix-org/react-sdk-module-api": path.resolve(
+                    __dirname,
+                    "node_modules/@matrix-org/react-sdk-module-api",
+                ),
                 // and matrix-events-sdk & matrix-widget-api
                 "matrix-events-sdk": path.resolve(__dirname, "node_modules/matrix-events-sdk"),
                 "matrix-widget-api": path.resolve(__dirname, "node_modules/matrix-widget-api"),
@@ -275,7 +290,7 @@ module.exports = (env, argv) => {
                         // either webpack or our babel setup.
                         // When we do get to upgrade our current setup, this should
                         // probably be removed.
-                        if (f.includes("@vector-im/compound-web")) return true;
+                        if (f.includes(path.join("@vector-im", "compound-web"))) return true;
 
                         // but we can't run all of our dependencies through babel (many of them still
                         // use module.exports which breaks if babel injects an 'include' for its
@@ -520,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,
@@ -725,14 +746,36 @@ module.exports = (env, argv) => {
  * @return {string} The returned paths will look like `img/warning.1234567.svg`.
  */
 function getAssetOutputPath(url, resourcePath) {
+    const isKaTeX = resourcePath.includes("KaTeX");
     // `res` is the parent dir for our own assets in various layers
     // `dist` is the parent dir for KaTeX assets
     const prefix = /^.*[/\\](dist|res)[/\\]/;
-    if (!resourcePath.match(prefix)) {
+
+    /**
+     * 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
+     * images coming from @vector-im/compound-web.
+     */
+    if (isKaTeX && !resourcePath.match(prefix)) {
         throw new Error(`Unexpected asset path: ${resourcePath}`);
     }
     let outputDir = path.dirname(resourcePath).replace(prefix, "");
-    if (resourcePath.includes("KaTeX")) {
+
+    /**
+     * 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.
         outputDir = path.join(outputDir, "KaTeX");