Resolve circular dependencies on JS side (#2970)

This PR removes circular dependencies and adds a workflow which checks for new ones.

.github/workflows/static-root-checks.yml

@@ -29,3 +29,5 @@ jobs:
         run: yarn tsc --noEmit
       - name: Lint
         run: yarn lint:js-root
+      - name: Check for circular dependencies
+        run: yarn circularDependencyCheck

package.json

@@ -15,7 +15,8 @@
     "lint:js": "eslint --ext '.js,.ts,.tsx' src/ example/src FabricExample/src MacOSExample/src && yarn prettier --check './{src,example,FabricExample,MacOSExample}/**/*.{js,jsx,ts,tsx}'",
     "lint:js-root": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check './src/**/*.{js,jsx,ts,tsx}'",
     "lint:android": "./android/gradlew -p android spotlessCheck -q",
-    "checkIntegrity": "(cd ./FabricExample/android && ./gradlew generateCodegenArtifactsFromSchema -PskipCodegenCopyTask) && (cd ./android && ./gradlew checkIntegrityBetweenArchitectures)"
+    "checkIntegrity": "(cd ./FabricExample/android && ./gradlew generateCodegenArtifactsFromSchema -PskipCodegenCopyTask) && (cd ./android && ./gradlew checkIntegrityBetweenArchitectures)",
+    "circularDependencyCheck": "yarn madge --extensions js,ts,tsx --circular src"
   },
   "react-native": "src/index.ts",
   "main": "lib/commonjs/index.js",

src/components/DrawerLayout.tsx

@@ -30,14 +30,12 @@ import {
   ActiveCursor,
   MouseButton,
 } from '../handlers/gestureHandlerCommon';
-import {
-  PanGestureHandler,
+import { PanGestureHandler } from '../handlers/PanGestureHandler';
+import type {
   PanGestureHandlerEventPayload,
-} from '../handlers/PanGestureHandler';
-import {
-  TapGestureHandler,
   TapGestureHandlerEventPayload,
-} from '../handlers/TapGestureHandler';
+} from '../handlers/GestureHandlerEventPayload';
+import { TapGestureHandler } from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;

src/components/GestureButtons.tsx

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  processColor,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { Animated, Platform, processColor, StyleSheet } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
 import GestureHandlerButton from './GestureHandlerButton';
@@ -16,118 +9,15 @@ import {
   GestureEvent,
   HandlerStateChangeEvent,
 } from '../handlers/gestureHandlerCommon';
