Direct inject after building style elements

Author: compulim

__tests__/html2/themeProvider/override.html

@@ -127,7 +127,7 @@
           'fluent-theme',
           'component/decorator',
           'component',
-          'component/CustomProperties'
+          'component/CustomPropertiesContainer'
         ]);
 
         await directLine.emulateIncomingActivity('Hello, World!');
@@ -154,7 +154,7 @@
           'fluent-theme',
           'component/decorator',
           'component',
-          'component/CustomProperties'
+          'component/CustomPropertiesContainer'
         ]);
       });
     </script>

packages/component/src/Composer.tsx

@@ -50,7 +50,7 @@ import createDefaultSendBoxMiddleware from './SendBox/createMiddleware';
 import createDefaultSendBoxToolbarMiddleware from './SendBoxToolbar/createMiddleware';
 import createStyleSet from './Styles/createStyleSet';
 import CustomPropertiesContainer from './Styles/CustomPropertiesContainer';
-import InjectComponentCSS from './Styles/InjectComponentCSS';
+import ComponentCSS from './stylesheet/ComponentCSS';
 import { type ContextOf } from './types/ContextOf';
 import { type FocusTranscriptInit } from './types/internal/FocusTranscriptInit';
 import addTargetBlankToHyperlinksMarkdown from './Utils/addTargetBlankToHyperlinksMarkdown';
@@ -486,9 +486,9 @@ const InternalComposer = ({
 
 const Composer = (props: ComposerProps) => (
   // eslint-disable-next-line react/destructuring-assignment
-  <InjectComponentCSS nonce={props.nonce}>
+  <ComponentCSS nonce={props.nonce}>
     <InternalComposer {...props} />
-  </InjectComponentCSS>
+  </ComponentCSS>
 );
 
 Composer.defaultProps = {

packages/component/src/Styles/InjectCSS.tsx

@@ -6,12 +6,11 @@ import {
   type DecoratorMiddleware
 } from 'botframework-webchat-api/decorator';
 import React, { memo } from 'react';
-import { object, optional, pipe, readonly, type InferInput } from 'valibot';
+import { object, optional, pipe, readonly, string, undefinedable, type InferInput } from 'valibot';
 
-import useNonce from '../../hooks/internal/useNonce';
+import DecoratorCSS from '../../stylesheet/DecoratorCSS';
 import BorderFlair from './BorderFlair';
 import BorderLoader from './BorderLoader';
-import InjectDecoratorCSS from './InjectDecoratorCSS';
 
 const middleware: readonly DecoratorMiddleware[] = Object.freeze([
   createActivityBorderMiddleware(function BorderFlairDecorator({ request, Next, ...props }) {
@@ -32,22 +31,21 @@ const middleware: readonly DecoratorMiddleware[] = Object.freeze([
 
 const webChatDecoratorPropsSchema = pipe(
   object({
-    children: optional(reactNode())
+    children: optional(reactNode()),
+    nonce: undefinedable(string())
   }),
   readonly()
 );
 
 type WebChatDecoratorProps = InferInput<typeof webChatDecoratorPropsSchema>;
 
 function WebChatDecorator(props: WebChatDecoratorProps) {
-  const { children } = validateProps(webChatDecoratorPropsSchema, props);
-
-  const [nonce] = useNonce();
+  const { children, nonce } = validateProps(webChatDecoratorPropsSchema, props);
 
   return (
-    <InjectDecoratorCSS nonce={nonce}>
+    <DecoratorCSS nonce={nonce}>
       <DecoratorComposer middleware={middleware}>{children}</DecoratorComposer>
-    </InjectDecoratorCSS>
+    </DecoratorCSS>
   );
 }
 

packages/component/src/Styles/InjectComponentCSS.tsx

@@ -0,0 +1,37 @@
+// TODO: [P2] This component can be replaced by `bindProps(InjectCSS)({ cssContent, identifier })`.
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { makeCreateStyles } from '@msinternal/botframework-webchat-styles';
+import React, { memo, useMemo } from 'react';
+import { object, optional, pipe, readonly, string, undefinedable, type InferInput } from 'valibot';
+
+import { InjectStyleElementsComposer } from '../boot/internal';
+import { componentCSSContent } from '../cssContent';
+
+const componentCSSPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    nonce: undefinedable(string())
+  }),
+  readonly()
+);
+
+type ComponentCSSProps = InferInput<typeof componentCSSPropsSchema>;
+
+function ComponentCSS(props: ComponentCSSProps) {
+  const { children, nonce } = validateProps(componentCSSPropsSchema, props);
+
+  const styleElements = useMemo(() => {
+    const styleElements = makeCreateStyles(componentCSSContent)('component');
+
+    nonce && styleElements.forEach(element => element.setAttribute('nonce', nonce));
+
+    return styleElements;
+  }, [nonce]);
+
+  return <InjectStyleElementsComposer styleElements={styleElements}>{children}</InjectStyleElementsComposer>;
+}
+
+ComponentCSS.displayName = 'ComponentCSS';
+
+export default memo(ComponentCSS);
+export { componentCSSPropsSchema, type ComponentCSSProps };

packages/component/src/decorator/private/InjectDecoratorCSS.tsx

@@ -0,0 +1,37 @@
+// TODO: [P2] This component can be replaced by `bindProps(InjectCSS)({ cssContent, identifier })`.
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { makeCreateStyles } from '@msinternal/botframework-webchat-styles';
+import React, { memo, useMemo } from 'react';
+import { object, optional, pipe, readonly, string, undefinedable, type InferInput } from 'valibot';
+
+import { InjectStyleElementsComposer } from '../boot/internal';
+import { decoratorCSSContent } from '../cssContent';
+
+const decoratorCSSPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    nonce: undefinedable(string())
+  }),
+  readonly()
+);
+
+type DecoratorCSSProps = InferInput<typeof decoratorCSSPropsSchema>;
+
+function DecoratorCSS(props: DecoratorCSSProps) {
+  const { children, nonce } = validateProps(decoratorCSSPropsSchema, props);
+
+  const styleElements = useMemo(() => {
+    const styleElements = makeCreateStyles(decoratorCSSContent)('component/decorator');
+
+    nonce && styleElements.forEach(element => element.setAttribute('nonce', nonce));
+
+    return styleElements;
+  }, [nonce]);
+
+  return <InjectStyleElementsComposer styleElements={styleElements}>{children}</InjectStyleElementsComposer>;
+}
+
+DecoratorCSS.displayName = 'DecoratorCSS';
+
+export default memo(DecoratorCSS);
+export { decoratorCSSPropsSchema, type DecoratorCSSProps };

packages/component/src/decorator/private/WebChatDecorator.tsx

@@ -107,7 +107,11 @@ function FluentThemeProvider(props: FluentThemeProviderProps) {
             typingIndicatorMiddleware={typingIndicatorMiddleware}
           >
             <AssetComposer>
-              <WebChatDecorator>
+              {/*
+                <Composer> is not set up yet, we have no place to send nonce.
+                This is temporal, until we decided to fold <WebChatDecorator> back into <Composer>.
+              */}
+              <WebChatDecorator nonce={nonce}>
                 <DecoratorComposer middleware={decoratorMiddleware}>{children}</DecoratorComposer>
               </WebChatDecorator>
             </AssetComposer>