Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable React StrictMode #28258

Merged
merged 2 commits into from
Oct 25, 2024
Merged

Enable React StrictMode #28258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efe7c36
Enable React StrictMode
t3chguy Oct 21, 2024
fa28f20
Merge branch 'develop' into t3chguy/react18/strict-mode
t3chguy Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 29 additions & 25 deletions src/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

import React from "react";
import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import classNames from "classnames";
import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
Expand Down Expand Up @@ -416,18 +416,20 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);

const staticDialog = (
<TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{this.staticModal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background mx_Dialog_staticBackground"
onClick={this.onBackgroundClick}
/>
</div>
</TooltipProvider>
<StrictMode>
<TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{this.staticModal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background mx_Dialog_staticBackground"
onClick={this.onBackgroundClick}
/>
</div>
</TooltipProvider>
</StrictMode>
);

ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
Expand All @@ -443,18 +445,20 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
});

const dialog = (
<TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{modal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background"
onClick={this.onBackgroundClick}
/>
</div>
</TooltipProvider>
<StrictMode>
<TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{modal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background"
onClick={this.onBackgroundClick}
/>
</div>
</TooltipProvider>
</StrictMode>
);

setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0);
Expand Down
18 changes: 10 additions & 8 deletions src/components/views/elements/PersistedElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

import React, { MutableRefObject, ReactNode } from "react";
import React, { MutableRefObject, ReactNode, StrictMode } from "react";
import ReactDOM from "react-dom";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
import { TooltipProvider } from "@vector-im/compound-web";
Expand Down Expand Up @@ -167,13 +167,15 @@ export default class PersistedElement extends React.Component<IProps> {

private renderApp(): void {
const content = (
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
<TooltipProvider>
<div ref={this.collectChild} style={this.props.style}>
{this.props.children}
</div>
</TooltipProvider>
</MatrixClientContext.Provider>
<StrictMode>
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
<TooltipProvider>
<div ref={this.collectChild} style={this.props.style}>
{this.props.children}
</div>
</TooltipProvider>
</MatrixClientContext.Provider>
</StrictMode>
);

ReactDOM.render(content, getOrCreateContainer("mx_persistedElement_" + this.props.persistKey));
Expand Down
17 changes: 12 additions & 5 deletions src/components/views/messages/TextualBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

import React, { createRef, SyntheticEvent, MouseEvent } from "react";
import React, { createRef, SyntheticEvent, MouseEvent, StrictMode } from "react";
import ReactDOM from "react-dom";
import { MsgType } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
Expand Down Expand Up @@ -118,7 +118,12 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
// Insert containing div in place of <pre> block
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 {
Expand Down Expand Up @@ -192,9 +197,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
const spoiler = (
<TooltipProvider>
<Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
<StrictMode>
<TooltipProvider>
<Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
</StrictMode>
);

ReactDOM.render(spoiler, spoilerContainer);
Expand Down
28 changes: 16 additions & 12 deletions src/utils/pillify.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

import React from "react";
import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
Expand Down Expand Up @@ -76,9 +76,11 @@ export function pillifyLinks(
const pillContainer = document.createElement("span");

const pill = (
<TooltipProvider>
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
</TooltipProvider>
<StrictMode>
<TooltipProvider>
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
</TooltipProvider>
</StrictMode>
);

ReactDOM.render(pill, pillContainer);
Expand Down Expand Up @@ -133,14 +135,16 @@ export function pillifyLinks(

const pillContainer = document.createElement("span");
const pill = (
<TooltipProvider>
<Pill
type={PillType.AtRoomMention}
inMessage={true}
room={room}
shouldShowPillAvatar={shouldShowPillAvatar}
/>
</TooltipProvider>
<StrictMode>
<TooltipProvider>
<Pill
type={PillType.AtRoomMention}
inMessage={true}
room={room}
shouldShowPillAvatar={shouldShowPillAvatar}
/>
</TooltipProvider>
</StrictMode>
);

ReactDOM.render(pill, pillContainer);
Expand Down
14 changes: 8 additions & 6 deletions src/utils/tooltipify.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

import React from "react";
import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import { TooltipProvider } from "@vector-im/compound-web";

Expand Down Expand Up @@ -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
// without the superfluous span but this is not something React trivially supports at this time.
const tooltip = (
<TooltipProvider>
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
</TooltipProvider>
<StrictMode>
<TooltipProvider>
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
</TooltipProvider>
</StrictMode>
);

ReactDOM.render(tooltip, node);
Expand Down
26 changes: 14 additions & 12 deletions src/vector/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.

// To ensure we load the browser-matrix version first
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 { createClient, AutoDiscovery, ClientConfig } from "matrix-js-sdk/src/matrix";
import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle";
Expand Down Expand Up @@ -111,17 +111,19 @@ export async function loadApp(fragParams: {}, matrixChatRef: React.Ref<MatrixCha

return (
<wrapperOpts.Wrapper>
<MatrixChat
ref={matrixChatRef}
onNewScreen={onNewScreen}
config={config}
realQueryParams={params}
startingFragmentQueryParams={fragParams}
enableGuest={!config.disable_guests}
onTokenLoginCompleted={onTokenLoginCompleted}
initialScreenAfterLogin={initialScreenAfterLogin}
defaultDeviceDisplayName={defaultDeviceName}
/>
<StrictMode>
<MatrixChat
ref={matrixChatRef}
onNewScreen={onNewScreen}
config={config}
realQueryParams={params}
startingFragmentQueryParams={fragParams}
enableGuest={!config.disable_guests}
onTokenLoginCompleted={onTokenLoginCompleted}
initialScreenAfterLogin={initialScreenAfterLogin}
defaultDeviceDisplayName={defaultDeviceName}
/>
</StrictMode>
</wrapperOpts.Wrapper>
);
}
Expand Down
10 changes: 7 additions & 3 deletions src/vector/init.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
*/

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 * as languageHandler from "../languageHandler";
Expand Down Expand Up @@ -105,7 +105,9 @@ export async function showError(title: string, messages?: string[]): Promise<voi
"../async-components/structures/ErrorView"
);
window.matrixChat = ReactDOM.render(
<ErrorView title={title} messages={messages} />,
<StrictMode>
<ErrorView title={title} messages={messages} />
</StrictMode>,
document.getElementById("matrixchat"),
);
}
Expand All @@ -116,7 +118,9 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
"../async-components/structures/ErrorView"
);
window.matrixChat = ReactDOM.render(
<UnsupportedBrowserView onAccept={onAccept} />,
<StrictMode>
<UnsupportedBrowserView onAccept={onAccept} />
</StrictMode>,
document.getElementById("matrixchat"),
);
}
Expand Down
Loading