feat(app-shell): allow to enable StrictMode through shell (#3287)

* feat(app-shell): allow to enable StrictMode through shell

* feat: add strict mode prop to custom view shell

* Create green-stingrays-compete.md

.changeset/green-stingrays-compete.md

@@ -0,0 +1,5 @@
+---
+"@commercetools-frontend/application-shell": minor
+---
+
+The `ApplicationShell` and `CustomViewShell` not support an optional `enableReactStrictMode` prop to render their `children` in [Strict Mode](https://react.dev/reference/react/StrictMode). 

packages/application-shell/src/components/application-shell/application-shell.tsx

@@ -1,4 +1,9 @@
-import { type ReactNode, type SyntheticEvent, useEffect } from 'react';
+import {
+  type ReactNode,
+  type SyntheticEvent,
+  useEffect,
+  StrictMode,
+} from 'react';
 import type { NormalizedCacheObject } from '@apollo/client';
 import { ApolloClient } from '@apollo/client';
 import type { TFlags } from '@flopflip/types';
@@ -41,10 +46,24 @@ type TApplicationShellProps = {
   onRegisterErrorListeners?: (args: { dispatch: Dispatch }) => void;
   onMenuItemClick?: (event: SyntheticEvent<HTMLAnchorElement>) => void;
   disableRoutePermissionCheck?: boolean;
+  enableReactStrictMode?: boolean;
   render?: () => JSX.Element;
   children?: ReactNode;
 };
 
+type TStrictModeEnablementProps = {
+  enableReactStrictMode?: boolean;
+  children?: ReactNode;
+};
+
+const StrictModeEnablement = (props: TStrictModeEnablementProps) => {
+  if (props.enableReactStrictMode) {
+    return <StrictMode>{props.children}</StrictMode>;
+  } else {
+    return <>{props.children}</>;
+  }
+};
+
 const ApplicationShell = (props: TApplicationShellProps) => {
   useEffect(() => {
     props.onRegisterErrorListeners?.({
@@ -54,7 +73,7 @@ const ApplicationShell = (props: TApplicationShellProps) => {
   }, []); // <-- run only once, when component mounts
 
   return (
-    <>
+    <StrictModeEnablement enableReactStrictMode={props.enableReactStrictMode}>
       <GlobalStyles />
       <ApplicationShellProvider
         apolloClient={props.apolloClient}
@@ -88,7 +107,7 @@ const ApplicationShell = (props: TApplicationShellProps) => {
           return <RedirectToLogin />;
         }}
       </ApplicationShellProvider>
-    </>
+    </StrictModeEnablement>
   );
 };
 ApplicationShell.displayName = 'ApplicationShell';

packages/application-shell/src/components/custom-view-shell/custom-view-shell.tsx

@@ -4,6 +4,7 @@ import {
   useRef,
   useState,
   Suspense,
+  StrictMode,
   type ReactNode,
 } from 'react';
 import { PageUnauthorized } from '@commercetools-frontend/application-components';
@@ -45,11 +46,25 @@ type THostEventData = {
 type TCustomViewShellProps = {
   applicationMessages: TAsyncLocaleDataProps['applicationMessages'];
   disableDevHost?: boolean;
+  enableReactStrictMode?: boolean;
   children: ReactNode;
 };
 
 const browserLocale = getBrowserLocale(window);
 
+type TStrictModeEnablementProps = {
+  enableReactStrictMode?: boolean;
+  children?: ReactNode;
+};
+
+function StrictModeEnablement(props: TStrictModeEnablementProps) {
+  if (props.enableReactStrictMode) {
+    return <StrictMode>{props.children}</StrictMode>;
+  } else {
+    return <>{props.children}</>;
+  }
+}
+
 function CustomViewShell(props: TCustomViewShellProps) {
   const [hostContext, setHostContext] = useState<THostContext>();
   const iFrameCommunicationPort = useRef<MessagePort>();
@@ -160,19 +175,23 @@ function CustomViewShell(props: TCustomViewShellProps) {
 const CustomViewShellWrapper = (props: TCustomViewShellProps) => {
   if (process.env.NODE_ENV === 'development' && !props.disableDevHost) {
     return (
-      <Suspense fallback={<ApplicationLoader />}>
-        <CustomViewDevHost applicationMessages={props.applicationMessages}>
-          <CustomViewShell applicationMessages={props.applicationMessages}>
-            {props.children}
-          </CustomViewShell>
-        </CustomViewDevHost>
-      </Suspense>
+      <StrictModeEnablement enableReactStrictMode={props.enableReactStrictMode}>
+        <Suspense fallback={<ApplicationLoader />}>
+          <CustomViewDevHost applicationMessages={props.applicationMessages}>
+            <CustomViewShell applicationMessages={props.applicationMessages}>
+              {props.children}
+            </CustomViewShell>
+          </CustomViewDevHost>
+        </Suspense>
+      </StrictModeEnablement>
     );
   }
   return (
-    <CustomViewShell applicationMessages={props.applicationMessages}>
-      {props.children}
-    </CustomViewShell>
+    <StrictModeEnablement enableReactStrictMode={props.enableReactStrictMode}>
+      <CustomViewShell applicationMessages={props.applicationMessages}>
+        {props.children}
+      </CustomViewShell>
+    </StrictModeEnablement>
   );
 };