-import {
-  NativeViewGestureHandlerPayload,
-  NativeViewGestureHandlerProps,
-} from '../handlers/NativeViewGestureHandler';
-
-export interface RawButtonProps extends NativeViewGestureHandlerProps {
-  /**
-   * Defines if more than one button could be pressed simultaneously. By default
-   * set true.
-   */
-  exclusive?: boolean;
-  // TODO: we should transform props in `createNativeWrapper`
-
-  /**
-   * Android only.
-   *
-   * Defines color of native ripple animation used since API level 21.
-   */
-  rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
-
-  /**
-   * Android only.
-   *
-   * Defines radius of native ripple animation used since API level 21.
-   */
-  rippleRadius?: number | null;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you want the ripple animation to render outside the view bounds.
-   */
-  borderless?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Defines whether the ripple animation should be drawn on the foreground of the view.
-   */
-  foreground?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you don't want the system to play sound when the button is pressed.
-   */
-  touchSoundDisabled?: boolean;
-}
-
-interface ButtonWithRefProps {
-  innerRef?: React.ForwardedRef<React.ComponentType<any>>;
-}
-
-export interface BaseButtonProps extends RawButtonProps {
-  /**
-   * Called when the button gets pressed (analogous to `onPress` in
-   * `TouchableHighlight` from RN core).
-   */
-  onPress?: (pointerInside: boolean) => void;
-
-  /**
-   * Called when the button gets pressed and is held for `delayLongPress`
-   * milliseconds.
-   */
-  onLongPress?: () => void;
-
-  /**
-   * Called when button changes from inactive to active and vice versa. It
-   * passes active state as a boolean variable as a first parameter for that
-   * method.
-   */
-  onActiveStateChange?: (active: boolean) => void;
-  style?: StyleProp<ViewStyle>;
-  testID?: string;
-
-  /**
-   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
-   * Defaults to 600.
-   */
-  delayLongPress?: number;
-}
-
-interface BaseButtonWithRefProps extends BaseButtonProps, ButtonWithRefProps {}
-
-export interface RectButtonProps extends BaseButtonProps {
-  /**
-   * Background color that will be dimmed when button is in active state.
-   */
-  underlayColor?: string;
-
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the underlay when button is in active state.
-   */
-  activeOpacity?: number;
-}
-
-interface RectButtonWithRefProps extends RectButtonProps, ButtonWithRefProps {}
-
-export interface BorderlessButtonProps extends BaseButtonProps {
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the button when it is in an active state.
-   */
-  activeOpacity?: number;
-}
-
-interface BorderlessButtonWithRefProps
-  extends BorderlessButtonProps,
-    ButtonWithRefProps {}
+import type { NativeViewGestureHandlerPayload } from '../handlers/GestureHandlerEventPayload';
+import type {
+  BaseButtonWithRefProps,
+  BaseButtonProps,
+  RectButtonWithRefProps,
+  RectButtonProps,
+  BorderlessButtonWithRefProps,
+  BorderlessButtonProps,
+} from './GestureButtonsProps';
 
 export const RawButton = createNativeWrapper(GestureHandlerButton, {
   shouldCancelWhenOutside: false,

src/components/GestureButtonsProps.ts

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
+
+export interface RawButtonProps extends NativeViewGestureHandlerProps {
+  /**
+   * Defines if more than one button could be pressed simultaneously. By default
+   * set true.
+   */
+  exclusive?: boolean;
+  // TODO: we should transform props in `createNativeWrapper`
+  /**
+   * Android only.
+   *
+   * Defines color of native ripple animation used since API level 21.
+   */
+  rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
+
+  /**
+   * Android only.
+   *
+   * Defines radius of native ripple animation used since API level 21.
+   */
+  rippleRadius?: number | null;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you want the ripple animation to render outside the view bounds.
+   */
+  borderless?: boolean;
+
+  /**
+   * Android only.
+   *
+   * Defines whether the ripple animation should be drawn on the foreground of the view.
+   */
+  foreground?: boolean;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you don't want the system to play sound when the button is pressed.
+   */
+  touchSoundDisabled?: boolean;
+}
+interface ButtonWithRefProps {
+  innerRef?: React.ForwardedRef<React.ComponentType<any>>;
+}
+
+export interface BaseButtonProps extends RawButtonProps {
+  /**
+   * Called when the button gets pressed (analogous to `onPress` in
+   * `TouchableHighlight` from RN core).
+   */
+  onPress?: (pointerInside: boolean) => void;
+
+  /**
+   * Called when the button gets pressed and is held for `delayLongPress`
+   * milliseconds.
+   */
+  onLongPress?: () => void;
+
+  /**
+   * Called when button changes from inactive to active and vice versa. It
+   * passes active state as a boolean variable as a first parameter for that
+   * method.
+   */
+  onActiveStateChange?: (active: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+
+  /**
+   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
+   * Defaults to 600.
+   */
+  delayLongPress?: number;
+}
+export interface BaseButtonWithRefProps
+  extends BaseButtonProps,
+    ButtonWithRefProps {}
+
+export interface RectButtonProps extends BaseButtonProps {
+  /**
+   * Background color that will be dimmed when button is in active state.
+   */
+  underlayColor?: string;
+
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the underlay when button is in active state.
+   */
+  activeOpacity?: number;
+}
+export interface RectButtonWithRefProps
+  extends RectButtonProps,
+    ButtonWithRefProps {}
+
+export interface BorderlessButtonProps extends BaseButtonProps {
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the button when it is in an active state.
+   */
+  activeOpacity?: number;
+}
+export interface BorderlessButtonWithRefProps
+  extends BorderlessButtonProps,
+    ButtonWithRefProps {}

src/components/GestureHandlerButton.tsx

@@ -1,5 +1,5 @@
 import { HostComponent } from 'react-native';
-import { RawButtonProps } from './GestureButtons';
+import type { RawButtonProps } from './GestureButtonsProps';
 import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
 
 export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;

src/components/ReanimatedSwipeable.tsx

@@ -15,10 +15,8 @@ import {
   GestureStateChangeEvent,
   GestureUpdateEvent,
 } from '../handlers/gestureHandlerCommon';
-import {
-  PanGestureHandlerEventPayload,
-  PanGestureHandlerProps,
-} from '../handlers/PanGestureHandler';
+import type { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
+import type { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEventPayload';
 import Animated, {
   Extrapolation,
   SharedValue,

src/components/Swipeable.tsx

@@ -20,13 +20,13 @@ import {
 } from '../handlers/gestureHandlerCommon';
 import {
   PanGestureHandler,
-  PanGestureHandlerEventPayload,
   PanGestureHandlerProps,
 } from '../handlers/PanGestureHandler';
 import {
-  TapGestureHandler,
+  PanGestureHandlerEventPayload,
   TapGestureHandlerEventPayload,
-} from '../handlers/TapGestureHandler';
+} from '../handlers/GestureHandlerEventPayload';
+import { TapGestureHandler } from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;

src/components/touchables/GenericTouchable.tsx

@@ -1,24 +1,17 @@
 import * as React from 'react';
 import { Component } from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  ViewStyle,
-  TouchableWithoutFeedbackProps,
-  Insets,
-} from 'react-native';
+import { Animated, Platform } from 'react-native';
 
 import { State } from '../../State';
 import { BaseButton } from '../GestureButtons';
 
 import {
   GestureEvent,
   HandlerStateChangeEvent,
-  UserSelect,
 } from '../../handlers/gestureHandlerCommon';
-import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
-import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
+import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
+import type { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedbackProps';
+import type { GenericTouchableProps } from './GenericTouchableProps';
 
 /**
  * Each touchable is a states' machine which preforms transitions.
@@ -35,26 +28,6 @@ export const TOUCHABLE_STATE = {
 
 type TouchableState = typeof TOUCHABLE_STATE[keyof typeof TOUCHABLE_STATE];
 
-export interface GenericTouchableProps
-  extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
-  // Decided to drop not used fields from RN's implementation.
-  // e.g. onBlur and onFocus as well as deprecated props. - TODO: this comment may be unuseful in this moment
-
-  // TODO: in RN these events get native event parameter, which prolly could be used in our implementation too
-  onPress?: () => void;
-  onPressIn?: () => void;
-  onPressOut?: () => void;
-  onLongPress?: () => void;
-
-  nativeID?: string;
-  shouldActivateOnStart?: boolean;
-  disallowInterruption?: boolean;
-
-  containerStyle?: StyleProp<ViewStyle>;
-  hitSlop?: Insets | number;
-  userSelect?: UserSelect;
-}
-
 interface InternalProps {
   extraButtonProps: TouchableNativeFeedbackExtraProps;
   onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;