Update type and usage of window.matrixChat to be better React 18 friendly (#28415)

* Update type and usage of window.matrixChat to be better React 18 friendly

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Make modules import async to make the file testable

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/@types/global.d.ts

@@ -10,7 +10,6 @@ Please see LICENSE files in the repository root for full details.
 import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first
 import "@types/modernizr";
 
-import type { Renderer } from "react-dom";
 import type { logger } from "matrix-js-sdk/src/logger";
 import ContentMessages from "../ContentMessages";
 import { IMatrixClientPeg } from "../MatrixClientPeg";
@@ -44,6 +43,7 @@ import AutoRageshakeStore from "../stores/AutoRageshakeStore";
 import { IConfigOptions } from "../IConfigOptions";
 import { MatrixDispatcher } from "../dispatcher/dispatcher";
 import { DeepReadonly } from "./common";
+import MatrixChat from "../components/structures/MatrixChat";
 
 /* eslint-disable @typescript-eslint/naming-convention */
 
@@ -71,7 +71,7 @@ declare global {
     interface Window {
         mxSendRageshake: (text: string, withLogs?: boolean) => void;
         matrixLogger: typeof logger;
-        matrixChat: ReturnType<Renderer>;
+        matrixChat?: MatrixChat;
         mxSendSentryReport: (userText: string, issueUrl: string, error: Error) => Promise<void>;
         mxLoginWithAccessToken: (hsUrl: string, accessToken: string) => Promise<void>;
         mxAutoRageshakeStore?: AutoRageshakeStore;

src/utils/login.ts

@@ -6,7 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import type MatrixChat from "../components/structures/MatrixChat";
 import Views from "../Views";
 
 export function isLoggedIn(): boolean {
@@ -14,6 +13,5 @@ export function isLoggedIn(): boolean {
     // `element-web` and into this file? Better yet, we should probably create a
     // store to hold this state.
     // See also https://github.com/vector-im/element-web/issues/15034.
-    const app = window.matrixChat;
-    return (app as MatrixChat)?.state.view === Views.LOGGED_IN;
+    return window.matrixChat?.state.view === Views.LOGGED_IN;
 }

src/vector/init.tsx

@@ -23,9 +23,6 @@ import ElectronPlatform from "./platform/ElectronPlatform";
 import PWAPlatform from "./platform/PWAPlatform";
 import WebPlatform from "./platform/WebPlatform";
 import { initRageshake, initRageshakeStore } from "./rageshakesetup";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - this path is created at runtime and therefore won't exist at typecheck time
-import { INSTALLED_MODULES } from "../modules";
 
 export const rageshakePromise = initRageshake();
 
@@ -104,7 +101,7 @@ export async function showError(title: string, messages?: string[]): Promise<voi
         /* webpackChunkName: "error-view" */
         "../async-components/structures/ErrorView"
     );
-    window.matrixChat = ReactDOM.render(
+    ReactDOM.render(
         <StrictMode>
             <ErrorView title={title} messages={messages} />
         </StrictMode>,
@@ -117,7 +114,7 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
         /* webpackChunkName: "error-view" */
         "../async-components/structures/ErrorView"
     );
-    window.matrixChat = ReactDOM.render(
+    ReactDOM.render(
         <StrictMode>
             <UnsupportedBrowserView onAccept={onAccept} />
         </StrictMode>,
@@ -126,6 +123,9 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
 }
 
 export async function loadModules(): Promise<void> {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - this path is created at runtime and therefore won't exist at typecheck time
+    const { INSTALLED_MODULES } = await import("../modules");
     for (const InstalledModule of INSTALLED_MODULES) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore - we know the constructor exists even if TypeScript can't be convinced of that

src/vector/routing.ts

@@ -11,7 +11,6 @@ Please see LICENSE files in the repository root for full details.
 import { logger } from "matrix-js-sdk/src/logger";
 import { QueryDict } from "matrix-js-sdk/src/utils";
 
-import MatrixChatType from "../components/structures/MatrixChat";
 import { parseQsFromFragment } from "./url_utils";
 
 let lastLocationHashSet: string | null = null;
@@ -31,7 +30,7 @@ function routeUrl(location: Location): void {
 
     logger.log("Routing URL ", location.href);
     const s = getScreenFromLocation(location);
-    (window.matrixChat as MatrixChatType).showScreen(s.screen, s.params);
+    window.matrixChat.showScreen(s.screen, s.params);
 }
 
 function onHashChange(): void {