chore: Add initialCheck capability to alert/flash content API

pages/alert/runtime-content.page.tsx

@@ -60,6 +60,13 @@ awsuiPlugins.alertContent.registerContentReplacer({
       },
     };
   },
+  initialCheck(context) {
+    const found = context.type === 'error' && context.contentText?.match('Access denied');
+    return {
+      header: found ? 'remove' : 'original',
+      content: found ? 'replaced' : 'original',
+    };
+  },
 });
 
 const alertTypeOptions = ['error', 'warning', 'info', 'success'].map(type => ({ value: type }));
@@ -106,15 +113,15 @@ export default function () {
         <ScreenshotArea gutters={false}>
           {hidden ? null : (
             <SpaceBetween size="m">
-              <Alert
+              {/* <Alert
                 type={type}
                 statusIconAriaLabel={type}
                 dismissAriaLabel="Dismiss"
                 header="Header"
                 action={<Button>Action</Button>}
               >
                 {!contentSwapped ? content1 : content2}
-              </Alert>
+              </Alert> */}
 
               <Alert
                 type={type}

src/alert/internal.tsx

@@ -39,7 +39,7 @@ const typeToIcon: Record<AlertProps.Type, IconProps['name']> = {
 type InternalAlertProps = SomeRequired<AlertProps, 'type'> & InternalBaseComponentProps<HTMLDivElement>;
 
 const useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);
-const useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent.onContentRegistered);
+const useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);
 
 const InternalAlert = React.forwardRef(
   (

src/flashbar/flash.tsx

@@ -38,7 +38,7 @@ const ICON_TYPES = {
 } as const;
 
 const useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.flashbar.onActionRegistered);
-const useDiscoveredContent = createUseDiscoveredContent('flash', awsuiPluginsInternal.flashContent.onContentRegistered);
+const useDiscoveredContent = createUseDiscoveredContent('flash', awsuiPluginsInternal.flashContent);
 
 function dismissButton(
   dismissLabel: FlashbarProps.MessageDefinition['dismissLabel'],

src/internal/plugins/controllers/alert-flash-content.ts

@@ -1,6 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { ReactNode } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+
 import debounce from '../../debounce';
 
 // this code should not depend on React typings, because it is portable between major versions
@@ -14,6 +17,18 @@ export interface AlertFlashContentContext {
   contentRef: RefShim<HTMLElement>;
 }
 
+interface AlertFlashContentInitialContextRaw {
+  type: string;
+  header?: ReactNode;
+  content?: ReactNode;
+}
+
+export interface AlertFlashContentInitialContext {
+  type: string;
+  headerText?: string;
+  contentText?: string;
+}
+
 export type ReplacementType = 'original' | 'remove' | 'replaced';
 
 export interface ReplacementApi {
@@ -30,9 +45,15 @@ export interface AlertFlashContentResult {
   unmount: (containers: { replacementHeaderContainer: HTMLElement; replacementContentContainer: HTMLElement }) => void;
 }
 
+export interface AlertFlashContentInitialResult {
+  header: ReplacementType;
+  content: ReplacementType;
+}
+
 export interface AlertFlashContentConfig {
   id: string;
   runReplacer: (context: AlertFlashContentContext, replacementApi: ReplacementApi) => AlertFlashContentResult;
+  initialCheck?: (context: AlertFlashContentInitialContext) => AlertFlashContentInitialResult;
 }
 
 export type AlertFlashContentRegistrationListener = (provider: AlertFlashContentConfig) => () => void;
@@ -44,8 +65,15 @@ export interface AlertFlashContentApiPublic {
 export interface AlertFlashContentApiInternal {
   clearRegisteredReplacer(): void;
   onContentRegistered(listener: AlertFlashContentRegistrationListener): () => void;
+  initialSyncRender(context: AlertFlashContentInitialContextRaw): AlertFlashContentInitialResult;
 }
 
+const nodeAsString = (node: ReactNode) =>
+  flattenChildren(node)
+    .map(node => (typeof node === 'object' ? node.props.children : node))
+    .filter(node => typeof node === 'string')
+    .join('');
+
 export class AlertFlashContentController {
   #listeners: Array<AlertFlashContentRegistrationListener> = [];
   #cleanups = new Map<AlertFlashContentRegistrationListener, () => void>();
@@ -79,6 +107,21 @@ export class AlertFlashContentController {
     this.#provider = undefined;
   };
 
+  initialSyncRender = (context: AlertFlashContentInitialContextRaw): AlertFlashContentInitialResult => {
+    if (this.#provider?.initialCheck) {
+      const processedContext: AlertFlashContentInitialContext = {
+        type: context.type,
+        headerText: nodeAsString(context.header),
+        contentText: nodeAsString(context.content),
+      };
+      return this.#provider.initialCheck(processedContext);
+    }
+    return {
+      header: 'original',
+      content: 'original',
+    };
+  };
+
   onContentRegistered = (listener: AlertFlashContentRegistrationListener) => {
     if (this.#provider) {
       const cleanup = listener(this.#provider);
@@ -102,6 +145,7 @@ export class AlertFlashContentController {
   installInternal(internalApi: Partial<AlertFlashContentApiInternal> = {}): AlertFlashContentApiInternal {
     internalApi.clearRegisteredReplacer ??= this.clearRegisteredReplacer;
     internalApi.onContentRegistered ??= this.onContentRegistered;
+    internalApi.initialSyncRender ??= this.initialSyncRender;
     return internalApi as AlertFlashContentApiInternal;
   }
 }

src/internal/plugins/helpers/use-discovered-content.tsx

@@ -3,15 +3,12 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
 
 import {
-  AlertFlashContentController,
+  AlertFlashContentApiInternal,
   AlertFlashContentResult,
   ReplacementType,
 } from '../controllers/alert-flash-content';
 
-export function createUseDiscoveredContent(
-  componentName: string,
-  onContentRegistered: AlertFlashContentController['onContentRegistered']
-) {
+export function createUseDiscoveredContent(componentName: string, controller: AlertFlashContentApiInternal) {
   return function useDiscoveredContent({
     type,
     header,
@@ -25,14 +22,21 @@ export function createUseDiscoveredContent(
     const contentRef = useRef<HTMLDivElement>(null);
     const replacementHeaderRef = useRef<HTMLDivElement>(null);
     const replacementContentRef = useRef<HTMLDivElement>(null);
-    const [headerReplacementType, setFoundHeaderReplacement] = useState<ReplacementType>('original');
-    const [contentReplacementType, setFoundContentReplacement] = useState<ReplacementType>('original');
+    const [initialState] = useState(() =>
+      controller.initialSyncRender({
+        type,
+        header,
+        content: children,
+      })
+    );
+    const [headerReplacementType, setFoundHeaderReplacement] = useState<ReplacementType>(initialState.header);
+    const [contentReplacementType, setFoundContentReplacement] = useState<ReplacementType>(initialState.content);
     const mountedProvider = useRef<AlertFlashContentResult | undefined>();
 
     useEffect(() => {
       const context = { type, headerRef, contentRef };
 
-      return onContentRegistered(provider => {
+      return controller.onContentRegistered(provider => {
         let mounted = true;
 
         function checkMounted(methodName: string) {