feat: detect react-compiler rules violations (#518)

## 📜 Description

Added eslint plugin for `react-compiler` + plugin for detecting unused
`disable` directives.

## 💡 Motivation and Context

Since react-compiler was rolled out to public - it's crucial to
understand which part of the code in library can not be compiled
successfully and why. For that I added new eslint integration.

Also I know how to fix some of these violations, and don't want to have
outdated eslint comments in future, so I added a new plugin that detects
a usage of such unused directives and reports them.

I think this PR is a first step in `react-compiler` journey in this
library, so let's ship it 

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### JS

- added 2 new eslint rules;
- ignored all new violations;

## 🤔 How Has This Been Tested?

Tested via CI and manually.

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

.eslintrc.cjs

@@ -1,13 +1,22 @@
 module.exports = {
   root: true,
-  plugins: ["@typescript-eslint", "react", "react-native", "jest", "import"],
+  plugins: [
+    "@typescript-eslint",
+    "react",
+    "react-native",
+    "jest",
+    "import",
+    "react-compiler",
+    "eslint-comments",
+  ],
   extends: [
     "@react-native",
     "prettier",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:jest/recommended",
     "plugin:import/typescript",
+    "plugin:eslint-comments/recommended",
   ],
   settings: {
     "import/parsers": {
@@ -80,6 +89,10 @@ module.exports = {
         additionalTestBlockFunctions: [],
       },
     ],
+    // react-compiler
+    "react-compiler/react-compiler": "error",
+    // eslint-comments
+    "eslint-comments/no-unused-disable": "error",
   },
   overrides: [
     {

FabricExample/__tests__/keyboard-handler.spec.tsx

@@ -25,6 +25,7 @@ function TestComponent() {
     {
       onStart: (e) => {
         "worklet";
+        // eslint-disable-next-line react-compiler/react-compiler
         height.value = e.height;
       },
       onMove: (e) => {

FabricExample/src/components/KeyboardAnimation/index.tsx

@@ -20,6 +20,7 @@ const useGradualKeyboardAnimation = () => {
       onMove: (e) => {
         "worklet";
 
+        // eslint-disable-next-line react-compiler/react-compiler
         height.value = e.height;
       },
       onEnd: (e) => {

FabricExample/src/screens/Examples/FocusedInputHandlers/index.tsx

@@ -29,6 +29,7 @@ const TextInputWithMicSelection = (props: TextInputProps) => {
   const position = useSharedValue({ x: 0, y: 0 });
 
   useEffect(() => {
+    // eslint-disable-next-line react-compiler/react-compiler
     tag.value = findNodeHandle(ref.current) ?? -1;
   }, []);
 

FabricExample/src/screens/Examples/InteractiveKeyboard/index.tsx

@@ -26,6 +26,7 @@ const useKeyboardAnimation = () => {
     onMove: (e) => {
       "worklet";
 
+      // eslint-disable-next-line react-compiler/react-compiler
       progress.value = e.progress;
       height.value = e.height;
     },

FabricExample/src/screens/Examples/InteractiveKeyboardIOS/index.tsx

@@ -32,6 +32,7 @@ const useKeyboardAnimation = () => {
       // simply update `height` to destination and we need to listen to `onMove`
       // handler to have a smooth animation
       if (progress.value !== 1 && progress.value !== 0 && e.height !== 0) {
+        // eslint-disable-next-line react-compiler/react-compiler
         shouldUseOnMoveHandler.value = true;
         return;
       }

FabricExample/src/screens/Examples/Lottie/index.tsx

@@ -38,6 +38,7 @@ function LottieAnimation() {
       onMove: (e) => {
         "worklet";
 
+        // eslint-disable-next-line react-compiler/react-compiler
         progress.value = e.progress;
       },
     },

FabricExample/src/screens/Examples/Modal/index.tsx

@@ -38,6 +38,7 @@ export default function ModalExample() {
             onPress={() => setModalVisible(false)}
             testID="close_button"
           />
+          {/* eslint-disable-next-line react-compiler/react-compiler */}
           <KeyboardAnimationTemplate provider={useKeyboardAnimation} />
         </View>
       </Modal>

FabricExample/src/screens/Examples/NonUIProps/index.tsx

@@ -16,6 +16,7 @@ function useGradualKeyboardAnimation() {
       onMove: (e) => {
         "worklet";
 
+        // eslint-disable-next-line react-compiler/react-compiler
         height.value = e.height;
         progress.value = e.progress;
       },

FabricExample/src/screens/Examples/ReanimatedChat/hooks.ts

@@ -16,6 +16,7 @@ export const useTelegramTransitions = () => {
           // on Android Telegram is not using androidx.core values and uses custom interpolation
           // duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39
           // and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40
+          // eslint-disable-next-line react-compiler/react-compiler
           height.value = withTiming(-e.height, {
             duration: 250,
             easing: Easing.bezier(

FabricExample/src/screens/Examples/ReanimatedChatFlatList/index.tsx

@@ -28,6 +28,7 @@ const useGradualAnimation = () => {
       onMove: (e) => {
         "worklet";
 
+        // eslint-disable-next-line react-compiler/react-compiler
         height.value = e.height;
       },
       onEnd: (e) => {

example/__tests__/keyboard-handler.spec.tsx

@@ -25,6 +25,7 @@ function TestComponent() {
     {
       onStart: (e) => {
         "worklet";
+        // eslint-disable-next-line react-compiler/react-compiler
         height.value = e.height;
       },
       onMove: (e) => {

example/src/components/KeyboardAnimation/index.tsx

@@ -20,6 +20,7 @@ const useGradualKeyboardAnimation = () => {
       onMove: (e) => {
         "worklet";
 
+        // eslint-disable-next-line react-compiler/react-compiler
         height.value = e.height;
       },
       onEnd: (e) => {

example/src/screens/Examples/FocusedInputHandlers/index.tsx

@@ -31,6 +31,7 @@ const TextInputWithMicSelection = (props: TextInputProps) => {
   const position = useSharedValue({ x: 0, y: 0 });
 
   useEffect(() => {
+    // eslint-disable-next-line react-compiler/react-compiler
     tag.value = findNodeHandle(ref.current) ?? -1;
   }, []);
 

example/src/screens/Examples/InteractiveKeyboard/index.tsx

@@ -26,6 +26,7 @@ const useKeyboardAnimation = () => {
     onMove: (e) => {
       "worklet";
 
+      // eslint-disable-next-line react-compiler/react-compiler
       progress.value = e.progress;
       height.value = e.height;
     },

example/src/screens/Examples/InteractiveKeyboardIOS/index.tsx

@@ -32,6 +32,7 @@ const useKeyboardAnimation = () => {
       // simply update `height` to destination and we need to listen to `onMove`
       // handler to have a smooth animation
       if (progress.value !== 1 && progress.value !== 0 && e.height !== 0) {
+        // eslint-disable-next-line react-compiler/react-compiler
         shouldUseOnMoveHandler.value = true;
         return;
       }

example/src/screens/Examples/Lottie/index.tsx

@@ -38,6 +38,7 @@ function LottieAnimation() {
       onMove: (e) => {
         "worklet";
 
+        // eslint-disable-next-line react-compiler/react-compiler
         progress.value = e.progress;
       },
     },

example/src/screens/Examples/Modal/index.tsx

@@ -38,6 +38,7 @@ export default function ModalExample() {
             onPress={() => setModalVisible(false)}
             testID="close_button"
           />
+          {/* eslint-disable-next-line react-compiler/react-compiler */}
           <KeyboardAnimationTemplate provider={useKeyboardAnimation} />
         </View>
       </Modal>

example/src/screens/Examples/NonUIProps/index.tsx

@@ -16,6 +16,7 @@ function useGradualKeyboardAnimation() {
       onMove: (e) => {
         "worklet";
 
+        // eslint-disable-next-line react-compiler/react-compiler
         height.value = e.height;
         progress.value = e.progress;
       },

example/src/screens/Examples/ReanimatedChat/hooks.ts

@@ -16,6 +16,7 @@ export const useTelegramTransitions = () => {
           // on Android Telegram is not using androidx.core values and uses custom interpolation
           // duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39
           // and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40
+          // eslint-disable-next-line react-compiler/react-compiler
           height.value = withTiming(-e.height, {
             duration: 250,
             easing: Easing.bezier(

example/src/screens/Examples/ReanimatedChatFlatList/index.tsx

@@ -28,6 +28,7 @@ const useGradualAnimation = () => {
       onMove: (e) => {
         "worklet";
 
+        // eslint-disable-next-line react-compiler/react-compiler
         height.value = e.height;
       },
       onEnd: (e) => {

package.json

@@ -81,9 +81,11 @@
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-0998c1e-20240625",
     "husky": "^6.0.0",
     "jest": "^29.6.3",
     "pod-install": "^0.1.0",

src/animated.tsx

@@ -136,6 +136,7 @@ export const KeyboardProvider = ({
     "worklet";
 
     if (platforms.includes(OS)) {
+      // eslint-disable-next-line react-compiler/react-compiler
       progressSV.value = event.progress;
       heightSV.value = -event.height;
     }

src/components/KeyboardAvoidingView/hooks.ts

@@ -18,6 +18,7 @@ export const useKeyboardAnimation = () => {
         "worklet";
 
         if (e.height > 0) {
+          // eslint-disable-next-line react-compiler/react-compiler
           isClosed.value = false;
           heightWhenOpened.value = e.height;
         }

src/components/KeyboardAvoidingView/index.tsx

@@ -85,6 +85,7 @@ const KeyboardAvoidingView = forwardRef<
       "worklet";
 
       if (keyboard.isClosed.value || initialFrame.value === null) {
+        // eslint-disable-next-line react-compiler/react-compiler
         initialFrame.value = layout;
       }
     }, []);

src/components/KeyboardAwareScrollView/index.tsx

@@ -197,6 +197,7 @@ const KeyboardAwareScrollView = forwardRef<
           return;
         }
 
+        // eslint-disable-next-line react-compiler/react-compiler
         layout.value = {
           ...input.value,
           layout: {

src/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.ts

@@ -65,6 +65,7 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
       // dispatch `onEnd`
       if (evt.height === height.value) {
         handler.onEnd?.(evt);
+        // eslint-disable-next-line react-compiler/react-compiler
         persistedHeight.value = height.value;
       }
     },

src/internal.ts

@@ -37,6 +37,7 @@ export function useSharedHandlers<
   // that it will have all of them) and then update them in worklet thread (calls are
   // happening in FIFO order, so we will always have actual value).
   const updateSharedHandlers = () => {
+    // eslint-disable-next-line react-compiler/react-compiler
     handlers.value = jsHandlers.current;
   };
   const setHandlers = useCallback((handler: Handlers<T>) => {