PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Enable React StrictMode (#28258)

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-25 12:20:25 +01:00 committed by GitHub
parent bdf0f1dcc3
commit da5c97f9fa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 96 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/Modal.tsx
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
import React from "react"; import React, { StrictMode } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import classNames from "classnames"; import classNames from "classnames";
import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils"; import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
@ -416,18 +416,20 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className); const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
const staticDialog = ( const staticDialog = (
<TooltipProvider> <StrictMode>
<div className={classes}> <TooltipProvider>
<Glass className="mx_Dialog_border"> <div className={classes}>
<div className="mx_Dialog">{this.staticModal.elem}</div> <Glass className="mx_Dialog_border">
</Glass> <div className="mx_Dialog">{this.staticModal.elem}</div>
<div </Glass>
data-testid="dialog-background" <div
className="mx_Dialog_background mx_Dialog_staticBackground" data-testid="dialog-background"
onClick={this.onBackgroundClick} className="mx_Dialog_background mx_Dialog_staticBackground"
/> onClick={this.onBackgroundClick}
</div> />
</TooltipProvider> </div>
</TooltipProvider>
</StrictMode>
); );
ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer()); ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@ -443,18 +445,20 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
}); });
const dialog = ( const dialog = (
<TooltipProvider> <StrictMode>
<div className={classes}> <TooltipProvider>
<Glass className="mx_Dialog_border"> <div className={classes}>
<div className="mx_Dialog">{modal.elem}</div> <Glass className="mx_Dialog_border">
</Glass> <div className="mx_Dialog">{modal.elem}</div>
<div </Glass>
data-testid="dialog-background" <div
className="mx_Dialog_background" data-testid="dialog-background"
onClick={this.onBackgroundClick} className="mx_Dialog_background"
/> onClick={this.onBackgroundClick}
</div> />
</TooltipProvider> </div>
</TooltipProvider>
</StrictMode>
); );
setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0); setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0);

