Merge pull request #45464 from margelo/compiler/mutating-refs

compiler: allow mutating `ref`s in certain components

babel.config.js

@@ -4,6 +4,9 @@ const IS_E2E_TESTING = process.env.E2E_TESTING === 'true';
 
 const ReactCompilerConfig = {
     runtimeModule: 'react-compiler-runtime',
+    environment: {
+        enableTreatRefLikeIdentifiersAsRefs: true,
+    },
 };
 const defaultPresets = ['@babel/preset-react', '@babel/preset-env', '@babel/preset-flow', '@babel/preset-typescript'];
 const defaultPlugins = [

patches/react-compiler-healthcheck+0.0.0-experimental-b130d5f-20240625+002+enable-ref-identifiers.patch

@@ -0,0 +1,28 @@
+diff --git a/node_modules/react-compiler-healthcheck/dist/index.js b/node_modules/react-compiler-healthcheck/dist/index.js
+index 4bf23db..fa2ab22 100755
+--- a/node_modules/react-compiler-healthcheck/dist/index.js
++++ b/node_modules/react-compiler-healthcheck/dist/index.js
+@@ -69088,6 +69088,9 @@ const COMPILER_OPTIONS = {
+   compilationMode: "infer",
+   panicThreshold: "critical_errors",
+   logger: logger,
++  environment: {
++    enableTreatRefLikeIdentifiersAsRefs: true,
++  },
+ };
+ function isActionableDiagnostic(detail) {
+   switch (detail.severity) {
+diff --git a/node_modules/react-compiler-healthcheck/src/checks/reactCompiler.ts b/node_modules/react-compiler-healthcheck/src/checks/reactCompiler.ts
+index 09c9b9b..d2418e0 100644
+--- a/node_modules/react-compiler-healthcheck/src/checks/reactCompiler.ts
++++ b/node_modules/react-compiler-healthcheck/src/checks/reactCompiler.ts
+@@ -51,6 +51,9 @@ const COMPILER_OPTIONS: Partial<PluginOptions> = {
+   compilationMode: "infer",
+   panicThreshold: "critical_errors",
+   logger,
++  environment: {
++    enableTreatRefLikeIdentifiersAsRefs: true,
++  },
+ };
+
+ function isActionableDiagnostic(detail: CompilerErrorDetailOptions) {

src/components/Composer/index.native.tsx

@@ -38,7 +38,7 @@ function Composer(
     ref: ForwardedRef<TextInput>,
 ) {
     const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
-    const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
+    const {isFocused, shouldResetFocusRef} = useResetComposerFocus(textInput);
     const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]);
     const theme = useTheme();
     const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles);
@@ -95,7 +95,7 @@ function Composer(
             onBlur={(e) => {
                 if (!isFocused) {
                     // eslint-disable-next-line react-compiler/react-compiler
-                    shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
+                    shouldResetFocusRef.current = true; // detect the input is blurred when the page is hidden
                 }
                 props?.onBlur?.(e);
             }}

src/components/VideoPlayer/BaseVideoPlayer.tsx

@@ -59,7 +59,7 @@ function BaseVideoPlayer({
         shareVideoPlayerElements,
         currentVideoPlayerRef,
         updateCurrentlyPlayingURL,
-        videoResumeTryNumber,
+        videoResumeTryNumberRef,
         setCurrentlyPlayingURL,
     } = usePlaybackContext();
     const {isFullScreenRef} = useFullScreenContext();
@@ -86,15 +86,15 @@ function BaseVideoPlayer({
     const {videoPopoverMenuPlayerRef, setCurrentPlaybackSpeed} = useVideoPopoverMenuContext();
 
     const togglePlayCurrentVideo = useCallback(() => {
-        videoResumeTryNumber.current = 0;
+        videoResumeTryNumberRef.current = 0;
         if (!isCurrentlyURLSet) {
             updateCurrentlyPlayingURL(url);
         } else if (isPlaying) {
             pauseVideo();
         } else {
             playVideo();
         }
-    }, [isCurrentlyURLSet, isPlaying, pauseVideo, playVideo, updateCurrentlyPlayingURL, url, videoResumeTryNumber]);
+    }, [isCurrentlyURLSet, isPlaying, pauseVideo, playVideo, updateCurrentlyPlayingURL, url, videoResumeTryNumberRef]);
 
     const showPopoverMenu = (event?: GestureResponderEvent | KeyboardEvent) => {
         videoPopoverMenuPlayerRef.current = videoPlayerRef.current;
@@ -118,16 +118,16 @@ function BaseVideoPlayer({
     // fix for iOS mWeb: preventing iOS native player default behavior from pausing the video when exiting fullscreen
     const preventPausingWhenExitingFullscreen = useCallback(
         (isVideoPlaying: boolean) => {
-            if (videoResumeTryNumber.current === 0 || isVideoPlaying) {
+            if (videoResumeTryNumberRef.current === 0 || isVideoPlaying) {
                 return;
             }
-            if (videoResumeTryNumber.current === 1) {
+            if (videoResumeTryNumberRef.current === 1) {
                 playVideo();
             }
             // eslint-disable-next-line react-compiler/react-compiler
-            videoResumeTryNumber.current -= 1;
+            videoResumeTryNumberRef.current -= 1;
         },
-        [playVideo, videoResumeTryNumber],
+        [playVideo, videoResumeTryNumberRef],
     );
 
     const handlePlaybackStatusUpdate = useCallback(
@@ -186,11 +186,11 @@ function BaseVideoPlayer({
                 if (videoStateRef.current && (!('isPlaying' in videoStateRef.current) || videoStateRef.current.isPlaying)) {
                     pauseVideo();
                     playVideo();
-                    videoResumeTryNumber.current = 3;
+                    videoResumeTryNumberRef.current = 3;
                 }
             }
         },
-        [isFullScreenRef, onFullscreenUpdate, pauseVideo, playVideo, videoResumeTryNumber, updateVolume, currentVideoPlayerRef],
+        [isFullScreenRef, onFullscreenUpdate, pauseVideo, playVideo, videoResumeTryNumberRef, updateVolume, currentVideoPlayerRef],
     );
 
     const bindFunctions = useCallback(() => {

src/components/VideoPlayerContexts/PlaybackContext.tsx

@@ -15,7 +15,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     const [originalParent, setOriginalParent] = useState<View | HTMLDivElement | null>(null);
     const currentVideoPlayerRef = useRef<VideoWithOnFullScreenUpdate | null>(null);
     const {currentReportID} = useCurrentReportID() ?? {};
-    const videoResumeTryNumber = useRef<number>(0);
+    const videoResumeTryNumberRef = useRef<number>(0);
 
     const pauseVideo = useCallback(() => {
         currentVideoPlayerRef.current?.setStatusAsync?.({shouldPlay: false});
@@ -73,7 +73,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     );
 
     const resetVideoPlayerData = useCallback(() => {
-        videoResumeTryNumber.current = 0;
+        videoResumeTryNumberRef.current = 0;
         stopVideo();
         setCurrentlyPlayingURL(null);
         setSharedElement(null);
@@ -102,7 +102,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             playVideo,
             pauseVideo,
             checkVideoPlaying,
-            videoResumeTryNumber,
+            videoResumeTryNumberRef,
         }),
         [
             updateCurrentlyPlayingURL,

src/components/VideoPlayerContexts/types.ts

@@ -13,7 +13,7 @@ type PlaybackContext = {
     currentlyPlayingURLReportID: string | undefined;
     originalParent: View | HTMLDivElement | null;
     sharedElement: View | HTMLDivElement | null;
-    videoResumeTryNumber: MutableRefObject<number>;
+    videoResumeTryNumberRef: MutableRefObject<number>;
     currentVideoPlayerRef: MutableRefObject<VideoWithOnFullScreenUpdate | null>;
     shareVideoPlayerElements: (ref: VideoWithOnFullScreenUpdate | null, parent: View | HTMLDivElement | null, child: View | HTMLDivElement | null, isUploading: boolean) => void;
     playVideo: () => void;

src/hooks/useResetComposerFocus.ts

@@ -5,15 +5,15 @@ import type {TextInput} from 'react-native';
 
 export default function useResetComposerFocus(inputRef: MutableRefObject<TextInput | null>) {
     const isFocused = useIsFocused();
-    const shouldResetFocus = useRef(false);
+    const shouldResetFocusRef = useRef(false);
 
     useEffect(() => {
-        if (!isFocused || !shouldResetFocus.current) {
+        if (!isFocused || !shouldResetFocusRef.current) {
             return;
         }
         inputRef.current?.focus(); // focus input again
-        shouldResetFocus.current = false;
+        shouldResetFocusRef.current = false;
     }, [isFocused, inputRef]);
 
-    return {isFocused, shouldResetFocus};
+    return {isFocused, shouldResetFocusRef};
 }