Skip to content

Commit

Permalink
Revert "Enable React StrictMode (element-hq#28258)"
Browse files Browse the repository at this point in the history
This reverts commit da5c97f.
timvahlbrock committed Oct 27, 2024
1 parent aa46664 commit fa76ae6
Showing 7 changed files with 71 additions and 96 deletions.
54 changes: 25 additions & 29 deletions src/Modal.tsx
Original file line number Diff line number Diff line change
@@ -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, { StrictMode } from "react";
import React from "react";
import ReactDOM from "react-dom";
import classNames from "classnames";
import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
@@ -416,20 +416,18 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);

const staticDialog = (
<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>
<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>
);

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

const dialog = (
<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>
<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>
);

setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0);
18 changes: 8 additions & 10 deletions src/components/views/elements/PersistedElement.tsx
Original file line number Diff line number Diff line change
@@ -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, StrictMode } from "react";
import React, { MutableRefObject, ReactNode } from "react";
import ReactDOM from "react-dom";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
import { TooltipProvider } from "@vector-im/compound-web";
@@ -167,15 +167,13 @@ export default class PersistedElement extends React.Component<IProps> {

private renderApp(): void {
const content = (
<StrictMode>
<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>
);

ReactDOM.render(content, getOrCreateContainer("mx_persistedElement_" + this.props.persistKey));
17 changes: 5 additions & 12 deletions src/components/views/messages/TextualBody.tsx
Original file line number Diff line number Diff line change
@@ -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, StrictMode } from "react";
import React, { createRef, SyntheticEvent, MouseEvent } from "react";
import ReactDOM from "react-dom";
import { MsgType } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
@@ -118,12 +118,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
// Insert containing div in place of <pre> block
pre.parentNode?.replaceChild(root, pre);

ReactDOM.render(
<StrictMode>
<CodeBlock onHeightChanged={this.props.onHeightChanged}>{pre}</CodeBlock>
</StrictMode>,
root,
);
ReactDOM.render(<CodeBlock onHeightChanged={this.props.onHeightChanged}>{pre}</CodeBlock>, root);
}

public componentDidUpdate(prevProps: Readonly<IBodyProps>): void {
@@ -197,11 +192,9 @@ 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 = (
<StrictMode>
<TooltipProvider>
<Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
</StrictMode>
<TooltipProvider>
<Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
);

ReactDOM.render(spoiler, spoilerContainer);
28 changes: 12 additions & 16 deletions src/utils/pillify.tsx
Original file line number Diff line number Diff line change
@@ -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, { StrictMode } from "react";
import React 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";
@@ -76,11 +76,9 @@ export function pillifyLinks(
const pillContainer = document.createElement("span");

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

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

const pillContainer = document.createElement("span");
const pill = (
<StrictMode>
<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>
);

ReactDOM.render(pill, pillContainer);
14 changes: 6 additions & 8 deletions src/utils/tooltipify.tsx
Original file line number Diff line number Diff line change
@@ -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, { StrictMode } from "react";
import React from "react";
import ReactDOM from "react-dom";
import { TooltipProvider } from "@vector-im/compound-web";

@@ -53,13 +53,11 @@ 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 = (
<StrictMode>
<TooltipProvider>
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
</TooltipProvider>
</StrictMode>
<TooltipProvider>
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
</TooltipProvider>
);

ReactDOM.render(tooltip, node);
26 changes: 12 additions & 14 deletions src/vector/app.tsx
Original file line number Diff line number Diff line change
@@ -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, StrictMode } from "react";
import React, { ReactElement } 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";
@@ -111,19 +111,17 @@ export async function loadApp(fragParams: {}, matrixChatRef: React.Ref<MatrixCha

return (
<wrapperOpts.Wrapper>
<StrictMode>
<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}
/>
</wrapperOpts.Wrapper>
);
}
10 changes: 3 additions & 7 deletions src/vector/init.tsx
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
*/

import * as ReactDOM from "react-dom";
import React, { StrictMode } from "react";
import * as React from "react";
import { logger } from "matrix-js-sdk/src/logger";

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

0 comments on commit fa76ae6

Please sign in to comment.