18
src/components/views/elements/PersistedElement.tsx
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
import React, { MutableRefObject, ReactNode } from "react"; import React, { MutableRefObject, ReactNode, StrictMode } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils"; import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
import { TooltipProvider } from "@vector-im/compound-web"; import { TooltipProvider } from "@vector-im/compound-web";
@ -167,13 +167,15 @@ export default class PersistedElement extends React.Component<IProps> {
private renderApp(): void { private renderApp(): void {
const content = ( const content = (
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}> <StrictMode>
<TooltipProvider> <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
<div ref={this.collectChild} style={this.props.style}> <TooltipProvider>
{this.props.children} <div ref={this.collectChild} style={this.props.style}>
</div> {this.props.children}
</TooltipProvider> </div>
</MatrixClientContext.Provider> </TooltipProvider>
</MatrixClientContext.Provider>
</StrictMode>
); );
ReactDOM.render(content, getOrCreateContainer("mx_persistedElement_" + this.props.persistKey)); ReactDOM.render(content, getOrCreateContainer("mx_persistedElement_" + this.props.persistKey));

17
src/components/views/messages/TextualBody.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
import React, { createRef, SyntheticEvent, MouseEvent } from "react"; import React, { createRef, SyntheticEvent, MouseEvent, StrictMode } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { MsgType } from "matrix-js-sdk/src/matrix"; import { MsgType } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web"; import { TooltipProvider } from "@vector-im/compound-web";
@ -118,7 +118,12 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
// Insert containing div in place of <pre> block // Insert containing div in place of <pre> block
pre.parentNode?.replaceChild(root, pre); pre.parentNode?.replaceChild(root, pre);
ReactDOM.render(<CodeBlock onHeightChanged={this.props.onHeightChanged}>{pre}</CodeBlock>, root); ReactDOM.render(
<StrictMode>
<CodeBlock onHeightChanged={this.props.onHeightChanged}>{pre}</CodeBlock>
</StrictMode>,
root,
);
} }
public componentDidUpdate(prevProps: Readonly<IBodyProps>): void { public componentDidUpdate(prevProps: Readonly<IBodyProps>): void {
@ -192,9 +197,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
const reason = node.getAttribute("data-mx-spoiler") ?? undefined; const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
node.removeAttribute("data-mx-spoiler"); // we don't want to recurse node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
const spoiler = ( const spoiler = (
<TooltipProvider> <StrictMode>
<Spoiler reason={reason} contentHtml={node.outerHTML} /> <TooltipProvider>
</TooltipProvider> <Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
</StrictMode>
); );
ReactDOM.render(spoiler, spoilerContainer); ReactDOM.render(spoiler, spoilerContainer);

28
src/utils/pillify.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
import React from "react"; import React, { StrictMode } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { PushProcessor } from "matrix-js-sdk/src/pushprocessor"; import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix"; import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
@ -76,9 +76,11 @@ export function pillifyLinks(
const pillContainer = document.createElement("span"); const pillContainer = document.createElement("span");
const pill = ( const pill = (
<TooltipProvider> <StrictMode>
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} /> <TooltipProvider>
</TooltipProvider> <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
</TooltipProvider>
</StrictMode>
); );
ReactDOM.render(pill, pillContainer); ReactDOM.render(pill, pillContainer);
@ -133,14 +135,16 @@ export function pillifyLinks(
const pillContainer = document.createElement("span"); const pillContainer = document.createElement("span");
const pill = ( const pill = (
<TooltipProvider> <StrictMode>
<Pill <TooltipProvider>
type={PillType.AtRoomMention} <Pill
inMessage={true} type={PillType.AtRoomMention}
room={room} inMessage={true}
shouldShowPillAvatar={shouldShowPillAvatar} room={room}
/> shouldShowPillAvatar={shouldShowPillAvatar}
</TooltipProvider> />
</TooltipProvider>
</StrictMode>
); );
ReactDOM.render(pill, pillContainer); ReactDOM.render(pill, pillContainer);

14
src/utils/tooltipify.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
import React from "react"; import React, { StrictMode } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { TooltipProvider } from "@vector-im/compound-web"; import { TooltipProvider } from "@vector-im/compound-web";
@ -53,11 +53,13 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
// wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this // wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
// without the superfluous span but this is not something React trivially supports at this time. // without the superfluous span but this is not something React trivially supports at this time.
const tooltip = ( const tooltip = (
<TooltipProvider> <StrictMode>
<LinkWithTooltip tooltip={href}> <TooltipProvider>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} /> <LinkWithTooltip tooltip={href}>
</LinkWithTooltip> <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</TooltipProvider> </LinkWithTooltip>
</TooltipProvider>
</StrictMode>
); );
ReactDOM.render(tooltip, node); ReactDOM.render(tooltip, node);

26
src/vector/app.tsx
View file

@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
// To ensure we load the browser-matrix version first // To ensure we load the browser-matrix version first
import "matrix-js-sdk/src/browser-index"; import "matrix-js-sdk/src/browser-index";
import React, { ReactElement } from "react"; import React, { ReactElement, StrictMode } from "react";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import { createClient, AutoDiscovery, ClientConfig } from "matrix-js-sdk/src/matrix"; import { createClient, AutoDiscovery, ClientConfig } from "matrix-js-sdk/src/matrix";
import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle"; import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle";
@ -111,17 +111,19 @@ export async function loadApp(fragParams: {}, matrixChatRef: React.Ref<MatrixCha
return ( return (
<wrapperOpts.Wrapper> <wrapperOpts.Wrapper>
<MatrixChat <StrictMode>
ref={matrixChatRef} <MatrixChat
onNewScreen={onNewScreen} ref={matrixChatRef}
config={config} onNewScreen={onNewScreen}
realQueryParams={params} config={config}
startingFragmentQueryParams={fragParams} realQueryParams={params}
enableGuest={!config.disable_guests} startingFragmentQueryParams={fragParams}
onTokenLoginCompleted={onTokenLoginCompleted} enableGuest={!config.disable_guests}
initialScreenAfterLogin={initialScreenAfterLogin} onTokenLoginCompleted={onTokenLoginCompleted}
defaultDeviceDisplayName={defaultDeviceName} initialScreenAfterLogin={initialScreenAfterLogin}
/> defaultDeviceDisplayName={defaultDeviceName}
/>
</StrictMode>
</wrapperOpts.Wrapper> </wrapperOpts.Wrapper>
); );
} }

10
src/vector/init.tsx
View file

@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
import * as ReactDOM from "react-dom"; import * as ReactDOM from "react-dom";
import * as React from "react"; import React, { StrictMode } from "react";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import * as languageHandler from "../languageHandler"; import * as languageHandler from "../languageHandler";
@ -105,7 +105,9 @@ export async function showError(title: string, messages?: string[]): Promise<voi
"../async-components/structures/ErrorView" "../async-components/structures/ErrorView"
); );
window.matrixChat = ReactDOM.render( window.matrixChat = ReactDOM.render(
<ErrorView title={title} messages={messages} />, <StrictMode>
<ErrorView title={title} messages={messages} />
</StrictMode>,
document.getElementById("matrixchat"), document.getElementById("matrixchat"),
); );
} }
@ -116,7 +118,9 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
"../async-components/structures/ErrorView" "../async-components/structures/ErrorView"
); );
window.matrixChat = ReactDOM.render( window.matrixChat = ReactDOM.render(
<UnsupportedBrowserView onAccept={onAccept} />, <StrictMode>
<UnsupportedBrowserView onAccept={onAccept} />
</StrictMode>,
document.getElementById("matrixchat"), document.getElementById("matrixchat"),
); );
} }