From da5c97f9fafe7e92f00a30ed49f1a15c2386defb Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 25 Oct 2024 12:20:25 +0100 Subject: [PATCH] Enable React StrictMode (#28258) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/Modal.tsx | 54 ++++++++++--------- .../views/elements/PersistedElement.tsx | 18 ++++--- src/components/views/messages/TextualBody.tsx | 17 ++++-- src/utils/pillify.tsx | 28 +++++----- src/utils/tooltipify.tsx | 14 ++--- src/vector/app.tsx | 26 ++++----- src/vector/init.tsx | 10 ++-- 7 files changed, 96 insertions(+), 71 deletions(-) diff --git a/src/Modal.tsx b/src/Modal.tsx index 53a1935294..9e6a7672be 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -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"; @@ -416,18 +416,20 @@ export class ModalManager extends TypedEventEmitter -
- -
{this.staticModal.elem}
- -
-
- + + +
+ +
{this.staticModal.elem}
+ +
+
+ + ); ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer()); @@ -443,18 +445,20 @@ export class ModalManager extends TypedEventEmitter -
- -
{modal.elem}
- -
-
- + + +
+ +
{modal.elem}
+ +
+
+ + ); setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0); diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx index 1b7b6543e9..20584f3794 100644 --- a/src/components/views/elements/PersistedElement.tsx +++ b/src/components/views/elements/PersistedElement.tsx @@ -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"; @@ -167,13 +167,15 @@ export default class PersistedElement extends React.Component { private renderApp(): void { const content = ( - - -
- {this.props.children} -
- - + + + +
+ {this.props.children} +
+ + + ); ReactDOM.render(content, getOrCreateContainer("mx_persistedElement_" + this.props.persistKey)); diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index 0e0c29747f..7955d964a3 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -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"; @@ -118,7 +118,12 @@ export default class TextualBody extends React.Component { // Insert containing div in place of 
 block
         pre.parentNode?.replaceChild(root, pre);
 
-        ReactDOM.render({pre}, root);
+        ReactDOM.render(
+            
+                {pre}
+            ,
+            root,
+        );
     }
 
     public componentDidUpdate(prevProps: Readonly): void {
@@ -192,9 +197,11 @@ export default class TextualBody extends React.Component {
                 const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
                 node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
                 const spoiler = (
-                    
-                        
-                    
+                    
+                        
+                            
+                        
+                    
                 );
 
                 ReactDOM.render(spoiler, spoilerContainer);
diff --git a/src/utils/pillify.tsx b/src/utils/pillify.tsx
index 2c19f11491..063012d16f 100644
--- a/src/utils/pillify.tsx
+++ b/src/utils/pillify.tsx
@@ -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";
@@ -76,9 +76,11 @@ export function pillifyLinks(
                 const pillContainer = document.createElement("span");
 
                 const pill = (
-                    
-                        
-                    
+                    
+                        
+                            
+                        
+                    
                 );
 
                 ReactDOM.render(pill, pillContainer);
@@ -133,14 +135,16 @@ export function pillifyLinks(
 
                         const pillContainer = document.createElement("span");
                         const pill = (
-                            
-                                
-                            
+                            
+                                
+                                    
+                                
+                            
                         );
 
                         ReactDOM.render(pill, pillContainer);
diff --git a/src/utils/tooltipify.tsx b/src/utils/tooltipify.tsx
index 65ce431a97..bcda256a9c 100644
--- a/src/utils/tooltipify.tsx
+++ b/src/utils/tooltipify.tsx
@@ -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";
 
@@ -53,11 +53,13 @@ export function tooltipifyLinks(rootNodes: ArrayLike, 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 = (
-                
-                    
-                        
-                    
-                
+                
+                    
+                        
+                            
+                        
+                    
+                
             );
 
             ReactDOM.render(tooltip, node);
diff --git a/src/vector/app.tsx b/src/vector/app.tsx
index 0c2230bbb8..da0f3f3941 100644
--- a/src/vector/app.tsx
+++ b/src/vector/app.tsx
@@ -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";
@@ -111,17 +111,19 @@ export async function loadApp(fragParams: {}, matrixChatRef: React.Ref
-            
+            
+                
+            
         
     );
 }
diff --git a/src/vector/init.tsx b/src/vector/init.tsx
index da9827cb55..2028f9af36 100644
--- a/src/vector/init.tsx
+++ b/src/vector/init.tsx
@@ -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";
@@ -105,7 +105,9 @@ export async function showError(title: string, messages?: string[]): Promise,
+        
+            
+        ,
         document.getElementById("matrixchat"),
     );
 }
@@ -116,7 +118,9 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise,
+        
+            
+        ,
         document.getElementById("matrixchat"),
     );
 }