Switch to importing matrix-js-sdk properly

Using `src` imports as we did

1. made the build & typechecking slower
2. required us to install certain `@types/` deps which js-sdk needed
3. limited certain options in typescript as we had to support both the typescript features the js-sdk needed as well as element-web (e.g. we couldn't use ESNext lib as js-sdk uses es2024 with some extensions which clash with ESNext)

Author: t3chguy

apps/web/.eslintrc.cjs

@@ -61,8 +61,6 @@ module.exports = {
         ],
 
         "import/no-duplicates": ["error"],
-        // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
-        // Ban compound-design-tokens raw svg imports in favour of their React component counterparts
         "no-restricted-imports": [
             "error",
             {
@@ -76,25 +74,21 @@ module.exports = {
                         name: "@testing-library/react",
                         message: "Please use jest-matrix-react instead",
                     },
-                    {
-                        name: "matrix-js-sdk",
-                        message: "Please use matrix-js-sdk/src/matrix instead",
-                    },
                     {
                         name: "matrix-js-sdk/",
-                        message: "Please use matrix-js-sdk/src/matrix instead",
+                        message: "Please use matrix-js-sdk instead",
                     },
                     {
                         name: "matrix-js-sdk/src",
-                        message: "Please use matrix-js-sdk/src/matrix instead",
+                        message: "Please use 'matrix-js-sdk' instead",
                     },
                     {
                         name: "matrix-js-sdk/src/",
-                        message: "Please use matrix-js-sdk/src/matrix instead",
+                        message: "Please use 'matrix-js-sdk' instead",
                     },
                     {
-                        name: "matrix-js-sdk/src/index",
-                        message: "Please use matrix-js-sdk/src/matrix instead",
+                        name: "matrix-js-sdk/lib/",
+                        message: "Please use 'matrix-js-sdk' instead",
                     },
                     {
                         name: "emojibase-regex",
@@ -103,67 +97,67 @@ module.exports = {
                     },
                 ],
                 patterns: [
+                    // Ban matrix-js-sdk/src imports in favour of compiled matrix-js-sdk imports to prevent unleashing hell.
                     {
                         group: [
                             "matrix-js-sdk/src/**",
-                            "!matrix-js-sdk/src/matrix",
-                            "!matrix-js-sdk/src/crypto-api",
-                            "!matrix-js-sdk/src/types",
-                            "!matrix-js-sdk/src/testing",
-                            "!matrix-js-sdk/src/utils/**",
-                            "matrix-js-sdk/src/utils/internal/**",
-                            "matrix-js-sdk/lib",
-                            "matrix-js-sdk/lib/",
+                            // "matrix-js-sdk/lib",
+                            // "matrix-js-sdk/lib/",
                             "matrix-js-sdk/lib/**",
+                            "!matrix-js-sdk/lib/crypto-api",
+                            "!matrix-js-sdk/lib/types",
+                            "!matrix-js-sdk/lib/testing",
+                            "!matrix-js-sdk/lib/utils/**",
                             // XXX: Temporarily allow these as they are not available via the main export
-                            "!matrix-js-sdk/src/logger",
-                            "!matrix-js-sdk/src/errors",
-                            "!matrix-js-sdk/src/utils",
-                            "!matrix-js-sdk/src/version-support",
-                            "!matrix-js-sdk/src/randomstring",
-                            "!matrix-js-sdk/src/sliding-sync",
-                            "!matrix-js-sdk/src/browser-index",
-                            "!matrix-js-sdk/src/feature",
-                            "!matrix-js-sdk/src/NamespacedValue",
-                            "!matrix-js-sdk/src/ReEmitter",
-                            "!matrix-js-sdk/src/event-mapper",
-                            "!matrix-js-sdk/src/interactive-auth",
-                            "!matrix-js-sdk/src/secret-storage",
-                            "!matrix-js-sdk/src/room-hierarchy",
-                            "!matrix-js-sdk/src/rendezvous",
-                            "!matrix-js-sdk/src/indexeddb-worker",
-                            "!matrix-js-sdk/src/pushprocessor",
-                            "!matrix-js-sdk/src/extensible_events_v1",
-                            "!matrix-js-sdk/src/extensible_events_v1/PollStartEvent",
-                            "!matrix-js-sdk/src/extensible_events_v1/PollResponseEvent",
-                            "!matrix-js-sdk/src/extensible_events_v1/PollEndEvent",
-                            "!matrix-js-sdk/src/extensible_events_v1/InvalidEventError",
-                            "!matrix-js-sdk/src/oidc",
-                            "!matrix-js-sdk/src/oidc/discovery",
-                            "!matrix-js-sdk/src/oidc/authorize",
-                            "!matrix-js-sdk/src/oidc/validate",
-                            "!matrix-js-sdk/src/oidc/error",
-                            "!matrix-js-sdk/src/oidc/register",
-                            "!matrix-js-sdk/src/webrtc",
-                            "!matrix-js-sdk/src/webrtc/call",
-                            "!matrix-js-sdk/src/webrtc/callFeed",
-                            "!matrix-js-sdk/src/webrtc/mediaHandler",
-                            "!matrix-js-sdk/src/webrtc/callEventTypes",
-                            "!matrix-js-sdk/src/webrtc/callEventHandler",
-                            "!matrix-js-sdk/src/webrtc/groupCallEventHandler",
-                            "!matrix-js-sdk/src/models",
-                            "!matrix-js-sdk/src/models/read-receipt",
-                            "!matrix-js-sdk/src/models/relations-container",
-                            "!matrix-js-sdk/src/models/related-relations",
-                            "!matrix-js-sdk/src/matrixrtc",
+                            "!matrix-js-sdk/lib/logger",
+                            "!matrix-js-sdk/lib/errors",
+                            "!matrix-js-sdk/lib/utils",
+                            "!matrix-js-sdk/lib/version-support",
+                            "!matrix-js-sdk/lib/randomstring",
+                            "!matrix-js-sdk/lib/sliding-sync",
+                            "!matrix-js-sdk/lib/browser-index",
+                            "!matrix-js-sdk/lib/feature",
+                            "!matrix-js-sdk/lib/NamespacedValue",
+                            "!matrix-js-sdk/lib/ReEmitter",
+                            "!matrix-js-sdk/lib/event-mapper",
+                            "!matrix-js-sdk/lib/interactive-auth",
+                            "!matrix-js-sdk/lib/secret-storage",
+                            "!matrix-js-sdk/lib/room-hierarchy",
+                            "!matrix-js-sdk/lib/rendezvous",
+                            "!matrix-js-sdk/lib/indexeddb-worker",
+                            "!matrix-js-sdk/lib/pushprocessor",
+                            "!matrix-js-sdk/lib/extensible_events_v1",
+                            "!matrix-js-sdk/lib/extensible_events_v1/PollStartEvent",
+                            "!matrix-js-sdk/lib/extensible_events_v1/PollResponseEvent",
+                            "!matrix-js-sdk/lib/extensible_events_v1/PollEndEvent",
+                            "!matrix-js-sdk/lib/extensible_events_v1/InvalidEventError",
+                            "!matrix-js-sdk/lib/oidc",
+                            "!matrix-js-sdk/lib/oidc/discovery",
+                            "!matrix-js-sdk/lib/oidc/authorize",
+                            "!matrix-js-sdk/lib/oidc/validate",
+                            "!matrix-js-sdk/lib/oidc/error",
+                            "!matrix-js-sdk/lib/oidc/register",
+                            "!matrix-js-sdk/lib/webrtc",
+                            "!matrix-js-sdk/lib/webrtc/call",
+                            "!matrix-js-sdk/lib/webrtc/callFeed",
+                            "!matrix-js-sdk/lib/webrtc/mediaHandler",
+                            "!matrix-js-sdk/lib/webrtc/callEventTypes",
+                            "!matrix-js-sdk/lib/webrtc/callEventHandler",
+                            "!matrix-js-sdk/lib/webrtc/groupCallEventHandler",
+                            "!matrix-js-sdk/lib/models",
+                            "!matrix-js-sdk/lib/models/read-receipt",
+                            "!matrix-js-sdk/lib/models/relations-container",
+                            "!matrix-js-sdk/lib/models/related-relations",
+                            "!matrix-js-sdk/lib/matrixrtc",
                         ],
-                        message: "Please use matrix-js-sdk/src/matrix instead",
+                        message: "Please use 'matrix-js-sdk' instead",
                     },
                     {
                         group: ["emojibase-regex/emoji*"],
                         message:
                             "This regex doesn't actually test for emoji. See the docs at https://emojibase.dev/docs/regex/ and prefer our own EMOJI_REGEX from HtmlUtils.",
                     },
+                    // Ban compound-design-tokens raw svg imports in favour of their React component counterparts
                     {
                         group: ["@vector-im/compound-design-tokens/icons/*"],
                         message: "Please use @vector-im/compound-design-tokens/assets/web/icons/* instead",

apps/web/package.json

@@ -140,7 +140,6 @@
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
-        "@types/content-type": "^1.1.9",
         "@types/counterpart": "^0.18.1",
         "@types/css-tree": "^2.3.8",
         "@types/diff-match-patch": "^1.0.32",
@@ -162,7 +161,6 @@
         "@types/react-dom": "catalog:",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.16.1",
-        "@types/sdp-transform": "^2.4.10",
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",

apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import type { EmittedEvents, Preset } from "matrix-js-sdk/src/matrix";
+import type { Preset, RoomMemberEvent, RoomStateEvent } from "matrix-js-sdk";
 import { expect, test } from "../../element-web-test";
 import {
     createRoom,
@@ -122,7 +122,7 @@ test.describe("Cryptography", function () {
                 const roomId = await bob.evaluate(
                     async (client, { alice }) => {
                         const encryptionStatePromise = new Promise<void>((resolve) => {
-                            client.on("RoomState.events" as EmittedEvents, (event, _state, _lastStateEvent) => {
+                            client.on("RoomState.events" as RoomStateEvent.Events, (event, _state, _lastStateEvent) => {
                                 if (event.getType() === "m.room.encryption") {
                                     resolve();
                                 }
@@ -253,11 +253,14 @@ test.describe("Cryptography", function () {
 
                         // invite Alice
                         const inviteAlicePromise = new Promise<void>((resolve) => {
-                            client.on("RoomMember.membership" as EmittedEvents, (_event, member, _oldMembership?) => {
-                                if (member.userId === alice.userId && member.membership === "invite") {
-                                    resolve();
-                                }
-                            });
+                            client.on(
+                                "RoomMember.membership" as RoomMemberEvent.Membership,
+                                (_event, member, _oldMembership?) => {
+                                    if (member.userId === alice.userId && member.membership === "invite") {
+                                        resolve();
+                                    }
+                                },
+                            );
                         });
                         await client.invite(roomId, alice.userId);
                         // wait for the invite to come back so that we encrypt to Alice
@@ -271,11 +274,14 @@ test.describe("Cryptography", function () {
 
                         // kick Alice
                         const kickAlicePromise = new Promise<void>((resolve) => {
-                            client.on("RoomMember.membership" as EmittedEvents, (_event, member, _oldMembership?) => {
-                                if (member.userId === alice.userId && member.membership === "leave") {
-                                    resolve();
-                                }
-                            });
+                            client.on(
+                                "RoomMember.membership" as RoomMemberEvent.Membership,
+                                (_event, member, _oldMembership?) => {
+                                    if (member.userId === alice.userId && member.membership === "leave") {
+                                        resolve();
+                                    }
+                                },
+                            );
                         });
                         await client.kick(roomId, alice.userId);
                         await kickAlicePromise;

apps/web/playwright/e2e/crypto/device-verification.spec.ts

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import jsQR from "jsqr";
 
 import type { JSHandle, Locator, Page } from "@playwright/test";
-import type { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
+import type { VerificationRequest } from "matrix-js-sdk/lib/crypto-api";
 import { test, expect } from "../../element-web-test";
 import {
     awaitVerifier,

apps/web/playwright/e2e/crypto/toasts.spec.ts

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
+import { type GeneratedSecretStorageKey } from "matrix-js-sdk/lib/crypto-api";
 
 import { test, expect } from "../../element-web-test";
 import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement, logIntoElementAndVerify } from "./utils";

apps/web/playwright/e2e/crypto/user-verification.spec.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Preset, type Visibility } from "matrix-js-sdk/src/matrix";
+import { type Preset, type Visibility } from "matrix-js-sdk";
 
 import { test, expect } from "../../element-web-test";
 import { doTwoWaySasVerification, awaitVerifier, waitForDevices } from "./utils";

apps/web/playwright/e2e/crypto/utils.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { expect, type JSHandle, type Page } from "@playwright/test";
-import { type ICreateRoomOpts, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type ICreateRoomOpts, type MatrixClient } from "matrix-js-sdk";
 
 import type {
     CryptoEvent,
@@ -17,7 +17,7 @@ import type {
     VerificationRequest,
     Verifier,
     VerifierEvent,
-} from "matrix-js-sdk/src/crypto-api";
+} from "matrix-js-sdk/lib/crypto-api";
 import { type Credentials, type HomeserverInstance } from "../../plugins/homeserver";
 import { type Client } from "../../pages/client";
 import { type ElementAppPage } from "../../pages/ElementAppPage";

apps/web/playwright/e2e/csAPI.ts

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type APIRequestContext } from "@playwright/test";
-import { type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
+import { type KeyBackupInfo } from "matrix-js-sdk/lib/crypto-api";
 import { ClientServerApi } from "@element-hq/element-web-playwright-common/lib/utils/api.js";
 
 import { type HomeserverInstance } from "../plugins/homeserver";

apps/web/playwright/e2e/editing/editing.spec.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { type Locator, type Page } from "@playwright/test";
 
-import type { EventType, IContent, ISendEventResponse, MsgType, Visibility } from "matrix-js-sdk/src/matrix";
+import type { EventType, IContent, ISendEventResponse, MsgType, Visibility } from "matrix-js-sdk";
 import { expect, test } from "../../element-web-test";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { SettingLevel } from "../../../src/settings/SettingLevel";

apps/web/playwright/e2e/knock/knock-into-room.spec.ts

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Visibility } from "matrix-js-sdk/src/matrix";
+import { type Visibility } from "matrix-js-sdk";
 
 import { test, expect } from "../../element-web-test";
 import { waitForRoom } from "../utils";