Skip to content

Commit ca239fe

Browse files
t3chguyt3chguy
authored
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 <[email protected]> * Improve coverage Signed-off-by: Michael Telatynski <[email protected]> * Make modules import async to make the file testable Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 349c9b0 commit ca239fe

File tree

8 files changed

+351
-13
lines changed

8 files changed

+351
-13
lines changed

‎src/@types/global.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ Please see LICENSE files in the repository root for full details.
1010
import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first
1111
import "@types/modernizr";
1212

13-
import type { Renderer } from "react-dom";
1413
import type { logger } from "matrix-js-sdk/src/logger";
1514
import ContentMessages from "../ContentMessages";
1615
import { IMatrixClientPeg } from "../MatrixClientPeg";
@@ -44,6 +43,7 @@ import AutoRageshakeStore from "../stores/AutoRageshakeStore";
4443
import { IConfigOptions } from "../IConfigOptions";
4544
import { MatrixDispatcher } from "../dispatcher/dispatcher";
4645
import { DeepReadonly } from "./common";
46+
import MatrixChat from "../components/structures/MatrixChat";
4747

4848
/* eslint-disable @typescript-eslint/naming-convention */
4949

@@ -71,7 +71,7 @@ declare global {
7171
interface Window {
7272
mxSendRageshake: (text: string, withLogs?: boolean) => void;
7373
matrixLogger: typeof logger;
74-
matrixChat: ReturnType<Renderer>;
74+
matrixChat?: MatrixChat;
7575
mxSendSentryReport: (userText: string, issueUrl: string, error: Error) => Promise<void>;
7676
mxLoginWithAccessToken: (hsUrl: string, accessToken: string) => Promise<void>;
7777
mxAutoRageshakeStore?: AutoRageshakeStore;

‎src/utils/login.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import type MatrixChat from "../components/structures/MatrixChat";
109
import Views from "../Views";
1110

1211
export function isLoggedIn(): boolean {
1312
// JRS: Maybe we should move the step that writes this to the window out of
1413
// `element-web` and into this file? Better yet, we should probably create a
1514
// store to hold this state.
1615
// See also https://github.com/vector-im/element-web/issues/15034.
17-
const app = window.matrixChat;
18-
return (app as MatrixChat)?.state.view === Views.LOGGED_IN;
16+
return window.matrixChat?.state.view === Views.LOGGED_IN;
1917
}

‎src/vector/init.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,6 @@ import ElectronPlatform from "./platform/ElectronPlatform";
2323
import PWAPlatform from "./platform/PWAPlatform";
2424
import WebPlatform from "./platform/WebPlatform";
2525
import { initRageshake, initRageshakeStore } from "./rageshakesetup";
26-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
27-
// @ts-ignore - this path is created at runtime and therefore won't exist at typecheck time
28-
import { INSTALLED_MODULES } from "../modules";
2926

3027
export const rageshakePromise = initRageshake();
3128

@@ -104,7 +101,7 @@ export async function showError(title: string, messages?: string[]): Promise<voi
104101
/* webpackChunkName: "error-view" */
105102
"../async-components/structures/ErrorView"
106103
);
107-
window.matrixChat = ReactDOM.render(
104+
ReactDOM.render(
108105
<StrictMode>
109106
<ErrorView title={title} messages={messages} />
110107
</StrictMode>,
@@ -117,7 +114,7 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
117114
/* webpackChunkName: "error-view" */
118115
"../async-components/structures/ErrorView"
119116
);
120-
window.matrixChat = ReactDOM.render(
117+
ReactDOM.render(
121118
<StrictMode>
122119
<UnsupportedBrowserView onAccept={onAccept} />
123120
</StrictMode>,
@@ -126,6 +123,9 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
126123
}
127124

128125
export async function loadModules(): Promise<void> {
126+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
127+
// @ts-ignore - this path is created at runtime and therefore won't exist at typecheck time
128+
const { INSTALLED_MODULES } = await import("../modules");
129129
for (const InstalledModule of INSTALLED_MODULES) {
130130
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
131131
// @ts-ignore - we know the constructor exists even if TypeScript can't be convinced of that

‎src/vector/routing.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ Please see LICENSE files in the repository root for full details.
1111
import { logger } from "matrix-js-sdk/src/logger";
1212
import { QueryDict } from "matrix-js-sdk/src/utils";
1313

14-
import MatrixChatType from "../components/structures/MatrixChat";
1514
import { parseQsFromFragment } from "./url_utils";
1615

1716
let lastLocationHashSet: string | null = null;
@@ -31,7 +30,7 @@ function routeUrl(location: Location): void {
3130

3231
logger.log("Routing URL ", location.href);
3332
const s = getScreenFromLocation(location);
34-
(window.matrixChat as MatrixChatType).showScreen(s.screen, s.params);
33+
window.matrixChat.showScreen(s.screen, s.params);
3534
}
3635

3736
function onHashChange(): void {

‎test/unit-tests/utils/login-test.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
Copyright 2024 New Vector Ltd.
3+
4+
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
5+
Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
import MatrixChat from "../../../src/components/structures/MatrixChat.tsx";
9+
import { isLoggedIn } from "../../../src/utils/login.ts";
10+
import Views from "../../../src/Views.ts";
11+
12+
describe("isLoggedIn", () => {
13+
it("should return true if MatrixChat state view is LOGGED_IN", () => {
14+
window.matrixChat = {
15+
state: {
16+
view: Views.LOGGED_IN,
17+
},
18+
} as unknown as MatrixChat;
19+
20+
expect(isLoggedIn()).toBe(true);
21+
});
22+
});

‎test/unit-tests/vector/__snapshots__/init-test.ts.snap

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`showError should match snapshot 1`] = `
4+
<div
5+
id="matrixchat"
6+
>
7+
<div
8+
class="mx_ErrorView cpd-theme-light"
9+
>
10+
<img
11+
alt="Element"
12+
class="mx_ErrorView_logo"
13+
height="160"
14+
src="themes/element/img/logos/element-app-logo.png"
15+
/>
16+
<div
17+
class="mx_ErrorView_container"
18+
>
19+
<h1
20+
class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
21+
>
22+
Error title
23+
</h1>
24+
<p
25+
class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
26+
>
27+
msg1
28+
</p>
29+
<p
30+
class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
31+
>
32+
msg2
33+
</p>
34+
</div>
35+
</div>
36+
</div>
37+
`;
38+
39+
exports[`showIncompatibleBrowser should match snapshot 1`] = `
40+
<div
41+
id="matrixchat"
42+
>
43+
<div
44+
class="mx_ErrorView cpd-theme-light"
45+
>
46+
<img
47+
alt="Element"
48+
class="mx_ErrorView_logo"
49+
height="160"
50+
src="themes/element/img/logos/element-app-logo.png"
51+
/>
52+
<div
53+
class="mx_ErrorView_container"
54+
>
55+
<h1
56+
class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
57+
>
58+
Element does not support this browser
59+
</h1>
60+
<p
61+
class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
62+
>
63+
Element uses some browser features which are not available in your current browser. If you continue, some features may stop working and there is a risk that you may lose data in the future.
64+
</p>
65+
<p
66+
class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
67+
>
68+
<span>
69+
For the best experience, use
70+
<a
71+
href="https://google.com/chrome"
72+
rel="noreferrer noopener"
73+
target="_blank"
74+
>
75+
Chrome
76+
</a>
77+
,
78+
<a
79+
href="https://firefox.com"
80+
rel="noreferrer noopener"
81+
target="_blank"
82+
>
83+
Firefox
84+
</a>
85+
,
86+
<a
87+
href="https://microsoft.com/edge"
88+
rel="noreferrer noopener"
89+
target="_blank"
90+
>
91+
Edge
92+
</a>
93+
, or
94+
<a
95+
href="https://apple.com/safari"
96+
rel="noreferrer noopener"
97+
target="_blank"
98+
>
99+
Safari
100+
</a>
101+
.
102+
</span>
103+
</p>
104+
<div
105+
class="mx_Flex mx_ErrorView_buttons"
106+
>
107+
<button
108+
class="_button_i91xf_17 _has-icon_i91xf_66"
109+
data-kind="secondary"
110+
data-size="sm"
111+
role="button"
112+
tabindex="0"
113+
>
114+
<svg
115+
aria-hidden="true"
116+
fill="currentColor"
117+
height="20"
118+
viewBox="0 0 24 24"
119+
width="20"
120+
xmlns="http://www.w3.org/2000/svg"
121+
>
122+
<path
123+
d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"
124+
/>
125+
<path
126+
d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z"
127+
/>
128+
</svg>
129+
Learn more
130+
</button>
131+
<button
132+
class="_button_i91xf_17"
133+
data-kind="primary"
134+
data-size="sm"
135+
role="button"
136+
tabindex="0"
137+
>
138+
Continue anyway
139+
</button>
140+
</div>
141+
</div>
142+
<div
143+
class="_separator_144s5_17"
144+
data-kind="primary"
145+
data-orientation="horizontal"
146+
role="separator"
147+
/>
148+
<h2
149+
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
150+
>
151+
Use Element Desktop instead
152+
</h2>
153+
<div
154+
class="mx_Flex"
155+
>
156+
<a
157+
class="_button_i91xf_17 _has-icon_i91xf_66"
158+
data-kind="secondary"
159+
data-size="lg"
160+
href="https://packages.element.io/desktop/install/macos/Element.dmg"
161+
role="link"
162+
tabindex="0"
163+
>
164+
<div
165+
aria-hidden="true"
166+
height="20"
167+
width="20"
168+
/>
169+
Mac
170+
</a>
171+
<a
172+
class="_button_i91xf_17 _has-icon_i91xf_66"
173+
data-kind="secondary"
174+
data-size="lg"
175+
href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
176+
role="link"
177+
tabindex="0"
178+
>
179+
<div
180+
aria-hidden="true"
181+
height="20"
182+
width="20"
183+
/>
184+
Windows (64-bit)
185+
</a>
186+
<a
187+
class="_button_i91xf_17 _has-icon_i91xf_66"
188+
data-kind="secondary"
189+
data-size="lg"
190+
href="https://packages.element.io/desktop/install/win32/ia32/Element%20Setup.exe"
191+
role="link"
192+
tabindex="0"
193+
>
194+
<div
195+
aria-hidden="true"
196+
height="20"
197+
width="20"
198+
/>
199+
Windows (32-bit)
200+
</a>
201+
<a
202+
class="_button_i91xf_17 _has-icon_i91xf_66"
203+
data-kind="secondary"
204+
data-size="lg"
205+
href="https://element.io/download#linux"
206+
role="link"
207+
tabindex="0"
208+
>
209+
<div
210+
aria-hidden="true"
211+
height="20"
212+
width="20"
213+
/>
214+
Linux
215+
</a>
216+
</div>
217+
<h2
218+
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
219+
>
220+
Or use our mobile app
221+
</h2>
222+
<div
223+
class="mx_Flex"
224+
>
225+
<a
226+
href="https://apps.apple.com/app/vector/id1083446067"
227+
rel="noreferrer noopener"
228+
target="_blank"
229+
>
230+
<img
231+
alt="Apple App Store"
232+
height="64"
233+
src="themes/element/img/download/apple.svg"
234+
/>
235+
</a>
236+
<a
237+
href="https://play.google.com/store/apps/details?id=im.vector.app"
238+
rel="noreferrer noopener"
239+
target="_blank"
240+
>
241+
<img
242+
alt="Google Play Store"
243+
height="64"
244+
src="themes/element/img/download/google.svg"
245+
/>
246+
</a>
247+
<a
248+
href="https://f-droid.org/repository/browse/?fdid=im.vector.app"
249+
rel="noreferrer noopener"
250+
target="_blank"
251+
>
252+
<img
253+
alt="F-Droid"
254+
height="64"
255+
src="themes/element/img/download/fdroid.svg"
256+
/>
257+
</a>
258+
</div>
259+
</div>
260+
</div>
261+
`;

0 commit comments

Comments
 (0)