Align to state hooks pattern

Author: compulim

packages/fluent-theme/src/components/assets/AssetComposer.tsx

@@ -22,7 +22,10 @@ const AssetComposer = memo(({ children }: AssetComposerProps) => {
   useEffect(() => () => URL.revokeObjectURL(slidingDotsURL), [slidingDotsURL]);
 
   const context = useMemo<ContextType>(
-    () => Object.freeze({ urlMap: new Map<AssetName, URL>([['sliding dots', new URL(slidingDotsURL)]]) }),
+    () =>
+      Object.freeze({
+        urlStateMap: new Map<AssetName, readonly [URL]>([['sliding dots', Object.freeze([new URL(slidingDotsURL)])]])
+      }),
     [slidingDotsURL]
   );
 

packages/fluent-theme/src/components/assets/SlidingDots.tsx

@@ -9,9 +9,9 @@ type SlidingDotsProps = Readonly<{ className: string }>;
 
 const SlidingDots = ({ className }: SlidingDotsProps) => {
   const [shouldReduceMotion] = useShouldReduceMotion();
+  const [url] = useAssetURL('sliding dots');
   const localize = useLocalizer();
   const objectElementRef = useRef<HTMLObjectElement>(null);
-  const url = useAssetURL('sliding dots');
 
   const altText = localize('TYPING_INDICATOR_ALT');
   const shouldReduceMotionRef = useRefFrom(shouldReduceMotion);

packages/fluent-theme/src/components/assets/private/Context.ts

@@ -3,14 +3,14 @@ import { createContext } from 'react';
 import type { AssetName } from '../AssetName';
 
 type ContextType = Readonly<{
-  urlMap: ReadonlyMap<AssetName, URL>;
+  urlStateMap: ReadonlyMap<AssetName, readonly [URL]>;
 }>;
 
 type ContextAsGetter<T extends Record<string, unknown>> =
   T extends Record<infer K, infer V> ? Record<K, { get(): V }> : never;
 
 const defaultContextValue: ContextAsGetter<ContextType> = {
-  urlMap: {
+  urlStateMap: {
     get() {
       throw new Error('urlMap cannot be used outside of <AssetComposerContext>.');
     }

packages/fluent-theme/src/components/assets/useAssetURL.ts

@@ -1,12 +1,12 @@
 import { type AssetName } from './AssetName';
 import useContext from './private/useContext';
 
-export default function useAssetURL(assetName: AssetName): URL {
-  const url = useContext().urlMap.get(assetName);
+export default function useAssetURL(assetName: AssetName): readonly [URL] {
+  const urlState = useContext().urlStateMap.get(assetName);
 
-  if (!url) {
+  if (!urlState) {
     throw new Error(`botframework-webchat-fluent-theme internal: Asset "${assetName}" was not found.`);
   }
 
-  return url;
+  return urlState;
 }